HINA::工程幼稚園

[iPhone App] 手機噗浪新選擇 4Plurk

Fri, 17 Feb 2012 19:54:00 PST

神人 @pct 開發的噗浪軟體上線了！由四點設計公司推出的全新產品。但是我由衷的希望~~不要再四點才下班了~~，趕快回家陪老婆才是真的（嚴重聲明！

所以，我下載的時候有跟神明說這件事情。

首先是網址，總要有地方下載嘛，

http://itunes.apple.com/tw/app/4plurk/id501903087?mt=8

裝好之後就是這樣啦，

啟動之後呢，會要你登入噗浪，所以我們就輸入帳號密碼來登入，

登入之後，會有一個應用程式授權，使用這個授權的好處是，這樣在你的手機上就不會留下你噗浪的帳號密碼了。

授權結束之後，就開始噗浪了！

然後呢，左上角按下去，就會出現選項可以選，

選項的齒輪呢，是簡易說明外加佛心來著的功能，讓你可以撤銷應用程式授權，

然後呢，長按河道上的訊息，會出現更多的操作方法，

UPDATE

當河道卷到最上面的時候，會出現這個，

放開畫面就會重新讀取河道，

卷到最底下呢，就會自動讀取更多的噗浪訊息，

給點耐心，雖然讀取的旋轉圖示不明顯，不過稍等一下訊息就會出現了，

剩下的，就交給你們自己慢慢發掘啦！

4Plurk 萬歲！@pct 萬歲！

[影像] Funrays 25mm f/1.2 m43 CCTV 玩具鏡頭

Mon, 13 Feb 2012 00:26:00 PST

講真的，我實在想不起來，上次買跟相機有關的東西是什麼時候？底片不算的話，好像是很久遠的事情了（~~真的嗎~~。這次在偶然的機緣下，看到某個書來網站在促銷，既然是促銷，就表示是不會很貴的意思。

所以我就花了 888 元買了一顆鏡頭。

東西很小，就這麼一小盒而已。

拆開來大概就是這樣，左邊包起來的是鏡頭，中間是接寫環、M43 轉接環，還有鏡頭後蓋與機身前蓋。

鏡頭本尊，中間有個藍色的圈圈，是調整光圈用的地方，鏡頭最前端是對焦環。這棵鏡頭對焦行程還真不是誇張的長，因為鏡頭尺寸的關係，所以要轉好幾圈啊！而且，他並不是無限遠，這是唯一讓我覺得有點可惜的地方。

近拍原主人。

接上接寫環來拍鍵盤的按鍵，鏡頭幾乎是貼在鍵盤上拍的。

跑去公司門口拍櫻花。

旋轉式的散景，看久了其實會頭暈。

近拍真的不錯！

耀光狀況，你知道的，才 888 元而已不要太苛責。

沒有無限遠，真的蠻可惜的。

補一下對照組！

[南國] 新年假期之高雄很熱

Tue, 31 Jan 2012 01:38:00 PST

雖然在高雄唸了四年書，不過對於這個地方還是有點熟悉的陌生。現在有捷運了，四處的建設也跟當年來讀書的時候不同，高鐵的便捷，捷運的快速，終究改變不了的，其實還是有的。

~~像是摩托車在人行道上流竄，多麼有人情味啊。~~

雖然我有帶相機，不過由於根本懶得拿出來，所以全程都是使用 iPhone 4/4S 在拍。其實，也沒什麼不好，既然我是紀錄生活，硬梆梆的攝影規則就拋在腦後吧，影像所帶給我自己的感情，或是訴諸的，遠比光影構圖來得重要的多。

新竹，雖然我在這裡長大，不過，回過頭來已經 32 個年頭，經歷的是很巨大的改變。所以，你說我不熟悉也可以，要說熟悉也可以。近鄉情怯吧。

路途中經過嘉義，到這裡已經出了大太陽了。

到了高雄之後馬上下殺 Caline 的外婆家，屏東里港的信國社區。

手牽手，牽好一起走。

燒柴的鍋爐，洗澡熱水要自己燒喔。

小時候偶爾會燒柴取暖。

蘇家小吃的豌豆粉，超好吃的！

中午吃飽跑去旗山看花海。

這是 Caline 姨丈特製桶仔雞！！

出爐囉！！超好吃！

~~變態殺人魔！~~

隔天殺去墾丁！這裡就是秘密景點拉拉啦啦啦！

小觀山鹹粿！

小觀山無敵海景！

墾丁逛大街！

第三天回到高雄新崛江逛街！

找到一間很可愛的下午茶店，叫做童話花園。

吃完下午茶就搭高鐵回到萬惡的台北了。

[Layout] Web Design Part 11

Sun, 29 Jan 2012 22:14:00 PST

從溫暖的南台灣回到萬惡的天龍國，唯一不適應的大概就是溫度吧。其實如果可以的話，來去南台灣置產好像也是個不錯的選擇。不過，可能搬去中南部之後，就不會有人找我做 Layout 了吧（抱頭

所以為了妻小，還是繼續留在北部打拼吧。

小結

前面寫了這麼多，所以現在來一點點小小心得應該是很合理的。我們從一開始的切版，聊到後面的選擇器問題，然後突然發現又衍生出更多的問題。實際上，當你操作過一次之後，你會發現這是很正常的事情。

這也是我不喜歡食譜的原因。我盡量不要讓文章看起來像食譜，所以我只會跟你們聊聊，在實際操作上可能會遇上什麼事情。然而，還是可能會有很多問題會在我的製作過程中，下意識的去避開。因為習慣使然，~~因為 IE6/7/8 使然。~~

所以，我沒說的問題可能你遇上了。那麼學到的就是你的。

總結來說，我們切版應該要注意什麼地方？

熟悉 Box model
熟悉 HTML 標記語言
最少了解子嗣（親代）、子元件選擇器
大概知道什麼是 DOM Tree 的結構
選擇器不要綁太多，適用而選
複製、貼上，記得改
改裝輪子比重造快得多

XDite 前陣子寫了一篇：[讀書筆記] CSS 基礎技巧懶人包，推薦！

我想對於 CSS 入門來說，許多的作法可能都是見招拆招，可能都是半路殺出一條血路而學來的。切版經驗大多都是這樣，我們可以知道別人怎麼做（食譜），但是，如果把一樣的東西交到你的手上，你會怎麼做？

JUST DO IT

去做才是重點。

如果不動手，我在這裡講那麼多都是空談。從 VD 開始，並不困難，

找出切割基準線
分配盒子元件（Box model）
選擇適切的標記語言，<div> 不是萬能
定位大元件，用 CSS Framework 也可，自己做也可
將盒子獨立製作
整理樣式與標記結構

如果你突然發現寫這些樣式很繁瑣，加上你需要重複利用性很高的設計，那麼，有兩種工具是非常強大的。其一是 SASS，其二是 Compass，還有另外一種叫做 less，以上這三種工具，就是專門用來簡化你的 CSS 用的。

說是說簡化，但是其實他就是一個把樣式表當作程式來寫的一種操作模式。我想對於大多數人來說，程式這件事情似乎遙不可及，不過，有鑑於我也不會寫程式的關係，既然我說他好用，那麼難度相對的就低了許多。

工具

SASS（Syntactcally Awesome Stylesheets）是一種可程式化的樣式表撰寫方式。他是基於 Ruby 這個語言所開發的，所以，躺若要使用這樣的工具，那麼你就必須要準備好 Ruby 的執行環境，這相對來說是有點難度的。

SASS: http://sass-lang.com

Compass（CSS Authoring Framework）則是一個很強大的 CSS 框架，他則是由 SASS 所衍生而來，更多的函式可以直接使用，核心當中也內建了許多其他的框架，例如 Blueprint, 960, YUI 等等，同樣的，需要準備 Ruby 環境。

Compass: http://compass-style.org

Less（The dynamic stylesheet language）與上述兩者不太一樣，但是基本上是做差不多的事情。而有趣的是，他可以使用一個 javascript 檔案，來幫你把 .less 直接轉換成 .css 來運作，所以，在大多環境下，他不需要特別的編譯器來作編譯動作。

當然，如果你要自行編譯 .less 的話，那就先準備好 nodejs 的環境吧。

Less: http://lesscss.org

下一步

聊聊 SASS/Compass/Less 如何？

[X] 下一幕

Tue, 24 Jan 2012 22:44:00 PST

這有點像是兩個月亮的事情，也許沒有舉杯邀明月那樣的詩意，或 1Q84 那樣的懸幻，不過，兩個世界如果能如此乾脆的切開，那或許會簡單的多。只是很難。能夠抽離的自我，也許早已淡然。

來去之間，我被速度拉扯著。而這種距離與時間的定義，往往被侷限在一個狹隘的範圍裡，逃不了也脫不開的。

我無法解釋速度這樣的定理，我也無法解釋時間的定義。距離相對簡單，一個步伐邁開，約莫是 60 公分的距離，明瞭又清晰。至於那些最遙遠的距離，還是留給瓊瑤去表述吧。

時間相對殘酷，無法折返，無法闡述。我該告訴你一個步伐的時間有多長，還是該解釋從這裡走到那裡需要花多少的時間。雖然這些定義既鄉愿又死板，只是我們依循，只是我們跟著走著。

帶來的是一種生活，帶來的是一種繼續下去的動力。因為流逝的失去的，也無法在退一步裡追回，因為渴望的想望的，也不會在駐足中降臨。我們只能向前，對於那些，我們只好給他一個意境，或許叫回憶，或許叫過去。

時空刻劃下的軌跡，我們總是一廂情願的，或是自私的，替自己註記上一些標籤，好讓自己可以無視距離般的，重現或抹滅。在我們身上留下的，也許就只是我們投機的留下想要留下的，如此取巧的痕跡罷了。

