1、 授课计划一、授课时间：2014 年 月 日二、授课章节项目一：任务二 手工编写 HTML 网页三、教学目的要求1、掌握手工编写 HTML 网页文件和查看网页文件源代码的方法；2、掌握 HTML 文档的基本结构及语法使用规范。四、教学重点难点1、HTML 文档的基本结构及语法使用规范；Dreamweaver 界面的基本使用（重点）2、懂得运用 HTML 语句修改网页元素属性效果（难点）五、教学方法讲授法、演示法、实验法六、教学用具多媒体计算机、互联网七、教学过程 复习：评讲 P19-20 练习题 案例导入：（1（ 在记事本输入 P9 图 1-13 源代码，并浏览效果。 2 进入 DW 查看源代
2、码（或在浏览网页效果时，击“查看” 源文件（P17 ）；3 在 DW 中新建空白文档，在代码视图下查看文档源代码。让学生总结：网页是由 HTML 语句所组成。 新授一、HTML 文档结构1、HTML 的基本结构2(HTML 开始标识 )（头部开始标记）是 HTML 文档的头部信息（头部 结束标记）（正文开始标记）是 HTML 文档的主体部分（正文结束标记）(HTML 结束标识)2、格式说明：（在 DW 中演示分析 ）（1）HTML（超文本标记语言）不是一种编程语言，仅仅是描述性的标记语言。它定义了一系列的标签，每个标签表示一种意义。（2）标记是由相应的英文嵌在“内构成,英文不区分大小写；（3）
3、标记可分为单标记与双标记；例：单标记：(换 行)、 （水平线）（4）标记不能嵌套使用（演示错误码效果）（5）大部分标记都拥有属性，通过属性可进一步描述标记的作用二、HTML 的常用标记1、标题标记(p11)格式： 文本功能：用于设置字体大小，共有 6 个等级， n 越小，标题字号越大。例：13 电子商务 （在 DW 中可在“属性”面板“格式”中选定标题字号）2、换行标记( 单标记)相当于在 DW 中按 shift + enter 键， 在 XHTML 1.0 Transitonal 规范里所有的标签都要求闭合，以前那种 单一标签都要在其后加“/” ，例：变为（在 DW 中拆分视图下把第一行代码
4、删除演示分析，若要显示代码提示：击“编辑”-显示代码提示）3、水平线段标记(P12 ，单标记，具有 4 个属性)3例：在 XHTML 1.0 Transitonal 规范中要变成 （DW 中击“插入”HTML-水平线）4、段落标记 （相当于在 DW 中按 enter 键） 语法格式：文本。 align 可以是 Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。例：13 电子商务 （在 DW 中运用工具设置效果看观察代码的变化）5、文字标记(p13) 语法格式：文本例：欢迎光临6、插入图像标记（ P15）基本语法： 其中，src 属性指明了所要链接的图像文件地址，
5、这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。例如：三、Dreamweaver cs6 工作界面的 认识（P38）1 启动 Dreamweaver 的方法：（1）双击图标；（2）击“开始”-程序-MacromedimaDreamweaver cs6 。2、工作区的基本组成（P38）标题栏 ；菜单栏 ；“插入“面板；(在 DW 中演示， 击“窗口”-“插入”)文档工具栏 ：（文档工具 栏的显示/隐藏：击“查看”工具栏文档；演示：标题的输入方法，观察代码的变化 ） 提供了四种视图切换模式：A.设计视图：系统默认的文档窗品视图模式，显示设计视图；B代码视图：用于显示和 编辑 HT
6、ML 源代码。例：新建一个空白文档，在“代码”视图查看源代码4C拆分 视图 ：用于同时显 示 HTML 源代码和设计视图 。d.实时视图： 可在实际的 浏览器条件下设计网页。单击该按钮将显示“实时代码”和“检查”按 钮，可以显 示代码或启动检查模式。5【多屏幕】：用户可以选择网页显示的屏幕分辨率。 （相对于 DW8 版本新增内容）【在浏览器中预览/调试】按钮：通过指定浏览器预览 网页文档，可以在文档中存在JavaScript 错误时查找错误。【文件管理】按钮：有于快速执行“获取” 、取出、上传、存回等文件管理命令。【W3C 验证】按钮：可弹出 W3C 验证菜单。 （W3C 是万 维网联盟的缩写
7、，像HTML、XHTML、CSS、XML 的标准就是由 W3C 来定制。 ）【可视化助理】按钮：用于在文档窗口中显示各种可视化助理。【检查浏览器兼容性】按钮：检查所设计的页面对不同类型的浏览器的兼容性。【刷新设计视图】按钮：在代码视图中修改网页后，可以使用该按钮刷新文档窗口。标签选择器 ； 可快速选择 某一对象。 （演示）属性面板（ 演示：属性面板的 显示/隐藏：击“窗口”-“属性”）；浮动面板组 ；文档窗口 （文档编辑区）3、文本编辑（1）文本属性修改（颜色、对齐方式）；方法：选定文本，后击“属性”面板CSS-大小/颜色等（2）连续多空格的插入方法一：全角状态，按空格；方法二：击“ 插入 ”
8、“HTML”-“特殊符号”- “其他字符“ 空格”；方法三：在代码视图输入方法四：设置“首选参数”对话框，击“编辑”首选参数 勾选“允许多个连续空格”。 （DW 默认允许输一个空格）（3）段落：按 Enter：相当于分段，行间隔比较_大_;按 Shift+Enter：相当于换行，行间隔比较_小_;（4）对齐方式：选定对象；击“格式” “对齐”4、图像的添加：击“ 插入”-图像； 对齐方式：右击图片对齐5、网页属性修改：击“修改”-“网页属性” 外观 CSS；（教师演示分析）6四、练习在 Dreamweaver 中，根据素材和以下效果图制作网页内容，并浏览。五、小结7附：而这一串字符就是一个声明
9、，声明给用户端的浏览器，语句作用：网页是一种超文本，这种超文本有他自己的解析方法。该语句属于注释标记，声明了我 们是使用了 XHTML 1.0 Transitonal (过渡版)来开发网站的（这个版本是兼容 html4.01 的，目当大部分（ 98%）的页面用它），也就是 说告诉浏览器应该以哪种格式或方法来解析这个网页。 若删除该声明，则默认为开发网站是使用 HTML 版本的标准。 XHTML 是可扩展超文本标记语言。第二句，说明如果找不到，浏览器将使用后面的 URL 作为寻找文档类型的位置。W3C（是万维网联盟的简称）最重要的工作是发 展 Web 规范，这些规范描述了 Web 的通信协议（比如 HTML 和 XHTML）和其他的构建模 块。语句作用：在 HTML 标记中使用 xmlns 属性，主要用来声明 HTML 文档中自定义标签的命名空间。这是一个默认值，我 们在编写 HTML 时可以不添加， 浏览器会自动添加。语句作用：该 META 标签定义了 HTML 页面所使用的字符集为 UTF-8，也就是世界通用的语言编码。META 标签是 HTML 语言 HEAD 区的一个辅助性标签。它主要用来描述一个 HTML 网页文档的属性（如：关键词、页面刷新等）。 （以后会详细学习）无标题文档8查签人： 年 月 日
