Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 单元5 制作非遗活动详情页面-CSS 基础_第1页
Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 单元5 制作非遗活动详情页面-CSS 基础_第2页
Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 单元5 制作非遗活动详情页面-CSS 基础_第3页
Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 单元5 制作非遗活动详情页面-CSS 基础_第4页
Web前端开发技术项目教程（HTML5 CSS3 JavaScript）（微课版）-教案 单元5 制作非遗活动详情页面-CSS 基础_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

PAGE1《Web前端开发技术》课程教案适用专业：授课班级：授课教师：编制日期：

教案名称单元5制作非遗活动详情页面—CSS基础计划学时4学时本次授课类型□理论□实验☑理实一体□实训□实习教学目标知识目标1.掌握CSS基本语法，能正确编写CSS语句。

2.理解CSS选择器的作用及使用方法。

3.掌握文本字体样式的设置方法。

4.学习文本精细排版的技巧。能力目标1.能够在网页中正确引入CSS代码。

2.能够使用CSS美化网页头部和正文区域。

3.能够制作并美化非遗活动详情页面。素质目标1.培养用户导向的设计思维。2.提升网页审美能力和艺术修养。3.培养精益求精的职业素养。思政目标1.激发学生对传统文化的兴趣，增强文化自信。

2.培养学生团队协作和沟通能力。教学重点1.CSS基本语法与选择器的使用。

