第四部分网页制作上机实验

1、.,第四部分 网页制作上机实验,第四部分是网页制作上机实验，包括3个实验。实验十一介绍了服务器架构与测试。实验十二介绍了网站的设计与开发。实验十三介绍了网站的测试和发布。,.,实验十一 服务器架构与测试 实验十二 网站的设计与开发 实验十三 网站的测试与发布,.,实验十一 服务器架构与测试,实验目的 预备知识 实验内容及步骤,.,【实验目的】,1本实验主要内容是在使用Windows 2000 Server操作系统的服务器上架构一个Web服务器，主要练习IIS的添加、设置和维护，让自己设计的网页能被其他机器访问。 2本实验完成以后建立的Web服务器应该能被其他局域网或Internet上的机器访问

2、，实验者完成实验后应该能独立组建一个功能简单的Web服务器。,.,学习Windows 2000 server以及Windows 2000组件的安装；学习和了解Windows的Internet信息服务的功能及基本知识；了解IP地址的基本概念；了解目录安全性中的匿名访问和验证访问的概念；了解FTP的基本概念。,【预备知识】,.,1添加IIS服务 打开“控制面板”，依次选择“添加/删除程序”“添加/删除Windows组件”命令，出现如图11.1所示的界面。 在“Internet信息服务”前打上勾，选中后按提示操作即可 完成IIS组件的添加。用这种方法添加的IIS组件中将 包括Web、FTP、NNTP

3、和SMTP 4项服务，然后单击“下一步”按钮，安装直至完成。完成后双击“控制面板”中的“管理工具”，可以发现多了一个“Internet服务管理器”项。这就说明IIS安装成功。,【实验内容及步骤】,.,图11.1 添加IIS服务,.,2IIS的运行 当IIS添加成功之后，单击“控制面版”“管理工具”“Internet服务管理器”图标，打开IIS管理器，如图11.2所示。对于有“已停止”字样的服务，在其上单击右键，选择“启动”来开启。在图11.2中有3个服务选项，第1个服务“默认FTP站点”是定义文件上传、下载的FTP站点的；第2个服务“默认Web站点”是用来设置Web站点的；第3个服务“默认SM

4、TP虚拟服务器”是用来作为邮件发送服务器的，在这里不用邮件服务器，所以把该项服务停止掉了。只要该选项后面没有“已停止”字样的，则意味着该服务已经运行了。,.,图11.2 Internet服务管理器,.,3服务器设置 （1）设置FTP服务器。FTP服务器的作用是用来上传和下载文件，一般来说Web服务器可以同时作为多个网站的宿主，而且一般Web站点都需要经常修改。所以这些文件的更改一般通过FTP服务器来传递。 在图11.2所示的“默认FTP站点”上单击右键，然后在弹出的快捷菜单中选择“属性”命令，出现如图11.3所示的对话框，其中说明如下： IP地址绑定。单击图11.3的“IP地址”右边的下拉列表

5、框，出现本机IP地址列表，如图11.4所示，（一般电脑只有一个IP地址，这里在本机网卡上添加了多个IP地址，所以出现多个IP地址）选择作为本机FTP的服务器地址。 填写FTP消息。选择FTP站点属性的消息选项，如图11.5所示。,.,图11.3 设置FTP服务器,FTP服务器名字,服务器IP地址绑定,同时连接最多机器数量,.,图11.4 FTP的服务器地址设置,.,图11.5 FTP站点消息选项属性设置,., 设置FTP主目录。主目录是FTP文件上传和下载的服务器中文件夹所在的位置。这里用来上传Web站点的网页内容，所以把它设置成服务器中Web站点所在的位置。 选择属性窗

6、口的“主目录”选项，出现如图11.6所示的对话框。在该选项卡中一般需要设置本地路径和用户权限，一般用来作为Web站点的FTP服务器需要设置成写入权限。,.,图11.6 FTP服务器中文件夹位置设置,单击“浏览”按钮，选择文件夹,权限设置,., 设置FTP目录的安全帐号。一般用作Web站点管理的FTP不能使用匿名访问，所以需要设置专门的用户名和密码。 选择“安全帐号”选项，出现如图11.7所示的对话框。,.,图11.7 FTP服务器的安全帐号设置,单击“浏览”按钮，出现如图11.8所示的对话框,.,图11.8 FTP服务器用户设置,在图11.8中选择一个让某个用户操作的用户名，单击“确定”按钮就

