水平導航

本章我們將學習如何向網站新增水平導航或選單項。

步驟 1 − 要建立選單項或水平導航，讓我們在index.html檔案的<div id = “top-nav”>中新增以下程式碼，其中包含選單項列表。

<div id = "top-nav"> 
   <ul> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
   </ul> 
</div>

步驟 2 − 這是一個簡單的頂部選單專案符號列表。要建立超連結，請轉到設計檢視或程式碼檢視。

步驟 3 − 選擇要用作超連結的專案，然後按 Ctrl + K。

步驟 4 − 點選螢幕提示…按鈕。

步驟 5 − 輸入您想要的螢幕提示文字，然後點選確定。

步驟 6 − 在顯示文字欄位中，輸入首頁，然後選擇index.html檔案，然後點選確定。

步驟 7 − 同樣，為其他選單項新增超連結，如下面的程式碼所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset=utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"></style> 
      <link href = "sample.css" rel="stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <div id = "container"> 
         <div id = "header"></div> 
         <div id = "top-nav"> 
            <ul> 
               <li><a href = "index.html" title = "Site Home Page">Home</a></li> 
               <li><a href = "index.html" title = "Menu Item 1.">Menu Item 1</a></li> 
               <li><a href = "index.html" title =  "Menu Item 2.">Menu Item 2</a></li> 
               <li><a href = "index.html" title = "Menu Item 3.">Menu Item 3</a></li> 
            </ul> 
         </div> 
         <div id = "left-nav"> </div> 
         <div id = "main-content"> </div> 
         <div id = "footer"> </div> 
      </div> 
   </body>  
</html>

步驟 8 − 要設定頂部導航的樣式，請轉到管理樣式面板。