隨著網(wǎng)頁標(biāo)準(zhǔn)化觀念深入人心，越來越多的網(wǎng)站采用了CSS架構(gòu)。CSS架構(gòu)的網(wǎng)頁不但符合W3C標(biāo)準(zhǔn)，并且還非常美觀。標(biāo)準(zhǔn)化網(wǎng)頁從漂亮的CSS菜單開始。

眾所周知，CSS菜單都是一段代碼、一段代碼的編寫出來，生成漂亮菜單，今天給大家介紹一款小的軟件：CSS Tab Designer！

點(diǎn)擊這里下載該小軟件 (1.35M)

CSS Tab Designer是一款使用CSS來設(shè)計(jì)導(dǎo)航菜單的可視化軟件，軟件內(nèi)置60多種不同風(fēng)格的樣式，只需修改現(xiàn)成樣式模版，就能快速生成CSS菜單。特別值 得一提的是，軟件生成的XHTML代碼嚴(yán)格遵循網(wǎng)頁標(biāo)準(zhǔn)，創(chuàng)建的CSS菜單兼容各種主流瀏覽器，無論是系統(tǒng)自帶的Internet Explorer，還是Firefox、Opera、Netscape都不會(huì)有問題。

CSS Tab Designer操作很簡單，主界面采用三列式布局：項(xiàng)目(Items)、樣式(Tab Styles)、預(yù)覽(Preview)依次排開，幾乎所有的操作都在主界面中完成，如圖。

新建菜單的步驟非常簡單，在“樣式(Tab Styles)”中預(yù)制了60余種風(fēng)格各異的菜單樣式，先選擇需要的樣式，接下來點(diǎn)擊左側(cè)“項(xiàng)目(Items)”中的“用樣本填充(Fill with samples)”，立即就可以在“預(yù)覽(Preview)”中看到效果，菜單就算生成了。

當(dāng)然，軟件內(nèi)置樣式模版中的菜單項(xiàng)目都是英文，對于中文用戶并不適合，我們還需要做一些修改。主窗口左側(cè)“項(xiàng)目(Items)”中顯示當(dāng)前的菜單項(xiàng)目，項(xiàng)目工具欄排列多個(gè)按鈕，從左到右依次是：添加多個(gè)項(xiàng)目(Add Multiple Items)、添加項(xiàng)目(Add Item)、刪除項(xiàng)目(Delete Item)、上移(Move Up)、下移(Move Down)、編輯選擇項(xiàng)目(Edit Selected Item)，如圖。

鼠標(biāo)雙擊任意當(dāng)前項(xiàng)目即可進(jìn)入編輯對話框，我們在這里修改原始英文為所需中文即可，如圖。

將所有內(nèi)容修改完畢后，就可以在預(yù)覽區(qū)看到效果了。此時(shí)，我們發(fā)現(xiàn)菜單上的文字并不是預(yù)期中出現(xiàn)的中文，而是一些亂碼，這是為什么呢？如圖。

CSS Tab Designer是一款英文軟件，預(yù)置編碼是針對英語系網(wǎng)頁的，所以我們需要手工修改編碼為中文。由于軟件本身并不具備代碼編輯功能，我們將在CSS菜單網(wǎng)頁文件生成后再做修改。

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

不覺間，CSS菜單已經(jīng)做好，接下來輸出文件。點(diǎn)擊軟件工具欄上“創(chuàng)建HTML(Generate HTML)”按鈕，系統(tǒng)轉(zhuǎn)入保存對話框。本例：選擇保存文件夾：D:/web，輸入文件名：menu，點(diǎn)擊“保存”按鈕完成。

前面已經(jīng)說過，軟件默認(rèn)生成的網(wǎng)頁編碼是英語系的，接下來，我們開始做編碼修改工作。

進(jìn)入D:/web目錄，一般可以看到兩個(gè)文件：

menu.html，生成的CSS菜單網(wǎng)頁。

menu1.gif，CSS菜單調(diào)用的相關(guān)圖片，實(shí)際情況下文件名可能略有不同。

你可以用任意文本編輯器打開menu.html文件，筆者使用的系統(tǒng)自帶的“記事本”，打開文件后，找到如下內(nèi)容：

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

CSS Tab Designer生成文件的默認(rèn)編碼為“ISO-8859-1”，修改為中文編碼“gb2312”即可，如圖：

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

就這樣簡單，保存修改結(jié)果，再次打開menu.html看看吧，怎么樣，沒有亂碼了吧！

得到的網(wǎng)頁滿意好上傳空間后，采用如下代碼調(diào)用：

<DIV align=center><IFRAME style="WIDTH: 246px; HEIGHT: 158px" marginWidth=0 marginHeight=0 src="上傳后的地址" frameBorder=0 width=100 scrolling=no height=100></IFRAME></DIV>

代碼：WIDTH: 246px; HEIGHT: 158px的數(shù)值自己合適設(shè)置。

------------------------------------－－－－－－－－－－－－－－－－－－－－－－－－－－－

說明：

對每個(gè)導(dǎo)航項(xiàng)目有三種狀態(tài)：

為選中，選中，鼠標(biāo)hover。

默認(rèn)情況下，將選中的那個(gè)li的id設(shè)為current，以區(qū)別其他情況，同時(shí)刻只能有一個(gè)current，即只有一個(gè)處于選中狀態(tài)。

因此，實(shí)際使用的時(shí)候還要配合js，以動(dòng)態(tài)設(shè)置選中項(xiàng)目的id。

快速制作CSS導(dǎo)航菜單