|
|
网络的已经成为人们日常生活中的一部分，就像生活中房子，大部分人也想拥有自己网络空间，如果把自己的房子设计的漂亮大方呢？下面我们就以一个简洁清爽的页面为例来教大家如何设计一个好网页。 1 h* M/ a; M% [. O2 n; P
1. 启动Fireworks，新建一个大小为180*200像素的画布，设置画布颜色为 #EFEFEF。
# G! b. T" ^/ o! J# [& t! t 2. 在工具栏中选择矩形工具，绘制一个154* 183的矩形，在属性面板中设置这个矩形的填充色为#A9B1BE，描边设置为1像素的柔化，颜色为#677387，如图所示。 ; h0 s# ^) V8 V: k4 K
$ K! `+ _8 W7 X3 Q3 e( _
 / P+ l# [; |; S/ X6 N
) {0 g+ n) Z, c/ n/ W; ^0 A属性
6 R" z; j( F6 b& J1 d 3. 利用矩形工具绘制一个宽 152，高 19 的矩形，在属性检查器中设置描边为无，填充类别改为线性， 修改线性填充的颜色样本，第一个颜色样本的颜色为#E6FFFF，然后单击渐变色阶下面的区域，新增 一个新的颜色样本，颜色为 #A4BECF，最后一个颜色样本为 #FFFFFF，具体设置如图所示：
# r2 z" T4 r4 k5 i. Z% E
2 j$ I8 d9 R: t/ R. s
* Q: o) S9 v8 ]3 r! P+ d2 O7 ?" \. l
在属性检查器中设置描边为无
# S" O9 a/ ~6 u$ m4 n回到画布上，调整一下渐变方向，现在你的图看起来应该像是下图那样。
" c6 i9 X4 q, G) y4 M- ?; a: Q, D% s
 / i! h' v! M) i) v! R! Z
6 S+ A2 |/ V' J, {调整一下渐变方向7 S6 J: ?4 |. g7 Z2 b# _7 p
4. 以步骤3同样的方式制作下面的矩形。
! y2 g- }+ ?/ G4 D* i( L" E1 S& K" S7 s" k! M. a+ Q8 I; d% _ x
 $ S. k- U, k2 A' z* v& h5 t
, o5 I) q$ d4 ]以步骤3同样的方式制作下面的矩形
* c. ^3 v& l7 L2 O M" ]# O+ a5 h/ W选中下边的矩形，在属性检查器的效果菜单中，选择“阴影和光晕”>“投影”，为矩形添加一个阴影效果， 具体参数如图所示。 3 `+ X( l# q7 R7 G2 n
% J1 N" e, i( a( b. f K# u
% G7 \: r" Z$ `; a M9 T5 m+ ^& C$ W. u
添加一个阴影效果) x/ {3 `$ s9 \" f; R7 a5 C" ]
5.使用直线工具画出两条长为153的线段，颜色为 #677387，描边种类为1 像素柔化，分别放在上方矩形的下边及下方矩形的上边。 0 [+ Y J; c; |. c/ y3 E
6. 加入标题列的文字，字体为 elektr_02_5，大小为 10，不消除锯齿，加入内容区的文字，字体为 04b03b，大小为 8，不消除锯齿， : o' h9 `5 n: C& ?, U5 {
/ {9 S; C2 |' D- @ $ R: c W* }5 s: r- E
7 P3 D/ S+ x3 O+ R" t$ u) a+ q加入标题列的文字: P: K/ Z8 f# I
6 T3 d' }+ M8 l! X; e. ]6 e
7. 在帧面板，单击“新建/重制帧”按纽，新增一帧。返回到第一帧，按“Ctrl”+“A”全选中画布上的所有对象，按“Ctrl” +“C” 复制，然后到第二帧，按 “Ctrl” +“V” 粘贴，然后按住SHIFT键不放，选择将帧二上的 HOME、Fireworks、Dreamweaver 文字，往上及往左各偏移 1 个像素，这是要制造当鼠标移到文字上时，使其产生偏移的效果。 ' A; b$ i4 p5 D Y0 J
8. 回到第一帧，选择工具栏上的切片工具，将文字链结的区切割出来。 F7 T2 q- X# T" \: z+ I; z: C
0 L& R, ]# i, X& u& L. l
! L9 X$ I, \" Q1 t! k$ c8 v5 O7 s4 Q0 x' O, _
选择工具栏上的切片工具
# r2 }/ c. _% z6 H8 y' j I" _
8 L8 ?+ X8 u4 Y* e- Z7. 在帧面板，单击“新建/重制帧”按纽，新增一帧。返回到第一帧，按“Ctrl”+“A”全选中画布上的所有对象，按“Ctrl” +“C” 复制，然后到第二帧，按 “Ctrl” +“V” 粘贴，然后按住SHIFT键不放，选择将帧二上的 HOME、Fireworks、Dreamweaver 文字，往上及往左各偏移 1 个像素，这是要制造当鼠标移到文字上时，使其产生偏移的效果。
/ T1 G, v0 Z/ ] 8. 回到第一帧，选择工具栏上的切片工具，将文字链结的区切割出来。 . I/ d( o& v2 @4 q9 t8 F
: R/ _6 m% r: S# A, n! I; m
& S8 o4 D2 G$ N5 U) r4 n
: i5 }+ S. I: R1 |选择工具栏上的切片工具
& C) Z- {2 [/ w. ]5 R7 S6 y1 s: l# U. ?然后切换到指针工具，单击 HOME 的切片，在弹出的菜单中选择“添加图像交换行为…”，在弹出的交换图像对话框中，选择相对应的切片，单击确定。 % p( }& x. z5 E1 g
; s8 d) R0 l1 I; T
 * w: I6 w! H- ]' _
1 m- {9 K. ^& L$ _" M, \然后切换到指针工具/ z, D8 o( X3 y' L# H
用同样的方法，分别制作 Fireworks、Dreamweaver 交换图像的行为。 9 q8 O8 O. h a+ L7 ~
提示：你可以先切换到预览视图，将鼠标移到链结上察看效果。
! _6 P3 Z2 s. i1 M( z9 f" y" p. P9. 综合以上各步骤，将可以将整个网页版型制作完成，最终效果如图所示。
- e" u' j: W; [4 q4 \+ W0 Q" v ^3 o; |- X, J7 s6 B! y5 z0 }6 H6 o o
 ! P, V; L# l- N) I
2 {6 @2 Z# } V# `9 I4 r- F* y
效果图( H/ @; n G- _: H* P) J9 s' @
这个页面是我喜欢的类型，感觉清清爽爽的，希望您也会喜欢。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
在线客服（工作时间:9:00-22:00）
