HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版） 教案01 《搭建项目开发环境》

《》教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月日

《》教案首页课程名称授课专业班级授课教师职称部门课程类型学位课□公共必修课□专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课非学位课□公共必修课专业必修课□素质拓展必修课□公共选修课□专业选修课□素质拓展选修课课程性质□理论□实践理论+实践考核方式考试□考查课程教学总学时数64学分3.5学情分析大*年级的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过***（操作系统、计算机原理、Python编程、C语言编程）等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识；并且在日常中大量使用电脑与手机等计算机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽象法教材名称《HTML5+CSS3Web前端开发技术》作者于丽娜出版社及出版时间人民邮电出版社2021.09参考书目作者出版社及出版时间教研室意见教研室主任签字：年月日注：表中□选项请打“√”。每门课程只需填写一次本表。

《》教案授课教师班级学时2授课日期教学任务《搭建项目开发环境》授课方式讲授实践授课地点多媒体教室实验/实训室□企业主要参考资料教学PPT、微课、动画、思维导图课程思政视频习题等教学目标素质目标：1.培养学生团队合作精神和精益求精的工匠精神；2.培养学生编码的规范意识、创新意识；3.培养学生爱国精神，树立民族自信；4.培养学生自主学习和解决实际问题的能力。知识目标：1.了解Web相关概念2.了解当前主流Web浏览器与浏览器分类依据3.了解HTML5的优势能力目标：1.掌握HBuilderX、Chrome浏览器的安装与使用2.掌握在HBuilderX中进行Web项目的搭建流程教学内容WEB概述主流WEB浏览器常用WEB开发工具WEB标准HTML5的优势重点难点教学重点：WEB体系WEB标准开发环境的搭建教学难点：1.浏览器的工作原理教学方法谈论法、讲授法、演示法、练习法素材资源R文本素材R实物展示RPPT幻灯片□音频素材R视频素材R动画素材R图形/图像素材□网络资源□其他课后作业任务一：总结提升任务二：能力进阶教学反思注：教案按授课次数填写，每次授课均应填写一份本表。重复班授课可不另填写教案。 

