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>
$ z: f* `, ~4 f% b  R' O9 g

) R( m7 d6 I, x: `4 ?<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>

' ?1 A) J3 E4 s* E/ M$ b0 |; N) s
<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>
# k4 @) v! a: t1 s, z' u

9 D0 I) \& D- S<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>
6 `& }" O* B7 ^/ P

: r- w% d- ]7 v1 `, F</DIV>
7 M, U6 @7 z7 g8 m8 X0 a<P align=center>       
9 G" B6 y% o, z/ _3 L3 s
0 T& _9 t4 _8 B& z</B>

<TABLE align=center border=0 cellPadding=0 cellSpacing=0 class=p4 width="95%">
<TBODY>
<TR>
<TD vAlign=top>
<SPAN style="FONT-FAMILY: 宋体">如果在单元格中插入了一个大于单元格宽度的图像，在布局标题上就有两种大小，如图：</SPAN>
# ^7 t$ y9 y" e6 u7 H
( |7 Z/ f5 p# @3 s
<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>
; j* e2 U( Y1 O& l" _# n

<SPAN style="FONT-FAMILY: 宋体">选择使单元格宽度一致。</SPAN>
* q" f0 P; R0 H, I
2 Q5 b* U; i1 k% L( o" k/ X9 ?
<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 d6 n0 l) l& G0 X5 P# B* c
5 \- B$ r2 n9 V6 i0 B$ g
<SPAN style="FONT-FAMILY: 宋体">设置列宽度为自动伸展：</SPAN>
, V5 p& o1 t4 M4 C/ X/ v' |4 \  w
: q6 |. _% _1 E: n( r% t
<SPAN style="FONT-FAMILY: 宋体">设置列宽度为自动伸展的意义：把一行中的一列设置为自动伸展，可以使这行始终在访问者浏览器窗口整个宽度显示。自动伸展列的宽度随着浏览器窗口的宽度自动变化。</SPAN>
' A( h& D4 J8 e& |0 t0 R, m

& r. O+ H) i+ F& U: \" |, r7 X  c6 [<SPAN style="FONT-FAMILY: 宋体">自动伸展列的列标题区域显示波浪线而不是数字。</SPAN>


<SPAN style="FONT-FAMILY: 宋体">在一行中，最好只选择最右边的一列为自动伸展。选中一列的标题区域，选择“列设置为自动伸展”</SPAN>

7 c6 c$ k, ~* U  F" s4 L
! `2 s  J/ g# {* n# ^6 i' A  Y<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>
* M$ q$ X0 F& Y: Q, P
" y+ Z' g5 G/ j9 T0 m+ y
0 ~5 q! b1 `1 `% v3 G* Q1 I/ X<SPAN style="FONT-FAMILY: 宋体">如果是第一次设置自动伸展，就会出现“选择间隔图像”对话框，选择“创建间隔图像文件”。</SPAN>

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

<TABLE align=center border=0 cellPadding=2 cellSpacing=0 class=border width="100%">
+ S  A2 W' {4 K$ r. T+ X<TBODY>
: Z1 K  {. w4 ?3 G( j' @<TR align=middle class=tdbg_rightall>
/ x) O% x" O3 T. Z3 d<TD colSpan=2>］</TD></TR>
$ b& G" d7 I5 ^; _+ Z<TR>
<TD colSpan=2>
$ S) {' z& c/ h$ L* Y1 K, c6 c6 n" e  A<TABLE align=center border=0 cellPadding=0 cellSpacing=5 style="WORD-BREAK: break-all" width=740>
. D2 T" h* n1 t3 ]<TBODY>
<TR>
2 S! F2 S+ _5 |) ~8 N<TD height=200 vAlign=top>
<TABLE align=left border=0 cellPadding=10 cellSpacing=0>
<TBODY>
* U. R8 ], O! S8 ?9 ]4 o<TR>
<TD></TD></TR></TBODY></TABLE>
<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>


<SPAN style="FONT-FAMILY: 宋体">按确定按钮，自动会有一个</SPAN><SPAN lang=EN>spacer.gif</SPAN><SPAN style="FONT-FAMILY: 宋体">文件，选择保存。</SPAN>

! d2 t- v' ~1 [
<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>
1 `' H: @+ C* [

- p: k! g! @5 H! w6 E) P1 \<SPAN style="FONT-FAMILY: 宋体">自动伸展列的标题区域显示波浪线，一个自动伸展列就做好了。</SPAN>
9 l( [' p2 F2 E

. t( A7 _; R% h  a% @, Q<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>

% k# I; T2 }5 N1 V- V* F
<P align=center>       
. _) p' }) ^% E6 a6 y" E
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

<TABLE align=left border=0 cellPadding=10 cellSpacing=0>
1 L# x+ _/ }  x7 I, ^<TBODY>
<TR>
<TD></TD></TR></TBODY></TABLE>
　　在向网页填充内容之前，需要准备素材，包括网站的LOGO，Banner，图片，Flash动画，各种按钮，声音文件，用于布局参考的参考图像。把这些内容复制到站点中。教程的实例是把图片复制到站点中的images文件夹，参考图像复制到image文件夹。<BR>简明步骤：准备各种素材复制到站点中→设置页面的跟踪图像→插入表格确定尺寸→布局→从资源面板中把资源拖到页面。<BR>用Fireworks制作一个页面的效果图，或者用一个已经存在的页面做布局的参考。打开本教程示范站点media，打开index.html，设置页面属性，选择跟踪图像，点游览按钮。
6 i! ~% r6 d2 P5 u4 v

<P align=center><IMG height=363 src="http://www.gocn.net/mbsky/study/20031246137734.jpg" width=497>

2 e" T# f+ o- u+ F& _
选择跟踪图像，这个跟踪图像，是已经做好的图像。也可以是其它网站页面的截图。如果觉得跟踪图像太亮，可以调整跟踪图像的透明度，当透明度为0％时，跟踪图像就看不到了，百分比越小，跟踪图像越不明显。建议设置为50％以下，以便和页面内容区别。

3 A0 k- a( F( a4 N( z# @
- L* u5 Y5 {0 v6 J# r/ D<P align=center><IMG border=0 height=345 src="http://www.gocn.net/mbsky/study/20031246137580.jpg" width=478></A>

' K9 Q2 |( q% X8 v& M3 J# z- a/ u4 q) l
设置了跟踪图像的页面如下图。跟踪图像并不在最终的页面中出现，仅仅是在设计中起辅助作用。
) j0 q& g/ {9 [3 t  v. [; n( B% a, {

<P align=center><IMG height=281 src="http://www.gocn.net/mbsky/study/20031246137621.jpg" width=505>
5 P9 ~8 G$ J: ?# u- O0 F7 z
6 W& w- A+ m% n1 `: Q5 j( Q
       
7 b( |% q7 V) t" x
& c" `2 L/ Y' V  b+ R

入一个宽为768的图像，选中这个表格，设置这个表格为居中对齐。
" ?. X6 m! i' m- V& v2 J5 S+ u<P align=center><IMG height=81 src="http://www.gocn.net/mbsky/study/20031246154734.jpg" width=268>

$ J. }6 B& I4 {
在"查看"菜单，选择"跟踪图像"子菜单，再选择"对齐所选范围"，使跟踪图像和表格对齐。
/ C. v" q2 G4 I% _

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

5 g* `6 h' n  X4 I! E
7 M' k* {- O1 J8 i3 J1 L" q转换到布局选项卡，点"绘制布局表格"，在页面参考跟踪图像布局。从上到下，一行一行的画好整个页面的表格。
8 `" t8 X# K# ?! p3 U
6 ]3 z  \$ o$ I/ O6 }7 Z3 h
<P align=center><IMG height=95 src="http://www.gocn.net/mbsky/study/20031246154621.jpg" width=269>
& x" ~, C7 G; k/ Q
% c0 c; H5 ^+ o" q5 V" s) o) S
- J$ O2 `) f& k/ }0 D+ i- b% m' c7 n点"绘制单元格按钮"，在布局表格里面绘制单元格。
" n- w/ D! n; D6 Q& k7 U
' a* z( O0 g7 e# C
<P align=center><IMG height=87 src="http://www.gocn.net/mbsky/study/20031246154360.jpg" width=205>


* o( t% }% k* [! u% P( v一个页面做好布局之后，再打开页面属性，图像透明度设置为10％，就可以填充内容了。<BR>打开资源面板，把相应的资源拖到布局单元格中。

) a+ `1 W2 i4 O0 `# `2 L5 i1 F( x& f
4 [: k6 u9 B8 V' U6 Z. z& j<P align=center><IMG border=0 src="http://www.gocn.net/mbsky/study/20031246154371.jpg" width=550>
7 _' W1 J0 W3 s- h
6 F+ ]) a/ `# z3 s4 N
9 ^+ R& S2 ]2 K( x7 M在拖放的过程中，会出现选择对话框。可以输入替换文本和链接。
7 J% B$ I% w8 l' Z

, u; N# T) d; l; i: a<P align=center><IMG height=118 src="http://www.gocn.net/mbsky/study/20031246155797.jpg" width=414>


& R1 c' @" L7 U, O3 y按照这种方法把素材放到页面中。Flash素材可以用类似的方法。文字部分可以手工输入或者从一个文本中复制到单元格中。一个页面的内容就填充好了。
$ G% G* u: b5 \1 s4 g" c: Q
, y/ C7 t9 Z! s+ F1 C! G

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

呵呵辛苦了
) b- e) B# M- s% }