来源：xuexin.com 薛欣
$ {' }- g: Q( C6 w- t6 ]现在我们进行了网页设计的最后环节，需要对页面进行真正的排版。使用到CSS 以及其它的一些常用技巧。在CS3 版本中photoshop 和Dreamweaver 的结合也更加紧密了。Spry 构件作为Dreamweaver CS3 全新的理念，给用户带来耳目一新的视觉体验。在该部分当中，我们就涉及到这些方面的知识。
8 _7 H1 |% J" J/ Q! x2 e E* R! s g. A6 X% P. {3 [5 `9 { A
1. 打开photoshop，直接拷贝一部分图片，如框选“石桥茶舍”区域并拷贝。当然因为是多层，你需要使用合并拷贝功能，如图1-6-1 所示。
3 H6 B' y5 n7 @; |9 W
, u) T* B+ h" Z- O. G+ q) g5 c/ K
) B: e) @5 |; A9 Y' x1 W' P+ W& N2 V% I7 z, B7 _
图1-6-1
, I, d" b$ j* W5 n
2. 切换到Dreamweaver 中，我们只需要简单的Ctrl+V 粘贴，你会看到出现了图像预览对话框，您可以直接在这里设置图片的压缩值和格式等，如图1-6-2 所示。
5 o( s) T& y. g* U. a K
* Y; g6 ?4 P1 `+ I4 v! h6 Z$ c
7 g1 n, Z( W/ d1 {9 E% M) L# B* ^2 L
图1-6-2
9 P; A5 S1 ~1 _- G/ e; H' ]4 G
0 q4 ?* F8 n% W* u4 B" z
8 n. O1 S, Z5 |9 f" B* q
3. 用同样的方法把“石桥茶舍”和“石桥棋坊”两张图片都直接拷贝到Dreamweaver 中，当然Dreamweaver 会提示您存储这些图像文件。完成后，我们再把文字拷贝到Dreamweaver 中, 不过如今的文字看起来会比较乱，这是没有用CSS 样式化的缘故，如图1-6-3 所示。
' u2 z; b* t( R& G, w" x# P 
, J; \) I6 i0 s/ L
3 b3 A# G: P2 R" w) r: c/ m! _
图1-6-3
" i) a7 \! I$ V4 q. G
7 ?% d! q2 d; ~4 B* m5 E# \# B
% S' q/ R7 ~# k; h4. 打开CSS 样式面板，为标签“body,td,th”新建一个CSS 规则，选择“仅对该文档”，这个CSS是针对当前页面全局的，如图1-6-4 所示。
' L% w5 Y9 }! z) |
" Q. a% V# Q+ S0 _8 C% z" b
7 A* y! A: ^7 ?
图1-6-4
$ I6 U) w7 P" T( Y _/ C$ y
( [0 K2 L& _: U6 m: Y* H
5. 在类型中，设置字体为“宋体”，大小为“9pt”，行高为“16px”，颜色为绿色，修饰为“无”，如图1-6-5 所示。
% e, S$ E- X: n! l1 s6 E 
$ c4 e% F0 T# J: H. {5 n. e) v8 I. M
$ j& K6 n) N' l* _4 B+ |图1-6-5
4 Y6 T: x2 |! H8 Z6 r" _+ J: u' G" z4 G$ k
6. 接下来设置图片的文字环绕效果，使文字都围绕在图片的右侧，也就是文字左对齐。选择“石桥茶舍”的图片，为其添加一个CSS 规则，如图1-6-6 所示。
{% S2 l/ o. i! P( e& i5 p
' R. c, ~+ O" z. f$ u S
/ F. p" {; g' O/ _7 h' H/ O+ G. Y7 V8 y图1-6-6
! \0 F- Q& [" l+ L7 D- Y
$ }( C9 j8 a/ M3 n) q5 D$ f% K0 |
" q& ?* O9 |7 U" J2 h/ E; E7. 选择方框标签页，将浮动设置为“左对齐”，即实现的文字对图片的环绕，如图1-6-7 所示。其它页面元素的CSS 设置方法类似，比如关于“石桥花园”的介绍文字，因文字的粗细不同，可在CSS中设置两个类规则来进行样式化，这里就不再赘述了。
) n! s- z+ H- f: E1 L. U
+ a8 [9 ]9 Y) t7 b; m. x& t
+ l% K1 P1 \& K% ]' P7 p$ p6 `6 h: Y. @% ^8 M7 S+ i
图1-6-7
; A" @# _$ Q% j- O8 o6 M4 q% u
8. Spry 构件是Dreamweaver CS3 新增的用户界面对象，包括 XML 驱动的列表和表格、折叠构件、选项卡式面板等元素。在Spry 工具组中选择插入Spry 选项卡式面板，每一个选项卡都可以直接输入标签的名称和该选项卡的内容，这里我们输入“菊花”，如图1-6-8 所示。
8 g3 c9 z! h- W3 d9 L8 n' ~8 X5 E$ X, U0 z- |# Y+ a
# y2 N. h0 [; {; Z8 d) z* Y
& Y/ [ X3 X2 W9 V( ]1 e1 ]- d图1-6-8
( c3 b9 q! E, Y
, t* O, f' y4 a [. B
9. 在编辑环境中选择Spry 选项卡式面板，可以在下方的属性面板中能够添加更多的选项卡标签，这里我们又添加了“玫瑰”、“月季”、“美人蕉”、“牡丹”等，如图1-6-9 所示。
) F8 g' I# \1 m1 f9 O/ N
# v$ \; ?5 ~, n! s2 [+ M 
5 a2 g g* e9 b8 K. ~! J: x* r6 ~- F: x2 x& C2 X& R! q! k7 F; b
图1-6-9
4 G0 F% `9 F! t( W0 V, G
4 z5 x: R: C8 `& H* M% _3 I6 t5 C10. 在选项卡标签名称的旁边有一个小眼晴，单击后可以编辑该标签所包含的内容，比如这里我们添加了菊花和美人蕉的内容。包括表格、图片和文字都可以放在里面，当然我们仍需要使用CSS 对格式进行基本的排版，如图1-6-10 所示。
. F6 @* E( G! o" d j; `
7 D! U1 a. v! ?- {, s 
% T4 R; W' ?8 q8 s% J+ f
) F+ @# d' S% i0 |图1-6-10
R- k9 L) r7 B* p( Y2 O4 B5 v1 Q3 b8 e
) v D* _) r. S; g- v2 d" x11. 至此我们这个“石桥花园”的首页就设计完成了，通过Dreamweaver 和Flash 的多道工序，我们仍然能够原汁原味的体现原始稿的设计初衷，可见Adobe CS3 软件之间的协作和兼容性是如此的完美。关于网页设计的话题还有很多，比如Gif 动画、弹出式菜单、更多的CSS 控制和链接控制，有机会我们再详细讲解。写到这里，我仿佛有所感悟，其实找到一个像“石桥花园”这样的所在并不难，难的是那份闲暇、平和的心境。另外，不能忘记编辑这篇文章的幕后英雄，也是这套Adobe CS3协同工作稿件的全程参与者-Adobe InDesign CS3。
* y, z2 [6 w! n- L" i
" z# c5 h" |6 c, zphotoshop制作网站首页(1):首页主体制作
% i! x$ C4 o6 T" V$ s c$ [ |. ~8 _4 T8 B
photoshop制作网站首页(2):首页内容的制作2 p* Y4 K& E2 O
6 Z6 r9 ?/ M5 J7 s9 y
# e* E8 f! T4 {+ [6 |. n7 k8 Wphotoshop制作网站首页(3):切割网页图片& Q% b# K3 K9 M+ c. V0 Z) m
6 J7 T8 r7 K1 n/ e) H7 r2 |0 o: U" ]
photoshop制作网站首页(4):制作导航菜单
1 k8 y0 E8 Q8 i2 c9 }
; P9 L+ \) n2 x( X0 m+ @! xphotoshop制作网站首页(5):添加Flash视频
7 j: C6 a6 q) l7 D& o2 c$ U
/ j! X+ z4 p- R& k- ]3 ]+ qphotoshop制作网站首页(6):控制版面与插入Spry对象
收藏到QQ书签