[计算机软件及应用]dreamweaver 做网站设计全面解析7.pptVIP

* 3.实训案例效果 鼠标单击手指图像时，在左上角显示拼图的效果图,如图所示。 * 完成拼图游戏后的画面如图所示： * 7.5 小结 本项目介绍了在网页中插入各种媒体文件、行为特效的使用、网站相册的创建以及使用CCS样式美化相册的方法和技巧。通过本项目的学习，让读者掌握各种多媒体元素的灵活运用，丰富自己的网页，使网站变得更加生动起来。对CSS样式的进一步学习，可以让读者对CSS样式有个完整全面的了解。 ? * * （2）选择apDiv1,打开【行为】面板，单击【添加行为】按钮 ，在弹出的菜单中选择【显示—隐藏元素】动作，打开【显示—隐藏元素】对话框，如图所示。 * （3）在“元素”列表框中选择div“apDiv2”，然后单击下面的 按钮，单击 按钮，在行为面板中选择事件为“onMouseOver”,如图所示。 * （4）重复（2）（3）步骤，在“元素”列表框中选择div“apDiv2”，然后单击下面的 按钮，单击 按钮，在行为面板中选择事件为“onMouseOut”,如图所示。 * （5）保存文件，按F12键在浏览器中观看网页效果，鼠标经过apDiv1中的“显示效果”对象上时显示apDiv2中的“汽车”内容，产生隐现效果，如图所示。 * 7.2.5 情境5 转到URL 【转到URL】行为动作可在当前窗口或指定的框架中打开一个新页。此行为适用于通过一次单击更改两个或多个框架的内容。 【转到URL】行为的制作步骤如下： （1）在文档中选择要添加行为的图像，打开行为面板，单击【添加行为】按钮 ，在弹出的菜单中选择【转到URL】动作，如下图所示。 * * （2）打开【转到URL】对话框，在URL文本框中输入要转到的URL“”，如图所示。 * （3）单击 按钮，在行为面板中看到添加的动作。可以将事件设置为“onMouseMove”，如图所示。 * （4）保存网页文档，按F12键浏览，当光标在添加了行为的图像上移动时，就会转到指定的URL，如图所示。 * 7.2.6 情境6 设置状态栏文本 使用【设置状态栏文本】行为动作可以浏览器窗口底部左侧的状态栏中显示消息。例如：可以使用此动作在状态栏中显示链接的目标。 【设置状态栏文本】行为的制作步骤如下： （1）打开行为面板，单击 【添加行为】按钮 ，在弹出的菜单中选择【设置文本】→【设置状态栏文本】动作，如下图所示。 * * （2）打开【设置状态栏文本】对话框，在“消息”文本框中输入要显示的文字或相应的JavaScript代码，如图所示。 * （3）单击 按钮，即可完成行为添加。保存网页文档，按F12键在浏览器中预览效果，如图所示。 * 7.3 任务3 创建网站相册 相册与人们的生活密切相关，它可以用来收集、查看照片。在制作个人网站时，用户也可以把自己的电子相册放到网页中去。用Dreamweaver CS4制作相册的优点主要是可以设置更多的选项，页面制作得更漂亮。 在制作相册前，首先要确保计算机中安装有Fireworks图像处理软件，Dreamweaver CS4需要调用它来处理图片。 制作电子相册的操作步骤如下： （1）新建一个用来存放图片的文件夹images，再建立final文件夹用来存放生成的html文件。 * （2）将所要放到相册中的图片保存到images文件夹中。 （3）运行Dreamweaver CS4，执行【文件】→【新建】菜单命令，新建一个空白页面，专门用来存放电子相册。 （4）执行【命令】→【创建网站相册】菜单命令，弹出【创建网站相册】对话框，输入生成的网页标题，在【源图像文件夹】中输入images文件夹路径，在【目标文件夹】中输入final文件夹路径，如下图所示。 * * （5）设置完成后单击 按钮，系统自动调用Fireworks，完成相册主页的创建过程。 （6）单击 按钮，将弹出相册的页面。 （7）可以使用CSS样式表来美化相册，在【新建CSS规则】对话框中设置参数如图所示，新建一个table标签的CSS样式来修饰表格的边框。 * （8）单击 后，弹出【table的CSS规则定义】对话框，在“分类”列表中选择“边框”，设置表格边框的样式、宽度、颜色，如图所示。 * （9）再新建一个单元格td标签的CSS样式，参数设置如图所示。 * （10）单元格的类型与边框参数设置。类型中设置文字为白色；边框中设置样式为实线(solid)、宽度(width)为1px、颜色(color)为灰色。如图所示。 * （11）单元格的扩展参数设置如图所示。在“过滤器”栏中输入