手工编写html,第2讲手工编写HTML网页.doc

第2讲手工编写HTML网页

授课计划

一、授课时间：

2014年 月 日

二、授课章节

项目一：任务二 手工编写HTML网页

三、教学目的要求

1、掌握手工编写HTML网页文件和查看网页文件源代码的方法；

2、掌握HTML文档的基本结构及语法使用规范。

四、教学重点难点

1、HTML文档的基本结构及语法使用规范；Dreamweaver界面的基本使用(重点)

2、懂得运用HTML语句修改网页元素属性效果(难点)

五、教学方法

讲授法、演示法、实验法

六、教学用具

多媒体计算机、互联网

七、教学过程

复习：评讲P19-20练习题

案例导入：

在记事本输入P9图1-13源代码，并浏览效果。

进入DW查看源代码(或在浏览网页效果时，击“查看”—源文件(P17))；

在DW中新建空白文档，在代码视图下查看文档源代码。

让学生总结：网页是由HTML语句所组成。

新授

一、HTML文档结构

1、HTML的基本结构

(HTML开始标识)

是HTML文档的头部信息

(头部结束标记)

(正文开始标记)

是HTML文档的主体部分

(正文结束标记)

(HTML结束标识)

2、格式说明：(在DW中演示分析)

(1)HTML(超文本标记语言)不是一种编程语言，仅仅是描述性的标记语言。它定义了一系列的标签，每个标签表示一种意义。

(2)标记是由相应的英文嵌在“<>“内构成,英文不区分大小写；

(3)标记可分为单标记与双标记；

例：单标记：
(换行)、

---

(水平线)

(4)标记不能嵌套使用(演示错误码效果)

(5)大部分标记都拥有属性，通过属性可进一步描述标记的作用

二、HTML的常用标记

1、标题标记(p11)

格式：文本

功能：用于设置字体大小，共有6个等级，n越小，标题字号越大。

例：

13电子商务

(在DW中可在“属性”面板—“格式”中选定标题字号)

2、换行标记
(单标记)

相当于在DW中按shift + enter键，在XHTML?1.0?Transitonal?规范里所有的标签都要求闭合以前那种单一标签在XHTML?1.0?Transitonal?规范—HTML-水平线)

4、段落标记

(相当于在DW中按enter键)

语法格式：

文本

。align可以是Left(左对齐)、Center(居中)和Right(右对齐)三个值中的任何一个。

例：

13电子商务

(在DW中运用工具设置效果看观察代码的变化)

5、文字标记(p13)

语法格式：文本

例：欢迎光临

6、插入图像标记( P15)

基本语法：　

其中，src属性指明了所要链接的图像文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。

例如：

三、Dreamweaver cs6 工作界面的认识(P38)

启动Dreamweaver的方法：(1)双击图标；

(2)击“开始”---程序---Macromedima—Dreamweaver cs6。

2、工作区的基本组成(P38)

①标题栏；②菜单栏；

③“插入“面板；(在DW中演示，击“窗口”--“插入”)

④文档工具栏：(文档工具栏的显示/隐藏：击“查看”—工具栏—文档；演示：标题的输入方法，观察代码的变化)

提供了四种视图切换模式：

A.设计视图：系统默认的文档窗品视图模式，显示设计视图；

B．代码视图：用于显示和编辑HTML源代码。

例：新建一个空白文档，在“代码”视图查看源代码

C．拆分视图：用于同时显示HTML源代码和设计视图。

d.实时视图：可在实际的浏览器条件下设计网页。单击该按钮将显示“实时代码”和“检查”按钮，可以显示代码或启动检查模式。

【多屏幕】：用户可以选择网页显示的屏幕分辨率。(相对于DW8版本新增内容)

【在浏览器中预览/调试】按钮：通过指定浏览器预览网页文档，可以在文档中存在JavaScript错误时查找错误。

【文件管理】按钮：有于快速执行“获取”、取出、上传、存回等文件管理命令。

【W3C验证】按钮：可弹出W3C验证菜单。(