网站首页设计与切片new.pptVIP

/ 93 * （7）添加帧。在Fireworks中可以添加许多帧，但每次窗口中只能显示其中的一帧，因此要切换6张图片，就要把它们分别放在6个帧当中。 打开【帧】浮动面板，点击浮动面板右上角的黑色三角形“选项”按钮，从菜单中点选【重制帧】，在【数目】框中输入6，并选取【在当前帧之后】选项，表示在当前帧的后面再复制6个帧，如下左图所示。重制后的【帧】浮动面板如下右图所示。 CS3界面 / 93 * (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）新建文档，使用文字工具输入文本“系部简介”； （2）用矩形热点工具将“系部简介”四字框住，将其设置为热区，如上所示。 （3）选取指针工具，右键单击“系部 简介”热区，在弹出的快捷菜单（如下左 图所示）中选择【添加弹出菜单…】，得 到如下右图所示的对话框。 / 93 * （4）输入菜单项的文本内容及链接地址后按”+”按钮，以增加菜单项。 （5）所有链接对象的名称和地址输入完毕后点”继续”按钮，得到如下左图所示的对话框。 （6）设置完菜单的行为颜色属性后点击”完成”按钮，回到编辑窗口，点击“系部简介”热区，用鼠标拖动菜单的框线到合适位置即可，设计完毕。 （7）按下F12键，在IE中浏览（下拉菜单只能在浏览器中显示），将鼠标移动到相应的选项上，会显示出下拉菜单，得到如下右图的显示效果。 习题1 / 93 * Fireworks应用实例1：运行效果 1. 设置文档或导入图像 第1步：在root中建立文件夹X4-01。 第2步：启动Fireworks，打开Unit4\Y4-01\Y4-01.png，如下所示： （如果在打开图像文件时同时出现“替换字体”对话框，单击“维持外观”） / 93 * 2. 绘制页面图像 第3步：选择“文本”工具，在图像上 输入文本“”。 如右所示： 第4步：选中输入的文本， 执行“窗口”菜单\“样式”，在 “样式”面板中选择一种样式， 如右所示： / 93 * 第5步：执行“窗口”菜单\“属性”，在“属性”面板中设置文本字号为18号，宽度320，高30，X值18,Y值248，如下所示： / 93 * 3. 按钮、样式和特效的使用（库按钮） 第6步：执行“编辑”菜单\“插入”\“新建按钮”，点击“导入按钮”按钮，打开“导入元件：buttons” 对话框，选中一种按钮类型，点“导入”按钮，往页面上依次加入三个按钮（不能用复制的方法产生），按钮的宽度为110像素、高28像素，位置分别为（3，20），（3，70），（3，120），如下所示： / 93 * 第7步：双击各按钮，进入按钮编辑状态，单击“释放”标签，将按钮文字分别设置为“专栏”、“教程”、“论坛”，文字大小为25，隶书，加粗，将“释放”状态的文字分别复制粘贴到按钮的其他状态中（删除原文字），如下所示： / 93 * 第7步：