第5開始網(wǎng)站的設(shè)計，不僅體現(xiàn)在具體內(nèi)容與細節(jié)的設(shè)計制作上，也需要對框架進行整體的把握。在進行網(wǎng)站設(shè)計時，需要對網(wǎng)站的版面與布局進行一個整體性的規(guī)劃。

本章主要內(nèi)容：框架用CSS5.1.1“國”字型5.1.2“廠”字型5.1.3“框架”型5.1.4“封面”型返回本章首頁5.1網(wǎng)頁布局類型述在網(wǎng)頁布局設(shè)計上，根據(jù)用戶的使用習慣與設(shè)計經(jīng)驗，已經(jīng)形成了一些常見的布局方式。網(wǎng)頁布局方式主要從用戶使用的方便性、界面大方美觀、網(wǎng)頁特色等方面考慮。5.1.1“國”字型返回本節(jié)“國”字型布局是一種常見的網(wǎng)頁布局類型。這種布局類型是在網(wǎng)頁的上下各設(shè)計一個通幅廣告條，左面是主菜單或?qū)Ш綏l，右面是友情鏈接或其他鏈接的內(nèi)容，中間是網(wǎng)頁的主要內(nèi)容。這樣布局可以充分利用網(wǎng)頁的版面，信息量大。“國”字型布局效果如圖5-1所示。圖5-1“國”字型布局5.1.2“廠”字型返回本節(jié)“廠”字型布局是在網(wǎng)頁的上部放置Logo和Banner，在網(wǎng)頁的左邊放置導航條與其他鏈接，在網(wǎng)頁的右下方放置網(wǎng)頁的主要內(nèi)容。這種布局的好處是網(wǎng)頁的各個部分布局非常集中，可以在一個區(qū)域突出網(wǎng)頁的重要內(nèi)容。網(wǎng)頁中的內(nèi)容主次分明，很有層次感。“廠”字型布局效果如圖5-2所示。圖5-2“廠”字型布局5.1.3“框架”型返回本節(jié)“框架”型布局是指以框架網(wǎng)頁的形式實現(xiàn)網(wǎng)頁的布局?？蚣芫W(wǎng)頁的功能是將瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁。這樣框架就可以實現(xiàn)網(wǎng)頁的布局。與其他的網(wǎng)頁布局類型不同的是，其他的網(wǎng)頁布局都是在一個網(wǎng)頁上實現(xiàn)。而框架布局是在幾個不同的網(wǎng)頁上實現(xiàn)布局，然后通過框架網(wǎng)頁集合在一起?！翱蚣堋毙筒季中Ч鐖D5-3所示。圖5-3“框架”型布局5.1.4“封面”型返回本節(jié)“封面”型布局一般出現(xiàn)在網(wǎng)站的首頁，頁面上通常是一些精美的平面設(shè)計結(jié)合一些小的動畫，放上幾個簡單的鏈接或者僅是一個“進入”鏈接，甚至直接在首頁的圖片上設(shè)計鏈接?！胺饷妗毙筒季值木W(wǎng)頁結(jié)構(gòu)常常很簡單，需要使用精美的封面效果來體現(xiàn)網(wǎng)頁的內(nèi)容?！胺饷妗毙筒季中Ч鐖D5-4所示。圖5-4“封面”型布局5.2.1在頁面中插入表格5.2.2設(shè)置表格屬性5.2.3表格標簽5.2.4在普通模式下用表格布局網(wǎng)頁5.2.5在布局模式下用表格布局網(wǎng)頁返回本章首頁5.2用表格進行網(wǎng)頁布局表格可以用來控制頁面布局，通過在表格里放置內(nèi)容，用戶能夠把對象放置到頁面的指定位置，創(chuàng)建更復雜的視覺結(jié)構(gòu)。表格是一種可以讓設(shè)計人員初步控制站點布局的HTML元素。5.2.1在頁面中插入表格返回本節(jié)新建一個HTML文檔。執(zhí)行【插入記錄】|【表格】命令，彈出【表格】對話框，如圖5-5所示。這里插入一個4行3列的表格，表格寬度為500像素，邊框粗細為1像素，單元格邊距和間距也都為0，在“標題”文本框中輸入文字“一個簡單的表格”。單擊【確定】按鈕，頁面中出現(xiàn)一個表格。圖5-5【表格】對話框5.2.1在頁面中插入表格返回本節(jié)1．表格寬度表格寬度有百分比和像素兩種單位可進行設(shè)置。以百分比為單位進行設(shè)置在瀏覽網(wǎng)頁時，按照網(wǎng)頁瀏覽區(qū)的寬度為基準，而以像素為單位進行設(shè)置則是表格的實際寬度，在不同的情況下需要使用不同的單位，例如，在表格嵌套時多以百分比為單位。2．邊框粗細邊框粗細是設(shè)置表格邊框的大小，在插入表格時，表格邊框的默認值為1像素，如果把表格邊框的值設(shè)置為0，表格的邊框則為虛線，如圖5-7所示，這樣，在瀏覽網(wǎng)頁時就看不到表格的邊框了。如果把表格邊框的值設(shè)置為5，那表格的邊框就變得寬了許多，如圖5-8所示。圖5-7邊框大小為0圖5-8邊框大小為55.2.1在頁面中插入表格返回本節(jié)3．單元格邊距單元格邊距是表示單元格中的內(nèi)容與邊框距離的大小，如果單元格邊距為默認值，其單元格中的內(nèi)容與邊框的距離很近，如圖5-9所示。如果把單元格的邊距設(shè)為8，在單元格中內(nèi)容與邊框之間就存在了一定的距離，如圖5-10所示。圖5-9單元格邊距為默認值圖5-10單元格邊距為84．單元格間距單元格邊距和單元格間距是兩個不同的概念，單元格間距是指單元格與單元格、單元格與表格邊框的距離。兩者的單位都是像素，在默認情況下，邊距的值為1，間距的值為2。在如圖5-11所示中，就是把單元格間距設(shè)置為8后的表格外觀。圖5-11單元格間距為85.2.1在頁面中插入表格返回本節(jié)5．頁眉設(shè)置頁眉設(shè)置其實就是為表格選擇一個加粗文字的標題欄，這樣對于要求標題以默認粗體顯示的表格，省去了每次手工執(zhí)行加粗動作，提高了工作效率。可將頁眉設(shè)置為無、左部、頂部，或者左部和頂部同時設(shè)置。如圖5-12和圖5-13就是分別將頁眉設(shè)置在左部和頂部時的效果。圖5-12頁眉設(shè)在左部圖5-13頁眉設(shè)在頂部6．輔助功能輔助功能的作用主要是為表格和表格的內(nèi)容提供一些簡單的文本描述?？梢栽凇皹祟}”文本框中為表格設(shè)置一個標題，在“對齊標題”下拉列表中可以選擇一種標題的對齊方式。在“摘要”文本域中可以輸入對所創(chuàng)建表格的簡單描述信息。5.2.2設(shè)置表格屬性返回本節(jié)在頁面中插入表格以后，可以在“屬性”面板中對表格進行設(shè)置，除了某些屬性和“表格”對話框中的設(shè)置一樣外，還可以設(shè)置表格的背景顏色、邊框顏色和對齊方式等屬性。圖5-14表格屬性面板下面分別對表格中的屬性進行說明。（1）表格Id：指的是表格名稱，可以在這個選項欄里輸入一個名稱來為表格命名。（2）行和列：可以重新設(shè)置表格中行和列的數(shù)量。（3）寬：設(shè)定表格的寬度。寬度可以在“表格”對話框中進行設(shè)置；單位都有“百分比”和“像素”兩種。一般情況下，不需要設(shè)置表格高度。（4）填充：設(shè)置單元格內(nèi)容與單元格邊框之間的像素數(shù)。（5）間距：設(shè)置相鄰的表格單元格之間的像素數(shù)。（6）對齊：可以設(shè)定表格的對齊方式。表格有3種對齊方式，分別為“左對齊”、“居中對齊”和“右對齊”。單擊下拉菜單按鈕，可以在下拉菜單中選擇對齊方式。如果保持默認的話，表格會居左對齊。5.2.2設(shè)置表格屬性返回本節(jié)（7）邊框：指定表格邊框的寬度，和在“表格”對話框中的設(shè)置一樣，它的單位為像素。如果沒有明確指定邊框的數(shù)值，則大多數(shù)瀏覽器按邊框設(shè)置為1像素顯示表格。如果要瀏覽器不顯示表格邊框，可以將“邊框”數(shù)值設(shè)置為0。（8）清除列寬和清除行高：這兩個按鈕可以將表格中所有明確指定的行高或列寬刪除。（9）將表格寬度轉(zhuǎn)換成像素和將表格寬度轉(zhuǎn)換成百分比：將表格中每列的寬度設(shè)置為以像素為單位的當前寬度，還將整個表格的寬度設(shè)置為以像素為單位的當前寬度。將表格中每列的寬度或高度設(shè)置為按占“文檔”窗口寬度百分比表示的當前寬度，還將整個表格的寬度設(shè)置為按占“文檔”窗口寬度百分比表示的當前寬度。（10）背景顏色：此選項可以設(shè)置表格的背景顏色，單擊背景顏色后的按鈕，可以打開調(diào)色板，使用吸管工具直接選擇顏色即可，也可以直接在文本框中輸入顏色代碼值。（11）邊框顏色：用來設(shè)定表格邊框的顏色。選中表格以后單擊顏色按鈕，就可以和設(shè)置背景顏色一樣選擇顏色了。當設(shè)定邊框顏色以后，在表格內(nèi)所有單元格的邊框都會變?yōu)樗O(shè)定的顏色。（12）背景圖像：設(shè)置表格背景圖像，可以將一張圖片平鋪到表格中。單擊“背景圖像”欄后邊的黃色文件夾圖標，在彈出的“選擇圖像源文件”窗口中找到圖片即可。5.2.3表格標簽返回本節(jié)表格的相關(guān)標簽有<table>、<tr>、<td>等，分別表示表格、行、列。1．<table>標簽<table>標簽表示一個表格的開始。每一個<table>標簽需要一個</table>標簽關(guān)閉。相關(guān)的屬性如下所述。width：表格的寬度。height：表格的高度。border：表格邊框的線寬。cellpaddinf：表格邊框之間的填充寬度。cellspacing：表格邊框之間的間距。bordercolor：邊框的顏色。background：表格背景的圖片。bgcolor：表格背景的顏色。align：表格的對齊方式，可以是left、center、right等值。例如，下面是一個表格的代碼：<tablewidth="500"height="200"border="2"cellspacing="1"cellpadding="2"bordercolor="##CC0000"bgcolor="#0033FF"align="center">這些代碼表示開始一個表格，寬高像素為500×200像素，邊框?qū)挾葹?像素，邊框之間的填充為1像素，外邊框和內(nèi)邊框的間距為2像素，邊框顏色為紅色，背景顏色為藍色，居中對齊。專家點撥：表格的寬度值和高度值如果是一個數(shù)字，比如<tablewidth="500">，則尺寸單位為像素。如果是一個百分比，比如<tablewidth="50%">，則尺寸單位為百分比，表示寬度或高度占上一級元素的百分比。5.2.4在普通模式下用表格布局網(wǎng)頁返回本節(jié)表格是最常用的網(wǎng)頁布局實現(xiàn)方式。在表格中，很容易實現(xiàn)表格行和列的大小操作，從而方便地實現(xiàn)網(wǎng)頁布局。本節(jié)通過實例介紹利用表格進行網(wǎng)頁布局的方法。網(wǎng)頁布局實例效果如圖5-20。這個頁面是由4個表格組成的，某些單元格中又嵌套有表格。布局示意圖如圖5-21示。表1為網(wǎng)頁的頂部，包括網(wǎng)站的Logo及Banner；表2是網(wǎng)站導航條；表3是頁面的主體區(qū)，包括左側(cè)的文章列表，右側(cè)的其他鏈接和下部的搜索條，其中分別嵌套有小表格；表4是網(wǎng)站的底部，是網(wǎng)站的版權(quán)欄。圖5-20格布局實例效果5.2.4在普通模式下用表格布局網(wǎng)頁返回本節(jié)表1表2表3表4圖5-21布局示意圖制作步驟：1．創(chuàng)建第一個表格2．創(chuàng)建第二個表格3．創(chuàng)建第三個表格4．創(chuàng)建第四個表格5.2.5在布局模式下用表格布局網(wǎng)頁返回本節(jié)