這一幕，我在高速鐵路上奔馳，下一幕，我在終點站駐足。這樣的距離有 330 公里，我花上 90 分鐘的時間穿越。我可以輕易的從時間的軌跡裡，找到 30 分鐘前的景色，只是，回過頭去的 110 公里，卻讓人無比的不安。

近鄉情怯吧。

我無法得知在走完這一幕之後的事，我無法得知下一幕的轉變，我只有時間帶來的速度可以依靠，這是多麼令人恐懼與害怕的事。我們都奢望許多事情，仍會像是記憶裡所刻劃的那個樣子，只是奢望。

許久沒有一個人旅行的，下一幕，也許我只是想要一個，令人安心的熟悉吧。

[Caline] 生日大快樂

Tue, 24 Jan 2012 08:33:00 PST

認真算一算，這是第五個生日了（撒花）！雖然不是什麼很了不起的記憶力，不過，總是特別的日子。雖然在大過年的沒辦法一起慶祝，不過，拜現代科技所賜，還是可以面對面一下啦。

希望 Caline 腳上的傷快快好起來！

Caline 生日快樂！

雖然今天下著大雨，雖然天氣很糟糕，但是還是要用力的祝你生日快樂！生活像是被貼上標籤一樣，我們每天都在盡力的完成 MEMO 上面所交待的事情，生活的快要沒有生活，喘息到快要不能喘息，但是你在這裡。

而且我在這裡！

可能不是什麼大不了的事情，不過，生活有你，有我，還有許許多多的朋友，我們都一起努力的走著、扶持著，相信未來也是！我想我們都是富裕的，也許不是在物質上，但是，這也真的是無法用物質來去夠衡量的事情。

所以，

Caline 我愛你！

不要說我俗氣，生日禮物就是要開開心心快快樂樂！~~而且他是限量的。~~

[Layout] Web Design Part 10

Tue, 24 Jan 2012 00:22:00 PST

由於我沒有娘家可以回，所以大年初二在家寫寫部落格也是很合理的。當然也因為這樣，~~省下不少紅包錢~~買來的紅包袋只用了兩個，實在有點太說不過去了。

小的時候很期待回去外婆家，長大了，外婆家原本的地址已不復在。然而，我卻有種近鄉情卻的憂愁。

SELECTOR

上一回聊到了一些選擇器，雖然我好像有很多都沒有交待到，但是，基本上選擇器的用法都如出一轍。雖然說 w3c 提供了那麼多的選擇器，但是，由於瀏覽器支援的程度差異，導致這些東西未必全部都可以使用（~~IE 表示：~~）。

我們以一個簡單的例子來說明各種選擇器的使用時機，

sample.html

<div id="container">

    <header id="header">
        <h1 class="slogan"></h1>
        <h4 class="description"></h4>
    </header>

    <nav id="navigation">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </nav>

    <div id="main">
        <article class="entry">
            <h2></h2>
            <p class="categories"></p>
            <p class="content">
            </p>
        </article>
    </div>

    <aside id="sidebar">
        <div class="sidebar-element">
            <h3></h3>
            <div class="content">
            </div>
        </div>
        <div class="sidebar-element">
            <h3></h3>
            <div class="content">
            </div>
        </div>
    </aside>

    <footer id="footer">
        <p></p>
    </footer>

</div>

面對一個切版完成的 HTML 來說，你必須要知道的事情是，

你的 DOM Tree 結構，是為了要達成視覺設計的結果
你的 CSS 樣式表，能夠順利操作 DOM 來達到上述目的
最終輸出的結果可能會因為瀏覽器，而發生各自表述的問題

倘若我們在不考慮第三點的情況下，那你大抵上可以任意使用各種新式的選擇器。

sample.css

#container {
}

#header {
}

#footer {
}

#aside {
}

#main {
}

大的結構其實很簡單，把 ID 選擇器挑出來就好了。那其他的部份呢，

sample.css

#header > h1.slogan {
}
#header > h4.description {
}

#main > article.entry {
}

#main > article.entry > h2 {
}

#main > article.entry p {
}

#main > article.entry p.categories {
}

#main > article.entry p.content {
}

#sidebar > div.sidebar-element {
}

#sidebar > div.sidebar-element > h3 {
}

#footer > p {
}

眼尖的你應該發現了，我並沒有特別使用什麼特殊的選擇器。這是習慣性使然，這種事情寫久了，你就會下意識的避開某些，瀏覽器無法實現或是實作有問題的選擇器。這，當然就要歸功於我們偉大的 IE6/7/8 了。

適用時機

選擇器是這樣，沒有人規定你什麼不能用、什麼可以用，這會隨著你的使用習慣而有所不同。不過，雖然樣式表的表述方式因人而異，不過還是會有一些事情是我們不小心會遇上的。

重複的樣式定義
過多選擇器
選擇器權重陷阱
DOM Tree 陷阱

雖然網路上有很多文章在教你怎麼寫出，或是避免掉一些 CSS 選擇器的問題，不過，那也是經驗累積而來，沒有真正遇到，你也不會有深刻體驗的。

這裡有篇老文章，但是值得參考：Taming Advanced CSS Selectors

×重複定義

最早開始寫樣式表的時候，時常會遇到這種情況。這並不是什麼缺點，而是一種會讓你的後續維護，變得相當困難的一件事情。

sample.css

article.entry p.description {
    color: blue;
}
article.entry p.content {
    color: blue;
}

對於 p.description 與 p.content 來說，顏色雖然都是藍色（blue），但是，其實我們可以換一個方式來作。

sample.html

        <p class="categories text-blue"></p>
        <p class="content text-blue">
        </p>

sample.css

.text-blue {
    color: blue;
}

也許你會這麼問，為什麼不直接使用 article.entry p 來定義藍色就好？相信我，當你的 DOM Tree 愈趨複雜時，這會是場惡夢。

sample.html

        <p class="categories text-blue"></p>
        <p class="content text-blue">
        </p>
        <p class="footer-note">
        </p>

如果你使用 article.entry p 來定義，那麼 .footer-note 也會跟著變成藍色。你就得多消費一組設定，將顏色改回來。

×過多選擇器

以往我們在觀察 DOM Tree 的時候，因為我們可能需要定義到相對複雜的子元件上，所以會用了相當多的選擇器，來達到我們所要得結果，

sample.html

<aside id="sidebar">
    <div class="sidebar-element">
        <h3></h3>
        <div class="content">
            <img class="author-icon" src="" width="" height="" alt="" />
            <p class="content">
            </p>
            <p class="back-to-top">
                <a class="top-link" href=""></a>
            </p>
        </div>
    </div>
</aside>

如果我想要定義 a.top-link 這個標籤，讓他變成灰色（gray），那麼我們會怎麼做？最直覺的作法是，

sample.css

.top-link {
    color: gray;
}

問題來了，我除了 #sidebar 裡面有這種設定外，我在 #main 裡面也有的話，該怎麼辦？這個時候，我們通常會用選擇器來限制這個項目的適用性。

sample.css

#sidebar .top-link {
    color: gray;
}

然後我們可能又會發現，我的 #sidebar 裡面，不只有一個地方用上 .top-link，然後我們繼續加上選擇器，最後變成了，

sample.css

#sidebar .sidebar-element .content p.back-to-top a.top-link {
    color: gray;
}

你算得出來總共用了幾個嗎？答案是7 個！我們為什麼要避免這種事情？

維護困難
權重陷阱
倘若修改切版，樣式會失效無用
複用性太低

×權重陷阱

CSS Selectors 有一種優先權（specificity）的設定。

Calculating a selector’s specificity

然而為了比較簡易的計算，所以我們會這樣用，

一個 HTML 我們給 1
一個 Selectors 我們給 10
一個 ID Selector 我們給 100
一個行內設定（style=""）我們給 1000

那，我們拿剛剛的例子來加加看：

sample.css

#sidebar .sidebar-element .content p.back-to-top a.top-link {
    color: gray;
}

這個設定有 1 個 ID Selector，4 個類別選擇器，2 個標籤，所以結果就是：100 * 1 + 10 * 4 + 2 * 1 = 142，這樣方便的計算讓你知道優先權值是多少。所以，我們如果要覆蓋上面的灰色的數值，那麼優先權值就必須大於 142！

所以，當我們想要覆蓋這樣的設定時，就必須多加上一組選擇器，但是，這樣的惡性循環下，只會讓你的選擇器越來越複雜。而這樣複雜的樣式表，除了維護上的困難之外，切版的 DOM Tree 如果改變，那麼勢必也是無法使用的。

×DOM Tree 陷阱

切版輸出的方式，通常直接左右你的樣式表的組成。而，我們為了要因應一些改變，勢必會修改我們的切版輸出。當完整的樣式表設定完成之後，切版輸出的改變，就會干擾到樣式表的套用狀況。

舉個簡單的例子來說，

sample.html

<div id="container">
    <header id="header">
        <h1 class="slogan"></h1>
        <h4 class="description">
            <p class="website-memo"></p>
            <p></p>
        </h4>
    </header>
</div>

sample.css

#header > .slogan {
}
#header > .description {
}
.description > p {
}
.description > .website-memo {
}

如果不巧我們的切版修改了，

sample.html

<div id="container">
    <header id="header">
        <h1 class="slogan"></h1>
        <h4 class="description">
        </h4>
    </header>
</div>

那麼，原先套用在 .description 底下的兩組 .website-memo 與 p 就會相繼失效。當然，我們熟知修改切版的情況，勢必要對樣式表有所更動，但，問題是，如果樣式表有如上述例子般的簡易，那麼修改上是不會有什麼問題的。

但是倘若，

