Wcb前端开发》实验教学指导/实验三:创建更多内容的网站1 《Web前端开发》实验教学指导 实验三:创建更多内容网站 、实验目的(5分) 1、理解网站与网页之间的关系 2、掌握超链接、图像、表格标记在页面中的应用; 掌握网站发布的方法 二、实验环境(5分 l、 Windows10操作系统的计算机 2、局域网网络环境,并且使用固定IP地址, 三、实验要求(5分) 1、进一步熟悉表格布局编写网页的方法 2、通过网页的编写,掌握超链接、图像标记的使用 3、将站点通过FTP发布,并通过浏览器进行访问和基本测试。 四、实验原理(5分) 1、通过FTP进行站点发布的基本方法和网站更新维护的基本方法 五、实验步骤(40分) 1、编写网站栏目页:中心概况 事着心 重场了自己的 廉两 图3-1中心概况效果图 (1)编写“中心概况”页面,文件名为: center. html。效果如图3-1所示 (2)打开 Adobe dreamweaver C6,新建HTML网页,将其命名为 center.html,使用表 格布局进行网页的编写。 (3)导航栏中的“首页”链接到 Index.html,“中心概况”链接到 center.html。 河南中医药大学管理科学与工程学科 本讲共计4页|当前第1页
《Web 前端开发》实验教学指导 / 实验三：创建更多内容的网站 1 河南中医药大学管理科学与工程学科 本讲共计4页 | 当前第1页 《Web 前端开发》实验教学指导： 实验三：创建更多内容网站 一、实验目的（5 分） 1、理解网站与网页之间的关系； 2、掌握超链接、图像、表格标记在页面中的应用； 3、掌握网站发布的方法。 二、实验环境（5 分） 1、Windows 10 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、进一步熟悉表格布局编写网页的方法； 2、通过网页的编写，掌握超链接、图像标记的使用； 3、将站点通过 FTP 发布，并通过浏览器进行访问和基本测试。 四、实验原理（5 分） 1、通过 FTP 进行站点发布的基本方法和网站更新维护的基本方法。 五、实验步骤（40 分） 1、编写网站栏目页：中心概况 （1）编写“中心概况”页面，文件名为：center.html。效果如图 3-1 所示。 （2）打开 Adobe Dreamweaver CS6，新建 HTML 网页，将其命名为 center.html，使用表 格布 局进行网页的编写。 （3）导航栏中的“首页”链接到 Index.html，“中心概况”链接到 center.html。 图 3-1 中心概况效果图
《Web前端开发》实验教学指导/实验三:创建更多内容的网站 (4)打开首页,将首页导航栏中的“中心概况”链接到 center.html (5)依据上述步骤完成网站栏目页的开发 2、编写网站内容页:团体咨询室守则 (1)根据提供的素材,开发“团体咨询室守则”页面,文件名为: ZIxun.htm1,页面效果如 图3-2所示。 正体备询室宁 等严动,实四学 6.图时加得体结,不到,不块 体动制,进服力中,不们等锰,不象巧进动无关们零塘 不嘴己的实:丽人,仔细研,不们析人的, 在活了解时打宝外传 (2)将该网页链接到二级栏目网页中。 注意:网页文件名应具有一定意义,以免网页过多时不容易区分网页。 、使用 Adobe dreamweaver cs6发布站点 (1)点击“站点→管理站点”,弹出对话框,如图3-3。 导入点[导入B □建占[轴建的性点 □标一 □ 图3-3管理站点 河南中医药大学管理科学与工程学科 本讲共计4页|当前第2页
《Web 前端开发》实验教学指导 / 实验三：创建更多内容的网站 2 河南中医药大学管理科学与工程学科 本讲共计4页 | 当前第2页 （4）打开首页，将首页导航栏中的“中心概况”链接到 center.html。 （5）依据上述步骤完成网站栏目页的开发。 2、编写网站内容页：团体咨询室守则 （1）根据提供的素材，开发“团体咨询室守则”页面，文件名为：zixun.html，页面效果如 图 3-2 所示。 （2）将该网页链接到二级栏目网页中。 注意：网页文件名应具有一定意义，以免网页过多时不容易区分网页。 3、使用 Adobe Dreamweaver CS6 发布站点 （1）点击“站点→管理站点”，弹出对话框，如图 3-3。 图 3-3 管理站点 图 2-2 网站首页效果图
Wcb前端开发》实验教学指导/实验三:创建更多内容的网站3 (2)在“管理站点”对话框中双击需要管理的站点,如选择“我的第一个网站”,弹出对 话框,然后选择“服务器”,如图3-4。 时话框的设置来自 高级设置 毒噩鑫一:您无此,如要连接到 连接远程式 5h新码怎 □[取一 图3-4站点设置对象 (3)点击图3-4中的“+”添加新服务器按钮,弹出对话框,然后填写相应的信息,如 服务器名称、连接方法、FTP地址、用户名、密码等,如图3-5。 基本高级 文件资源代码片断 务器名称: as hacton.edu.a 我的第一个网站·本地视图 连接方法:[FP ctse 本地文件 大小类型 FTP地址:[ ashaltom.edu.n 口:[21 文件夹 密码:[ 区保存 剜试 根目录:□ Web Url: Http:/has. hactom.edu.an 图3-6文件面板 帮助 保存 取消 图3-5服务器配置信息 (4)配置完成后,单击图3-5中“测试”按钮,对是否连接到远程服务器进行测试,提 示“ Dreamweaver已成功连接到您的Web服务器”,表示连接已建立,点击“保存”按钮 (5)找到“文件”面板,如图3-6,在站点文件夹上右击,在快捷菜单上选择“上传” 河南中医药大学管理科学与工程学科 本讲共计4页|当前第3页
《Web 前端开发》实验教学指导 / 实验三：创建更多内容的网站 3 河南中医药大学管理科学与工程学科 本讲共计4页 | 当前第3页 （2）在“管理站点”对话框中双击需要管理的站点，如选择“我的第一个网站”，弹出对 话框，然后选择“服务器”，如图 3-4。 （3）点击图 3-4 中的“+”添加新服务器按钮，弹出对话框，然后填写相应的信息，如 服务器名称、连接方法、FTP 地址、用户名、密码等，如图 3-5。 （4）配置完成后，单击图 3-5 中“测试”按钮，对是否连接到远程服务器进行测试，提 示“Dreamweaver 已成功连接到您的 Web 服务器”，表示连接已建立，点击“保存”按钮。 （5）找到“文件”面板，如图 3-6，在站点文件夹上右击，在快捷菜单上选择“上传”， 图 3-4 站点设置对象 图 3-5 服务器配置信息 图 3-6 文件面板
Nb前端开发》实验教学指导/实验三:创建更多内客的网站4 即可完成网站发布。 4、使用FTP客户端 Filezilla client进行网站发布 (1)获取FTP客户端软件安装包 访问课程网站获取 Filezilla client。 ttfl:http://web.ke.5lxueweb.cn/rjzy/index.html 访问 Filezilla官网获取 Filezilla client 地址https://filezilla-project.org/ (2)安装 双击 setup.ext开始安装,按照提示完成软件安装。 请完成以下任务: 任务一:完成心里咨询栏目页的开发,不少于2个页面:(15分) 任务二:完成心里咨询内容页的开发:(5分) 任务三:描述FTP的工作原理;(10分) 任务四:描述使用FTP服务的优势有哪些?(10分) 要求:请将上述任务填写到实验报告册中。 六、自主实验步骤 1、请根据自己的实际情况,制作个人网站 (1)个人网站包含“个人介绍”“兴趣爱好”等基本栏目 (2)个人网站应该自行进行设计,不得低于4个页面 请完成以下任务 任务一:完成栏目页的开发,不少于2个网页 任务二:完成内容页的开发 任务三:绘制网站页面结构。 要求 请将网站的代码填写到实验报告册中;请将个人网站的页面结构图填写 到实验报告册中。 七、思考及问答 1、如何架设一台Web服务器 (1)如何在 Windows server上通过IIS架设Web服务器?(5分) (2)如何在 Windows Server上通过 Apache架设Web服务器?(5分) 2、如何架设Web服务器的网站管理服务? (1)如何在 Windows server上通过IIS架设FTP服务器?(5分) (2)如何在 Windows server上通过 Filezilla server架设FTP服务器?(5分) 河南中医药大学管理科学与工程学科 本讲共计4页|当前第4页
《Web 前端开发》实验教学指导 / 实验三：创建更多内容的网站 4 河南中医药大学管理科学与工程学科 本讲共计4页 | 当前第4页 即可完成网站发布。 4、使用 FTP 客户端 FileZilla Client 进行网站发布 （1）获取 FTP 客户端软件安装包 访问课程网站获取 FileZilla Client。 地址：http://web.ke.51xueweb.cn/rjzy/index.html 访问 FileZilla 官网获取 FileZilla Client 地址：https://filezilla-project.org/ （2）安装 双击 setup.ext 开始安装，按照提示完成软件安装。 请完成以下任务： 任务一：完成心里咨询栏目页的开发，不少于 2 个页面；（15 分） 任务二：完成心里咨询内容页的开发；（5 分） 任务三：描述 FTP 的工作原理；（10 分） 任务四：描述使用 FTP 服务的优势有哪些？（10 分） 要求： 请将上述任务填写到实验报告册中。 六、自主实验步骤 1、请根据自己的实际情况，制作个人网站。 （1）个人网站包含“个人介绍”“兴趣爱好”等基本栏目。 （2）个人网站应该自行进行设计，不得低于 4 个页面。 请完成以下任务： 任务一：完成栏目页的开发，不少于 2 个网页； 任务二：完成内容页的开发； 任务三：绘制网站页面结构。 要求： 请将网站的代码填写到实验报告册中；请将个人网站的页面结构图填写 到实验报告册中。 七、思考及问答 1、如何架设一台 Web 服务器？ （1）如何在 Windows Server 上通过 IIS 架设 Web 服务器？ （5 分） （2）如何在 Windows Server 上通过 Apache 架设 Web 服务器？（5 分） 2、如何架设 Web 服务器的网站管理服务？ （1）如何在 Windows Server 上通过 IIS 架设 FTP 服务器？ （5 分） （2）如何在 Windows Server 上通过 Filezilla Server 架设 FTP 服务器？ （5 分）