眾所周知，CSS菜單都是一段代碼、一段代碼的編寫(xiě)出來(lái)，生成漂亮菜單，今天給大家介紹一款小的軟件：CSS Tab Designer！
點(diǎn)擊這里下載該小軟件(1.35M)
CSS Tab Designer是一款使用CSS來(lái)設計導航菜單的可視化軟件，軟件內置60多種不同風(fēng)格的樣式，只需修改現成樣式模版，就能快速生成CSS菜單。特別值得一提的是，軟件生成的XHTML代碼嚴格遵循網(wǎng)頁(yè)標準，創(chuàng )建的CSS菜單兼容各種主流瀏覽器，無(wú)論是系統自帶的Internet Explorer，還是Firefox、Opera、Netscape都不會(huì )有問(wèn)題。
CSS Tab Designer操作很簡(jiǎn)單，主界面采用三列式布局：項目(Items)、樣式(Tab Styles)、預覽(Preview)依次排開(kāi)，幾乎所有的操作都在主界面中完成，如圖。
新建菜單的步驟非常簡(jiǎn)單，在“樣式(Tab Styles)”中預制了60余種風(fēng)格各異的菜單樣式，先選擇需要的樣式，接下來(lái)點(diǎn)擊左側“項目(Items)”中的“用樣本填充(Fill with samples)”，立即就可以在“預覽(Preview)”中看到效果，菜單就算生成了。
當然，軟件內置樣式模版中的菜單項目都是英文，對于中文用戶(hù)并不適合，我們還需要做一些修改。主窗口左側“項目(Items)”中顯示當前的菜單項目，項目工具欄排列多個(gè)按鈕，從左到右依次是：添加多個(gè)項目(Add Multiple Items)、添加項目(Add Item)、刪除項目(Delete Item)、上移(Move Up)、下移(Move Down)、編輯選擇項目(Edit Selected Item)，如圖。
鼠標雙擊任意當前項目即可進(jìn)入編輯對話(huà)框，我們在這里修改原始英文為所需中文即可，如圖。
將所有內容修改完畢后，就可以在預覽區看到效果了。此時(shí)，我們發(fā)現菜單上的文字并不是預期中出現的中文，而是一些亂碼，這是為什么呢？如圖。
CSS Tab Designer是一款英文軟件，預置編碼是針對英語(yǔ)系網(wǎng)頁(yè)的，所以我們需要手工修改編碼為中文。由于軟件本身并不具備代碼編輯功能，我們將在CSS菜單網(wǎng)頁(yè)文件生成后再做修改。
預覽時(shí)面對亂碼還是不太好，你可以在預覽區空白處點(diǎn)擊右鍵，在右鍵菜單中選擇“編碼→簡(jiǎn)體中文(gb2312)”，預覽效果即恢復正常，如圖。
不覺(jué)間，CSS菜單已經(jīng)做好，接下來(lái)輸出文件。點(diǎn)擊軟件工具欄上“創(chuàng )建HTML(Generate HTML)”按鈕，系統轉入保存對話(huà)框。本例：選擇保存文件夾：D:\web，輸入文件名：menu，點(diǎn)擊“保存”按鈕完成。
前面已經(jīng)說(shuō)過(guò)，軟件默認生成的網(wǎng)頁(yè)編碼是英語(yǔ)系的，接下來(lái)，我們開(kāi)始做編碼修改工作。
進(jìn)入D:\web目錄，一般可以看到兩個(gè)文件：
menu.html，生成的CSS菜單網(wǎng)頁(yè)。
menu1.gif，CSS菜單調用的相關(guān)圖片，實(shí)際情況下文件名可能略有不同。
你可以用任意文本編輯器打開(kāi)menu.html文件，筆者使用的系統自帶的“記事本”，打開(kāi)文件后，找到如下內容：
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
CSS Tab Designer生成文件的默認編碼為“ISO-8859-1”，修改為中文編碼“gb2312”即可，如圖：
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
就這樣簡(jiǎn)單，保存修改結果，再次打開(kāi)menu.html看看吧，怎么樣，沒(méi)有亂碼了吧！
聯(lián)系客服
