《Web前端开发》实验教学指导/实验三：创建更多内容的网站
1 《Web前端开发》实验教学指导： 实验三：创建更多内容网站
一、实验目的（5分）
1、理解网站与网页之间的关系；
2、掌握超链接、图像、表格标记在页面中的应用；
3、掌握网站发布的方法。

二、实验环境（5分）
1、Windows10操作系统的计算机；
2、局域网网络环境，并且使用固定IP地址。

三、实验要求（5分）
1、进一步熟悉表格布局编写网页的方法；
2、通过网页的编写，掌握超链接、图像标记的使用；
3、将站点通过FTP发布，并通过浏览器进行访问和基本测试。

四、实验原理（5分）
1、通过FTP进行站点发布的基本方法和网站更新维护的基本方法。

五、实验步骤（40分）
1、编写网站栏目页：中心概况 图3-1中心概况效果图
（1）编写“中心概况”页面，文件名为：center.html。
效果如图3-1所示。

（2）打开AdobeDreamweaverCS6，新建HTML网页，将其命名为center.html，使用表格布局进行网页的编写。

（3）导航栏中的“首页”链接到Index.html，“中心概况”链接到center.html。
河南中医药大学管理科学与工程学科本讲共计4页|当前第1页 《Web前端开发》实验教学指导/实验三：创建更多内容的网站
2
（4）打开首页，将首页导航栏中的“中心概况”链接到center.html。

（5）依据上述步骤完成网站栏目页的开发。

2、编写网站内容页：团体咨询室守则
（1）根据提供的素材，开发“团体咨询室守则”页面，文件名为：zixun.html，页面效果如图3-2所示。

（2）将该网页链接到二级栏目网页图中
2。
-2网站首页效果图注意：网页文件名应具有一定意义，以免网页过多时不容易区分网页。

3、使用AdobeDreamweaverCS6发布站点
（1）点击“站点→管理站点”，弹出对话框，如图3-
3。
图3-3管理站点 河南中医药大学管理科学与工程学科本讲共计4页|当前第2页 《Web前端开发》实验教学指导/实验三：创建更多内容的网站
3
（2）在“管理站点”对话框中双击需要管理的站点，如选择“我的第一个网站”，弹出对话框，然后选择“服务器”，如图3-
4。
图3-4站点设置对象
（3）点击图3-4中的“+”添加新服务器按钮，弹出对话框，然后填写相应的信息，如服务器名称、连接方法、FTP地址、用户名、密码等，如图3-
5。
图3-6文件面板图3-5服务器配置信息
（4）配置完成后，单击图3-5中“测试”按钮，对是否连接到远程服务器进行测试，提示“Dreamweaver已成功连接到您的Web服务器”，表示连接已建立，点击“保存”按钮。

（5）找到“文件”面板，如图3-
6，在站点文件夹上右击，在快捷菜单上选择“上传”， 河南中医药大学管理科学与工程学科本讲共计4页|当前第3页 《Web前端开发》实验教学指导/实验三：创建更多内容的网站
4 即可完成网站发布。

4、使用FTP客户端FileZillaClient进行网站发布
（1）获取FTP客户端软件安装包访问课程网站获取FileZillaClient。
地址：访问FileZilla官网获取FileZillaClient地址：/
（2）安装双击setup.ext开始安装，按照提示完成软件安装。
请完成以下任务：任务一：完成心里咨询栏目页的开发，不少于2个页面；（15分）任务二：完成心里咨询内容页的开发；（5分）任务三：描述FTP的工作原理；（10分）任务四：描述使用FTP服务的优势有哪些？（10分） 要求：请将上述任务填写到实验报告册中。

六、自主实验步骤
1、请根据自己的实际情况，制作个人网站。

（1）个人网站包含“个人介绍”“兴趣爱好”等基本栏目。

（2）个人网站应该自行进行设计，不得低于4个页面。
请完成以下任务：任务一：完成栏目页的开发，不少于2个网页；任务二：完成内容页的开发；任务三：绘制网站页面结构。
要求：请将网站的代码填写到实验报告册中；请将个人网站的页面结构图填写 到实验报告册中。

七、思考及问答
1、如何架设一台Web服务器？
（1）如何在WindowsServer上通过IIS架设Web服务器？（5分）
（2）如何在WindowsServer上通过Apache架设Web服务器？（5分）
2、如何架设Web服务器的网站管理服务？
（1）如何在WindowsServer上通过IIS架设FTP服务器？（5分）
（2）如何在WindowsServer上通过FilezillaServer架设FTP服务器？（5分） 河南中医药大学管理科学与工程学科本讲共计4页|当前第4页