《网页设计与制作案例教程（第2版） 》教案 第5课 HTML5与CSS3基础（一）_第1页
《网页设计与制作案例教程（第2版） 》教案 第5课 HTML5与CSS3基础（一）_第2页
《网页设计与制作案例教程（第2版） 》教案 第5课 HTML5与CSS3基础（一）_第3页
《网页设计与制作案例教程（第2版） 》教案 第5课 HTML5与CSS3基础（一）_第4页
《网页设计与制作案例教程（第2版） 》教案 第5课 HTML5与CSS3基础（一）_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

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

文档简介

第课HTML5与CSS3基础第课HTML5与CSS3基础（一）5（一）HTML5与CSS3基础（一）HTML5与CSS3基础第课5PAGE4PAGE4PAGE5PAGE55第5第课HTML5与CSS3基础（一） 课题HTML5与CSS3基础（一）课时2课时（90min）教学目标知识技能目标：（1）认识HTML5（2）了解HTML5的基本语法（3）熟悉HTML5文档结构（4）能够使用DreamweaverCC设置网页内容思政育人目标：（1）掌握网页制作语言的基础知识，学习语法规则，养成良好的工作习惯。（2）练习制作网页，培养自己的钻研精神。教学重难点教学重点：HTML5文档结构教学难点：使用DreamweaverCC设置网页内容教学方法情景模拟法、问答法、讨论法、练习法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：传授新知（28min）课堂抢答（10min）第2节课：任务实施（25min）

实践探索（15min）

课堂小结（3min）

作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP，查阅资料，了解HTML5【学生】按照教师要求完成课前任务通过课前的预热，让学生了解所学软件，激发学生的学习欲望考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况问题导入

（5min）【教师】提出以下问题：你知道什么是HTML吗？HTML5又是什么？【学生】聆听、思考、举手发言通过问题导入，引导学生思考，调动学生的主观能动性，了解本节课要学习的内容传授新知

（28min）【教师】通过学生的发言，引入新的知识点，介绍HTML5的基本语法和文档结构一、HTML5简介【教师】展示利用HTML编写的网页，帮助学习理解使用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统。浏览器能够识别并解析这些文档。HTML在20世纪90年代发展迅速，从HTML2.0版本发展到3.2版本、4.0版本，再到4.01版本。在这之后，为了拥有更强的功能性与适用性，HTML开始向其他方向演化，发展出了XHTML与XHTML2.0版本，但因为没能取得良好的兼容性而宣告失败。最终，向HTML5的演化取得了成功（详见教材）【教师】提出以下问题：你知道HTML5标签有哪些类型吗？【学生】思考、举手回答HTML5标签主要分为以下几类：双标签、单标签和注释标签。1．HTML5标签的分类【教师】利用多媒体辅助讲解HTML5标签的基本语法格式（1）双标签。双标签是指由开始标签和结束标签组成的标签。基本语法格式：<标签名>内容</标签名>（2）单标签。单标签也称为空标签，基本语法格式为：<标签名/>（3）注释标签。注释标签是HTML5中的一种特殊标签。注释标签的内容不会显示在页面上，但是会保存在页面的源代码中。它的基本语法格式为：<!--注释内容-->（详见教材）【课堂互动】教师提出以下问题：【学生】聆听、思考、举手回答【教师】对学生的回答进行总结2．HTML5标签的属性【教师】利用多媒体辅助讲解HTML5标签的属性在HTML5中，可以根据需要为标签设置属性，如为段落标签设置样式。设置标签属性的语法格式为：<标签名属性1="属性值1"属性2="属性值2">内容</标签名>（详见教材）3．块级标签与行内标签【教师】利用多媒体辅助讲解块级标签与行内标签HTML5中标记内容的标签有块级标签和行内标签之分，它们的特点如下。（1）块级标签的内容在浏览器中显示时独占一行，类似于在其内容首尾各添加了一个换行符。例如，<h1>与<p>标签都是块级标签，使用它们标记的内容将独占一行，且这些标签之后的内容同样也会另起一行。（2）行内标签的内容在浏览器中显示时不能独占一行。若行内标签前后没有块级标签，则它们可显示在同一行中。例如，用于标记斜体的<i>标签就是一个行内标签。（详见教材）【课堂互动】教师提出以下问题：块级标签和行内标签的层级关系是怎样的？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结行内标签中不可以包含块级标签，它只能位于块级标签之内。块级标签既可以包含其他块级标签，也可以包含行内标签。三、HTML5文档结构HTML5使用元素描述页面结构，最基本的HTML5文档结构包括DOCTYPE声明、html元素、head元素与body元素。除此之外，HTML5还提供了一些其他结构元素，用于标记页面的不同区域。【课堂互动】教师提出以下问题：你知道HTML5中的元素是什么意思吗？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结元素是HTML5中常提到的概念，它包括对应的标签及其中的内容。通常情况下，“元素”和“标签”所指的内容相同。例如，p元素和<p>标签都是指“<p>…</p>”。因此，一般不具体区分这两个概念。1．DOCTYPE声明DOCTYPE声明位于文档首行，用于向浏览器说明当前文档使用的标准规范，“<!doctypehtml>”表示当前文档使用HTML5标准。【课堂互动】教师提出以下问题：即使省略DOCTYPE声明，大多数浏览器也能够正确显示文档内容，那还有必要添加DOCTYPE声明吗？【学生】聆听、思考、举手回答【教师】对学生的回答进行总结虽然省略DOCTYPE声明大多数浏览器也能够正确显示文档内容，但是编写网页代码时不应依赖于浏览器的处理，需要保持良好的编写习惯，正确声明文档所使用的标准规范。同理，在使用DreamweaverCC制作网页时，通过可视化操作能够使网页文档的代码自动更新，这种编写代码的方式对于初学者而言简单易上手，但是在熟练之后，建议大家还是尽量手写代码，不要对可视化操作形成依赖。2．html元素【教师】利用多媒体辅助讲解html元素html元素是HTML5文档的根元素，用于告知浏览器自身是一个HTML5文档，<html>标签标志着HTML5文档的开始，</html>标签标志着HTML5文档的结束，它们之间的内容又分为文档的头部和主体内容。（详见教材）3．head元素【教师】利用多媒体辅助讲解head元素head元素用于标记HTML5文档的头部，也称为头部标记，它一般放置在<html>起始标签之后，用于封装其他位于文档头部的标签，这些标签中存储着网页的各种基本信息，可以使浏览器快速解析页面，其中的内容一般不会显示在页面中。【课堂互动】教师提出以下问题：你知道文档头部包含哪些元素吗？【学生】聆听、思考、举手回答【教师】总结学生的回答，并讲解文档头部元素文档头部一般包括以下几种元素。（1）网页标题。使用<title>…</title>标签可以设置网页标题，浏览器会将该标题显示在标题栏或状态栏中。（2）网页元信息。使用<meta/>标签可以标记网页元信息，在其中设置网站的相关属性能够方便搜索引擎检索网页。此外，它还可以标记文档的字符编码，如图3-1中的代码“charset="utf-8"”即表示将网页文档的字符编码设置为“utf-8”。（3）网页视口。网页视口就是浏览器中显示网页页面的那部分区域，通过设置视口的宽度、缩放比例等属性可以使网页适配各种屏幕尺寸的设备。（详见教材）4．body元素body元素用于标记HTML5文档所要显示的内容，也称为主体标记。页面中的所有信息（文本、图像、音频和视频等）都必须写在<body>标签之内。5．其他结构元素【教师】利用多媒体辅助讲解其他结构元素在对网页文档排版时需要将它们放在下列表示结构的元素中，也就是将表示内容的标签装进不同的“容器”中。（1）页眉。表示页眉的元素是header，它用于描述整个页面的标题栏或一个内容块的标题区域。一个页面可以包含多个header元素，它可以包含网站Logo、主导航和搜索框等。（2）导航。表示导航的元素是nav，它用于描述页面导航的链接组。一个页面可以包含多个nav元素，导航性质的链接组都可以放置在nav元素中，如主导航栏或侧边导航栏等。页脚的导航一般不放在该元素中。（3）主要区域。表示主要区域的元素是main，它用于描述一个页面的主要内容。一个页面中只能包含一个main元素。（4）文章块。（5）区块。（6）附栏（侧边栏）。（7）页脚。（详见教材）【学生】聆听、思考、理解、记忆通过讲解、课堂互动等教学方式，让学生了解HTML5的基础知识、基本语法和文档结构课堂抢答（10min）【教师】提出HTML5的结构元素，让学生抢答各组成部分的作用【学生】聆听、抢答、说出HTML5不同结构元素的作用通过课堂抢答加深学生对所学知识的认识，活跃课堂气氛第二节课任务实施

