首先，從基礎的開始。
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”/>
今天就先到這裏，下午還有課，晚上還要開會....