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

网页制作实例教程 第7章：使用Fireworks制作网页图像  本章内容 • 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键，绘制正圆形，边框设