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

本章内容 7.1 导航栏设计 7.2 标志图像制作 7.3 切片工具的使用 7.4 图像热区链接 7.5 使用Javascript 7.6 设为Dreamweaver外部图像编辑器 7.7 本章小结 7.1 导航栏设计 这个实例讲述了如何设计一个简单的导航栏，以及在Fireworks中的图像设计如何转化为实际的页面，首先看一下最终页面的效果： 效果还不错吧。设计步骤如下： 1. 启动Fireworks，新建图像文件，使用钢笔工具绘制一个封闭路径，如图7-2所示： 2. 将填充方式设置为线性，默认线性填充是水平方向的，使用油漆桶工具垂直划线，可将线性填充修改为垂直方向填充，如图7-3所示： 3. 合理设置渐变颜色，并在中间增加两个颜色控制点，如图7-4所示： 4. 设计页面Logo：使用文字工具插入“”和网站名称“安皇物流网”。将“”字体设置为“Impact”，字号为28号；并将“cn”的颜色设为红色；“安皇物流网”设置为黑体，水平间距为60，颜色为为浅灰色（#565F64）；并在两各文字对象中间绘制一条灰线，宽度为1像素，颜色为浅灰色（#8F9094），如图7-5所示： 7.1 导航栏设计 7.1 导航栏设计 7.1 导航栏设计 5. 选择logo内所有对象，在菜单栏选择“修改--平面化所选”命令，转化为位图；用橡皮工具擦去“i”上的点，再画上一个小小的