dw网页制作—交换图像.pdf

《信息技术部》实训报告 课程实训报告 实训名称 交换图像专题练习 实验台序号 姓 名 组 号 组 长 实训日期 团队成员：注：团队成员贡献百分比之和为 1 姓 名 班 级 学 号 贡献百分比 得 分 教师评分： 一、实训目的和要求 【实训目的】 通过Dreamweaver CS5 的基本操作和“Apple 中国”主页的制作过程，学会以下制作项目内容 1、会设置主页内的Flash 动画 2 、设置文档页面属性 （网页标题，编码，超级链接颜色等） 3、交换图像效果的使用 4 、插入特殊字符 【实验原理】 利用DW 软件制作本地网页文件（以静态网页为主），网页来源于客户需求和指定预览效果图 【实训要求和课时】 2 课时 【实训设备、材料和工具】 台式计算机（预装Windows 7 及以上操作系统，预装Adobe Dreamweaver CS5 网页制作软件等）， 给定的网站预览效果图 信息技术部·2017 年 《信息技术部》实训报告 二、实训拓扑 三、实训项目过程 （包括主要步骤和说明） 【实训步骤】 任务一：制作“Apple 中国”主页 1、在驱动盘下新建文件夹，建立index 主页这里不再赘述 2、根据跟踪图像，在index 插入6X4 表格，宽度980，居中 3、合并表格第一行，并插入“16.swf”动画，居中显示 任务二：图片编辑 1、合并表格第二行，插入“1.jpg”，并在该图片的属性检查器中进行如下设置 其中，ID 是用来建立交换图像效果使用的，链接处“# ”表示为空链接。 2、合并表格第三行，并对第三行进行如下设置 3、平均分布第四行各列，并在每个单元格中插入1 行1 列的嵌套表格，如下图所示 信息技术部·2017 年 《信息技术部》实训报告 这里第四行原本有4 列，第四行总宽度980，自行进行平均分布各列，加入嵌套表格后，设置每个 嵌套表格为水平居中对齐，然后插入相应图片 4、分别为四张插入的图片进行属性检查器ID 命名，为交换图像效果做准备，设置如下 5、交换图像制作教程 选中 img1，在右侧面板组中找到“标签检查器”，选择行为，点击下面的“+ ”号，添加“交换图 像”行为，如下图所示 在弹出的“交换图像”对话框中，选择“img5 ”，如下图所示 这里要说明为什么选择“img5 ”，根据给定的“交换图像”参考视频， 信息技术部·2017 年 《信息技术部》实训报告 上图是原始效果 交换图像效果 请仔细观察，当我们把鼠标放置在图片“img1 ”，也就是上图椭圆标识的图片上，发生变化的是红 色区域的图片“img5 ”，所以在交换图像对话框中选择“img5 ”，说明它是需要变换的目标，然后在 “设定原始档”选项中选择你想要img5 变化的图片，（注意，要变换的图片必须与img5 是尺寸相 同或者相差不大的，交换图像效果只支持变换为同尺寸大小的图片，如果你选择的图片与img5 相 差太大，则变幻后图片会严重比例失调），如下图所示，我们选择14.jpg 为变换图像。我们会发现 在“img5 ”选项上会出现“*”号标记，说明该图片存在交换图像特效行为