文本与超链接——网页设计第二讲

1、1 Web编程基础编程基础文本与超链接文本与超链接2学习目标学习目标掌握掌握FONT标记符的用法，理解物理标记符的用法，理解物理字符样式和逻辑字符样式。字符样式和逻辑字符样式。掌握掌握P、BR、Hn、HR标记符的用法，标记符的用法，掌握设置段落对齐的方法。掌握设置段落对齐的方法。掌握有序列表、无序列表和嵌套列掌握有序列表、无序列表和嵌套列表的构造方法。表的构造方法。理解超链接的基本概念，掌握理解超链接的基本概念，掌握A标记标记符的用法。符的用法。掌握使用掌握使用Dreamweaver开发网站的基开发网站的基本过程。本过程。3Part 1设置字符格式设置字符格式4字符格式字符格式所谓字符格式是指

2、针对段落中的所谓字符格式是指针对段落中的部分文字（一个或一组文字，也部分文字（一个或一组文字，也可以是整个段落的文字）所设置可以是整个段落的文字）所设置的格式，通常包括字体、字号、的格式，通常包括字体、字号、文字颜色等。文字颜色等。5FONT标记符标记符FONT标记符具有标记符具有3个常用个常用的属性：的属性：SIZE 设置字体大小设置字体大小COLOR 设置字体颜色设置字体颜色FACE 设置字体样式设置字体样式6FONT标记符标记符字号属性字号属性 size 的值可以从的值可以从1到到7，3是默认值。该属性值也可以用是默认值。该属性值也可以用 + 号或号或 - 号来作为相对值指定。号来作为相

3、对值指定。SHOPPING BASKET7演示演示8FONT标记符标记符字体标记符的字体标记符的 color 属性可用来属性可用来控制文字的颜色，它的使用方法控制文字的颜色，它的使用方法与正文标记符与正文标记符BODY中使用的中使用的 bgcolor 属性相同。属性相同。9演示演示10FONT标记符标记符Face 属性用来指定字体样式。属性用来指定字体样式。在编制网页时，通过在在编制网页时，通过在FONT标标记符中指定记符中指定 face 属性，用户可以属性，用户可以指定一个或几个字体名称（用逗指定一个或几个字体名称（用逗号隔开）。号隔开）。11演示演示12常用物理字符样式常用物理字符样式物理

4、字符样式是指标记符本身说物理字符样式是指标记符本身说明了所修饰的效果。明了所修饰的效果。常用物理字符样式标记符有：常用物理字符样式标记符有： 黑体标记黑体标记 斜体标记斜体标记 下划线标记下划线标记等。等。13演示演示物理字符样式效果物理字符样式效果14常用逻辑字符样式常用逻辑字符样式逻辑字符样式是指标记符本身说逻辑字符样式是指标记符本身说明了所修饰效果的逻辑含义。例明了所修饰效果的逻辑含义。例如，如，ADDRESS标记符说明了标记符说明了“地地址址”这个含义，但并没有说明具这个含义，但并没有说明具体的效果。体的效果。15演示演示逻辑字符样式效果逻辑字符样式效果16Part 2设置段落格式设置

5、段落格式17段落格式段落格式所谓段落格式是指针对所谓段落格式是指针对 HTML 文文档中的段落所设置的格式，例如，档中的段落所设置的格式，例如，段落的对齐方式。段落的对齐方式。18分段标记符分段标记符分段标记符用于将文档划分为段分段标记符用于将文档划分为段落，标记为落，标记为，其中结束标，其中结束标记符通常可省略。记符通常可省略。换行标记符用于在文档中强制断换行标记符用于在文档中强制断行，标记为一个单独的行，标记为一个单独的。该。该标记符与分段标记符标记符与分段标记符是有区是有区别的。别的。19演示演示P与与BR20标题样式标题样式在在 HTML 中，用户可以通过中，用户可以通过 Hn 标记符