7、可以了。至此，可以在IE浏览器中键入“”来测试FTP服务器是否建立成功，可以在任何能连接到该服务器的机器上和操作本地硬盘一样操作该文件夹。登录效果如图11.9所示。,.,图11.9 登录FTP界面,欢迎消息,服务器文件夹内容,.,（2）设置Web服务器。比如本机的IP地址为，自己的网页放在D:Wy目录下，网页的首页文件名为index.htm，现在想根据这些建立好自己的Web服务器。 对于此Web站点，用现有的“默认Web站点”来做相应的修改后，就可以轻松实现。先在“默认Web站点”上单击右键，选择“属性”命令，弹出“默认Web站点属性”对话

8、框，如图11.10所示。,.,图11.10 默认Web站点属性对话框,., 修改绑定的IP地址。选择“Web站点”选项，在“IP地址”的下拉列表中选择所需用到的本机IP地址“”（与FTP的域名绑定相似，此处略）。 修改主目录。选择“主目录”选项，在“本地路径”栏输入（或单击“浏览”按钮选择）好自己网页所在的“d:webjsj”目录（主目录设置与FTP的主目录设置相似），如图11.11所示。如果在网站中用到了ASP等动态网页的技术，还要创建应用程序，方法是单击“创建”按钮，然后在“应用程序保护”中选择“中（共用的）”。创建应用程序后，在网站中就可以使用一些BBS论坛了。,.

9、,图11.11 默认Web站点主目录属性设置,创建应用程序,选择中（共用的）,此项一般不能选,., 添加首页文件名。选择“文档”选项，再单击“添加”按钮，根据提示在“默认文档名”栏中输入自己网页的首页文件名“Index.htm”或其他名称。当Web访问者访问Web站点时，系统会自动从上到下依次寻找图11.12所示的文件，如果找到某个文件则把该文件当作Web站点的首页来处理。也可以选择某个文件名，然后把它删除，如图11.12所示。,.,图11.12 默认Web站点文档选项,., 添加虚拟目录。比如，主目录在“D:Wy”下，只要输入“/test”的格式就可调出“E:All”中

10、的网页文件，这里面的“test”就是虚拟目录。操作方法是在“默认Web站点”上单击右键，选择“新建”“虚拟目录”，依次在“别名”栏中输入“test”，在“目录”栏中输入“E:All”后，再按提示操作即可添加成功。 效果的测试。打开IE浏览器，在地址栏输入“”之后再按回车键，此时就能够调出你自己网页的首页，则说明设置成功。,.,实验十二 网站的设计与开发,实验目的 预备知识 实验内容及步骤,.,【实验目的 】,1掌握使用Frontpage制作Web页面的基本方法，掌握在设计页面时图片、文字、书签及背景音乐等基本对象的插入以及超级链接的创建技巧。 2通过设计学校一个部门网站的

11、过程掌握网站设计与开发的全过程。,.,了解如何新建一个站点和主页并保存它们；了解各种视图，包括“网页”、“文件夹”、“超链接”等视图及其应用；了解文本、图片及背景音乐等对象的插入；了解各种链接的创建方法。,【预备知识】,.,1网站规划 （1）总体设计。网站设计首先要确定开发网站的目的和定位。确定开发网站是为了商业目的还是非盈利性目的以及确定网站的用户群（登录网站的对象）和网站的主要功能，确定网站的发展规模和发展前景。 在本实验中以规划设计某学校计算机部门网站为例。首先，确定该网站的性质是非盈利性部门门户网站，网站主要面向校内师生；同时根据校内学生人数确定同时浏览网页人数一般在5001000人之

12、间，所以网站属于一个中小型网站。 （2）功能划分。根据以上分析服务器采用了Windows 2000 Server操作系统，并且简单划分功能如图12.1所示。,【实验内容及步骤】,.,图12.1 网站结构图,.,（3）确定风格和总体布局。总体决定采用蓝色基调；首页划分成3大块、5小块，其中页面顶端是部门LOGO，LOGO下是页面导航栏，中间部分是主要新闻版块和学生优秀作业展台，最下面是其他网站的链接，如图12.2所示。,.,图12.2 网站主页效果图,.,（4）图片内容收集。在IE的地址栏中输入，打开google网站，在搜索栏中输入“图片素材”或“网页素材”，寻找各类所需材料并下载到本地硬盘中。

13、比如在中华网的“主页工场”里就有很多素材，如图12.3所示就是中华网的“主页工场”的页面，大家可以在这里下载很多所需的图片。,.,图12.3 网页素材页面,.,（5）图片、动画处理和制作。一般图片和动画在大小、色彩等方面都不符合自己需要，所以一般对图片和动画都需要进行处理。大家试用Photoshop或Windows自带的画图工具制作一个网站logo图片；再到网上搜索一个能放在顶端的大小适中的gif动画，有基础的同学试用flash等动画制作工具制作一个简单的动画。 （6）具体文本内容收集。把设计网站用到的所有内容都要输入到电脑中，并按照网站的不同功能模块分类保存起来。 （7）链接地址收集。收集常

