第1篇第3章网页中的文本

1、第第1 1篇篇 第第3 3章章 网页中的文本网页中的文本 3.1 文本的基本编辑文本的基本编辑3.1.1 插入文本、符号、日期插入文本、符号、日期3.1.2 添加字体添加字体3.1.3 设置文本的属性设置文本的属性3.1.4 建立列表建立列表3.2 超链接超链接3.2.1 路径路径3.2.2 建立超链接建立超链接3.3 样式样式3.3.1 CSS语法语法3.3.2 CSS 样式应用样式应用3.3.3 引用外部引用外部CSS文件与导出样式表文件与导出样式表思考题思考题3.1 文本的基本编辑文本的基本编辑 互联网上大量信息的传播以文本为互联网上大量信息的传播以文本为主。因此，对于网页制作人员来说，

2、主。因此，对于网页制作人员来说，文本的处理是最基本而重要的技巧之文本的处理是最基本而重要的技巧之一。一。 学习网页制作首先应掌握网页中文学习网页制作首先应掌握网页中文本的制作和编辑方法。本的制作和编辑方法。3.1.1 插入文本、符号、日期插入文本、符号、日期软回车和硬回车软回车和硬回车特殊字符特殊字符日期日期3.1.2 添加字体添加字体执行菜单命令执行菜单命令“文本文本”|“字体字体”|“编辑字体列表编辑字体列表” 3.1.3 设置文本的属性设置文本的属性图图3-4 文本的文本的“属性属性”面板面板【例【例3-1】设计一个只有文字的页面。对照设计界面和代码界面，设计一个只有文字的页面。对照设计

3、界面和代码界面，熟悉文本属性的标签。熟悉文本属性的标签。学习双标签学习双标签、及单标及单标签签、的使用的使用 文本的字体、字号、风格等属性以文本的字体、字号、风格等属性以CSS样式写在样式写在中中 自定义的自定义的CSS样式优先级高于网页样式样式优先级高于网页样式body,td,th 的优先级的优先级 3.1.4 建立列表建立列表 与列表有关的标签为与列表有关的标签为、等，格式、功能和样例见表等，格式、功能和样例见表3-2。 通过文本的通过文本的“属性属性”面板建立列表面板建立列表【例【例3-2】混合列表示例混合列表示例 3.2 超链接超链接 3.2.1 路径路径绝对路径绝对路径 ：是：是In

4、ternet上资源的完整地址。上资源的完整地址。 包括包括3部分：协议种类、放有所须文件的计算机地址（计部分：协议种类、放有所须文件的计算机地址（计算机域名）、具体文件的路径及文件名。算机域名）、具体文件的路径及文件名。协议协议:/计算机域名计算机域名/文件路径及文件名文件路径及文件名 创建对站点以外的链接必须用绝对路径。创建对站点以外的链接必须用绝对路径。 根相对路径根相对路径 ：从站点根文件夹到文档所经过的路程，：从站点根文件夹到文档所经过的路程，以斜杠以斜杠/开始，如开始，如/html/*.htm。 浏览器不能像服务器那样识别站点根目录，故与根目录浏览器不能像服务器那样识别站点根目录，故

5、与根目录相对的路径必须放在远程服务器上才能浏览相对的路径必须放在远程服务器上才能浏览 。文档相对路径文档相对路径 ：相对当前文档的路径：相对当前文档的路径 。3.2.2 建立超链接建立超链接建立超链接由锚点（建立超链接由锚点（anchor）标签）标签定义：定义： 热点热点 属性属性href指定超链接的目标网页地址，包括路径和文件名指定超链接的目标网页地址，包括路径和文件名 属性属性target指定超链接文件被打开的目标窗口，有如下指定超链接文件被打开的目标窗口，有如下4个选项：个选项： _blank：将链接的文件载入到新的无标题浏览器窗口中。：将链接的文件载入到新的无标题浏览器窗口中。 _pa

6、rent：将链接的文件载入到父框架，若该框架非嵌入式框架，则链接到：将链接的文件载入到父框架，若该框架非嵌入式框架，则链接到整个浏览器窗口。整个浏览器窗口。 _self（默认值）：将链接的文件载入到自身框架或自身窗口中。（默认值）：将链接的文件载入到自身框架或自身窗口中。 _top：将链接的文件载入到整个浏览器窗口中，并删除所有框架。：将链接的文件载入到整个浏览器窗口中，并删除所有框架。在在Dreamweaver中提供了中提供了6种常用的链接：外部文档链接、书种常用的链接：外部文档链接、书签链接、签链接、E-mail链接、无址链接、脚本链接和指向下载文件的链接、无址链接、脚本链接和指向下载文件

7、的链接。链接。 3.2.2 建立超链接建立超链接1外部文档链接外部文档链接指链接到本文档之外的文档，包括站内和站外的网页。指链接到本文档之外的文档，包括站内和站外的网页。 在热字在热字“属性属性”面板的面板的“链接链接”框中填入超链接的外部文档地址框中填入超链接的外部文档地址（属性（属性href的值的值)； 在在“目标目标”下拉列表框中设置超链接的目标窗口下拉列表框中设置超链接的目标窗口(属性属性target的值的值)。 2书签链接书签链接 热点热点 建立书签：建立书签：“插入插入”面板的面板的“命名锚记命名锚记” 按钮按钮 链接书签：链接书签： # 书签名。书签名。3无址链接无址链接返回页面

8、顶端，形成手形光标返回页面顶端，形成手形光标 热点热点 不返回页面顶端，形成手形光标不返回页面顶端，形成手形光标 热点热点 3.2.2 建立超链接建立超链接4E-mail链接（电子邮件链接）链接（电子邮件链接） 热点热点 “插入插入”面板中的面板中的“电子邮件链接电子邮件链接” 按钮按钮5脚本链接脚本链接 在选中热字的在选中热字的link框中直接写入脚本。框中直接写入脚本。 例：例：JavaScript:alert(确定删除吗确定删除吗)6指向下载文件的链接指向下载文件的链接 链接的目标文件不是链接的目标文件不是HTML文件，则作为下载文件，格式：文件，则作为下载文件，格式： 热点热点 【例【

9、例3-3】试制作外部文档链接、外部文档书签链接、本文档书试制作外部文档链接、外部文档书签链接、本文档书签链接、签链接、E-mail链接、无址链接和脚本链接。链接、无址链接和脚本链接。 3.3 样式样式 样式是一组可以控制文本块、段落或整篇文档外观的格式样式是一组可以控制文本块、段落或整篇文档外观的格式属性。使用外部样式文件可以一次控制若干篇文档的格式属性。使用外部样式文件可以一次控制若干篇文档的格式 。 CSS（Cascading Style Sheets）即级联样式表或层叠样）即级联样式表或层叠样式表通过样式名或式表通过样式名或HTML标签表示，可以控制绝大多数的传标签表示，可以控制绝大多数

10、的传统文本格式，如字体、字号和对齐方式等，还可以指定位置、统文本格式，如字体、字号和对齐方式等，还可以指定位置、鼠标指针形状和其他特殊效果。鼠标指针形状和其他特殊效果。 为了防止某些浏览器不识别某些为了防止某些浏览器不识别某些 CSS样式，可以用注释样式，可以用注释标签标签将将CSS样式括起来。样式括起来。 3.3.1 CSS语法语法 CSS 样式表位于样式表位于XHTML代码中的代码中的head标签内，标签内，由由3部分构成：选择符（部分构成：选择符（selector）、属性）、属性（properties）和属性值（）和属性值（value）：）： Selector properties1:

11、value1 ; /*第第1个属性名及属性值个属性名及属性值*/properties2 : value 2; /*第第2个属性名及属性值个属性名及属性值*/3.3.1 CSS语法语法规则规则 ：（1）标签选择符和选择符组：把相同属性和值的标签组合起来书）标签选择符和选择符组：把相同属性和值的标签组合起来书写，用逗号隔开。写，用逗号隔开。 如：如：p, tablefont-size:10pt （2）类选择符：可用于任意标签的自定义样式，标签名与自定义）类选择符：可用于任意标签的自定义样式，标签名与自定义样式名用西文点分隔。样式名用西文点分隔。 如：如：p.lefttext-align: left