（25min）【教师】演示使用DreamweaverCC在网页中添加元素的操作（1）将素材中的“Sculture.ste”站点附加到DreamweaverCC中。如已创建站点，可用“Sculture”文件夹中的文件替换本地磁盘中站点文件夹中的文件。（2）双击“文件”面板中的“index.html”文件，将其在文档窗口中打开。在代码区域中依次找到<main>→<divclass="sheet_2">→<divclass="essay">→<divclass="con">标签，将鼠标指针置于该标签中，然后打开“插入”面板，单击“标题”按钮左侧的三角按钮，在展开的下拉列表中选择“H1”选项，此时网页文档中自动插入一个<h1>标签，然后将其内容修改为“‘今’（节选）”。（3）使用同样方法，在该标签下方插入一个<h2>标签，修改内容为“李大钊”。（4）在<h2>标签之后按“Enter”键换行，保持插入点的位置，单击“插入”面板中的“段落”按钮，网页文件中自动插入一个<p>标签，将其内容修改为“我以为世间最可宝贵的就是‘今’，最易丧失的也是‘今’，因为他最容易丧失，所以更觉得他可以宝贵。”（5）使用同样方法继续插入3个段落标签，并修改其内容，完成模块的制作。（详见教材）【学生】观察、记录、理解，上机操作【教师】巡堂指导，及时解决学生的问题通过任务实施，让学生们主动参与学习，对使用DreamweaverCC在网页中添加元素的相关操作留下印象，在实践操作的过程中理解、巩固知识点实践探究

（15min）【教师】参照“任务实施”中的操作步骤，使用DreamweaverCC在网页中添加元素，制作“传承经典网”主页中的“伟人诗集”模块【学生】聆听、思考、理解、上机操作【教师】巡堂指导，及时解决学生的问题通过实践探索使学生进一步巩固所学知识课堂小结

（3min）【教师】简要总结本节课的要点本节课学习了HTML的基础知识，熟悉了HTML的基本语法和基本文档结构，并通过实践掌握了使用DreamweaverCC在网页中添加元素的操作。希望大家在课下多加复习，能够熟练地使用DreamweaverCC在网页中添加元素【学生】总结回顾知识点

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

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

最新文档

评论

0/150

提交评论