6、来标识文档中的标题和副标记符来标识文档中的标题和副标题，其中标题，其中 n 是是1至至6的数字；的数字；H1表示最大的标题，表示最大的标题，H6表示最小的表示最小的标题。使用标题样式时，必须使标题。使用标题样式时，必须使用结束标记符。用结束标记符。21演示演示标题效果标题效果22添加水平线添加水平线添加水平线的标记符为添加水平线的标记符为HR，它包括，它包括以下属性：以下属性： SIZE 属性用来改变水平线的粗细。属性用来改变水平线的粗细。 WIDTH 属性用来更改水平线的长度。属性用来更改水平线的长度。 NOSHADE 属性使水平线以实线显示。属性使水平线以实线显示。 COLOR属性可以控制

7、水平线的颜色。属性可以控制水平线的颜色。23演示演示水平线效果水平线效果24ALIGN 属性属性ALIGN 属性用于设置段落的对齐格式，属性用于设置段落的对齐格式，其值包括：其值包括：RIGHT（右对齐）、（右对齐）、LEFT（左对齐）、（左对齐）、CENTER（居中对齐）（居中对齐）和和 JUSTIFY（两端对齐）。（两端对齐）。ALIGN 属性可应用于多种标记符，最属性可应用于多种标记符，最典型的是应用于典型的是应用于 P、Hn（标题标记（标题标记符）、符）、HR 等。等。25演示演示段落对齐段落对齐26DIV 标记符标记符DIV 标记符用于为文档分节，以标记符用于为文档分节，以便为文档的

8、不同部分应用不同的便为文档的不同部分应用不同的段落格式，其标记为段落格式，其标记为。位于位于 DIV 标记符中的多段文本将标记符中的多段文本将被认为是一个节，可为它们设置被认为是一个节，可为它们设置一致的对齐格式。一致的对齐格式。27CENTER 标记符标记符如果用户要将文档内容如果用户要将文档内容居中，还可使用居中，还可使用 CENTER 标记符，方法为：将需标记符，方法为：将需居中的内容置于居中的内容置于和和之之间。间。28演示演示DIV与与CENTER29格式嵌套格式嵌套（1）如果所设置的格式是相容的，）如果所设置的格式是相容的，则取格式叠加的效果。则取格式叠加的效果。（2）如果所设置的

9、格式是冲突的，）如果所设置的格式是冲突的，则取最近样式符的修饰效果。则取最近样式符的修饰效果。30演示演示格式嵌套格式嵌套 31Part 3设置列表格式设置列表格式32有序列表有序列表有序列表（有序列表（Ordered list）也称数）也称数字式列表，它是一种在表的各项字式列表，它是一种在表的各项前显示有数字或字母的缩排列表。前显示有数字或字母的缩排列表。33有序列表有序列表定义有序列表需要使用有序列表标定义有序列表需要使用有序列表标记符记符和列表项（和列表项（List item）标记符标记符/（结束标记符可省（结束标记符可省略），语法如下：略），语法如下： List item 1 List

10、 item 2 34有序列表有序列表OL 标记符最常用的属性标记符最常用的属性type，用，用来设置数字序列样式。取值为：来设置数字序列样式。取值为：1、A、a、I、i。35演示演示有序列表有序列表page3236演示演示有序列表的嵌套有序列表的嵌套37无序列表无序列表无序列表（无序列表（Unordered list）也称）也称强调式列表，它是一种在表的各强调式列表，它是一种在表的各项前显示有特殊项目符号的缩排项前显示有特殊项目符号的缩排列表。列表。38无序列表无序列表定义无序列表需要使用无序列表标定义无序列表需要使用无序列表标记符记符和列表项（和列表项（List item）标记符标记符（结束

11、标记符可省（结束标记符可省略），语法如下：略），语法如下： List item 1 List item 2 39无序列表无序列表UL 标记符最常用的属性标记符最常用的属性type，用，用来设置项目符号样式。取值为：来设置项目符号样式。取值为：disc、circle、square。注意：在注意：在 IE 中，中，type 属性的取值属性的取值是区分大小写的。是区分大小写的。40演示演示无序列表无序列表41演示演示混合嵌套列表混合嵌套列表42Part 3使用超链接使用超链接43超链接基础超链接基础 URL（Universal Resources Locator）用于定位）用于定位Web上的文档上的

