实验一 Dreamweaver 站点管理和建立简单的网站

实验一 Dreamweaver 站点管理和建立简单的网站

【 实验目的 】 使学生掌握 Dreamweaver 的基本使用方法，并利用 Dreamweaver 工具制作一个比较完整的网页。

【 实验器材 】安装有Windows 98/2000/xp；Dreamweaver MX，Flash MX，Fireworks MX；IE浏览器，NetScape浏览器，IIS5.0 等软件的计算机。

【 实验内容 】 利用Dreamweaver制作一个简单网站，要求满足以下条件：

Ø 至少有4个网页，网页之间用超链接相连；反映一中心主题；

Ø 网页中尽量图文并茂，即有文字，也配以一定的展示图片；

Ø 某网页中要包含图像映射超链接，链接目标是一副图像；

Ø 制作鼠标经过图像效果作为网站的导航系统；

Ø 制作图像翻转效果及网站相册效果；

【 实验步骤 】

一、在Dreamweaver中建立本地站点的操作步骤如下：

1、在Dreamweaver文档窗口中，依次单击“站点”菜单→“新建站点”命令或者是在“站点”面板中单击“站点”菜单→“新建站点”命令，打开“站点定义”对话框。如图所示。选择“高级”选项卡建立站点(也可以按“基本”选项卡中的向导进行操作，但不如用“高级”选项卡方便)。

“站点定义”对话框

2、管理本地站点

选择“站点”面板“文件”菜单中对应命令，即可对选取文件进行编辑操作。例如，选择文件后，在“站点”面板中选择“文件”菜单中的“打开”命令，则Dreamweaver在文档窗口中打开该文件(当然最简单的方法是在站点中双击相应的文件图标)。在对站点中的文件或文件夹进行操作时，合理地使用右键快捷菜单能大大加快操作速度。例如，在选中的文件夹上单击鼠标右键，然后选择“新建文件夹”命令，可以在相应文件夹中新建一个文件夹。

3、编辑站点具体操作步骤如下：

在站点面板中单击“站点名称”框右边的下拉列表按钮，在下拉列表中选择“编辑站点”命令，打开“编辑站点”对话框，如图所示。

“编辑站点”对话框

二、图像映射超链接

选中网页中插入的图片，打开属性控制面板，其面板的左下角区域即用于设置图片映像的区域。如图所示。

属性控制面板热区设置工具

选中图中绘制工具： 矩形热区绘制工具 圆形热区绘制工具 多边形热区绘制工具，其中一种，就可以在图片上绘制热区了。当绘制完热区后，属性控制面板中显示出热区的属性，在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自动在指定的文件夹下制作出网站相册网页文件和文件夹，在文档窗口中，自动创建出网站相册的文档。