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

教案 编号：PTzZ-67 流水号：18 （首页）共 4页 课程 《网页设计与制作Dreamweaver CS5》 一体化 理论 章节（课题）及内容 Web文档创建新的文档 班级日期 中职 2024.05 授课方式 讲授与任务驱动相结合 课时 1 作业题数 1 拟用时间 40分钟 教学目标 使学生理解以下理论知识： · 了解Web文档的基本概念和类型 · 学会在Dreamweaver CS5中创建新的Web文档 · 掌握Web文档的基本结构和设置方法 教学资源准备 多媒体设备 课本教材 学生练习素材 教学重点 1. Web文档的基本概念和类型 2. 在Dreamweaver CS5中创建新的Web文档的方法 3. Web文档的基本结构和设置技巧 教学难点 1. Web文档类型之间的区别和联系 2. 如何根据实际需求选择合适的Web文档类型 3. Web文档的基本设置方法和技巧 教学方法 讲授法、任务驱动法、演示法、体验探究法等。 1. 案例分析法：通过分析典型实例，引导学生理解Web文档的概念和类型。 2. 实践操作法：通过动手实践，让学生掌握在Dreamweaver CS5中创建新的Web文档的方法。 3. 小组讨论法：鼓励学生分组讨论，共同解决问题，培养合作精神。 授课教师： 审阅签名： 教学过程 教学活动内容 时间分配教学方法 课前导入 1. 简要介绍Web文档的基本概念和类型，如HTML文档、CSS文档、JavaScript文档等。 2. 提出问题：什么是Web文档？为什么需要创建不同类型的Web文档？ 2分钟 讲授新课 练习指导 Web文档是指在互联网上用于展示和传递信息的电子文档。它们是构成网站的基本单元，通常包括以下几种类型： 1. HTML文档：HTML（HyperText Markup Language，超文本标记语言）文档是网页的基础，用于展示网页内容和结构。HTML文档使用`.html`或`.htm`作为文件扩展名。HTML文档包含文本、图片、链接等元素，以及用于描述这些元素的HTML标签。 2. CSS文档：CSS（Cascading Style Sheets，层叠样式表）文档用于描述网页的布局和样式。CSS文档使用`.css`作为文件扩展名。通过将样式和内容分离，CSS可以使网页更加美观、易于维护和具有更好的可访问性。 3. JavaScript文档：JavaScript是一种用于实现网页交互和动态效果的编程语言。JavaScript文档使用`.js`作为文件扩展名。通过在HTML文档中引入JavaScript文件，可以为网页添加动画、表单验证、事件处理等功能。 4. PHP文档：PHP（Hypertext Preprocessor，超文本预处理器）是一种服务器端脚本语言，用于生成动态网页。PHP文档使用`.php`作为文件扩展名。PHP文档可以包含HTML代码、PHP代码以及数据库查询等。 5. XML文档：XML（eXtensible Markup Language，可扩展标记语言）是一种用于描述数据的标记语言。XML文档使用`.xml`作为文件扩展名。XML文档通常用于存储和传输数据，而不是直接在浏览器中展示。 6. JSON文档：JSON（JavaScript Object Notation，JavaScript对象符号）是一种轻量级的数据交换格式，易于阅读和编写。JSON文档使用`.json`作为文件 在Dreamweaver CS5中创建新的Web文档的方法如下： 1. 打开Dreamweaver CS5，选择“文件”（File）>“新建”（New）。 2. 在弹出的对话框中，选择“HTML”选项卡，然后选择“HTML文档”（HTML Document）模板。 3. 点击“创建”（Create）按钮，Dreamweaver将在新窗口中打开一个空白的HTML文档。 Web文档的基本结构如下： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>网页标题</title> </head> <body> <!-- 网页内容 --> </body> </html> ``` Web文档的基本设置方法： 1. 设置文档类型声明（DOCTYPE）：在HTML文档的开头，使用`<!DOCTYPE html>`声明文档类型。 2. 设置HTML标签：使用`<html>`标签包裹整个HTML文档，并设置`lang`属性，如`