大家好!這個系列文章是按轉自網(wǎng)友阿捷編寫的。之前阿捷也一直沒有制作過一個真正符合web標準的網(wǎng)站?,F(xiàn)在邊參考國外資料邊制作,同時把過程中的心得和經(jīng)驗記錄下來,希望對大家有點幫助。好了,讓我們開始吧。
開始制作符合標準的站點,第一件事情就是聲明符合自己需要的DOCTYPE。
查看本站首頁原代碼,可以看到第一行就是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">打開一些符合標準的站點,例如著名web設計軟件開發(fā)商Macromedia,設計大師Zeldman的個人網(wǎng)站,會發(fā)現(xiàn)同樣的代碼。而另一些符合標準的站點(例如k10k.net)的代碼則如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
那么這些代碼有什么含義?一定要放置嗎?
上面這些代碼我們稱做DOCTYPE聲明。DOCTYPE是document type(文檔類型)的簡寫,用來說明你用的XHTML或者HTML是什么版本。
其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文檔類型定義,里面包含了文檔的規(guī)則,瀏覽器就根據(jù)你定義的DTD來解釋你頁面的標識,并展現(xiàn)出來。
要建立符合標準的網(wǎng)頁,DOCTYPE聲明是必不可少的關鍵組成部分;除非你的XHTML確定了一個正確的DOCTYPE,否則你的標識和CSS都不會生效。
XHTML 1.0 提供了三種DTD聲明可供選擇:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
理想情況當然是嚴格的DTD,但對于我們大多數(shù)剛接觸web標準的設計師來說,過渡的DTD(XHTML 1.0 Transitional)是目前理想選擇(包括本站,使用的也是過渡型DTD)。因為這種DTD還允許我們使用表現(xiàn)層的標識、元素和屬性,也比較容易通過W3C的代碼校驗。
注:上面說的"表現(xiàn)層的標識、屬性"是指那些純粹用來控制表現(xiàn)的tag,例如用于排版的表格、背景顏色標識等。在XHTML中標識是用來表示結構的,而不是用來實現(xiàn)表現(xiàn)形式,我們過渡的目的是最終實現(xiàn)數(shù)據(jù)和表現(xiàn)相分離。
打個比方:人體模特換衣服。模特就好比數(shù)據(jù),衣服則是表現(xiàn)形式,模特和衣服是分離的,這樣你就可以隨意換衣服。而原來HTML4中,數(shù)據(jù)和表現(xiàn)是混雜在一起的,要一次性換個表現(xiàn)形式非常困難。呵呵,有點抽象了,這個概念需要我們在應用過程中逐步領會。
DOCTYPE聲明必須放在每一個XHTML文檔最頂部,在所有代碼和標識之上。
更多細節(jié)可以訪問W3C的網(wǎng)站
第2天:什么是名字空間
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
通常我們HTML4.0的代碼只是<html>,這里的"xmlns"是什么呢?
這個"xmlns"是XHTML namespace的縮寫,叫做"名字空間"聲明。名字空間是什么作用呢?阿捷自己的理解是:
由于xml允許你自己定義自己的標識,你定義的標識和其他人定義的標識有可能相同,但表示不同的意義。當文件交換或者共享的時候就容易產(chǎn)生錯誤。為了避免這種錯誤發(fā)生,XML采用名字空間聲明,允許你通過一個網(wǎng)址指向來識別你的標識。例如:
小王和小李都定義了一個<book>標識,如果小王的名字空間是"http://www.xiaowang.com",小李的名字空間是"http://www.xiaoli.com",那么當兩個文檔交換數(shù)據(jù)時,也不會混淆<book>標識,因為它屬于不同的名字空間。
更通俗的解釋是:名字空間就是給文檔做一個標記,告訴別人,這個文檔是屬于誰的。只不過這個"誰"用了一個網(wǎng)址來代替。
XHTML是HTML向XML過渡的標識語言,它需要符合XML文檔規(guī)則,因此也需要定義名字空間。又因為XHTML1.0不能自定義標識,所以它的名字空間都相同,就是"http://www.w3.org/1999/xhtml"。如果你還不太理解也不要緊,目前階段我們只要照抄代碼就可以了。
后面的lang="gb2312",指定你的文檔用簡體中文。
第3天:定義語言編碼
第三步是定義你的語言編碼,類似這樣:
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
為了被瀏覽器正確解釋和通過W3C代碼校驗,所有的XHTML文檔都必須聲明它們所使用的編碼語言,我們一般使用gb2312(簡體中文),制作多國語言頁面也有可能用Unicode、ISO-8859-1等,根據(jù)你的需要定義。
通常這樣定義就可以了。但是要補充說明的是,XML文檔并不是這樣定義語言編碼的,XML的定義方式如下:
<?xml version="1.0" encoding="gb2312"?>
你在Macromedia.com的首頁代碼第一行就可以看見類似的語句,這也是W3C推薦使用的定義方法。那為什么我們不直接采用這種方法呢?原因是一些瀏覽器對標準的支持不完善,不能正確理解這樣的定義方法,比如IE6/windows。所以在目前過渡方案下,我們依然推薦使用meta方式。當然,你可以兩種方法都寫。
看本站源代碼,你會發(fā)現(xiàn)語言編碼定義的地方還多一句:
<meta http-equiv="Content-Language" content="gb2312" />
這是針對老版本瀏覽器寫的,以保證各種瀏覽器都能正確解釋頁面。
注意:在上面聲明語句的最后,你看到有一個斜杠"/",這和我們以前的HTML4.0的代碼寫法不同。原因是XHTML語法規(guī)則要求所有的標識都必須有開始和結束。例如<body>和</body>、<p>和</p>等,對于不成對的標識,要求在標識最后加一個空格,然后跟一個"/"。例如<br>寫成<br />、<img>寫成<img />,加空格的原因是避免代碼連在一起瀏覽器不識別。
第4天:調(diào)用樣式表
用web標準設計網(wǎng)站,過渡的方法主要是采用XHTML+CSS,css樣式表是必不可少的。這就要求所有網(wǎng)頁設計師必須熟練掌握CSS,如果你以前不常用,那么現(xiàn)在就開始學習吧。要制作符合web標準的網(wǎng)站,不懂CSS是設計不出漂亮的頁面的。
事實上,所有表現(xiàn)的地方都需要用CSS來實現(xiàn)。我們以前都習慣用table來定位和布局,現(xiàn)在要改用DIV來定位和布局。這是思維方式的變化,一開始有些不習慣。呵呵,任何變革都會有阻力的,為了享受標準帶來的"益處",放棄一些老的傳統(tǒng)做法是值得的。
在以前,我們通常采用2種方法使用樣式表:
<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />
在符合web標準的設計中,我們使用外部調(diào)用法,好處不言而喻,你可以不修改頁面只修改.css文件而改變頁面的樣式。如果所有頁面都調(diào)用同一個樣式表文件,那么改一個樣式表文件,可以改變所有文件的樣式。
查看某些符合標準站點的原代碼,你可能看到,在調(diào)用樣式表的地方有如下2句:
<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" /> <style type="text/css" media="all">@import url( css/style01.css );</style>
為什么要寫兩次呢?
實際上一般情況下用外聯(lián)法調(diào)用(就是第一句)就足夠了。我這里使用雙表調(diào)用只是一種示例。其中的"@import"命令用于輸入樣式表。而"@import"命令在netscape 4.0版本瀏覽器是無效的。也就是說,當你希望某些效果在netscape 4.0瀏覽器中隱藏,在4.0以上或其它瀏覽器中又顯示的時候,你可以采用"@import"命令方法調(diào)用樣式表。
第5天:head區(qū)的其他設置
這些技巧主要講meta標簽設置的,其實與符合web標準關系不大,只要注意在最后加"/"關閉標簽就可以,但是既然是入門教程,就寫得詳細一點吧。
如果你將本站加入收藏夾,可以看到在收藏夾網(wǎng)址之前的IE圖標變成了本站特別的圖標
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
代碼如下,替換成你自己站點的內(nèi)容就可以:
<meta content="all" name="robots" />
<meta name="author" content="ajie@netease.com,阿捷" />
<meta name="Copyright" content="www.w3cn.org,自由版權,任意轉載" />
<meta name="description" content="新網(wǎng)頁設計師。web標準的教程站點,推動web標準在中國的應用" />
<meta content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" name="keywords" />
先介紹這么多。補充說明,前面花了5節(jié)都是講head區(qū)的代碼,實際頁面內(nèi)容還一字未提,呵呵,不要急,其實head區(qū)是非常重要的,看一個頁面的head的代碼就可以知道設計師是否夠專業(yè)。
第6天:XHTML代碼規(guī)范
在開始正式內(nèi)容制作之前,我們必須先了解一下web標準有關代碼的規(guī)范。了解這些規(guī)范可以幫助你少走彎路,盡快通過代碼校驗。
以前在HTML中,你可以打開許多標簽,例如<p>和<li>而不一定寫對應的</p>和</li>來關閉它們。但在XHTML中這是不合法的。XHTML要求有嚴謹?shù)慕Y構,所有標簽必須關閉。如果是單獨不成對的標簽,在標簽最后加一個"/"來關閉它。例如:
<br /><img height="80" alt="網(wǎng)頁設計師" src="../images/logo_w3cn_200x80.gif" width="200" />
與HTML不一樣,XHTML對大小寫是敏感的,<title>和<TITLE>是不同的標簽。XHTML要求所有的標簽和屬性的名字都必須使用小寫。例如:<BODY>必須寫成<body> 。大小寫夾雜也是不被認可的,通常dreamweaver自動生成的屬性名字"onMouseOver"也必須修改成"onmouseover"。
同樣因為XHTML要求有嚴謹?shù)慕Y構,因此所有的嵌套都必須按順序,以前我們這樣寫的代碼:
<p><b></p>/b>
必須修改為:
<p><b></b>/p>
就是說,一層一層的嵌套必須是嚴格對稱。
在HTML中,你可以不需要給屬性值加引號,但是在XHTML中,它們必須被加引號。例如:
<height=80>
必須修改為:
<height="80">
特殊情況,你需要在屬性值里使用雙引號,你可以用",單引號可以使用',例如:
<alt="say'hello'">
注:以上字符之間無空格。
XHTML規(guī)定所有屬性都必須有一個值,沒有值的就重復本身。例如:
<td nowrap> <input type="checkbox" name="shirt" value="medium" checked>
必須修改為:
<td nowrap="nowrap"> <input type="checkbox" name="shirt" value="medium" checked="checked">
“--”只能發(fā)生在XHTML注釋的開頭和結束,也就是說,在內(nèi)容中它們不再有效。例如下面的代碼是無效的:
<!--這里是注釋-----------這里是注釋-->
用等號或者空格替換內(nèi)部的虛線。
<!--這里是注釋============這里是注釋-->
以上這些規(guī)范有的看上去比較奇怪,但這一切都是為了使我們的代碼有一個統(tǒng)一、唯一的標準,便于以后的數(shù)據(jù)再利用。
第7天:CSS入門
在了解XHTML代碼規(guī)范后,我們就要進行CSS布局。首先先介紹一些CSS的入門知識。如果你已經(jīng)很熟悉了,可以跳過這一節(jié),直接進入下一節(jié)。
CSS是Cascading Style Sheets(層疊樣式表)的縮寫。是一種對web文檔添加樣式的簡單機制,屬于表現(xiàn)層的布局語言。
分析一個典型CSS的語句:
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
顏色值可以用RGB值寫,例如:color : rgb(255,0,0),也可以用十六進制寫,就象上面例子color:#FF0000。如果十六進制值是成對重復的可以簡寫,效果一樣。例如:#FF0000可以寫成#F00。但如果不重復就不可以簡寫,例如#FC1A1B必須寫滿六位。
web標準推薦如下字體定義方法:
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; }
當幾個元素樣式屬性一樣時,可以共同調(diào)用一個聲明,元素之間用逗號分隔,: p, td, li { font-size : 12px ; }
可以使用派生選擇器給一個元素里的子元素定義樣式,例如這樣:
li strong { font-style : italic; font-weight : normal;}
就是給li下面的子元素strong定義一個斜體不加粗的樣式。
用CSS布局主要用層"div"來實現(xiàn),而div的樣式通過"id選擇器"來定義。例如我們首先定義一個層
<div id="menubar"></div>
然后在樣式表里這樣定義:
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定義的id名稱。注意在前面加"#"號。
id選擇器也同樣支持派生,例如:
#menubar p { text-align : right; margin-top : 10px; }
這個方法主要用來定義層和那些比較復雜,有多個派生的元素。
在CSS里用一個點開頭表示類別選擇器定義,例如:
.14px {color : #f60 ;font-size:14px ;}
在頁面中,用class="類別名"的方法調(diào)用:
<span class="14px">14px大小的字體</span>
這個方法比較簡單靈活,可以隨時根據(jù)頁面需要新建和刪除。
CSS中用四個偽類來定義鏈接的樣式,分別是:a:link、a:visited、a:hover和a : active,例如:
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}
以上語句分別定義了"鏈接、已訪問過的鏈接、鼠標停在上方時、點下鼠標時"的樣式。注意,必須按以上順序寫,否則顯示可能和你預想的不一樣。記住它們的順序是“LVHA”。
呵呵,看了這么多,有點頭暈吧,實際上CSS的語法規(guī)范還有很多,這里列的只是一些常用的,畢竟我們是循序漸進,不可能一口吃成胖子:)
第8天:CSS布局入門
CSS布局與傳統(tǒng)表格(table)布局最大的區(qū)別在于:原來的定位都是采用表格,通過表格的間距或者用無色透明的GIF圖片來控制文布局版塊的間距;而現(xiàn)在則采用層(div)來定位,通過層的margin,padding,border等屬性來控制版塊的間距。
分析一個典型的定義div例子:
#sample{ MARGIN: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDER-TOP: #CCC 2px solid;
BORDER-RIGHT: #CCC 2px solid;
BORDER-BOTTOM: #CCC 2px solid;
BORDER-LEFT: #CCC 2px solid;
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
COLOR: #666;
TEXT-ALIGN: center;
LINE-HEIGHT: 150%; WIDTH:60%; }
說明如下:
下面是這個層的實際表現(xiàn):
這里是演示內(nèi)容,這里是演示內(nèi)容,這里是演示內(nèi)容,這里是演示內(nèi)容,這里是演示內(nèi)容,這里是演示內(nèi)容,這里是演示內(nèi)容,這里是演示內(nèi)容,
這里是演示內(nèi)容,這里是演示內(nèi)容,
這里是演示內(nèi)容,這里是演示內(nèi)容,
這里是演示內(nèi)容...我們可以看到邊框是2px的灰色,背景圖片在右下沒有重復,內(nèi)容距離上和左邊框20px,內(nèi)容居中,一切和預想的一樣。hoho,雖然不好看,但它是最基本的,掌握了它,你就已經(jīng)學會一半的CSS布局技術了。就是這樣,不算難吧!(另一半是什么?另一半是層與層之間的定位。我會在后面逐步講解。)
自從1996年CSS1的推出,W3C組織就建議把所有網(wǎng)頁上的對像都放在一個盒(box)中,設計師可以通過創(chuàng)建定義來控制這個盒的屬性,這些對像包括段落、列表、標題、圖片以及層<div>。盒模型主要定義四個區(qū)域:內(nèi)容(content)、邊框距(padding)、邊界(border)和邊距(margin)。上面我們講的sample層就是一個典型的盒。對于初學者,經(jīng)常會搞不清楚margin,background-color,background-image,padding,content,border之間的層次、關系和相互影響。這里提供一張盒模型的3D示意圖,希望便于你的理解和記憶。
用XHTML+CSS布局,有一個技術一開始讓你不習慣,應該說是一種思維方式與傳統(tǒng)表格布局不一樣,那就是:所有輔助圖片都用背景來實現(xiàn)。類似這樣:
BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;
盡管可以用<img>直接插在內(nèi)容中,但這是不推薦的。這里的"輔助圖片"是指那些不是作為頁面要表達的內(nèi)容的一部分,而僅僅用于修飾、間隔、提醒的圖片。例如:相冊中的圖片、圖片新聞中的圖片,上面的3d盒模型圖片都屬于內(nèi)容的一部分,它們可以用<img>元素直接插在頁面里,而其它的類似logo,標題圖片,列表前綴圖片都必須采用背景方式或者其他CSS方式顯示。
這樣做的原因有2點:
第9天:第一個CSS布局實例
接下來開始要真正設計布局了。和傳統(tǒng)的方法一樣,你首先要在腦海里有大致的輪廓構想,然后用photoshop把它畫出來。你可能看到有關web標準的站點大都很樸素,因為web標準更關注結構和內(nèi)容,實際上它與網(wǎng)頁的美觀沒有根本沖突,你想怎么設計就怎么設計,用傳統(tǒng)表格方法實現(xiàn)的布局,用DIV也可以實現(xiàn)。技術有一個成熟的過程,把DIV看成和TABLE一樣的工具,如何運用就看你的想象力了。
注:在實際應用過程中,DIV在有些地方的確不如表格方便,比如背景色的定義。但任何事情都有得有失,取舍在于你的價值判斷。好,不羅嗦了,我們開始:
w3cn的最初設計草圖如下:
用表格的設計方法的話,一般都是上中下三行布局
先定義整個頁面的body的樣式,代碼如下:
body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: ‘Lucida Grande‘,‘Lucida Sans Unicode‘,‘宋體‘,‘新宋體‘,arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }
以上代碼的作用在上一天的教程有詳細說明,大家應該一看就明白。定義了邊框邊距為0;背景顏色為#FEFEFE,背景圖片為bg_logo.gif,圖片位于頁面右下角,不重復;定義了字體尺寸為12px;字體顏色為#666;行高150%。
初次使用CSS布局,我決定采用固定寬度的三列布局(比自適應分辨率的設計簡單,hoho,別說我偷懶,先實現(xiàn)簡單的,增加點信心嘛!)。分別定義左中右的寬度為200:300:280,在CSS中如下定義:
/*定義頁面左列樣式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定義頁面中列樣式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定義頁面右列樣式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }
注意:定義中列和右列div我都采用了POSITION: absolute;,然后分別定義了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;這是這個布局的關鍵,我采用了層的絕對定位。定義中間列距離頁面左邊框200px,距離頂部0px;定義右列距離頁面左邊框500px,距離頂部0px;。
這時候整個頁面的代碼是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>歡迎進入新《網(wǎng)頁設計師》:web標準教程及推廣</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿捷" />
<meta name="Copyright" content="www.w3cn.org,自由版權,任意轉載" />
<meta name="description" content="新網(wǎng)頁設計師,web標準的教程站點,推動web標準在中國的應用." />
<meta content="web標準,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</head>
<body>
<div id="left">頁面左列</div>
<div id="middle">頁面中列</div>
<div id="right">頁面右列</div>
</body>
</html>
這時候頁面的效果僅僅可以看到三個并列的灰色矩形,和一個背景圖。但是我希望高度是滿屏的,怎么辦呢?
為了保持三列有同樣的高度,我嘗試在#left、#middle和#right中設置"height:100%;",但發(fā)現(xiàn)完全沒有預想的自適應高度效果。經(jīng)過一番嘗試后,我只好給每個div一個絕對高度:"height:1000px;",并且隨著內(nèi)容的增加,需要不斷修正這個值。難道沒有辦法自適應高度了嗎?隨著阿捷自己學習的深入,發(fā)現(xiàn)一個變通的解決辦法,實際上根本不需要設置100%,我們已經(jīng)被table思維禁錮太深了,這個辦法在下一節(jié)的學習中詳細介紹。
第10天:自適應高度
如果我們想在3列布局的最后加一行頁腳,放版權之類的信息。就遇到必須對齊3列底部的問題。在table布局中,我們用大表格嵌套小表格的方法,可以很方便對齊三列;而用div布局,三列獨立分散,內(nèi)容高低不同,就很難對齊。其實我們完全可以嵌套div,把三列放進一個DIV中,就做到了底部對齊。下面是實現(xiàn)例子(白色背景框模擬一個頁面):
這里是#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; },背景顏色用的是#main的背景色
這里是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}
這里是主要內(nèi)容,根據(jù)內(nèi)容自動適應高度
這里是主要內(nèi)容,根據(jù)內(nèi)容自動適應高度
這里是主要內(nèi)容,根據(jù)內(nèi)容自動適應高度
這個例子的頁面主要代碼如下:
<div id="header"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
具體樣式表都寫在相應版塊里了。重點在于#mainbox層嵌套了#menu,#sidebar和#content三個層。當#content的內(nèi)容增加,#content的高度就會增高,同時#mainbox的高度也會撐開,#footer層就自動下移。這樣就實現(xiàn)了高度的自適應。
另外值得注意的是:#menu和#content都是浮動在頁面右面"FLOAT: right;",#sidebar是浮動在#menu層的左面"FLOAT: left;",這是浮動法定位,還可以采用絕對定位來實現(xiàn)這樣的效果。
這個方法存在另一個問題,就是側列#sidebar的背景無法百分之百。一般的解決辦法就是用body的背景色來填充滿。(不能使用#mainbox的背景色,因為在Mozilla等瀏覽器中#mainbox的背景色失效。)
第11天:不用表格的菜單
布局初步搭建起來,我開始填充里面的內(nèi)容。首先是定義logo圖片:
樣式表:#logo {MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;}
頁面代碼:<div id="logo"><a title="網(wǎng)頁設計師" ><img height="80" alt="鏈接到w3cn.org首頁" src="images/logo_w3cn_200x80.gif" width="200" /></a></div>
以上代碼現(xiàn)在應該容易理解。先在CSS定義了一個logo的層,然后在頁面中調(diào)用它。需要說明的是,為了使網(wǎng)頁有更好的易用性,web標準要求大家給所有的、屬于正式內(nèi)容的圖片,加一個alt屬性。這個alt屬性是用來說明圖片的作用(當圖片不能顯示的時候就顯示替換文字),所以不要只寫成無意義的圖片名稱。
接下來是定義菜單。
我們先來看菜單的最終效果:
通常方法我們至少嵌套2層表格來實現(xiàn)這樣的菜單,間隔線采用在td中設置背景色并插入1px高的透明GIF圖片實現(xiàn);背景色的交替效果采用td的onmouseover事件實現(xiàn)。但查看本菜單的頁面代碼,你會看到只有如下幾句:
<div id="menu">
<ul>
<li><a title="網(wǎng)站標準" >什么是網(wǎng)站標準</a></li>
<li><a title="標準的好處" >使用標準的好處</a></li>
<li><a title="怎樣過渡" >怎樣過渡</a></li>
<li><a title="相關教程" >相關教程</a></li>
<li><a title="工具" >工具</a></li>
<li><a title="資源及鏈接" >資源及鏈接</a></li>
</ul>
</div>
沒有用任何table,而用的是無序列<li>,整個菜單的效果實現(xiàn)的秘密完全在于id="menu",我們再來看CSS中關于menu的定義:
(1)首先定義了menu層的主要樣式:
#menu {
MARGIN: 15px 20px 0px 15px; /*定義層的外邊框距離*/
PADDING:15px; /*定義層的內(nèi)邊框為15px*/
BACKGROUND: #dfdfdf; /*定義背景顏色*/
COLOR: #666; /*定義字體顏色*/
BORDER:#fff 2px solid; /*定義邊框為2px白色線條*/
WIDTH:160px; /*定義內(nèi)容的寬度為160px*/
}
(2)其次定義無序列表的樣式:
#menu ul {
MARGIN: 0px;
PADDING: 0px;
BORDER: medium none; /*不顯示邊框*/
LINE-HEIGHT: normal;
LIST-STYLE-TYPE: none;
}
#menu li {BORDER-TOP: #FFF 1px solid; MARGIN: 0px;}
說明:這里用的是id選擇器的派生方法定義(參考第7天:CSS入門的介紹)了在menu層中的子元素<ul>和<li>的樣式。LIST-STYLE-TYPE: none一句表示不采用無序列表的默認樣式,即:不顯示小圓點(我們后面用自己的圖標來代替小圓點)。BORDER-TOP: #FFF 1px solid;則定義了菜單之間的1px間隔線。
(3)定義onmouseover效果
#menu li a {
PADDING:5px 0px 5px 15px;
DISPLAY: block;
FONT-WEIGHT: bold;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#menu li a:hover { BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }
解釋如下:
ok,不用表格的菜單就這樣實現(xiàn)了。大家可以明顯感覺到,原來寫在HTML里的表現(xiàn)樣式全部剝離放到CSS文件里去了。頁面代碼節(jié)約了大半。通過CSS要修改菜單樣式就很簡單了。
上面是縱向的菜單,如果要顯示橫向菜單,用li也可以嗎?當然是可以的,下面給出代碼,效果就在本頁頂部:
頁面代碼
<div id="submenu">
<ul>
<li id="one"><a title="首頁" >Home</a></li>
<li id="two"><a title="關于我們" >關于我們</a></li>
<li id="three"><a title="網(wǎng)站標準" >網(wǎng)站標準</a></li>
<li id="four"><a title="標準的好處" >標準的好處</a></li>
<li id="five"><a title="怎樣過渡" >怎樣過渡</a></li>
<li id="six"><a title="相關教程" >相關教程</a></li>
<li id="seven"><a title="工具" >工具</a></li>
<li id="eight"><a title="資源及鏈接" >資源及鏈接</a></li>
<li id="nine"><a title="常見問題" >常見問題</a></li>
</ul>
</div>
樣式表代碼
#submenu {
MARGIN: 0px 8px 0px 8px;
PADDING: 4px 0px 0px 0px;
BORDER: #fff 1px solid;
BACKGROUND: #dfdfdf;
COLOR: #666;
HEIGHT:25px; }
#submenu ul {
CLEAR: left;
MARGIN: 0px;
PADDING:0px;
BORDER: 0px;
LIST-STYLE-TYPE: none;
TEXT-ALIGN: center;
DISPLAY:inline;
}
#submenu li {
FLOAT: left;
DISPLAY: block;
MARGIN: 0px;
PADDING: 0px;
TEXT-ALIGN: center}
#submenu li a {
DISPLAY: block;
PADDING:2px 3px 2px 3px;
BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;
FONT-WEIGHT: bold;
WIDTH: 100%;
COLOR: #444;
TEXT-DECORATION: none;
}
#submenu li a:hover {
BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;
COLOR: #fff; }
#submenu ul li#one A { WIDTH: 60px}
#submenu ul li#two A { WIDTH: 80px}
#submenu ul li#three A { WIDTH: 80px}
#submenu ul li#four A { WIDTH: 90px}
#submenu ul li#five A { WIDTH: 80px}
#submenu ul li#six A { WIDTH: 80px}
#submenu ul li#seven A { WIDTH: 60px}
#submenu ul li#eight A { WIDTH: 90px}
#submenu ul li#nine A { WIDTH: 80px}
以上代碼不逐一分析了。橫向菜單的關鍵在于:定義<li>樣式時的"FLOAT: left;"語句。另外注意UL定義中的DISPLAY:inline;一句表示將li強制作為內(nèi)聯(lián)對象呈遞,從對象中刪除行,通俗講就是li不換行。實現(xiàn)橫向排列。你也可以象例子中定義每個子菜單的寬度,控制菜單的間隔。好了,你也可以動手試試,用li實現(xiàn)各種各樣的菜單樣式。
Tips:如果你子菜單的寬度總和大于層的寬度,菜單會自動折行,利用這個原理可以實現(xiàn)單個無序列表的2列或者3列排版,這是原來HTML很難實現(xiàn)的。
感謝zhuweiwei指出橫向菜單的bug,本文已修正。
第12天:校驗及常見錯誤
辛苦了好多天,我們努力學習使用XHTML+CSS來重新設計我們的網(wǎng)站。那么我們?nèi)绾沃雷约褐谱鞯捻撁嬲娴姆蟱eb標準?W3C和一些志愿者網(wǎng)站提供了在線校驗程序,來幫助我們檢查頁面是否符合標準,并提供了修正錯誤的幫助信息。這些校驗非常有用,是我調(diào)試頁面第一步要做的事情。
校驗成功,會顯示"This Page Is Valid XHTML 1.0 Transitional!",如圖:
校驗失敗,會顯示更多校驗選項和錯誤信息,如圖:
一般選擇"Show Source"和"Verbose Output"可以幫助你找到錯誤代碼所在行和錯誤原因。
其中最最常見的錯誤就是標簽的大小寫問題了。通常這些錯誤都是關聯(lián)的,比如忘記了一個</li>其他<li>標簽都會報錯,所以不要看到一堆的錯誤害怕,通常解決了一個錯誤,其他的錯誤也都沒有了。如果你的頁面通過XHTML1.0校驗,可以在頁面上放置這么一個圖標:
<p> <a ><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="31" width="88" /></a> </p>
校驗成功,會顯示"恭喜恭喜,此文檔已經(jīng)通過樣式表校驗! ",hoho,校驗信息支持中文噢。如圖:
校驗失敗,會顯示兩類錯誤:錯誤和警告。錯誤表示一定要修正,否則無法通過校驗;警告表示有代碼不被W3C推薦,建議修改。
同樣,通過檢驗后,可以放置一個CSS校驗通過圖標,代碼如下:
<p> <a > <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /> </a> </p>