/ Web Design

[Layout] Web Design Part 11

從溫暖的南台灣回到萬惡的天龍國,唯一不適應的大概就是溫度吧。其實如果可以的話,來去南台灣置產好像也是個不錯的選擇。不過,可能搬去中南部之後,就不會有人找我做 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 如何?