第四单元制作和优化页面图像（运行效果）.pptVIP

/ 25 * 高新技术考试（高级网页制作员级） 第四单元操作辅导 * 第四单元 制作和优化页面图像（运行效果） 4.1 第1题解答 1. 设置文档或导入图像 第1步：在root中建立文件夹X4-01。 第2步：启动Fireworks，打开Unit4\Y4-01\Y4-01.png，如下所示： （如果在打开图像文件时同时出现“替换字体”对话框，单击“维持外观”） 2. 绘制页面图像 第3步：选择“文本”工具，在图像上 输入文本“”。 如右所示： 第4步：选中输入的文本， 执行“窗口”菜单\“样式”，在 “样式”面板中选择一种样式， 如右所示： 第5步：执行“窗口”菜单\“属性”，在“属性”面板中设置文本字号为18号，宽度320，高30，X值18,Y值248，如下所示： 3. 按钮、样式和特效的使用（库按钮） 第6步：执行“编辑”菜单\“库”\“按钮”，打开“导入元件：buttons” 对话框， 选中一种按钮类型，点“导入”按钮，往页面上依次导入三个按钮（注意这里不能复制按钮），按钮的宽度为110像素、高28像素，位置分别为（3，20），（3，70），（3，120），如下所示： 第7步：双击各按钮，进入按钮编辑状态，单击“释放”标签，将按钮文字分别设置为“专栏”、“教程”、“论坛”，文字大小为25，隶书，加粗，将“释放”状态的文字分别复制粘贴到按钮的其他状态中（删除原文字），如下所示： 4. 设定交互图像或文本 第8步：进入“帧”面板，添加三个帧，分别在帧2、帧3、帧4中导入图像Unit4\Y4-01\Y4-01A.gif、Unit4\Y4-01\Y4-01B.gif、Unit4\Y4-01\Y4-01C.gif，如下所示： 第9步：在属性面板中设置图像大小为150X150，X位置350，Y位置130。 第10步：回到第1帧，用切片工具在图像上拖动鼠标，产生一个矩形切片，点击“专栏”按钮，将其上的切片描准器拖放到矩形切片上，在弹出的“交换图像”对话框中选择帧2，同样方法使“教程”和“论坛”按钮的行为交换图像分别对应帧3和帧4，如下所示。最后将文件另存为root\X4-01\X4-01.png。 5.优化图像 第11步：在优化面板，设置“JPEG-较小文件”， 品质60，平滑2。如右所示： 6.建立切片 第12步：使用切片工具在页面上按下图样式进行切片： 7.导出HTML文件 第13步：执行“文件”菜单\“导出”，按下图进行设置，最后点“导出”按钮。 4.2 第2题解答 （运行效果） 1. 设置文档或导入图像 第1步：在root中建立文件夹X4-02。 第2步：启动Fireworks，选择“文件”菜单\“新建”，在对话框中作如下设置： 2. 绘制页面图像 第3步：导入图像Unit4\Y4-02\Y4-02.gif到画布左上角，如下所示。 第4步：设置透明色。选择“2幅”视图，点击非原始窗口（右窗口），在“优化”面板中作如下设置： 1.选择透明 2.选择工具 3.点击这里 第5步：参照前例在页面输入如下文本，如下所示： 3. 按钮、样式和特效的使用 第6步：参照前例在页面上设置按钮、样式和特效的使用，如下所示。 4. 设定交互图像或文本 第7步：参照前例在页面上设定交互图像或文本（加3帧，在帧2、帧3、帧4分别导入Y4-02A.gif、Y4-02B.gif、Y4-02C.gif），回到帧1，分别拖按钮控制柄到图像切片上，指定交换帧。如下所示。 5. 优化图像 第8步：将当前文档另存为X4-02.png， 在优化面板里作如右设置： 6. 建立切片 第9步：按以下页面进行切片： 7. 导出HTML文档 第10步：按以下对话框导出文档： 4.3 第3题解答 （运行效果） 1. 设置文档或导入图像 第1步：在root中建立文件夹X4-03。 第2步：启动Fireworks，打开Unit4\Y4-03\Y4-03.png，如下所示：