静态网页制作上机实验指导 - 图文

- 1 -

实验一 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、编辑站点具体操作步骤如下：

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

“编辑站点”对话框

- 2 -

二、图像映射超链接

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

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

选中图中绘制工具：

矩形热区绘制工具

圆形热区绘制工具

多边形热区绘制工具，其中一

种，就可以在图片上绘制热区了。当绘制完热区后，属性控制面板中显示出热区的属性，在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步操作，添加多个导航条按钮→在“插入”中选择“垂直”→单击“确定”。

- 3 -

“插入导航条”对话框

五、制作网站相册

1．在Dreamweaver中新建一个文档，单击“命令”菜单，选择“创建网站相册”命令。打开“创建网站相册”对话框。如图1-27所示。在“相册标题”文本框中输入标题；在“源图像文件夹”文本框中单击右边的“浏览”按钮选择保存原始图片文件的文件夹；在“目标文件夹”文本框中单击右边的“浏览”按钮选择保存存放相册的目标文件夹；在“缩略图大小”框内选择相册中小图像的尺寸；在“相册格式”框内设置原始图像的显示格式；在“小数位数”文本框内设置图像的显示比例；选中“为每张相片建立导览页面”复选框。

“创建网站相册”对话框

2．单击“确定”按钮后，系统将自动启动Fireworks软件，开始执行创建网站相册的过程。 3．创建网站相册完成后，系统会弹出如图所示的提示框，单击“确定”按钮。

提示对话框

4．此时在站点窗口中，Dreamweaver自动在指定的文件夹下制作出网站相册网页文件和文件夹，在文档窗口中，自动创建出网站相册的文档。

- 4 -

实验二 使用HTML主要元素制作网页

一、

实验目的：

1. 熟悉Dreamweaver CS3设置网页页面的属性，即文件头中各项属性的值

2. 使用Dreamweaver CS3文本属性面板，设置设计窗口中的文本的显示格式和样式。 3. 使用Dreamweaver CS3插入图像，并能设置图像的属性。

二、 三、

实验内容：

使用Dreamweaver CS3插入主要HTML元素并设置属性

实验要求：

1． 了解Dreamweaver CS3的菜单、工具栏、面板组等界面，掌握定制适合自己的工作区的方法； 2． 熟练使用Dreamweaver CS3在网页中操作图片、列表、表格、表单和框架。

四、 五、 实验学时：2学时 实验步骤：

第1步：在硬盘上为本实验建立文件夹，文件夹名称为mySite。 第2步：启动Dreamweaver CS3，使用实验一的步骤和方法创建一个名为“我的个人网站”的站点。

第3步：在你的站点中创建如图2-1所示的站点文件结构。

图2-1

第4步：打开index.html,使用文件头设置菜单，如图2所示，设置该网页文件的文件头如下五个方面的信息。

? 设置该网页的文字编码方式为GB2312，

? ? ? ?

关键词（keywords）包含“网页设计，软件开发，电子商务”，

网页的介绍性文本是“***的个人主页，关于软件开发的一个网站” 设置网页每隔5秒钟刷新1次 设置网页的标题体“***”的个人主页

- 5 -

图3-17 设置Windows Media Player插件参数的窗口

在本实验任务中，你可以使用代码直接插入Windows Media Player插件，使其来播放WMV格式的视频文件。你只需要将以下代码拷贝到待插入视频的代码区中。