這個簡報使用 HTML5 製作並展示
你可以使用方向鍵 ← → 來播放
縮放快捷鍵 Ctrl 或 Command + +/-
請使用 Google Chrome 來獲得最佳瀏覽效果
* 你可以稱為版型輸出，將視覺設計變成網頁其實也是一門工作與學問。
* 例如說尿盾之類的...
<table cellpadding="0" cellspacing="0" border="0"> <tr> <td>其實我的民間專長是整理資料用的。 </td> </tr> </table>
<dl> <dt>群組 A</dt> <dd>還有人記得我是群組標籤這件事情嗎？ </dd> </dl>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
多想兩分鐘，你可以不要用兩次 Table！
</td>
</tr>
</table>
</td>
</tr>
</table>
#header {
font-size: 16px; line-height: 18px;
font-family: "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
background-color: #333333;
}
#header .slogan { font-size: 24px; }
/* 多想兩分鐘，你可以讓你的樣式更簡潔 */
body {
font: 16px/1.2 "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
}
#header {
background-color: #333333;
}
.slogan {
font-size: 1.8em;
}
span.blockboxes {
display: block;
}
span.inlineboxes {
display: inline;
}
我是 ART: 閃光洽幫我做這個效果！ 閃光洽: 為什麼？ 我是 ART:因為我是 ART！ 閃光洽: 為什麼？ 我是 ART:因為我是 ART！ 閃光洽: 為什麼？ 我是 ART:因為我是 ART！ 閃光洽: 為什麼？ 我是 ART:因為我是 ART！
從這裡開始jQuery ，YUI
margin
padding
context
I'm a box.
I'm float left box.
I'm float right box.
I'm a box context, between the float boxes.
I'm normal box.
I'm position relative box.
I'm normal box.
I'm position absolute box.
I'm normal box.
所見不一定所得
我是 4 個欄位寬的方塊。
2 欄位方塊。
2 欄位方塊。
2 + 2 > 4
我是 4 個欄位寬的方塊。
2 欄位方塊。
2 欄位方塊。
2 + 2 = 4
絕對定位特殊邊界設定
*為什麼是 Blueprint？因為他參考資源比較多，這樣可以多寫幾頁。
* Blueprint CSS Framework: http://github.com/joshuaclayton/blueprint-css/zipball/master
* Blueprint tools and resource: http://wiki.github.com/joshuaclayton/blueprint-css/tools-and-resources
* 960.gs 其實提供了更多樣板檔案給視覺設計師參考，不過這裡是說 Blueprint 就是了。
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" /> <!--[if IE]> <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /> <![endif]-->
畫面總寬度 = 單位欄位寬度 x N + 單位欄位留白 x (N-1), N 為欄位數目 Blueprint 預設值為： 950px = 30px x 24 + 10px x 23
* Blueprint Grid calculator and generator: http://www.problem.se/labs/gridcalc.php
這裡是 SPAN-8
這裡是SPAN-5
這裡是 SPAN-6 與 last 設定
這裡有一個 <br class="clear" >
這裡有一個 SPAN-10
這裡有一個 SPAN-10 與 APPEND-3
這裡有一個 SPAN-10 與 PREPEND-3
這裡有一個 <br class="clear" >
這裡有一個 SPAN-4
這裡有一個 PUSH-2
這裡有一個 SPAN-10
這裡有一個 SPAN-5 與 last 設定
這裡有一個 PULL-2
Sidebar
Main
Photo
Context
Full Context
Full Context
Full Context
<div id="container" class="span-19 "> <div class="span-19 "> <h3>Header</h3> </div> <br class="clear" /> <div class="span-5 " style="height: 360px"> <p>Sidebar</p> </div> <div class="span-14 last " style="height: 360px"> <p>Main</p> <div class="span-5 prepend-1 "> <p>Photo</p> </div> <div class="span-8 last "> <p>Context</p> </div> <br class="clear" /> <div class="last prepend-top append-bottom "> <p>Full Context</p> </div> <div class="last "> <p>Full Context</p> <p>Full Context</p> </div> </div> <br class="clear" /> <div class="span-19 "> <h3>Footer</h3> </div> </div>
.span-10 {
width: 120px; /* 若非必要請勿這樣做 */
}
.summary {
font-size: 1.25em;
}
.summary div {
font-size: 2em; /* 每個 DIV 字體參照原有 .summary 尺寸再依照 DOM 樹狀結構放大 2 倍 */
}
#bullets .summary {
font-size: 1.25em;
}
.summary {
font-size: 1.5em; /* 類別 (CLASS) 選擇器的優先權低於由名稱 (ID) 選擇器繼承的屬性 */
}
Header
Sidebar
這裡發生了
跨行需求
Main
Footer
我是一個美麗的錯誤
Float Box
推齊右邊，所以變成至頂。
推齊左邊，所以對齊 Box 底端。
這是使用 position 的 Box
在這邊使用 clear 是無效的！
Relative Box
相對定位中，負值造成的意外！
* Clear fix: http://www.positioniseverything.net/easyclearing.html
sidebar
main
Photo
tip
content
Box 1
Box 2
<div class="span-3 pull-2 prepend-top" style="position:absolute; "> <p>tip<p> </div>
<div class="span-5" style="height:360px;margin-top:-40px; "> <p>sidebar</p> </div>
<div class="span-4 last prepend-top"> <p>Box 1</p> </div> <div class="span-4 last prepend-top"> <p>Box 2</p> </div>
* 在基準區塊使用定位屬性，且強制指定位置座標時，將會是惡夢的開始，容後詳述。
Box 1
Box 2
WTF!!!
Box 1
Box 2
有看過我的 blog* 應該知道會知道我要說甚麼...
* blog: http://blog.hinablue.me/entry/CSS_tech_blueprint_css_part_2
Box 1
Box 2
Box 3
原本的 Box 3
/* 如果我們有一個很接近 span-5 的區塊，但是他比 span-5(190px) 還大，如果要塞 200px 怎麼辦？ */ <div class="span-5/* 為什麼還要設定？ */ " style="width:200px;/* 直接重設寬度 */ "> 直接犧牲一個欄位的寬度，大多數狀況下就能滿足非基準區塊的寬度要求。 </div> <div class="span-3 last/* 原本是 span-4 */ "> 因為分了一個欄位給前面的區塊，所以相鄰的下一個區塊就必須犧牲 一個欄位！ </div>* 保留 SPAN-5 的設定，除了繼承樣式外，是要讓你記住他的最小寬度，避免 width 被改得比原本更小！
Box 1
Box 2
Box 3
Box 4
Box 1
Box 2
Box 3
Box 4
Box 5
Box 6
Box 7
Box 8
定位設定時： 絕對定位 (absolute) 視覺上跳脫 DOM 樹狀結構，而實際上也是 ，過量使用會是個惡夢。 相對定位 (relative) 視覺上跳脫 DOM 樹狀結構，實際上卻不然 ，負值定位會是個惡夢。
Box 1
Box 2
Box 3
relative
Box 4
WTF blank here!
<!-- 請善用老牌子的 HTML 註解 -->
<!-- 請讓標籤各適其所！ --> <table> <!-- 我是用來整理資料的 -->
<!-- 請不要濫用裏技，都自己定義不如不要套用基準 -->
<!-- 修改基準前，請先問自己為什麼 -->
/* 請愛用老牌註解，請使用明確命名規則 */
.wtfstyle123 { /* 鬼才知道這是誰用的，要我筊杯問媽祖嗎？ */ }
/* 用對選擇器就像選對老師一樣，若沒上天堂，還不至於下地獄 */
div.boxes > p { /* 這就跟小孩一樣，需要慢慢學 */ }
/* 峰峰相連到天邊，不如搬去住海邊 */
div.bar .bar .bar .bar .bar { /* 這是內衣廣告嗎？ */ }
/* IE6 MUST DIE */
我本來就不是個良好的使用者經驗設計（揍飛）。
如果要做觀賞用頁面，建議作成海報比較好，又大張（揍飛）。
並不是我們腦袋中想的使用者會（其實根本不會）點這裡 那樣簡單的事情。
我也想學，真的。
不成功便成仁，通常成仁的機率還頗高這樣。
Slide to unlock 就是一個例子。
Dropbox 連我家的狗都會用（揍飛）。
讓你的使用者覺得有趣，而不是毫無目的！
/* 各家標籤百百款 */ border-radius: /* 原生 W3C 的寫法 */ -moz-border-radius: /* 專門給 Mozilla/Firefox 用的 */ -webkit-border-radius: /* 專門給 Webkit 核心用的（Safari/Chrome） */ -ms-border-radius: /* 專門給 IE 用的 */ -o-border-radius: /* 專門給 Opera 用的 */ /* 而且，未必每一種 CSS3 標籤都需要加前輟 */
http://www.w3.org/TR/css-2010/
http://www.css3.info/preview/
你也可以請客戶升級到 IE9（眼神死
如果你 guts 夠，做 Mozilla/Webkit only 的網站也可以（不可能
單純的為 Safari/Chrome 貢獻心力這樣
我知道 CSS3 可以有 2D/3D 特效，但是，請勿偏離偉大航道（超大誤
CSS3 為我們帶來很多，或許是許視覺設計師可以輕易辦到的事情。像是倒圓角，漸層色，陰影。 所以我們是否就踰矩了？
只要有心。
User Experience，好的設計（VD/Layout），不代表好的使用者經驗。
好工具，不用嗎？
俗話說：不會走就想學飛，大概就是這個意思。
可以請 IE 全面升級到 9.0+ 以上嗎？
如果是 co-work，請做好準備。
VD 苦手，畢竟不是所有人都對 CSS 夠熟悉。
請你當我的 code ，我想當你的 compiler.
只要你喜歡就好 ，我喜歡這個，你呢？
這個我知道，我教你 ，這個應該是，不如我們一起嘗試。
這裡我們上次去過了 ，這次搭捷運去吧！
http://www.w3.org/TR/html5-diff/ 他並不是全部沿用自 HTML 4 的特性！
<!DOCTYPE html>
所以我可以寫 <noway> 與 <thisway>。不過並不代表可以亂來。
HTML5 並沒有強制規範標籤撰寫風格（是否關閉標籤、標籤大小寫等），但是，請做你自己。