《网页设计与 Web 前端开发》教案 第3周 HTML常用标签（前4小节）_第1页
《网页设计与 Web 前端开发》教案 第3周 HTML常用标签（前4小节）_第2页
《网页设计与 Web 前端开发》教案 第3周 HTML常用标签（前4小节）_第3页
《网页设计与 Web 前端开发》教案 第3周 HTML常用标签（前4小节）_第4页
全文预览已结束

下载本文档

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

文档简介

《网页设计与Web前端开发》电子教案（第3周）一、教学基本信息​​课程名称​​：网页设计与Web前端开发​​教学课时​​：理论2学时+实践1学时​​授课对象​​：计算机相关专业学生/Web前端开发初学者​​教材章节​​：第3章HTML常用标签（前4小节）二、教学目标（一）知识目标了解CSS样式表的概念、功能及发展历程（CSS1.0至CSS3）。掌握CSS样式的声明方法（基本语法：选择器{属性：值；}）。掌握CSS的3种应用方式（内部样式表、外部样式表、内联样式表）及导入外部样式表的方法。理解并应用常见选择器（标签、类、ID、组合、后代选择器）。掌握盒模型的组成（内容、内边距、边框、外边距）及相关属性（border、padding、margin）。掌握列表标签（无序列表、有序列表、定义列表）的样式设置（list-style-type/image/position）。理解元素分类（块元素、行内元素、行内块元素）的特征及类型转换（display属性）。（二）思政目标理解标准化、规范化在Web开发中的重要性，培养按规范编写代码的习惯。通过CSS与HTML分离的思想，培养“结构与表现分离”的模块化思维。结合盒模型的精确计算，培养严谨细致的工匠精神和逻辑思维能力。三、教学重难点（一）教学重点CSS样式的基本语法及3种应用方式（内部、外部、内联）。类选择器、ID选择器的创建与引用。盒模型的组成及边框、内外边距的设置。块元素与行内元素的区别及转换方法。（二）教学难点后代选择器与子元素选择器的区别及应用场景。盒模型的宽高计算（内容宽高+内边距+边框+外边距）。外边距合并现象（垂直相邻元素、父子元素）及解决方案。元素类型转换（display属性）的实际应用（如行内元素设置宽高）。四、教学方法讲授法：系统讲解CSS语法、选择器、盒模型等理论知识。案例演示法：结合教材示例（如例3-1至例3-25），实时演示代码效果，对比修改前后的页面变化。对比分析法：对比不同选择器的优先级、块元素与行内元素的特征差异。任务驱动法：实践课通过具体任务（如设置盒模型样式、转换元素类型）强化应用能力。五、教学过程（一）第一学时：CSS基础与选择器（40分钟）导入（5分钟）回顾HTML的局限性（如样式与结构混合，修改繁琐），提问：“如何高效统一网页样式？”引出CSS的作用——“分离结构与表现”。展示例3-1效果：用CSS设置页面文字颜色和段落缩进，对比纯HTML实现的繁琐性，突出CSS优势。CSS概念与基本语法（10分钟）讲解CSS定义：层叠样式表（CascadingStyleSheets），用于控制网页元素的外观（字体、颜色、布局等）。基本语法：选择器{属性:值;属性:值;}，例如：p{color:blue;text-indent:2em;}。语法规则：属性与值用冒号连接，多属性用分号分隔；值为多单词时加引号（如font-family:"MicrosoftYaHei";）。CSS的3种应用方式（15分钟）内部样式表：在<head>中用<style>标签定义，作用于当前页面。外部样式表：创建.css文件，用<link>标签引入，作用于多个页面（推荐用于多页面网站）。内联样式表：在HTML标签中用style属性定义，仅作用于当前元素（不推荐大量使用）。导入外部样式表：在<style>中用@import导入，注意需放在样式声明前。常见选择器（10分钟）标签选择器：以HTML标签名作为选择器（如p{...}控制所有段落）。类选择器：以.类名定义，通过class属性引用（如.red{color:red;}，<pclass="red">）。ID选择器：以#ID名定义，通过id属性引用（唯一标识，如#title{font-size:20px;}）。组合选择器：用逗号分隔多个选择器（如p,li{line-height:1.5;}同时控制段落和列表项）。后代选择器：用空格分隔父子选择器（如divp{color:gray;}控制div内的所有p元素）。（二）第二学时：盒模型、列表样式与元素分类（40分钟）复习导入（5分钟）抽查学生对选择器的掌握：“如何定义一个类选择器.box，使元素背景为灰色？”引出本节课重点：如何通过CSS控制元素的布局（盒模型）、列表样式及元素排列方式。盒模型（15分钟）概念：所有HTML元素均可视为“盒子”，由4部分组成：内容（content）：元素的文本或图像（宽高由width/height定义）。内边距（padding）：内容与边框的距离（padding:10px;）。边框（border）：盒子的边框（border:1pxsolid#000;）。外边距（margin）：盒子与其他元素的距离（margin:20px;）。盒模型宽高计算：总宽=左外边距+左边框+左内边距+width+右内边距+右边框+右外边距（高度同理）。案例演示：例3-4（div盒模型），通过浏览器开发者工具查看盒模型参数（如图3-4）。列表样式（10分钟）无序列表（<ul>）：用list-style-type设置项目符号（disc、circle、square）。有序列表（<ol>）：用list-style-type设置序号（decimal、upper-alpha等）。自定义列表样式：用list-style-image设置图片作为项目符号（如list-style-image:url("dot.png");）。案例：例3-19（无序列表商品分类）、例3-20（有序列表序号类型）。元素分类及转换（10分钟）块元素：独占一行，可设置宽高（如div、p、h1）。行内元素：不独占一行，不可设置宽高（如span、a、em）。行内块元素：同行显示，可设置宽高（如img、input）。类型转换：用display属性（block/inline/inline-block/none）。案例：例3-23（块元素默认排列）、例3-25（行内块元素布局）。（三）实践学时：CSS综合应用（40分钟）任务布置（5分钟）目标：完善“环保小站”页面样式，具体任务：用外部样式表统一设置页面背景色（#f5f5f5）、段落文字大小（14px）。定义类选择器.box，设置边框（1pxsolid#ccc）、内边距（20px）、外边距（10pxauto）、宽度（500px）。将无序列表（环保主题分类）的项目符号改为自定义图片（list-style-image）。将行内元素<span>转换为块元素，设置宽高（100px）和背景色（lightblue）。学生实践（30分钟）学生分组操作，教师巡回指导，重点解决：外部样式表路径引用错误（如href路径不正确导

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

温馨提示

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

最新文档

评论

0/150

提交评论