《Web前端开发》实验指导/实验三:创建更多内容的网站 《Web前端开发》实验指导 实验三:创建更多内容的网站 、实验目的 1、理解网站与网页之间的关系 2、掌握HTML5文件的基本结构 3、掌握网站导航的制作方法; 4、掌握超链接、图像、表格标记在页面中的应用 、掌握网站发布的方法, 二、实验环境 1、 Windows XP/Windows Server2003操作系统的计算机 2、局域网网络环境,并且使用固定IP地址 3、提供Web服务器,并为学生发放FIP账号。 三、实验要求 1、根据提供的素材,完成实验二网站中剩余的页面 2、进一步熟悉表格布局编写网页的方法 3、通过网页的编写,掌握超链接、图像标记的使用 4、将站点通过FTP进行发布,并通过浏览器进行访问和基本测试 四、实验原理 1、表格布局中表格的嵌套; 2、HTML的基本语法及基本原理 3、通过FTP进行网站发布的基本方法和网站更新维护的基本方法 五、实验步骤 l、编写网站栏目页:中心概况 心理品要而式 图3-1中心概况效果图 阮晓龙 本讲共计4页|当前是第1页
《Web 前端开发》实验指导 / 实验三：创建更多内容的网站 河南中医学院信息技术学院 | 阮晓龙 本讲共计 4 页 | 当前是第 1 页 《Web 前端开发》实验指导： 实验三：创建更多内容的网站 一、实验目的 1、理解网站与网页之间的关系； 2、掌握 HTML5 文件的基本结构； 3、掌握网站导航的制作方法； 4、掌握超链接、图像、表格标记在页面中的应用； 5、掌握网站发布的方法。 二、实验环境 1、Windows XP/Windows Server 2003 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址； 3、提供 Web 服务器，并为学生发放 FTP 账号。 三、实验要求 1、根据提供的素材，完成实验二网站中剩余的页面； 2、进一步熟悉表格布局编写网页的方法； 3、通过网页的编写，掌握超链接、图像标记的使用； 4、将站点通过 FTP 进行发布，并通过浏览器进行访问和基本测试。 四、实验原理 1、表格布局中表格的嵌套； 2、HTML 的基本语法及基本原理； 3、通过 FTP 进行网站发布的基本方法和网站更新维护的基本方法。 五、实验步骤 1、编写网站栏目页：中心概况 图 3-1 中心概况效果图
《Web前端开发》实验指导/实验三:创建更多内容的网站 (1)编写“中心概况”页面,文件名为: center. html。效果如图3-1所示。 (2)打开 Adobe Dreamweaver CS6,新建HIML网页,将其命名为 center. htm,使用表格布 局进行网页的编写 (3)导航栏中的“首页”链接到 Index. html,“中心概况”链接到 center. html。 (4)打开首页,将首页导航栏中的“中心概况”链接到 center html (5)依据上述步骤完成网站栏目页的开发。 2、编写网站内容页:团体咨询室守则 (1)根据提供的素材,开发“团体咨询室守则”页面,文件名为: zixun html,页面效果如图 3-2所示。 团体章守国 不割料 有出你中了秘到们就传 图3-2团体咨询室守则效果图 (2)将该网页链接到二级栏目网页中。 注意:网页文件名应具有一定意义,以免网页过多时不容易区分网页。 3、使用 Adobe dreamweaver cs6发布站点 (1)点击“站点→管理站点”,弹出对话框,如图3-3 与入[入B的破姑点 助 图3-3管理站点 (2)在“管理站点”对话框中双击需要管理的站点,如选择“我的第一个网站”,弹出对话框 河南中医学院信息技术学院|阮晓龙 本讲共计4页|当前是第2页
《Web 前端开发》实验指导 / 实验三：创建更多内容的网站 河南中医学院信息技术学院 | 阮晓龙 本讲共计 4 页 | 当前是第 2 页 （1）编写“中心概况”页面，文件名为：center.html。效果如图 3-1 所示。 （2）打开 Adobe Dreamweaver CS6，新建 HTML 网页，将其命名为 center.html，使用表格布 局进行网页的编写。 （3）导航栏中的“首页”链接到 Index.html，“中心概况”链接到 center.html。 （4）打开首页，将首页导航栏中的“中心概况”链接到 center.html。 （5）依据上述步骤完成网站栏目页的开发。 2、编写网站内容页：团体咨询室守则 （1）根据提供的素材，开发“团体咨询室守则”页面，文件名为：zixun.html，页面效果如图 3-2 所示。 （2）将该网页链接到二级栏目网页中。 注意：网页文件名应具有一定意义，以免网页过多时不容易区分网页。 3、使用 Adobe Dreamweaver CS6 发布站点 （1）点击“站点→管理站点”，弹出对话框，如图 3-3。 （2）在“管理站点”对话框中双击需要管理的站点，如选择“我的第一个网站”，弹出对话框， 图 3-2 团体咨询室守则效果图 图 3-3 管理站点
《Web前端开发》实验指导/实验三:创建更多内容的网站 然后选择“服务器”,如图3-4 如设置对象我的一个网站 您将在此位置选择承载web上的贡面的服务器,此对话框的设置来自 高级设置 南员柔地义一个法高您无完此梦如果要连到并发 均址 连接程试式 帮助 [戰消 图3-4站点设置对象 (3)点击图3-4中的“+”添加新服务器按钮,弹出对话框,然后填写相应的信息,如服 基本高级 服务器名称: nas.hactam,edu.cn 我的第一个网站·本地视图 连接方法:FTP |合|曰 本地文件 FP地址[ nashantan.edu.cn 端口:21 太小类型 用户名:[9 engfangfang 则式 根目录 Web Url: hTtp: //nas. hactcm. edu. an/ 图3-6文件面板 更多选项 存取消 图3-5服务器配置信息 务器名称、连接方法、FIP地址、用户名、密码等,如图3-5。 (4)配置完成后,单击图3-5中“测试”按钮,对是否连接到远程服务器进行测试,提 示“ Dreamweaver已成功连接到您的web服务器”,表示连接已建立,点击“保存”按钮。 (5)找到“文件”面板,如图3-6,在站点文件夹上右击,在快捷菜单上选择“上传”, 即可完成网站发布 4、使用FIP客户端 File zilla client进行网站发布 (1)获取FTP客户端软件安装包 河南中医学院信息技术学院|阮晓龙 本讲共计4页|当前是第3页
《Web 前端开发》实验指导 / 实验三：创建更多内容的网站 河南中医学院信息技术学院 | 阮晓龙 本讲共计 4 页 | 当前是第 3 页 然后选择“服务器”，如图 3-4。 （3）点击图 3-4 中的“+”添加新服务器按钮，弹出对话框，然后填写相应的信息，如服 务器名称、连接方法、FTP 地址、用户名、密码等，如图 3-5。 （4）配置完成后，单击图 3-5 中“测试”按钮，对是否连接到远程服务器进行测试，提 示“Dreamweaver 已成功连接到您的 Web 服务器”，表示连接已建立，点击“保存”按钮。 （5）找到“文件”面板，如图 3-6，在站点文件夹上右击，在快捷菜单上选择“上传”， 即可完成网站发布。 4、使用 FTP 客户端 FileZilla Client 进行网站发布 （1）获取 FTP 客户端软件安装包 图 3-4 站点设置对象 图 3-5 服务器配置信息 图 3-6 文件面板
wb前端开发》实验指导/实验三:创建更多内容的网站4 访问课程网站获取 Filezilla client e tttie:http://ke.5lxueweb.cn/suppOrt/ftp-client/filezIllA3.6.0.2win32-setup.exe 访问 Filezilla官网获取 Filezilla client 地址:https://filezilla-project.org (2)安装 双击 setup. ext开始安装,按照提示完成软件安装 (3)启动 Filezilla客户端。 完成以下任务: 任务一:根据所给的主机名、用户名和密码,将实验三发布到服务器上。 任务二:FTP的工作原理是什么? 要求 请将上述任务的操作方法,填写到实验报告册中 请将FTP的工作原理、优缺点、FTP服务的逻辑拓扑结构填写到实验报告册中。 六、自主实验步骤 1、完成实验二、实验三中的案例网站,并将其发布到服务器上 (1)案例网站不得低于6个页面 (2)案例网站的访问地址为:htp/服务器地址/学号/anli/ index. html 要求 请将案例网站的六个页面中最重要的代码填写到实验报告册中 请将案例网站的页面结构图,绘制并填写到实验报告册中 2、请根据自己的实际情况,制作个人网站,并将其发布到服务器上 (1)个人网站必须包含“个人介绍”“兴趣爱好”“联系我”三个基本栏目。 (2)个人网站应该自行进行设计,不得低于4个页面 (2)案例网站的访问地址为:htp服务器地址学号 personal/index. html 要求 请将个人网站的页面结构、网站目录结构绘制填写到实验报告册中 七、思考及问答 1、如何架设一台Web服务器? (1)如何在 Windows Server上通过IS架设Web服务器? (2)如何在 Windows server上通过 Apache架设Web服务器? 2、如何架设Web服务器的网站管理服务? (1)如何在 Windows Server上通过IS架设FTP服务器? (2)如何在 Windows server上通过 Filezilla server架设FIP服务器? (3)如何在 Windows Server上通过Serv-U架设FTP服务器? 河南中医学院信息技术学院|阮晓龙 本讲共计4页|当前是第4页
《Web 前端开发》实验指导 / 实验三：创建更多内容的网站 河南中医学院信息技术学院 | 阮晓龙 本讲共计 4 页 | 当前是第 4 页 访问课程网站获取 FileZilla Client。 地址：http://ke.51xueweb.cn/Support/FTP-Client/FileZilla_3.6.0.2_win32-setup.exe 访问 FileZilla 官网获取 FileZilla Client 地址：https://filezilla-project.org/ （2）安装 双击 setup.ext 开始安装，按照提示完成软件安装。 （3）启动 FileZilla 客户端。 完成以下任务： 任务一：根据所给的主机名、用户名和密码，将实验三发布到服务器上。 任务二：FTP 的工作原理是什么？ 要求： 请将上述任务的操作方法，填写到实验报告册中。 请将 FTP 的工作原理、优缺点、FTP 服务的逻辑拓扑结构填写到实验报告册中。 六、自主实验步骤 1、完成实验二、实验三中的案例网站，并将其发布到服务器上。 （1）案例网站不得低于 6 个页面。 （2）案例网站的访问地址为：http://服务器地址/学号/anli/index.html 要求： 请将案例网站的六个页面中最重要的代码填写到实验报告册中。 请将案例网站的页面结构图，绘制并填写到实验报告册中。 2、请根据自己的实际情况，制作个人网站，并将其发布到服务器上。 （1）个人网站必须包含“个人介绍”“兴趣爱好”“联系我”三个基本栏目。 （2）个人网站应该自行进行设计，不得低于 4 个页面。 （2）案例网站的访问地址为：http://服务器地址/学号/personal/index.html 要求： 请将个人网站的页面结构、网站目录结构绘制填写到实验报告册中。 七、思考及问答 1、如何架设一台 Web 服务器？ （1）如何在 Windows Server 上通过 IIS 架设 Web 服务器？ （2）如何在 Windows Server 上通过 Apache 架设 Web 服务器？ 2、如何架设 Web 服务器的网站管理服务？ （1）如何在 Windows Server 上通过 IIS 架设 FTP 服务器？ （2）如何在 Windows Server 上通过 Filezilla Server 架设 FTP 服务器？ （3）如何在 Windows Server 上通过 Serv-U 架设 FTP 服务器？