2.2.4-Web文档设置新建网页的页面属性（教案）-《网页设计与制作》同步教学（电子工业出版社）

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Web文档设置新建网页的页面属性 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 掌握HTML文档的基本结构。 · 学会使用HTML标签设置网页的标题、字符集、背景颜色等页面属性。 · 了解CSS样式表的作用及如何引入到HTML中。 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 · HTML文档的基本结构。 · 使用HTML标签设置页面属性。 · CSS样式表的引入和应用 教学难点 1. 如何合理规划网页布局。 2. CSS样式表的选择器和样式规则。 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析实际案例，让学生掌握设置页面属性的方法。 2. 任务驱动法：布置具体任务，让学生在实践中学习和掌握知识。 3. 小组讨论法：鼓励学生分组讨论，共同解决问题，培养团队协作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 回顾上节课内容，简要介绍HTML和CSS的基本概念。 2. 展示一个简单的网页实例，引导学生观察其页面属性设置。 3. 提出问题：如何设置新建网页的页面属性？ 2分钟 讲授新课 练习指导 HTML（超文本标记语言）是一种用于创建网页的标准标记语言。它使用一系列元素来定义网页的结构和内容。了解HTML文档的基本结构对于创建和设计网页非常重要。以下是HTML文档的基本结构： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网页标题</title> <!-- 在此处插入CSS样式表、JavaScript脚本等 --> </head> <body> <!-- 在此处插入网页内容 --> </body> </html> ``` 1. `<!DOCTYPE html>`: 文档类型声明，告诉浏览器这是一个HTML5文档。 2. `<html lang="zh">`: 根元素，包含整个HTML文档。`lang`属性用于指定文档的主要语言。 3. `<head>`: 包含文档的元数据，如字符集、视口设置、标题等。 4. `<meta charset="UTF-8">`: 定义文档的字符编码为UTF-8。 5. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`: 设置网页的视口，使其适应不同设备的屏幕尺寸。 6.<title>`: 定义网页的标题，显示在浏览器的标签页上。 7. `<body>`: 包含网页的主要内容，如文本、图片、链接等。 在`<head>`元素中，你可以添加CSS样式表、JavaScript脚本等资源。在`<body>`元素中，你可以添加各种HTML元素来创建网页的结构和内容。例如，你可以使用`<h1>`到`<h6>`元素创建标题，使用`<p>`元素创建段落，使用`<img>`元素插入图片，使用`<a>`元素创建链接等。 在HTML中，标题、字符集、背景颜色等页面属性可以通过`<meta>`标签和`<style>`标签来设置。以下是一些示例： 1. 设置网页标题： ```html <head> <title>这里是网页标题</title> </head> ``` 2. 设置字符集： ```html <head> <meta charset="UTF-8"> </head> ``` 3. 设置背景颜色： ```html <head> <style> body { background-color: lightblue; } </style> </head> ``` CSS（层叠样式表）是一种用于描述HTML文档外观和布局的样式表语言。它可以用来设置字体、颜色、边距、间距等样式属性。CSS样式表可以提高网页的可维护性和可读性，因为它们将内容与表现分离开来。 要