sample.html

<aside id="sidebar">
    <div class="sidebar-element">
        <h3></h3>
        <div class="content">
            <img class="author-icon" src="" width="" height="" alt="" />
            <p class="content">
            </p>
            <p class="back-to-top">
                <a class="top-link" href=""></a>
            </p>
        </div>
    </div>
</aside>

sample.css

#sidebar .sidebar-element .content p.back-to-top a.top-link {
    color: gray;
}
#sidebar .sidebar-element p.content + p.back-to-top {
    background-color: white;
}

如果我們修改了切版，把 <p class="back-to-top"></p> 這個區塊移除了，

sample.html

<aside id="sidebar">
    <div class="sidebar-element">
        <h3></h3>
        <div class="content">
            <img class="author-icon" src="" width="" height="" alt="" />
            <p class="content">
            </p>
            <a class="top-link" href=""></a>
        </div>
    </div>
</aside>

這樣你知道樣式表設定上的嚴重性了嗎？

適用而選

選擇器的宗旨，並不是照著切版的 DOM Tree 來選擇，而應該是適用而選。我們從切版了解我們的目的，並從選擇器當中，挑選適切的方式，來呈現出我們所想要的結果。這樣才是在這麼多選擇器當中，使用你所想要的唯一的方式。

當然，要解決上述這些疑難雜症，也不是沒有方法。我的經驗告訴我，可以參考，但活用在你，

多重選擇器，倒不如用 ID SELECTOR
多重選擇器，但無法使用 ID SELECTOR，那就利用多類別來套用
重複性質高的屬性，用單一類別選擇器定義，用多類別來套用
DOM Tree 依賴性高的選擇器，擇一而用，人多必嘴雜
分類你的樣式表，將同區塊、同功能的東西放在一起

不要再說你不懂選擇器了，他很易懂，只是我們太複雜。

[Layout] Web Design Part 9

Sun, 22 Jan 2012 22:17:00 PST

大過年的，穿新衣戴新帽好像已經是小時候的事情了。所以，趁著大過年，找點事情來充實一下其實也是不錯的。當然，肚子已經充實了，腦袋也要充實一下，不然實在有點說不過去。

是說包紅包嘛，紅包肥了，荷包就瘦了。~~所以不要來跟我拜年。~~

如何選擇

市面上眾多的 CSS Framework 之所以說樣式無用（Style Agnostic），是因為他們已經幫你定義好，什麼樣的選擇器，該做什麼樣的事情。但是，如果我們從頭開始，我們該怎麼去選擇？

實際上，你對於選擇器這樣的東西，有多少的了解？簡單的說，他就像是積木，一個蘿菠一個坑，只是最終的結果不同而已。我在上一篇已經有提過，萬用且常見的選擇器有三種，ID, Class, Tag，那，我們就從這裡開始。

ID SELECTOR

顧名思義，他就是使用 HTML 中的 id 屬性值來定義的。例如：<a id="mylink" href="...">...</a>，那麼這裡就定義了一個 id 屬性，他的名稱叫做 mylink。請注意，id 屬性的值是唯一值，換句話說，在整份的 HTML 文件中，只能出現一次。

這個值，我們在 CSS 當中，是以井字符號（#）來代表我們要使用ID SELECTOR。而，在樣式表當中，使用 ID SELECTOR 的權重是相當高的，你也許曾經看過一些樣式權重的計算機，將 ID SELECTOR 給予 1000 這樣的數值，方便運算使用。

CLASS SELECTOR

這個選擇器又稱為類別選擇器，與 ID SELECTOR 一樣，也是使用 HTML 中的 class 屬性值來定義。唯一不同的地方是，他是可以多重定義的一種屬性。例如：<a class="links background-blue text-color-white" href="...">...</a>，那麼，這裡就定義了三種不同的類別屬性值，分別叫做 links, background-blue, text-color-white。

而，在 CSS 樣式表中，我們使用類別選擇器時，是以點字符號（.）來代表我們要使用類別選擇器。類別選擇器本身有兩種用法，這是有別於其他選擇器的用法。類別選擇器可以將類別相黏，來做到多重類別混用的情況。

例如剛剛的例子，我們有三種不同的類別屬性。假設，我們需要某兩種同時出現時，才套用某種效果，那麼，我們的 CSS 就可以這樣寫，

sample.css

.links {
}
.background-blue {
}
.text-color-white {
}
/* 這裡代表著，需要同時符合兩種屬性值，這樣的樣式設定才會生效 */
.links.background-blue {
}

如果說 ID SELECTOR 是針對單一元素做設定，那麼類別選擇器就是利用在高重複性的樣式上面。

TAG

標籤，就是 HTML 的標籤，他也是一種選擇器，只是，通常我們不會用選擇器來稱呼他。在樣式表當中，我們僅只用元素標籤來稱呼這樣的設定。標籤可以與上述兩種選擇器做相黏的混用，不過，通常與類別選擇器相黏居多。因為 ID SELECTOR 是唯一值，所以做相黏設定有點多此一舉。

sample.css

body {
}
/* 標籤與類別相黏 */
a.mylink {
}
/* 標籤與擬似元件選擇器相黏 */
a:hover {
}
/* 標籤與 ID SELECTOR 相黏 */
a#my_home {
}

以上這三種是最基本的選擇器應用方式，我們接著來繼續看其他的選擇器，到底是如何被應用的。還有，這些選擇器之中，是不是有什麼致命的缺點？

SELECTORS

再上一篇文章中，我們提到了很多的選擇器、擬似類別與擬似元素等等。而這些設定我們該怎麼使用呢？雖然這些選擇器千奇百怪，不過，大抵上都是依照上述的三種基本方式演變而來。使用的方式是相當主觀的。

由於選擇器的規則，與 DOM Tree 脫不了關係，所以，在使用某一些較為特殊的選擇器時，你必須對 HTML 的 DOM Tree 有一定的了解。這裡不詳細解釋那到底是什麼，簡單的說，他就是 HTML 標籤與標籤之間的事情。

sample.html

<div id="main" class="main-container">
    <div id="header" class="my-header">
        <div id="nav" class="navigation">
        </div>
    </div>
</div>

以上述的例子來說，#main, #header, #nav 就是三種 ID 選擇器，而他們個別有類別選擇器。跳脫這些事情，我們以 HTML 的 DOM Tree 來看，他的結構就是這樣，

sample.html

#main > #header > #nav

每一個 HTML 標籤往下包著另外一個 HTML 標籤。這種層層包疊的方式，就是一種DOM Tree。這顆樹會越來越大，當你的切版愈趨複雜的時候，你的 DOM Tree 就會相對的變得相當龐大。

那麼，選擇器與 DOM 之間的關係是什麼？我們從上一篇文章中，得知有許多不同種類的選擇器。在這些選擇器當中，有不少是根據 DOM Tree 而運作的，舉例來說：

sample.css

/* 親代（後代）選擇器，使用空白分隔兩種選擇器 */
#main .my-header {
}

這個寫法的意思就是，我使用親代（後代）選擇器，這個選擇器發生作用的時機是，#main 容器中，包含了 .my-header 這個類別，則當這種情況發生時，這樣的選擇器就會發生作用。

也許，我們用 TAG 的例子會更容易理解。

sample.html

<div id="container">
    <header class="my-header">
    </header>
    <div id="main">
    </div>
    <footer class="my-footer">
    </footer>
</div>

如果我們使用了這樣的樣式設定，

sample.css

div#container header {
}

那麼，你知道這樣的撰寫方式，他會在什麼時候生效嗎？

所以，絕大部分的選擇器，都與 DOM Tree 有關。例如，

sample.css

/* 子元件（子嗣）選擇器 */
div#container > header {
}

子元件（子嗣）選擇器的使用方式跟親代（後代）選擇器非常相似。唯一不同的地方，是子元件選擇器僅適用於該元件所包含的第一代子元件，而親代選擇器，則是無論你是第幾代全部都適用。

另外像是相鄰元素選擇器，則是兩種 HTML 元素立即相鄰時會發生作用，這比起上述兩種選擇器又更嚴格了一點。

sample.css

header + #main {
}

而有趣的是，Selector Level 3 又新定義了一種叫做一般相鄰元素選擇器，

sample.css

header ~ footer {
}

差別在於，相鄰元素選擇器需要立即的元素相鄰，而一般相鄰元素選擇器，則不需要。

何謂相鄰？

sample.html

<div id="first"></div>
<div id="second"></div>
<div id="thrid"></div>

上述這樣的寫法就叫做相鄰。而 #first 與 #second 稱作立即相鄰，而 #first 與 #thrid 則稱為一般相鄰。

這樣對於選擇器有多一點認識了嗎？下一回，我們來聊聊致命的缺點。

[2012] 龍年新年快樂

Sun, 22 Jan 2012 09:12:00 PST

回想起小時候，新年總是有一點不一樣的味道。空氣中瀰漫著一股新衣服的味道，大掃除清潔劑的味道，拜拜裡滿桌子菜餚的味道，清香與金紙燃燒的味道，屋外年夜放鞭炮的味道，還有小孩子嘻笑的味道。

新年的氣味很清晰，卻有點遙遠。

大概是人長大了，沒有兒時那種感染到年節的氛圍。雖然拿到紅包再給老媽包回去的技倆我們很清楚，不過，拿壓歲錢總是雀悅的。曾幾何時，我現在也變成了要包紅包的叔叔了。不過，看著小姪女的那種神情，或許我是懂的。

也或許這麼說吧，人長大了真的變得複雜太多，那種單一純粹的心情反而變得很難以拿捏，或是體會。畢竟我已經變成了複雜的大人了，有太多的事情就得花上一倍，甚至兩倍、三倍的時間去找尋。