14、用的网址并保存到记事本中。 （8）页面链接确定。计划设计首页链接如图12.4所示。,.,图12.4 页面链接关系图,.,2网站具体实现 （1）新建站点和网页。单击任务栏“开始”按钮，选择“程序”命令，选择“Microsoft Frontpage”命令，启动Microsoft Frontpage应用程序。然后选择文件菜单中的“新建”“站点”，单击“只有一个网页的网站”图标，如图12.5所示。,.,图12.5 新建站点,.,图12.6 布局工具栏,（2）绘制总体布局。打开工具栏中的表格工具栏，如图12.6所示。分别用布局工具和布局单元格工具绘制如图12.7所示的总体布局。,.,图12.7 总体布局

15、图,.,（3）文本内容和背景图片的添加和编排。图片导入：在文件夹视图下，选中image文件夹，再选择“文件”菜单中的“导入”命令，在导入对话框中单击“添加文件”按钮，把收集到的图片导入到“image”文件夹中，如图12.8和图12.9所示。 导入图片后就可以插入图片和编排图片了。选择“插入”菜单中的“图片”“来自文件”命令，然后选择要插入的图片，单击确定就插入了图片。如图12.10和图12.11所示。插入图片后在图片上单击右键，选择图片属性就可以设置图片格式了。在图片对话框中可以更改图片的大小、给图片加边框等等操作，如图12.12所示,.,图12.8 导入文件对话框,.,图12.9 选择要导入

16、的文件,.,图12.10 插入图片,.,图12.11 选择图片,.,图12.12 图片格式编排,.,一般插入的图形总是和文本在一起的，所以调整图形和文本的对齐方式很重要。在默认情况下，图形自动与文本的底部对齐，如图12.13所示，这个网页，由于默认的对齐效果，页面出现了大量的空白。,.,图12.13 图文没有对齐调整前,.,图12.14 图片属性,这时就要调整图形的对齐属性。在图形上单击鼠标右键，选择“图片属性”，如图12.14所示，选择“外观”选项卡，如图12.15所示。,.,图12.15 外观选项卡,.,图12.16 图片对齐方式设置为左对齐后的效果,把对齐方式调整为“左对齐”，效果如图1

17、2.16所示。 使用图形可以使网页更加丰富多彩，而且还可以用图形来建立超链接，使网页相互联系起来呢。,.,（4）设置链接。在网页里，把这种点击后会进行页面切换的网页界面元素叫超链接。 先来看一下用文字来建立链接。首先创建一个指向站点内其他网页的超链接。选择“插入”菜单的“超链接”命令，如图12.17所示。 在文件列表框内选择“页面1.htm”文件，注意在URL文本框中显示了该文件的地址。,.,图12.17 超链接,插入超链接界面 选择链接到的页面,.,单击“确定”按钮，超链接就设置成功了。 切换到预览模式（单击“预览”按钮 ），当把鼠标指向“主页”两字时鼠标变成手形，单击它，就切换到主页了。

18、在普通模式下，把鼠标指向“主页”两字时鼠标没有变成手形，因此不能进行页面切换。不过如果按住Ctrl键，鼠标就变成了手形。这时单击就可以进行切换了。也就是说在普通模式中按住Ctrl键才能激活超链接。也可以将超链接指向其他站点的网页。选中作为超链接的文本，单击“常用”工具栏的“超链接”按钮 ，这和选择插入菜单的超链接命令是一样的，如图12.18所示。,.,图12.18 普通模式下创建超链接,.,在“创建超链接”对话框的URL地址栏直接输入要连接的网页或网站的地址。如果不清楚要作超链接的地址，只要单击URL地址框后面的放大镜 就可以用浏览器在Internet上查找要链接的网页，Frontpage会自

19、动记录找到的地址。 还可以改变已经设置好的超链接。切换到普通模式，在要改变的超链接下单击鼠标右键，选择“超链接属性”命令，输入新的URL地址就可以了，如图12.19所示。,.,图12.19 更改超链接属性,.,要想取消超链接，删除所有URL地址框里的内容就可以了。 还有一种超链接，可以链接电子邮件。首先选中要作为超链接的文本，一般文本就是你的邮箱地址，单击“超链接”按钮，单击“信封”按钮 ，输入你的邮箱地址，如图12.20所示。,.,图12.20 创建电子邮件超链接,.,单击“确定”按钮，退出对话框，这时超链接就建立好了。我们试一下，切换到预览模式，单击邮件链接，如图12.21所示。,.,图1

