网页设计ch1.pptVIP

/ 93 （7）添加帧。在Fireworks中可以添加许多帧，但每次窗口中只能显示其中的一帧，因此要切换6张图片，就要把它们分别放在6个帧当中。 打开【帧】浮动面板，点击浮动面板右上角的黑色三角形“选项”按钮，从菜单中点选【重制帧】，在【数目】框中输入6，并选取【在当前帧之后】选项，表示在当前帧的后面再复制6个帧，如下左图所示。重制后的【帧】浮动面板如下右图所示。 (8)把准备好的图片添加到各帧中。点选【帧】浮动面板中的帧2，选择【文件】菜单/【导入…】，在打开的【导入】对话框中选择第一幅豹子的图片，在矩形区域中划过一个区域，将图片放入该区域，之后可能还要对图片进行适当的调整，如下左图所示。 (9)用同样的方法，在帧3、4、5、6、7中分别导入其他5张图片。 (10)设置切片。切片（Slice）是可以接受交互动作的区域，回到帧1中，选择工具面板中的切片工具 ，将矩形边框所在的区域切割成为一个切片，如下右图所示。 热区 切片 （11）设置交互动作。用选取工具 点选左边的【豹子】热区，按住【描准】小图标，将它拖到切片区域上，放开鼠标。拖拽到矩形切片上时，会发现这两个区域被一条曲线连接起来了。接着会弹出选择切换图片的对话框，其中预设为帧2，这里不用修改。表示当鼠标移到文字热区【豹子】上时，把切片矩形区域中显示的内容由帧1切换到帧2，显示出帧2中的豹子图片，如下左图所示。 （12）重复上一个步骤。将【狐狸】、【蝴蝶】、【马】、【母鸡】、【屎克郎】5个热区分别链接到切片区域上。在链接时，要将交换图像对话框中的【交换图象自】分别修改为帧3至帧7，表示鼠标移到【狐狸】、【蝴蝶】、【马】、【母鸡】、【屎克郎】上时，分别显示这5张图片。 （13）预览。点击文档窗口的【预览】选项卡，或导出为网页文件在浏览器中显示。下右图是鼠标指向【豹子】的显示效果。 (十二)下拉菜单的制作 当网页具有较多功能时，如果每种功能都通过一个按钮来实现，会使页面看起来很杂乱。好的办法是使用菜单。下拉菜单主要用于导航栏中的选项存在子选项的情况下，当用户将指针移到导航栏中某个对象时，将显示相应的弹出菜单。 （1）新建文档，使用文字工具输入文本“系部简介”； （2）用矩形热点工具将“系部简介”四字框住，将其设置为热区，如上所示。 （3）选取指针工具，右键单击“系部 简介”热区，在弹出的快捷菜单（如下左 图所示）中选择【添加弹出菜单…】，得 到如下右图所示的对话框。 (三) 网站风格案例赏析 １.中国奢侈品信息网(/) 2. 阿摩司视觉艺术中心（/） 3.黑蚁设计(/index2.html) 4.个人网站(/) 三、任务实施 【任务场景】任选一种作图工具，体验网页配色并绘图。 【操作环境】Windows XP、任选一种作图工具。 【操作步骤】 步骤1 启动作图工具（或运行网页配色程序，网上有下载）； 步骤2 体验网页配色，为网页选择好背景、前景、强调等色彩搭配。 四、课堂实践 例1．1 任选几个你认为漂亮的网站进行赏析，教师点评。 任务2 利用切片工具制作网页模板 一、任务分析 张先生的网站首页背景图片设计完成后，我们可以利用Photoshop或Fireworks等工具为他的网站首页图片进行切片。网页切片的目的是在网页中创建导航链接、翻转和动画效果，另外可以优化图片以提高网页下载速度。 掌握切片工具的使用 目的 备注 投影仪 教具 2 2 无 难点 切片工具的使用 重点 任务2 利用切片工具制作网页模板 课题 课时 课次 二、相关知识 下面学习Fireworks的基本操作方法。 Fireworks是第一个针对网页而开发的专业图像处理软件。它将矢量图像处理和位图图像处理合二为一，避免了图像在多个应用程序之间来回迁移。 Fireworks矢量图形处理能力强，能任意切图、生成鼠标翻转图像； 具有强大的动画和网络图像生成功能，可以进行图像优化； 可以导出带有HTML或者JavaScript代码的网页文件； Fireworks提供了一个真正集成的Web解决方案。 （一）Fireworks常用工具 1. 工具箱 工具箱(Toolbox)是应掌握的工具之一，如下所示。 右下角带有小三角号 的都是工具组，用鼠标按 住工具组图标1秒后，其 隐含的组员图标便会弹出， 按住鼠标不放并向右拖动， 选择需要的组员并释放鼠 标，此工具成员图标便出 现在工具箱中，替代了原 来的工具组图标。 2. Fireworks 操作基础 在Firework