网页设计实例教程 陈旭东 孙永芳 崔为花 张晓诺 07

《网页设计实例教程 陈旭东 孙永芳 崔为花 张晓诺 07》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页制作实例教程第7章：使用Fireworks制作网页图像本章内容7.1导航栏设计7.2标志图像制作7.3切片工具的使用7.4图像热区链接7.5使用Javascript7.6设为Dreamweaver外部图像编辑器7.7本章小结7.1导航栏设计这个实例讲述了如何设计一个简单的导航栏，以及在Fireworks中的图像设计如何转化为实际的页面，首先看一下最终页面的效果：效果还不错吧。设计步骤如下：1.启动Fireworks，新建图像文件，使用钢笔工具绘制一个封闭路径，如图7-2所示：2.将填充方式设置为

2、线性，默认线性填充是水平方向的，使用油漆桶工具垂直划线，可将线性填充修改为垂直方向填充，如图7-3所示：3.合理设置渐变颜色，并在中间增加两个颜色控制点，如图7-4所示：4.设计页面Logo：使用文字工具插入“thinktrans.cn”和网站名称“安皇物流网”。将“thinktrans.cn”字体设置为“Impact”，字号为28号；并将“cn”的颜色设为红色；“安皇物流网”设置为黑体，水平间距为60，颜色为为浅灰色（#565F64）；并在两各文字对象中间绘制一条灰线，宽度为1像素，颜色为浅灰色（

3、#8F9094），如图7-5所示：7.1导航栏设计7.1导航栏设计7.1导航栏设计5.选择logo内所有对象，在菜单栏选择“修改--平面化所选”命令，转化为位图；用橡皮工具擦去“i”上的点，再画上一个小小的圆形，填充为红色；继续添加焦点新闻和导航栏目等，完成导航栏设计，如图7-6所示：现在要思考的问题是，对于这样一个设计，我们如何把它转换为页面呢？下面的讲解就告诉大家如何变成页面。6.首先我们把设计图分割为6个部分，如图7-7所示：7.分析以上的分割，我们可以使用一个有三个行的表格来实现页面的导航条

4、。分割部分1是页面logo，在表格中使用rowspan属性，使这个格跨两行；分割2为空白单元格；分割3为一个小图；分割4处，根据要填写的内容，可以再嵌入表格；分割5处，可使用一个宽度很小的一个背景图片，使其在水平方向平铺；第6部分因为高度很小，我们使用表格背景色就足够了。因此，我们只需要从设计图中分割出四个小图，如下所示：7.1导航栏设计7.1导航栏设计7.1导航栏设计7.1导航栏设计7.1导航栏设计语句使用图片d02.gif作为背景，为什么一

5、个小小的图片能够形成很长的导航条呢？原来，在html里面，作为背景的图片如果小于html元素的大小，背景图片在浏览器里会自动以平铺方式充满成个html元素的空间。在这里我们在前一个标签里限制了高度，所以图片只在水品方向上平铺。还可以通过一下style语句限制平铺方向：background-repeat属性共有四个值：repeat默认，背景图像将在垂直方向和水平方向重复

6、。repeat-x背景图像将在水平方向重复。repeat-y背景图像将在垂直方向重复。no-repeat背景图像将仅显示一次。7.2标志图像制作7.2标志图像制作1.绘制一个圆角矩形，将其边框设置为无、填充颜色为#346799。大小为276×183像素，如图7-15所示：2.绘制一个矩形，边框和填充均为白色，参考尺寸260×73像素，如图7-16所示：3.绘制一个圆角矩形，调整大小和位置，使其宽度和前一个白色矩形宽度相等。为了方便读者查看，将边框设置为虚线，大小为260×49像素，如图7-13所示：

7、4.将图7-13中的虚线矩形边框设为白色（#ffffff）。在其中白色区域内，按住Shift键，绘制正圆形，边框设为无，填充颜色设为#346799，大小为83×83像素，可使用滴灌从边框取色。如图7-14所示：7.2标志图像制作7.2标志图像制作5.绘制两个交叉的圆形，下面小圆为白色，上面大圆颜色任意，如图7-15所示，同时选中两个圆形，在菜单栏选择“修改--组合路径--打孔”命令，结果如图7-16所示：6.选择打孔得到的月牙形状，在菜单栏选择“编辑--克隆”命令，将其复制。选择其中一个，在菜单栏选

8、择“修改--变形--旋转180o”命令，然后调整其位置，如图7-17所示：7.在中心处绘制一小正方形，笔触和填充均设为白色，在菜单栏选择“修改--变形--数值变形”命令，设置旋转45o，如图7-18所示：8.最后使用文本工具添加文字对象，添加文本“网上支付采用”，字体为黑体、字号28、颜色为白色（#ffffff）；添加文本“网上银行”，字体为黑体，字号36、颜色为黑色（#000000）；添加文本“ChinaBankOnline”，字体为Arial、字号16，颜色黑色。