HOW TO:使用 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. [檔案] 功能表上,指向 [在瀏覽器中預覽],然後按一下要用來預覽網頁的網頁瀏覽器。

範例 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. [檔案] 功能表上,指向 [在瀏覽器中預覽],然後按一下要用來預覽網頁的網頁瀏覽器。

範例 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. [檔案] 功能表上,指向 [在瀏覽器中預覽],然後按一下要用來預覽網頁的網頁瀏覽器。

範例 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. [檔案] 功能表上,指向 [在瀏覽器中預覽],然後按一下要用來預覽網頁的網頁瀏覽器。

?考

如需有關 FrontPage 2003 中階層式樣式表的詳細資訊,請參閱 FrontPage 說明。如果要執行這項操作,請在 [說明] 功能表上,按一下 [Microsoft Office FrontPage 說明]。在 [搜尋] 方塊中,輸入階層式樣式表,然後按下 ENTER 以檢視所傳回的主題。

?考

如需詳細資訊,請按一下下面的文件編號,檢視「Microsoft 知識庫」中的文件:
196488 FP2000:What Are Cascading Style Sheets?
205996 HOW TO:Create Cascading Style Sheets in FrontPage 2000
240972 HOW TO:Remove Underlines from Hyperlinks in FrontPage 2000
222949 How to create hover effects for form buttons using DHTML and CSS in FrontPage 2000

屬性

文章編號: 825450 - 上次校閱: 2006年3月2日 - 版次: 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