dreamweaver实验指导.docVIP

网页设计与制作 实验指导书 实验? ? Dreamweaver 站点管理和建立简单的网站 【 实验目的 】 使学生掌握 Dreamweaver 的基本使用方法，并利用 Dreamweaver 工具制作一个比较完整的网页。 【 】【 实验内容 】 【 实验 】 属性控制面板热区设置工具 选中图中绘制工具：矩形热区绘制工具圆形热区绘制工具多边形热区绘制工具，其中一种，就可以在图片上绘制热区了。当绘制完热区后，属性控制面板中显示出热区的属性，在link栏内输入网址或网页文件名，或点击link栏右侧的文件夹按钮，在打开的对话框中选择一个网页文件作为链接地址。 三、插入翻转图像 准备好两幅大小相同的图片文件。并将其保存在网页文件所在的文件夹之下。单击“插入”面板中的“鼠标经过图像”按钮→弹出如图所示对话框。 “插入鼠标经过图像”对话框 在对话框中单击“原始图像”右边的“浏览”按钮→选择打开网页时的原始图片文件→单击“鼠标经过图像”右边的“浏览”按钮→选择打开网页时的鼠标经过图片文件→在“替换文本”中输入“鼠标经过图片”→在“按下前往…”中输入超链接的网页文件→单击“确定”。保存文件并按F12预览效果。 四、插入导航栏翻转图像 　　1．打开Fireworks,新建文件，并设置画布大小为120*50象素→选定文字工具→并输入文字(如“指导思想”)→设置文字大小与颜色→保存文件名为01－1.png。 　　2．在第一步的基础上改变文字颜色，另存为01－2.png。 　　3．重复步骤第1步、第2步，修改输入的文字，分别制作大小相同的图片文件02－1.png~05-2.png共10张大小相同的图片。 　　4．打开Dreamweaver→新建一个网页文件，并保存文件名为3.htm. 5.单击“插入”面板中的“导航条”按钮→弹出如图1－25所示的对话框→在“项目名称”中输入导航按钮的名称→在“状态图像”中选择一个准备好的图片→在“鼠标经过图像”中选择其中一个图片→在“按下前往…”选择一个超链接的网页文件。 　　6．单击对话框中的“＋”号→重复第5步操作，添加多个导航条按钮→在“插入”中选择“垂直”→单击“确定”。 “插入导航条”对话框 五、制作网站相册 1．在Dreamweaver中新建一个文档，单击“命令”菜单，选择“创建网站相册”命令。打开“创建网站相册”对话框。如图1-27所示。在“相册标题”文本框中输入标题；在“源图像文件夹”文本框中单击右边的“浏览”按钮选择保存原始图片文件的文件夹；在“目标文件夹”文本框中单击右边的“浏览”按钮选择保存存放相册的目标文件夹；在“缩略图大小”框内选择相册中小图像的尺寸；在“相册格式”框内设置原始图像的显示格式；在“小数位数”文本框内设置图像的显示比例；选中“为每张相片建立导览页面”复选框。 “创建网站相册”对话框 2．单击“确定”按钮后，系统将自动启动Fireworks软件，开始执行创建网站相册的过程。 3．创建网站相册完成后，系统会弹出如图所示的提示框，单击“确定”按钮。 提示对话框 4．此时在站点窗口中，Dreamweaver自动在指定的文件夹下制作出网站相册网页文件和文件夹，在文档窗口中，自动创建出网站相册的文档。 实验 ? ? 表格、框架 【 实验目的 】 使学生掌握表格应用，框架的建立及实际应用。 【 】【 实验内容 】 【 实验 】 创建框架结构一般有两种方法：一是使用“新建文档”对话框中的“框架集”选项新建一个框架结构的页面文档；二是利用“插入栏”中的“框架”选项中提供了框架结构创建。 使用“新建文档”命令创建框架结构操作方法如下： ① 单击“文件”菜单，选择“新建”命令，弹出“新建文件”对话框。 ②在“新建文件”对话框中，选择“框架集”类别， 2、导航条的制作： （1）首先进行一些必要的前期工作，按CTRL+J，打开Page Properties（页面属性）窗口，参数设置如图所示，这一设置对菜单的位置将有影响，所以请如图设置。 “页面属性”对话框中的外观设置 （2）按CTRL+F2打开Objects面板，在布局栏中点击层按钮后在页面中按住鼠标不放拖出一个层，然后在层的属性面板中设置各参数，“层编号”框填入title，左、上、宽、高框分别填入8、15、500、15，背景色填入#3366CC，如图2-36所示。 图2-36　设置后层title的“属性检查器” （3）将光标移至层内，点击Objects面板上布局栏中的表格按钮，插入一个一行四列的表格，设置如图2-37所示。 图2-37　设置后的“表格”对话框 （4）在前两个单元格中输入文字“经典论坛”和“天极网”，并调整这两个单元格的宽度，最终效果如图2-38所示。 图2-38　导航条设计效果 3、制作下拉选单 （1）现在开始