网页设计与制作项目教学课件王君学孙海伦金哲第4章节教案项目4图像和媒体──编排摄影作品网页-.pptVIP

项目四 图像和媒体──编排摄影作品网页 本项目以编排摄影作品网页为例，在项目中，首先介绍有关图像和媒体的基本知识。然后介绍插入图像占位符和图像以及设置图像属性的方法，最后介绍插入Flash动画、图像查看器和ActiveX视频的方法。 任务一 插入图像 （一）插入图像占位符 （1）首先在Dreamweaver 8中定义一个本地静态站点，然后把“项目素材”文件夹中的内容复制到站点根文件夹下。 （2）在【文件】面板的列表框中双击打开网页文件“index.htm”。 （4）在【页面属性】对话框／【外观】分类的【重复】下拉列表中选择【重复】选项，然后单击确定按钮关闭对话框。 （5）将鼠标光标置于正文第1段的起始处，然后选择菜单栏中的【插入】／【图像对像】／【图像占位符】命令，或在【插入】／【常用】面板的【图像】下拉菜单中单击按钮，打开【图像占位符】对话框 。 （6）单击确定按钮，插入图像占位符，然后在【属性】面板的【对齐】下拉列表中选择【右对齐】选项，将鼠标光标置于正文第1段的起始调整后。如图： （二）插入图像和设置图像属性 （1）将鼠标光标置于正文第2段的起始处，然后在菜单栏中选择【插入】／【图像】命令，打开【选择图像源文件】对话框，选中图像文件“images/rw1.jpg”，如图所示。然后单击确定按钮，将图像插入到文档中。 （2）确认图像处于被选中状态，然后在图像【属性】面板的【宽】和【高】文本框中分别输入“170”和“130”来重新定义图像的显示大小。也可以直接选取图像，将鼠标光标移动到空点上，按住鼠标左键拖曳调整图像大小（若是按住Shift键拖曳，图片会等比例缩放）。 （4）在【垂直边距】和【水平边距】文本框中输入“2”，在【边框】文本框中输入“3”，在【对齐】下拉列表中选择【左对齐】选项，【属性】面板如图 ： 任务二 插入媒体 （一）插入Flash动画 （1）将鼠标光标置于正文第3段文本的最后，然后按Enter键，在正文文本的前面添加一个空段落，然后在【属性】面板中单击居中按钮使其居中对齐。 （2）在菜单栏中选择【插入】／【媒体】／【Flash】命令，打开【选择文件】对话框，在对话框中选择要插入的Flash动画文件“images/dh.swf” 。 （4）在【属性】面板的【宽】和【高】文本框中分别输入“320”和“216”，并保证已勾选【循环】和【自动播放】两个复选框 。 （5）在【属性】面板中单击播放按钮，可以在页面中预览Flash动画效果，此时播放按钮变为停止按钮。 （二）插入图像查看器 （1）将鼠标光标置于正文第一段文本的起始处，然后按Enter键，在正文前面添加一个空段落，并使其居中对齐，然后在菜单栏中选择【插入】／【媒体】／【图像查看器】命令，打开【保存Flash元素】对话框，为新的Flash动画命名“flash1” 。 （2）单击保存按钮，在文档中插入一个Flash占位符，在【属性】面板中定义其宽度和高度分别为“200”和“200” 。 （4）修改图像文件路径，使其可以显示预先准备好的图像 。 （5）单击确定按钮，然后在【属性】面板中单击播放按钮。 （三）插入ActiveX视频 （1）将鼠标光标置于正文的最后部分。然后将常用工具栏切换为Html工具栏。 （2）在网页的最下端插入一条水平线。将鼠标光标置于水平线下端后设置为“居中对齐”。然后在菜单栏中选择【插入】／【媒体】／【ActiveX】命令，系统自动在文档中插入一个ActiveX占位符。 （4）选择【嵌入】选项，然后在【属性】面板中单击参数按钮，打开【参数】对话框，根据“项目素材\WMV.txt”中的提示，添加参数 。 （5）参数添加完毕后，单击确定按钮，关闭【参数】对话框，然后在【属性】面板中设置【宽】和【高】 。 （6）最后保存文件，并按F12键 。 实训 设置“国宝熊猫”网页 本项目主要介绍了在网页中插入图像和媒体的基本方法，本实训将让读者进一步巩固所学的基本知识。 要求：把“项目实训\素材”文件夹下的内容复制到站点根文件夹下，然后在网页文档中插入图像和图像查看器 小结 本项目主要介绍了图像和媒体在网页中的应用和设置方法，概括起来主要有以下几点。 通过【页面属性】对话框设置网页背景图像的方法。 在网页中插入图像占位符和图像的方法。 通过【属性】面板设置图像属性和实现图文混排的方法。 插入常用媒体的方法，如Flash动画、图像查看器和ActiveX视频。 * * 尚辅网 / 任务一