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

文章翻译 文章翻译
文章编号: 825450 - 查看本文应用于的产品
有关本文的 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 知识库中相应的文章:
196488 FP2000:什么是级联样式表?
205996 如何在 FrontPage 2000 中创建级联样式表
240972 如何在 FrontPage 2000 中删除超链接的下划线
222949 如何在 FrontPage 2000 中使用 DHTML 和 CSS 为表单按钮创建悬停效果

属性

文章编号: 825450 - 最后修改: 2006年4月20日 - 修订: 2.2
这篇文章中的信息适用于:
  • Microsoft Office FrontPage 2003
关键字:?
kbhowto KB825450
Microsoft和/或其各供应商对于为任何目的而在本服务器上发布的文件及有关图形所含信息的适用性,不作任何声明。 所有该等文件及有关图形均"依样"提供,而不带任何性质的保证。Microsoft和/或其各供应商特此声明,对所有与该等信息有关的保证和条件不负任何责任,该等保证和条件包括关于适销性、符合特定用途、所有权和非侵权的所有默示保证和条件。在任何情况下,在由于使用或运行本服务器上的信息所引起的或与该等使用或运行有关的诉讼中,Microsoft和/或其各供应商就因丧失使用、数据或利润所导致的任何特别的、间接的、衍生性的损害或任何因使用而丧失所导致的之损害、数据或利润不负任何责任。

提供反馈

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com