Dreamweaver MX2004教案 第二周星期二 第1、2节 HTML语言教程(一) 课题教标 学目1、了解HmML基本结构:2、了解HIML单位和颜色表示方法:3、掌握相对 与绝对链接。 教学重HML基本语法及相对和绝对链接 点 教学难相对和绝对链接
Dreamweaver MX2004 教案 第二周 星期二 第 1、2 节 课 题 HTML 语言教程（一） 教学目 标 1、了解 HTML 基本结构；2、了解 HTML 单位和颜色表示方法；3、掌握相对 与绝对链接。 教 学 重 点 HTML 基本语法及相对和绝对链接 教学难 点 相对和绝对链接
HTML基础知识 1、HTML定义 HTML( HyperText Mark Up language)是使用特殊标记来描述文档结构和表 现形式的一种语言,由W3C( World wide web con sortium)所制定和更新。我们 可以用任何一种文本编译起来编辑HTML文件,因为它就是一总纯文本文件。 2、HML语言的基本结构 下面我们来看一小段HTM语言的代码,来了解HTML语言的基本结构: <html> <head> < title>我的第一个网页</ title/head <body>我的网页</body></htm1> 将这一小段代码粘贴至文本文件中,然后选择“另存为”,将文件的后 缀名改为.htm或者.htm1即可,然后再所在的目录下就可看到一个IE的图标 名字就是你所存的文件名称 教 注意:几乎每一种HTM语言的语法都是以<>开头,以</>结束 3、HTML语言的基本单位 (1)长度单位 长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等 学系列属性,同时也可以用来定义这些对象在页面上的位置等属性,用来描述页 面上可能遇到的各种长度。 长度的表示方法有两种:绝对长度和相对长度。他们的单位都是像素 ( pixel)和百分比(%),像素代表的是屏幕上的每个点,而百分比代表的是相对 过于客户区的多少。下面我们就以水平线的宽度为例,说明这两种表示方法 HR>标记是在页面上建立水平线的标记。 width是水平线元素中的一种属性,用来表示水平线的宽度。这里 width="500″即表示这个水平线的宽度是500像素; width=”%50″即表示水平线 程占据客户区的总宽度的%50 (2)颜色单位 和长度单位一样,颜色单位也是描述页面表现形式的一种很重要的的数据 类型。颜色单位有三种表示方法:16进制颜色代码、10进制RGB码、直接颜色 名称。这三种表示方法不同,但是效果却是一样的。下面用一小段代码说明这 三种颜色的表示方法 < font COloR=#0000ff>用16进制表示红色 < font COLOR=red>用颜色名表示红色 注意: 16进制颜色代码,语法格式:# RRGGBB。16进制颜色代码之前必须有 一个“#”号,这种颜色代码是由三部分组成的,其中前两位代表红色,中间两 位代表绿色,后两位代表蓝色。不同的取值代表不同的颜色,他们的取值范围 10进制RGB码,语法格式:RGB(RRR,GGG,BBB)。在这种表示法中,后
教 学 过 程 一、HTML 基础知识 1、HTML 定义 HTML(HyperText MarkUp Language)是使用特殊标记来描述文档结构和表 现形式的一种语言，由 W3C(World Wide Web Consortium)所制定和更新。我们 可以用任何一种文本编译起来编辑 HTML 文件，因为它就是一总纯文本文件。 2、HTML 语言的基本结构 下面我们来看一小段 HTML 语言的代码，来了解 HTML 语言的基本结构： <html> <head> <title>我的第一个网页</title></head> <body>我的网页</body></html> 将这一小段代码粘贴至文本文件中，然后选择“另存为”，将文件的后 缀名改为.htm 或者.html 即可，然后再所在的目录下就可看到一个 IE 的图标， 名字就是你所存的文件名称。 注意：几乎每一种 HTML 语言的语法都是以<>开头，以</>结束。 3、HTML 语言的基本单位 （1）长度单位 长度单位可以用来定义水平线、表格边匡、图像等对象的长、宽、高等一 系列属性，同时也可以用来定义这些对象在页面上的位置等属性，用来描述页 面上可能遇到的各种长度。 长度的表示方法有两种：绝对长度和相对长度。他们的单位都是像素 (pixel)和百分比(%)，像素代表的是屏幕上的每个点，而百分比代表的是相对 于客户区的多少。下面我们就以水平线的宽度为例，说明这两种表示方法。 <HR>标记是在页面上建立水平线的标记。 width 是水平线元素中的一种属性，用来表示水平线的宽度。这里 width="500"即表示这个水平线的宽度是 500 像素；width="%50"即表示水平线 占据客户区的总宽度的%50。 （2）颜色单位 和长度单位一样，颜色单位也是描述页面表现形式的一种很重要的的数据 类型。颜色单位有三种表示方法：16 进制颜色代码、10 进制 RGB 码、直接颜色 名称。这三种表示方法不同，但是效果却是一样的。下面用一小段代码说明这 三种颜色的表示方法。 <font COLOR=#0000ff>用 16 进制表示红色 <font COLOR=red>用颜色名表示红色 注意： 16 进制颜色代码，语法格式： #RRGGBB 。16 进制颜色代码之前必须有 一个“#”号，这种颜色代码是由三部分组成的，其中前两位代表红色，中间两 位代表绿色，后两位代表蓝色。不同的取值代表不同的颜色，他们的取值范围 是 00--FF。 10 进制 RGB 码，语法格式： RGB(RRR,GGG,BBB) 。在这种表示法中，后 面三个参数分别是红色、绿色、蓝色，他们的取值范围是 0--255。以上两种表 达方式可以相互转换，标准是 16 进制与 10 进制的相互转换。 直接颜色名称，可以在代码中直接写出颜色的英文名称。 以上三种表示方法的效果相同，一般 16 进制颜色代码的表示方法比较常 用。可以根据自己的喜好和实际情况来决定使用哪一种表示方法
(3)URL路径 URL( Universal resource loca tor,统一资源定位器)路径是一种互联网 地址的表示法。在这个数据里可以包括以何种协议连接、要连接到哪一个地址、 连接地址的端口(Port)号以及服务器( Server)里文件的完整路径和文件名称等信 息。在HTML中,URL路径分为两种形式:绝对路经和相对路径 绝对路径: 绝对路径是将服务器上磁盘驱动器名称完整的写出来,同时也会表现出磁 盘上的目录结构。 语法格式 例如 http://www.frontfree.net <A href=file: ///D: /test/html. htm></A> b.相对路径: 教 相对路径是相对于当前的HTM文档所在目录或站点根目录的路径 语法格式 相对关系/部分路径/文件名 根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的 相对路径。 1>相对文档 这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之 间的关系的一种表现形式。“../”表示上一级目录,没有“../”表示当前目录 过 例如当前文档的路径是:test/ project 1/ index.htm。我们要找test 目录下的htm1.htm。而当前的目录是 project1,我们要回到上一级目录中,所 以路径是“./html.htm”。 程 2>相对根目录 这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表 达式种的第一个字符是“/”,这个符号表示这个路径是一个相对于根目录的表达 、上机练习 1、利用记事本制作一个简单的页面。 例如 <html> Head> < title>欢迎光临</ title></head <body)< font color=red>我的主页</font><br> < font color=”#00ff00”>欢迎光临我的主页!</font> </body></html>
教 学 过 程 （3）URL 路径 URL(Universal Resource Locator，统一资源定位器)路径是一种互联网 地址的表示法。在这个数据里可以包括以何种协议连接、要连接到哪一个地址、 连接地址的端口(Port)号以及服务器(Server)里文件的完整路径和文件名称等信 息。在 HTML 中，URL 路径分为两种形式：绝对路经和相对路径。 a. 绝对路径： 绝对路径是将服务器上磁盘驱动器名称完整的写出来，同时也会表现出磁 盘上的目录结构。 语法格式： 例如： http://www.frontfree.net <A href="file:///D:/test/html.htm"></A> b. 相对路径： 相对路径是相对于当前的 HTML 文档所在目录或站点根目录的路径。 语法格式： 相对关系/部分路径/文件名 根据相对路径的参照点又可以分为相对文档的相对路径以及相对根目录的 相对路径。 <1>相对文档： 这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之 间的关系的一种表现形式。“../”表示上一级目录，没有“../”表示当前目录。 例如当前文档的路径是：test/project1/index.htm 。我们要找 test 目录下的 html.htm 。而当前的目录是 project1，我们要回到上一级目录中，所 以路径是“../html.htm”。 <2>相对根目录： 这种路径根据目标文档相对于根目录的关系的一种表现形式。在这种表 达式种的第一个字符是“/”，这个符号表示这个路径是一个相对于根目录的表达 式。 二、上机练习 1、利用记事本制作一个简单的页面。 例如： <html> <head> <title>欢迎光临</title></head> <body><font color=red>我的主页</font><br> <font color=”#00ff00”>欢迎光临我的主页！</font> </body></html>
2、接上面例题,将“我的主页”创建一个链接 教学反思: 在介绍的过程中,结合机房的各种设备,来展示网页制作的魅力。以此来吸引学生的 注意力。在实际的教学当中也确实产生了较好的教学效果。同时在教学的过程也出现 了一些问题,就是学生对网页制作语言html的认识还是很基础的,这需要在以后的教 学过程中更加注意这个方面的锻炼 四、作业
2、接上面例题，将“我的主页”创建一个链接 三、教学反思： 在介绍的过程中，结合机房的各种设备，来展示网页制作的魅力。以此来吸引学生的 注意力。在实际的教学当中也确实产生了较好的教学效果。同时在教学的过程也出现 了一些问题，就是学生对网页制作语言 html 的认识还是很基础的，这需要在以后的教 学过程中更加注意这个方面的锻炼 四、作业
Dreamweaver MX2004教案 第二周星期三 第课题教标 HTML语言教程(二) 教学目1、掌握BODY标志的应用:2、了解BODY标志中属性 教学重BODY标志中属性 点 教学难BODY标志中属性
Dreamweaver MX2004 教案 第二周 星期三 第 1，2 节 课 题 HTML 语言教程（二） 教学目 标 1、掌握 BODY 标志的应用；2、了解 BODY 标志中属性。 教学重 点 BODY 标志中属性 教学难 点 BODY 标志中属性