慶幸的是，我還可以在這些童言童語之中，或多或少的感染到一些氣息。不過套一句時下很流行的話，我回不去了。經歷了這些年，其實有太多的事情，並不是輕易的，或是能夠很輕描淡寫的去傳達或是表述。

太多的事情，有的時候就在不知不覺中溜走。可能你沒有發現，也可能你永遠不會發現。新的一年代表自己又老了一歲，只是，真的只有這樣而已嗎？也許我真正在追尋的東西很單純，就只是單純的那種快樂而已。

新年快樂，你們，就朝著偉大航道前進吧！

[Layout] Web Design Part 8

Wed, 18 Jan 2012 17:28:00 PST

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

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

積木遊戲

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

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

積木遊戲有一些潛規則，

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

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

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

考試作弊當然不是好事，但是我也不是要教你這件事情。積木遊戲我們當然知道，一個積木用那些方式來與另外一塊積木組合，像是 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）。但是，尋其根，我們才能知道為什麼無用，又怎麼樣個無用？

sample.css

#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

CSS Selectors: Selectors Level 3

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

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

STEP BY …

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

sample.html

<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>

以下是問題，請問：

sample.css

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

sample.css

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

sample.css

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

sample.css

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

sample.css

h1 {
    font-size: 2.2em;
}

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

sample.css

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

sample.css

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

sample.css

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

sample.css

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

sample.css

a[title="home"] {
    color: red;
}

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

SHOW ME

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

sample.css

/* 定義 <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;
}

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

[她說] 戀人絮語

Tue, 17 Jan 2012 04:37:00 PST

我不是羅蘭巴特，不過他寫得戀人絮語我倒是看過就是了。最近突然一大堆事情，所以有點感慨，不管是哪方面來說，似乎生活上對我們來說，都是一種得全力面對的挑戰。

特別是女友 Caline，辛苦了。

她說沒關係。我仔細回想了一下，在很多支微末節的地方，我似乎對這些字很熟悉。所以我不斷的搜尋一些記憶細節片段，挺有趣的。

她說沒關係，喝開水就好。那就幫她倒杯溫水吧。

她說沒關係，我不餓。那就帶她去久久沒去的麵館，有很多小吃的那家。

她說沒關係，隨便吃一吃。那就挑她喜歡的口味。

她說沒關係，我拿就好。那就幫她提過來吧。

她說沒關係，我慢慢走就好。那就攙著她慢慢地上樓。

她說沒關係，我再去買。那就早一天跑個賣場。

她說沒關係，我休息一下就好。那就摟著她睡一下吧。

她說沒關係，我再收就好。那就先去把盤子洗一洗。

她說沒關係，我來清就好。那就去吸個地拖個地板吧。

她說沒關係，下次再來買。那就不小心多繞一圈買回家。

她說沒關係，這個家裡還有。那就提醒她家裡只剩兩包補充包，即使還有三包。

這沒關係的，我說，因為這是生活。很多的事情縱使被工作消磨殆盡，但是被消磨的並不應該是熱情。生活的熱情需要一點衝擊與刺激，無法否認的是，這些林林總總，也都有可能變成衝突與紛爭。

沒關係！ ≠ 沒關係，

生活的氛圍是一種默契，而默契是從這一點一滴的摩擦之中累積而來。拼湊出來的語言與文字，不經意的刺，也許是柔軟的，也許是鋒利的，但是這些都沒關係，我說。因為痛一下會成長，因為生活的是彼此的好，與不好。

殘酷的是逃避，所以要認真面對。生活的軌跡無法回到過去把它抹掉，跌倒的坑洞也不可能填平，崎嶇的拉不直，不要想抄捷徑。雖然受了點傷，但是，沒關係，Caline 我愛你！

我說沒關係，因為這裡有我。

羅蘭。巴特：戀人絮語

[心得] Apple 與 Android 之間的愛恨情仇

Sun, 15 Jan 2012 06:19:00 PST

It just work

其實手機用了這麼久，到最後都會被我當成，可以打，可以接，然後看時間的工具這樣。智慧型手機所帶來的便利，當然在某些程度上他是便利的。而，以另外一個角度來說，也許他會讓人變笨也不一定。為了不讓我的插件使用者一直詢問 iPad 為什麼不能用，所以我就去弄了隻 iPhone 4S，這樣總可以了吧。

感謝 Caline 的富邦員工證，我愛你啦！

以前在 Android 上面做小小地開發，寫一些小東西當作是練手感的時候，卻發現一個頗為嚴重的問題。解析度千奇百怪到底是那一招？後來在工作上真正要接觸到這一塊的時候，才發現解析度的問題只是冰山一角而已。

同事在開發 App 的時候遇到好多狀況，解析度不同自然不在話下，機器自身的問題，包含硬體、軟體與各家不同的桌面工具。我突然了解到 Jobs 所說的 It just work 的那種感覺。

Android 如果像是我只是自嗨，只是寫點小東西拿來當練習，拿來當作是自己實驗用的工具，只針對我自己的裝置來製作，那麼我想他是友善的。比起 iPhone 來說，Android 的手機相對友善得多，況且 xda 也是個好地方就是。

但，如果今天是要發佈到市場上，那麼 Android 相對來說是殘酷的。

你要解決的問題實在太多，每個 Android 硬體都自我表述。所以，就算不小心婊到自己，其實也是很合理的，你也只能摸摸鼻子繼續改下去。雖然我們也不能否認他的開放性，但是這會不會是過度自由與開放的一種反噬？

反觀 Apple 的策略，固定性的產品，封閉式的系統。我知道這種封閉可能對使用者來說不是一件好事。但是，相對的這種封閉，在某些情況下而言，對開發者來說也未必是件壞事。沒關係，反正可以 JB 嘛。

光是統一解析度這件事情，光是不用面對機海這件事情，我就覺得好溫馨。

所以，以後我可以在 iPhone/Android 雙系統上面測試東西了。不過，Android 的機海其實我還是覺得很頭痛就是了。但，與其這樣，我真的私心覺得，開發 Apple 似乎是比較明智的選擇，畢竟我不用花那麼多時間，來調校一些實在是很莫名其妙的東西。

~~所以今年就來買 MBA 好了。~~

[Layout] Web Design Part 0.5

Fri, 13 Jan 2012 05:09:00 PST

中場休息時間，我們來聊一些有趣的東西。畢竟是假日，所以再繼續談一些切版的瑣碎，難免會喘不過氣來。倦怠是難免，就像是切版切久了總是會膩，會手癢想玩一些新的把戲。

像是 CSS Framework 這樣的玩具（~~哪裡有輕鬆啊你~~）。

CSS Framework

雖然名字叫做樣式表框架，但是事實上稱他們為框架是有點過而不及。簡單的說，CSS Framework 提供了我們一定的規則可以依循，依照這些規則，能夠快速的打造一些較為制式的樣式輸出。

我比較推崇 960 或是 YUI 對於 CSS Framework 的說法，叫做 Grid CSS。這種說法是比較貼切的，因為他的確提供了我們固定的規則可以依循。但是，我也說過，有些規則是用來打破的。

是，這些規則適合用來打破。

其實上 Google 查詢這一類的資源，可以查到非常多。我只列出這四個是因為我都用過。實際上我也用過前兩個（Blueprint, 960 Grid CSS），在工作上實作出許多樣板。所以，我可以來告訴你這些Grid CSS有什麼利弊。

好處是：

固定的命名規則
固定的樣式規則
漂亮的元素輸出
適用多種頁面尺寸
快速上手
樣式無用論

Style Agnostic: 樣式無用論（是我擅自胡亂翻譯的），意思是說，你不用知道 CSS Framework 裡面的設定到底要幹麼，你只要知道怎麼用就行了。

缺點是：

區塊樣式不合用時不易修改
區塊樣式不合用時不易修改
區塊樣式不合用時不易修改
區塊樣式不合用時不易修改
區塊樣式不合用時不易修改
區塊樣式不合用時不易修改

我不是來亂的，我是認真的。舉一個 Blueprint 的例子來說：

blueprint.html

<section id="main" class="span-5">
</section>
<aside id="sidebar" class="span-19 last">
</aside>

大家大概不能理解，上面到底在做什麼，我來說明一下。span-5 與 span-19 在Blueprint中，是代表著使用 5, 19 欄的設定。欄位寬度是固定的，所以這樣的結果，就是使用 5 欄寬，與 19 欄寬。接著 last 在Blueprint中，是代表著這個區塊不使用留白設定。

問題在哪裡？

以Blueprint的設定來說，span-1 單一欄位寬度預設是 30px，而留白固定是右方留白（margin-right），寬度設定是 10px。所以，以剛剛的 span-5 與 span-19 來說，我們得到的區塊就是 200px 加上 750px，總共寬度就是 950px 了。

萬一，我們的 <aside> 要的是 220px 怎麼辦？萬一，我們的 main 與 sidebar 之間的留白需要 15px 怎麼辦？

打破規則的問題

我們有一個可以作弊的地方，利用這種Grid CSS每一個欄位中間會有留白的特性，將我們所需要的尺寸溢出到這些空白中。當然，這是治標不致本的作法。所以這是一個很麻煩的缺點。

既定的規則可以帶來一些好處，但是，在這些規則背後被綁死的東西，其實很有可能比你想像的還多，例如樣式無用論。雖然像是Blueprint有一些計算機可以用，不過，這也就代表著你必須去對於Blueprint的結構有一定程度的理解。

這也就違背了最初的樣式無用論。

Blueprint Calculator: http://bluecalc.xily.info/

自己刻，比較快

這種事情也沒個準，不想被規則束縛的話，自己從頭開始做當然是比較自由的。但是，如果每一次的專案都要從頭來過，是不是又太過於惱人了點？所以要不要用要這寫Grid CSS來當作切版的基準，就見仁見智了。

好工具，就算打破規則也是好工具。樣式無用論背後所代表的意義，其實就是基於規則，做你自己。這才是Grid CSS的最終精神。並不一定要完全拋棄，且戰且走才是上上之策。

邊開火邊移動，你遲早會贏

[Layout] Web Design Part 7

Thu, 12 Jan 2012 18:56:00 PST

以前在寫網頁的時候，曾經遇過這麼一件趣事。IE 光宗耀祖的 hasLayout 還不是那麼令人詬病的年代，為了解決 IE 與 Netscape 的動態效果不一致的狀況，不斷地查詢 position 定位問題時，曾經看過這麼樣一註解：

/* Don’t ask, just do it. */
  zoom: 1;

