玛雅原创教程：韩国风格网站之渐变背景教程

??最近网上韩国风格的网页设计风格非常流行，有很多朋友都想学习一下韩式风格网站的制作。在韩式网站中，有一个突出的特点就是韩国人特别善于使用渐变色。下面我通过本教程页面的例子来讲解一下如何制作并在网站中使用渐变背景。
图像处理部分
7 w3 k" f" Q1 \/ E3 G??首先，你要确定你网页背景的基础色。也就是你的渐变背景与网页背景颜色的连接点上的颜色。在本教程里，我使用的网页背景基础色是“#0099FF”，你可以通过Dreamweaver的调色板选择你喜欢的颜色。
; \7 b, X  x! u' \3 m9 t??在网页的基础色确认后，进入你的Fireworks，新建一个200×300的文件，画布颜色为“#0099FF”（就是你刚刚设置的网页基础色）。
??用“矩形工具”画出一个无边框的矩形。
/ E  h! A* R! u4 J! ^* I

% [, R0 F8 r9 n0 m
9 I7 x( r' V5 I7 e! Y$ S" |??选中矩形，将属性面板中的宽度设为200，高度设为300，X和Y值都设为0。


+ p% M1 H* q' }8 C
+ J+ x1 Q1 {* W1 z9 x??将矩形的填充方式设置为线性渐变。
: Z5 h; w3 T6 F. \+ P. l

. X" O$ B0 I9 T5 R7 {2 \* ^0 J4 }0 \) p
??将矩形的填充颜色修改为深蓝色（#003366）到背景色（#0099FF）渐变，如下图：



7 R- e  [; t- l+ c??下一步用“指针工具”调整渐变方向，注意保持渐变线是直的。
* w, \/ X7 I; ?( z9 a


??选中矩形，然后在菜单中选择“编辑”—“克隆”（也可以使用快捷键Ctrl+Shift+D）。选中上面的矩形，将纹理设为“网格线 7”，纹理总量为50％。

5 y' w0 F$ P- v6 K1 a
# i: ^, T/ U% R# d' O) W, [
??修改填充属性，将位于基础色的不透明度节点设为0。
' d, t  U3 e9 x, \, c# g

  z' d( }4 Q7 E% c- J
??将缩放比率放大可以发现，每相隔六个像素图像就会重复循环。为了优化网页并使循环无限进行，我们截取一个宽度为6像素的样本。从菜单中选择“修改”—“画布”—“画布大小”，将宽度调为6，如下图：
. _2 s7 Y0 J* I* J
/ l4 @6 K6 ^* ^# K
% u1 P6 h: l1 _* a
4 s" [& x+ G' m) L- b2 b5 G! N??按Ctrl+Shift+X运行图像预览，用PNG24格式输出图像。至此，图像处理部分结束。
网页设计部分
3 ^% u1 ]; p1 q5 \2 p& b+ E??打开你的Dreamweaver，新建一个HTML页面，并将网页保存在导出图片所在的目录。
??选择菜单中的“修改”—“页面属性”。将“背景颜色”设置为上文设置的基本色（#0099FF）。“背景图像”设为你到处的图片地址。将“重复”设为“横向重复”。

. o* v7 L0 r& c* f2 R1 ?- @9 F
# `& h8 L9 [% q9 y3 W; r; a
# H/ a5 ?$ y6 Q$ f% V$ J1 q' ?& d??现在，你已经将网页的背景设置好了，再新建一个表格，将表格背景设置成某种颜色，然后填上你所要写的网页内容就可以了。演示可以看本教程的页面。
) n0 K: p2 c$ L# a' ]% B??注：本教程可任意转载，但请注明其来源于玛雅中国，作者为Aicoy（火德）。
  m, ?1 [1 f7 p7 p??如果你有问题，欢迎到玛雅论坛提问，也欢迎你到我的博客留言。
??本教程所用软件为Fireworks 8，Dreamweaver 8。