教你用Fireworks制作简洁清爽的网站页面
程序员文章站
2022-03-29 11:31:30
本教程是向大家介绍利用Fireworks制作简洁清爽的网站页面,制作出来的网站页面很不错,方法也很简单,希望大家通过这篇教程能学会如何设计一个好的网站... 14-07-15...
本教程是向大家介绍利用fireworks制作简洁清爽的网站页面,制作出来的网站页面很不错,方法也很简单,希望大家通过这篇教程能学会如何设计一个好的网站。
1. 启动fireworks,新建一个大小为180*200像素的画布,设置画布颜色为 #efefef。
2. 在工具栏中选择矩形工具,绘制一个154* 183的矩形,在属性面板中设置这个矩形的填充色为#a9b1be,描边设置为1像素的柔化,颜色为#677387,如图所示。
3. 利用矩形工具绘制一个宽 152,高 19 的矩形,在属性检查器中设置描边为无,填充类别改为线性, 修改线性填充的颜色样本,第一个颜色样本的颜色为#e6ffff,然后单击渐变色阶下面的区域,新增 一个新的颜色样本,颜色为 #a4becf,最后一个颜色样本为 #ffffff,具体设置如图所示:
回到画布上,调整一下渐变方向,现在你的图看起来应该像是下图那样。
5.使用直线工具画出两条长为153的线段,颜色为 #677387,描边种类为1 像素柔化,分别放在上方矩形的下边及下方矩形的上边。
6. 加入标题列的文字,字体为 elektr_02_5,大小为 10,不消除锯齿,加入内容区的文字,字体为 04b03b,大小为 8,不消除锯齿,
7. 在帧面板,单击“新建/重制帧”按纽,新增一帧。返回到第一帧,按“ctrl”+“a”全选中画布上的所有对象,按“ctrl” +“c” 复制,然后到第二帧,按 “ctrl” +“v” 粘贴,然后按住shift键不放,选择将帧二上的 home、fireworks、dreamweaver 文字,往上及往左各偏移 1 个像素,这是要制造当鼠标移到文字上时,使其产生偏移的效果。
用同样的方法,分别制作 fireworks、dreamweaver 交换图像的行为。
提示:你可以先切换到预览视图,将鼠标移到链结上察看效果。
教程结束,以上就是利用fireworks制作简洁清爽的网站页面过程,希望对大家有所帮助!