Dreamweaver CS3网页制作融会贯通
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人

3.3 设置“链接”属性

“链接”属性用于对页面中的超链接的样式进行设置(关于超链接的相关知识将在第4章进行详细介绍),该设置对整个网页体中的超链接文本有效,可以令超链接呈现出个性化的效果。“链接”属性的设置内容主要包括链接字体、链接文字颜色以及下画线样式等几部分。

3.3.1 设置链接字体格式

“链接”属性中字体格式的设置与“外观”属性中字体格式的设置类似,主要包括链接字体、粗体、斜体和大小等,不同的是该部分设置只对超链接文本有效,不影响页面字体设置的效果,默认情况下,“链接字体”为“宋体”,各设置项如图3-15所示。

◆ 图3-15

① “链接字体”下拉列表框:设置链接字体。

② “粗体”按钮:将文本设为粗体显示。

“斜体”按钮:将文本设为斜体显示。

“大小”下拉列表框:设置字体大小。

“大小单位”下拉列表框:选择字体大小单位,常用单位有像素、点数和字体高。

3.3.2 设置链接文字颜色

设置链接文字颜色主要包括以下4方面的内容。

链接颜色:指默认超链接的颜色,即在没有鼠标光标经过且没有被激活的情况下超链接呈现的颜色。

变换图像链接:指当鼠标光标经过超链接时,文本呈现的颜色,如果将“链接颜色”和“变换图像链接”颜色设为不同,则鼠标光标经过该页中的超链接时,页面中的超链接就会出现颜色变换的视觉效果。

已访问链接:当超链接所指向的目标页面已在Web浏览器中被浏览过,则该超链接不会再呈现“链接颜色”定义的颜色,而呈现的是“已访问链接”定义的颜色

活动链接:当超连接被激活时(如按【Tab】键将焦点切换到该超链接上)呈现的颜色。

设置链接文字颜色的操作与设置文本颜色的操作相似,其各项设置如图3-16所示。

◆ 图3-16

“链接颜色”按钮和文本框:用于设置链接文本默认颜色。

“变换图像链接”按钮和文本框:用于设置鼠标光标经过时链接文本的颜色。

“已访问链接”按钮和文本框:用于设置已访问过的链接文本的颜色。

“活动链接”按钮和文本框:用于设置被激活时的链接文本颜色。

3.3.3 设置下画线样式

下画线主要起到突出重点的作用,为超链接设置下画线是用于提示访问者单击该超链接可以链接到其他页面。在“链接”属性的“下画线样式”下拉列表框中可以设置超链接的下画线样式,如图3-17所示。为超链接设置了下画线的实际显示效果如图3-18所示。

◆ 图3-17

◆ 图3-18

“下画线样式”下拉列表框的可选参数有以下4种。

“始终有下画线”:指超链接是否有鼠标光标经过,或者是否被激活,都将显示下画线。

“始终无下画线”:指超链接是否有鼠标光标经过,或者是否被激活,都不会显示下画线。

“仅在变换图像时显示下画线”:只有当鼠标光标经过超链接时才显示下画线,其他情况下都不显示下画线。

“变换图像时隐藏下画线”:只有当鼠标光标经过超链接时才隐藏下画线,其他情况下画线始终显示,这与“仅在变换图像时显示下画线”选项刚刚相反。

3.3.4 应用案例——为网页设置超链接样式

本小节主要讲解了设置“链接”属性的相关知识,下面将综合这些知识对“linkStyle.htm”网页中的超链接设置相应的“链接”属性,其设置前和设置后的对比效果如图3-19和3-20所示(CD:\效果\第3章\linkStyle.htm)

◆ 图3-19

◆ 图3-20

其具体操作步骤如下。

STEP 01. 选择命令。选择“文件/打开”命令打开“linkStyle.htm”网页(CD:\素材\第3章\linkStyle.htm),选择“修改/页面属性”命令,如图3-21所示。

◆ 图3-21

STEP 02. 设置链接字体。在打开的“页面属性”对话框的“分类”列表框中选择“链接”选项,设置大小为18像素(px),单击“粗体”按钮,如图3-22所示。

◆ 图3-22

STEP 03. 设置链接文本颜色。在“链接颜色”文本框中输入“#FF0000”,在“变换图像链接”文本框中输入“#0000FF”,在“已访问链接”文本框中输入“#990000”,在“活动链接”文本框中输入“#0000FF”,如图3-23所示。

◆ 图3-23

STEP 04. 设置下画线样式。在“下画线样式”下拉列表框中选择“仅在变换图像时显示下画线”选项,如图3-24所示,单击按钮,返回操作界面,按【Ctrl+S】组合键保存文档,按【F12】键预览网页,最终效果如图3-20所示。

◆ 图3-24