然後我就哭了。

定位、浮動與推齊

在盒子元件中，最讓人不高興的，大概就是定位點的問題。我們如果時常使用 position, float, clear 這三種屬性設定，那麼就會遇到區塊亂跑亂跳的情況。如果元件數量不多倒是還好，但是通常一個 Layout 元件數量都已經相當龐大，遇上這種問題有時候會讓人很無力。

position IN ACTION.

float, clear IN ACTION.

定位

首先你必須知道，定位屬性叫做 position，他有幾種可能的值：

inherit：繼承定位設定，依照父元件繼承而來的設定。
static：預設定位設定，依照文件元素擺放而使用預設設定，此時你若是額外設定 top, left, right, bottom 都是無效的。
relative：相對定位設定，依照父元件或鄰近元件的原點定位做相對位置設定。
absolute：絕對定位設定，依照父元件或是根元件的原點定位做絕對位置設定。
fixed：固定定位設定，依照根元件的原點定位做絕對位置設定。

這裡所描述的根元件，指的是 DOM Tree 的根（root），通常就是指最外層的 <body> 標籤。至於什麼叫做 DOM Tree，你先把他想成是一棵樹就好了。

定位功能在以往做動態網頁的時候相當常見，屏除我剛剛說的 IE 的 hasLayout 的問題之外（~~IE 表示：~~），基本上他是一個非常有利於排版的工具。但是，雖然定位點好用，且絕對精準，但是我也看過過度使用的切版設計。至於會造成什麼樣的悲劇，讓我們繼續看下去。

只有盒子模型（Box module）才能定位
絕對定位類型（fixed, absolute）不干擾相對定位類型（inherit, static, relative）
相對定位類型會互相干擾
絕對定位其子元件倘若繼承或是也使用絕對定位，則一律以根元件原點定位為準
相對定位棋子元件倘若使用絕對定位（僅限 absolute），則是以其父元件的原點定位為準
margin 留白特性會影響定位結果

當然，沒有什麼比實際範例更容易看出結果。

position_sample.html

<div id="container">
    <div id="box1" class="boxes"><h1>1</h1></div>
    <div id="box2" class="boxes"><h1>2</h1></div>
</div>

position_sample.css

#container {
    position: inherit;
}
#box1 {
    position: absolute;
    top: 100px;
    left: 100px;
}
#box2 {
}

由此可以看出，由於 box1 使用了絕對定位（定位點是 x: 100px, y: 100px），所以他不會受到Breaking Rules的影響，而 box2 沒有任何定位設定，所以他依循盒子模型的特性，定位點回到左上角。你可以由 Tilt 所提供的畫面看出，box1 與 box2 是同屬於同一個層，但是由於定位設計，他們兩個元素互相重疊了。

倘若我們多加了點文字呢？

你會發現 box2 被往下推了，但是 box1 依然不受影響。這是由於 box2 會依循Breaking Rules的影響，所以他會將定位點往下一行。而這個往下的距離，則會受到許多設定上的干擾：

父元件本身的行高設定
相鄰元素本身的高度與行高設定
相鄰元素本身的定位設定
相鄰元素本身的浮動與推齊設定
元素自身的 maring 設定
元素自身的相對定位設定

怎麼會有兩個行高 100px，但是結果卻不同？我剛剛有說過了，相對定位或是不使用定位，自身會受到相鄰或是父元件本身的設定，而有所影響。之所以會出現不同的情況，是因為在瀏覽器的預設值當中，<body> 這個標籤本身，就會對內容事先進行留白的動作。

所以，你所看到的，右下角的展示範例中，box1 與 box2 本身是對齊的，這才是真正我們所要的結果。所以，當我們在使用定位點時，請不要忘記這幾項設定的干擾：

line-height
height
margin
padding
border
float

會不會太多因素啦？會，所以定位點的使用，並不建議用於內文與盒子模組相對複雜的環境當中。另外還有一種常用情況，就是相對定位中包含絕對定位。這樣說很籠統，我們直接看例子會比較能夠理解。

請注意，定位方法 fixed 在這裡是無效的！雖然他也是屬於絕對定位的一種，但是他是相對於整個根元件來定位，也就是說，不管你是使用什麼方式將 fixed 包起來，他永遠都會根據 <body> 的原點做定位動作。

總括來說，定位功能對於排版上能夠提供較為直覺的方式。但是，相對複雜的影響因素卻很容易將結果給毀掉。對於定位屬性的使用上，我個人在使用上的建議：

用於大型框架元素
不要重複使用相對定位
不要與浮動（float）設定混用
事事沒有絕對（不要濫用 absolute）

不要重複使用相對定位

其實根據標籤語言的結構來說，每一種元素對其相鄰元素都是相對的位子。所以，當你在相鄰或是子元素中大量使用相對定位，其實是沒有太大意義的。~~除非你有你的考量。~~

大量且重複的使用，不僅會直接破壞元素間的 Breaking Rules，也會讓整個 DOM Tree 結構變得難以維護，所以，在相對定位設定的同時，請先想想是否需要這麼做。

浮動與推齊

圖片永遠是我們最佳良伴。所謂的浮動（float），顧名思義就是讓你的盒子元件飄起來。但是這個飄的動作，卻會打壞元素之間的Breaking Rules，所以，聰明的 CSS 又用了推齊（clear）來讓我們飄起來的元素，可以進行對齊的動作。

請看 Tilt 的展示，他是飄起來的元素。

float_sample.css

#box1 {
    float: left;
}
#box2 {
    float: right;
}

飆起來其實就只有三種設定：left, right, none，所以也沒什麼好解釋的。那麼推齊（clear）呢？他其實也只有三種：left, right, both，但是他需要解釋。

clear: left，將段落定位點設定在左邊，意思則是，清除目前的浮動元素段落的斷行規則，將斷行重新定位在左邊。
clear: right，將段落定位點設定在右邊，跟上述做一樣的動作，但是最後定位在右邊。
clear: both，清除目前所有段落定位點，取最長浮動段落文末為基準，清除所有斷行規則，重新定位在左邊。

我們重複剛剛的例子。

float_sample.css

#box1 {
    float: left;
}
#box2 {
    clear: left;
    float: right;
}

這樣看得出 clear: left 做了什麼事情嗎？倘若，我們在兩個浮動元件中，加入一行字，會產生什麼結果？

float_sample.html

<div id="container">
    <div id="box1" class="boxes"><h1>1</h1></div>
    <p>我是閃光洽！</p>
    <div id="box2" class="boxes"><h1>2</h1></div>
</div>

文字段落會因為浮動元件的佔位而往後移動。但是，文字段落的斷行規則不會因為浮動元件而有任何的改變。這一點，是跟定位元件有很大的不同。雖然，絕對定位在某方面，也能想像為一種浮動元件，但是，定位元件卻沒有推齊（clear），這種與斷行規則有關的設定可用，所以在應用上也是有相對落差的。

浮動元件，其實我們很常看到這種應用，只是或許你不清楚而已。

導覽列的按鈕
部落格的雙、多欄位設定
齊頭式的表單元素
輪播式元件、幻燈片效果等

浮動元件唯一要注意的地方，就是會干擾一般元素的擺放位置，因為他會產生佔位的關係。同時，浮動元件自身，對於留白的情況是不明確的（~~IE 表示：~~）。

這種情況就很常發生：

為什麼我的外框沒有跟著延伸？

我們只要多一個動作就能解決：

clear_sample.html

<div id="container">
    <div id="box1" class="boxes"><h1>1</h1></div>
    <p>我是閃光洽！</p>
    <div id="box2" class="boxes"><h1>2</h1></div>
    <div class="clear"></div>
</div>

clear_sample.html

#box1 {
    float: left;
}
#box2 {
    float: left;
}
div.clear {
    clear: both;
}

佔位

浮動元素特有的情況，雖然是浮動元件，但是還是與同層相鄰元件有段落的關係。特別的是，雖然他自身的寬度會佔據段落的寬度，但是，他的高度並不會直接影響段落的結果。同樣的，也不會對所屬父元件產生影響。

並且，在使用浮動元件時，其相鄰元件的段落是毫無關聯的。對其所屬父元件來說，可以使用推齊的動作，來達成高度佔位，也就是段落重設的效果。如上述例子一般。所以說，浮動佔位的推齊，是針對父元件，而自身，則與相鄰元素佔位有關，這點請牢記。

段落行高與 Breaking Rules

行高其實很容易理解，就是一行字的高度。在 CSS 中，高度跟行高是不同的。當然，不同的高度也限制了行高的展示結果。如果高度小於行高，那麼你的文字區塊就會因為高度限制而被切掉。

而Breaking Rules則是比較特別的東西，通常，他由瀏覽器或是我們對於文字的一些特殊設定而決定。斷行、斷字的規則我們都可以通過樣式表來決定，不過，從哪個地方開始斷行，那些地方開始斷字，就只能依照輸出的容器來決定。

