1、1結構化標準語言HTML是網頁的基本描述語言，設計HTML語言的目的是為了能把存放在一臺電腦中的文本或圖形與另一臺電腦中的文本或圖形方便地聯系起來，形成有機的整體，不用考慮具體信息是在當前電腦上還是在網絡的其他電腦上。2表現標準語言CSS 稱為層疊樣式表，英文是Cascading Style Sheets。目前遵循的是W3C 于1998 年5 月12 日發布的CSS 2。W3C 創建CSS 目的是以CSS取代HTML 表格式布局和其他表現的語言。3行為標準DOM 稱為文檔對象模型，英文全稱是Document Object Model，是一種W3C 頒布的標準，用于對結構化文檔建立對象模型，從而

2、使得用戶可以通過程序語言（包括腳本）來控制其內部結構。網站標準不是某一個標準，而是標準的集合。網頁主要由3 部分組成： 結構（Structure）、表現（Presentation） 和行為（Behavior）。對應的標準也分3 個方面：結構化標準語言主要包括HTML 和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型，如W3C DOM、ECMAScript 等。 傳統表格布局方式實際上是利用了HTML 中的表格元素（table）具有的無邊框特性，由于表格元素可以在顯示時使單元格的邊框和間距設置為0，所以可以將網頁中的各個元素按版式劃分放入表格的各單元格中，從而實現復雜的排版組合。

3、9.2.1表格布局的特點表格布局的特點目前仍有一部分網站在使用表格布局，表格布局使用簡單，制作者只要將內容按照行和列拆分，用表格組裝起來即可實現設計版面布局。9.2.2冗余的嵌套表格和混亂的結冗余的嵌套表格和混亂的結構構采用表格布局的頁面內，為了實現設計的布局，制作者往往在單元格標簽 內設置高度、寬度和對齊等屬性，有時還要加入裝飾性的圖片，圖片和內容混雜在一起，使代碼視圖顯得非常臃腫。復雜的表格使得設計極為困難，修改更加繁瑣，最后生成的網頁代碼除了表格本身的代碼，還有許多沒有意義的圖像占位符及其他元素，文件量龐大，最終導致瀏覽器下載解析速度變慢。而使用CSS 布局則可以從根本上改變這種情況。C

4、SS 布局的重點不再放在表格元素的設計中，取而代之的是HTML 中的另一個元素Div，Div 可以理解為“圖層”或是一個“塊”，Div 是一種比表格簡單的元素，語法上只有從 開始和 結束， Div 的功能僅僅是將一段信息標記出來用于后期的樣式定義。9.3.1什么是什么是Web標準標準Web 標準，即網站標準。目前通常所說的Web 標準一般指進行網站建設所采用的基于HTML 語言的網站設計語言。Web 標準中典型的應用模式是Div+CSS。實際上，Web 標準并不是某一個標準，而是一系列標準的集合。9.3.2Div+CSS的優勢的優勢CSS 樣式表是控制頁面布局樣式的基礎，并真正能夠做到網頁表現

5、與內容分離的一種樣式設計語言。相對傳統HTML 的簡單樣式控制而言，CSS 能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，以及擁有對網頁對象盒模型樣式的控制能力，并能夠進行初步頁面交互設計，是目前基于文本展示的最優秀的表現設計語言。HTML中的元素分為塊元素和行內元素，通過CSS樣式可以改變HTML元素原本具有的顯示屬性，也就是說，通過CSS樣式的設置可以將塊元素與行內元素相互轉換。9.4.1塊元素塊元素在HTML 代碼中，常見的塊元素包括、 等，塊元素具有以下特點。（1）總是在新行上開始顯示。（2）行高以及頂和底邊距都可以控制。（3）如果不設置寬度，則會默認為

6、整個容器的100%；而如果設置了其寬度值，就會應用所設置的寬度。9.4.2行內元素行內元素當display 屬性的值被設置為inline 時，可以把元素設置為行內元素，塊元素具有以下特點。（1）和其他元素顯示在一行上。（2）行高以及頂邊距和底邊距不可以改變。（3）寬度就是它的文字或圖片的寬度，不可以改變。在常用的一些元素中，、 等默認都是行內元素。 Div 與其他HTML 標簽一樣，是一個HTML 所支持的標簽。例如當使用一個表格時，應用這樣的結構一樣，Div 在使用時也是同樣以 的形式出現。使用Div 進行網頁排版布局是現在網頁設計制作的趨勢，通過CSS 樣式可以輕松控制Div 的位置，從而

