閃光區
demo當選微軟2009年度第三季最有價值專家
demo獲得藍色小舖2009高級專家認證
demo獲得藍色小舖2009資訊專家貢獻獎
認證徽章
工商時間
 
demo小鋪

利用CSS Tab Designer做出高品質的頁籤

經由免費的 CSS Tab Designer 可以讓我們就能很輕鬆容易地建立一個「殺手級」的 CSS 網頁選單。用 CSS 建立網頁選單除了可以很美觀之外,利用 CSS 美化我們的選單,除了網頁大小得以減少之外,在日後的維護也會更加的方便容易,但使用 CSS 控制網頁選單,可能需要花點時間才能將選單控制得如我們心裡所預期,但經由 CSS Tab Designer 讓這一切變得再輕鬆不過了,只要我們先將選單項目文字列出來,再選擇一個我們喜歡的內建樣式,我們就可以馬上能看到我們的成果,並且可以將其中的 CSS 及 HTML 部份複製起來,或是將成果直接輸出成網頁檔。且其輸語法更是符合 XHTML 1.0 Transitional 或是 XHTML 1.0 Strict。
  • 檔案名稱:CSS Tab Designer
  • 官方網站http://www.highdots.com/
  • 檔案大小:免費軟體
  • 檔案版本:1.36 MB

建議此文觀看者必須要有基本的HTML和CSS的能力,因為demo省略很多不是本文的重點,如果你對HTML和CSS完全不懂,你也一定看不懂此文。

 

下載CSS Tab Designer安裝程式開啟它


當你選定好了你要得頁籤後,按下Generate HTML會在你選擇的目錄底下跑出至少三個檔案,將圖檔複製到你的網頁目錄下,然後將HTML檔案開啟


複製<style type="text/css">到</style>中間的語法貼到aspx網頁中</head>標籤上方


然後再將以下區塊內的HTML語法複製下來


貼上vs內吧


馬上來預覽一下,恩很正常

不過看一下HTML這是寫死的用法,不太可能運用在我們的動態頁面上所以demo的第一個想法就是把文字改成LinkButton


但是預覽後卻變成這樣

 

再經過了一段修改CSS與原始碼比對後demo才想到了一個超簡單的解決方式,就是將<span>移到LinkButton文字前,這樣子就完全不需改變程式產生的CSS檔非常的好用。


看清楚阿,第一個頁籤已經改成LinkButton了,這樣子我們可以很快速的製作出美觀又實用的TAB,而且內建的樣板相當多絕對是你想製作頁籤功能的第一選擇阿!!

 
 
加入此網頁到:Google Bookmarks
加入此網頁到:Yahoo! My Web
加入此網頁到:Baidu
加入此網頁到:MyShare
加入此網頁到:udn
加入此網頁到:furl
加入此網頁到:Del.icio.us
加入此網頁到:YouPush
加入此網頁到:Digg
加入此網頁到:你推我報
加入此網頁到:technorati
加入此網頁到:HemiDemi
 
相關的文章(隨機)

將本文推到 Plurk
將本文推到 Facebook
將本文推到 Twitter
將本文產生 PDF 保存
 

網友留言

狐狸
發表於:2010-03-30
Demo大 我是新來的 正在閱覽您的文章
CSS Tab Designer對我這美術笨蛋真的很有用

所以試了一下 發現最後一張圖有些問題
用了LinkButton後 前面的A標籤是否應該就拿掉了?
否則圖還是會有問題

感謝您的分享~

看起來應該是要拿掉的

新增評論
* 暱稱
E-mail (本站使用Gravatar頭像E-mail不會顯示於網站上)
不填寫email將不會收到回覆通知。
網站
* 評論
不打勾才可留言
demo小鋪
 .