《ASP动态网页设计实用教程》教学资源（PPT课件讲稿）第3章 Web页面制作基础

第3章Web页面制作基础 闪 新漂授 章小

2 第3章 Web页面制作基础 学习目标 新课讲授 本章小结 本章习题 返回 主要内容

本章主要内容 本章主要介绍了HTML的基本结构;介绍了文本 格式标记、列表标记、超链接标记、加入音频、 视频和图像的标记、表格标记、表单标记、cSS 样式表、框架标记等HTML标记的语法及应用。 目录页

3 本章主要内容 本章主要介绍了HTML的基本结构；介绍了文本 格式标记、列表标记、超链接标记、加入音频、 视频和图像的标记、表格标记、表单标记、CSS 样式表、框架标记等HTML标记的语法及应用。 目录页

本章学习目标 识记HTML的基本结构,掌握用HTML编写简单网页的方 法。 ●识记常用的文本格式标记,掌握其应用。 识记常用的列表标记,掌握其应用。 ●识记超链接标记,掌握其应用。 识记加入音频、视频和图像的标记,掌握其应用。 识记表格标记,掌握其应用 识记表单标记,掌握其应用。 识记CSS样式表的定义,掌握cSS样式表的应用。 ●识记框架的结构标记,掌握框架的应用。 ●识记其他HTML标记如:滚动字幕、地址标记、分区标记、 块引用标记及特殊字符的写法等。 目录页

4 本章学习目标 ⚫ 识记HTML的基本结构，掌握用HTML编写简单网页的方 法。 ⚫ 识记常用的文本格式标记，掌握其应用。 ⚫ 识记常用的列表标记，掌握其应用。 ⚫ 识记超链接标记，掌握其应用。 ⚫ 识记加入音频、视频和图像的标记，掌握其应用。 ⚫ 识记表格标记，掌握其应用。 ⚫ 识记表单标记，掌握其应用。 ⚫ 识记CSS样式表的定义，掌握CSS样式表的应用。 ⚫ 识记框架的结构标记，掌握框架的应用。 ⚫ 识记其他HTML标记,如：滚动字幕、地址标记、分区标记、 块引用标记及特殊字符的写法等。 目录页

第3章Web页面制作基础 3.1Web的基本结构标记 3.2文本格式标记结构标记 3.3列表标记 3.4超链接标记 3.5加入音频、视频和图像 3.6表格标记 3.7表单标记 3.8cSS基础 3.9框架标记 3.10其他标记 3.11小结 目录页

5 第3章 Web页面制作基础 3．1 Web的基本结构标记 3．2 文本格式标记结构标记 3．3 列表标记 3．4 超链接标记 3．5 加入音频、视频和图像 3．6 表格标记 3．7 表单标记 3．8 CSS基础 3．9 框架标记 3．10 其他标记 3．11 小结 目录页

第3章Web页面制作基础 3.1Web的基本结构标记 3.1.1HTML文档的开始和结束标记 ● ●HTML文件总是以标记结束 3.1.2头部标记 .中包含htm的一些常规信息, 般并不显示在浏览器上。它可以包含一些标示元 素如:ttle、base等。其中,tile最常用

6 第3章 Web页面制作基础 3．1 Web的基本结构标记 3．1．1 HTML文档的开始和结束标记 ⚫ …… ⚫ HTML文件总是以标记开头，它告诉浏览 器正在处理的是HTML。HTML文件中最后一行 总是以标记结束。 3．1．2 头部标记 …中包含html的一些常规信息，一 般并不显示在浏览器上。它可以包含一些标示元 素如：title、base等。其中，title最常用

3.1.3标题标记 ●.标题的文本<ttle

7 3．1．3 标题标记 ⚫ … 之间的内容作为网页的标题， 其字符长度不超过64个字符。 ⚫ 每个HTML文档都应该有一个标题，它不是正文 的一部分，只是显示在浏览器窗口中标题栏的一 段信息，这便于浏览者初步了解文档的内容。语 法为： ⚫ 标题的文本

