第1章 网页设计基础知识 本章主要内容.ppt

/ 94 * 4. 设定交互图像或文本 第9步：参照前例在页面上设定交互图像或文本，本例已经加帧并导入了图像，只要设置切片和变换图像行为即可(先回帧1，然后从按钮切片往图像切片上拖“行为手柄”)，如下所示。 / 93 * 5. 优化图像 第10步：将当前文档另存为X4-03.png， 在优化面板里作如右设置： 6. 建立切片 第11步：按右边页面样式 进行切片： / 93 * 7. 导出HTML文档，完成。 * (2)单击【表格】卡片，可以设置切片经过切分HTML表格的空白单元选项。Fireworks默认采用一个像素宽的透明文件(默认为spacer.gif)来填充单元格间距（即【1象素透明间隔符】）。 下边的【空单元格】栏可设置空白单元的颜色和图像。 (3)单击【文档特定信息】卡片，设置各切片导出的文件命名格式。默认是【文件名】+【下划线】+切片所在的【行值】和【列值】。 * 还可以选择【文件名】+【下划线】+【1，2，3，4，】这种方式。 如果只对重要的部分设置了切片，可将【包含没有切片的区域】打勾，这样可以把没切片的区域也一起导出。 (4)单击”确定”按钮，返回到前一对话框中，单击”保存”按钮，命名为home_1.htm。最后保存png文档。 * (十一)热区和切片的应用 热区（Hotspot）和切片（Slice）是用来创建图像交互效果的重要工具，下面的例子使用热区和切片实现图片的切换，运行效果(例3.3-1)是当用鼠标指向文本时在图片区域中显示出相应的动物图片。操作步骤如下。 （1）准备6张用于切换的动物图片。本例的6幅图片如下所示。 （2）在Fireworks中新建一个文档。 * （3）在文档窗口中绘制一个矩形区域，准备放置这6张图片。点击矩形工具按钮 ，在文档窗口中用鼠标拖拽出一个适当大小的矩形； （4）选中矩形，在属性面板中设置边线为红色，填充为白色； （5）在工具面板中点击文字工具 ，在文档窗口底端放一段文字，内容为【豹子　狐狸　蝴蝶　马　母鸡　屎克郎】； （6）利用矩形热点工具 ，为这段文字中的各动物名称设置热区。只有热区内的对象才能加入动作。这里要实现鼠标指向文字时显示图片，就必须把文字所在的区域设为热区，如下图所示。 热区 * （7）添加帧。在Fireworks中可以添加许多帧，但每次窗口中只能显示其中的一帧，因此要切换6张图片，就要把它们分别放在6个帧当中。 打开【帧】浮动面板，点击浮动面板右上角的黑色三角形“选项”按钮，从菜单中点选【重制帧】，在【数目】框中输入6，并选取【在当前帧之后】选项，表示在当前帧的后面再复制6个帧，如下左图所示。重制后的【帧】浮动面板如下右图所示。 CS3界面 * (8)把准备好的图片添加到各帧中。点选【帧】浮动面板中的帧2，选择【文件】菜单/【导入…】，在打开的【导入】对话框中选择第一幅豹子的图片，在矩形区域中划过一个区域，将图片放入该区域，之后可能还要对图片进行适当的调整，如下左图所示。 (9)用同样的方法，在帧3、4、5、6、7中分别导入其他5张图片。 (10)设置切片。切片（Slice）是可以接受交互动作的区域，回到帧1中，选择工具面板中的切片工具 ，将矩形边框所在的区域切割成为一个切片，如下右图所示。 热区 切片 / 93 * （11）设置交互动作。用选取工具 点选左边的【豹子】热区，按住【描准】小图标，将它拖到切片区域上，放开鼠标。拖拽到矩形切片上时，会发现这两个区域被一条曲线连接起来了。接着会弹出选择切换图片的对话框，其中预设为帧2，这里不用修改。表示当鼠标移到文字热区【豹子】上时，把切片矩形区域中显示的内容由帧1切换到帧2，显示出帧2中的豹子图片，如下左图所示。 （12）重复上一个步骤。将【狐狸】、【蝴蝶】、【马】、【母鸡】、【屎克郎】5个热区分别链接到切片区域上。在链接时，要将交换图像对话框中的【交换图象自】分别修改为帧3至帧7，表示鼠标移到【狐狸】、【蝴蝶】、【马】、【母鸡】、【屎克郎】上时，分别显示这5张图片。 （13）预览。点击文档窗口的【预览】选项卡，或导出为网页文件在浏览器中显示。下右图是鼠标指向【豹子】的显示效果。 / 93 * (十二)下拉菜单的制作 当网页具有较多功能时，如果每种功能都通过一个按钮来实现，会使页面看起来很杂乱。好的办法是使用菜单。下拉菜单主要用于导航栏中的选项存在子选项的情况下，当用户将指针移到导航栏中某个对象时，将显示相应的弹出菜单。 （1）新建文档，使用文字工具输入文本“系部简