[Layout] Web Design Part 8

小時候，我家門口還是石子路的時候。老媽偶爾會帶我們去買玩具，小孩子嘛，不過大多都是簡單的積木。我沒聽過什麼叫做樂高，但是就是那種拼拼湊湊的東西就是了。印象裡，我跟老弟好像曾經用積木，拼出一台機器人出來。當時還刻意擺在神桌上（大不敬

拼圖遊戲老媽很愛玩，最高紀錄曾經連續兩三個月拼出三張 1000 片的拼圖。然後玩到脖子疑似落枕那般的扭傷，還被老爸唸了一陣子。尋找區塊或是幾何對我們來說好像不是太困難，創意才是。

積木遊戲

形狀可能很多樣化，但是組合的方式大概也就那幾種。積木不就是你接我、我接你，然後接來接去組合成一個我們想要的形狀。切版設計大概也是這個概念，HTML code 也只是我們的積木而已，視覺大概就像是積木盒的完成圖，告訴你我可以拼出哪些花樣，而樣式表大概就是說明書了。

視覺設計如果是皮，那 CSS/HTML 就是骨和肉。

Web Layout

積木遊戲有一些潛規則，

組合過程可以違規
說明書只是輔助
完成圖只是參考
樂趣與想像力第一
完成度與積木使用狀況或是數量無關
拆掉重作的過程不會跟上一次一樣

組合一直是一種延伸，只要不斷地接這下去，那就可以做出一些不得了的東西。拼湊的模式也一樣，一旦我們熟悉，那就會變成一種潛意識底下的行為模式，所以我們知道手上的積木可以怎麼樣的被組合。

框架應用就是這麼回事，作弊也是。

考試作弊當然不是好事，但是我也不是要教你這件事情。積木遊戲我們當然知道，一個積木用那些方式來與另外一塊積木組合，像是 Blueprint, 960.gs 或是 YUI Grid CSS 諸如此類。他們嚴謹的定義了方式，讓我們可以有一種標準來依循著做下去。

違規是這樣，如果有個 4 孔齒寬的積木，要跟 2, 3 孔齒寬的積木組合，你要犧牲掉哪一個？或者是說，你乾脆自己發明一個 5 孔齒寬的積木來組合？

Layout Presentation: 裏技

GRID STRATEGY

不知道你有沒有發現，這系列文章從開始到現在，我好像漏掉了許多東西，

沒有提到 CSS 樣式設計
沒有解釋 CSS 樣式規則
沒有說明 HTML 結構設計
沒有使用 HTML 標籤語意
沒有完整 Layout 範例

如果你有稍微的意識到這些事情，或者是覺得哪裡有些奇怪卻又說不上來。那我還挺高興的。這代表著，第一，我所施行的策略是可行的，第二，你雖然有些不確定，不過依舊讀到這裡。第三，那些所遺漏掉的東西其實都是故意的。

既然說是Grid的話，細微的，或是說應該知道的事情，不多做贅述是很合理的。因為 w3c 的文件就在那裡，如果你自己不去取用，那麼看不懂我在說什麼也是必然。

當然的，我很感激繼續看到這裡的人，無論你是否完整讀過那些文件，但是我所知道的一件事情是，你對這些事情想必有相當程度的認知。而，我想你應該也發現了故意遺漏的部份。

是，我只是在做一件事，願者上鉤而已。

CSS

我們，來看說明書吧。雖然眾多的 CSS Framework 都對我們說樣式內容無用（Style Agnostic）。但是，尋其根，我們才能知道為什麼無用，又怎麼樣個無用？

#my_id {
    background-color: black;
}
.my_class {
    background-color: white;
}
body {
    background-color: green;
}

萬用的三種樣式對標籤的選擇器（Selectors）。所有的樣式都從這三個地方出發，然後我們還有更多的選擇器可用，以下取自 CSS 2.1 所規範的選擇器清單，其中 E, F 分別代表不同的 HTML 標籤元素或是選擇器（類別或是 ID 選擇器）。

* 全域選擇器（Universal selector）
E 標籤選擇器（Type selectors）
E F 親代（後代）選擇器（Descendant selectors）
E > F 子元件（子嗣）選擇器（Child selectors）
E:first-child 第一順位擬似類別（The :first-child pseudo-classes）
E:link, E:visited 鍊結擬似類別（The link pesudo-class）
E:active, E:hover, E:focus 動態擬似類別（The dynamic pesudo-classes）
E:lang(c) 語言擬似類別（The :lang() pesudo-classes）
E + F 相鄰元素選擇器（Adjacent sibling selectors）
E[foo], E[foo="text"], E[foo~="text"], E[foo|="en"] 屬性選擇器（Attribute selectors）
E.foo 類別選擇器（Class selectors）
E#foo ID 選擇器（ID selectors）

然而，在 2011 年九月，新的選擇器通過了 w3c 的審核擴充了，

