《Wcb前端开发》实验教学指导/实验二:创建第一个网站1 《Web前端开发》实验教学指导 实验二:创建第一个网站 、实验目的(5分) 1、掌握使用开发工具创建网站的步骤 2、掌握使用开发工具制作网页的基本方法 掌握网站目录结构设计的基本规律,并理解其重要性 二、实验环境(5分 l、 Windows10操作系统的计算机 2、局域网网络环境,并且使用固定IP地址, 三、实验要求(5分) 1、根据所提供素材,选取一种开发工具,完成第一个网站的创建 2、完成网站首页的制作,掌握使用表格排版布局的方法; 3、通过网站的制作,掌握网站的基本制作过程 四、实验原理(5分) 1、Web前端开发工具的使用方法; 2、 Adobe Firework或 Adobe Photoshop的使用 3、平面设计的基本原理和Web设计的基本原理; 4、使用表格进行页面布局的方法,以及页面框架设计的基本原理 五、实验步骤 1、创建网站 (1)以 Adobe dreamweaver cs6为例,打开 Adobe Dreamweaver CS6,点击“站点→新 站南设过象未命名达点2 版本控制 同文件发布到web 高级设置 您可以在此处为Drei 站点选择本地文件夹和名称 站点名称:[的弟一不网钻 本地站点文件夹:[D字实例床命名达点2 然助 图2-1网站站点的创建 建站点”,弹出对话框,如图2-1 河南中医药大学管理科学与工程 本讲共计4页|当前第1页
《Web 前端开发》实验教学指导 / 实验二：创建第一个网站 1 河南中医药大学管理科学与工程 本讲共计4页 | 当前第1页 《Web 前端开发》实验教学指导： 实验二：创建第一个网站 一、实验目的（5 分） 1、掌握使用开发工具创建网站的步骤； 2、掌握使用开发工具制作网页的基本方法； 3、掌握网站目录结构设计的基本规律，并理解其重要性。 二、实验环境（5 分） 1、Windows 10 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、根据所提供素材，选取一种开发工具，完成第一个网站的创建； 2、完成网站首页的制作，掌握使用表格排版布局的方法； 3、通过网站的制作，掌握网站的基本制作过程。 四、实验原理（5 分） 1、Web 前端开发工具的使用方法； 2、Adobe Firework 或 Adobe Photoshop 的使用； 3、平面设计的基本原理和 Web 设计的基本原理； 4、使用表格进行页面布局的方法，以及页面框架设计的基本原理。 五、实验步骤 1、创建网站 （1）以 Adobe Dreamweaver CS6 为例，打开 Adobe Dreamweaver CS6，点击“站点→新 建站点”，弹出对话框，如图 2-1。 图 2-1 网站站点的创建
《Web前端开发》实验教学指导/实验二:创建第一个网站 (2)输入你的站点名称,更改站点的路径,点击“完成”,即可完成站点的创建。 (3)为了使创建的站点清晰、有条理,可以在站点中新建子文件夹,分类存放图片( Images)、 视频( Videos)、声音( Sounds)等文件 2、搜集制作网站所需素材 根据搜集的素材,利用 Adobe fireworks cs6或 Adobe photoshop Cs6设计网站首页。如图 一平 图22网站首页效果图 3、制作第一个网站首页 (1)在创建的第一个站点中,点击“文件→新建”弹出“新建文档”对话框,如图2-3 中的 示例中的页 列表态,左困三、标和主 秀压定,和 题C5如图九理仪档头 口启用1mttE 帮④篇选参①) 证事备内 a[彩) 图2-3新建HTML文件 (2)在页面类型选项中选择HTML,然后点击“创建”按钮,将其命名为“ index.html” (3)根据首页效果图 index.png,分析网页布局,利用表格,完成网站代码的编写 部分代码如下所示: 河南中医药大学管理科学与工程 本讲共计4页|当前第2页
《Web 前端开发》实验教学指导 / 实验二：创建第一个网站 2 河南中医药大学管理科学与工程 本讲共计4页 | 当前第2页 （2）输入你的站点名称，更改站点的路径，点击“完成”，即可完成站点的创建。 （3）为了使创建的站点清晰、有条理，可以在站点中新建子文件夹，分类存放图片（Images）、 视频(Videos)、声音(Sounds)等文件。 2、搜集制作网站所需素材 根据搜集的素材，利用 Adobe Fireworks CS 6 或 Adobe Photoshop CS 6 设计网站首页。如图 2-2。 3、制作第一个网站首页 （1）在创建的第一个站点中，点击“文件→新建”弹出“新建文档”对话框，如图 2-3； （2）在页面类型选项中选择 HTML，然后点击“创建”按钮，将其命名为“index.html”。 （3）根据首页效果图 index.png，分析网页布局，利用表格，完成网站代码的编写。 部分代码如下所示： 图 2-3 新建 HTML 文件 图 2-2 网站首页效果图
《Wcb前端开发》实验教学指导/实验二:创建第一个网站3 stable bgcolor="#fffff border=0" cellpadding="0"cellspacing=0" align="center" width=980"> td width="160">首页 中心概况中心动态心理常识 心理调节联系我们 请完成以下任务: 任务一:请绘制网站首页的布局结构图。(10分) 任务二:请绘制网站的目录结构图。(10分) 任务三:请根据网站首页设计稿进行网站首页的开发。(20分) 要求 请将网站首页的布局结构图和目录结枃圉绘制岀来,填写到实验报告册中 请将网站首页的源代码填写到实验报告册中。(源代码可打印后粘贴到实验报告册中) 六、自主实验步骤 创建个人网站 (1)在本地磁盘中创建一个网站目录,并规划好网站目录结构。 (2)使用Web开发工具创建网站。 2、开发个人网站的首页。 (1)在 Adobe fireworks或 Adobe Photoshop中设计网站首页 (2)开发网站首页。 3、部暑网站 (1)网站的远程服务器的申请,可以通过申请免费或试用的云服务器 目前使用较多的有腾讯云、阿里云等。可以注册登录该网站进行云服务器申请 河南中医药大学管理科学与工程 本讲共计4页|当前第3页
《Web 前端开发》实验教学指导 / 实验二：创建第一个网站 3 河南中医药大学管理科学与工程 本讲共计4页 | 当前第3页 首页 中心概况 中心动态 心理常识 心理调节 联系我们 请完成以下任务： 任务一：请绘制网站首页的布局结构图。（10 分） 任务二：请绘制网站的目录结构图。（10 分） 任务三：请根据网站首页设计稿进行网站首页的开发。（20 分） 要求： 请将网站首页的布局结构图和目录结构图绘制出来，填写到实验报告册中。 请将网站首页的源代码填写到实验报告册中。（源代码可打印后粘贴到实验报告册中） 六、自主实验步骤 1、创建个人网站 （1）在本地磁盘中创建一个网站目录，并规划好网站目录结构。 （2）使用 Web 开发工具创建网站。 2、开发个人网站的首页。 （1）在 Adobe Fireworks 或 Adobe Photoshop 中设计网站首页。 （2）开发网站首页。 3、部署网站 （1）网站的远程服务器的申请，可以通过申请免费或试用的云服务器。 目前使用较多的有腾讯云、阿里云等。可以注册登录该网站进行云服务器申请
《w由前端开发》实验教学指导/实验二:创建第一个网站4 (2)域名的申请,申请一个域名 (3)将开发好的网站部署到服务器上,通过该域名可以访问个人网站 请完成以下任务: 任务一:使用 photoshop,设计个人网站首页;(5分) 任务二:开发个人网站首页;(10分) 任务三:描述网站的发布过程。(5分) 任务四:申请域名和云服务器,部署网站,并通过域名可访问。(选做) 要求 请将个人网站首页的源代码填写到实验报告册中。(源代码可打印后粘贴到实验报告册中。) 请提供个人网站发布后的Url:http∥,请将URL填写到实验报告册中 七、思考及问答 1、在不同的浏览器下观察我们所做的网页显示的效果是不是相同呢?如果不相同,分析原因。 (5分) 2、DNS服务器的功能是什么?(5分) 3、除了表格布局,还有哪些网页布局方法?(5分) 4、除了腾讯云、阿里云还有哪些厂商可以提供云服务器申请?(5分) 河南中医药大学管理科学与工程 本讲共计4页|当前第4页
《Web 前端开发》实验教学指导 / 实验二：创建第一个网站 4 河南中医药大学管理科学与工程 本讲共计4页 | 当前第4页 （2）域名的申请，申请一个域名，。 （3）将开发好的网站部署到服务器上，通过该域名可以访问个人网站。 请完成以下任务： 任务一：使用 photoshop,设计个人网站首页；（5 分） 任务二：开发个人网站首页；（10 分） 任务三：描述网站的发布过程。（5 分） 任务四：申请域名和云服务器，部署网站，并通过域名可访问。（选做） 要求： 请将个人网站首页的源代码填写到实验报告册中。（源代码可打印后粘贴到实验报告册中。） 请提供个人网站发布后的 URL：http://，请将 URL 填写到实验报告册中。 七、思考及问答 1、在不同的浏览器下观察我们所做的网页显示的效果是不是相同呢？如果不相同，分析原因。 （5 分） 2、DNS 服务器的功能是什么？（5 分） 3、除了表格布局，还有哪些网页布局方法？（5 分） 4、除了腾讯云、阿里云还有哪些厂商可以提供云服务器申请？（5 分）
