《Web前端开发》实验教学指导/实验一:Web开发工具的使用 《Web前端开发》实验教学指导 实验一:Web开发工具的使用 、实验目的(5分) 1、了解Web开发工具的多样性 2、掌握常用的web开发工具的安装和使用方法 3、掌握HTML5文档的结构以及HIML文件命名规范 4、掌握编写简易的HIML文件 5、掌握body标记的属性以及使用方法。 二、实验环境(5分) 1、 Windows xP/ Windows7操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 、实验要求(5分) 1、完成Web开发工具的安装,并掌握基本的使用方法 2、完成HTML文件的编写,并掌握HIML文档的结构; 3、完成body标记属性的设置,改变网页显示效果。 四、实验原理(5分) 1、 Adobe Create Suite6的安装和使用 2、 SCode的安装和使用 3、 NotePad的安装和使用 4、HIML5文档结构及语法 五、实验步骤(40分) 1、Web开发工具: Adobe creative Suite cs6 Design& Web premium (1)获得软件安装包 访问 Adobe官方网站获得 Adobe Creative Suite(R CS6 Design& Web Premium 地址:htp/www.adobe.com/cn/downloads. (2)安装 名称 对下载的程序安装包解压缩,得到安装程序,执行 Set-up]文件,开始安装。如图1-1所示 I deploy packages 选择[试用],以产品试用的模式开始进行产品安装。如 图 1-2所示。 图1-1执行安装程序 本讲共计5页当前第1页
《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 本讲共计 5 页 | 当前第 1 页 《Web 前端开发》实验教学指导 实验一：Web 开发工具的使用 一、实验目的（5 分） 1、了解 Web 开发工具的多样性； 2、掌握常用的 Web 开发工具的安装和使用方法； 3、掌握 HTML5 文档的结构以及 HTML 文件命名规范； 4、掌握编写简易的 HTML 文件； 5、掌握 body 标记的属性以及使用方法。 二、实验环境（5 分） 1、Windows XP/Windows 7 操作系统的计算机； 2、局域网网络环境，并且使用固定 IP 地址。 三、实验要求（5 分） 1、完成 Web 开发工具的安装，并掌握基本的使用方法； 2、完成 HTML 文件的编写，并掌握 HTML 文档的结构； 3、完成 body 标记属性的设置，改变网页显示效果。 四、实验原理（5 分） 1、Adobe Create Suite 6 的安装和使用； 2、VSCode 的安装和使用； 3、NotePad 的安装和使用； 4、HTML5 文档结构及语法； 五、实验步骤（40 分） 1、Web 开发工具：Adobe Creative Suite® CS6 Design & Web Premium （1）获得软件安装包。 访问 Adobe 官方网站获得 Adobe Creative Suite® CS6 Design & Web Premium。 地址：http://www.adobe.com/cn/downloads/ （2）安装 对下载的程序安装包解压缩，得到安装程序，执行 [Set-up]文件，开始安装。如图 1-1 所示。 选择[试用]，以产品试用的模式开始进行产品安装。如 图 1-2 所示。 图 1-1 执行安装程序
《Web前端开发》实验教学指导/实验一:Web开发工具的使用 使用注册的 Adobe ID登录后,继续执行安装行为。如果还没有注册 Adobe id,可以通过点击 [创建 Adobe Id]注册。如图1-3所示。 天使用A(boD景 安装 的凭证存储在此设备上 试用,一 图1-2选择产品试用 图1-3使用 Adobe id登录 选择需要安装的组件,建议选择[ Adobe dreamweaver CS6]、[ Adobe Fireworks CS6]、[ Adobe Illustrator CS6]、[ Adobe Photoshop CS6四项。可以根据自己的需要进行定义。如图1-4所示。 等待软件安装完成,如图1-5所示。 选项 装 口 上一 图1-4选择安装的软件组件 图1-5等待程序安装完成 (3)打开 Adobe Dreamweaver cs6,熟悉软件的界面和常用功能 请完成下面的任务 任务一:设置工作区布局为编码人员(高级)]模式。(3分) 任务二:打开DW的默认参数对话框,熟悉并设置自己需要的参数。(2分) 任务三:在DW中新建一个网站,网站名称为我的第一个网站]。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、Web开发工具: VSCode (1)获得软件安装包 访问Ⅴ SCode官方网站获得产品安装包 地址:htts/ ode visualstudio. com (2)安装 本讲共计5页|当前第2页
《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 本讲共计 5 页 | 当前第 2 页 使用注册的 Adobe ID 登录后，继续执行安装行为。如果还没有注册 Adobe ID，可以通过点击 [创建 Adobe ID]注册。如图 1-3 所示。 选择需要安装的组件，建议选择[Adobe Dreamweaver CS 6]、[Adobe Fireworks CS6]、[Adobe Illustrator CS6]、[Adobe Photoshop CS6]四项。可以根据自己的需要进行定义。如图 1-4 所示。 等待软件安装完成，如图 1-5 所示。 （3）打开 Adobe Dreamweaver CS6，熟悉软件的界面和常用功能。 请完成下面的任务： 任务一：设置工作区布局为[编码人员（高级）]模式。（3 分） 任务二：打开 DW 的默认参数对话框，熟悉并设置自己需要的参数。（2 分） 任务三：在 DW 中新建一个网站，网站名称为[我的第一个网站]。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 2、Web 开发工具：VSCode （1）获得软件安装包 访问 VSCode 官方网站获得产品安装包。 地址：https://code.visualstudio.com/ （2）安装 图 1-2 选择产品试用 图 1-3 使用 Adobe ID 登录 图 1-4 选择安装的软件组件 图 1-5 等待程序安装完成
《Web前端开发》实验教学指导/实验一:Web开发工具的使用 双击安装程序开始执行,按照提示完成软件安装。 (3)打开Ⅴ SCode软件,熟悉Ⅴ SCode软件的界面和常用功能。 请完成下面的任务: 任务一:使用Ⅴ SCode软件,新建网页,将其改为html格式。(3分) 任务二:创建一个html5网页,输入“ Hello world”。(7分) 要求 请将上述任务的操作方法,填写到实验报告册中 3、Web开发工具: Notepad++ (1)获得软件安装包 访问 NotePad++官方网站获得产品安装包。 tttie:https://notepad-plus-plus.org/download/v7.3.3.html (2)安装 双击安装程序开始执行,按照提示完成软件安装 (3)打开[ NotePad++],如图1-6所示。熟悉开发界面和功能 da合者|D|曲|考团数国回国。,因最 suppart o1a s-Record, Intel and tile format xax 為ddc1 uton ir s1nd1a1ag1 f a ge351。n ddp1ug1n图 23 Updater (installer only 图1-6 NotePad++界面 (4)设置新建文件的类型为HIML,然后新建文件,输入以下的代码,如图1-7,并保 存为“ beiying htI 日强5图(N透m工0右们 De|曲考团数图国国口对图图删最 q>我与父亲不相见己 回家变卖典质,父 空形:年秃鄙柔:父购餐 HyperText.Markuplength:836.lines:I3 Ln:9 Col:23Sd:010 图1-7背影网页 本讲共计5页|当前第3页
《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 本讲共计 5 页 | 当前第 3 页 双击安装程序开始执行，按照提示完成软件安装。 （3）打开 VSCode 软件，熟悉 VSCode 软件的界面和常用功能。 请完成下面的任务： 任务一：使用 VSCode 软件，新建网页，将其改为 html 格式。（3 分） 任务二：创建一个 html5 网页，输入“Hello World”。（7 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 3、Web 开发工具：NotePad++ （1）获得软件安装包 访问 NotePad++官方网站获得产品安装包。 地址：https://notepad-plus-plus.org/download/v7.3.3.html （2）安装 双击安装程序开始执行，按照提示完成软件安装。 （3）打开[NotePad++]，如图 1-6 所示。熟悉开发界面和功能。 （4）设置新建文件的类型为 HTML，然后新建文件，输入以下的代码，如图 1-7，并保 存为“beiying.html”。 图 1-6 NotePad++界面 图 1-7 背影网页
Wdb前端开发》实验教学指导/实验一:W开发工具的使用4 (5)用浏览器打开,查看网页效果。 (6)完成下述任务。 任务一:理解HTML5的基本结构,掌握HIML5文档的编写规范,解释HIML的结构。(5 分) 任务二:解释h1标记、hr标记、p标记以及它们属性的含义。(5分) 要求 请将上述实验任务的实验结果,填写到实验报告册中 4、设置body标记属性改变网页显示效果 设置body标记属性可以改变网页的显示效果。主要属性有: bgcolor、 background、text link、 alink、 vlink、 topmargin、 leftmargin (1)新建HTML文件; (2)给body添加相关属性,代码如图1-8所示。 D字工数计动 的W的若开其导01一1W的开加的用素时o a工M运行阳描|口 日。品|D2|{国日因国一翻是 背影》是现代作家朱自清(a行于1925年所写的一篇国忆性散文,这篇数文叙述 图1-8body属性的应用 (3)请完成下面的任务 任务一:设置网页的背景色为白色,字体为黑色。(5分) 任务二:描述 bgcolor、 background、text、link、 alink、link、 topmargin、 leftmargin属性的含 义。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 1、完成新闻页面的开发 (1)新闻页面如图1-9所示。 (2)完成下述任务 任务一:完成新闻页面的设计。(10分) 任务二:完成新闻页面的开发。(10分) 要求 请将完成上述任务的步骤,填写到实验报告册中。 本讲共计5页|当前第4页
《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 本讲共计 5 页 | 当前第 4 页 （5）用浏览器打开，查看网页效果。 （6）完成下述任务。 任务一：理解 HTML5 的基本结构，掌握 HTML5 文档的编写规范，解释 HTML 的结构。（5 分） 任务二：解释 h1 标记、hr 标记、p 标记以及它们属性的含义。（5 分） 要求： 请将上述实验任务的实验结果，填写到实验报告册中。 4、设置 body 标记属性改变网页显示效果 设置 body 标记属性可以改变网页的显示效果。主要属性有：bgcolor、background、text、 link、alink、vlink、topmargin、leftmargin。 （1）新建 HTML 文件； （2）给 body 添加相关属性，代码如图 1-8 所示。 （3）请完成下面的任务： 任务一：设置网页的背景色为白色，字体为黑色。（5 分） 任务二：描述 bgcolor、background、text、link、alink、vlink、topmargin、leftmargin 属性的含 义。（5 分） 要求： 请将上述任务的操作方法，填写到实验报告册中。 六、自主实验步骤（20 分） 1、完成新闻页面的开发 （1）新闻页面如图 1-9 所示。 （2）完成下述任务。 任务一：完成新闻页面的设计。（10 分） 任务二：完成新闻页面的开发。（10 分） 要求： 请将完成上述任务的步骤，填写到实验报告册中。 图 1-8 body 属性的应用
Wdb前端开发》实验教学指导/实验一:W开发工具的使用5 我校大学生积极参加无偿献血活动 信息宋源:校团委发布时间:2017-04-21已访间:276次 献血献爱心,血浓情更浓,为响应河南省红十字血液中心号召,缓解临床医疗用血压 月18日至19日,我校大学生社团联合会联合第一临床医学院微尘爱心社、药学院爱满校园感恩自强互助 会于杳苑餐厅前举办无偿献血活动,该活动得到了广大师生的积极响应和广泛支持 活动前期,无偿献血志愿者们通过海报,展板,微信、QQ及现场咨询等多种方式对无偿献血话动进 行宣传和动员。活动当天,炎热的天气并不能阻挡师生们率献爱心的脚步,在咨询台,领表处,化 记心行纸体后上年无中 父得5直态的王达了学们心中的,的分简大人本法无密直活 动共持续两天,献血人数7 点点凿滴热血浓,人道博爱处处情,本次活动不仅暖解了医疗用血的紧张状况,更展现了我校大学 生无私奉献的优良品质和高度的社会责任感。(圆稿/摄影:刘钰博,林亮 准备献血的同学领表咨询 图1-9新闻页面设计稿 七、思考及问答(20分) 1、web开发工具众多,如何选择合适的工具,作为日常学习工作的主要工具?(5分) 2、HTML5文件的基本结构是什么?(5分) 3、HTML头部head标记所包含的信息会显示在网页上么?可以包含哪些标记?(5分) 4、描述HTML的语法格式?(5分) 本讲共计5页|当前第5页
《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 本讲共计 5 页 | 当前第 5 页 七、思考及问答（20 分） 1、Web 开发工具众多，如何选择合适的工具，作为日常学习工作的主要工具？（5 分） 2、HTML5 文件的基本结构是什么？（5 分） 3、HTML 头部 head 标记所包含的信息会显示在网页上么？可以包含哪些标记？（5 分） 4、描述 HTML 的语法格式？（5 分） 图 1-9 新闻页面设计稿