所以，文字的排版是相對困難的。

逢沢りな

逢澤莉娜

Rina Aizawa

只是說我也不知道我排起來怎麼可以~~這麼好看~~，一定是妹正的關係。

有關斷字、斷行，可以參考：CSS Text Level 3, 4. Line Breaking and Word Boundaries

[Layout] Web Design Part 6

Wed, 11 Jan 2012 23:00:00 PST

對於畫面呈現來說，其實最終目的我相信是一樣的。只是工具不同、過程不同，還有能力的不同而有些微的差異。只是這個些微有時後會讓人感覺起來相當的巨大。無法否定的是，所謂隔行如隔山大概就是這種情況吧。就像我永遠不會有 VD 的美感，而同樣的 VD 可能也沒有我們這樣的邏輯。

我是說可能。

SIMPLE IS HARD

對多數人而言，切版這件事情倚賴現有而且強大的軟體，可以幫忙我們解決許多問題，像是 hard-coding。對於網頁設計來說，撰寫 HTML code 本來就是一種必要之惡，但是對於多數網頁設計者來說，HTML code 有時候會是一件令人頭痛的事情。

最後我們就依賴軟體帶給我們的便利，所謂的眼睛看得到的結果最準，然後就這樣理所當然的做完一個，我們所謂的網頁設計。只是，我們有沒有想過，當我所謂的網頁設計，交付給後端的時候，無論是交給 PG ~~或是 F2E~~，對他們來說或許會變成一場悲劇？

PG 不是理所當然要會 HTML/CSS 的！

簡單設計可能不是件容易的事情，大概就跟電燈開關是一樣的道理。UI（User Interface）設計畢竟是很鄉愿的，主流意識或是主觀的價值，如果沒有辦法容易的傳達給使用者（End-User），那麼我無法判斷這樣的設計，算不算得上是一個好的設計，儘管在你的眼中他是完美的。

所以後來，使用者體驗設計（UX Design, User eXperience Design）就突然的被大肆宣揚，追究其根本，還是跟電燈開關一樣的道理。至於什麼叫做使用者體驗，我就不贅述了。

Hard Coding: 寫死

SIMPLE IS VERT HARD?

鑽牛角尖，就有可能會變成Very Hard。我們在製作切版的時候，我說過，最終目的是一樣的。姑且拋開瀏覽器之間的惡鬥，以單一的標準而言，跟著既定的規則走，大抵上不會出太大的亂子（~~IE 表示：~~）。既然我們照著規則走，那麼有些很複雜的事情，相對來說就可以變得簡單。

就拿我上次說的食譜來看吧，實際，且別人做過的事情，自己做一遍才能理解箇中奧妙。俗話說得好，坐而言不如起而行。與其看我在這邊練瘋話，實際走過一遍才知道為什麼。

食譜 DEMO：Comicastic demo page

看到這種主視覺，通常還會連帶的給你一個 PSD 檔案。

身為一個 PG/F2E 不會用 Photoshop 是很合理的

不會用 Photoshop 沒有關係，但是不知道從何下手就比較有關係了。我們知道需要的地方，有天（header）、地（footer）、側邊欄（sidebar）、主內容（main），有時候還會有導航選單（navigation）。這些區塊是我們需要用到的，而更詳細的區塊我們當然不會在一開始就去定義他。

怎麼好像不太一樣？如果，我還照著食譜做的話，那麼就沒有太大的意義了。如果剛好我們做出來的結果，跟食譜所寫得剛好雷同，那應該就是巧合。正所謂無巧不成書，天底下哪有那麼多巧合可以出書的，你說是吧。

所以我們先來看 header 與 navigation 之間的關係。所謂眼見為憑，我們會發現 header 有部份元素超出了範圍，他已經跨入了 navigation 的區塊裡面了。這個時候，我們就得思考兩件事情：

header 其實可以將 navigation 給包起來
navigation 可能要將定位點往上移動

效果一樣，作法不同。

cookbook.html

<div class="header">
    <!-- 我是頁面標頭 -->
    <div class="navigation">
        <!-- 我是導覽選單 -->
    </div>
</div>

cookbook.html

<div class="header">
    <!-- 我是頁面標頭 -->
</div>
<div class="navigation">
    <!-- 我是導覽選單 -->
</div>

食譜會跟你說，用第一種，但是為什麼？其實，兩種作法都可以，唯一的差別是：

包起來的樣式表設定，對於 navigation 區塊來說相對容易
改動 navigation 定位點，對於其他元素可能會造成影響

那現在知道為什麼了嗎？我們以不影響其他元素為出發點，選用第一種的理由在此。不過如果你覺得你比較喜歡第二種，你要用也沒有什麼不對。相對來說，你必須對於元素定位點有一定的認知。

接著是 main 區塊，大抵上看來，我們可以切割成兩個部份來看：

上半部，那個看起來相當複雜的區域
下半部，切割成四個小區塊的區域

上半部看起來很惱人（我們不考慮他的動態效果，單就靜態頁面來看）。

直覺上來看他有幾個東西：

有個大框框將所有元素包起來
左右兩邊各有個 << 與 >> 按鈕
中間是個超人橫幅區塊
右上角有一個對話泡泡框
對話泡泡框右下方有個回應泡泡框

所以我們可以知道有1+3+1+1的框框，為什麼這樣說呢？

cookbook.html

<div class="banner-slider">
    <div class="prev-button">
        <!-- 我是向左邊（上一頁）的按鈕 -->
    </div>

    <div class="superman-banner">
        <!-- 我是超人橫幅區塊 -->

        <div class="dialog-bubble">
            <!-- 我是對話泡泡框 -->

            <div class="comment-bubble">
                <!-- 我是回應泡泡框 -->
            </div>
        </div>
    </div>

    <div class="next-button">
        <!-- 我是向右邊（下一頁）的按鈕 -->
    </div>
</div>

所以我們有 1 個大區塊（banner-slider） + 三個小區塊（prev-button, superman-banner, next-button） + 1 個小區塊（dialog-bubble） + 1 個小區塊（comment-bubble）。

這樣看起來似乎很完美了。但是，如果考慮到中間的滑動效果，那麼，我們就必須再加上一層區塊，但是要加在哪裡？還有為什麼要加？

為什麼？

區塊與資料

一般來說，我們用以呈現條列式資料的時候，通常會這麼做：

我是第一名
我是第二名
我是第三名
我是第四名
我是第五名

然後我們在 HTML code 中會這樣寫著：

lists.html

<ol>
    <li>我是第一名</li>
    <li>我是第二名</li>
    <li>我是第三名</li>
    <li>我是第四名</li>
    <li>我是第五名</li>
</ol>

如果勤勞一點的人會這樣寫：

manual-lists.html

 我是第一名
 我是第二名
 我是第三名
 我是第四名
 我是第五名

我們這裡不考慮那麼勤勞的人。我們知道清單標籤有三種，<ul>...<li>, <ol>...<li>, <dl><dt>...<dd>，這些列表式的標籤有一個共通點。就是會有個大區塊包起來，那麼，同樣的意思，我們如果需要將一個大區塊，製作成列表式的樣子，那麼，我們也會需要一個大區塊，來將資料打包。

所以，剛剛的範例，就需要一個大區塊。

cookbook.html

<div class="banners">
    <!-- 我是大區塊 -->

    <div class="superman-banner">
        <!-- 我是超人橫幅區塊 -->

        <div class="dialog-bubble">
            <!-- 我是對話泡泡框 -->

            <div class="comment-bubble">
                <!-- 我是回應泡泡框 -->
            </div>
        </div>
    </div>

    <div class="batman-banner">
        <!-- 我是蝙蝠俠橫幅區塊 -->

        <div class="dialog-bubble">
            <!-- 我是對話泡泡框 -->

            <div class="comment-bubble">
                <!-- 我是回應泡泡框 -->
            </div>
        </div>
    </div>

</div>

這樣對於區塊的應用，有沒有稍微有點概念了呢？

Simple is hard, MAYBE

如果你什麼都不嘗試去做，那就永遠都很困難

If you haven’t tried Layout, please do before dismissing it.

If you haven’t tried Sass/Compass, please do before dismissing it.

via Nathan Smith.

下回，我們來看看其他內容，應該會有精彩的行定位說明。

[Layout] Web Design Part 5

Wed, 11 Jan 2012 19:03:00 PST

給你一把釣竿，教你怎麼釣魚，其實是一件很困難的事情。與其這樣，不如給你一張漁網，用撒的機會或許會比較大一點。當然啦，我不可否認這樣是有一點作弊的嫌疑，但是在這個講求速度的年代，~~手速 400~~ 快速的抓到切版的精神也是一種必備技能。

這種速度靠的是經驗的累積，雖然沒有公式，但是起碼也有一定的規則可以依循。

經驗的累積

回到切版所面對的問題，雖然市面上有非常多切版教學，照著做也確實能夠得到些什麼。但是終究就只是照著做而已，並沒有人會告訴你為什麼要這樣做，或者說還可以這樣做。時代告訴你要速成，所以我們就給你速成，所以我們就給你食譜，給你義大利麵。

當客戶想吃拉麵的時候，你就不會煮了。

如果你可以把義大利麵煮成拉麵，你的客戶也吃不出義大利麵與拉麵的差別，那麼只有兩種可能，其一是你的內力功力深厚，其二就是你的客戶~~食不知味~~是個好人。

換一本食譜總可以了吧？如果一個樣板是一道菜，試問你要準備多少食譜？

在熟悉你的食材之前，你何苦先擔心火侯？

回到初衷，你還是得去面對的事情就是這樣。如果不去理解 HTML 可以做什麼，CSS 可以做什麼，瀏覽器之間的差異是什麼，那又何必需要擔心切出來的樣板能不能看。因為你什麼都不知道，最後的結果，也只是讓這道菜食不下嚥而已。