20、2.21 通过电子邮件超链接激活Outlook,.,以上讲的都是用文本建立超链接，怎么用图形来建立链接呢？其实图形超链接和文字超链接的制作方法是一样的，只要在建立超链接时选择图形就可以了。 选中超链接的图形，单击箭头图形，单击“常用”工具栏中的“超链接”按钮，选择主页文件“页面1.htm”，单击“确定”按钮。如果在普通模式中，按住Ctrl键，单击箭头图形，如图12.22所示，就跳到主页页面了。,.,图12.22 创建图片的超链接,.,（5）使用表格。 创建表格。在Frontpage的诸多功能中，制表功能也是一个很重要的方面。不仅利用表格显示一些有规律的数据，而且还经常对表格中的单元格进行调整，

21、在其中放入文本和图形，达到对网页进行布局的目的。 我们来看看这个网页，如图12.23所示，这是在普通模式里的效果。文本被分成左右两栏了。文本周围有虚线包围。这些虚线实际上就是表格的框线，利用表格把网页分为了左右两栏。切换到预览模式，框线没有了，如图12.24所示。 在普通模式看到的虚线可以便于编辑。由于表格框线的宽度是0，所以它在普通模式里显示的是虚线，而在浏览器里它就不显示出来。也就是说用一个看不见的表格把文字分开。,.,图12.23 表格的普通模式里的效果,.,图12.24 表格的浏览效果,.,怎样创建表格呢？ 首先把插入点调整到要插入表格的位置，单击“常用”工具栏“插入表格”按钮 ，拖动

22、鼠标，直到高亮的单元格的行列数与要插入的表格相同为止。这里插入3乘4的表格，也就是3行4列的表格，如图12.25所示。,.,图12.25 3行4列的表格,.,实际上这种方法创建单元格只能将各单元格行高和列宽设置为一样的，如果要在创建表格时对表格进行设置，可以使用插入表格命令。设置好插入点后，选择“表格”菜单的“插入”“表格”命令，将行数设置为3，列数设置为4，将边框粗细设置为5，将单元格间距设为3，确认指定宽度复选框选中，并选择单位为百分比，设置百分比为80，使表格宽度为浏览器宽度的80%，单击“确定”按钮，如图12.26和图12.27所示。,.,图12.26 插入表格,图12.27 调整后的

23、表格,.,图12.28 “表格”工具栏,新建的表格边框变粗了。这是因为设置了边框的粗细为3，另外单元格之间的分割线也变宽了，这是因为设置了单元格间距的结果。上次的设置也自动变为了下一次创建表格的默认设置。 还有一种创建表格的方法，可以直接把表格画出来。选择“查看”菜单的“工具栏”命令，选择其中的“表格”选项，这时就会显示“表格”工具栏，如图12.28所示。,.,图12.29 表格的编辑,单击“手绘表格”按钮 ，用拖动鼠标的方法画一个表格。双击鼠标退出画表格状态。 如果画错了就单击“擦除”按钮 ，在要擦除的线条上拖动，这时线条会变红，放开鼠标，线条就被擦除了，如图12.29所示。 表格工具栏的其

24、他按钮都与表格菜单的各条命令相对应，它们的使用方法也是一样的。,., 单元格的控制。创建好表格后，就可以在表格里输入文本了。 一般情况下，直接输入就可以了。当达到单元格末尾时文字会自动换行。可是在没有达到末尾时就要换行的话，不是按回车键就可以了，因为这样做就把文本分成了两个段落，文本的行距就会变大。使用回车键的效果，如图12.30所示。按Shift+Enter键，这样文本就强制换行了。再输入换行文字，这时行距就正常了，如图12.31所示。,.,图12.30 在表格中输入文字,.,图12.31 在表格中文字的编辑,.,单元格里的文本与单元格的对齐方式有时也需要调整。可以用“格式”工具栏的左对齐、

25、居中对齐、右对齐进行设置。 在这里介绍一种专门的设置方式。首先单击要调整格式的单元格，单击鼠标右键，选择“单元格属性”命令，弹出单元格属性对话框，如图12.32所示，在这里不仅可以设置水平对齐方式还可以设置垂直对齐方式。,.,图12.32 表格中文本的对齐方式,.,这里把水平对齐方式调整为“水平居中”对齐。单击“确定”按钮，文本就水平居中对齐了。 还可以把水平和垂直对齐方式组合使用，这样可以任意的调整对齐方式了，也可以同时选中多个单元格，一起设置对齐方式。 有时要对单元格进行某种操作，比如要删除几个单元格，首先就要把这些单元格先选中。下面介绍选中单元格的方法。 单击要选中的单元格，插入点就在单

