试验项目四Dreamweaver站点管理和建立简单的网站.docVIP

实验项目一? ? 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软件