《HTML5 精要剖析》- 2.1.1 關於版型/切割區塊

2012-03-29

11913
0
HTML5

《HTML5 精要剖析》開始進入新的篇章，從網頁的版面切割開始談起，後面的課程將逐步說明如何在網頁的 HTML 基礎上，實作應用程式開發介面，當然，這過程將逐一交待各種技術細節，尤其是 CSS ~~

HTML5 時代，網路已經蛻變成為應用程式的開發平台，而網頁則成為應用程式與使用者溝通的介面，應用程式介面的優劣直接影響使用者的體驗，因此一個應用程式開發人員，必須小心設計網頁所要呈現的內容，而第一步要學習的就是網頁區塊的切割，瞭解如何配置所要呈現的網頁內容。

你可以從網路上數以億計的網頁中，看到各種不同型式的網頁，這些網頁有各種不同的配置，我們從幾種最簡單的開始入門。如果你的網頁是單一的應用程式內容，基本上只需要切割成三個區塊如下：

最上方是網頁的應用程式標題區塊，這個區塊配置的通常是應用程式標題資訊，中間是應用程式的主體內容，下方則是網頁的尾部，配置的則是版權或是聯絡資訊等等。在你將內容填入這些區域，然後以理想的外觀呈現之前，必須知道兩件事，首先是選擇合適的標籤，然後針對這些標籤進行樣式設定，如果你已經完成第一章的課程學習，對於這個過程應該會感到熟悉，現在我們先來看看可用的標籤。

標籤

HTML5 提供一組專門用於建立網頁內容架構的區塊標籤，完整的介紹後續再談，這裏我們會用到的有<header> 以及<footer> ，就如標籤名稱，<header> 配置一個專門用來配置標題等相關資訊的內容，<footer>則配置於網頁尾部，提供如版權宣告之類的資訊配置，至於網頁主體，可以使用的標籤相當多，不過針對初學者，使用<div> 即可。

樣式設定

樣式設定的原理同第一章的說明，針對 <header> 、<footer> 與<div> 進行設定即可，而樣式項目則相當複雜，不過為了示範，我們初步只作高度、框線的設定示範。

現在打開你的筆記本，將以下的內容寫上去：


<!DOCTYPE html >
<html>
<head>
    <title>切割版面</title>
</head>
<body>
    <header>
    康廷數位學院
    </header>
    <div>
    </div>
    <footer>
    康廷數位 版權所有 © 2012
    </footer>
</body>
</html>

請特別注意其中配置的結構，<header>、<div> 與 <footer> 依序由上往下配置，這三個標籤是相同層級的，它們同時屬於<body> 的巢狀內容，現在於瀏覽器檢視內容會得到以下的結果：

由於未經過任何的樣式設計，因此瀏覽器只是忠實的呈現HTML 標籤的配置，而中間<div> 在預設的狀況下，會隨著內容延展，由於沒有於其中配置任何內容，因此看不到這個標籤，接下來我們套用樣式來改變網頁的外觀。

首先於網頁開始的<head> 標籤裏面配置以下的<style> 內容：


<style>
    header
    {
        height: 100px;
    }
    div
    {
        height: 400px;
    }
    footer
    {
        height: 60px;
    }
</style>

針對網頁中的三個標籤進行height 項目的設定，分別設定不同的高度，現在重新在瀏覽器檢視網頁會出現以下的畫面：

標題與網頁的尾部區塊現在被分開了，因此樣式設定中，將 <div> 的高度設定為400px ，因此將其撐開，現在我們針對上下兩個區塊加入邊界分隔線條以更清楚的呈現區塊的切割。


<style>
    header
    {
        height: 100px;
        border:1px solid silver ; 
    }
    div
    {
        height: 400px;
        border:1px solid silver ; 
    }
    footer
    {
        height: 60px;
        border:1px solid silver ; 
    }
</style>

border 會為每個區塊加上邊框，它可以設定一組以上的樣式值，以空白字元分隔，這裏所示範的是三項最基本的設定，第一項 1px 表示作為框線的線條寬度，第二項solid 表示框線的型式是實線，第三項設定則是框線的顏色，得到的結果如下：

如你所見，三個區塊透過框線很清楚的標示了出來，為了方便理解，在這張截圖中，標上了height 樣式項目的設定值，你可以看到這個設定與版面配置的關聯。

好了，一開始不要塞太多東西，先消化一下，最重要的，在介面設計的過程中，選擇適當的標籤、透過CSS調整所要呈現的外觀，是固定的步驟，而標籤與樣式的細節本課程後續將逐一討論。

回首頁