Microsoft Expression Web - 網頁佈局

本章我們將介紹網頁的基本佈局。在建立網頁佈局之前，我們需要考慮我們的內容，然後設計我們希望如何呈現這些內容，因為內容將顯示在我們的網站上。

我們如何呈現內容取決於我們自己，這樣我們的觀眾才能找到我們的網站，然後留下來檢視它。佈局可能包括頂部的公司徽標或橫幅、導航選單、可能包含多列的內容區域以及頁面底部的頁尾。

以前，開發人員使用表格來實現這種外觀。表格建立用於建立行和列的框組。現在，網頁設計師使用<div>來形成框，並使用CSS來將這些框放置在頁面上。

<div> 標籤

以下是<div>標籤的一些特性。

<div>標籤定義HTML文件中的一個分割槽或一個部分，並使管理、樣式化和操作這些分割槽或部分變得容易。
它用於對塊級元素進行分組，以便使用CSS對其進行格式化。
瀏覽器通常會在div元素之前和之後放置換行符。
<div>標籤是一個塊級元素。
<div>標籤幾乎可以包含任何其他元素。
<div>標籤不能放在<p>標籤內。

示例

讓我們來看一個簡單的例子，在這個例子中，我們將使用<div> </div>標籤來建立各種框和樣式規則。

步驟 1 - 開啟Expression Web，然後開啟我們在上一章建立的index.html頁面。

步驟 2 - 如上圖所示，程式碼檢視預設情況下處於高亮顯示狀態。您可以在程式碼檢視或設計檢視中工作，但您也可以看到拆分檢視，它將同時開啟程式碼檢視和設計檢視。因此，讓我們選擇拆分檢視選項。

步驟 3 - body元素定義文件的主體。要設定<body>標籤的樣式，我們需要建立一個新的樣式。首先在設計檢視中選擇body標籤，然後單擊“應用樣式”面板中的新建樣式…，這將開啟“新建樣式”對話方塊。在這裡，您可以為您的樣式定義不同的選項。

步驟 4 - 第一步是從選擇器下拉列表中選擇body，然後從“定義於”下拉列表中選擇現有樣式表。從URL中，選擇我們在上一章建立的CSS檔案。

在左側，有一個類別列表，例如字型、背景等，當前字型高亮顯示。根據您的要求設定字型相關資訊，如上圖所示。

步驟 5 - 選擇您想要的背景顏色。您也可以使用瀏覽器按鈕選擇背景影像。完成背景設定後，如果需要，可以定義邊框。

步驟 6 - 讓我們為邊框選擇雙線選項，並從下拉列表中選擇寬度和顏色。完成樣式設定後，單擊確定。

步驟 7 - 現在您可以在設計檢視中看到背景顏色已更改為我們所選擇的顏色。如果您開啟sample.css檔案，您將看到所有資訊都自動儲存在CSS檔案中。

步驟 8 - 再次轉到index.html頁面，從“工具箱”面板中拖動<div>並將其放在開啟的頁面上。

步驟 9 - 在程式碼檢視上方，您將看到<body>和<div>標籤，單擊<div>標籤，然後在“應用樣式”面板中單擊“新建樣式…”，這將開啟“新建樣式”對話方塊。

在選擇器欄位中鍵入“#container”。井號 # 是一個ID選擇器。從“定義於”下拉列表中，選擇現有樣式表，並選中“將新樣式應用於文件選擇”選項。轉到背景類別。

步驟 10 - 選擇背景顏色，讓我們選擇白色，然後轉到框類別。

步驟 11 - 定義填充和邊距，然後轉到位置類別

步驟 12 - 將寬度設定為90%。但是，不要指定高度，因為這裡我們希望容器在輸入內容時能夠擴充套件。單擊確定按鈕。

同樣，讓我們為頁首、頂部導航、左側導航、主要內容和頁尾新增樣式。

sample.css

以下是新增所有上述樣式後sample.css樣式表中的程式碼。

body { 
   font-family: Calibri; 
   font-size: medium; 
   font-weight: normal; 
   font-style: normal; 
   font-variant: normal; 
   text-transform: none; 
   color: #0000FF; 
   background-color: #CCFFFF; 
   background-image: none; 
   border: medium double #FF0000; 
} 

#container { 
   background-color: #FFFFFF; 
   padding: 8px; 
   margin: 8px; 
   width: 90%; 
} 

#header {  
   background-color: #54B431;   
   background-repeat: no-repeat;  
   background-position: right center;  
   height: 170px;  
} 

#top-nav {  
   height: 50px;  
   border-top: solid medium #006600;  
   border-bottom: solid medium #006600;  
   background-color: #FFFFFF;  
}  

#left-nav {  
   margin: 20px 0px 10px 0px;  
   width: 180px;  
   float: left;  
   border: thin dashed #006600;  
} 

#main-content {  
   margin: 20px 10px 10px 200px;  
   background-color: #CCFFCC; 
} 

#footer {  
   border-top: 2px solid #006600;  
   clear: both;  
   padding: 10px 0px;  
   text-align: center;  
}

index.html

以下是新增所有<div>標籤後index.html檔案中的程式碼。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns = "http://www.w3.org/1999/xhtml">  
   <head> 
      <meta content = "text/html; charset = utf-8" http-equiv = "Content-Type" /> 
      <style type = "text/css"></style> 
      <link href = "sample.css" rel = "stylesheet" type = "text/css" /> 
   </head>  

   <body> 
      <div id = "container"> 
         <div id = "header"></div> 
         <div id = "top-nav"></div> 
         <div id = "left-nav"></div> 
         <div id = "main-content"></div> 
         <div id = "footer"></div> 
      </div> 
   </body> 
</html>

輸出

設計檢視中的頁面佈局將如下圖所示。

列印頁面