3 頁面佈局
頁面佈局是網頁設計的重要工作之一，它決定了頁面中各板塊的顯示位置和顯示方式。傳統的頁面佈局通常採用表格佈局技術，適合一些頁面結構不太複雜的小型網站，其優點是佈局方便、直觀，缺點是顯示速度較慢，需要將整個表格下載完畢纔開始顯示頁面內容。表格佈局方式也不利於“結構和表現分離”的設計理念。目前最爲流行的頁面佈局方法是採用CSS+DIV的佈局技術，這是Web標準推薦的佈局方法。
(1)使用表格佈局頁面
早期的網頁佈局設計一般都採用表格進行頁面佈局，這種方法將整個頁面規劃到一個或多個表格中，在需要時也可以使用表格嵌套的方法實現頁面佈局。
目前雖然CSS+DIV佈局技術佔據了主導地位，但在一些小型環境、頁面佈局設計或頁面元素定位中，表格佈局仍有自己的一席之地。
在本課程中，不對錶格佈局進行講解，需要了解的同學自行學習。
(2)DIV+CSS佈局頁面
使用DIV+CSS進行頁面佈局最大的優點是體現結構和表現分離的網頁設計思想，另外，瀏覽器對CSS+DIV定義的頁面是邊解析邊顯示的，較表格佈局的頁面顯示速度更快。
使用DIV+CSS進行頁面佈局的時候，一般分爲以下三個環節。
1）頁面結構分析，是根據頁面所表現的內容構思和規劃頁面組成的過程。也就是說在設計一個網頁時首先應考慮頁面應包含哪些板塊，這些板塊應放置在頁面的什麼位置等。必要時可畫出頁面結構的設計草圖。
2）頁面佈局，是指在頁面結構確定後使用<div>標記創建需要的各板塊區域。
3）樣式設置，是指對所有<div>及其他頁面元素的表現所進行的設置。
下面通過一個實例來介紹具體的使用方法，頁面佈局效果圖見圖1所示。
從圖1頁面佈局效果圖中可以看出，該頁面由6個板塊組成，其中“左邊”、“中間”、“右邊”3個板塊需要橫向排成一行。設計時可以將6個板塊分別放置在6個不同的層(<div>)結構中，通過分別對各層屬性進行設置以實現頁面佈局效果。
接下來，新建一個空網站，在空網站中添加一個Web窗體，並將其命名爲Default。在該頁面下找到由系統自動添加的<div>和</div>標記，在其中再添加6對<div>標記。示例如下：
<body>
<form id="form1" runat="server">
<div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</form>
</body>
接下來創建CSS樣式表，創建操作類似於添加新的Web窗體，只不過這裏是創建“樣式表”，創建過程如圖2所示。
div
{
box-sizing:border-box; /*/
width:100%;
text-align: center; border: #00ff00 1px solid; /*綠色、1像素寬、實線邊框*/
}
#top
{
width: 100%; height: 56px;
line-height:56px; font-family:黑體; font-size:xx-large;
}
#navigation
{
/*設置層高（height）與行高（line-heigh）相等可使單行文字垂直居中*/
width: 100%; height: 24px; line-height:24px;
}
#left
{
/*“float:left”表示元素向左浮動，使後續元素可跟隨在該元素的右側*/
width: 10%; height: 104px; line-height:104px; float: left;
}
#mid
{
width: 80%; height: 104px; line-height:104px; float: left;
}
#right
{
/*“clear:right”表示不允許元素的右邊有浮動元素*/
width: 10%; height: 104px; line-height:104px; float:left; clear: right;
}
#bottom
{
/*“clear:both”表示不允許元素的左右兩邊有浮動元素*/
width: 100%; height: 24px; line-height:24px; font-family:黑體; clear: both;
}
CSS+DIV佈局技術中經常用到float屬性和clear屬性。
float屬性用於確定是否允許元素在頁面中浮動及浮動的方向。可以取值none(不允許元素浮動)、left(元素可以向左浮動)、right(元素可以向右浮動)。
clear屬性用於設置元素的左右是否允許出現其他浮動元素。可以取值left(左邊不允許出現其他浮動元素)、right(右邊不允許出現其他浮動元素)、both(左右兩邊都不允許)、none(左右兩邊都允許)。
再次修改“Default.aspx”文件的代碼，head和body部分修改如下：
<head runat="server">
<title></title>
<link href = "StyleSheet.css" rel = "Stylesheet" type = "text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="top">標題Logo欄</div>
<div id="navigation">導航欄</div>
<div id="left">左邊</div>
<div id="mid">中間</div>
<div id="right">右邊</div>
<div id="bottom">頁腳</div>
</div>
</form>
</body>
再次運行代碼，運行效果如圖3所示。
頁面元素定位
網頁中元素的顯示位置，在瀏覽器窗口大小發生變化時可能出現一些變化。爲了避免元素位置變化而導致頁面佈局錯亂，需要使用元素定位屬性進行設置。頁面元素定位分爲流佈局定位(static)、座標絕對值定位(absolute)、座標相對定位(relative)3種形式。
1)static定位方式使頁面中的所有元素按照從左到右、從上到下的順序顯示，各元素之間不重疊。
2)absolute定位方式使元素顯示在頁面中的位置由style樣式中的left、right、top、bottom及z-index屬性值決定。
3)relative定位方式使頁面元素顯示在頁中的位置由style樣式中left、top、z-index屬性值決定。與絕對定位不同，具有相同z-index屬性值的元素不會重疊。
下面給出一個例程來講解頁面元素定位中不同形式的區別：
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>絕對定位與相對定位的比較</title>
<style type="text/css">
#div1
{
margin: 0 auto;width: 257px; text-align: left; height: 185px; border: solid 1px #009999;
}
#div2
{
width: 118px; height: 34px; text-align: left; border: solid 1px #ff66cc;
}
#div3
{
position:absolute; top:76px; left: 48px; width: 200px;
z-index: 100; height: 100px; border: solid 1px #ff0033;
}
#div4
{
top: 20px; left: 30px; position: absolute; width: 96px; height: 42px;
border: solid 1px #3366ff;
}
</style>
</head>
<body style="text-align:center">
<form id="form1" runat="server">
<div id="div1">div1
<div id="div2">div2
<div id="div3" >div3
<div id="div4">div4</div>
</div>
</div>
</div>
</form>
</body>
看一下運行效果如圖4所示。改變瀏覽器的寬度，觀察各個層位置的變化情況。