26、元格中了， 选择“表格”菜单的“选定”子菜单，单击“单元格”命令，单元格就被选中了。选中了一个单元格后，按住Ctrl键，单击其他单元格，这些单元格就被选中了，如图12.33所示。用这种方法可以选中不连续的单元格。从一个单元连续拖动鼠标可以选中连续的单元格。,.,图12.33 选中单元格,.,图12.34 合并单元格命令,选定单元格后就可以对单元格做操作了。如把几个连续单元格合成一个单元格。先把单元格一、单元格二选中，执行“表格”菜单的“合并单元格”命令，如图12.34所示，两个单元格就合并成为一个单元格了。,.,图12.35 拆分单元格,也可以把一个单元格分成几个单元格。把插入点放到要拆分的单

27、元格里，选择“表格”菜单的“拆分单元格”命令，在“拆分单元格”对话框里可以设置是拆分成行还是列，这里选择列，并将列数设置为2，单击“确定”按钮，这样一个单元格就被拆分为两个单元格了，如图12.35所示。,.,在“单元格属性”对话框里还有一些其他设置。 先来看一下设置背景色。选中两个单元格，单击鼠标右键，选择“单元格属性”命令，将背景色改为绿色，如图12.36所示。,.,图12.36 设置单元格的背景色,.,图12.37 设置单元格的边框颜色,单元格边框的颜色也也可以在“单元格属性”对话框里设置，如图12.37所示。可以使用这些选项来调整单元格边框的颜色。也可以为单元格加一个背景，如图12.38

28、所示。,图12.38 设置单个单元格的背景,.,图12.39 设置单元格的宽度和高度,单元格的宽度和高度也可以指定，如图12.39所示。,.,图12.40 设置单元格的文本换行设置,选中不换行选项则文本在单元格内不会换行，如果文本太长单元格的宽度会自动改变，如图12.40所示。,.,用看不见的表格用来排版。激活可见的表格，单击鼠标右键，选择“表格属性”，将边框粗细设为0，如图12.41所示，单击“确定”按钮，切换到预览模式，表格不见了，如图12.42所示。因为边框的粗细刚才设为0了。,.,图12.41 设置单元格的边框粗细,图12.42 看不见的单元格显示效果,.,图12.43 表格属性对话框

29、,.,作出立体效果也很简单。在表格上单击鼠标右键，仍然选择“表格属性”命令，将边框粗细设为5，将亮边框颜色和暗边框颜色分别设为银灰色和灰度，单击“确定”按钮，如图12.44所示。表格的边框变粗，立体感也加强了，如图12.45所示。,.,图12.44 设置表格的立体效果,.,图12.45 表格立体效果图,文本转化为表格：,.,（6）插入交互式悬停按钮。在“插入”菜单中选择“交互式按钮”，此时会出现如图12.46所示的对话框，在该对话框中可以更改字体、背景、式样等操作，请大家自己练习。 （7）设置背景音乐。一般对于网页还可以设置网页的背景音乐，在网页的任何地方单击右键，在弹出的快捷菜单中选择“网页

30、属性”选项，弹出如图12.47所示的对话框。单击浏览选择背景音乐就可以完成背景音乐的设置。,.,图12.46 插入交互式悬停按钮,.,图12.47 网页属性对话框,.,实验十三 网站的测试与发布,实验目的 预备知识 实验内容及步骤,.,【实验目的】,1掌握对网站进行测试，寻找并修改网站错误，学会网站的发布。 2学会申请站点空间和域名，掌握一个站点发布或文件上传的方法。,.,【预备知识】,了解站点空间基本知识和网站的性能评价基础方法；了解域名基础知识以及域名和空间之间的关系；了解FTP的基本概念和文件上传、下载的基本概念。,.,【实验内容及步骤】,1网站本地、局域网测试 网站发布前要进行细致周密的测试，以保证用户能正常浏览和使用。主要测试内容包括网站稳定性、安全性测试；程序及数据库测试；网页兼容性测试，如浏览器、显示器及根据需要的其他测试。 测试过程可分为以下三个步骤： （1）在本机上测试网页在单机上的运行是否稳定，测试网站的链接是否正确无误。经过第一步测试后应该能排除网站在页面内容和链接上的错误。测试方法是在实验十二的基础上设置网站的主目录为本地硬盘目录，然后打开IE浏览器，在地址栏输入“192