教学过程及内容一、导入新课【约5分钟】教师：同学们，我是大家这学期Web前端开发这门课程的教师——**，很荣幸能和大家一起学习这门课程的知识。接下来我们来一起学习本课程的第一章节——搭建项目开发环境。本任务我们要学习HBuilderX开发工具的安装和使用。安装HBuilderX是一款国产软件，是非常优秀的HTML5前端开发工具，HBuilderX让我们看到了国产编辑器的曙光，希望同学们努力学习，学成知识，报效祖国。我们把HBuilderX作为网页代码的编辑工具；安装Chrome浏览器作为网页效果测试工具；并在搭建好的开发环境中，编写一个输出“你好，中国”的简单网页项目，验证我们的开发环境是否搭建成功。最后在开发工具中安装相应的插件，从而提高开发效率。二、新知识点、技能点讲解【约x分钟】新课讲解1：【约10分钟】教师：认识Web要先知道什么是Internet。Internet，中文音译名为因特网，正式名称为国际互联网，是所有由使用一定规则的公用交互语言进行通信的计算机连接而成的巨大全球网络。所有在互联网中的计算机设备即是网络中的节点，可以和与该节点相连通的节点进行通信，再有附近的节点将信息发送到远端目标节点逐节点传递。从而实现了万物互联，万物互通的互联网。那同学们，你是怎么理解生活中的互联网呢？互联网是什么样子的呢？大家分组一起讨论，之后分享每一组的总结。学生：平时通过百度搜索资料、或者在线聊天、上网课都用到了互联网。互联网是一种网状结构的线，实现了信息通信。互联网需要有类似路由器的硬件支持，并且需要很多。平时上网会用到域名，也就是网站地址的名字。......教师：Web是Internet的一个应用，就是我们日常生活中访问得到各种网站的网页的集合。他们之间通过超链接来指引浏览的路径方向。我们在这些内容的指引下，通过各种各样的浏览器工具进行网络信息的获取的行为，也就是我们常说的网上冲浪。新课讲解2：【约10分钟】教师：我们平时进行网络资料搜索、视频浏览、信息网上提交等活动中，使用到的浏览工具，常称为浏览器、用户代理等。那我们平时使用的网页浏览器有哪些？都有什么特点呢？学生：有IE浏览器，很早前用哥哥姐姐的电脑上，就默认使用ie浏览器。做程序员的表格用的是一款叫做火狐的浏览器，说是可以用来进行开发测试，程序员都用这款。我的新电脑上默认有一款EDGE浏览器，是系统新推出的，用起来和别的浏览器都差不多。还有360浏览器、QQ浏览器......教师：在我们网上冲浪的过程中，必备的工具软件就是Web浏览器，常简称浏览器。我们当前常用到的主流浏览器有微软公司的IE浏览器，由于是Windows系统强制默认安装的浏览器，所以在互联网发展早期垄断了主流浏览器市场。如今Windows10中不仅有IE浏览器，还默认安装了微软公司期望用来替代老旧IE浏览器的的新一代浏览器——Edge（经典版）。Mozilla公司的FireFox浏览器，中文为火狐浏览器，是一个开源的自由的浏览器。谷歌的Chrome，是为了打破由微软统治浏览器的局面而推向市场的一款浏览器软件，由谷歌的开源浏览器项目Chromium定制开发而来，因内置强大的JavaScriptV8引擎，并且具有简洁、快速、安全的特点，迅速占领了当前浏览器市场的绝对份额，一跃成为当前的浏览器行业领导者。除了上述的几款主流浏览器，我们日常使用中还有360极速浏览器、QQ浏览器、百度浏览器、搜狗浏览器、Opera浏览器、百分浏览器等等。这些浏览器大多是基础Chromium的内核进行本土化之后的产品，给特定用户群体提供一些专用功能。其功能、界面外观、实际操作上与Chrome浏览器基本一致，并且均支持安装Chrome原生的插件。新课讲解3：（重点/难点）【约10分钟】教师：俗话说：“工欲善其事必先利其器”，要进行网页开发也是一样的，选择一款好的开发工具是非常必要的。可以开发网页的工具非常多，我们该如何选择开发“利器”呢？这里有主流的几款开发工具推荐给大家——SublimeText、VSCode、HBuilderX。HbuilderX是一款国产的代码编辑工具，是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilderX的编写用到了Java、C、Web和Ruby。HBuilderX本身主体是由Java编写，它基于Eclipse，所以顺其自然地兼容了Eclipse的插件。快，是HBuilderX的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。新课讲解4：【约15分钟】教师：HTML文件就是我们在浏览器中通过输入网址，从服务器获取到的内容的载体。页面中可以包含文字、图片、音频、视频等信息均是由HTML为我们提供。通俗地讲，我们上网的过程就是在不同HTML页面之间跳转浏览的过程。不同浏览器之间想要得到相同或近似的效果，就需要能够对HTML文件的解析统一化标准化，那么对应的标准是什么？Web标准，并不是一个单一的标准，是由一系列标准组成的集合。网页主要是由三部分组成——HTML，即页面结构标准；CSS，即页面样式标准；Javascript，即页面行为标准。这些标准的起草、制定与发布，通常由万维网联盟（W3C）或者类似的组织进行。HTML5标准是在HTML4基础上的扩展，其中新标准添加了大量的语义化标签，让代码含义更明确，便于搜索引擎解析识别，也便于开发者合理划分页面结构，提高代码可读性。HTML5的标准中，将大量需要配合javascript脚本实现的动态交互效果，数据处理和多媒体播放功能，都包含到了HTML5标准之中。使得促使浏览器厂商将这些功能在浏览器中实现，降低了开发者的开发难度。还将之前一些繁琐的设定内容简化。HTML5的优势不仅仅体现在网页中，如今大量的嵌入式设备的开发框架中，或完全引入或借鉴改良HTML标准来进行应用页面的设计与实现。例如火爆的微信小程序，网易云音乐，迅雷等等。新课讲解5：【约15分钟】教师：演示操作上机任务-安装Chrome浏览器学生：跟做新课讲解6：【约15分钟】教师：演示操作上机任务-安装HBuilderX开发IDE学生：跟做新课讲解7：【约15分钟】教师：演示操作上机任务-使用HBuilderX创建项目学生：跟做教学总结【约5分钟】本单元主要概述了Web的概念，然后讲述了主流的浏览器，Web标