7、實現許多不同的布局方式。9.5.1Div是什么是什么Div 是一個容器。在HTML 頁面中的每個標簽對象幾乎都可以稱得上是一個容器，文檔內容9.5.2如何在網頁中插入如何在網頁中插入Div如果需要在網頁中插入Div，可以像插入其他的HTML 元素一樣，只需在代碼中應用 這樣的標簽形式，將內容放置其中，便可以應用Div 標簽。 9.5.3Div的嵌套的嵌套Div對象除了可以直接放入文本和其他標簽，還可以多個Div標簽進行嵌套使用，最終的目的是合理的標識出頁面的區域。單擊“插入”面板上的Div按鈕，彈出“插入Div”對話框。盒模型是CSS控制頁面時一個很重要的概念。只有很好地掌握了盒模型以及其中每

8、個元素的用法，才能真正的控制頁面中的各個元素的位置。 9.6.1盒模型的概念盒模型的概念 盒模型是由margin（邊界）、border（邊框）、padding（填充）和content（內容）4 部分組成的，此外，在盒模型中，還具備高度和寬度兩個輔助屬性。margin-topmargin-bottomborder-rightborder-leftborder-topborder-bottommargin-leftmargin-rightpadding-leftpadding-rightpadding-toppadding-bottomcontent9.6.2margin（邊界）（邊界）margi

9、n（邊界）用來設置頁面中元素和元素之間的距離，即定義元素周圍的空間范圍，margin 屬性包含4 個子屬性，分別是margin-top、margin-right、margin-bottom 和margin-left，分別用于控制元素4 周的邊距。動手實踐動手實踐定位網頁元素位置定位網頁元素位置9.6.3border（邊框）（邊框）border（邊框）是內邊距和外邊距的分界線，可以分離不同的HTML元素，border屬性設置的是元素的最外圍。在網頁設計中，如果計算元素的寬和高，則需要把border計算在內。border屬性有3個子屬性，分別是邊框樣式（border-style）、邊框寬度（bor

10、der-width）和邊框顏色（border-color）。動手實踐動手實踐為網頁元素添加邊框為網頁元素添加邊框最終文件：光盤最終文件第9章9-6-2.html 視頻：光盤視頻第9章9-6-2.swf最終文件：光盤最終文件第9章9-6-3.html 視頻：光盤視頻第9章9-6-3.swf9.6.4padding（填充）（填充）在CSS中，可以通過設置padding屬性定義內容與邊框之間的距離，即內邊距。padding屬性值可以是一個具體的長度，也可以是一個相對于上級元素的百分比，但不可以使用負值。padding屬性可以為盒子定義上、右、下、左各邊填充的值，分別是padding-top（上填充）

11、、padding-right（右填充）、padding-bottom（下填充）和padding-left（左填充）。動手實踐動手實踐控制控制Div中內容位置中內容位置9.6.5content（內容）（內容）從盒模型中可以看出中間部分是content（內容），它主要用來顯示內容，這部分也是整個盒模型的主要部分，其他如margin、border、padding所做的操作都是對content部分所做的修飾。對于內容部分的操作，也就是對文、圖像等頁面元素的操作。最終文件：光盤最終文件第9章9-6-4.html 視頻：光盤視頻第9章9-6-4.swfDiv+CSS布局是一種比較新的網頁布局理念，完全有別

12、于傳統的布局方式。它將頁面首先在整體上進行標簽的分塊，然后對各個塊進行CSS定位，最后再在各個塊中添加相應的內容。9.7.1元素定位的元素定位的CSS屬性屬性在網頁設計制作中，定位就是精確的定義HTML元素在頁面中的位置，可以是頁面中的絕對位置，也可以是相對于父級元素或另一個元素的相對位置。在使用Div+CSS布局制作頁面的過程中，都是通過CSS的定位屬性對元素完成位置和大小的控制的。9.7.2relative（相對定位）（相對定位）如果對一個元素進行相對定位，首先將出現在它所在的位置上，然后通過設置垂直或水平位置，讓這個元素相對于它的原始起點進行移動。另外，相對定位時，無論是否進行移動，元素

13、仍然占據原來的空間。因此，移動元素會導致它覆蓋其他元素 。動手實踐動手實踐實現網頁元實現網頁元素相對定位素相對定位最終文件：光盤最終文件第9章9-7-2.html 視頻：光盤視頻第9章9-7-2.swf9.7.3absolute（絕對定位）（絕對定位）絕對定位是參照瀏覽器的左上角，配合top、right、bottom和left進行定位的，如果沒有設置上述的4個值，則默認的依據父級元素的坐標原點為原始點。絕對定位可以通過top、right、bottom和left來設置元素，使其處在任何一個位置。動手實踐動手實踐實現網頁元素絕對定位實現網頁元素絕對定位9.7.4fixed（固定定位）（固定定位）固

