首先,從基礎的開始。
1. DIV佈局和TABLE佈局的區別
傳統TABLE佈局方式實際上是利用了HTML table表格元素具有的無邊框特性,由於table元素可以在顯示時使得單元格的邊框和間距爲0,即不顯示邊框,因此可以將網頁中的各個元素按版式劃分放入表格的各個單元格中,從而實現複雜的排版組合。
表格佈局的代碼最常見的是在HTML標籤之間嵌入一些設計代碼,如width=100%,border=0等。表格佈局的 混亂代碼就是這樣編寫的,大量樣式年設計代碼混雜在表格,單元格中,使得可讀性大大降低,維護起來成本也相當高,儘管有類似於Dreamweaver(以下簡單稱dw)這樣可視化的界面進行編寫,只要你需要什麼,他幫你寫入什麼樣式,最終結果是表格中到處留下設計的足跡,混合式代碼也由此而成。
DIV可以理解成一個塊,是有個比表格簡單的元素,從語法上只有<div></div>這樣簡單的定義。DIV最大的好處就是樣式是由CSS來控制。
但總體上而言:
1. div+css佈局比table佈局節省頁面代碼,代碼結構也更清晰明瞭.
2. div+css的頁面對搜索引擎支持好,而且速度更快了,能夠比table 更加快速的顯示網站內容.
3. div+css佈局使網站版面佈局修改變的更簡單,因爲版面代碼都寫在獨立的css文件裏修改起來方便多了,不象table要在頁面中修改很多信息.
頁面中:
<div class="style2"></div> //表示調class名爲style2的樣式 也可以這樣寫 <div id="style2"></div> 不過CSS表示就有所不同了 |
CSS中
.style2{ width: 800px; //寬度 height: 100%; //高度 margin: 0px auto; //頁面邊距離,如 margin-top:10px 表示上邊距爲10像素,這裏是爲自動 margin-bottom:20px; //下邊距 border:1px solid #9BDF70; //邊框 background-color: #F0FBEB //背景色 } (在樣式指定爲div id=的時候必須這樣寫) #style2{…… |
不夠,第一種寫法明顯可以提高代碼重用率。
2. 符合WEB標準的網站
符合WEB標準的網站首先一點是網頁能夠通過W3C的代碼校驗,地址http://www.w3.org/QA/Tools/
目前提供了HTML/XHTML/CSS/RDF/P3PXML等多種標記語言的校驗工具.
但僅僅爲符合標準通過W3C校驗而設計的網頁是沒有價值的。個人認爲通過這個標準最大的意義在於不同瀏覽器的兼容性。
3. XHTML
其實XHTML就是HTML的下一個版本,用於替代HTML並幫助轉向XML的一套過渡型標記語言.在強調錶現分離的WEB標準時代,HTML的語法模式已經不能滿足需求. XHTML是一門面向結構的語言,設計目的不象HTML僅僅是爲了網頁設計與表現,XHTML主要用於對網頁內容進行結構設計,其嚴嚴謹的語法結構有利於瀏覽器進行解析處理。
目前XHTML的使用標準也存在多種選者,包含Transitional,Strict和Frameset三種。
1. Transitional代表一種鬆散過渡型的XHTML應用,允許用戶使用一部分舊式的HTML標籤來編寫XHTML文擋。
2. Strict是一種嚴格型的應用方式,在這種形式下XHTML中不能使用任何樣式表現的標籤及屬性。如在元素中直接使用bgcolor.
3. Frameset方式是針對框架頁的應用方式。
一般情況下還是使用Transitional。
3.1 XHTML(如無特殊說明,開發環境都爲dw)
在DW中新建一個HTML頁
在代碼中可以看到
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
這段代碼的意思是告訴瀏覽器該網頁代碼是什麼類型的,如這段代碼中後面的參數,指定爲XHTML1.0 Transitional類型.
這裏提到的XHTML 是XHTML1.0規範,與HTML4.01幾乎完全相同。
大概看了下,其語法基本和HTML基本沒什麼區別,所以這裏就不多說了,如果有區別的會下文中提到。
3.2 XHTML編寫習慣
雖然說不區分大小寫,但要符合標準的話,還是得按照以下建議的做。
1. 屬性名稱必須小寫
在標籤中編寫樹型,必須使用小寫,正確的寫法是:
<div class=”style”>
2. 屬性值必須使用雙引號
不允許使用<div id=content>這樣的形式
3. 不允許屬性簡寫
在HTML中,特別是表單中,常使用簡寫屬性,如
<input checked> <option selected>
而XHTML對此要求更嚴格,允許使用簡寫屬性,必須使用完整的寫法,正確寫法:
<input checked=”checked”/> <option selected=”selected”/>
4. 使用ID代替name
5. 必須使用結束標籤,例如
<div></div> <p></p>
如果使用IMG或BR這樣的單體標籤,那麼必須使用正斜錢作爲結束,如
<img src=”” /> <br/>
4. CSS語法結構
4.1 CSS屬性與選擇符
選擇符是CSS控制XHTML文擋中對象的一種方式,簡單的函索,它用於告訴瀏覽器這段樣式應用到哪個對象。
CSS的語法結構僅僅由三部分組成:選擇符(selector)、屬性(propetry)和值(value).
Selector { Property:value; }
l 選擇符:指這組樣式編碼所要針對的對象,可以是一個XHTML標籤,如body,h1;也可以是定義了特定id 或calss的標籤,
如#dd表示 <div id=”dd”> .dd表示<div class=”dd”>
l 屬性: 是CSS樣式控制的核心,對於每有個XHTML中的標籤,CSS都提供了豐富的樣式屬性,如顏色,大小,定位,浮動方式等。
l 值: 是指屬性的值,形式有兩種,一種是指定範圍的值,如float屬性,只可能是left,right,none三種值,另一種數值,如width能夠使用0-9999px, 0%-100%或其他數學單位來指定。
如body { backgroud-color:blue;}
表示選擇符爲body,即選擇了頁面中的<body>標籤,屬性爲backgroud-color(背景顏色),value爲CSS編碼中的藍色.
多個屬性的表示就如
P{ color: #3f3f3f3; font-family:arial; } |
4.2 類型選擇符
所謂類型選擇符是指網頁中已有的標籤類型做爲名稱的選擇符,body是網頁中的一個標籤類型,div也是,span也是.將控制頁面中所有的body或div或span。
4.3 羣組選擇符
除了對於單個XHTML對象進行樣式指定,同樣可以對一組對象進行相同的樣式指派,如:
h1,h2,h3,p,span{ font-size:12px; font-family: arial; } |
4.4 包含選擇符
h1 span{ font-weight:bold; } |
當我們僅僅想對某一個對象中的子對象進行樣式指定時,包含選擇符就被派上了用場。包含選擇符指選擇符組合中前一個對象包含後一個對象,對象之間使用空格做爲分隔符。
<h1>這是一段文本><span>這是span內的文本></span></h1> <h1>單獨文本</h1> <span>單獨的span</span> <h2>被h2標籤套用的文本<span>這是h2下的span</span></h2> |
如上代碼,只有第一段代碼會調用上面的樣式。
4.5 id與class選擇符
上面已多次提到,簡單的說就是CSS中 #style 與.style 頁面中 id=”style”與class=”style”的區別了。
4.6 組合選擇符
對於上述所有CSS選擇符而言,無論是什麼樣的選擇符,均可以進行組合使用。
h1 .p1{} 表示HT標籤下所有的class爲p1的標籤。
#content h1{} 表示ID爲conten的標籤下的所有有h1標籤.
h1 .p1,#content h1 {} 表示以上二者進行羣組選擇
h1 #content h2{} 表示id爲content的h1標籤下的h2標籤.
4.7 僞類及僞對象
是一種特殊的類和對象,由CSS自動支持,屬CSS的一種擴展類和對象,名稱不能被用戶自定義,使用時只能按標準格式進行應用。
a:hover{ backgroud-coloir: #3f3f3f; }
本例中的hover便是一個僞類,用於指定標籤a的鼠標移上狀態,CSS內置了幾個標準的僞類用於用戶的樣式定義。
僞類 |
用途 |
:link |
a連接標籤的未被訪問前的樣式 |
:hover |
對象在鼠標移上時的樣式 |
:active |
對象被用戶點擊及被點擊釋放之間的樣式 |
:visited |
a連對象被訪問後的樣式 |
:focus |
對象成爲輸入焦點的樣式 |
:first-child |
對象的第一個子對象的樣式 |
:first |
對於頁面的第一頁使用的樣式 |
同樣CSS內置了幾個標準僞對象用於用戶的樣式定義。
僞對象 |
用途 |
:after |
設置某一個對象之後的內容 |
:first-letter |
對象內的第一個字符樣式設置 |
:first=line |
對象內第一行的樣式設置 |
:before |
設置某一個對象之前的內容 |
實際上, 除了:hover,:active幾個僞類之外,大多數僞類及僞對象在實際使用上並不常見到。
4.8 通配選擇符
*{ color:blue;}
*表示所有對象,如上所示,頁面中所有對象都會使用color的字體顏色
4.9 CSS數值單位
單位 |
描述 |
示例 |
px |
像素(Pixel) |
width:12px; |
em |
相對於當前對象內文本的字體尺寸 |
font-size: 1.2em; |
Ex |
相對於字符的高度的相對尺寸 |
font-size:1.2ex; 當前字符的1.2倍高度 |
pt |
點/磅(point) |
font-size:9pt |
pc |
派卡(pica) |
font-size: 0.5pc |
in |
英寸(Omcj) |
font-size:12in; |
mm |
毫米(Millmeter) |
font-size:4mm; |
cm |
釐米(Centimeter) |
font-size:0.2cm; |
rgb |
顏色單位 |
color:rgb(255,255,255); color:rgb(12%,100%,50%); |
#RRGGBB |
十六進制顏色單位 |
color:000FFF; |
ColorName |
瀏覽器所支持的顏色名稱 |
color:blue; |
4.10應用CSS到網頁中
l 行間樣式表
如<h1 style=”font-size:12px;color:#000FFF”>
l 內部樣式表
在HTML代碼裏,如在head下
<style type="text/css"> u1 { border::dotted; float:left; } </style> |
l 外部樣式表
通俗的說就是把樣式內容放在CSS文件下,如meta下,添加如下代碼
<link rel=”stylesheet” rev=”stylesheet” href=”style.css” type=”text/css”/>
今天就先到這裏,下午還有課,晚上還要開會....