12、 /*定义段落居左定义段落居左*/（3）ID选择符：只对某特定元素定义的单独的样式。选择符：只对某特定元素定义的单独的样式。 如：如：# righttext-align: right /*只对只对id=right的段落起作用的段落起作用*/（4）包含选择符：定义具有包含关系的元素样式。若标签）包含选择符：定义具有包含关系的元素样式。若标签1内包含内包含标签标签2，包含选择符只对标签，包含选择符只对标签1内的标签内的标签2有效，对单独的标签有效，对单独的标签1或标签或标签2无效。无效。 如：如：Table afont-size:16px /*只对表格内的链接起作用只对表格内的链接起作用*/ 样式

13、表具有层叠性，也称为继承性，即内层标签的样式继承外样式表具有层叠性，也称为继承性，即内层标签的样式继承外层标签的样式。层标签的样式。 3.3.2 CSS 样式应用样式应用先创建先创建CSS样式，再对选定文本应用样式，再对选定文本应用CSS样式。样式。对选定文本用了某对选定文本用了某CSS样式后，若又改变了该样样式后，若又改变了该样式的格式，则修改之前用了该样式的文本自动更式的格式，则修改之前用了该样式的文本自动更新格式。图新格式。图3-15 “CSS样式样式”面板面板CSS样式创建之后，只对本网页有效。以往创建样式创建之后，只对本网页有效。以往创建的的CSS样式不存在于新开文件的样式不存在于新

14、开文件的CSS样式列表样式列表中，新网页须重新附加中，新网页须重新附加CSS文件。文件。3.3.3 使用使用CSS 样式样式在新建在新建CSS样式窗口中，需要设置样式窗口中，需要设置3个参数：个参数：选择器类型选择器类型样式名称样式名称样式定义的范围样式定义的范围 3.3.3 使用使用CSS 样式样式1“类类”选择器选择器【例【例3-4】在文字上应用样式。在文字上应用样式。【例【例3-5】为图片设置具有透明效果（为图片设置具有透明效果（Alpha滤镜）、风滤镜）、风吹效果（吹效果（Blur滤镜）、黑白效果（滤镜）、黑白效果（Gray滤镜）、反相滤镜）、反相效果（效果（Invert滤镜）的样式。

15、滤镜）的样式。2“标签标签”选择器选择器3“高级高级”选择器选择器【例【例3-6】试取消鼠标指向超链接文本时超链接文本上试取消鼠标指向超链接文本时超链接文本上的下划线，并改变鼠标指向时的手形光标。的下划线，并改变鼠标指向时的手形光标。3.3.4 引用外部引用外部CSS文件与导出样式表文件与导出样式表1引用外部引用外部CSS文件文件“链接链接”是通过指针指向外部是通过指针指向外部CSS文件，文件，“导入导入”相当于存在内部样式表中，相当于存在内部样式表中，这个区别可以从它们在代码中的位置看到。这个区别可以从它们在代码中的位置看到。 /* 链接的链接的CSS文件文件 */【例【例3-7】在系统中查找在系统中查找help.css，并引入自己的网页。，并引入自己的网页。 3.3.4 引用外部引用外部CSS文件与导出样式表文件与导出样式表