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ççå§ï¼æ麼樣ï¼æ²æäºç¢¼äºå§ï¼