利用CSS Tab Designer做出高品質的頁籤
- 2008-11-23
- 54193
- 0
經由免費的 CSS Tab Designer 可以讓我們就能很輕鬆容易地建立一個「殺手級」的 CSS 網頁選單。用 CSS 建立網頁選單除了可以很美觀之外，利用 CSS 美化我們的選單，除了網頁大小得以減少之外，在日後的維護也會更加的方便容易，但使用 CSS 控制網頁選單，可能需要花點時間才能將選單控制得如我們心裡所預期，但經由 CSS Tab Designer 讓這一切變得再輕鬆不過了，只要我們先將選單項目文字列出來，再選擇一個我們喜歡的內建樣式，我們就可以馬上能看到我們的成果，並且可以將其中的 CSS 及 HTML 部份複製起來，或是將成果直接輸出成網頁檔。且其輸語法更是符合 XHTML 1.0 Transitional 或是 XHTML 1.0 Strict。
建議此文觀看者必須要有基本的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，而且內建的樣板相當多絕對是你想製作頁籤功能的第一選擇阿!!
回應討論