Dreamweaver MX中文版建站攻略 26 ---30

摘星奴 发布于2004-2-22 20:15 979 次浏览 6 位用户参与讨论   [复制分享主题]

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区

您需要 登录 才可以下载或查看,没有账号?註冊

x
<P align=center style="TEXT-ALIGN: left"><SPAN style="COLOR: black; FONT-FAMILY: 宋体">调整布局表格的大小</SPAN><B><SPAN lang=EN style="COLOR: black">:</SPAN><SPAN lang=EN> </SPAN><SPAN style="FONT-FAMILY: 宋体">通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。拖动选择控制点来调整表格的大小。</SPAN>1 e6 Q2 o$ w8 [
$ B! t3 e, \/ a# Z

1 T, c3 ~3 t9 m/ S<P align=center><SPAN lang=EN><IMG height=222 src="http://www.gocn.net/mbsky/study/20031246039734.jpg" width=553 v:shapes="_x0000_i1026"></SPAN>+ O# y" }4 a( [: b  X
+ X/ X8 D- Z0 Q) Q: n+ K
5 n/ a! W# [8 q* Q5 |
<P align=left style="TEXT-ALIGN: left"><SPAN style="COLOR: black; FONT-FAMILY: 宋体">移动布局表格</SPAN><B><SPAN lang=EN style="COLOR: black">:</SPAN></B><SPAN lang=EN> </SPAN><SPAN style="FONT-FAMILY: 宋体">通过单击表格顶部的标签选择一个表格。该表格周围出现选择控制点。</SPAN> <SPAN style="FONT-FAMILY: 宋体">将表格拖到页上的另一个位置。</SPAN><SPAN lang=EN>(</SPAN><SPAN style="FONT-FAMILY: 宋体">只有当布局表格嵌套在另一个布局表格中时,才可以移动该布局表格</SPAN><SPAN lang=EN>)</SPAN><SPAN style="FONT-FAMILY: 宋体">。</SPAN>- C2 C' K, V' l1 V  @1 j
- [8 {; ?* n5 l; t, y, j. [

% I/ v; ]/ b$ ]; e5 W% X<DIV align=center><SPAN lang=EN style="COLOR: black"><IMG height=222 src="http://www.gocn.net/mbsky/study/20031246039580.jpg" width=553 v:shapes="_x0000_i1027"></SPAN> : y& w( B7 u9 a9 r1 D
7 k' g$ P2 r9 y- c1 O1 S

) u. @! O& ?( ^</DIV>7 a: ~; l' x8 [5 e
<P align=center>        " `& w# ?# e; D) I

% E1 N9 v. T! B: I$ ^" U</B>

已有(6)人评论

摘星奴 发表于 2004-2-22 20:21:30 | 显示全部楼层
<TABLE align=center border=0 cellPadding=0 cellSpacing=0 class=p4 width="95%">
9 I: w4 N0 q* S+ F; m; D<TBODY>' y' [9 e2 ^; e( F$ i, W
<TR>& J) S3 I1 ^, u2 m1 X  M) R4 q- ^
<TD vAlign=top>
& M% u6 e) r1 |! G" b9 I5 j<SPAN style="FONT-FAMILY: 宋体">如果在单元格中插入了一个大于单元格宽度的图像,在布局标题上就有两种大小,如图:</SPAN>
1 J1 ^  O* g: C/ t  T. [
2 u- h5 R% L1 b: n; L4 ~5 q, R) P" i/ _' |$ i! E* _
<P align=center><SPAN lang=EN><IMG height=432 src="http://www.gocn.net/mbsky/study/2003124610734.jpg" width=554 v:shapes="_x0000_i1025"> </SPAN>
7 C8 I# a- v; \7 m" ~8 n7 W+ B7 t# c
( J" T2 K# C6 m4 E3 B: }4 h% _7 R
<SPAN style="FONT-FAMILY: 宋体">选择使单元格宽度一致。</SPAN>
1 h3 V0 [' W& X. S) H+ P
: N. L9 J  x8 k+ A1 n+ r; T5 @  H/ T( W. ]
<P align=center><SPAN lang=EN><IMG height=432 src="http://www.gocn.net/mbsky/study/2003124610580.jpg" width=554 v:shapes="_x0000_i1026"> </SPAN>
1 P2 I4 d* s$ H+ n. f. w& [2 n7 t: }9 `9 W9 j: K! e) o3 c6 Z
. t2 V+ ]1 `) T! @1 j9 _4 ^
<SPAN style="FONT-FAMILY: 宋体">设置列宽度为自动伸展:</SPAN>
: N9 X3 L- s# |2 K' b
" I! g9 B9 E- G
6 g$ Z1 d# p# n: ^<SPAN style="FONT-FAMILY: 宋体">设置列宽度为自动伸展的意义:把一行中的一列设置为自动伸展,可以使这行始终在访问者浏览器窗口整个宽度显示。自动伸展列的宽度随着浏览器窗口的宽度自动变化。</SPAN>$ B0 v: h; B+ p) D) m

$ c% C" q5 \# V$ K' R6 ^5 f3 ]: ?9 `* b$ q( }
<SPAN style="FONT-FAMILY: 宋体">自动伸展列的列标题区域显示波浪线而不是数字。</SPAN>
, L1 k1 w0 q/ I
" r- ]1 S1 v% l) E8 U; m4 g
2 j2 p1 o4 A' i+ r5 _$ p* s<SPAN style="FONT-FAMILY: 宋体">在一行中,最好只选择最右边的一列为自动伸展。选中一列的标题区域,选择“列设置为自动伸展”</SPAN>6 p# Q" e& J! g# J  U' z5 @, ?
7 ^0 B# T# b$ P" S
2 U$ C) h+ _" T% i7 h
<P align=center><SPAN lang=EN><IMG height=222 src="http://www.gocn.net/mbsky/study/2003124611621.jpg" width=545 v:shapes="_x0000_i1027"> </SPAN>
. I) `/ V* N: i2 ]2 z' g# Z' [/ U7 }4 v

. @# r( a4 r; i* g; M5 q<SPAN style="FONT-FAMILY: 宋体">如果是第一次设置自动伸展,就会出现“选择间隔图像”对话框,选择“创建间隔图像文件”。</SPAN>" m. w) P0 n9 |. x' o

& p3 s% t9 A4 f</TD></TR></TBODY></TABLE>
摘星奴 发表于 2004-2-22 20:36:33 | 显示全部楼层
<TABLE align=center border=0 cellPadding=2 cellSpacing=0 class=border width="100%">% s7 L3 @* d/ L$ q' f" ?. d
<TBODY>$ i; i9 g8 N6 i" B/ `0 E' s
<TR align=middle class=tdbg_rightall>% g! j& j5 u5 B3 A8 M& h
<TD colSpan=2>]</TD></TR>
, \, ]0 B7 f  W$ N<TR>6 F! ?' p, Q& P0 s+ Z) _
<TD colSpan=2>- ^6 Q* V4 a- o6 Y, q' X& u
<TABLE align=center border=0 cellPadding=0 cellSpacing=5 style="WORD-BREAK: break-all" width=740>
" }$ k0 I' e5 Q, B! y<TBODY>
" u" A( L4 B: r' x- w+ U, R<TR>
& v  ?9 n( m# o8 E! H! x<TD height=200 vAlign=top>
" \+ R& X5 Q8 \/ `7 Z/ \<TABLE align=left border=0 cellPadding=10 cellSpacing=0>1 M; p4 n3 a3 Y! A7 k4 \$ i4 W/ y
<TBODY>
7 g" b( r. ?/ u1 Q8 y<TR>( K% {6 J( J' P4 C. v# f* q
<TD></TD></TR></TBODY></TABLE>
: E3 B  ?% g* }0 K' _<P align=center><SPAN lang=EN><IMG height=204 src="http://www.gocn.net/mbsky/study/20031246118734.jpg" width=434 v:shapes="_x0000_i1028"> </SPAN>
8 _* K9 ^! [$ }7 a+ m4 x! ]. P* I
6 x  }* Y+ ^5 x, q9 W2 ~+ r/ V) c2 C- h8 k$ V- V
<SPAN style="FONT-FAMILY: 宋体">按确定按钮,自动会有一个</SPAN><SPAN lang=EN>spacer.gif</SPAN><SPAN style="FONT-FAMILY: 宋体">文件,选择保存。</SPAN>7 o5 X) @* ?$ T) z2 m

