实验五网页制作(1)

实验五网页制作

在这次实验中，我们将要学习如何使用网页制作工具软件Dreamweaver 8来制作网页，建立网站，发布网站；掌握网站开发的基本流程。培养同学们的网页设计与制作综合应用能力。为确保实验的顺利进行，本次试验要求在微机上安装下列软件：网页制作工具软件Dreamweaver 8，网页浏览软件Internet Explorer 6.0，WEB服务器IIS。

本次实验的总体任务是——建立个人网站。根据实际的需求，本次任务的网站总体设计如下图所示：

其中网站由六个网页构成，网站首页文件名为index.htm，子页面分别是：学习生活：study.html，勤工俭学：work.html，多彩世界world.html，关于考研：blog.html和青春足迹：travel.html。本实验任务共分三次实验完成。第一次实验制作网页study.html和work.html。通过制作这两个网页，我们可以学习掌握在DreamWeaver 8中制作网页的基本流程，如何向网页中添加网页元素以及如何建立和发布网站。第二次实验制作网页index.htm和world.html，并为网页添加各种超级链接。在这次实验中，我们将要学习如何用表格和层布局网页，让网页元素布局得更整洁有序。同时，我们还将学习如何在网页中添加动态效果。第三次实验由同学们自己设计完成网页blog.htm和travel.html。通过这次实验，可以锻炼同学们独立开发网页的动手能力和设计网页的综合能力。

实验五网页制作（1）创建并管理网站

一、实验目的

1、掌握Dreamweaver 8的启动方法，熟悉DREAMWEA VER 8的界面。

2、掌握网页文件的基本操作（新建、打开、保存等）。

3、了解网页编辑的3种工作环境。

4、了解网站创建的过程及相关方法。

5、掌握如何制作简单网页及常用网页元素的添加方法。

6、了解如何发布，运行网站。

二、实验任务

1、使用Dreamweaver 8建立网站“心灵家园”。

2、制作网页work.html，样张如下：

（1）对work.html设置背景图：back1.jpg,不重复显示，文本颜色：“#990000”，网页标题：“心灵家园——打工”。

（2）将“大学生打工如何防伤害防上当”设置为标题1格式，居中显示，字体设为华文新魏，字体颜色设为蓝色，并在标题后添加横线。

（3）插入图片work4.jpg，设置为右对齐，宽300px，高200px。（说明：px——像素）

（4）为正文的每一段设置首行缩进。

（5）在正文的后面插入图片shouye.jpg，居中显示，在该图片后面添加一个横线。

（6）在横线下面添加文字“建议使用IE5.0以上版本，1024*768以上的分辨率浏览本站，版权归个人所有”，并按样张设为两行，并居中显示。

（7）将“勤工俭学路上陷阱重重”，整治勤工俭学环境亟待多方入手”设置为项目列表，加粗显示。

（8）添加背景音乐1001.MID。

网页设计中用到的元素：背景图，背景音乐，网页标题，字体大小，颜色等设置，图片，横线，项目列表。

3、制作网页study.html，样张如下：

（1）添加标题“2010年上半年学习内容”和横线

（2）插入一个8行3列的表格，宽度为600 px，边框粗细为8，单元格边距为5，单元格间距为6，表格在网页中居中显示，

（3）设置表格的背景图为BACK3.JPG。

（4）将表格的第一行和第五行分别合并为一行。表格的所有单元格的背景色设为#CCCCCC，边框颜色为：#000066。

（5）按照样张录入文字，并将表中的第一、五行的字体加粗，表中的文字水平居中，垂直居中显示。大小为16号字。

（6）网页的背景图设为back2.jpg,重复显示，在添加图片”shouye.jpg”和“建议使用IE5.0以上版本，1024*768以上的分辨率浏览本站，版权归个人所有”，和WORK.HTML一样设置它们的格式。

网页设计中用到的元素：表格，背景图，字体大小，颜色等设置，图片，横线。

4、发布并在IIS中运行网站。

三、实验步骤

网页设计三剑客之一的Dreamweaver 8可以让我们基本摆脱掌握HTML语言的困绕，轻松实现设计制作网页的愿望。我们开发一个简单的小型网站，一般按照下面的步骤进行：

1、规划网站。

一般先要规划好网站的主题，风格，访问量，页面布局，页面之间的链接关系等方面。

2、建立网站对应的文件夹。

一个网站，实际上就对应着一个包含了各种图片，声音，网页等资源的文件夹。所以要建立存放网站资源的文件夹，并在此文件夹下创建多个子文件夹来分门别类的存放资源，如本次实验中我们创建的文件夹：music，video，web，image等等。

3、在Dreamweaver中创建站点。

4、制做各个网页。

5、创建远端根文件夹，在Dreamweaver中发布网站到远端根文件夹。

6、启动IIS，运行网站就可以浏览网页了。

本次实验任务具体操作如下：

步骤一、启动Dreamweaver 8，熟悉窗口界面及基本操作。

1.启动Dreamweaver 8

（1）点击“开始－所有程序－Macromedia－Macromedia Dreamweaver 8，即可启动Dreamweaver。

（2）第一次运行会出来一个选择面板，选默认的“设计”，点“确定”即可；

（3）接下来开始载入Dreamweaver，直到出现一个完整的窗口。这个页面称作“起始页”，中间是新建项目，我们一般选第一个Html普通网页来新建一个空白文档。

2.Dreamweaver 8的窗口界面

启动Dreamweaver 8后的窗口界面如下图所示：

Dreamweaver 8中的菜单与Word非常相似，具体菜单项在后面的操作中再一一介绍，此处不再赘述。

步骤二、创建网站（我的站点）并掌握文件的基本操作。

1．创建新站点

（1）创建网站的目录结构。

1）在硬盘D根目录下新建文件夹，命名为mysite；

2）在mysite文件夹下依次建立子文件夹，分别命名为file, image, music, photo, web, video。

3）将所有图片，音乐等素材分类复制到相应的文件夹中；

（2）在Dreamweaver中创建站点，