12、文档信息。信息。 一个一个 URL 包括包括 3 部分：协议、部分：协议、计算机地址、文件路径。计算机地址、文件路径。协议：协议：/计算机计算机/文件路径文件路径44超链接基础超链接基础绝对绝对URL绝对绝对URL是指资源的完整地址，是指资源的完整地址，包括包括URL的所有的所有3个部分，即：个部分，即：协议：协议：/计算机计算机/文档名文档名45超链接基础超链接基础相对相对URL相对相对URL是指是指Internet上资源相对上资源相对于于当前页面当前页面的地址，它包含从当的地址，它包含从当前页面指向目标页面位置的路径。前页面指向目标页面位置的路径。使用相对使用相对URL的好处：易于维护的好

13、处：易于维护46超链接基础超链接基础相对相对URL使用相对使用相对URL时，经常使用两个时，经常使用两个与与DOS类似的符号：类似的符号：句点（句点（.）表示当前目录）表示当前目录双重句点（双重句点（.）表示当前目录的上）表示当前目录的上一级目录一级目录47超链接基础超链接基础相对相对URL48不同类型的超链接不同类型的超链接根据超链接的目标文件不同，分为：根据超链接的目标文件不同，分为： 网页之间的超链接网页之间的超链接 页面内的超链接页面内的超链接 文件下载超链接文件下载超链接 Email超链接超链接 空超链接空超链接49不同类型的超链接不同类型的超链接根据超链接源对象的不同，分为：根据超

14、链接源对象的不同，分为：文本超链接文本超链接图像超链接（包括图像映射）图像超链接（包括图像映射）对象超链接（例如对象超链接（例如Flash、Java小小程序）程序）50不同类型的超链接不同类型的超链接根据超链接实现方式的不同，分根据超链接实现方式的不同，分为：为：HTML超链接超链接JavaScript超链接超链接对象超链接对象超链接51创建超链接创建超链接 A 标记符用于创建超链接（结束标标记符用于创建超链接（结束标记符不能省略），记符不能省略），href 属性用于指定属性用于指定超链接的目标文件。超链接的目标文件。内部网页超链接：内部网页超链接：link 外部网页超链接：外部网页超链接：l

15、ink52演示演示超链接效果超链接效果53创建超链接创建超链接锚点链接锚点链接 使用页面内的超链接，首先需使用页面内的超链接，首先需要定义锚点，然后在超链接中指要定义锚点，然后在超链接中指向该锚点。向该锚点。 定义锚点应使用定义锚点应使用 指向锚点的超链接为：指向锚点的超链接为：link54创建超链接创建超链接锚点链接锚点链接指向其他页面内锚点的超链接：指向其他页面内锚点的超链接：linkblank link55演示演示锚点超链接效果锚点超链接效果56问题问题在刚才的示例里，如果有另外一在刚才的示例里，如果有另外一个同目录的网页文件个同目录的网页文件 page2.htm，在该网页中想访问示例页

16、面中的在该网页中想访问示例页面中的“巫师巫师”所在位置，应如何设置所在位置，应如何设置超链接？超链接？57创建超链接创建超链接文件下载文件下载 当超链接目标为浏览器不能识当超链接目标为浏览器不能识别的文件格式时，那么就自动生别的文件格式时，那么就自动生成了文件下载链接。成了文件下载链接。下载下载58演示演示文件下载效果文件下载效果59创建超链接创建超链接Email链接链接Email控制命令：控制命令： ?subject= 设置信件主题设置信件主题 ?cc= 设置抄送人设置抄送人 ?bcc= 设置密件抄送人设置密件抄送人 & 组合多个控制命令组合多个控制命令60演示演示Email链接效果链接效果61超链接的显示效果超链接的显示效果超链接颜色超链接颜色 在在BODY标记符中使用标记符中使用LINK 属性设置未属性设置未被访问的链接的颜色；被访问的链接的颜色；VLINK 设置已被设置已被访问过的链接的颜色；访问过的链接的颜色；ALINK 设置活动设置活动链接（即当前选定的链接）的颜色。链接（即当前选定的链接）的颜色。下划线效果下划线效果动态效果（悬停效果、鼠标指针形动态效果（悬停效果、鼠标指针形状、鼠标指针跟随效果）状、鼠标指针跟随效果）62演示演示超链接显示效果超链接显示效果63Part 5使用使用Dreamweaver开发网站开发网站64Dreamweaver的工作界面的工