Toggle main menu visibility
新聞
下載
教材
影音
討論
其他選單
好站連結
行事曆
電子相簿
常見問題
萬用表單
即時留言簿
友站消息
社大學員
:::
登入
登入
帳號
密碼
登入
重整畫面
:::
所有書籍
「[1001]XOOPS網站門面專業設計」目錄
MarkDown
17. XOOPS佈景速成
1. 認識HTML、CSS
2. HTML基礎
3. 表格、圖片與版型
4. 連結、列表與組圖
4-1 上課範例
5. 認識HTML5
5-1 上課範例
6. 套用CSS
6-1 上課練習
7. CSS於區塊的應用
7-1 上課範例：index4.html
7-2 上課範例：style2.css
8. 表格、清單、超連結
8-1 上課範例：index4.html
8-2 上課範例：style2.css
9. CSS的位置控制
9-1 上課範例：index4.html
9-2 上課範例：style2.css
10-1 上課範例：index.html
10-2 上課範例：style.css
11. XOOPS佈景
11-1 需改造網站
12. 將網頁轉為樣板
12-1 上課範例：theme.html
12-2 上課範例：style.css
13. 整修、測試佈景
13-1 block.html
13-2 block_center.html
13-3 style.css
14. 線上修改樣板
14-1 上課範例：theme.html
14-2 上課範例：block_right.html
14-3 上課範例：style.css
14-4 上課範例：block.html
15. 實用CSS技巧
16. 樣板整合
16-1 上課範例：theme.html
16-2 上課範例：style.css
16-3 上課範例：block_right.html
16-4 上課範例：loginhtml
17. XOOPS佈景速成
18. 認識CSS Sprites
18-1 範例一：左半的圖
18-2 範例二：右半邊的圖
18-3 範例三：滑鼠移過切換（IE6相容版）
18-4 範例四：框出裡面的選項
18-5 範例五：完整版
18-1 範例一：左半的圖
\[1001\]XOOPS網站門面專業設計 ===================== [](http://www.tad0616.net/uploads/tad_book3/file/1001/18.zip) ### 一、 何謂CSS Sprites 1. CSS Sprites就是將許多小圖併成一張大圖，並以CSS的定位方式來讓某圖示出現。 2. 例子：FCK編輯器的工具列、http://tw.yahoo.com/的小圖示。優點： - (1) 效能好！減少了網頁的http請求，從而大大的提高了頁面的性能！ - (2) 就當前網絡速度而言，不大於200KB的單張圖片的所需載入時間基本是差不多的，載入10張2K的圖，比載入一張20K的圖，可能需要多好幾倍時間。也就是說一張大圖比許多小圖的存取來得快，加上瀏覽器快取，可以讓圖示的呈現更為順暢。 - (3) 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。 ### 二、 CSS Sprites原理 CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」、「background- repeat」、「background-position」的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。 ### 三、 CSS Sprites相關工具 1. 可快速定位出某一個圖示：http://www.floweringmind.com/sprite-creator/index.php 2. 可將許多小圖進行合併：http://cn.spritegen.website-performance.org/ ### 四、 CSS Sprites範例 ### 方法一 <style type="text/css"> ul#menu{ width:200px; height:297px; background:url(bg\_studygroup.png) 0px 0px no-repeat; list-style:none; padding:0px; margin:0px; position:relative; } ul#menu li a{ width:125px; height:40px; position:absolute; left:65px; } li.b1 a{top:87px;} li.b2 a{top:135px;} li.b3 a{top:183px;} li.b4 a{top:233px;} li.b1 a:hover{background:url(bg\_studygroup.png) -265px -87px no-repeat;} li.b2 a:hover{background:url(bg\_studygroup.png) -265px -135px no-repeat;} li.b3 a:hover{background:url(bg\_studygroup.png) -265px -183px no-repeat;} li.b4 a:hover{background:url(bg\_studygroup.png) -265px -233px no-repeat;} </style> <ul id="menu"> <li class="b1"><a title="年度計畫" href="#"></a></li> <li class="b2"><a title="書單" href="#"></a></li> <li class="b3"><a title="心得分享" href="#"></a></li> <li class="b4"><a title="佳作欣賞" href="#"></a></li> </ul> ### 方法二 <style type="text/css"> ul#menu {width:200px; height: 212px; padding: 85px 0 0 0; background: url(bg\_studygroup.png) no-repeat left top;} ul#menu li { list-style: none;} ul#menu li a { width: 200px; height: 48px; display: block;} li.b1 a:hover { background: url(bg\_studygroup.png) no-repeat -200px -85px;} li.b2 a:hover { background: url(bg\_studygroup.png) no-repeat -200px -133px;} li.b3 a:hover { background: url(bg\_studygroup.png) no-repeat -200px -181px;} li.b4 a:hover { background: url(bg\_studygroup.png) no-repeat -200px -229px;} </style> <ul id="menu"> <li class="b1"><a title="年度計畫" href="#"></a></li> <li class="b2"><a title="書單" href="#"></a></li> <li class="b3"><a title="心得分享" href="#"></a></li> <li class="b4"><a title="佳作欣賞" href="#"></a></li> </ul>
:::
搜尋
search
進階搜尋
QR Code 區塊
快速登入
所有討論區
「PHP全端開發」線上課程討論區
XOOPS使用討論區
一般研習學員
社大學員專用
路過哈啦區
XOOPS佈景設計
XOOPS模組開發
Tad書籍區
即時留言簿
書籍目錄
展開
|
闔起
線上使用者
89
人線上 (
14
人在瀏覽
線上書籍
)
會員: 0
訪客: 89
更多…
17. XOOPS佈景速成
