DREAMWEAVER实验内容.docVIP

Dreamweaver 实验指导 实验目的与要求 熟悉Dreamweaver MX 2004的工作界面及其基本操作，熟练掌握在网页中添加各种对象，并能够运用超链接，包括文本超链接、锚链接、热点超链接等。了解层的作用，结合嵌入的JavaScript函数来制作网页特效。 二、计算机配置要求 最低配置：Pentium III CPU,128MB RAM,500MB 硬盘空间 操作系统：Window 2000/XP 三、实验内容 Photoshop切片 使用Photoshop中的切片工具将已经设计好的页面图片（素材/主页.psd）进行切片，然后将其保存为Web所用的格式,即选择“文件/存储为Web所用的格式”命令。保存成功后，会生成一个主页.html文件和一个名为images的文件夹，里面装有切片之后的图片。 PS：如何切片可参考“效果”文件夹中“主页_切片.psd”。 导入Dreamweaver 打开Dreamweaver，打开在上一步生成的“主页.html”，按F12预览一下。 为网页添加背景音乐 选择“插入/标签”命令，出现对话框(如图1)，双击bgsound出现如图2所示的对话框，选择素材文件夹中的fool again.mp3，可设置播放次数，-1代表无限次循环。确定之后，按F12预览效果。 图1 图2 制作滚动文字效果 打开“主页.html”，删除消息栏旁边单元格的图片，将文本“通知：….”输入进去（内容见“效果”文件夹中的“主页.html”）。 切换到“代码”编辑窗口，将下列程序代码插入。 marquee style=cursor:hand behavior=scroll direction=up width=200 height=200 scrollamount=1 scrolldelay=0 onmouseover=this.stop() onmouseout=this.start()/ 按F12预览。 将鼠标移进移出文本框，观察其变化效果。将各参数值作一些改动，再观察其变化例如：将direction的值变为left或者right。 创建图片超链接 打开“主页.html”,选中图片“广东药学院主页”。 在属性栏的“链接”框中输入：. 按F12保存预览。 创建热点链接 使用Photoshop制作目标链接页面（素材/普通页面.psd），之后进行切片，保存，此页面为普通页面模板，复制5个页面模板分别将其命名改为“课程介绍.html”、“课件下载.html”、“上课时间.html”、“消息1.html”、“photoshop.html”(建议命名时用英文字母),再将其导入Dreamweaver中去，按F12进行预览。 插入一个3行*1列的表格，设置如下图所示。 在第一行输入“课程介绍四个字”，可设置如下： 在第二行插入图片“分割线.jpg”(在素材文件夹中)。 在第三行中插入文字段落。 按F12预览，保存。 回到“主页.html”中，选择常用工具栏，点击图标旁边的倒三角形，选择“矩形热点”。 给导航栏的“课程介绍”二字绘制热点。 然后在热点属性栏中设置超链接参数如下： 按F12预览，点击“课程介绍”来观察效果。 需要在图片创建超链接的都可以按照上述方法先创建热点。 添加文本超链接 在“主页.html”中，点击“消息１”，再按Delete键之后，输入文字“消息1”，设置其大小，字体和颜色。 拖动鼠标选中“消息１”三个字，设置超链接（消息１.html）。 按F12预览。 消息２…同样方法创建文本超链接。 在“主页.html”中，创建“课件下载”为热点链接。 打开“课件下载.html”，选中文字“第１章　Photoshop 基础知识”，创建文本超链接，链接到素材文件夹的“第一章.ppt”，按F12预览效果。 创建锚链接 将Photoshop图片上的Ｍore按钮作一个热点链接，链接到“photoshop.html”页面上。 打开“photoshop.html”页面，将素材文件夹中的“photoshop百度百科.txt”里面的内容，插入到“photoshop.html”页面，格式可参考“效果”文件夹中的“photoshop.html”。 将光标放在“基本概述”的后面，然后将插入栏切换到“常用”插入栏，单击“命名锚记”按钮，找开对话框，命名为anchor1，确定之后锚记即出现在定位点，如下图所示。 再选中作为链接的文本“基本概述”四个字，在属性栏中的“链接”框中输入#anchor1,打开方式选择“_self”,如下图所示。 按F12预览效果。 制作“photoshop的发明”与“功能特色”的方法与之相同。 利用层制作伸展效果显示菜单 1. 创建“友情链接”为热点超