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

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案01 《搭建项目开发环境》.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（第2版） 教案01 《搭建项目开发环境》.docx（7页珍藏版）》请在优知文库上搜索。

1、教案20-20学年第学期课程名称：授课教师：职称：开课部门：年月曰教案首页课程名称授课专业班级授课教师职称部门课程类型学位课公共必修保口公共选修课口专业必修课素质拓展必修课口专业选修课口素质拓展选修课非学位课口公共必修课口公共选修课专业必修课口素版拓展必修课口专业选修课口素质拓展选修课课程性质口理论口实践。理论+实践考核方式回考试口考查课程教学总学时数64学分35学情分析大年纪的学生首次正式接触WEB的相关概念，但是在之前的基础课程中学过，*(操作系统、计算机原理、Ifhon编程、,语言编程等相关专业方面基础知识，具备有一定的计算机操作能力，与基础应用知识：并且在日常中大量使用电脑与手机等计算

2、机设备，其中日常生活中也对于网页的使用更是颇多。但对于WEB方面的专业知识没有一个准确、完整的知识体系构建。教学方法谈论法、讲授法、演示法、练习法、抽取法教材名称(H1.K1.5KSS3b前端开发技术作者于丽娜出版社及出版时间人民邮电出版社2021.09弁考书目作者出版社及出版时间教研室意见教研室主任签字：年_一月一日注：表中口选项请打“J”每门课程只需填写一次本表.教案授课帙师班t学时2授课日期教学任务匕搭建项目开发环境授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标素质目标：1,培养学生团队合作精神和精益求精

3、的工匠精神；2 .培养学生编码的规范意识、创新意识；3 .培养学生爱国精神,树立民族自信：4 .培养学生自主学习和解决实际问遨的能力。知识目标：1,了解Web相关概合2 .了解当前主流Ueb浏览器与浏览器分类依据3 .了解HTM1.5的优势能力目标：1.掌握HBUi1.derX、ChrCmP浏览器的安装与使用4 .掌握在HBUi1.derX中进行Web项目的搭建流程教学内容1 .WER概述2 .主流WEB浏览器3 .常用WEB开发工具I.WEB标准5.111M1.5的优势S点魔点教学里点：1. UEB体系2. UEB标准3. 开发环境的搭建教学雉点：1.浏览器的工作原理收学方法谈论法、讲授法.

4、演示法练习法索材贵0文本素材EI实勒展示回PPT幻灯片口音频索材回视频索材EI动i素材团图形，图像素材口网络资源口及他课后作业fE务一：总结提升任务二：能力进阶假学反思注：教案按授课次数地写，毋次授课均应填写份本衣。武红班授沃可不另填写教案,教学过程及内容注解（应包含注意事项、课程思政点融入等）一、导入斫课1的6分*】教师；同学的，我是大家这学期WCb前湍开发这门课程的教师3很荣幸能和大家一起学习这门课程的知识.接下来我们来一起学习本课程的第一章节一一搭建顶F1.开发环境，本任务我们要学习HBuiIderX开发工具的安装和使用。安装HBUikkrX是款国产软件,是非常优秀的HTM1.5前端开发

5、工具.HB1.nkierX让我们看到了国产编辑器的用光,布里同学们努力学习学成知识.报效祖国.我们把HBui1.derX作为网页代码的编辑工具：安装Chrome浏览器作为网页效果测试工具：并在搭建好的开发环境中，端写一个输出“你好，中国”的简单网页项目，验证我们的开发环境毡否搭也成功.最后在开发_具中安装相应的插件，从而提高开发效率。二、新知识点、技能点济解【的X分花】新课讲解1：【约IO分钟】敦帆认识Wcb要先知道什么是Internet,Interna,中文音译名为因特网,正式名称为国际互联网，是所有由使用一定堤则的公用交互语言进行通信的计算机连接而成的巨大全球忖络.所有在互联网中的计算机设

6、备即是网络中的节点，可以和与该节点相连通的节点进行通信，西有附近的节点将信息发送到远推目标节点逐节点传递。从而实现了万物互联，万物互通的互联网，那同学的，你是怎么理解生活中的互联网呢？互联网是什么样子的呢？大家分组一起讨论，之后分享每一组的总结*学生：平时通过百度搜索资料、或者在线聊天、上网课都用到了互联网。互联网是一种网状结构的线.实现了信息通伯.互联网前要有类似路由器的硬件支持，并且得要很多.平时上网会用到域名，也就是网站地址的名字。教师；Web是Internet的一个应用，就是我们日常生活中访问得到各种网站的网贞的集合,他们之间遹过超院接来指引浏览的路径方向.我们在这些内容的指引下.通过

7、各种各样的浏览潺工具进行M络信息的获取的行为.也就是我们常说的网上冲浪。新课讲解2：【约10分仲】教师：我们平时进行网络资料搜索、税领浏览、信息网上提交等活动中，使用到的浏览工具常称为浏览器、用户代理等0那我们平时使用的网页浏览器有哪些？都有什么特点呢？学生：有正浏览器,很早前用帮野姐姐的电脑上,就默认使用ic浏览器.做程序员的表格用的是一款叫做火狐的浏览器,说是可以用来进行开发测试，程序员都用这款，我的新电脑上默认右款EDGE浏建器,是系统新推出的，用起来和别的浏览器都差不多.还有360浏览器、QQ浏览器教师：在我In网上冲浪的过程中，必在的工具软件就是Web浏览器，常的林浏览潺.我们当前常

8、用到的主流浏览行附款公司的IE浏览,由于是Wmdows系统强制默认安装的浏览器.所以在互联同发展f期垄断了主流浏览器市场。如今Windows1.O中不仅有IE浏览器，还默认安装了微软公司期里用来替代老IH1.E浏览器的的新一代浏览器Edge（经典版）,Mozi1.1.a公司的FircFox浏览器,中文为火狐浏览器,是一个开源的自由的浏览器.谷歌的Chmme,是为了打破由微软统治浏览器的局面而推向市场的款浏览器软件，由谷欲的开源浏览器项目Chraniuin定制开发而来，因内性强大的JaYaSCripV8引然，并且具有简洁、快逑、安全的特点，迅速占领了当前浏览器市场的绝对份额一跃成为当前的浏览器行

9、业领导者.除了上述的几款主流浏览器，我们H常使用中还有360极速浏览器、QQ浏览器、百度浏览器、搜狗浏览器、OpCTa浏览器、百分浏览器等等。这些浏览潺大多是基础Chromium的内核进行本土化之后的产品，给特定用户群体提供一些专用功能.其功能、界面外观、实际悚作上与ChrCme浏览器权本一致，并旦均支持安装Chmme原生的插件，新课讲解3：（重点/难点）【的IO分忡】教师：俗话说：”工欲怦其少必先利其器”，要进行网页开发也是一样的，选择一款好的开发工具是非常必要的。Ur以开发网页的工具非常多，我们该如何选择开发“利涔”呢？这里有主流的几款开发工具推荐给大家Sub1.imeText.VSCod

10、e.HBuiIdcrX.Hbui1.dcrX是一款国产的代码编辑工具，是DCIoiKi（数字天堂）推出的一欷支持HTM1.5的Web开发IDEHBuiIderX的编写用到了Java、C,Wcb和Ruby.HBuiIdcrX本身主体是由JaVa编写,它基于EdiPSc.所以顷共自然地孜容了FdiPMi的插ft.快，是HBUi1.dCrX的坡大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTM1.、js、CSS的开发效率.新课讲解4：【约15分仲】教师：HTM1.文件就是我们在浏览器中通过输入网址，从服务器获取到的内容的载体.页面中可以包含文字、图片、音领、视短等信息均是由HTM1.为

11、我In提供.通俗地讲，我们上网的过程就是在不同HTM1.页面之间跳转浏览的过程.不同浏览那之间想要得到相同或近似的效果.就需要能膨对HTM1.文件的解析统一化标准化，居么对应的标准姑什么？Web标很，并不是一个单一的标准，是由一系列标准殂成的桀合，网页I嗓是由三部分组成一一HTM1.,即页面结构标准：CSS,即负面祥式标准：Javascript.即页面行为标准.这些标准的起草、制定与发布.通常由万维网联盟(W3C)或者类似的组织进行.HTM1.5标准是在HTMU蛆础上的扩展，其中新标准添加了大麻的语义化标签，让代码含义更明确，便于搜索引倏解析识别，也便于开发者合理划分页面结构,提高代码可读性.

12、HTM1.5的标准中，将大修需要配合javascript脚本实现的动态交互效果，数据处理和多燃体搔放功能，都包含到了HTM1.5标准之中,使得促使浏览揖厂商将这些功能在浏览潺中实现.降低了开发者的开发难度.还将之前一些繁琐的设定内容简化.HTM1.5的优势不仅仅体现在网页中,如今大房的嵌入式设备的开发框架中，或完全引入或借称改良HTM1.标准来行应用页面的设计与实现。例如火爆的微信小程序，网易云音乐，迅缶等等.新课讲斛5；【约15分钟】教师；演示操作上机仔务-安装Chn)me浏览器学生:跟做新课讲斛6：【约15分钟】数师：演示操作上机任务安装HBuiIderX开发IDE学生:跟做新课讲斛7：【约15分钟】教师：演示操作上机任务-使用HBui1.dcrX创建项目学生：跟做三、教学总结【的5分立】本单元主要概述了Web的概念，然后讲述了主流的浏览器，Wcb标准以及HTM1.5标准的优势.并且完成新云课堂项目开发环境的搭建,包括浏览器的安装和HBui1.dcrX的安装和使用.通过本单元的学习，读者应该了解主流浏览器和HBuiIdcrX的基本使用方法，能婚用IIBui1.derX创建Web项目，为后面章节的学习打下基础.四、课后作业【的5分花】1 .整理课程知识笔记2 .搜集H常使用的网页浏览器行哪些，并进行浏览器分类，阐述分类依据及特点。