用Fireworks制作简洁清爽的网站

[复制链接]
查看: 258|回复: 0
gggds 发表于 2009-12-27 03:15:07 | 显示全部楼层 |阅读模式
网络的已经成为人们日常生活中的一部分,就像生活中房子,大部分人也想拥有自己网络空间,如果把自己的房子设计的漂亮大方呢?下面我们就以一个简洁清爽的页面为例来教大家如何设计一个好网页。
) S/ z/ M3 c$ v4 m1. 启动Fireworks,新建一个大小为180*200像素的画布,设置画布颜色为 #EFEFEF。
6 _/ n- O1 k9 N& O$ L3 U3 z2. 在工具栏中选择矩形工具,绘制一个154* 183的矩形,在属性面板中设置这个矩形的填充色为#A9B1BE,描边设置为1像素的柔化,颜色为#677387,如图所示。 ( M7 D& X: X1 W4 ]+ O

; [2 Z# A- V& V9 t4 e7 R/ I
- G% V' G# l, u4 ]
* X" W0 @% x' c% I, f( m# I+ W* w7 F  g' ~, p/ y8 f5 \' ?, ~) Z
$ d8 l! r  B* P1 L! T
3. 利用矩形工具绘制一个宽 152,高 19 的矩形,在属性检查器中设置描边为无,填充类别改为线性, 修改线性填充的颜色样本,第一个颜色样本的颜色为#E6FFFF,然后单击渐变色阶下面的区域,新增 一个新的颜色样本,颜色为 #A4BECF,最后一个颜色样本为 #FFFFFF,具体设置如图所示: ) [# [! T% C( C- ^

$ R$ l! G7 c3 s* [& }
; d- \3 x( B; W9 l' v& M- Q2 c4 V
6 k) J) [( d& r9 i% P! N# V9 l
8 {& I: ~3 B5 M, B) }+ g) B) B- F3 g2 z9 V- D! N
回到画布上,调整一下渐变方向,现在你的图看起来应该像是下图那样。 1 z0 Z3 P! `* b
# R- g, Q% i! U- e0 _, U  R9 X) V

$ f: D5 k9 d$ D4 e( j* H0 w2 q2 ^* q' q' ~! W( G8 b

0 {( s) ^& |; @: b- L/ S4. 以步骤 3 同样的方式制作下面的矩形。 $ z2 U0 c* j/ x5 ^& O. i

' Y% a1 k, B. l" P9 u+ V' Z" [1 Q: [
0 j" s6 T# K7 _) m# u. u4 r
+ Q* N* c+ q# Q1 \) v3 k  k
+ c2 |. u7 n$ ?4 ?% |
- B% }" _6 w4 I2 u& n
选中下边的矩形,在属性检查器的效果菜单中,选择“阴影和光晕”>“投影”,为矩形添加一个阴影效果, 具体参数如图所示。 $ r" w1 ]- i( ~/ k0 a: j5 _" H
0 h) ]* |% W2 G1 B: o5 E3 }3 w

' b+ [" L4 p* {4 B: _5 B# o  F
" z; |" N6 l; ?8 N! D) R7 @) z* r1 ~! }* K

/ l6 |& U; T- _& c: Q  ?5.使用直线工具画出两条长为153的线段,颜色为 #677387,描边种类为1 像素柔化,分别放在上方矩形的下边及下方矩形的上边。 7 a3 R7 O. j+ m* ~. E$ O
6. 加入标题列的文字,字体为 elektr_02_5,大小为 10,不消除锯齿,加入内容区的文字,字体为 04b03b,大小为 8,不消除锯齿, ( t$ S5 v  P7 j! M, Y% s
8 H; ^; a& L/ s7 C
3 T; W4 I- E2 @3 R

本版积分规则

精彩图文

Copyright   ©2015-2016  展示网  Powered by©Discuz!  技术支持:凡尚展览     ( 粤ICP备14065977号 )