如何在 FrontPage 2003 中使用级联样式表创建自定义超链接

针对 Office 2003 的支持已终止

Microsoft 已于 2014 年 4 月 8 日终止了针对 Office 2003 的支持。该更改已影响到您的软件更新和安全选项。 了解这一措施对于您的含义以及如何继续保持受保护状态。

有关本文的 Microsoft FrontPage 2002 版本,请参见 287706
概要
本文介绍如何在 Microsoft Office FrontPage 2003 中使用级联样式表 (CSS) 创建自定义超链接。其中包含演示如何使用级联合样式表功能创建自定义超链接的示例。

注意:可能不是所有 Web 浏览器中都支持本文中介绍的级联样式表功能。有关更多信息,请参阅 FrontPage 帮助。为此,请在“帮助”菜单上单击“Microsoft FrontPage 帮助”,在“搜索”栏中键入级联样式表兼容性,然后按 Enter 查看返回的主题。

返回页首

使用级联样式表创建自定义超链接

下面的示例演示如何使用级联样式表功能创建自定义超链接:

Microsoft 提供的编程示例只用于说明目的,不附带任何明示或默示的保证。这包括但不限于对适销性或特定用途适用性的默示保证。本文假定您熟悉所演示的编程语言和用于创建和调试过程的工具。Microsoft 的支持工程师可以帮助解释某个特定过程的功能,但是他们不会修改这些示例以提供额外的功能或构建过程以满足您的特殊需求。注意:如果将本文中的示例直接复制并粘贴到 FrontPage 中,您可能会收到错误消息,或者网页可能无法正确显示。尖括号(< 和 >)可能显示为 HTML 代码。要解决此问题,请首先将代码示例粘贴到记事本中的空白文档中,然后将代码示例从记事本的该文档复制到 FrontPage 的网页中。

返回页首

示例 1:创建仅下划线用不同颜色显示的超链接

此示例将超链接的文本格式的颜色设置为与文档文本的颜色相同。仅超链接的下划线用不同颜色显示。要创建自定义超链接,请按照下列步骤操作:
  1. 启动 FrontPage 并创建一个新的空白网页。
  2. 在“视图”菜单上单击“网页”,然后单击网页底部的“代码”。
  3. 在网页的“<head></head>”区域中插入下列代码:
    <style>body      { color: black; background-color: white; font-family: arial }a         { color: black; text-decoration: none; border-bottom-style: solid; border-bottom-width: 1px }a:link    { border-bottom-color: blue }a:visited { border-bottom-color: purple }a:hover   { border-bottom-color: green }a:active  { border-bottom-color: red }</style>
  4. 在网页的“<body></body>”区域中插入下列代码:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p><p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p>
  5. 在“文件”菜单上,单击“保存”。
  6. 在“另存为”对话框中,指定要保存文件的位置,在“文件名”框中键入 Example1,然后单击“保存”。
  7. 在“文件”菜单上指向“在浏览器中预览”,然后单击要用于预览网页的 Web 浏览器。
返回页首

示例 2:创建使用悬停按钮的超链接

此示例创建悬停样式按钮并显示纯背景色的超链接。要创建自定义超链接,请按照下列步骤操作:
  1. 启动 FrontPage 并创建一个新的空白网页。
  2. 在“视图”菜单上单击“网页”,然后单击网页底部的“代码”。
  3. 在网页的“<head></head>”区域中插入下列代码:
    <style>body      { color: black; background-color: white; font-family: arial }a         { text-decoration: none; padding: 3px }a:link    { color: white; background-color: blue }a:visited { color: white; background-color: purple }a:hover   { color: white; background-color: green }a:active  { color: white; background-color: red }</style>
  4. 在网页的“<body></body>”区域中插入下列代码:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p><p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p>
  5. 在“文件”菜单上,单击“保存”。
  6. 在“另存为”对话框中,指定要保存文件的位置,在“文件名”框中键入 Example2,然后单击“保存”。
  7. 在“文件”菜单上指向“在浏览器中预览”,然后单击要用于预览网页的 Web 浏览器。
返回页首

示例 3:创建使用轮廓按钮的超链接

此示例创建使用带有轮廓的悬停样式按钮的超链接。超链接文本周围会显示彩色框,产生轮廓效果。要创建自定义超链接,请按照下列步骤操作:
  1. 启动 FrontPage 并创建一个新的空白网页。
  2. 在“视图”菜单上单击“网页”,然后单击网页底部的“代码”。
  3. 在网页的“<head></head>”区域中插入下列代码:
    <style>body      { color: black; background-color: white; font-family: arial }a         { color: black; text-decoration: none; border-style: solid; border-width: 2px; padding: 2px }a:link    { border-color: blue }a:visited { border-color: purple }a:hover   { border-color: green }a:active  { border-color: red }</style>
  4. 在网页的“<body></body>”区域中插入下列代码:
    <p>Please see <a href="http://www.microsoft.com">http://www.microsoft.com</a> for more.</p><p>Please see <a href="http://www.msn.com">http://www.msn.com</a> for more.</p>
  5. 在“文件”菜单上,单击“保存”。
  6. 在“另存为”对话框中,指定要保存文件的位置,在“文件名”框中键入 Example3,然后单击“保存”。
  7. 在“文件”菜单上指向“在浏览器中预览”,然后单击要用于预览网页的 Web 浏览器。
返回页首

示例 4:创建使用不同文本格式的超链接

此示例将超链接的格式设置为使用不带下划线的小写斜体文本。当您将指针移到超链接上时,超链接文本将转换为大写。要创建自定义超链接,请按照下列步骤操作:
  1. 启动 FrontPage 并创建一个新的空白网页。
  2. 在“视图”菜单上单击“网页”,然后单击网页底部的“代码”。
  3. 在网页的“<head></head>”区域中插入下列代码:
    <style>body      { color: black; background-color: white; font-family: arial }a         { text-decoration: none; font-style: italic; text-transform: lowercase }a:link    { color: blue; font-weight: bold }a:visited { color: purple }a:hover   { color: green; text-transform: uppercase }a:active  { color: red  }</style>
  4. 在网页的“<body></body>”区域中插入下列代码:
    <p>Please see <a href="http://www.microsoft.com">http://WWW.microsoft.COM</a> for more.</p><p>Please see <a href="http://www.msn.com">http://WWW.msn.COM</a> for more.</p>
  5. 在“文件”菜单上,单击“保存”。
  6. 在“另存为”对话框中,指定要保存文件的位置,在“文件名”框中键入 Example4,然后单击“保存”。
  7. 在“文件”菜单上指向“在浏览器中预览”,然后单击要用于预览网页的 Web 浏览器。
返回页首
参考
有关 FrontPage 2003 中的级联样式表的更多信息,请参阅 FrontPage 帮助。为此,请在“帮助”菜单上单击“Microsoft Office FrontPage 帮助”。在“搜索”框中,键入级联样式表,然后按 Enter 查看返回的主题。

返回页首
参考
有关其他信息,请单击下面的文章编号,以查看 Microsoft 知识库中相应的文章:
196488FP2000:什么是级联样式表?
205996 如何在 FrontPage 2000 中创建级联样式表
240972 如何在 FrontPage 2000 中删除超链接的下划线
222949 如何在 FrontPage 2000 中使用 DHTML 和 CSS 为表单按钮创建悬停效果
fp2003
属性

文章 ID:825450 - 上次审阅时间:04/20/2006 10:58:00 - 修订版本: 2.2

Microsoft Office FrontPage 2003

  • kbhowto KB825450
反馈