What's Layout?
一直以來，我始終都覺得這是一個很沉悶的課題。如果用一張紙一枝筆可以解釋的話，那麼請這麼做：
- 畫出 1 個大的矩形，你可以叫他 A
- 在這個 A 矩形中，畫出 10 個恰巧可以填滿的矩形
- 試著說出為什麼要這樣擺放
- 把 10 個矩形減少為 5 個，試著重新填滿 A 矩形
如果你問我矩形是什麼形狀，那我很確定你可能不適合走這條路。
我們常聽到網頁設計，但是，扣除掉 VD(VirtualVisual 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），編排上有難度。
- 難以發現標籤錯誤，或是無法得知是否誤用。
- 屬性特性不明瞭。
- 瀏覽器對於屬性的支援程度不一。
- 視覺設計轉換成樣式設計的落差。
- 有些樣式設計無法達成的事情。
- 畫面編排與視覺設計的落差。
- 不知道畫面編排的方式何種為佳。
- 難以精準調整畫面狀況。
- 無法即時得知畫面效果。