3.1.4主体标记 ●HTML文档的正文部分,一般包括在body元素 的开始与结束标记中。 语法: ●…s/body> ●在和中放置的是页面中所有的 内容,如图片、文字、表格、表单、超链接等 设置。 ●标签有自己的属性,设置标签 内的属性,可控制整个页面的显示方式

8 3．1．4 主体标记 ⚫ HTML文档的正文部分，一般包括在body元素 的开始与结束标记中。 ⚫ 语法： ⚫ …… ⚫ 在和中放置的是页面中所有的 内容，如图片、文字、表格、表单、超链接等 设置。 ⚫ 标签有自己的属性，设置 标签 内的属性，可控制整个页面的显示方式

3.1.4主体标记 标签的属性 ●属性描述lnk设定页面默认的连接颜色 ●airk设定鼠标正在单击时的连接颜色 ●Vink设定访问后连接文字的颜色 ● background设定页面背景图像 ● bgcolor设定页面背景颜色 ● leftmargin设定页面的左边距 topmargin设定页面的上边距 ● bgproperties设定页面背景图像为固定,不随页面的滚 动而滚动 tex设定页面文字的颜色

9 ⚫ 标签的属性: ⚫ 属性描述link设定页面默认的连接颜色 ⚫ alink设定鼠标正在单击时的连接颜色 ⚫ vlink设定访问后连接文字的颜色 ⚫ background设定页面背景图像 ⚫ bgcolor设定页面背景颜色 ⚫ leftmargin设定页面的左边距 ⚫ topmargin设定页面的上边距 ⚫ bgproperties设定页面背景图像为固定，不随页面的滚 动而滚动 ⚫ text设定页面文字的颜色 3．1．4 主体标记

3.1.5页面背景属性 1.设置背景颜色 网页内容 (1)RGB格式的数字 颜色是由"re"、" green"、"blue"三原色组合而成的,在HTML中 对颜色的定义使用十六进制,对于三原色HTML分别给予两个十六进 位去定义。 如:白色的组成是red=f, green=,b|ue=f,RGB值即为fff 红色的组成是red=f, green=00,bue=00,RGB值即为f0000 绿色的组成是red=00, green= fif blue=00,RGB值即为o000 蓝色的组成是red=00, green=00,bue=f,RGB值即为0000 黑色的组成是red=00, green=00,b|ue=00,RGB值即为000000 应用时常在每个RGB值之前加上“#“符号,如: 10

10 3．1．5 页面背景属性 1．设置背景颜色 网页内容 ⚫ ⑴ RGB格式的数字 ⚫ 颜色是由"red"、"green"、"blue"三原色组合而成的，在 HTML 中 对颜色的定义使用十六进制，对于三原色HTML分别给予两个十六进 位去定义。 ⚫ 如：白色的组成是red=ff, green=ff, blue=ff, RGB 值即为ffffff ⚫ 红色的组成是red=ff, green=00, blue=00, RGB 值即为ff0000 ⚫ 绿色的组成是red=00, green=ff, blue=00, RGB 值即为00ff00 ⚫ 蓝色的组成是red=00, green=00, blue=ff, RGB 值即为0000ff ⚫ 黑色的组成是red=00, green=00, blue=00, RGB 值即为000000 ⚫ 应用时常在每个RGB值之前加上“#“符号，如：

3.1.5页面背景属性 ●(2)关键字 用英文名字表示颜色时直接写名字。如: ● Windows vga(视频图像阵列)形成了16个关键 aqua, black, blue, fuchsia, gray, green lime, maroon, navy, olive, purple, red silver, teal, white, and yellow

11 3．1．5 页面背景属性 ⚫ ⑵ 关键字 ⚫ 用英文名字表示颜色时直接写名字。如： ⚫ Windows VGA(视频图像阵列)形成了16个关键 字:aqua，black，blue，fuchsia,gray，green， lime，maroon，navy，olive，purple，red， silver，teal，white，and yellow