《Web前端开发》实验教学指导/实验二：创建第一个网站
1 《Web前端开发》实验教学指导： 实验二：创建第一个网站
一、实验目的（5分）
1、掌握使用开发工具创建网站的步骤；
2、掌握使用开发工具制作网页的基本方法；
3、掌握网站目录结构设计的基本规律，并理解其重要性。

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

三、实验要求（5分）
1、根据所提供素材，选取一种开发工具，完成第一个网站的创建；
2、完成网站首页的制作，掌握使用表格排版布局的方法；
3、通过网站的制作，掌握网站的基本制作过程。

四、实验原理（5分）
1、Web前端开发工具的使用方法；
2、AdobeFirework或AdobePhotoshop的使用；
3、平面设计的基本原理和Web设计的基本原理；
4、使用表格进行页面布局的方法，以及页面框架设计的基本原理。

五、实验步骤
1、创建网站
（1）以AdobeDreamweaverCS6为例，打开AdobeDreamweaverCS6，点击“站点→新 建站点”，弹出对话框，如图2-
1。
图2-1网站站点的创建河南中医药大学管理科学与工程本讲共计4页|当前第1页 《Web前端开发》实验教学指导/实验二：创建第一个网站
2
（2）输入你的站点名称，更改站点的路径，点击“完成”，即可完成站点的创建。

（3）为了使创建的站点清晰、有条理，可以在站点中新建子文件夹，分类存放图片（Images）、视频(Videos)、声音(Sounds)等文件。

2、搜集制作网站所需素材根据搜集的素材，利用AdobeFireworksCS6或AdobePhotoshopCS6设计网站首页。
如图2-
2。
图2-2网站首页效果图
3、制作第一个网站首页
（1）在创建的第一个站点中，点击“文件→新建”弹出“新建文档”对话框，如图2-3； 图2-3新建HTML文件
（2）在页面类型选项中选择HTML，然后点击“创建”按钮，将其命名为“index.html”。

（3）根据首页效果图index.png，分析网页布局，利用表格，完成网站代码的编写。
部分代码如下所示： 河南中医药大学管理科学与工程本讲共计4页|当前第2页 《Web前端开发》实验教学指导/实验二：创建第一个网站
3
--表格第二行：导航栏。
使用了table嵌套--> 首页中心概况中心动态心理常识心理调节联系我们 align="center" 请完成以下任务：任务一：请绘制网站首页的布局结构图。
（10分）任务二：请绘制网站的目录结构图。
（10分）任务三：请根据网站首页设计稿进行网站首页的开发。
（20分） 要求： 请将网站首页的布局结构图和目录结构图绘制出来，填写到实验报告册中。
请将网站首页的源代码填写到实验报告册中。
（源代码可打印后粘贴到实验报告册中）
六、自主实验步骤
1、创建个人网站
（1）在本地磁盘中创建一个网站目录，并规划好网站目录结构。

（2）使用Web开发工具创建网站。

2、开发个人网站的首页。

（1）在AdobeFireworks或AdobePhotoshop中设计网站首页。

（2）开发网站首页。

3、部署网站
（1）网站的远程服务器的申请，可以通过申请免费或试用的云服务器。
目前使用较多的有腾讯云、阿里云等。
可以注册登录该网站进行云服务器申请。
河南中医药大学管理科学与工程本讲共计4页|当前第3页 《Web前端开发》实验教学指导/实验二：创建第一个网站
4
（2）域名的申请，申请一个域名，。

（3）将开发好的网站部署到服务器上，通过该域名可以访问个人网站。
请完成以下任务：任务一：使用photoshop,设计个人网站首页；（5分）任务二：开发个人网站首页；（10分）任务三：描述网站的发布过程。
（5分）任务四：申请域名和云服务器，部署网站，并通过域名可访问。
（选做） 要求： 请将个人网站首页的源代码填写到实验报告册中。
（源代码可打印后粘贴到实验报告册中。
）请提供个人网站发布后的URL：http://，请将URL填写到实验报告册中。

七、思考及问答
1、在不同的浏览器下观察我们所做的网页显示的效果是不是相同呢？如果不相同，分析原因。
（5分）
2、DNS服务器的功能是什么？（5分）
3、除了表格布局，还有哪些网页布局方法？（5分）
4、除了腾讯云、阿里云还有哪些厂商可以提供云服务器申请？（5分） 河南中医药大学管理科学与工程本讲共计4页|当前第4页