快速製作CSS導覽功能表

來源:互聯網
上載者:User
隨著網頁標準化觀念深入人心,越來越多的網站採用了CSS架構。CSS架構的網頁不但符合W3C標準,並且還非常美觀。標準化網頁從漂亮的CSS菜單開始。

    眾所周知,CSS菜單都是一段代碼、一段代碼的編寫出來,產生漂亮菜單,今天給大家介紹一款小的軟體:CSS Tab Designer!

  點擊這裡下載該小軟體(1.35M)

    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檔案,筆者使用的系統內建的“記事本”,開啟檔案後,找到如下內容:

    <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" />

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

   得到的網頁滿意好上傳空間後,採用如下代碼調用:

<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的數值自己合適設定。

 

---------------------------------------------------------------

說明:

對每個導航項目有三種狀態:

為選中,選中,滑鼠hover。

預設情況下,將選中的那個li的id設為current,以區別其他情況,同時刻只能有一個current,即只有一個處於選中狀態。

 

 

       未選中         hover                選中  

 
因此,實際使用的時候還要配合js,以動態設定選中項目的id。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.