" g$ _. P2 B9 h
9 Y/ p1 }; h3 b+ `' q* I2 {9 G% H<P align=center><SPAN lang=EN><IMG height=373 src="http://www.gocn.net/mbsky/study/20031246119580.jpg" width=446 v:shapes="_x0000_i1029"> </SPAN>
$ h) H" ]% q6 r4 U' o9 V6 Y, _+ d- e& l' X2 |5 z& N# i2 c
1 a$ i+ Y0 C# u* P- p
<SPAN style="FONT-FAMILY: 宋体">自动伸展列的标题区域显示波浪线,一个自动伸展列就做好了。</SPAN>
) ?8 z+ Z" w* @: u( ?8 p: _& E0 B0 t! r7 X. e) {" t" |
# r" o7 m. F; O. U3 R/ C
<P align=center><SPAN lang=EN><IMG height=136 src="http://www.gocn.net/mbsky/study/20031246119621.jpg" width=554 v:shapes="_x0000_i1030"></SPAN>5 w  n  g- Y# Y8 Q* ?! s9 I: q
2 N, A9 i" ]+ f

  @% y: Z# ^, J, W8 n<P align=center>       
: }9 a0 T7 Y' ~
0 o- }. F) |/ e1 j+ ~. ?! Y</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
摘星奴 发表于 2004-2-22 20:39:33 | 显示全部楼层
<TABLE align=left border=0 cellPadding=10 cellSpacing=0>* }$ ?0 P8 a0 J) Y* b1 ]. Z
<TBODY>/ G8 d; S% ?! `: N- \# P
<TR>
' D% @5 d3 [5 H, P6 t4 q1 v, j+ c. O<TD></TD></TR></TBODY></TABLE>/ L; L# M! _4 L( ^: n4 W
  在向网页填充内容之前,需要准备素材,包括网站的LOGO,Banner,图片,Flash动画,各种按钮,声音文件,用于布局参考的参考图像。把这些内容复制到站点中。教程的实例是把图片复制到站点中的images文件夹,参考图像复制到image文件夹。<BR>简明步骤:准备各种素材复制到站点中→设置页面的跟踪图像→插入表格确定尺寸→布局→从资源面板中把资源拖到页面。<BR>用Fireworks制作一个页面的效果图,或者用一个已经存在的页面做布局的参考。打开本教程示范站点media,打开index.html,设置页面属性,选择跟踪图像,点游览按钮。% \5 c+ G/ i3 p( l4 a) L9 k
