藉助得力工具快速製作CSS導覽功能表(附工具下載地址)

作者：易水寒

　　【IT168 實用技巧】隨著網頁標準化觀念深入人心，越來越多的網站採用了CSS架構。CSS架構的網頁不但符合W3C標準，並且還非常美觀。標準化網頁從漂亮的CSS菜單開始，如果你還在猶豫，那麼請看看下面這些CSS菜單示範吧，1、圖2：

　　點擊下載CSS Tab Designer

圖1 CSS導航效果

圖2 CSS導航效果

    眾所周知，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)依次排開，幾乎所有的操作都在主介面中完成，3。

圖3 主介面採用三列式布局

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

    當然，軟體內建樣式模版中的功能表項目都是英文，對於中文使用者並不適合，我們還需要做一些修改。主視窗左側“項目(Items)”中顯示當前的功能表項目，項目工具列排列多個按鈕，從左至右依次是：添加多重專案(Add Multiple Items)、添加項目(Add Item)、刪除項目(Delete Item)、上移(Move Up)、下移(Move Down)、編輯選擇項目(Edit Selected Item)，4。

圖4 功能表項目

    滑鼠雙擊任意當前項目即可進入編輯對話方塊，我們在這裡修改原始英文為所需中文即可，5。

圖5 修改原始英文為所需中文

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

圖6 中文亂碼

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

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

圖7 轉換編碼

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

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

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

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

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

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

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    CSS Tab Designer組建檔案的預設編碼為“ISO-8859-1”，修改為中文編碼“gb2312”即可，8：

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

圖8 編輯並修改產生的菜單代碼

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

　　點擊下載CSS Tab Designer