Web前端开发》实验教学指导/实验一:V由开发工具的使用1 《Web前端开发》实验教学指导 实验一:Web开发工具的使用 、实验目的(5分) 1、了解Web开发工具的多样性 2、掌握常用的Web开发工具的安装和使用方法 3、掌握HTML5文档的结构以及HIML文件命名规范: 4、掌握编写简易的HIML文件 5、掌握body标记的属性以及使用方法。 、实验环境(5分) 1、 Windows10操作系统的计算机 2、局域网网络环境,并且使用固定IP地址。 、实验要求(5分) 1、完成web开发工具的安装,并掌握基本的使用方法; 2、完成HTML文件的编写,并掌握HIML文档的结构; 3、完成body标记属性的设置,改变网页显示效果 四、实验原理(5分) 1、 Adobe Create Suite6的安装和使用; 2、 VSCode的安装和使用 3、 NotePad的安装和使用 4、HIML5文档结构及语法; 五、实验步骤(40分) 1、Web开发工具: Adobe Creative Suite@cs6 Design& Web premiun (1)获得软件安装包 访问 Adobe官方网站获得 Adobe Creative Suite(R CS6 Design& Web premium 地址:htp/www.adobecom/cn/downloads/ (2)安装 名称 对下载的程序安装包解压缩,得到安装程序,执行 Set-up]文件,开始安装。如图1-1所示 选择试用],以产品试用的模式开始进行产品安装。如 1-2所示。 a Set-up 图1-1执行安装程序 本讲共计5页|当前第1页
《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 1 本讲共计5页 | 当前第1页 《Web 前端开发》实验教学指导 实验一：Web 开发工具的使用 一、实验目的（5 分） 1、了解 Web 开发工具的多样性； 2、掌握常用的 Web 开发工具的安装和使用方法； 3、掌握 HTML5 文档的结构以及 HTML 文件命名规范； 4、掌握编写简易的 HTML 文件； 5、掌握 body 标记的属性以及使用方法。 二、实验环境（5 分） 1、Windows 10 操作系统的计算机； 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所示 必使Ate的亚景 建Adb自 安装 的地证将存储在备上 试用,一 图1-2选择产品试用 图1-3使用 Adobe id登录 选择需要安装的组件,建议选择[ Adobe dreamweaver cs6、[ Adobe fireworks cs6]、[ Adobe Illustrator CS6]、[ Adobe Photoshop Cs6]四项。可以根据自己的需要进行定义。如图1-4所示 等待软件安装完成,如图1-5所示。 选项 安装 当正在警 Minion vrml C+xd 口 上一 图1-4选择安装的软件组件 图1-5等待程序安装完成 (3)打开 Adobe Dreamweaver cs6,熟悉软件的界面和常用功能。 请完成下面的任务 任务一:设置工作区布局为编码人员(高级)]模式。(5分 任务三:在DW中新建一个网站,网站名称为我的第一个网站]。(5分) 要求 请将上述任务的操作方法,填写到实验报告册中。 2、Web开发工具: VSCode (1)获得软件安装包 访问Ⅴ SCode官方网站获得产品安装包。 地址:htts/ ode visualstudio. com/ (2)安装 双击安装程序开始执行,按照提示完成软件安装 本讲共计5页|当前第2页
《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 2 本讲共计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，熟悉软件的界面和常用功能。 请完成下面的任务： 任务一：设置工作区布局为[编码人员（高级）]模式。（5 分） 任务三：在 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分) 任务二:创建一个htm5网页,输入“ Hello world”。(7分 要求 请将上述任务的操作方法,填写到实验报告册中。 3、Web开发工具: NotePad++ (1)获得软件安装包 访问 NotePad++官方网站获得产品安装包 tttie:https://notepad-plus-plus.org/download/v7.3.3.html (2)安装 双击安装程序开始执行,按照提示完成软件安装 (3)打开[ Note Pad++],如图1-6所示。熟悉开发界面和功能。 度5)税N语离()设量工()M运行(播件? Gk酯|2c|曲制|考增国日|1国国画田最 baek after nodi Eying o: deleting a douane I Se:010 图1-6 Note Pad++界面 (4)设置新建文件的类型为HIML,然后新建文件,输入以下的代码,如图1-7,并保 存为“ beiying. html” |4DD|曲考团西国国口图图册最 ctte>欢迎使用otPd+编写网頁/t1》 三计号发浮x2奖 图1-7背影网页 本讲共计5页|当前第3页
《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 3 本讲共计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前端开发》实验教学指导/实验一:Wb开发工具的使用4 (5)用浏览器打开,查看网页效果 (6)完成下述任务 任务一:理解 HTML5的基本结构,掌握 HTML5文档的编写规范,解释HIML的结构。(5 分) 任务二:解释h标记、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、 vlink、 topmargin、 leftmargin属性的含 义。(5分) 要求: 请将上述任务的操作方法,填写到实验报告册中。 六、自主实验步骤(20分) 1、完成新闻页面的开发 (1)新闻页面如图1-9所示 (2)完成下述任务 任务一:完成新闻页面的设计。(10分) 任务二:完成新闻页面的开发。(10分) 要求: 请将完成上述任务的步骤,填写到实验报告册中。 本讲共计5页|当前第4页
《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 4 本讲共计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前端开发》实验教学指导/实验一:Wb开发工具的使用5 我校大学生积极参加无偿献血活动 信息来源:校团委发布时间:2017-04-21已访间:276次 献血献爱心,血浓情更浓,为响应河南省红十字血液中心号召,缓解临床医疗用血压力,2017年 月1自日至19日,我校大学生社团联合会联合第一临床医学院微尘爱心社,药学院爱满校园感恩自强互助 该活动得到了广大师生的积极响应和广泛支持 行 宣传和动员,活动当天,炎热的天气并不能阻挡师生们奉献爱心的脚步,在音询台,领表处,化验处 献血车前,等待的同学们在志愿者的安排下排起了长队,首先了解注意事项,填写健康征询表和献血 登记表,然后进行健康征询、体检、血液检测,最后登上献血车,进行无偿献血,采血结束后,血液中 心为献血问学颁发无献血证,赠送爱心小礼物以作纪念,当同及同学们为什么要来献血时,来 学院2016级汉语国际教育本科班的王春晓同学说:“当想到自己率献的爱心能够为他人带去平安健康 就感量特别值得。”朴实的语言,表达出了同学们心中真蒙的情感,诠释了人间大爱。本次无偿献血活 动共持续两天,献血人数721人,献血量211400c0 点点滴滴热血浓,人道博爱处处情,本次活动不仅缓解了医疗用血的紧张状况,更展现了我校大学 生无私奉献的优良品质和高度的社会责任感,(演稿/摄影:刘钰博,林亮 准备献血的同学领表咨询 图1-9新闻页面设计稿 七、思考及问答(20分) 1、Web开发工具众多,如何选择合适的工具,作为日常学习工作的主要工具?(5分) 2、HTML头部head标记所包含的信息会显示在网页上么?可以包含哪些标记?(5分) 3、列举三个以上行内元素以及三个以上的块级元素? 本讲共计5页|当前第5页
《Web 前端开发》实验教学指导 / 实验一：Web 开发工具的使用 5 本讲共计5页 | 当前第5页 七、思考及问答（20 分） 1、Web 开发工具众多，如何选择合适的工具，作为日常学习工作的主要工具？（5 分） 2、HTML 头部 head 标记所包含的信息会显示在网页上么？可以包含哪些标记？（5 分） 3、列举三个以上行内元素以及三个以上的块级元素？ (10 分) 图 1-9 新闻页面设计稿