4 J# ^# }% _8 d2 _  t2 T
; s+ z$ l- v2 f+ s4 ^, b
<P align=center><IMG height=363 src="http://www.gocn.net/mbsky/study/20031246137734.jpg" width=497>   o5 n0 ~/ s1 P1 [. [/ P3 U
- c) m' T9 D& i/ I& F1 U

2 o% J  e, _9 P/ u/ i: I$ \选择跟踪图像,这个跟踪图像,是已经做好的图像。也可以是其它网站页面的截图。如果觉得跟踪图像太亮,可以调整跟踪图像的透明度,当透明度为0%时,跟踪图像就看不到了,百分比越小,跟踪图像越不明显。建议设置为50%以下,以便和页面内容区别。, v8 \/ q! F3 t  A! e$ Q

) ~5 k1 C8 w4 m, W, k
) S8 X( C4 u8 q<P align=center><IMG border=0 height=345 src="http://www.gocn.net/mbsky/study/20031246137580.jpg" width=478></A>; \, {# K( A& e$ K- s' G( a
- {+ G* A8 }" r: D! A) S
) W/ I) o; t% c: @( a+ L4 h
设置了跟踪图像的页面如下图。跟踪图像并不在最终的页面中出现,仅仅是在设计中起辅助作用。# G; l' D! s/ V
/ ~2 a& U3 E) S
1 ~" L/ s  a& Z1 a2 }
<P align=center><IMG height=281 src="http://www.gocn.net/mbsky/study/20031246137621.jpg" width=505>
( b: M& [* h, m* q
# }6 J7 p& t/ g$ o" R% H  N! W8 N& U% I5 S, p# @) `4 h* c' j
       
: `( `- \$ H$ p1 N" G* c
4 \# k* P! K* @# X  U. y
摘星奴 发表于 2004-2-22 21:06:31 | 显示全部楼层
入一个宽为768的图像,选中这个表格,设置这个表格为居中对齐。
" Q% G5 ]7 H9 G7 T/ J9 w0 U0 c<P align=center><IMG height=81 src="http://www.gocn.net/mbsky/study/20031246154734.jpg" width=268>
" y1 m7 ^2 b2 O, k- W) V# x/ l) B8 j7 n. Y& w$ m  [
0 I+ p# ]7 q% E% i: K% m; v% z
在"查看"菜单,选择"跟踪图像"子菜单,再选择"对齐所选范围",使跟踪图像和表格对齐。
/ \- p* A/ v1 m. m1 k$ {) R0 k1 k

# n- k# m" ^$ h  B& K2 Q/ I6 W<P align=center><IMG height=100 src="http://www.gocn.net/mbsky/study/20031246154580.jpg" width=131>4 l( i4 T7 R( ?

. u( ]' a8 O4 m$ T# Z, ^- P2 n) J3 o9 S! G' P& S0 y0 `1 W" w
转换到布局选项卡,点"绘制布局表格",在页面参考跟踪图像布局。从上到下,一行一行的画好整个页面的表格。
6 R& ?8 F; @' X' _
3 A/ Y0 t1 d* j) x* t9 w; F5 |8 {+ J* g  b. d; M; ]- r' ]
<P align=center><IMG height=95 src="http://www.gocn.net/mbsky/study/20031246154621.jpg" width=269>
: y7 c3 \9 T( ^/ \0 R6 l. z0 I' I; v

4 A0 v: b  T, g# t% P$ [9 q% m. w) R点"绘制单元格按钮",在布局表格里面绘制单元格。
4 C! Y; L( C1 u3 l1 N+ g3 A
, i+ F& Y# z: U- \
* u3 X! B3 d1 \  \& _<P align=center><IMG height=87 src="http://www.gocn.net/mbsky/study/20031246154360.jpg" width=205> + R0 |5 z. f; P
$ Y! g, x  c" ~
3 @4 X8 b* M+ X7 O* ]# S* h
一个页面做好布局之后,再打开页面属性,图像透明度设置为10%,就可以填充内容了。<BR>打开资源面板,把相应的资源拖到布局单元格中。
3 r# t0 N; k* z% f( H
2 Y  B, K* Y+ S) G
( g+ v1 i4 O7 |<P align=center><IMG border=0 src="http://www.gocn.net/mbsky/study/20031246154371.jpg" width=550>5 j0 r! T3 a3 b2 v) A' x

9 o/ y. Y9 P7 E0 U7 |  _. i% x* \
. ~8 w9 i& L" u在拖放的过程中,会出现选择对话框。可以输入替换文本和链接。' F  }1 A* t& C0 y8 U+ X3 O+ C2 M
4 y5 X% m4 z- w* X- a3 X( K- k, x, H& H( ?

/ P4 n+ W% m3 p/ _% n7 n<P align=center><IMG height=118 src="http://www.gocn.net/mbsky/study/20031246155797.jpg" width=414>
) p( ^( |; e) k( J
9 O! K* k4 ^: C* H# H
  n6 p& Z2 c/ n8 M' M按照这种方法把素材放到页面中。Flash素材可以用类似的方法。文字部分可以手工输入或者从一个文本中复制到单元格中。一个页面的内容就填充好了。
" L/ P$ }& N+ j  N+ r( y1 G; u5 G. p9 ]* K, W5 H
enchanter 发表于 2004-2-22 23:26:32 | 显示全部楼层
我狂汗啊~~~你都放在一个帖子里多好~~~
zhanglei 发表于 2004-2-23 01:52:55 | 显示全部楼层
呵呵辛苦了
3 ]" f4 U+ R! a8 q" m" Z3 l+ D! j1 `- d5 v3 ^
您需要登录后才可以回帖 登录 | 註冊

本版积分规则

快速
回复
返回
列表
返回
顶部