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

<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>

3 ^' `4 d% F/ n. m
<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>
8 H& |: j& H* Z2 a: h5 H

<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>
# D3 v# V: U& j. P$ Z5 `# n  B

# J0 o% b6 g# _. k<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>
, {  f" o4 q- P% Q& _5 f2 H
# r1 n4 V- z6 L: ?
</DIV>
<P align=center>       
; l- @$ q: [7 P0 E' ~; y! R$ l
/ R  M- r0 o# }: b</B>

<TABLE align=center border=0 cellPadding=0 cellSpacing=0 class=p4 width="95%">
<TBODY>
( A- D; n: u  ~3 s+ d2 [<TR>
  a' K& o9 ~6 x& U# s% ?<TD vAlign=top>
<SPAN style="FONT-FAMILY: 宋体">如果在单元格中插入了一个大于单元格宽度的图像，在布局标题上就有两种大小，如图：</SPAN>


<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>

; D; q5 }4 \( h, a: q
<SPAN style="FONT-FAMILY: 宋体">选择使单元格宽度一致。</SPAN>
6 m4 [$ @! G$ l: @; _7 a
# B' D$ k3 L2 T, `$ @! I) F% ~
: A0 e- {# B  U8 ^8 g# ^<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>
0 Z( A) t! ^7 M* q, z/ G

<SPAN style="FONT-FAMILY: 宋体">设置列宽度为自动伸展：</SPAN>
6 ^* j- H1 u8 l& {

5 H" \5 a& X" x( }<SPAN style="FONT-FAMILY: 宋体">设置列宽度为自动伸展的意义：把一行中的一列设置为自动伸展，可以使这行始终在访问者浏览器窗口整个宽度显示。自动伸展列的宽度随着浏览器窗口的宽度自动变化。</SPAN>
/ X4 }$ R1 E, g( Z  V  [0 A
$ m8 q" }& T; F' \
' H1 B# _1 k/ M+ e<SPAN style="FONT-FAMILY: 宋体">自动伸展列的列标题区域显示波浪线而不是数字。</SPAN>

  F6 t9 G2 U" R6 s, {% \/ e
<SPAN style="FONT-FAMILY: 宋体">在一行中，最好只选择最右边的一列为自动伸展。选中一列的标题区域，选择“列设置为自动伸展”</SPAN>

) {" q8 d* n8 ]% I
' f, p6 u& R5 b0 h7 c  I0 O$ 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>


<SPAN style="FONT-FAMILY: 宋体">如果是第一次设置自动伸展，就会出现“选择间隔图像”对话框，选择“创建间隔图像文件”。</SPAN>
7 O9 v3 n: l4 p
</TD></TR></TBODY></TABLE>

<TABLE align=center border=0 cellPadding=2 cellSpacing=0 class=border width="100%">
' @2 n+ R+ l- i  f<TBODY>
5 x1 }1 T- [, m<TR align=middle class=tdbg_rightall>
( a3 C) t3 ]& X) X) c" Z6 A0 G! H<TD colSpan=2>］</TD></TR>
<TR>
. d7 |$ }% n/ U; ?. R, q3 V, w5 [<TD colSpan=2>
$ Z' Y: ]9 t$ D<TABLE align=center border=0 cellPadding=0 cellSpacing=5 style="WORD-BREAK: break-all" width=740>
<TBODY>
<TR>
<TD height=200 vAlign=top>
$ y. v. ]8 {: @' x: o0 {9 ]<TABLE align=left border=0 cellPadding=10 cellSpacing=0>
3 N; O5 s: x* P( N( V/ g<TBODY>
5 \5 l0 y/ H3 \' w, l8 g<TR>
! H: S* m& o' x% M$ |<TD></TD></TR></TBODY></TABLE>
$ b) g! M" j+ h# R( K7 B- [5 [+ D; M<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>
* ^4 G5 d' l7 l  }9 |) }+ E
. N1 L( u1 G: W" ^8 l( u
<SPAN style="FONT-FAMILY: 宋体">按确定按钮，自动会有一个</SPAN><SPAN lang=EN>spacer.gif</SPAN><SPAN style="FONT-FAMILY: 宋体">文件，选择保存。</SPAN>

9 M) G. [- D4 }7 k0 s1 c
5 @# c9 g, v/ t" m<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>

5 A& ^. L4 k4 ~1 [& k$ x
5 y0 K6 y8 J5 x; V<SPAN style="FONT-FAMILY: 宋体">自动伸展列的标题区域显示波浪线，一个自动伸展列就做好了。</SPAN>
; v& h! c& x0 A$ W

  ^! P$ T8 ~2 ~6 N& z6 E<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>
; I: J) g1 v% A/ ^$ q% b
/ p' e- U' ?- B
<P align=center>       

</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

<TABLE align=left border=0 cellPadding=10 cellSpacing=0>
<TBODY>
: |- N: L3 @# Y. u8 {" w<TR>
<TD></TD></TR></TBODY></TABLE>
0 Q! W1 E9 m4 N7 H9 I: [2 j　　在向网页填充内容之前，需要准备素材，包括网站的LOGO，Banner，图片，Flash动画，各种按钮，声音文件，用于布局参考的参考图像。把这些内容复制到站点中。教程的实例是把图片复制到站点中的images文件夹，参考图像复制到image文件夹。<BR>简明步骤：准备各种素材复制到站点中→设置页面的跟踪图像→插入表格确定尺寸→布局→从资源面板中把资源拖到页面。<BR>用Fireworks制作一个页面的效果图，或者用一个已经存在的页面做布局的参考。打开本教程示范站点media，打开index.html，设置页面属性，选择跟踪图像，点游览按钮。

0 `. e$ @, R) m, C5 {
. s3 E" ~% D- l5 b! n<P align=center><IMG height=363 src="http://www.gocn.net/mbsky/study/20031246137734.jpg" width=497>
% ~7 V  i- @2 l0 `

选择跟踪图像，这个跟踪图像，是已经做好的图像。也可以是其它网站页面的截图。如果觉得跟踪图像太亮，可以调整跟踪图像的透明度，当透明度为0％时，跟踪图像就看不到了，百分比越小，跟踪图像越不明显。建议设置为50％以下，以便和页面内容区别。
1 k2 A# ]! P& ?( \2 w( W3 F* t- s  z

<P align=center><IMG border=0 height=345 src="http://www.gocn.net/mbsky/study/20031246137580.jpg" width=478></A>

# ?- h% ]  A6 ]+ ]% P
& ?+ B+ s& L0 B5 j设置了跟踪图像的页面如下图。跟踪图像并不在最终的页面中出现，仅仅是在设计中起辅助作用。


<P align=center><IMG height=281 src="http://www.gocn.net/mbsky/study/20031246137621.jpg" width=505>

% j; t* \6 K4 y+ u: C4 @
. v7 Z) g, Y+ B" b1 X7 o       
+ h/ D' @7 s* t- H2 x5 e! k, a3 P

入一个宽为768的图像，选中这个表格，设置这个表格为居中对齐。
<P align=center><IMG height=81 src="http://www.gocn.net/mbsky/study/20031246154734.jpg" width=268>
# n7 m, l0 I4 R1 _
% u8 p  b3 X0 k
在"查看"菜单，选择"跟踪图像"子菜单，再选择"对齐所选范围"，使跟踪图像和表格对齐。


<P align=center><IMG height=100 src="http://www.gocn.net/mbsky/study/20031246154580.jpg" width=131>

5 m$ X6 ]: z+ A6 U3 \; d* s
3 ?9 e) D7 V0 n( w4 ~# a转换到布局选项卡，点"绘制布局表格"，在页面参考跟踪图像布局。从上到下，一行一行的画好整个页面的表格。


<P align=center><IMG height=95 src="http://www.gocn.net/mbsky/study/20031246154621.jpg" width=269>


点"绘制单元格按钮"，在布局表格里面绘制单元格。


<P align=center><IMG height=87 src="http://www.gocn.net/mbsky/study/20031246154360.jpg" width=205>

3 D1 R3 `: q) h! Y
一个页面做好布局之后，再打开页面属性，图像透明度设置为10％，就可以填充内容了。<BR>打开资源面板，把相应的资源拖到布局单元格中。

3 {( s5 A1 x+ E3 s. Y8 U+ d" d; L
<P align=center><IMG border=0 src="http://www.gocn.net/mbsky/study/20031246154371.jpg" width=550>

0 e1 y8 f1 @$ j4 z4 {5 r
3 }2 r, b0 D) p在拖放的过程中，会出现选择对话框。可以输入替换文本和链接。
5 k3 j( f; {5 U8 j% m

<P align=center><IMG height=118 src="http://www.gocn.net/mbsky/study/20031246155797.jpg" width=414>

* W) m, o" C' ~" C" M" t
* R. t" M- v! L按照这种方法把素材放到页面中。Flash素材可以用类似的方法。文字部分可以手工输入或者从一个文本中复制到单元格中。一个页面的内容就填充好了。

5 C  L9 K' }: n" G) V

我狂汗啊~~~你都放在一个帖子里多好~~~

呵呵辛苦了