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

摘星奴 发布于2004-2-22 20:15 981 次浏览 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>: O5 b- b( F2 N" d- Z0 b0 U

3 ^' `4 d% F/ n. m6 @! M$ |9 E3 S4 v, k1 f7 q" y7 c
<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 H0 `6 c- K! h. h6 \
. m1 D& E1 m! D' ?4 I
<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  B3 r$ u8 T; K4 S' y7 M0 o/ e, K

# 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: ?$ O  M) R' @( I/ m. D1 [# S
</DIV>- s* y, y: W0 Q* W$ t. d9 M! D2 `
<P align=center>       
; l- @$ q: [7 P0 E' ~; y! R$ l
/ R  M- r0 o# }: b</B>

已有(6)人评论

摘星奴 发表于 2004-2-22 20:21:30 | 显示全部楼层
<TABLE align=center border=0 cellPadding=0 cellSpacing=0 class=p4 width="95%"># g4 p# H4 [; R) R. p4 \' m7 F
<TBODY>
( A- D; n: u  ~3 s+ d2 [<TR>
  a' K& o9 ~6 x& U# s% ?<TD vAlign=top>* H! ]3 @: z) G" m7 L4 P# W
<SPAN style="FONT-FAMILY: 宋体">如果在单元格中插入了一个大于单元格宽度的图像,在布局标题上就有两种大小,如图:</SPAN>. ?! H, g9 Y" V) [5 e# V0 W$ I
4 b; U9 z) R$ t
2 T" R" A/ J" L! o! u  ^5 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>9 Z: U; c/ O3 r7 S

; D; q5 }4 \( h, a: q: J) `+ K% n+ m9 p  P6 r
<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" F' E* O  L; m# R  ?  t! T* @  J7 o
+ B4 k( S" c, s. r
<SPAN style="FONT-FAMILY: 宋体">设置列宽度为自动伸展:</SPAN>
6 ^* j- H1 u8 l& {3 X) T) [6 P8 y) Z9 v

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>8 L) y( O6 k. ~1 U

  F6 t9 G2 U" R6 s, {% \/ e; `& K8 z2 w8 v$ R" ]
<SPAN style="FONT-FAMILY: 宋体">在一行中,最好只选择最右边的一列为自动伸展。选中一列的标题区域,选择“列设置为自动伸展”</SPAN>3 z- t6 U- r8 v0 R) R& g0 j+ l/ t+ y

) {" 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>& r( F$ h6 G- a9 ]. V4 `4 l. Y
' k( j( e3 }+ F; O* m
8 i( J( d- M6 ?0 E9 `5 q
<SPAN style="FONT-FAMILY: 宋体">如果是第一次设置自动伸展,就会出现“选择间隔图像”对话框,选择“创建间隔图像文件”。</SPAN>
7 O9 v3 n: l4 p" U3 A- p' i2 W1 z
</TD></TR></TBODY></TABLE>
摘星奴 发表于 2004-2-22 20:36:33 | 显示全部楼层
<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>- @3 i! J9 G  }$ P
<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>8 ~+ U2 A  L4 X4 e
<TBODY>2 J" E9 T* \7 E8 ^5 V2 V$ y
<TR>; l. \" _5 B. w% t2 m; L
<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( u1 T& Z3 g4 \" _3 a' {! s  u# n
<SPAN style="FONT-FAMILY: 宋体">按确定按钮,自动会有一个</SPAN><SPAN lang=EN>spacer.gif</SPAN><SPAN style="FONT-FAMILY: 宋体">文件,选择保存。</SPAN>! [  x0 e  R1 D; F2 b+ c- m

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>9 k3 j# d5 M1 }3 K; \( _

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* ~* i; @  u1 v9 X

  ^! 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' ?- B0 S6 Z& ?& B1 K. ~; U4 s3 T
<P align=center>        + r. }, f" E1 Z+ Y
' y' F& [# O3 L' t" \- J
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>
摘星奴 发表于 2004-2-22 20:39:33 | 显示全部楼层
<TABLE align=left border=0 cellPadding=10 cellSpacing=0>1 R/ o/ s' B" l' z1 W7 q) O
<TBODY>
: |- N: L3 @# Y. u8 {" w<TR>+ d- Q3 o! A% l7 {' \" B
<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,设置页面属性,选择跟踪图像,点游览按钮。  g- S  ^, N9 e. g, x. i, `

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 `* A9 i% u5 Z/ I0 C0 |' I
. r" s7 Z0 B& G
选择跟踪图像,这个跟踪图像,是已经做好的图像。也可以是其它网站页面的截图。如果觉得跟踪图像太亮,可以调整跟踪图像的透明度,当透明度为0%时,跟踪图像就看不到了,百分比越小,跟踪图像越不明显。建议设置为50%以下,以便和页面内容区别。
1 k2 A# ]! P& ?( \2 w( W3 F* t- s  z- k. a) V0 R) U. w
- ?8 A( @6 m$ F2 N: O
<P align=center><IMG border=0 height=345 src="http://www.gocn.net/mbsky/study/20031246137580.jpg" width=478></A>* l) V4 w+ O# q) \* _- Q8 b6 g

# ?- h% ]  A6 ]+ ]% P
& ?+ B+ s& L0 B5 j设置了跟踪图像的页面如下图。跟踪图像并不在最终的页面中出现,仅仅是在设计中起辅助作用。4 W* R& q/ F1 t9 I2 p6 E# {3 k
7 n! z- V( Q% z8 H3 y: |
2 a2 l# `+ H: \# f" o, N9 A1 T
<P align=center><IMG height=281 src="http://www.gocn.net/mbsky/study/20031246137621.jpg" width=505>' X& i7 e! L: a  n, D

% 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 P8 s9 X: H6 N$ t/ H8 i
摘星奴 发表于 2004-2-22 21:06:31 | 显示全部楼层
入一个宽为768的图像,选中这个表格,设置这个表格为居中对齐。& N  ]1 L' T  g7 r( B
<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% H; o3 x; D+ O4 _( b0 j
在"查看"菜单,选择"跟踪图像"子菜单,再选择"对齐所选范围",使跟踪图像和表格对齐。+ E, ?. S% k6 l
, @7 \7 d7 P' C: ^3 M# p
4 z8 u+ W/ N, E
<P align=center><IMG height=100 src="http://www.gocn.net/mbsky/study/20031246154580.jpg" width=131>. N6 Q& E. u2 g5 P: c+ q

5 m$ X6 ]: z+ A6 U3 \; d* s
3 ?9 e) D7 V0 n( w4 ~# a转换到布局选项卡,点"绘制布局表格",在页面参考跟踪图像布局。从上到下,一行一行的画好整个页面的表格。& C' d* G+ @- ]+ {3 w8 b
; Z3 L) e* D. F7 @; I9 q0 d& x
8 B& P3 a3 ~) u! c7 {0 d: i
<P align=center><IMG height=95 src="http://www.gocn.net/mbsky/study/20031246154621.jpg" width=269>( `- E2 @  \. _
8 r  ^2 X  A! i: T+ @: T% f
' D. {# }8 T8 W: R' f2 B
点"绘制单元格按钮",在布局表格里面绘制单元格。/ M7 }8 P0 h# r  [+ X# {' R
5 A9 l8 S" r5 J" ^9 D; C, b
# _+ n2 N1 J9 w: T* O* y
<P align=center><IMG height=87 src="http://www.gocn.net/mbsky/study/20031246154360.jpg" width=205> 9 o: N( y1 A) L) E8 N6 i

3 D1 R3 `: q) h! Y' G* q( f6 i1 i  ]
一个页面做好布局之后,再打开页面属性,图像透明度设置为10%,就可以填充内容了。<BR>打开资源面板,把相应的资源拖到布局单元格中。0 J4 ~/ y' @, ]4 W

3 {( s5 A1 x+ E3 s. Y8 U+ d" d; L7 m& v9 n4 \5 z6 S; y$ n
<P align=center><IMG border=0 src="http://www.gocn.net/mbsky/study/20031246154371.jpg" width=550>0 D6 s5 @( c) ^+ p; w# x

0 e1 y8 f1 @$ j4 z4 {5 r
3 }2 r, b0 D) p在拖放的过程中,会出现选择对话框。可以输入替换文本和链接。
5 k3 j( f; {5 U8 j% m* _, Z: D5 e/ Z& S& U0 y- ]) E
( @1 }1 S2 _8 w% r! p7 |
<P align=center><IMG height=118 src="http://www.gocn.net/mbsky/study/20031246155797.jpg" width=414> 7 e1 T+ o: N/ [; Z! e9 x  E* y

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

5 C  L9 K' }: n" G) V
enchanter 发表于 2004-2-22 23:26:32 | 显示全部楼层
我狂汗啊~~~你都放在一个帖子里多好~~~
zhanglei 发表于 2004-2-23 01:52:55 | 显示全部楼层
呵呵辛苦了7 R: o9 A( }1 T, b( |' @
+ X1 W! B. c& K1 |, r
您需要登录后才可以回帖 登录 | 註冊

本版积分规则

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