為了簡化使用表格進行頁面布局的過程，Dreamweaver提供了“布局”模式?！安季帧蹦Ｊ降墓ぷ鞣绞绞?，用戶可以在頁面上繪制表格，然后把文本或圖形放置在表格里。在布局模式下創(chuàng)建表格具有更大的靈活性。可以根據(jù)實現(xiàn)規(guī)劃好的網(wǎng)頁排版方式，畫出需要的表格和單元格。然后再根據(jù)具體內(nèi)容進行適當?shù)木庉嫼驼{(diào)整，這樣大大提高了網(wǎng)頁布局的效率。下面通過一個網(wǎng)頁布局實例介紹在“布局”模式下布局網(wǎng)頁的方法。實例效果如圖5-27示。網(wǎng)頁分成3部分來完成布局，第一部分是上面的頂部信息，包括搜索條、Banner、導航欄等；第二部分是網(wǎng)頁的主體部分；第三部分是底部信息。

制作步驟:1．切換到表格布局模式2．布局頂部部分3．布局主體部分4．布局網(wǎng)頁底部圖5-27布局表格布局的網(wǎng)頁5.3.1用框架布局頁面5.3.2創(chuàng)建框架和框架集5.3.3設(shè)置框架及框架集屬性5.3.4保存框架和框架集5.3.5控制帶有鏈接的框架內(nèi)容返回本章首頁5.3框架框架的作用就是把瀏覽器窗口劃分為若干個區(qū)域，每個區(qū)域可以分別顯示不同的網(wǎng)頁。訪問者瀏覽站點時，可以使某個區(qū)域的文檔永遠不更改，通過導航條的鏈接更改主要內(nèi)容框架的內(nèi)容，從而達到網(wǎng)頁布局的相對統(tǒng)一。一般情況下，可以用框架來保持網(wǎng)頁中固定的幾個部分，如網(wǎng)頁大標題、鏈接按鈕等，剩下的框架用來展現(xiàn)所選擇的網(wǎng)頁內(nèi)容。5.3.1用框架布局頁面返回本節(jié)要制作框架網(wǎng)頁，就要建立框架集?？蚣芗墙M織頁面內(nèi)容的常見方法，通過框架集可以將網(wǎng)頁的內(nèi)容組織到相互獨立的HTML頁面內(nèi)，相對固定的內(nèi)容（比如導航欄、標題欄）和經(jīng)常變動的內(nèi)容分別以不同的文件保存將會大大提高網(wǎng)頁設(shè)計和維護的效率。本節(jié)制作一個簡單的框架網(wǎng)頁，先對框架集和框架等概念有一個概括的認識。1．建立框架集2．保存框架和框架集3．理解框架集HTML代碼5.3.1用框架布局頁面返回本節(jié)打開文件5.3.1.html，切換到代碼視圖，如圖5-49所示。為了便于閱讀，圖中的代碼進行了折疊。定義框架集的HTML標簽是<frameset></frameset>，含有這對標簽的源代碼存放在框架集文件中。圖5-49框架集源代碼<frameset></frameset>中含有<frame/>標簽，每個<frame/>標簽定義一個框架，并為框架設(shè)置名稱、源文件等屬性，如圖5-50所示。圖5-50<frame/>標簽5.3.2創(chuàng)建框架和框架集返回本節(jié)每一個框架都是一個獨立的HTML頁面，它是瀏覽器窗口中的一個區(qū)域，可以顯示與瀏覽器窗口的其余部分中所顯示內(nèi)容無關(guān)的HTML文檔。通過框架集的使用，這些框架能夠很好的在一起運作。所謂框架集就是指定義網(wǎng)頁結(jié)構(gòu)與屬性的HTML頁面，這其中包含了顯示在頁面中框架的數(shù)目，框架的尺寸，裝入框架的頁面的來源，以及其他一些可定義的屬性的相關(guān)信息。框架集頁面不會在瀏覽器中顯示（noframes部分除外），它只是向瀏覽器提供如何顯示一組框架以及在這些框架中應(yīng)顯示哪些文檔的有關(guān)信息。在Dreamweaver中有兩種創(chuàng)建框架集的方法：既可以從若干預定義的框架集中選擇，也可以自己設(shè)計框架集。1．使用預定義的框架集1）創(chuàng)建新的空預定義框架集2）在現(xiàn)在有文檔中創(chuàng)建預定義的框架集2．自己設(shè)計框架集3．拆分或刪除框架4．創(chuàng)建嵌套框架5.3.3設(shè)置框架及框架集屬性返回本節(jié)框架和框架集是一些獨立的HTML文檔?？梢酝ㄟ^設(shè)置某些框架或框架集的屬性來對框架或框架集進行修改。1．選取要進行更改的框架和框架集2．設(shè)置框架屬性選取框架，打開框架的【屬性】面板。如圖5-55所示。圖5-55框架屬性面板框架名稱：為當前框架命名（為了便于確定超鏈接應(yīng)給框架命名）。源文件：確定框架的源文檔。可以直接在文本框中輸入文件路徑，也可以單擊文件夾圖標查找并選取文件。還可以通過將插入點放在框架內(nèi)并執(zhí)行【文件】|【在框架中打開】命令來打開文件5.3.3設(shè)置框架及框架集屬性返回本節(jié)邊框：用來控制當前框架有無邊框。選項有“是”（顯示邊框）、“否”（隱藏邊框）和“默認值”。大多數(shù)瀏覽器默認為顯示邊框，除非父框架集已將“邊框”設(shè)置為“否”。只有當共享該邊框的所有框架都將“邊框”設(shè)置為“否”時，或者當父框架集的“邊框”屬性設(shè)置為“否”并且共享該邊框的框架都將“邊框”設(shè)置為“默認值”時，邊框才是隱藏的。滾動：確定當框架內(nèi)的內(nèi)容顯示不下的時候是否出現(xiàn)滾動條。選項有“是”、“否”、“自動”和“默認”?！笆恰北硎撅@示滾動條，“否”表示不顯示滾動條，“自動”則是自動顯示，也就是當該框架內(nèi)的內(nèi)容超過當前屏幕上下或左右邊界時，滾動條才會顯示，否則不顯示。“默認”將不設(shè)置相應(yīng)屬性的值，從而使各個瀏覽器使用其默認值。不能調(diào)整大?。合薅蚣艹叽纾钤L問者無法通過拖動框架邊框在瀏覽器中調(diào)整框架大小。在Dreamweaver中始終可以調(diào)整邊框大小，該選項僅適用于在瀏覽器中查看框架的訪問者。邊框顏色：為所有框架的邊框設(shè)置邊框顏色。此顏色應(yīng)用于和框架接觸的所有邊框，并且重寫框架集的指定邊框顏色。邊界寬度：設(shè)置以像素為單位的框架邊框和內(nèi)容之間左右邊距。邊界高度：設(shè)置以像素為單位的框架邊框和內(nèi)容之間上下邊距。5.3.3設(shè)置框架及框架集屬性返回本節(jié)3．設(shè)置框架集屬性選取框架集，打開框架集的【屬性】面板。如圖5-56所示。邊框：在邊框下拉列表中選擇在瀏覽器中查看時是否顯示框架邊框。邊框顏色：設(shè)置邊框的顏色。邊框?qū)挾龋褐付蚣芗兴羞吙虻膶挾?。框架大?。簡螕簟拘辛羞x擇范圍】區(qū)域左側(cè)或頂部的選項卡；然后在“值”文本框中，輸入高度或?qū)挾取挝唬喊ā跋袼亍?、“百分比”和“相對”?！跋袼亍睂⑦x定列或行的大小設(shè)置為一個絕對值。對于應(yīng)始終保持相同大小的框架（例如導航條）而言，此選項是最佳選擇。“百分比”指定選定列或行應(yīng)相當于其框架集的總寬度或總高度的百分比。“相對”指定在為“像素”和“百分比”框架分配空間后，為選定列或行分配其余可用空間。圖5-56框架集屬性面板5.3.4保存框架和框架集返回本節(jié)框架集文件和與之相關(guān)的框架文件必須先保存，然后才可以在瀏覽器中預覽該頁面。當使用Dreamweaver來創(chuàng)建框架文檔時，每個新的框架文檔都會被賦予一個臨時的文件名。例如，UntitledFrameset-1.html是代表框架集頁面，UntitledFrame-1.html、UntitledFrame-2.html等這種文件名是代表框架頁面，一般主框架頁面的文件名如Untitled-1-html等。1．保存框架集內(nèi)所有的文件2．保存框架中顯示的文檔3．要保存框架集文件5.3.5控制帶有鏈接的框架內(nèi)容返回本節(jié)要在一個框架中使用鏈接以打開另一個框架中的文檔，必須設(shè)置鏈接目標。鏈接的target屬性指定在其中打開鏈接的內(nèi)容的框架或窗口。例如，如果導航條位于左框架，并且希望鏈接的材料顯示在右側(cè)的主要內(nèi)容框架中，必須將主要內(nèi)容框架的名稱指定為每個導航條鏈接的目標。當訪問者單擊導航鏈接時，將在主框架中打開指定的內(nèi)容。設(shè)置鏈接的目標框架的方法如下所述。（1）在文檔中選擇需要鏈接的文本或者對象。（2）執(zhí)行【窗口】|【屬性】命令，在“屬性”面板【鏈接】后的文本框中選擇或輸入要鏈接到的文件。（3）在“屬性”面板的【目標】字段的下拉菜單中選擇鏈接文檔顯示的窗口或框架。5.3.5控制帶有鏈接的框架內(nèi)容返回本節(jié)_blank：在新的窗口中打開鏈接文檔，保留當前窗口。_parent：在鏈接的父框架內(nèi)顯示鏈接文檔。_self：在當前框架打開鏈接文檔，替換當前框架中的內(nèi)容。_top：在當前文檔的最外邊的框架集內(nèi)打開鏈接文檔，替換所有框架?？蚣苊Q也出現(xiàn)在該菜單中：選擇一個命名框架以打開該框架中鏈接的文檔。只有在框架集內(nèi)編輯文檔時才顯示框架名稱。如果是單獨打開文檔窗口編輯鏈接時，框架名稱不顯示在“目標”彈出式菜單中，此時可以將目標框架的名稱直接鍵入“目標”文本框中。5.4.1表格＋CSS布局5.4.2DIV＋CSS布局返回本章首頁5.4用CSS進行網(wǎng)頁布局隨著Web2.0的廣泛流行，越來越多的網(wǎng)站工程師采用符合W3C（WorldWideWebConsortium）標準的技術(shù)開發(fā)網(wǎng)頁，這是今后網(wǎng)頁設(shè)計的發(fā)展方向。CSS頁面布局使用層疊樣式表格式（而不是傳統(tǒng)的HTML表格或框架），用于組織網(wǎng)頁上的內(nèi)容。CSS布局的基本構(gòu)造塊是div標簽，它是一個HTML標簽，在大多數(shù)情況下用作文本、圖像或其它頁面元素的容器。5.4.1表格＋CSS布局返回本節(jié)表格＋CSS布局是從傳統(tǒng)的網(wǎng)頁設(shè)計技術(shù)到符合Web2.0標準的網(wǎng)頁設(shè)計技術(shù)一種過渡。本節(jié)介紹表格＋CSS布局的方法。傳統(tǒng)的網(wǎng)頁設(shè)計，往往都是利用表格進行網(wǎng)頁布局，其實<table>標簽本意并不是用來布局網(wǎng)頁的技術(shù)，它的本意是創(chuàng)建表格數(shù)據(jù)，用來表現(xiàn)網(wǎng)頁中具有二維關(guān)系的數(shù)據(jù)。傳統(tǒng)網(wǎng)頁設(shè)計時，采用大量嵌套的表格進行布局，容易將網(wǎng)頁內(nèi)容、結(jié)構(gòu)和表現(xiàn)混雜在一起，這樣設(shè)計出來的網(wǎng)頁不利于維護和搜索引擎的搜索。如圖5-58所示，是傳統(tǒng)布局方式的一個網(wǎng)頁源文件代碼片斷?？梢钥闯鰜磉@個網(wǎng)頁利用了大量的嵌套表格進行布局，代碼十分復雜，不利用維護和管理。圖5-58傳統(tǒng)的表格布局代碼5.4.1表格＋CSS布局返回本節(jié)符合Web2.0標準的網(wǎng)頁設(shè)計是將網(wǎng)頁內(nèi)容、結(jié)構(gòu)與表現(xiàn)分開，做到“表現(xiàn)和結(jié)構(gòu)相分離”。表格＋CSS布局可以使設(shè)計的網(wǎng)頁結(jié)構(gòu)更加合理，更便于維護和更改網(wǎng)頁的樣式，但是從本質(zhì)上講，這種布局網(wǎng)頁的方式只是從傳統(tǒng)的網(wǎng)頁設(shè)計技術(shù)到符合Web2.0標準的網(wǎng)頁設(shè)計技術(shù)一種過渡。如圖5-59所示，這是在網(wǎng)站首頁布局中經(jīng)常會看到的局部布局效果，位置一般在網(wǎng)頁的兩側(cè)。圖5-59布局效果5.4.1表格＋CSS布局返回本節(jié)針對這個布局效果，傳統(tǒng)的表格布局方法是創(chuàng)建一個3行1列的表格，然后直接設(shè)置表格和每個單元格的屬性。表格＋CSS的布局方法不是這樣。具體方法是，先創(chuàng)建一個3行1列的表格，表格和每個單元格的樣式用CSS來控制，示意圖如圖5-60所示。圖5-60CSS樣式控制表格示意圖這里定義了4個CSS類選擇符：.left_tdbgall、.left_top、.left_mid、.left_end，它們分別用來控制表格的樣式和3個單元格的樣式。5.4.1表格＋CSS布局返回本節(jié)下面詳細介紹這個網(wǎng)頁布局實例的制作方法。1．創(chuàng)建CSS文件（1）新建一個CSS文檔，保存為5.4.1.css。單擊“CSS樣式”面板中的“新建CSS規(guī)則”按鈕，彈出“新建CSS規(guī)則”對話框，在其中進行設(shè)置，具體情況如圖5-61所示。圖5-61新建.left_tdbgall樣式單擊“確定”按鈕進入“.left_tdbgall的CSS規(guī)則定義”對話框，在其中選擇“分類”列表框中的“背景”，設(shè)置“背景顏色”為#666666（灰色）；然后選擇“分類”列表框中的“方框”，設(shè)置寬和高分別為190像素和250像素，如圖5-62所示。圖5-62設(shè)置方框?qū)傩?.4.1表格＋CSS布局返回本節(jié)選擇“分類”列表框中的“邊框”，設(shè)置如圖5-63所示。這樣定義整個表格的邊框為1個像素的綠色細實線。圖5-63設(shè)置邊框?qū)傩酝瓿蒀SS規(guī)則定義以后，單擊“確定”按鈕。這時文檔窗口增加如下代碼：/*表格樣式定義*/.left_tdbgall{ height:250px;/*定義表格寬度*/ width:190px;/*定義單元格高度*/ background-color:#666666;/*定義背景顏色為灰色*/ border:1pxsolid#99CC00;/*定義表格邊框為1像素綠色細線*/}5.4.1表格＋CSS布局返回本節(jié)（2）按照同樣的方法定義一個.left_top類選擇符，這個CSS樣式用來控制第一個單元格（頂部單元格）。代碼如下：/*頂部單元格背景、文字、段落格式等定義*/.left_top{ color:#FFFFFF;/*定義文字顏色*/ height:30px;/*定義單元格高度*/ width:190px;/*定義單元格寬度*/ text-align:left;/*定義段落對齊方式為左對齊*/ background-image:url(img/head.png);/*定義單元格背景圖像*/ background-position:center;/*定義背景圖像居中*/ background-repeat:no-repeat;/*定義背景圖像不重復*/ padding-left:35px;/*設(shè)置方框中填充對象的左邊距為20像素*/ font-size:12px;/*定義文字大小*/ vertical-align:middle;/*定義文字在單元格垂直方向居中對齊*/}5.4.1表格＋CSS布局返回本節(jié)（3）按照同樣的方法定義一個.left_mid類選擇符，這個CSS樣式用來控制第二個單元格（中部單元格）。代碼如下：/*中部單元格背景、文字、段落格式等定義*/.left_mid{ padding:5px;/*定義填充內(nèi)容的邊距*/ height:200px;/*定義單元格高度*/ width:190px;/*定義單元格寬度*/ font-size:12px;/*定義文字大小*/ background-color:#CCCCCC;/*定義背景顏色為淺灰色*/ color:#000000;/*定義文字顏色*/ list-style-position:inside;/*定義列表位置為內(nèi)部*/ list-style-image:url(img/s_left.gif);/*定義列表項前面的圖標*/}5.4.1表格＋CSS布局返回本節(jié)（4）按照同樣的方法定義一個.left_end類選擇符，這個CSS樣式用來控制第三個單元格（底部單元格）。代碼如下所示。.left_end{ height:20px;/*定義單元格高度*/ width:190px;/*定義單元格寬度*/ font-size:12px;/*定義文字大小*/ color:#FFFFFF;/*定義文字顏色*/ text-align:right;/*定義段落對齊方式為左對齊*/ background-color:#99CC00;/*定義背景顏色為綠色*/}專家點撥：Dreamweaver提供了可視化的CSS定義工具，十分適合初學者使用。但是如果你對CSS已經(jīng)有了相當?shù)睦斫?，也可以直接在代碼視圖中輸入需要的CSS代碼。利用手工輸入的方式可以創(chuàng)建更加簡潔的CSS代碼。5.4.1表格＋CSS布局返回本節(jié)2．創(chuàng)建網(wǎng)頁文檔（1）新建一個網(wǎng)頁文檔，保存為5.4.1.html。在“CSS樣式”面板中單擊“附加樣式表”按鈕，彈出“鏈接外部樣式表”對話框，設(shè)置情況如圖5-64所示。圖5-64鏈接外部樣式表設(shè)置完成后，單擊“確定”按鈕。這樣“CSS樣式”面板中就出現(xiàn)了定義好的樣式，如圖5-65所示。圖5-65“CSS樣式”面板5.4.1表格＋CSS布局返回本節(jié)（2）在“設(shè)計”視圖下，插入一個3行1列的表格。切換到“代碼”視圖，重新編輯<body>標簽內(nèi)的代碼，最終<body>標簽內(nèi)的代碼如下所示。<body><tableborder="0"cellpadding="0"cellspacing="0"class="left_tdbgall"><tr><tdclass="left_top">站內(nèi)資訊</td></tr><tr><tdclass="left_mid"> <li>資訊列表1 <li>資訊列表2 <li>資訊列表3<li>資訊列表4 <li>資訊列表5 </td></tr><tr><tdclass="left_end">更多資訊>></td></tr></table></body>代碼編輯完成后保存文檔就完成了本實例的制作。按F12鍵預覽，網(wǎng)頁效果如圖5-59所示。以上創(chuàng)建的網(wǎng)頁文件結(jié)構(gòu)合理，代碼比較簡潔，網(wǎng)頁內(nèi)容和內(nèi)容的表現(xiàn)（外觀）基本是分開的，各自獨立創(chuàng)建在不同的文件中。如果想改變網(wǎng)頁外觀，可以直接編輯5.4.1.css文件，重新設(shè)定相應(yīng)的樣式即可，這樣也比較易于網(wǎng)站的維護。5.4.2DIV＋CSS布局返回本節(jié)利用DIV＋CSS布局網(wǎng)頁是一種盒子模式的開發(fā)技術(shù)。它是通過由CSS定義的大小不一的盒子和盒子嵌套來編排網(wǎng)頁。因為用這種方式排版的網(wǎng)頁代碼簡潔，更新方便，能兼容更多的瀏覽器，比如PDA設(shè)備也能正常瀏覽，所以越來越受到網(wǎng)頁開發(fā)者的歡迎。1．CSS布局簡介網(wǎng)頁中的表格或者其他區(qū)塊都具備內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)等基本屬性，一個CSS盒子也都具備這些屬性。如圖5-66所示是一個CSS盒子的示意圖。圖5-66CSS盒子模型圖5-67CSS布局示意圖在利用DIV＋CSS布局網(wǎng)頁時，需要利用CSS定義大小不一的CSS盒子以及盒子嵌套。如圖5-67所示是一個網(wǎng)站首頁的CSS盒子布局示意圖。5.4.2DIV＋CSS布局返回本節(jié)從圖5-67可以看出，這個網(wǎng)頁一共設(shè)計了7個盒子。最大的盒子是body{}，這是一個HTML元素，是HTML網(wǎng)頁的主體標簽。在body{}盒子中嵌套一個#container{}盒子（這里的#container是一個CSS樣式定義，是一個標識選擇符），可以稱這個盒子為頁面容器。在#container{}盒子中有嵌套3個盒子#header{}、#main{}、#bottom{}，這3個盒子分別是網(wǎng)頁的頭部（Banner、Logo、導航條等）、中部（網(wǎng)頁的主體內(nèi)容）、底部（版權(quán)信息等）。#main{}盒子中嵌套兩個盒子#left{}、#right{}，這是一個兩欄的頁面布局，這兩個盒子分別用來容納左欄和右欄的內(nèi)容。5.4.2DIV