网页设计实例教程陈旭东孙永芳崔为花张晓诺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”上的点，再画上一个小小的圆形，填充为红色；继续添加焦点新闻和导航栏目等，完成导航栏设计，如图7-6所示： 现在要思考的问题是，对于这样一个设计，我们如何把它转换为页面呢？下面的讲解就告诉大家如何变成页面。 6. 首先我们把设计图分割为6个部分，如图7-7所示： 7. 分析以上的分割，我们可以使用一个有三个行的表格来实现页面的导航条。分割部分1是页面logo，在表格中使用rowspan属性，使这个格跨两行；分割2为空白单元格；分割3为一个小图；分割4处，根据要填写的内容，可以再嵌入表格；分割5处，可使用一个宽度很小的一个背景图片，使其在水平方向平铺；第6部分因为高度很小，我们使用表格背景色就足够了。 因此，我们只需要从设计图中分割出四个小图，如下所示： 7.1 导航栏设计 7.1 导航栏设计 7.1 导航栏设计 7.1 导航栏设计 7.1 导航栏设计 语句td background=img/d02.gif使用图片d02.gif 作为背景，为什么一个小小的图片能够形成很长的导航条呢？ 原来，在html里面，作为背景的图片如果小于html元素的大小，背景图片在浏览器里会自动以平铺方式充满成个html元素的空间。在这里我们在前一个td标签里限制了高度，所以图片只在水品方向上平铺。 还可以通过一下style语句限制平铺方向： td background=img/d02.gif style=background-repeat: repeat-x; background-repeat属性共有四个值： repeat 默认，背景图像将在垂直方向和水平方向重复。 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所示： 4. 将图7-13中的虚线矩形边框设为白色（#ffffff）。在其中白色区域内，按住Shift键，绘制正圆形，边框设为无，填充颜色设为#346799，大小为83×83像素，可使用滴灌从边框取色。如图7-14所示： 7.2 标志图像制作 7.2 标志图像制作 5. 绘制两个交叉的圆形，下面小圆为白色，上面大圆颜色任意，如图7-15所示，同时选中两个圆形，在菜单栏选择“修改--组合路径--打孔”命令，结果如图7-16所示： 6. 选择打孔得到的月牙形状，在菜单栏选择“编辑--克隆”命令，将其复制。选择其中一个，在菜单栏选择“修改--变形--旋转180o”命令，然后调整其位置，如图7-17所示： 7. 在中心处绘制一小正方形，笔触和填充均设为白色，在菜单栏选择“修改--变形--数值变形”命令，设置旋转45o，如图7-18所示： 8. 最后使用文本工具添加文字对象，添加文本“网上支付采用”，字体为黑体、字号28、颜色为白色（#ffffff）；添加文本“网上银行”，字体为黑体，字号3