1、1163,第2章 HTML网页设计,2.1 HTML语言基础,2.2 设置文本格式,2.3 表格应用,2.4 图像应用,2.5 生成动感效果,2.6 使用超链接,2.7 框架应用,2.8 设计表单,2163,2.1 HTML语言基础,2.1.1 HTML概述HTML是用来表示Web文档的规范，它使用标记来确定网页显 示的格式。静态网页是标准的HTML文件，动态网页经过应用程序 服务器的处理后也将生成标准的HTML文件.HTML是一种规范，是用于Web文档的格式化语言。HTML通 过标记（Tag）来标记要显示的网页中的各个部分，以告诉Web浏 览器应该如何显示网页，即确定网页内容的格式。浏览器按
2、照顺 序阅读HTML文件，然后根据内容附近的HTML标记来解释和显示 各种内容，这个过程称为语法分析。例如，如果为某段文字添加 了标记，浏览器将会以比一般文字大的粗体字来显示这 段文字.,3163,2.1 HTML语言基础,标记基础HTML语言是控制网页内容显示格式的标记集合，标记给浏览器提供 了格式化Web文档的指令。 1. 基本的HTML语法在HTML语言中，所有的标记都必须用尖括号（即小于号“”）括起来。例如，、等。大部分标记 都是成对出现的，包括开始标记和结束标记，开始标记和相应的结束标记 定义了标记所影响的范围；结束标记与开始标记名称相同，但结束标记总 是以一个斜线符号开头的。例如，
3、和、和 等。也有一些标记只要求单一标记符号，例如换行标记就 是这样。大多数标记都拥有一个属性集，通过这些属性可以对作用的内容进行更多的控制。在HTML语言中，所有属性都放置在开始标记的尖括号内。,4163,2.1 HTML语言基础,第2章目录,HTML标记的一般格式： 要呈现的内容例如： 心想事成建议使用小写字母来表示标记和属性名（P24）HTML元素的通用属性 id：为HTML元素指定一个唯一的标识符。 class：对HTML元素应用CSS类样式。 style：为一个单独出现的元素指定CSS样式。,5163,2.1 HTML语言基础,第2章目录,2.1.2 XHTML代码规范介绍 所有标记必
4、须使用相应的结束标记进行关闭 标记及其属性名称必须使用小写字母 标记的属性值必须使用引号括起来 标记的所有属性必须具有值 强制XHTML元素，所有文档都必须文档类型声明,6163,2.1 HTML语言基础,2.1.3 HTML文档的基本结构一个基本的HTML文档通常包含以下三对顶级标记。 1. HTML标记.HTML标记是全部文档内容的容器，是开始标记， 是结束标记，它们分别是网页的第一个标记和最后一 个标记，其他所有HTML代码都位于这两个标记之间。HTML标 记告诉浏览器或其他程序：这是一个Web文档，应该按照HTML 语言规则对文内的标记进行解释。.标记是 可选的，但最好不要可以省略这两
5、个标记，以保持Web文档结构的完整性。 2. 首部标记.首部标记用于提供与Web页有关的各种信息。在首部标记中， 可以使用和标记来指定网页的标题，使用 和标记来定义CSS样式表，使用 和标记来插入脚本，等等。,7163,2.1 HTML语言基础,3. 正文标记.正文标记包含了文档的内容，文字、图像、动画、超链接以及其他 HTML元素均位于该标记中。正文标记有下列属性。 (1) background：指定文档背景图像的URL地址，图像平铺在页背景上。 (2) bgcolor：指定文档的背景颜色。 (3) text：指定文档中文本的颜色。 (4) link：指定文档中链接的颜色。 (5) vlin
6、k：指定文档中已被访问过的链接的颜色。 (6) alink：指定文档中正被选中的链接的颜色。 (7) onload：指定文档首次加载时调用的事件处理程序。 (8) onunload：用于指定文档卸载时调用的事件处理程序。在上述属性中，各个颜色属性的值有两种表示方法：使用颜色名称来 指定，例如红色、绿色和蓝色分别用red、green和blue表示；使用十六进 制格式数值#RRGGBB来表示，RR、GG和BB分别表示颜色中的红、绿、 蓝三基色的两位十六进制数据。,8163,4. HTML文档的基本结构 HTML文档的基本结构可以表示如下：标题文字文本、图像、动画、HTML指令等,9163,2.1
7、HTML语言基础,第2章目录,网页标题 在这里添加网页的内容，包括文本、图像、声音、视频以及动画等,10163,例1 利用HTML标记、 首部标记和正文标记，在记事本中编写一个简单的HTML文档，将文件名指定为2-01.htm,并保存在虚拟目录ASP下的chapter02子文件夹中。一个简单的WEB页面 这是使用HTML语言编写的一个网页。 地址：http:/localhost/asp/chapter02/2-01.htm,11163,2.1 HTML语言基础,第2章目录,2.1.4 创建HTML网页 在Dreamweaver中创建HTML网页 从【文件】菜单中选择【新建】命令 在文档工具栏上
8、单击【新建】按钮 。 在网页中添加内容 保存网页2.1.5 添加注释在HTML语言中，注释由开始标记构成，这两个标 记之间的文字被浏览器解释为注释，而不在浏览器窗口中显示。,12163,2.2 设置文本格式,第2章目录,2.2.1 分段与换行段落是文档的基本信息单位。将文档划分为段落，可以通过使 用分段标记、换行标记、标题标记或插入水平线来实现。 段落标记分段标记定义了一个段落，使用该标记时要跳过一个空行，使 后续内容隔一行显示。若同时使用和，则将段落包围起 来，表示一个分段的块；若省略结束标记，可以将开始标记 放在段尾。分段标记的常用属性是align，用于设置段落的水 平对齐方式。 . 换行
9、标记 标记强行规定了当前行的中断，使后续内容在下一行显示。例 本例显示了分段标记和换行标记的用法以及它们的区别这是第一行。 这是第二行。 这是第三行。 这是第四行。,13163,标题标记hn标题标记用于设置文档中的标题和副标题，其中n的取值是1到 6；.标记表示字体最大的标题，标记表 示字体最小的标题。 . . . . . 例 本例演示了各种标题标记的使用方法 这是一级标题。 这是二级标题。 这是三级标题。 这是四级标题。 这是五级标题。 这是六级标题。 这是普通文字。,14163,水平线标记 hr标记在文档中添加一条水平线，用来分开文档的两个部 分。该标记有以下属性：(1) align：指定
10、线的对齐方式，取值为left（左对齐）、 center（居中对齐）或right（右对齐），默认值为center。(2) color：指定线的颜色。(3) noshade：若指定该项，则显示一条无阴影的实线。(4) size：指定线的宽度，以像素为单位。(5) width：指定线的长度，单位可以是像素或百分比（占页 面宽度的百分比）。例 本例说明在网页中如何通过hr标记的各种属性来控制水平线的显示效果 以下是默认的水平线：以下是size为6、width为300像素的水平线：以下是size为1、width页面宽度80%的实线水平线：以下是width=90%的红色水平线： ,15163,例2.1标题
11、、段落、换行和水平线段落文本左对齐 段落文本居中对齐在这里换行 段落文本右对齐,16163,例 本例说明如何使用align属性来控制段落的对齐方式这一行的对齐方式是左对齐。这一行的对齐方式是居中对齐。这一行的对齐方式是右对齐。 春夜喜雨好雨知时节，当春乃发生。 随风潜入夜，润物细无声。 ,17163,2.2 设置文本格式,第2章目录,2.2.2 设置字体、字号和颜色 字体标记 . face：字体 size：字号 color：颜色,18163,例 如何使用字体标记来设置文本的字体、字号和颜色 设置字体字号和颜色ASP动态网页设计 ASP动态网页设计 ASP动态网页设计 ASP动态网页设计 ,19
12、163,例2.2 在网页中使用font 标记设置文本的字体、字号和颜色。 设置字体、字号和颜色白日依山尽 黄河入海流 欲穷千里目 更上一层楼,20163,2.2 设置文本格式,第2章目录,2.2.3 设置字符格式 通过设置字符样式可以为某些字符设置特殊格式，例如粗体、 斜体、下划线、删除线、上标、下标等。常用的设置字符样式的 标记如下： 粗体：.或. 大字体：. 斜体：.或. 小字体：. 删除线：.或. 下标：. 上标：. 下划线：.,21163,2.2 设置文本格式,第2章目录,2.2.4 插入特殊字符,22163,2.2 设置文本格式,第2章目录,2.2.5 设置文本容器 div标记. span标记.2.2.6 设置列表格式 无序列表条目1 条目2 . . .有序列表条目1 条目2 . . . ,23163,2.3 表格应用,第2章目录,2.3.1 创建基本表格表格标题 数据项数据项. . . 数据项. . .在Dreamweaver CS3中：从【插入】菜单中选择【表格】命令。,
