Web Design

[Layout] Web Design Part 11

從溫暖的南台灣回到萬惡的天龍國,唯一不適應的大概就是溫度吧。其實如果可以的話,來去南台灣置產好像也是個不錯的選擇。不過,可能搬去中南部之後,就不會有人找我做 Layout 了吧(抱頭 所以為了妻小,還是繼續留在北部打拼吧。 小結 前面寫了這麼多,所以現在來一點點小小心得應該是很合理的。我們從一開始的切版,聊到後面的選擇器問題,然後突然發現又衍生出更多的問題。實際上,當你操作過一次之後,你會發現這是很正常的事情。 這也是我不喜歡食譜的原因。我盡量不要讓文章看起來像食譜,所以我只會跟你們聊聊,在實際操作上可能會遇上什麼事情。然而,還是可能會有很多問題會在我的製作過程中,下意識的去避開。因為習慣使然,因為 IE6/7/8

Web Design

[Layout] Web Design Part 10

由於我沒有娘家可以回,所以大年初二在家寫寫部落格也是很合理的。當然也因為這樣,省下不少紅包錢買來的紅包袋只用了兩個,實在有點太說不過去了。 小的時候很期待回去外婆家,長大了,外婆家原本的地址已不復在。然而,我卻有種近鄉情卻的憂愁。 SELECTOR 上一回聊到了一些選擇器,雖然我好像有很多都沒有交待到,但是,基本上選擇器的用法都如出一轍。雖然說 w3c 提供了那麼多的選擇器,但是,由於瀏覽器支援的程度差異,導致這些東西未必全部都可以使用(IE 表示:)。 我們以一個簡單的例子來說明各種選擇器的使用時機, <div id="container"> <header

Web Design

[Layout] Web Design Part 9

大過年的,穿新衣戴新帽好像已經是小時候的事情了。所以,趁著大過年,找點事情來充實一下其實也是不錯的。當然,肚子已經充實了,腦袋也要充實一下,不然實在有點說不過去。 是說包紅包嘛,紅包肥了,荷包就瘦了。所以不要來跟我拜年。 如何選擇 市面上眾多的 CSS Framework 之所以說樣式無用(Style Agnostic),是因為他們已經幫你定義好,什麼樣的選擇器,該做什麼樣的事情。但是,如果我們從頭開始,我們該怎麼去選擇? 實際上,你對於選擇器這樣的東西,有多少的了解?簡單的說,他就像是積木,一個蘿菠一個坑,只是最終的結果不同而已。

Web Design

[Layout] Web Design Part 8

小時候,我家門口還是石子路的時候。老媽偶爾會帶我們去買玩具,小孩子嘛,不過大多都是簡單的積木。我沒聽過什麼叫做樂高,但是就是那種拼拼湊湊的東西就是了。印象裡,我跟老弟好像曾經用積木,拼出一台機器人出來。當時還刻意擺在神桌上(大不敬 拼圖遊戲老媽很愛玩,最高紀錄曾經連續兩三個月拼出三張 1000 片的拼圖。然後玩到脖子疑似落枕那般的扭傷,還被老爸唸了一陣子。尋找區塊或是幾何對我們來說好像不是太困難,創意才是。 積木遊戲 形狀可能很多樣化,但是組合的方式大概也就那幾種。積木不就是你接我、我接你,然後接來接去組合成一個我們想要的形狀。切版設計大概也是這個概念,HTML code 也只是我們的積木而已,視覺大概就像是積木盒的完成圖,告訴你我可以拼出哪些花樣,而樣式表大概就是說明書了。

Web Design

[Layout] Web Design Part 0.5

中場休息時間,我們來聊一些有趣的東西。畢竟是假日,所以再繼續談一些切版的瑣碎,難免會喘不過氣來。倦怠是難免,就像是切版切久了總是會膩,會手癢想玩一些新的把戲。 像是 CSS Framework 這樣的玩具(哪裡有輕鬆啊你)。 CSS Framework 雖然名字叫做樣式表框架,但是事實上稱他們為框架是有點過而不及。簡單的說,CSS Framework 提供了我們一定的規則可以依循,依照這些規則,能夠快速的打造一些較為制式的樣式輸出。 Blueprint 960 Grid System YUI Grid CSS Skeleton 我比較推崇 960

Web Design

[Layout] Web Design Part 7

以前在寫網頁的時候,曾經遇過這麼一件趣事。IE 光宗耀祖的 hasLayout 還不是那麼令人詬病的年代,為了解決 IE 與 Netscape 的動態效果不一致的狀況,不斷地查詢 position 定位問題時,曾經看過這麼樣一註解: /* Don't ask, just do it. */ zoom: 1; 然後我就哭了。 定位、浮動與推齊 在盒子元件中,最讓人不高興的,大概就是定位點的問題。我們如果時常使用 position, float, clear 這三種屬性設定,

Web Design

[Layout] Web Design Part 6

對於畫面呈現來說,其實最終目的我相信是一樣的。只是工具不同、過程不同,還有能力的不同而有些微的差異。只是這個些微有時後會讓人感覺起來相當的巨大。無法否定的是,所謂隔行如隔山大概就是這種情況吧。就像我永遠不會有 VD 的美感,而同樣的 VD 可能 也沒有我們這樣的邏輯。 我是說 可能。 SIMPLE IS HARD 對多數人而言,切版這件事情倚賴現有而且強大的軟體,可以幫忙我們解決許多問題,像是 hard-coding。對於網頁設計來說,撰寫 HTML code 本來就是一種必要之惡,但是對於多數網頁設計者來說,HTML code

Web Design

[Layout] Web Design Part 5

給你一把釣竿,教你怎麼釣魚,其實是一件很困難的事情。與其這樣,不如給你一張漁網,用撒的機會或許會比較大一點。當然啦,我不可否認這樣是有一點作弊的嫌疑,但是在這個講求速度的年代,手速 400 快速的抓到切版的精神也是一種必備技能。 這種速度靠的是經驗的累積,雖然沒有公式,但是起碼也有一定的規則可以依循。 經驗的累積 回到切版所面對的問題,雖然市面上有非常多切版教學,照著做也確實能夠得到些什麼。但是終究就只是照著做而已,並沒有人會告訴你為什麼要這樣做,或者說還可以這樣做。時代告訴你要速成,所以我們就給你速成,所以我們就給你食譜,給你義大利麵。 當客戶想吃拉麵的時候,你就不會煮了。 如果你可以把義大利麵煮成拉麵,你的客戶也吃不出義大利麵與拉麵的差別,那麼只有兩種可能,其一是你的內力功力深厚,其二就是你的客戶食不知味是個好人。

Web Design

[Layout] Web Design Part 4

雖然寫切版感覺很乏味,但是俗話說得好,出來跑總有一天要還。所以其實趁著世界末日還沒到,趕快把前債清一清是比較妥當的。拼圖遊戲還是得繼續,我們在這邊覆蓋一張牌,結束這一回合。 抽出 CSS 卡,來召喚神龍吧。 樣式表 很多人對他有誤解,認為這些東西應該是 PG(Programmer)才應該要會的東西。結果到頭來,VD 跟 PG 之間的樑子就越結越深了。所以後來才出現了 F2E 這樣的職位出來。網頁設計之所以要知道的事情,其實應該不是規避這些你認為誰應該要會的事情,而是去正視這些我是不是應該要學的這些事情。 好像,這一場誤會就是十餘年(還記得 CSS

Web Design

[Layout] Web Design Part 3

依稀記得那是一個早秋溽暑的午後,DHTML(Dynamic HTML)在當時莫名的流行起來。所以我就開始接觸 CSS 與 Javascript,在當時不算是很風行的東西。而為了解決瀏覽器之間的紛爭,當時還分有 document.all 與 document.getElementById 這兩種取元素的方式。雖然,截至目前為止,瀏覽器的紛紛擾擾依舊沒有中斷過。 然後那年是 1998 年,我寫完了 CSS 1.0 教學手冊。 拼圖遊戲 動態網頁,就是把你想要的元素放到頁面上去,利用

Web Design

[Layout] Web Design Part 2

當我還是小屁孩的年代,學美術的時候一定是從靜物設計開始,學設計的時候從點麵線點線面開始。學了美術讓我體會到一件事情,就是我一點美感的天份都沒有(無誤),從小學到國中,我能感謝的大概就是,美術班去北美館或是國美館的次數,比我感冒的次數還多這樣。 視覺化 視覺設計要切入的點其實並不困難。 網頁即是視覺中圖層的概念。 視覺元素即是圖層的堆疊與變化。 視覺元素參考線就是切割線。 視覺區域連續性可以分成兩個圖層來思考。 把東西放上去的動作不一樣,但是結果相同。 設計大概很難沒聽過圖層(Layer)這個名詞,也感謝偉大的 Photoshop 將這種概念深植人心。對於視覺設計來說,圖層是一種畫布,是一種可以渲染、疊合、遮蔽、裁切或是做出通透特效的透明圖紙,然後透過軟體的輸出,將這些效果經過演算而完整輸出在圖面上。 換成網頁設計的說法,

Web Design

[Layout] Web Design Part 1

What's Layout? 一直以來,我始終都覺得這是一個很沉悶的課題。如果用一張紙一枝筆可以解釋的話,那麼請這麼做: 畫出 1 個大的矩形,你可以叫他 A 在這個 A 矩形中,畫出 10 個恰巧可以填滿的矩形 試著說出為什麼要這樣擺放 把 10 個矩形減少為 5 個,試著重新填滿 A 矩形 如果你問我矩形是什麼形狀,那我很確定你可能不適合走這條路。 我們常聽到網頁設計,但是,扣除掉 VD(VirtualVisual

CSS

[Layout tech.] Web Design note with XHTML/CSS final

在 噗浪 上看到 ericsk (的 噗浪) 所寫的按鈕,我覺得應該來寫 part 5 了。至於為什麼是按鈕,那就先來看看 ericsk 所寫的按鈕: 很單純的 Click Me 也許沒什麼稀奇的,再來看看這個: 它還是 Click Me 也沒什麼稀奇的,只是字越來越大而以。那麼,不知道各位會怎麼製作這樣的按鈕?當然,用圖片是最快的做法,不過,這四個按鈕你需要用多少張圖片呢?12 張?

CSS

[Layout tech.] Web Design note with XHTML/CSS part 4

在這之前,已經沒有要拜讀的東西了,不過有幾點明確認知請大家注意: 在這之前,已經沒有要拜讀的東西了,不過有幾點明確認知請大家注意: IE6+7 sucks! 本文作者是三尛咖! 本文秉持著"先研究不傷眼睛,再講究效果" 若有不適者請勿繼續閱讀(疑?)。 update, 請愛用 DTD。 到了這般地步,我想應該已經沒有甚麼特殊技能了。畢竟 CSS Styling 所需要的其實不是鑽研它能做些甚麼,而是你必須要知道你想要做些甚麼,而 CSS Styling 能否能滿足你的需求,如此而已。所以,也別把 CSS

CSS

[Layout tech.] Web Design note with XHTML/CSS part 3

這次要講的重點是: 再看視覺格式物件(Visual formatting model)中的 display 屬性 列表與清單物件 不用 TABLE 的表格 很好很強大的特殊屬性:counter 首先,在閱讀這篇文章之前,請明確認知以下兩件事情: IE6+7 sucks! 本文作者是三尛咖! 有以上明確的認知之後,我們繼續(疑?)。 視覺格式物件當然不只限於 display 而已,但是定位(position)與浮動(float)在 上一篇