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>
2 k5 s* I4 M! s: i) V  A

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

$ D1 R  ]' b8 i( N$ @7 q' R6 k3 w
! h  b2 R/ P* l, 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>


* ], P! G5 g8 D6 H<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 y9 w" A8 P6 K  A  `  k
5 ?0 s  z& f1 [, H
* J, |/ n" J& j</DIV>
<P align=center>       
/ M8 u/ N, m9 q5 U6 W
8 @/ p: a) G' z1 H8 q" m4 h, K</B>

<TABLE align=center border=0 cellPadding=0 cellSpacing=0 class=p4 width="95%">
: A& G/ E/ [- i) W4 t<TBODY>
' r- `6 M' c5 _% V5 j<TR>
<TD vAlign=top>
<SPAN style="FONT-FAMILY: 宋体">如果在单元格中插入了一个大于单元格宽度的图像，在布局标题上就有两种大小，如图：</SPAN>
, j8 {% \3 T: k" |
2 {9 c  T. u6 u0 ^0 a4 u
<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>

% y/ [5 X6 \1 u+ W5 u
( k0 L: S3 T1 T* b<SPAN style="FONT-FAMILY: 宋体">选择使单元格宽度一致。</SPAN>

. i8 [0 U8 ~* }" c" b! E/ q, p+ A
<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>
- n1 l# z+ E8 [2 L8 S7 [' Z
$ O/ q2 o% }% X5 t& Y  o; M. y2 i+ |! z
<SPAN style="FONT-FAMILY: 宋体">设置列宽度为自动伸展：</SPAN>
* \$ A+ @( h; Z2 i/ [. I$ c3 u

<SPAN style="FONT-FAMILY: 宋体">设置列宽度为自动伸展的意义：把一行中的一列设置为自动伸展，可以使这行始终在访问者浏览器窗口整个宽度显示。自动伸展列的宽度随着浏览器窗口的宽度自动变化。</SPAN>


<SPAN style="FONT-FAMILY: 宋体">自动伸展列的列标题区域显示波浪线而不是数字。</SPAN>
" _4 s* a. l: @' y0 ?

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

+ U; V  E4 }: P
<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>
8 \" p3 k% E- Y$ Q
% M6 C8 h2 e4 N/ d
<SPAN style="FONT-FAMILY: 宋体">如果是第一次设置自动伸展，就会出现“选择间隔图像”对话框，选择“创建间隔图像文件”。</SPAN>
1 {5 R2 C$ g- ?8 R; w
</TD></TR></TBODY></TABLE>

<TABLE align=center border=0 cellPadding=2 cellSpacing=0 class=border width="100%">
# N' I8 b! r) _. f<TBODY>
<TR align=middle class=tdbg_rightall>
<TD colSpan=2>］</TD></TR>
<TR>
, V/ l: Y% N5 @( d<TD colSpan=2>
<TABLE align=center border=0 cellPadding=0 cellSpacing=5 style="WORD-BREAK: break-all" width=740>
! p& O) N- I) Q( R/ K<TBODY>
) u: T8 I& {& n* \* [: U; |<TR>
3 u7 X' @$ f' k: o* ]5 e<TD height=200 vAlign=top>
# z; V3 S3 b( d, g! Z3 m<TABLE align=left border=0 cellPadding=10 cellSpacing=0>
' c& c3 Z' M7 a/ x: r: c<TBODY>
5 H% y& X0 b  P0 P6 |2 v<TR>
. m: ~9 {3 ]3 T) m; h# X+ b<TD></TD></TR></TBODY></TABLE>
, a* i+ G4 f8 u7 X# H5 ?3 |<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>

$ z( x2 N9 p1 V' k" \0 n3 T8 X
<SPAN style="FONT-FAMILY: 宋体">按确定按钮，自动会有一个</SPAN><SPAN lang=EN>spacer.gif</SPAN><SPAN style="FONT-FAMILY: 宋体">文件，选择保存。</SPAN>
+ ]% U5 v0 N" Y
/ U9 l4 ?) a2 g& F' K4 q" l" r* F
<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>

, k* g( Z; Q; G; w' H0 I% V
<SPAN style="FONT-FAMILY: 宋体">自动伸展列的标题区域显示波浪线，一个自动伸展列就做好了。</SPAN>
( z3 U3 t/ A4 c! s  ?

<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>
. e$ g7 k- `, r' a

<P align=center>       

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

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


<P align=center><IMG height=363 src="http://www.gocn.net/mbsky/study/20031246137734.jpg" width=497>
4 Q; W$ \7 w. j

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

# r! g+ u9 ?& c
<P align=center><IMG border=0 height=345 src="http://www.gocn.net/mbsky/study/20031246137580.jpg" width=478></A>
4 m, C  P: j* B# _0 F7 e
! W0 H. v/ _3 P' X$ z9 Q
设置了跟踪图像的页面如下图。跟踪图像并不在最终的页面中出现，仅仅是在设计中起辅助作用。

( {# b6 E% r! p* |4 W$ _3 f
<P align=center><IMG height=281 src="http://www.gocn.net/mbsky/study/20031246137621.jpg" width=505>


       
6 J- {2 f9 }8 Q; E
, L( T' \6 v+ N: d' Y5 D

入一个宽为768的图像，选中这个表格，设置这个表格为居中对齐。
" q3 _6 O8 Z. x3 \5 ~8 y<P align=center><IMG height=81 src="http://www.gocn.net/mbsky/study/20031246154734.jpg" width=268>


在"查看"菜单，选择"跟踪图像"子菜单，再选择"对齐所选范围"，使跟踪图像和表格对齐。

' k. R" B7 N5 w8 n/ x) h; l0 \% {
<P align=center><IMG height=100 src="http://www.gocn.net/mbsky/study/20031246154580.jpg" width=131>


1 u! k3 X9 G6 k  b0 H* ^# ^0 K6 D转换到布局选项卡，点"绘制布局表格"，在页面参考跟踪图像布局。从上到下，一行一行的画好整个页面的表格。

1 |# E, h, H9 C' R, d
<P align=center><IMG height=95 src="http://www.gocn.net/mbsky/study/20031246154621.jpg" width=269>


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

% V3 R6 _7 r; B) o' o
7 V( F# F' k3 u- p! b. ?% [* P6 j- Q<P align=center><IMG height=87 src="http://www.gocn.net/mbsky/study/20031246154360.jpg" width=205>
+ \$ _% ?, e/ Q, l) O

1 j- }2 `8 T- _! d! r一个页面做好布局之后，再打开页面属性，图像透明度设置为10％，就可以填充内容了。<BR>打开资源面板，把相应的资源拖到布局单元格中。
* i0 n/ O) h! w; c/ q- `$ {
1 d8 F% _  O: y  f& l9 V4 `) I
<P align=center><IMG border=0 src="http://www.gocn.net/mbsky/study/20031246154371.jpg" width=550>
! X! y3 Y' U8 K& h
' [) V4 B' E9 N" r/ _
在拖放的过程中，会出现选择对话框。可以输入替换文本和链接。
$ |' `, A8 e7 `% u
- G/ |3 `7 J* `# l5 H+ ~# b) P6 _
<P align=center><IMG height=118 src="http://www.gocn.net/mbsky/study/20031246155797.jpg" width=414>
- \2 K$ U, a! K* o

0 I( q$ @# R6 R" m( s1 `: l按照这种方法把素材放到页面中。Flash素材可以用类似的方法。文字部分可以手工输入或者从一个文本中复制到单元格中。一个页面的内容就填充好了。

8 G1 e3 h; g9 j$ C( B+ y6 V5 }

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

呵呵辛苦了