快速製作CSS導航選單教_CSS/HTML

隨著網頁標準化觀念深入人心，越來越多的網站採用了CSS架構。 CSS架構的網頁不但符合W3C標準，而且還非常美觀。標準化網頁從漂亮的CSS選單開始。眾所皆知，CSS選單都是一段程式碼、一段程式碼的寫出來，產生漂亮選單，今天要為大家介紹一款小型的軟體：CSS Tab Designer！

　 CSS Tab Designer是一款使用CSS來設計導航選單的視覺化軟體，軟體內建60多種不同風格的樣式，只需修改現成樣式模版，就能快速產生CSS選單。特別值 得一提的是，軟體產生的XHTML程式碼嚴格遵循網頁標準，創建的CSS選單相容於各種主流瀏覽器，無論是系統自帶的Internet Explorer，或是Firefox、Opera、Netscape都不會有問題。

 CSS Tab Designer操作很簡單，主介面採用三列式佈局：項目(Items)、樣式(Tab Styles)、預覽(Preview)依序排開，幾乎所有的操作都在主介面中完成，如圖。

 新建選單的步驟非常簡單，在「樣式(Tab Styles)」中預製了60餘種風格各異的選單樣式，先選擇所需的樣式，接下來點選左側「項目(Items)」中的“用樣本填充(Fill with samples)”，立即就可以在“預覽(Preview)”中看到效果，菜單就算生成了。

 當然，軟體內建樣式模版的選單項目都是英文，對於中文使用者並不適合，我們還需要做一些修改。主視窗左側「項目(Items)」中顯示目前的選單項目，項目工具列排列多個按鈕，從左到右依序為：新增多個項目(Add Multiple Items)、新增項目(Add Item)、刪除項目(Delete Item)、上移(Move Up)、下移(Move Down)、編輯選擇項目(Edit Selected Item)，如圖。

 滑鼠雙擊任何目前項目即可進入編輯對話框，我們在這裡修改原始英文為所需中文即可，如圖。

 將所有內容修改完畢後，就可以在預覽區看到效果了。此時，我們發現選單上的文字不是預期中出現的中文，而是一些亂碼，這是為什麼呢？如圖。

 CSS Tab Designer是一款英文軟體，預置編碼是針對英文系網頁的，所以我們需要手動修改編碼為中文。由於軟體本身並不具備程式碼編輯功能，我們將在CSS選單網頁檔案產生後再做修改。

 預覽時面對亂碼還是不太好，你可以在預覽區空白處點擊右鍵，在右鍵選單中選擇“編碼→簡體中文(gb2312)”，預覽效果即恢復正常，如圖。

 不覺間，CSS選單已經做好，接下來輸出檔。點選軟體工具列上「建立HTML(Generate HTML)」按鈕，系統轉入儲存對話方塊。本範例：選擇儲存資料夾：D:web，輸入檔名：menu，點選「儲存」按鈕完成。

 前面已經說過，軟體預設產生的網頁編碼是英文系的，接下來，我們開始做編碼修改工作。

 進入D:web目錄，一般可以看到兩個檔案：

menu.html，產生的CSS選單網頁。

 menu1.gif，CSS選單調用的相關圖片，實際情況下檔案名稱可能略有不同。

你可以用任意文字編輯器開啟menu.html文件，筆者使用的系統自帶的“記事本”，開啟文件後，找到以下內容：

 CSS Tab Designer產生檔案的預設編碼為“ISO-8859-1”，修改為中文編碼“gb2312”即可，如圖：

 

 就這樣簡單，儲存修改結果，再次打開menu.html看看吧，怎麼樣，沒有亂碼了吧！