14、定定位和絕對定位比較相似，它是絕對定位的一種特殊形式，固定定位的容器不會隨著滾動條的拖動而變化位置。在視線中，固定定位的容器位置是不會改變的。固定定位可以把一些特殊效果固定在瀏覽器的視線位置。動手實踐動手實踐實現網頁元素固定定位實現網頁元素固定定位最終文件：光盤最終文件第9章9-7-3.html 視頻：光盤視頻第9章9-7-3.swf最終文件：光盤最終文件第9章9-7-4.html 視頻：光盤視頻第9章9-7-4.swf9.7.5float（浮動定位）（浮動定位）除了使用position進行定位外，還可以使用float定位。float定位只能在水平方向上定位，而不能在垂直方向上定位。float

15、屬性表示浮動屬性，它用來改變元素塊的顯示方式。浮動定位是CSS排版中非常重要的手段。浮動的框可以左右移動，直到它外邊緣碰到包含框或另一個浮動框的邊緣。動手實踐動手實踐實現網頁元素浮動定位實現網頁元素浮動定位9.7.6空白邊疊加空白邊疊加空白邊疊加是一個比較簡單的概念，當兩個垂直空白邊相遇時，它們將形成一個空白邊。這個空白邊的高度是兩個發生疊加的空白邊中的高度的較大者。動手實踐動手實踐空白邊疊加在網頁中的應用空白邊疊加在網頁中的應用最終文件：光盤最終文件第9章9-7-5.html 視頻：光盤視頻第9章9-7-5.swf最終文件：光盤最終文件第9章9-7-6.html 視頻：光盤視頻第9章9-7-

16、6.swf在網頁制作的過程中，首先需要對網頁進行布局，網頁布局的形式多種多樣，例如居中的網頁布局，居右的網頁布局，兩列的網頁布局，3列的網頁布局等，通過CSS樣式的設置能夠輕松的實現各種不同效果的網頁布局。9.8.1Div高度自適應高度自適應高度值可以使用百分比進行設置，但是直接使用height:100%;不會顯示效果的，這與瀏覽器的解析方式有一定關系，如圖為實現高度自適應的CSS代碼，在瀏覽器中預覽該頁面，可以看到Div高度自適應的效果。9.8.2網頁內容居中布局網頁內容居中布局居中的網頁設計目前在網頁布局的應用中非常廣泛，所以如何在CSS中讓設計居中顯示是大多數開發人員首先要學習的重點之一

17、。9.8.3網頁元素浮動布局網頁元素浮動布局在Div+CSS布局中，浮動布局是使用最多，也是常見的布局方式，浮動的布局又可以分為多種形式。1兩列固定寬度布局2兩列百分比寬度布局3兩列右列寬度自適應布局4兩列固定寬度居中布局5三列浮動中間列寬度自適應布局9.8.4流體網格布局流體網格布局隨著網絡及移動設備的迅速發展，現在越來越多的人可以隨時隨地的使用各種移動設備瀏覽網頁，為了滿足各種不同設備對網頁的瀏覽，在Dreamweaver CC中新增了流體網格布局的功能，該功能主要是針對目前流行的智能手機、平板電腦和桌面電腦三種設備。通過創建流體網格布局頁面，可以使頁面能夠適應3種不同的設備，并且可以隨時

18、在3種不同的設備中查看頁面的效果。動手實踐動手實踐制作商場網站制作商場網站IPAD頁面布局頁面布局最終文件：光盤最終文件第9章9-8-4.html 視頻：光盤視頻第9章9-8-4.swf一個典型的網頁中通常都會包含頭部、頁腳、導航、主體內容和側邊內容等區域。針對這情況，HTML5中引入了與文檔結構相關聯的網頁結構元素。在Dreamweaver CC是為了能夠使設計者能夠輕松的在網頁中插入HTML5結構元素，在“插入”面板中新增了“結構”選項卡，通過單擊“結構”選項卡中的按鈕，即可快速在網頁中插入相應的HTML5結構元素。9.9.1頁眉頁眉頁眉通常用于定義網頁的介紹信息內容，在HTML5中新增了標簽，使用該標簽可以在網頁中定義網頁的頁眉部分。9.9.2頁腳頁腳頁腳通常用于定義網頁文檔的版底信息，包括設計者信息、文檔的創建日期以及聯系方式等。在HTML5中新增了標簽，使用該標簽可以在網頁中定義網頁的頁腳部分。9.9.3Navigation導航是每個網頁中都包含的重要元素之一，通過網站導航可以在網站中各頁面之間進行跳轉。在在HTML5中新增了標簽，使用該標簽可以在網頁中定義網頁的導航部分。9.9.4章節章節在網頁文檔中常常需要定義章節等特定的區域。在HTML5中新增了標簽，使用該標簽可以在網頁中定義章節、頁眉、頁腳或文檔中的其他部分。9.9.5文章文章網