利用为热点(切片)添加行为,制作一张介绍学校概况和各系“系情简介”的网页。
⑴创建一个新文档。宽800像素、高600像素。
⑵导入一幅学院图像,然后在“属性”面板上,调整图像大小,且将透明度设定为45%。如图1所示。
图1 位图属性
⑶在“层”面板上,双击“层1”,在“层属性”对话框上,选中“共享交叠层”复选框,然后单击文档窗口中空白处。
1 制作图形元件
⑴单击“编辑”·“插入”·“新建元件”后,在“元件属性”对话框上,“名称”框中输入“单位”,“类型”选定“图形”。如图2所示。
图2 “元件属性”对话框
⑵在图形元件编辑窗口中,用矩形工具制作一个矩形。宽160像素、高40像素。
⑶选中矩形后,在“样式”面板上,单击“Style10”样式,为矩形应用样式。
2 创建热点、切片
⑴回到文档窗口,单击“层”面板下方“新建/重制层”按钮,新建“图层2”。并将它作为当前图层。
⑵用“文本”工具书写刊头文字:“安徽工业经济职业技术学院”,文字颜色为黑色、字体为华文行楷。
⑶选中文字块后,单击“编辑”·“克隆”,原位复制出一个文字块,然后将它颜色改为红色,并使两个文字块略为错开一点,显示出立体效果。如图3所示。
⑷七次从“库”面板中将图形元件拖到文档窗口中,利用“修改”·“对齐”次级菜单命令,将它们排列整齐。
图3 刊头文字效果
⑸用“文本”工具,在七个矩形图形实例上,分别书写各系名称。
⑹将所有图形实例选中后,单击“编辑”·“插入”“热点”,然后在提示对话框上,单击“多重”。如图4所示。
图4 热点提示
⑺用“切片”工具,在文档右下部,创建一个切片。
⑻用“文本”工具,在切片上,拖曳出一个矩形框后,将有关学校概况的文字粘贴到其中。如图5所示。
提示:这样的文字块,编辑(设置字体、字号等)方法与文字处理软件一样。
图5 热点与切片
3 添加行为
⑴用“指针”工具,在“学校概况”热点上,单击右键,然后单击“添加交换图像行为”。
提示:热点、切片被选中后,中间显示一个控制标志,如图6中“学校概况”热点被选中后,显示控制标志。在该标志上单击,就可弹出快捷菜单。
⑵在“交换图像”对话框上,文档缩微图上选中右下部区域,在“交换图像显示自”选项区,“帧编号”框中,选定“帧1”,然后单击“确定”。如图6所示。
图6 “交换图像”对话框
⑶在“帧”面板上,单击“新建/重制帧”按钮,新建帧2。
⑷在帧2上,用“文本”工具,在切片上,拖曳出一个矩形框后,将有关旅游与资源系简介文字粘贴到其中。
⑸回到帧1,用“指针”工具,在“旅游与资源系”热点上,单击右键,然后单击“添加交换图像行为”。
⑹在“交换图像”对话框上,文档缩微图上选中右下部区域,在“交换图像显示自”选项区,“帧编号”框中,选定“帧2”,然后单击“确定”。
⑺在“帧”面板上,单击“新建/重制帧”按钮,新建帧3。
⑻在帧3上,用“文本”工具,在切片上,拖曳出一个矩形框后,将有关机电工程系简介文字粘贴到其中。
⑼回到帧1,用“指针”工具,在“机电工程系”热点上,单击右键,然后单击“添加交换图像行为”。
⑽在“交换图像”对话框上,文档缩微图上选中右下部区域,在“交换图像显示自”选项区,“帧编号”框中,选定“帧3”,然后单击“确定”。
⑾四次重复⑶至⑹步,分别为“计算机科学技术系”、“商贸系”、“电子信息技术系”和“现代经济管理系”的热点,添加交换图像行为。
“交换图像显示自”选项区,“帧编号”分别为帧4、5、6、7。
分别用“文本”工具,将各系简介文字“书写”到帧4、5、6、7上。
提示:所有的文本块均在“层2”上,由于帧不同,因此不会同时显示。
热点添加行为后,就会出现在“行为”面板上。如图7所示。
图7 “行为”面板
从图8中可以看出,动作-交换图像,是由鼠标事件-滑过,触发的。用户可以在“行为”面板上更改鼠标事件。
4 预览与导出
介绍学校概况和各系“系情简介”的网页制作完成后,单击文档窗口右上角的“快速导出”按钮,指向“在浏览器中预览”后,单击“主浏览器中预览”。
在浏览器中首先看到的,如图8所示。
当鼠标移到“商贸系”按钮上时,显示如图9。
图8 预览效果“学校概况”
图9 预览效果“商贸系”
预览认为制作达到预期效果后,将文件导出。
单击“文件”·“导出”后,在“导出”对话框上,设定“保存目录”、“文件名”、“保存类型”(一定是“HTML和图像”)等。然后单击“确定”如图10所示。
图10 “导出”对话框
提示:为了管理方便,选中“将图像放入子文件夹”,Fireworks会自动创建一个名为“images”的子目录,存放图像文件。
最后,保存“学院主页.png”文件,以便今后修改时使用。
5 关注“层”和“帧”面板中的信息
“层1”是共享图层,上面只有学院图像。
“层2”,放置了其他所有的图形实例、文本等。
“网页层”,放置了所有的热点和切片。
“帧”面板中,当前帧是“帧2-7”时,“层2”上,只有放置在切片之上的文本。