HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版）教案全套 1--12 搭建项目开发环境--- 使用CSS3媒体查询实现页面响应式.docx

《HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版）教案全套 1--12 搭建项目开发环境--- 使用CSS3媒体查询实现页面响应式.docx》由会员分享，可在线阅读，更多相关《HTML5 CSS3Web前端开发技术（任务式）（微课版）（于丽娜第2版）教案全套 1--12 搭建项目开发环境--- 使用CSS3媒体查询实现页面响应式.docx（61页珍藏版）》请在优知文库上搜索。

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前端开发工具.HB1.nki

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

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

7、进行M络信息的获取的行为.也就是我们常说的网上冲浪。新课讲解2：【约10分仲】教师：为我In提供.通俗地讲，我们上网的过程就是在不同HTM1.页面之间跳转浏览的过程.不同浏览那之间想要得到相同或近似的效果.就需要能膨对HTM1.文件的解析统一化标准化，居么对应的标准姑什么？Web标很，并不是一个单一的标准，是由一系列标准殂成的桀合，网页I嗓是由三部分组成一一HTM1.,即页面结构标准：CSS,即负面祥式标准：Javascript.即页面行为标准.这些标准的起草、制定与发布.通常由万维网联盟(W3C)或者类似的组织进行.HTM1.5标准是在HTMU蛆础上的扩展，其中新标准添加了大麻的语义化标签，

8、让代码含义更明确，便于搜索引倏解析识别，也便于开发者合理划分页面结构,提高代码可读性.HTM1.5的标准中，将大修需要配合javascript脚本实现的动态交互效果，数据处理和多燃体搔放功能，都包含到了HTM1.5标准之中,使得促使浏览揖厂商将这些功能在浏览潺中实现.降低了开发者的开发难度.还将之前一些繁琐的设定内容简化.HTM1.5的优势不仅仅体现在网页中,如今大房的嵌入式设备的开发框架中，或完全引入或借称改良HTM1.标准来行应用页面的设计与实现。例如火爆的微信小程序，网易云音乐，迅缶等等.新课讲斛5；【约15分钟】教师；演示操作上机仔务-安装Chn)me浏览器学生:跟做新课讲斛6：【约1

9、5分钟】数师：演示操作上机任务安装HBuiIderX开发IDE学生:跟做新课讲斛7：【约15分钟】教师：演示操作上机任务-使用HBui1.dcrX创建项目学生：跟做三、教学总结【的5分立】本单元主要概述了Web的概念，然后讲述了主流的浏览器，Wcb标准以及HTM1.5标准的优势.并且完成新云课堂项目开发环境的搭建,包括浏览器的安装和HBui1.dcrX的安装和使用.通过本单元的学习，读者应该了解主流浏览器和HBuiIdcrX的基本使用方法，能婚用IIBui1.derX创建Web项目，为后面章节的学习打下基础.四、课后作业【的5分花】1 .整理课程知识笔记2 .搜集H常使用的网页浏览器行哪些，并

10、进行浏览器分类，阐述分类依据及特点。教案20-20学年第学期课程名称：授课教师：职称：开课部门：教案授课帙师班t学时6授课日期教学任务匕制作课程基础页面授课方式Q讲授团实践授课地点团多媒体教室团实验/实训室口企业主要套考资科枚学PpT、做课、动画、思爰课程思政视频习题等导图教学目标索侦目标：1.培养学生诚实守信、团结友善的精神；2 .培养学生责任担当总:识和编码的规范意识.知识目标，1.掌握HTM1.基础谱法3 .掌握IIW1.明础标算4 .掌握语义化结构标签4,了解Hn1.1.5的特点能力目标：1.熟练使用HBUiidCr编写摘单HTM1.页面帙学内容6. Hn1.1.5基础语法7. III

11、M1.5谙义化结构标签8. HRI1.5常用标签9. Hn1.i.5实体字符10. HTM1.5超链接、框架标签11. HTM1.5标笠分类.点点教学重点：4. HTM1.5基础语法5. IMI,5超钺接教学难点:1.HTM1.S标签分类教学方法谈论法、讲授法、演示法、练习法素材资*团文本素材0实物展示EPPT幻灯片口音频素材回觇频素材回动向素材0图形/图像索材口网络资源口其他课后作业任务一：总结提升任务二：能力进阶帙学反思注：教案按授课次数填写,每次按课均应填写一份本表.重红班校课可不另填写教案.注解(应包含注意事%课程思政点融入等一、导入斫课1的6分*】教师；实物标签是用于标明物品的品名、

12、重诉、体积、用途等信息的简要标牌。我们堤个人要树立“标签意识”,把诚实守信当标签,把团结友善当标签.把贲任担当当标签.今天我们学习HTM1.标签，HTM1.标签是HTM1.语言中最基本的单位。HTM1.,全歆HyPeiTeX1.MarkUP1.angUage,即超文本标记语i；,它的主要用途是描述页面，也就是我们认识的页面就是HTM1.我们在浏览器中所看到的页面是通过浏览湍内部的.解析/对HTM1.文件内容的识别与演染的结果.HTM1.也是一种收到广泛认可的网页规范标准，不仅在网页的开发中重要，在嵌入式开发，移动第开发，PC湘开发等场景下，也有广泛的应用。所以鸵握当前最新的HTM1.5标准已成

13、为广大开发者的必品基础技能积土成山,聚沙成塔,我们的网页使用HTM1.作为内容构建而成,通过一个个标签来展示页面内容，通过,个个独立的标锭的嵌套配合.祖成,个内容丰富的网页。做网页的过程就像是搭枳木，HTM1.部分就是需要先搭建的基础枳木,待板架搭建完毕后，再通过CSS为枳木们上色美化，从而完成网页制作.二、新知识点、技能点讲解【的X分龄】新课讲解1：【约20分抻】教师：页面代码中除广文档头剜下的是很多行尖括号包史的内容.这些内容就是HTM1.的核心一一元素标卷).HTM1.标签的诵法是这样的：标记标签内容/标记标记属性=值”标签内容U标记并不是所有的标签的都是通过开始与结束双标记构成的这种元

14、素的语法结构是这样的：嘛记标记属性=值/这种没有标签内容的标记标签.我们称之为单标记标签,是从双标记标型演化而来.因为有些标签功能作用相对简单，并没存标箍内容嵌套，如果按照双标记标签的写法就显野相对繁顼.所以总标记标签可以看作是开始标记与结束标记的组合体：标记X标记/简化出标记f实际开发过程中,也常常用如下方式书写：小记标记属性=4*(r学生：为什么要有两种不同的写法？应该选择那种写法？教师：HTM1.是参考XM1.设计而来,XM1.是一种严格的标记语言.所以严格按照标记语吉i;5法书写，本身就是了让代码更健壮，减少后期因代码风格不统一带来的问超.但实际开发过程中，由于浏览器中对HTM1.代码有一定的纠错能力，单标记标签的司在HTM1.5中，超琏接有3种类型：件通超链接，用来实现页面间跳转:锚点超能接,用来实现页面内跳转：功能超能接.用来实现外部应用谢用或其它功能.链接文本或图像在超钺接中的两个我要国性：属性作用href设定超链接触发之后，浏览器要跳转访问的目标地址.可以是完整H地址或者本地的相时或葩时路径地址。1UR1.target设定超