[Layout] Web Design Part 4

8 min read Web DesignLayout

雖然寫切版感覺很乏味，但是俗話說得好，出來跑總有一天要還。所以其實趁著世界末日還沒到，趕快把前債清一清是比較妥當的。拼圖遊戲還是得繼續，我們在這邊覆蓋一張牌，結束這一回合。

抽出 CSS 卡，來召喚神龍吧。

樣式表

很多人對他有誤解，認為這些東西應該是 PG（Programmer）才應該要會的東西。結果到頭來，VD 跟 PG 之間的樑子就越結越深了。所以後來才出現了 F2E 這樣的職位出來。網頁設計之所以要知道的事情，其實應該不是規避這些你認為誰應該要會的事情，而是去正視這些我是不是應該要學的這些事情。

好像，這一場誤會就是十餘年（還記得 CSS 在 1996 年出草這件事情嗎？）。

我想一般人都不記得吧。樣式表的功能有三：

  • 幫你排版。
  • 幫你排版。
  • 幫你排版。

重點是你排版，就是得使用樣式表，不要再相信沒有根據的編輯器了，用 <table> 不會得到救贖的，會寫 <div> 不善用樣式也不會讓你得道昇天。樣式表跟拼圖遊戲有什麼關係？

拼圖是一個蘿菠一個坑，樣式表也是

我們暫且不談樣式設計的廣用與汎用性，先就單一與獨特性來說，對於一般狀況的使用下，這已經很足夠了。如果還得牽扯到大家都可以用的問題，那麼這裡就真的 TL;DR（Too Long; Don't Read） 不太適合繼續看下去。

STEP BY STEP

我們繼續看上次的例子：

<div class="author">
    <!-- 直接以 author 為大容器 -->
    <h3>Author</h3>
    <!-- 建立一個放置作者相片的容器 -->
    <div class="author-photo-box">
        <!-- 放置一個區塊的標頭 -->
        <div class="photo-header"></div>
            <!-- 放置一個區塊的內文容器 -->
            <div class="photo-main">
                <!-- 作者相片 -->
                <img src="" width="" height="" alt="" />
            </div>
        <!-- 放置一個區塊的文末 -->
        <div class="photo-footer"></div>
    </div>
</div>

然後呢？我現在需要在 author 放一張背景圖片。他可能是單色，那麼你可以直接填入背景顏色就可以了，他如果是需要通透（透明）的圖片，例如 PNG 檔案，那麼背景顏色就得設定為 transparent 才行。

.author {
    width: 240px;
    background-image: url(./images/author_bg.png);
    background-position: 0px 0px;
    background-repeat: repeat;
    background-color: transparent;
}

當然，如果你對 CSS3 有興趣的話，我們還可以利用新的特效來做出背景圖片。不過這裡就不加以贅述，有興趣的人可以自行研究。

CSS3 Background Gradient: http://css-tricks.com/examples/CSS3Gradient/

接著我們要來處理放置作者相片的容器。他（author-photo-box）是一個外框容器，裡面有三個小容器，外框容器需要的是固定的寬度，所以我們這邊先給他寬度，然後，我們不需要留白。

.author-photo-box {
    width: 220px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    border: 0;
}

對於一個盒子模型來說，margin, padding 是留白設定，而 border 則是邊框設定，我們三種都不需要。

Box module

上面的圖片中，我把 border 稍微誇張了點，他只是線而已，不過如果尺寸是 50px 的話，那上面的圖片可能就一點也不誇張了。盒子模型最基本會有這三種會跟尺寸打架的設定。請留意上圖的寬與高（width, height），他是在元件中的最內層，真實元件的尺寸還得加上這三種設定才算數。

所以會發生 1+1 > 2 的情況

如果有一個元件是這麼設定：

.box1 {
    width: 100px;
    border: 10px;
    margin: 10px;
    padding: 10px;
}

請問他的尺寸是？沒錯，是 100px + 10px + 10px + 10px = 130px，如果你要拿一個 100px 的元件將他包起來，那麼就會壞掉了。

這種情況很常見，我們常常會看到兩欄式的網站切版，全站畫面是以 960px 來切，然後左邊的 sidebar 使用 200px，右邊的理所當然是用 760px。屆時，我們想說，左邊跟右邊的欄位不要靠那麼近，所以又把右邊的欄位向左留白了 10px，來騰出空白讓視覺好看一點。

