header navigation lead content footer kdyangnuk edu tw

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

head 的設定 <head> <meta http-equiv="Content-Type" content="text/html; charset=BIG 5" /> <title>藝廊</title> <link rel="stylesheet" href="css/version 4.

Version 4. css @charset "BIG 5"; body { color: #000000; background: #ffffff; } a

Import. css @charset “BIG 5”; @import “base. css”; /*設定字集為Big 5*/ /*讀取外部CSS【base. css】*/ @media tty

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

Base. css-導覽 ul#navigation { position: relative; //設定為相對位置 margin: 0; padding: 0; list-style: none; }

Base. css-標題與導文 h 1 { //文字採絕對位置隱藏於網頁左側 position: absolute; left: -999 px; width: 990 px;

內容設計概念-1 Content width: 675 px 32 px 行高： 95 px 36 px 45 px

Base. css-內容 #content { padding: 32 px 36 px 23 px 45 px; width:

Base. css-頁尾 #footer { margin: 0; padding: 1 em 2 em; font-size: x-small; color:

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

內容-code 640 px #content { margin: 30 px 0 0 30 px; width: 640

選單-code-1 ul#menu { margin: 0; padding: 0; float: left; width: 180 px; list-style: none;

選單-code-2 li#c 01 a { background: url(. . /images/chairs/c 01. jpg) 7 px 5

選單-code-3 ul#menu li a { display: block; min-height: 40 px; padding: 5 px 7

Slides: 22

Download presentation

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

原始碼部分 <body> <div id="header"> <a href="/" title="回首頁"><img src="images/logo. jpg" width="301" height="111" alt=“…" /></a> </div> <ul id="navigation"> <li id="chairs">椅子</li> <li id="tables"><a href="tables. html">桌子</a></li> <li id="furniture"><a href="furniture. html">家具</a></li> <li id="accessories"><a href="accessories. html">飾品</a></li> </ul> <h 1>椅子</h 1> <p id="lead"> 這是虛擬商店「Cascading. Style. Sheet」的藝廊頁面。. . . </p> <div id="content"> <a href="c 01. html"><img src="images/chairs/c 01. jpg" width="120" height="80" alt="椅子 01" /></a>. . . <a href="c 18. html"><img src="images/chairs/c 18. jpg" width="120" height="80" alt="椅子 18" /></a> <img src="images/chairs/c 99. jpg" width="120" height="80" alt="" /> </div> <p id="footer"> <span>All rights reserved</span> Cascading. Style. Sheet & Co. 2004 -2005 </p> </body> 國立高雄大學-圖書資訊館楊國棟 kdyang@nuk. edu. tw

head 的設定 <head> <meta http-equiv="Content-Type" content="text/html; charset=BIG 5" /> <title>藝廊</title> <link rel="stylesheet" href="css/version 4. css" type="text/css" /> //讀取外部的CSS【version 4. css】 <link rel="stylesheet" href="css/import. css" type="text/css" media="screen, print" /> //讀取外部的CSS【version 4. css】 </head> 國立高雄大學-圖書資訊館楊國棟 kdyang@nuk. edu. tw

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

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

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

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

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

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

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

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

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

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

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

選單-code-2 li#c 01 a { background: url(. . /images/chairs/c 01. jpg) 7 px 5 px no-repeat; } li#c 02 a { background: url(. . /images/chairs/c 02. jpg) 7 px 5 px no-repeat; } li#c 03 a { background: url(. . /images/chairs/c 03. jpg) 7 px 5 px no-repeat; } li#c 04 { background: url(. . /images/chairs/c 04. jpg) 7 px 5 px no-repeat; } li#c 05 a { background: url(. . /images/chairs/c 05. jpg) 7 px 5 px no-repeat; } li#c 06 a { background: url(. . /images/chairs/c 06. jpg) 7 px 5 px no-repeat; } li#c 07 a { background: url(. . /images/chairs/c 07. jpg) 7 px 5 px no-repeat; } li#c 08 a { background: url(. . /images/chairs/c 08. jpg) 7 px 5 px no-repeat; } li#c 09 a { background: url(. . /images/chairs/c 09. jpg) 7 px 5 px no-repeat; } li#c 10 a { background: url(. . /images/chairs/c 10. jpg) 7 px 5 px no-repeat; } 國立高雄大學-圖書資訊館楊國棟 kdyang@nuk. edu. tw

選單-code-3 ul#menu li a { display: block; min-height: 40 px; padding: 5 px 7 px 5 px 66 px; border-bottom: 1 px dotted #ffffff; text-decoration: none; color: #aa 8 f 78; background-color: #dcd 3 c 5; } ul#menu li a: hover { color: #794 c 2 c; background-color: #eee 9 e 2; } ul#menu li#c 04 { padding: 5 px 7 px 5 px 66 px; border-bottom: 1 px dotted #ffffff; min-height: 40 px; } ul#menu li#c 10 a { border-bottom: none; } 國立高雄大學-圖書資訊館楊國棟 kdyang@nuk. edu. tw