1. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw CSS 串接式樣式表 講 師：楊國棟

2. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 大綱 藝廊型網頁設計賞析（ 6/13 ） 部落格型網頁設計賞析（ 6/20 ）

3. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 藝廊型

4. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 樣版的組成 header lead content footer navigation

5. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 原始碼部分 椅子 桌子 家具 飾品 椅子 這是虛擬商店「 CascadingStyleSheet 」的藝廊頁面。...... All rights reserved CascadingStyleSheet & Co. 2004-2005

6. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw head 的設定 藝廊 // 讀取外部的 CSS 【 version4.css 】 // 讀取外部的 CSS 【 version4.css 】

7. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw Version4.css @charset "BIG5"; body { color: #000000; background: #ffffff; } a img { border: none; color: #ffffff; background: transparent; } 為 Netscape Navigator 4.x 與 Internet Explorer 4.0 設計的指定 1. 頁面整體文字的顏色與背景 2. 消除超連結圖片周圍的框線

8. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw Import.css @charset “BIG5”; /* 設定字集為 Big 5*/ @import “base.css”; /* 讀取外部 CSS 【 base.css 】 */ @media tty { /*IE5.0 與 IE5.5 發生錯誤時，改讀取【 ie5win.css 】 */ i{content:"\";/*" "*/}} @import 'ie5win.css'; /*";} }/* */

9. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw Base.css- 頁面整體與頁首 /* 頁面整體 */ body { margin: 0; padding: 0; color: #ffffff; // 文字顏色設定為白色 background: #653818 url(../images/back.jpg); // 設定背景圖片及背景顏色 } /* 頁首 */ #header img { vertical-align: bottom; // 將頁首的圖片貼齊下方，避免出現間隙 }

10. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 導覽設計概念 li 110 301 416 531 646 5

11. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw Base.css- 導覽 ul#navigation { position: relative; // 設定為相對位置 margin: 0; padding: 0; list-style: none; } ul#navigation li { position: absolute; // 設定為絕對位置 top: -25px; display: block; width: 110px; height: 28px; margin: 0; padding: 0; text-indent: -9999px; // 文字部分隱藏起來 } ul#navigation li#chairs { left: 301px; background: url(../images/tab-c.gif) no-repeat; } ul#navigation li#tables { left: 416px; background: url(../images/tab-t.gif) no-repeat; } ul#navigation li#furniture { left: 531px; background: url(../images/tab-f.gif) no-repeat; } ul#navigation li#accessories { left: 646px; background: url(../images/tab-a.gif) no-repeat; } ul#navigation a { display: block; width: 110px; height: 28px; text-decoration: none; }

12. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 導文設計概念 Lead width:531px 1.5em 45px 1.5em 180px 背景圖 1.5 倍行高 小字型 文字顏色 #653818

13. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw Base.css- 標題與導文 h1 { // 文字採絕對位置隱藏於網頁左側 position: absolute; left: -999px; width: 990px; } #lead { margin: 0; padding: 1.5em 45px 1.5em 180px; // 向右移 180px 空出空間讓背景圖可以呈現 border-top: 3px solid #b8a68a; width: 531px; line-height: 1.5; font-size: x-small; color: #653818; background: #e0d8cb url(../images/heading1.gif) left no-repeat; }

14. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 內容設計概念 -1 Content width:675px 32px 36px 23px 45px 行高： 95px

15. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 內容設計概念 -2 2px 9px

16. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw Base.css- 內容 #content { padding: 32px 36px 23px 45px; width: 675px; line-height: 95px; color: #653818; background: #ffffff; } #content img { margin-right: 9px; margin-bottom: 9px; padding: 2px; border: 1px solid #e0d8cb; vertical-align: bottom; }

17. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw Base.css- 頁尾 #footer { margin: 0; padding: 1em 2em; font-size: x-small; color: #b8a68a; background: transparent; } #footer span { text-transform: uppercase; }

18. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 應用 header content menu main footer

19. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 內容 -code #content { margin: 30px 0 0 30px; width: 640px; } #main { float: right; width: 420px; } #main h1 { margin: 0; font-size: small; } #main p { margin: 0.5em 0 2em; line-height: 1.3; font-size: x-small; } 640px 420px

20. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 選單 -code-1 ul#menu { margin: 0; padding: 0; float: left; width: 180px; list-style: none; color: #794c2c; background-color: #eee9e2; } ul#menu li { display: block; margin: 0; padding: 0; font-size: small; } ul#menu li span { display: block; font-size: x-small; }

21. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 選單 -code-2 li#c01 a { background: url(../images/chairs/c01.jpg) 7px 5px no-repeat; } li#c02 a { background: url(../images/chairs/c02.jpg) 7px 5px no-repeat; } li#c03 a { background: url(../images/chairs/c03.jpg) 7px 5px no-repeat; } li#c04 { background: url(../images/chairs/c04.jpg) 7px 5px no-repeat; } li#c05 a { background: url(../images/chairs/c05.jpg) 7px 5px no-repeat; } li#c06 a { background: url(../images/chairs/c06.jpg) 7px 5px no-repeat; } li#c07 a { background: url(../images/chairs/c07.jpg) 7px 5px no-repeat; } li#c08 a { background: url(../images/chairs/c08.jpg) 7px 5px no-repeat; } li#c09 a { background: url(../images/chairs/c09.jpg) 7px 5px no-repeat; } li#c10 a { background: url(../images/chairs/c10.jpg) 7px 5px no-repeat; }

22. 國立高雄大學 - 圖書資訊館 楊國棟 kdyang@nuk.edu.tw 選單 -code-3 ul#menu li a { display: block; min-height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; background-color: #dcd3c5; } ul#menu li a:hover { color: #794c2c; background-color: #eee9e2; } ul#menu li#c04 { padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; min-height: 40px; } ul#menu li#c10 a { border-bottom: none; }