2.文本字体样式和精细排版的实现方法。教学难点1.CSS选择器的灵活运用。2.多浏览器兼容性问题处理。3.响应式设计的初步实践。教学设计思路教学效果及改进思路绝大部分学生能够掌握本项目中的知识点和技能，针对个别接受程度较慢的学生，可结成班上的学习小组，一对一的帮扶，努力做到每名学生不掉队。学生在线上预习环节的完成度不是100%，为了让他们更积极主动的做好课前准备，可以适当提高这部分的考评比率，在课上有更多的奖励手段。教学实施过程要有详细教学环节，从主要教学内容、师生活动、信息化资源、教学方法等方面进行撰写备注一、课前自主学习（一）教师发布预习任务：观看智慧职教《前端技术开发》MOOC课程里的单元5的相关微课视频，完成在线测试。（二）学生主动完成预习任务，系统整理需要深化的知识模块。（三）教师精准识别学习薄弱环节，开展有针对性的线上助学活动，确保教学起点公平一致。二、课上探究学习（一）情境引入，任务导入通过前期的学习，小新已经掌握了网页内容搭建的基础技能，但在实际制作非遗网站时发现，自己设计的页面在美观度和用户体验方面与主流网站存在明显差距。为了提升网页质量，小新决定通过学习CSS技术来优化页面样式，包括调整字体颜色、段落间距等视觉效果。为此，他制定了分阶段的任务规划：首先设计完整的非遗活动详情页面框架；接着通过CSS美化页面头部区域的字体样式；然后对正文部分的文本进行精细排版；最终完成整个页面的制作与美化，从而打造出更具吸引力和专业感的非遗网站页面。（二）任务1CSS基础与选择器（1课时）1.任务描述2.任务准备打开Axure，建立非遗活动详情页面原型，设计页面。根据任务描述给出以下3种版式设计版式设计1:左上区域为当前位置区域，中间靠上区域是标题区域，中间部分显示正文，右下区域显示编辑部信息。页面上的图片可以放在正文中间显示。非遗活动详情页面版式设计1如所示。版式设计2:页面上的图片放在正文下面显示，一行显示多张图片。非遗活动详情页面版式设计2如图所示。版式设计3:正文内容只显示文字。非遗活动详情页面版式设计3如图所示。3.任务实施1.主要内容：根据要求进行操作。2.师生活动：教师提供操作检查清单，指导学生进行自我评估。学生对照清单检查操作结果，完善实践报告。3.教学方法：采用案例教学法，分析典型工作案例，引导学生举一反三。任务2CSS字体样式—美化非遗活动详情页面头部区域（1课时）1.任务描述设置网页文字的样式。非遗活动详情页面头部区域的网页效果如图所示2.任务准备(1)了解CSS基本语法如下selector<{>property:value;property:value。(2)了解CSS基本选择器：类选择器、id选择器、标记选择器。(3)了解CSS复合选择器：交集选择器、并集选择器、包含选择器。(4)了解CSS代码的四种方式：链入外部样式表、导入外部样式表、内部样式表、行内样式表。(5)了解字体样式的设计。(6)了解文本对齐方式。3.任务实施1.主要内容：(1)创建新网页文件。打开HBuilderX，在非遗项目站点中创建网页文件。(2)在<body></body>标记之间创建网页元素。(3)使用内部样式表引人CSS代码。在当前编辑的网页文件头部插人{<}style{>}{<}/style{>}标记，设置type属性。(4)设置当前位置信息和标题区域的文字样式。2.师生活动：教师建立学习小组，安排组长协助指导组员练习。学生互帮互助，共同完成实践任务。3.教学方法：运用模拟仿真教学，通过虚拟实训平台强化操作技能。任务3精细排版文本—美化非遗活动详情页面正文区域（1课时）1.任务描述非遗活动详情页面的正文区域使用{<}p{>}标记和{<}span{>}标记来创建HTML内容，使用CSS来设置正文的字体样式，并进行文本的精细排版，包括段落首行缩进、段落的行高、字词间距、文本修饰等。正文区域网页效果如图所示。2.任务准备(1)了解文本缩进中文正文段落的排版习惯是将每个段落的首行缩进(2)了解行高调整。可以使用CSS属性lime-height控制行高、调整行间距。(3)文本修饰主要包括给文字添加下划线、删除线、上划线等。(4)了解字间距跟词间距。3.任务实施1.主要内容：(1)创建新的网页文件。(2)在网页文件主体中创建多个正文段落和“编辑部”段落。(3)设置正文段落的字体大小为20像素，首行缩进两个字符、调整行高为1.5借。(4)设置“编辑部”段落的文本对齐方式为向右对齐。该段落为特殊段落，在该段落元素的HTML标记中设置id属性为edit。非遗活动详情页面正文区域参考代码如下。2.师生活动：教师组织技能竞赛活动，评选优秀操作案例。学生参与竞赛展示，互相观摩学习。3.教学方法：采用工作过程导向教学法，按照行业标准流程设计实践环节。任务4制作并美化非遗活动详情页面（1课时）1.任务描述按照网页的设计,可以适当增加图片使网页更加美观,非遗活动详情页面效果如图。2.任务准备(1)在CSS中，设置透明度主要有以下4种方式：使用opacity属性设置透明度、使用rgba()设置透明度、使用hsla()设置透明度、使用filter属性设置透明度。(2)了解CSS五种选择器：关系、属性、伪类、结构伪类、伪元素。3.任务实施1.主要内容：(1)创建网页文件打开HBuilderX，创建非遗活动详情网页(2)设置“编辑部”元素为半透明(3)整合页面头部区域、正文区域，并调试和美化代码。非遗活动详情页面参考代码如下2.师生活动：教师设置分级练习任务，根据学生水平提供差异化指导。学生自主选择练习难度，完成相应实践作业。3.教学方法：运用项目教学法，以完整的工作流程组织教学活动，培养综合实践能力。课后拓展练习1.CSS代码调试方法总结：在网页开发过程中，CSS代码调试是确保页面样式正确显示的关键环节。开发者应当优先选择真实浏览器（如Chrome）进行调试，而非仅依赖开发工具内置的预览功能。调试时，可以通过右键点击页面元素并选择"检查"来打开开发者工具。该工具包含两个核心功能面板：Elements面板用于查看和定位HTML代码，会高亮显示当前选中的页面元素；Styles面板则完整展示该元素应用的所有CSS样式，包括浏览器默认样式和开发

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论