結果，畫面秀出來是，右邊的區塊完整的掉到左邊的 sidebar 底下去了。

原因我就不說明了。

STEP BY ...

對於有連續性需求的背景，我們常常需要很複雜的版型切割。不過，還好我們之前舉的拼圖範例不會太難，所以繼續將作者的區塊樣式補完。

.photo-header {
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url(./images/author_photo_box_header_bg.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-color: transparent;
}
.photo-footer {
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url(./images/author_photo_box_footer_bg.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-color: transparent;
}

看起來很囉唆，不過沒關係，因為這是基本的範例，所以囉唆一點也是很合理的。最後我們剩下作者放圖片的區塊了。

.photo-main {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url(./images/author_photo_box_main_bg.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-color: transparent;
}

img {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    display: block;
}

這樣就結束了嗎？嗯，當你把樣式拿去套用的時候，你會發現，你的網站所有的 <img> 好像都變成 200x200 的圖片了。像這種事情一定不是我害的當然就得回到樣式，看哪裡出了問題。

.photo-main {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url(./images/author_photo_box_main_bg.png);
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-color: transparent;
}

.photo-main > img {
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
}

這樣就好多了。我們這邊用了一個選擇器，用以告訴樣式引擎說，我的 img 是要在 .photo-main 這個樣式的子樣式時，才會發生效果。關於選擇器這件事情，因為這裡是談切版，所以暫時不多做描述。如果有興趣的人，可以先去研究一下。

CSS Selectors: http://www.w3.org/TR/CSS2/selector.html

實際展示

Web Layout

還有人記得我說高度改變的話沒關係嗎？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>sample.html</title>
        <style>
            .author {
                width: 240px;
                background-image: url(./images/author_bg.png);
                background-position: 0px 0px;
                background-repeat: repeat;
                background-color: transparent;
            }
            .author-photo-box {
                width: 220px;
                height: auto;
                margin: 0 auto;
                padding: 0;
                border: 0;
            }
            .photo-header {
                width: 100%;
                height: 20px;
                margin: 0;
                padding: 0;
                border: 0;
                background-image: url(./images/author_photo_box_header_bg.png);
                background-position: 0px 0px;
                background-repeat: no-repeat;
                background-color: transparent;
            }
            .photo-footer {
                width: 100%;
                height: 20px;
                margin: 0;
                padding: 0;
                border: 0;
                background-image: url(./images/author_photo_box_footer_bg.png);
                background-position: 0px 0px;
                background-repeat: no-repeat;
                background-color: transparent;
            }
            .photo-main {
                width: 100%;
                height: auto;
                margin: 0;
                padding: 0;
                border: 0;
                background-image: url(./images/author_photo_box_main_bg.png);
                background-position: 0px 0px;
                background-repeat: no-repeat;
                background-color: white;
            }

            .photo-main > img {
                width: 200px;
                height: 250px;
                margin: 0 auto;
                padding: 0;
                border: 0;
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="author">
            <!-- 直接以 author 為大容器 -->
            <h3>Author</h3>
            <!-- 建立一個放置作者相片的容器 -->
            <div class="author-photo-box">
                <!-- 放置一個區塊的標頭 -->
                <div class="photo-header"></div>
                    <!-- 放置一個區塊的內文容器 -->
                    <div class="photo-main">
                        <!-- 作者相片 -->
                        <img src="./images/author_icon2.jpg" width="200" height="250" alt="Author icon" />
                    </div>
                <!-- 放置一個區塊的文末 -->
                <div class="photo-footer"></div>
            </div>
        </div>
    </body>
</html>

看完美女圖就急著關掉是不對的喔！雖然我說過利用 CSS3 可以做到不改 Layout 就能任意變換寬高。但是，依照我們這樣簡單的範例來說，只要變個設定，我們一樣做到不改變 Layout，就能任意變換寬高的效果。

Web Layout

至於方法？留給大家慢慢地思考囉。

就說不要急著關視窗，老師有說你都沒有在聽（丟滑鼠
這裡有一組神奇的名字，我昨天夢到的：安藤沙耶香, Sayaka Ando

Hina Chen

Hina Chen

Website Facebook Twitter More posts
偏執與強迫症的患者，算不上是無可救藥，只是我已經遇上我的良醫了。
Taipei
Previous Post
Next Post

You might also like...