有食譜並不是壞事，照本宣科才是。

有人問我什麼是食譜？
食譜：Create a Comic Book Themed Web Design, Photoshop to HTML + CSS (Part 2)

STEP BY …

回到我們所提出的例子，在作者相片顯示的區塊，我們已經做完了一組簡易的設定。接著，我們把拼圖的區塊放大來看。

大家還記得這張圖吧，我們把 Author 的區塊組好了，現在還剩下其他的部份。我們還有背景，標頭，內文與側邊欄位要做。還記得我們的大區塊 container 嗎？

sample.html

<div id="container">
    <!-- 我們通常用 Container 來當容器，最大的容器 -->
</div>

他是用來把我們的主要區塊包起來的盒子，所以我們的背景圖片，相對來說就得放在他的上一層，也就是傳說中的 <body> 區塊。那 container 到底要做什麼事情？他只做一件事，就是把整個切版區域包起來而已。

sample.css

body {
    background: url(./images/bg.jpg) 0px 0px repeat black;
}

#container {
    width: 960px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background-color: black;
    display: block;
}

背景圖片放好了，最大的盒子我們也將他打包好了，接著我們就繼續往下看內容區塊的部份。內容區域有分成三個，標頭，側邊欄，內文，這三大部份，其實還有一個是文末區塊。還記得我們上次怎麼做 HTML code 的嗎？

sample.html

<div id="container">
    <!-- 我們通常用 Container 來當容器，最大的容器 -->
    <div class="header">
        <!-- 標頭區塊 -->
    </div>
    <div class="sidebar">
        <!-- 側邊欄位區塊  -->
        <div class="author">
            <!-- 作者資訊區塊 -->
        </div>
    </div>
    <div class="main">
        <!-- 內文區塊 -->
    </div>
    <div class="footer">
        <!-- 文末區塊 -->
    </div>
</div>

我們先來看看我們的標頭區塊需要什麼樣的設定。

sample.css

.header {
    width: 100%;
    height: 300px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
}

看似很容易的結束了。我們給了一個高度設定 300px，然後給了一個 overflow: hidden 的設置。這個設定是為了要讓這個盒子模型，在內容物件有超過自身尺寸的時候，不要顯示捲軸而設定的。有關於 overflow 的設定，可以先請參考 w3c 的官方說明。

CSS Visual effect: http://www.w3.org/TR/CSS2/visufx.html

接著來看 sidebar 的部份，他看起來是跨越在標頭設定的區塊裡面，但是我們這裡先不考慮跨越的問題，我們先把我們要得盒子模型給拼湊出來。

sample.css

.sidebar {
    width: 240px;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    clear: left;
}

看起來跟標頭區塊沒有什麼太大的區別，唯一不同的是，我們沒有限制高度，但是多了一組 float: left 的設定。這是一種浮動元件設定，可以讓這個區塊變成浮動的元件，然後向左方對齊。另外我雞婆的多寫一組 clear: left，就是在告訴你，我是要靠左邊推齊的。關於浮動（float）與推齊（clear）的設定，可以先請參考 w3c 的文件說明。

CSS Visual formatting model
float: http://www.w3.org/TR/CSS2/visuren.html#float-position
clear: http://www.w3.org/TR/CSS2/visuren.html#propdef-clear

接著是最重要的內文區塊。

sample.css

.main {
    width: 700px;
    height: auto;
    margin: 0 0 0 20px;
    padding: 0;
    border: 0
    float: right;
    clear: right;
}

這裡的設定跟 sidebar 很像，只是我們是朝右邊推齊。另外，寬度（width）的設定也不是我們所想得 960px - 240px = 720px，至於為什麼？我在上一篇已經有提過 1+1 > 2 的狀況了，所以我就不在多說。

最後是文末區塊。

sample.css

.footer {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    clear: both;
}

因為這個區塊是在最底下，所以我們需要一組 clear: both 設定，來將我們的推齊點給左右推齊。因為他的上方有兩組浮動元件，由於浮動元件會影響到行定位的因素，所以我們得使用這樣的設定，將行定位給推齊。

關於行定位有太多影響因素，講起來也不是那麼容易理解。在這裡先不詳述關於行定位的事情，這件事情我們往後在另闢篇幅討論。

實際演練

我怕你們看不到區塊的效果，所以把所有的 <div> 都加上了白色的框框，可以清楚的知道我們現在的區塊是在什麼位置。然後，我之前有提到 Firefox Tilt 這個工具，我們用他來看一下切版的層的狀況。

換個角度看看。

大抵上來說，我們的大框架就這樣完成了。看起來很粗糙沒錯，畢竟烹調還是需要調味的，我們只是先把食材處理好，先扔進鍋子裡而已。你或許會覺得奇怪，我們的 sidebar 不是說好要跨越標頭區塊嗎？這個畫面看起來並沒有跨越在標頭區塊上面！

這就是見證奇蹟的時刻。

我不會公佈這次演練的原始碼，我相信把上面的範例慢慢地拼湊起來，他是可以動作的。如果他不能動的話，應該~~跟我沒有太大的關係~~有些神奇的地方你忘了改。不是有句俗話說：複製、貼上，記得改嗎？

區塊跨越的設定，跟留白有關。不過這種設定很微妙，有時後會牽扯到行定位的問題，我們下次再聊。

Hint: 聽說 margin-top 可以設定為負數。

[Layout] Web Design Part 4

Tue, 10 Jan 2012 23:24:00 PST

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

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

樣式表

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

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

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

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

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

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

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

STEP BY STEP

我們繼續看上次的例子：

sample.html

<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 才行。

sample.css

.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）是一個外框容器，裡面有三個小容器，外框容器需要的是固定的寬度，所以我們這邊先給他寬度，然後，我們不需要留白。

sample.css

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

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

上面的圖片中，我把 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 …

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

sample.css

.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;
}

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

sample.css

.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 的圖片了。像這種事情~~一定不是我害的~~當然就得回到樣式，看哪裡出了問題。

sample.css

.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

實際展示

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

sample.html

<!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，就能任意變換寬高的效果。

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

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

[Layout] Web Design Part 3

Tue, 10 Jan 2012 04:45:00 PST

依稀記得那是一個早秋溽暑的午後，DHTML（Dynamic HTML）在當時莫名的流行起來。所以我就開始接觸 CSS 與 Javascript，在當時不算是很風行的東西。而為了解決瀏覽器之間的紛爭，當時還分有 document.all 與 document.getElementById 這兩種取元素的方式。雖然，截至目前為止，瀏覽器的紛紛擾擾依舊沒有中斷過。

然後那年是 1998 年，我寫完了 CSS 1.0 教學手冊。

拼圖遊戲

動態網頁，就是把你想要的元素放到頁面上去，利用 Javascript 讓他動起來。但是我們不談動態，我們來說說拼圖遊戲。這是一個 Layout 中的小小區塊，看起來他像是許多區塊組合而成的。

然後呢，我們利用 Firefox 所推出的 Tilt 來看看到底怎麼回事。

為什麼當年做切版沒有這麼神奇的工具可以用呢？不說這個工具了，有興趣的人請自行去上述的鍊結看看。我們來說說拼圖這件事情。我們以色塊來區分我們想要切割的地方，這樣應該一堆繁雜的 HTML code 要來的好多了。

藍色的區塊是背景，紅色的區塊是我們用來放作者資訊的地方，黃色的地方是側邊欄位，綠色的區塊我們暫時不管。所以這就是我們的拼圖遊戲的第一步，找出一個切割的基準，這件事情並不是一定要用哪些規則，有些規則是用來打破的。

畫面切割的基準，不一定是由 VD 來決定。
版面區域的劃分，不一定要一次就到位。
基準線可以有參考，例如 Blueprint 這類的 CSS Framework。
參考可以用來打破，我剛剛說過了。
切割出的區域，可以先用 <div> 包裝。
最後再考慮語意標籤。

這樣就結束了嗎？並沒有，我們來看更細部的地方。

我就不特別說明顏色了，你看得出他有幾層嗎？

決定區塊

沒有什麼東西比實作更來的有說服力。

sample.html

<div id="container">
    <!-- 我們通常用 Container 來當容器，最大的容器 -->
</div>

在這裡我們需要什麼呢？

背景區塊（我們用 container 來當做背景區塊）
側邊欄區塊
作者資訊區塊
標頭區塊
內文區塊
文末區塊

sample.html

<div class="sidebar">
    <!-- 側邊欄位區塊  -->
</div>

<div class="author">
    <!-- 作者資訊區塊 -->
</div>

<div class="header">
    <!-- 標頭區塊 -->
</div>

<div class="main">
    <!-- 內文區塊 -->
</div>

<div class="footer">
    <!-- 文末區塊 -->
</div>

有了這些區塊之後，我們該怎麼使用？拼圖的要訣，就是把看起來像的或是相關的東西放在一起。所以，我們就把我們所需要的區塊給放在一起。

sample.html

<div id="container">
    <!-- 我們通常用 Container 來當容器，最大的容器 -->
    <div class="header">
        <!-- 標頭區塊 -->
    </div>
    <div class="sidebar">
        <!-- 側邊欄位區塊  -->
        <div class="author">
            <!-- 作者資訊區塊 -->
        </div>
    </div>
    <div class="main">
        <!-- 內文區塊 -->
    </div>
    <div class="footer">
        <!-- 文末區塊 -->
    </div>
</div>

然後，我們單獨來看 author 這個區塊。我還是不告訴你他有多少層，所以，我所舉出的例子，你可以依照你的方式來改寫。因為，同樣的拼圖，我先拼了這一塊，並不代表你一定要跟著我的方式來拼。

