《Web前端开发》实验教学指导/实验二:创建第一个网站 《Web前端开发》实验教学指导 实验二:创建第一个网站 、实验目的 1、掌握使用 Adobe Dreamweaver CS6创建网站的步骤 2、掌握使用 Adobe dreamweaver cs6制作网页的基本方法 3、掌握网站目录结构设计的基本规律,并理解其重要性 二、实验环境 1、 Windows XP/Windows7操作系统的计算机; 2、局域网网络环境,并且使用固定IP地址。 三、实验要求 1、根据所提供素材,使用 Adobe dreamweaver cs6完成第一个网站的创建 2、使用 Adobe dreamweaver CS6完成网站首页的制作,掌握使用表格排版布局的方法; 3、通过网站的制作,掌握网站的基本制作过程。 四、实验原理 1、 Adobe dreamweaver cs6的使用方法 2、 Adobe Fireworks CS6或 Adobe Photoshop CS6的使用 3、平面设计的基本原理和Web设计的基本原理; 4、使用表格进行页面布局的方法,以及页面框架设计的基本原理。 五、实验步骤 1、创建网站 (1)打开 Adobe dreamweaver cs6,点击“站点→新建站点”,弹出对话框,如图2-1。 高级设置 您可以在此处为 Dreamweaver站点选择本地文件夹和名称 站点名称:[我的二个诺 本地站点文件夹:D学实例体奇名达点2 图2-1网站站点的创建 (2)输入你的站点名称,更改站点的路径,点击“完成”,即可完成站点的创建。 河南中医学院互联网应用技术研究所 本讲共计4页|当前第1页
《Web 前端开发》实验教学指导 / 实验二：创建第一个网站 河南中医学院互联网应用技术研究所 本讲共计 4 页 | 当前第 1 页 《Web 前端开发》实验教学指导： 实验二：创建第一个网站 一、实验目的 1、掌握使用 Adobe Dreamweaver CS6 创建网站的步骤； 2、掌握使用 Adobe Dreamweaver CS6 制作网页的基本方法； 3、掌握网站目录结构设计的基本规律，并理解其重要性。 二、实验环境 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求 1、根据所提供素材，使用 Adobe Dreamweaver CS6 完成第一个网站的创建； 2、使用 Adobe Dreamweaver CS6 完成网站首页的制作，掌握使用表格排版布局的方法； 3、通过网站的制作，掌握网站的基本制作过程。 四、实验原理 1、Adobe Dreamweaver CS6 的使用方法； 2、Adobe Fireworks CS6 或 Adobe Photoshop CS6 的使用； 3、平面设计的基本原理和 Web 设计的基本原理； 4、使用表格进行页面布局的方法，以及页面框架设计的基本原理。 五、实验步骤 1、创建网站 （1）打开 Adobe Dreamweaver CS6，点击“站点→新建站点”，弹出对话框，如图 2-1。 （2）输入你的站点名称，更改站点的路径，点击“完成”，即可完成站点的创建。 图 2-1 网站站点的创建
《Web前端开发》实验教学指导/实验二:创建第一个网站 (3)为了使创建的站点清晰、有条理,可以在站点中新建子文件夹,分类存放图片( Images) 视频( Videos)、声音( Sounds)等文件。 2、搜集制作网站所需素材 根据搜集的素材,利用 Adobe fireworks cs6或 Adobe Photoshop cs6设计网站首页。如图 一平 图2-2网站首页效果图 3、制作第一个网站首页 (1)在创建的第一个站点中,点击“文件→新建”弹出“新建文档”对话框,如图2-3 样同临20m 2mm::解 恋,左、标和主 CaltraIn sE 文程典 □启用 ancantext teer 贴[画选参数4) 证和备内客 的)[彩c) 图2-3新建HIML文件 (2)在页面类型选项中选择HTM,然后点击“创建”按钮,将其命名为“ index.html”。 (3)根据首页效果图 index.png,分析网页布局,利用表格,完成网站代码的编写。 部分代码如下所示 stable bgcolor="#ffffff" border="o"cellpadding="0"cellspacing="0" align="center" 河南中医学院互联网应用技术研究所 本讲共计4页|当前第2页
《Web 前端开发》实验教学指导 / 实验二：创建第一个网站 河南中医学院互联网应用技术研究所 本讲共计 4 页 | 当前第 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 网站首页效果图
《Web前端开发》实验教学指导/实验二:创建第一个网站 首页 td width="160>中心概况 中心动态心理常识心理调节 td width="160">联系我们 要求 请将网站首页的页面结构图绘制岀来,填写到实验报告册中。 请讲网站首页的源代码填写到实验报告册中。(源代码可打印后粘贴到实验报告册中) 六、自主实验步骤 1、创建一个个人网站 (1)在本地磁盘中创建一个网站目录,并规划好网站目录结构。 (2)在 Adobe dreamweaver cs6中创建网站 (3)配置网站的远程服务器,可以通过申请免费或试用的云服务网站托管服务。 He4:http://www.windowsazure.com/en-us/pricing/free-trial/?wt.mcid=ab9db77Fd 2、创建个人网站的首页。 (1)在 Adobe fireworks cs6或 Adobe Photoshop Cs6中设计网站首页。 (2)在 Adobe dreamweaver CS6开发网站首页。 (3)将网站发布到申请的服务器上,并通过浏览器访问 要求: 请讲创建个人网站的步骤填写到实验报告册中。 请讲个人网站首页的源代码填写到实验报告册中。(源代码可打印后粘贴到实验报告册中。) 请提供个人网站发布后的Url:http∥/,请讲URL填写到实验报告册中。 七、思考及问答 1、在不同的浏览器下观察我们所做的网页显示的效果是不是相同呢?如果不相同,分析 河南中医学院互联网应用技术研究所 本讲共计4页|当前第3页
《Web 前端开发》实验教学指导 / 实验二：创建第一个网站 河南中医学院互联网应用技术研究所 本讲共计 4 页 | 当前第 3 页 首页 中心概况 中心动态 心理常识 心理调节 联系我们 要求： 请将网站首页的页面结构图绘制出来，填写到实验报告册中。 请讲网站首页的源代码填写到实验报告册中。（源代码可打印后粘贴到实验报告册中） 六、自主实验步骤 1、创建一个个人网站 （1）在本地磁盘中创建一个网站目录，并规划好网站目录结构。 （2）在 Adobe Dreamweaver CS 6 中创建网站。 （3）配置网站的远程服务器，可以通过申请免费或试用的云服务网站托管服务。 推荐：http://www.windowsazure.com/en-us/pricing/free-trial/?WT.mc_id=AB9DB77FD 2、创建个人网站的首页。 （1）在 Adobe Fireworks CS 6 或 Adobe Photoshop CS 6 中设计网站首页。 （2）在 Adobe Dreamweaver CS 6 开发网站首页。 （3）将网站发布到申请的服务器上，并通过浏览器访问。 要求： 请讲创建个人网站的步骤填写到实验报告册中。 请讲个人网站首页的源代码填写到实验报告册中。（源代码可打印后粘贴到实验报告册中。） 请提供个人网站发布后的 URL：http://，请讲 URL 填写到实验报告册中。 七、思考及问答 1、在不同的浏览器下观察我们所做的网页显示的效果是不是相同呢？如果不相同，分析
wb前端开发》实验教学指导/实验二:创建第一个网站4 原因 2、网站开发过程中应该注意哪些问题呢? 3、除了表格布局,还有哪些网页布局方法? 4、除 Microsoft azure外,还有哪些可以试用或者免费使用的网站托管云服务? 河南中医学院互联网应用技术研究所 本讲共计4页|当前第4页
《Web 前端开发》实验教学指导 / 实验二：创建第一个网站 河南中医学院互联网应用技术研究所 本讲共计 4 页 | 当前第 4 页 原因。 2、网站开发过程中应该注意哪些问题呢？ 3、除了表格布局，还有哪些网页布局方法？ 4、除 Microsoft Azure 外，还有哪些可以试用或者免费使用的网站托管云服务？