《HTML5 精要剖析》-2.1.4 實作區塊切割與大綱輸出

2012-04-11

7268
0
HTML5

這一篇，實際來看區塊的切割，還有所謂的大綱，在真正設計中出現的狀況，不過這篇還沒有真正的解釋大綱的輸出，因為實在沒時間了，下一篇作討論囉，另外，接下來的課程會用到愈來愈多的元素，這本書希望可以作到指引的效果，讓完全沒有基礎的新手，能順著課程入門 HTML5 ，因此關於其中用到的標籤以及語法並不會提供條列式的特別解釋，而是直接用在範例中作說明，如果對個別標籤，甚至語法格式需要進一步瞭解，請參考坊間的手冊，或是線上資源即可，下次我們介紹一下相關的網站。

一旦切割的區塊愈多，設計上就會變得愈複雜，因此必須透過更多的 CSS 樣式項目來達到所需的版面配置，這一節就來看相關的實作。

以前一篇文章的配置簡圖為基礎，我們打算在其中的配置所需的連結與相關的資訊，因此希望最後的結果畫面如下：

首先第一步，先建立必要的標籤，內容如下：

<body>
    <div id="container">
        <header>康廷數位學院</header>
        <div class="content">
            <aside>
                 // 側邊欄內容
            <section>
                 // 主內容
            </section>
        </div>
        <footer>
          康廷數位 版權所有© 2012
       </footer>
    </div>
</body>

在頁首與頁尾的部份，分別配置<header> 與<footer> ，然後是中間的部份，配置側邊欄 <aside> ，主內容的部份則是<section> 。

aside

<aside>    
    <nav>
        <h1>
            教育訓練課程</h1>
        <ul>
            <li>HTML5</li>
            <li>C#</li>
            <li>LINQ</li>
            <li>ASP.NET</li>
        </ul>
    </nav>
    <nav>
        <h1>
            圖書出版品</h1>
        <ul>
            <li>HTML5 入門精要</li>
            <li>HTML5 完美風暴</li>
            <li>C# 入門精要</li>
            <li>LINQ 專業剖析</li>
            <li>程式設計入門</li>
        </ul>
    </nav>
</aside>

側邊欄內含兩組連結，包含工作室所提供的教育訓練課程與相關的圖書出版品等兩組連結，分別以<ul> 標籤進行配置，每一個<ul> 標籤代表一組清單，而每一項清單項目則以<li> 表示配置於其中成為<ul> 子標籤，而<ul> 本身則配置於<nav> 形成的區塊，表示這是一個導覽區域，其中還有一個必須特別注意的是，每一個<nav> 的內容，預先配置一個<h1> 作為標題，而這個標題也就形成了這個區塊的大綱條目之一。

section

<section>
    <section>
        <h1>
            康廷數位學院－各種主題教育訓練課程
        </h1>
        <p>
            HTML5：入門與特定領域進階課程…<br />
            C#/LINQ：從 C# 入門…<br />
            ASP.NET：入門 ASP.NET 網站設計…<br />
        </p>
    </section>
    <section>
        <h1>
            康廷出版圖書
        </h1>
        <p>
            HTML5：入門與進階…<br />
            C#/LINQ：C# 入門…<br />
            ASP.NET：入門 ASP.NET …<br />
        </p>
    </section>
</section>

由於這一部份有兩個區塊，分別再配置子<section> 標籤來包裝，如此一來，每一個標籤都可以配置<h1> 作為標題，同樣的，這個標題也就形成了區塊的大綱條目之一。

好了，現在於瀏覽器檢視配置的內容，得到以下的輸出畫面：

由於未經過CSS 樣式套用，因此畫面只是忠實的輸出HTML 配置，現在，進一步配置<style> 加入以下的CSS 樣式：

<style>
    header
    {
        background: black;
        color: Silver;
        height: 80px;
    }
    aside
    {
        background: silver;
        float: right;
    }
    footer
    {
        background: black;
        color: Silver;
        height: 60px;
    }
    div#container
    {
        width: 1010px;       
    }
    div.content
    {
        overflow: hidden;
    }
</style>

除了設定不同區塊的背景顏色以分隔區塊的內容，請特別注意，其中的aside 配置了float 屬性，這會讓整個區塊往右移，形成右側邊欄，不過，這會破壞接下來的區塊位置，例如footer 以及 section ，因此請回到稍早的HTML 配置，我們中間區域的section 與aside 內容，全部配置於一個 <div> 標籤當中，並且設定了其class 屬性值為content ，表示用來包裝某些特定的內容，並套用專屬樣式，也就是 div.content 這組樣式，將其 overflow 屬性值設定為hidden ，如此一來，aside 之後的float 樣式便不會影響之後的其它標籤配置，重新瀏覽網頁，得到以下的結果：

好了，這篇就先這樣，請先消化一下其中的樣式配置，與提到的大網部份說明，下一篇將進一步討論，讀者要注意的是，這本書希望可以作到指引的效果，讓完全沒有基礎的新手，能順著課程入門 HTML5 技術，因此關於其中用到的標籤以及語法並不會提供條列式的特別解釋，而是直接用在範例中作說明，如果對個別標籤，甚至語法格式需要進一步瞭解，請參考坊間的手冊，或是線上資源即可，下次我們介紹一下相關的網站。

回首頁