sample.html

<div class="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>

做中學，學中做

這是捷徑，也是不二法門。從別人的作品中來學習是最快的方式。

sample.html

<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 當大容器。
拉出一個作者相片的容器。
相片容器有標頭與文末。
相片容器內文區塊，放置了作者圖片。

這麼做的原因：

我們不需要多浪費一層標籤來放置底圖。
相片容器用來放置不一樣的底圖。
標頭與文末不需要放置任何東西，他只是為了放置背景。
內文區塊也放置一個 repeat-y 的背景。
內文區塊就算長度有變化，也不至於破壞切版結構。

這是切版的最終精神。拼圖拼錯了拔起來重拼就好，切版切錯了可能得~~切腹謝罪~~打入 18 層地獄啊。所以，如果換個方式來切的話，如果我要長寬都不受限制的話，該怎麼做呢？

就留給你們了。偷偷說，可以完全不用改切版，用 CSS 就能達成。

Hint: 可惜 IE9+ 才支援 ::after, ::before 這兩個擬似元件。

[Layout] Web Design Part 2

Mon, 09 Jan 2012 04:45:00 PST

當我還是小屁孩的年代，學美術的時候一定是從靜物設計開始，學設計的時候從~~點麵線~~點線面開始。學了美術讓我體會到一件事情，就是我一點美感的天份都沒有（無誤），從小學到國中，我能感謝的大概就是，美術班去北美館或是國美館的次數，比我感冒的次數還多這樣。

視覺化

視覺設計要切入的點其實並不困難。

網頁即是視覺中圖層的概念。
視覺元素即是圖層的堆疊與變化。
視覺元素參考線就是切割線。
視覺區域連續性可以分成兩個圖層來思考。
把東西放上去的動作不一樣，但是結果相同。

設計大概很難沒聽過圖層（Layer）這個名詞，也感謝偉大的 Photoshop 將這種概念深植人心。對於視覺設計來說，圖層是一種畫布，是一種可以渲染、疊合、遮蔽、裁切或是做出通透特效的透明圖紙，然後透過軟體的輸出，將這些效果經過演算而完整輸出在圖面上。

換成網頁設計的說法，我們可以這樣說：

視覺就是網頁設計中標籤層的轉變。
網頁元素由盒子模型（Box Module）來堆疊出視覺變化。
網頁元素與元素相鄰就是切割線。
網頁元素的通透與疊合可以展示出底層元素的連續性。
網頁元素透過樣式表來把物件放上去。

如果說視覺設計是從一個面開始，那麼網頁設計就是從一個盒子－－你可以說他是區域性的面－－來開始。問題來了，我該怎麼樣把視覺性的元素，切割成網頁設計所需要的盒子？

俗話說得好，~~推自己的文章不嫌晚~~，2009 年老生常談一下：

警告：TL; DR

起步

其實大多數人會不知道從何開始，或者說，不太能夠清楚的知道切入點在哪裡。

像是這種複雜的東西鬼才知道要怎麼做。對於入門者來說，要一下子把經驗累積的東西，一股腦的照單全收的話，絕對是會消化不良的。問題是，我們要怎麼樣去發現這些切入點？抑或者說，該怎麼樣入手會比較容易一些。

不必急著了解語意，先了解盒子模型。
了解盒子模型之後，複製一堆盒子模型。
用盒子模型把畫面拼湊出來，起碼跟視覺設計相同。
了解你的畫面區塊的意義。
依照你的畫面區塊，找出符合該意義的語意標籤。
試著了解語意標籤。

如果你了解我剛剛說得那幾點，那我們以 HTML5 來看看這張圖，我們使用眾多的盒子模型把他拼湊出來，那麼，是不是應該有些地方，可以換成適當地語意標籤？

sidebar.background 可以使用 <aside> 標籤
menu.background 可以使用 <nav> 標籤

疑？那麼 header.background, base.background 與 author.background 三個區塊呢？這裡我們時常遇到一些問題，雖然他們各代表著某些目的性，但是這並不代表他們可以使用相對的語意標籤來表達。

以上面這個例子來說，雖然 header.background 是一個 <header> 區塊，但是，他其中包含了 <nav> 與 <aside> 的疊合，所以在標籤結構與語意上，將他安排成為 <header> 都是不太適切的。

請留意，一個單純畫面中的區塊，並不是一定需要定義 <header> 標籤的。這個例子，在 header.background 中，置入 <h1> 標籤來說明該頁面的標題就已經足夠了。

XDite 精彩好文：如何設計出正確語意的 HTML5

第一刀

對一個視覺設計師來說，如何找到基準線來劃下第一刀，我想相較於我這種沒有美術底子的人，應該要快得多。如果能夠理解圖層與盒子模型之間的關係，對於畫面的區塊應該就不難理解。

至於我剛剛說過得連續性的視覺效果，在 sidebar.background 與 header.background 左邊的人物，切割成兩個區塊來看，是不是比較容易？當然，如果你想保留人物的完整，將整個人物放在 sidebar 然後使用背景透明，覆蓋於 header 上面也是一種作法。

並沒有人侷限你要怎麼做，網頁設計也是一種創意。

我只能告訴你我會怎麼做，但這並不是要奉為圭臬，也許你的設計創意要比我高明很多，只有透過不斷地練習才知道這些事情的細微與瑣碎。鑽牛角尖應該不是設計師該執著的事情，不是有句話這樣說：創意無限！

如果這種方式對你來說還是過於困難，那麼還有另外一個點子：

玩拼圖

我們下回見（燦笑

[Layout] Web Design Part 1

Mon, 09 Jan 2012 00:54:00 PST

What’s Layout?

一直以來，我始終都覺得這是一個很沉悶的課題。如果用一張紙一枝筆可以解釋的話，那麼請這麼做：

畫出 1 個大的矩形，你可以叫他 A
在這個 A 矩形中，畫出 10 個恰巧可以填滿的矩形
試著說出為什麼要這樣擺放
把 10 個矩形減少為 5 個，試著重新填滿 A 矩形

如果你問我矩形是什麼形狀，那我很確定你可能不適合走這條路。

我們常聽到網頁設計，但是，扣除掉 VD(~~Virtual~~Visual Design) 之後的事情，大家可能就漠不關心了。而，對於 F2E(Front-End Engineer) 這種行業，可能連聽都沒聽過。所以，網頁設計理所當然的變成了有些人要全包的悲劇，或是災難。

Layout 的另一種說法是切版。通常我們使用標籤語言、樣式表與 Javascript 來完成切版這件事情。扣除掉 Javascript 這個~~工程師才會用的哏~~很程式化的東西之外，剩下的只有 HTML 與 CSS 了。如果你現在還要喊 HTML 是程式我看不懂 或是 CSS 是程式我看不懂 這樣的話，那麼我也覺得你可能不是很適合走這條路。

門檻是用來跨越的，不是讓你去被絆倒的。

拿出你剛剛畫完的 5 個矩形，那個 A 矩形就是你的螢幕。其中的 5 個矩形就是你的元素。這樣你已經完成切版的第一步了，這樣有很困難的話請舉手，或者說去問一下 Google 大神什麼叫矩形也是可以的。

思考這 5 個框框能帶給你什麼？

當我換成 HTML 的時候會是什麼
當我套入 CSS 的時候會是什麼
當我的 CSS 失效的時候會是什麼
~~當我的 Javascript 失效的時候會是什麼~~

假設你略懂 HTML，那麼你可能會把框框都換成了 <div> 這樣的標籤。當然我們不希望你把這些東西都變成 <table>，相信我，那會是場悲劇。或許你會這麼問：

用 <div> 我就沒辦法對齊了！
為什麼不用 <table> 拉一拉就好？
我除了 <div> 之外，沒有其他選擇嗎？
~~用 <div> 就不能所見及所得了~~

也許所見即所得是一種~~被寵壞的~~趨勢，不過我們還是對於這些事情保持一種保留態度。未來的編輯器會發展成什麼樣子我們並不知道，我所知道的只是，利用現有的工具來達成我們所要達成的目標而已。

熟悉與善用工具是必須的。我想你不會想看到切版輸出的時候，出現 <tr><td></td></tr> 然後用來換行，而聽說換行的標籤叫做 <br />。或者說，用了好多的 <div>　之後，卻在樣式表中下了 display:table 這樣的設定。難道就不能乖乖的使用 <table> 嗎？

標籤的適切性是很重要的。並不是我很愛拿 <table> 與 <div> 來舉例（~~騙人，明明就很愛用~~），而是這種例子似乎屢見不鮮啊！這就跟你不會拿 MBA 來當門擋是一樣的道理。

MBA 門擋出處：筆電 @ River Comic Studio

Skill

其實就只有兩個：

CSS
HTML

剩下的就只是你的熱忱了。

HOWTO

從別人的作品開始，這是不二法門。畢竟井上雄彥也曾經是北條司的助理嘛（這有關係嘛）。

男子漢就是鍊結絕對不開新視窗

這是我寫的投影片：Layout presentation

下回，我直接用實際的例子來說明一些問題。

標籤語意，搞不清楚哪裡該用哪一種標籤。
標籤適用性，哪種標籤可以怎麼用，哪種標籤不行。
結構性問題，標籤所製作出來的區塊（box），編排上有難度。
難以發現標籤錯誤，或是無法得知是否誤用。
屬性特性不明瞭。
瀏覽器對於屬性的支援程度不一。
視覺設計轉換成樣式設計的落差。
有些樣式設計無法達成的事情。
畫面編排與視覺設計的落差。
不知道畫面編排的方式何種為佳。
難以精準調整畫面狀況。
無法即時得知畫面效果。