实验4 网页设计与网站开发实验

一、实验目的

了解静态网站的主要内容和结构； 学会修改网站的内容和链接； 了解架设网站的基本方法。

二、实验环境

硬件：微型计算机一台；

软件：Windows XP/7中文版操作系统；网站服务器软件(LiteServe)；网页编辑软件(FrontPage或Dreamweaver)；图像处理软件(PhotoShop或ACD FotoCanvas、Windows附件的“画图”工具、QQ截图工具等)。

三、主要实验步骤 (一)、架设网站服务器

1．准备网站资源文件。先在本机D盘建立文件夹“HTTPROOT”。将本实验资源“实验4”中的“网站模板”子文件夹里的压缩包“myweb.rar”解压到“D:\\HTTPROOT”，结果如下图所示：

2．运行网页服务器软件。将本实验资源“实验4”中的“相关软件”子文件夹里的压缩包LiteServe.RAR”解压到当前文件夹，进行到文件夹LiteServe中，运行主程序LiteServe.exe，主界面如下：

3. 启动网页服务。在上图的LiteServe运行界面中，点击“服务”标签，设置网站目录为“D:\\HTTPROOT\\myweb”，勾选“激活HTTP服务”（如已有勾先去掉再选上），设置端口为80。如下图所示：

4. 网站测试。在浏览器中输入网址“127.0.0.1”，结果如下图所示：

若能出现以上结果，说明网站已经正常运行。

(二)、网站编辑

主要目标：根据上述的网站模板，修改相应的文字和图片，改为介绍你的家乡的网站，如“魅力韶关”、“美丽的河源”等。图片和文字请从网上搜索下载。

网站编辑软件采用FrontPage 2003，在本实验资源“实验4”中的“相关软件”子文件夹提供。（有网页编辑基础的同学也可采用Dreamweaver来编辑网页，步骤将与下面不同。）

1. 安装步骤：(1) 将压缩包FrontPage2003(SP3).RAR解压到本地文件夹；(2) 进入到文件夹FrontPage2003(SP3)，找到安装程序

FrontPage2003(SP3).EXE，鼠标右击，选择“以管理员身份运行”，以便正确安装FrontPage 2003版。

2. 编辑网页：在Windows程序组里(开始所有程序MicroSoft

OfficeMicrosoft Office FrontPage 2003)找到程序快捷方式，运行后出现以下界面：

点击上图左上角红圈处的“打开”工具图标，细心点中旁边的很小的黑三角形，选择打开网站：

选择“D:\\HTTPROOT”下的网站文件夹“myweb”：

然后点击上图的“打开”按钮。如果是第一次打开该模板文件夹，将显示添加附加信息提示：

在上图中点击“是”按钮即可。

然后将会出现以下的网页编辑主界面：

双击上图左边栏的文件“index.html”，将出现网页编辑界面如下：

上面是静态网页的可视化编辑界面，对其中的文字可像Word中一样进行编辑并保存。 点击上图红圈中的“代码”标签则切换到网页代码页面：

点击上图红圈中的“设计”标签则返回前面一个图的界面。

编辑完网页文字后，尝试修改网页链接。通过百度搜索，了解网页“链接”的含义并尝试在FrontPage中编辑链接。

按以上的方法打开“index.html”以外的其他网页并进行修改，并确认链接功能正常。

四、网站相关软件说明

架设网站的软件中，LiteServe最简单，可作为实验使用。在正式运行的服务器中，常用的软件是IIS(Windows服务器版自带)、Serv-U、Apache(尤其是Linux环境)。可任选一款使用。

网页编辑软件中，常用FrontPage、Dreamweaver。但制作图像、声音、动画、视频等多媒体素材各有不同的软件。例如，编辑图像，可用PhotoShop(专业级，复杂)、ACD See/ACD FotoCanvas(半专业级，易用)，也可用Windows附件里“画图”、QQ截图等简易工具；制作Flash动画，一般用FireWorks。进行多媒体处理的软件非常广泛，但大多都易学易用，通过网络搜索自学是最简便的学习方法。