屬性選擇器：E[foo^="bar"], E[foo$="bar"], E[foo*="bar"]
結構擬似類別（Structural pseudo-classes）：E:root, E:nth-child(n), E:nth-last-child(n), E:nth-of-type(n), E:nth-last-of-type(n), E:first-child, E:last-child, E:first-of-type, E:last-of-type, E:only-child, E:only-of-type, E:empty
目標擬似類別（Target pseudo-classes）：E:target
UI 狀態擬似類別（The UI states pseudo-classes）：E:enabled, E:disabled, E:checked
首行擬似類別（The ::first-line pseudo-classes）：E::first-line
字首擬似類別（The ::first-letter pseudo-classes）：E::first-letter
前元素擬似類別（The ::before pseudo-classes）：E::before
後元素擬似類別（The ::after pseudo-classes）：E::after
一般相鄰元素選擇器（General sibling selectors）：E ~ F

SS Selectors: Selectors Level 3

選擇器是基礎中的基礎，在樣式設計中，所有的設計都是靠著選擇器的變化，來達到更多更複雜的展示結果。也許你會覺得，這麼多我怎麼知道該怎麼用？是的，這麼多選擇器並不是教你全部都用上去，~~如果你可以全部都用到也很厲害這樣~~，而是適切的使用。

選擇器挑著用才是上乘之選

STEP BY ...

我們用一個簡單的 Layout 來研究選擇器。

<div id="container">
    <header id="header">
        <hgroup>
            <h1 class="slogan">My Blog</h1>
            <h4 class="description">There is my blog.</h4>
        </hgroup>
        <nav id="navigation">
            <ul class="nav-lists">
                <li class="item first-item"><a title="home" href="/">Home</a></li>
                <li class="item"><a title="archives" href="/archives">Archives</a></li>
                <li class="item last-item"><a title="about me" href="/about-me">About Me</a></li>
            </ul>
        </nav>
    </header>
</div>

以下是問題，請問：

body {
    font: 16px/1.2 "Sans-serif", serif;
    background-color: white;
}

#container {
    width: 1000px;
    margin: 0 auto;
}

#header {
    width: 100%;
    height: 240px;
}

#header hgroup, #header nav {
    width: 100%;
}

h1 {
    font-size: 2.2em;
}

hgroup + h1 {
    font-size: 3em;
}

#navigation {
    width: 100%;
    overflow: hidden;
}

#navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
ul > li.item {
    margin: 0;
    padding: 0;
    float: left;
    border-right: 1px solid #efefef;
}

ul > li:first-child {
    border-left: 1px solid #efefef;
}

li > a {
    text-decoration: none;
}
a, a:hover, a:active, a:visited {
    color: #336699;
}

請作答，第一，他們做了什麼事情？第二，如果寫在同一個檔案，該怎麼寫？

SHOW ME

當然，我不希望你直接看我的範例。

/* 定義 <body> 標籤樣式 */
body {
    font: 16px/1.2 "Sans-serif", serif;
    background-color: white;
}

/* 定義 #container 標籤樣式 */
#container {
    width: 1000px;
    margin: 0 auto;
}

/* 定義 #header 標籤樣式 */
#header {
    width: 100%;
    height: 240px;
}

/* 使用後代選擇器，定義 #header 標籤內的所有 <hgroup> 與 <nav> 標籤 */
#header hgroup, #header nav {
    width: 100%;
}

/* 定義所有 <h1> 標籤 */
h1 {
    font-size: 2.2em;
}

/* 使用相鄰選擇器，定義 <hgroup> 緊連的 <h1> 標籤，加入 #header 限制套用範圍 */
#header hgroup + h1 {
    font-size: 3em;
}

/* 定義 #navigation 標籤樣式 */
#navigation {
    width: 100%;
    overflow: hidden;
}

/* 使用後代選擇器，定義 #navigation 標籤內的所有 <ul> 標籤 */
#navigation ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* 使用子元件選擇器，定義 <ul> 標籤下 <li> 標籤且類別為 .item 的標籤，加入 #navigation 限制套用範圍 */
#navigation ul > li.item {
    margin: 0;
    padding: 0;
    float: left;
    border-right: 1px solid #efefef;
}

/* 使用結構擬似類別，定義 <ul> 的第一個 <li> 標籤，加入 #navigation 限制套用範圍 */
#navigation ul > li:first-child,
/* 加入一組 #navigation ul > li.first-item 預防結構擬似類別失效 */
#navigation ul > li.first-item {
    border-left: 1px solid #efefef;
}

/* 使用子元件選擇器，定義 <li> 標籤下的 <a> 標籤 */
li > a {
    text-decoration: none;
}

/* 使用逗號分隔，多重定義 <a> 標籤與其擬似類別 */
a, a:hover, a:active, a:visited {
    color: #336699;
}

/* 使用屬性選擇器，定義 <a> 標籤 title="home" 的樣式 */
a[title="home"] {
    color: red;
}

何謂限制套用範圍？嚴格說起來，那是一種陷阱。下一回，我們就來聊一下這個美麗的陷阱。

積木遊戲

GRID STRATEGY

CSS

STEP BY ...

SHOW ME

You might also like...