Daily Archives: 10/15/2012


[鐵人賽07]從平面設計前進 CSS-5 盒模型

CSS的部分講了四篇,都還在基本概念和 HTML的元素選擇器上,今天終於要正式講到樣式本身的基礎- box 盒模形。 網頁設計和平面設計最大的差異之一就在元素的空間組成上,平面設計時頁面上的元素是用線條、區塊、形狀、顏色來區分不同的元素,同時元素間可能沒有明顯的邊界,但是在網頁設計的”頁面”中設計師其實是在針對 HTML裡的元素像是標題 <h1>、區隔 <div>、影像 <img>等等元素設計不同的造型,然而這些元素在頁面中佔有的空間 “全部都是矩形”。 沒錯! 全~~部~~ 都是矩形,不管是標題、錨點或是影像,在瀏覽器眼中就像一個個的用HTML <tag> </tag>包起來的箱子box 堆在頁面中,而且常常是一個包一包,盒子裡面還有盒子,這些盒子會依網頁設計者指定的寬高形成一個個不同長寬的矩形空間。 所幸是網頁設計也有圖層的概念,可以讓這些矩形元素有不同的位置變化,但是不管你眼睛看到什麼造型,實際上他們在瀏覽器眼中「全部都是矩形」,只不過這個矩形有不同的長寬、顏色、邊界、內外間距、背景甚致還給你圖層可用。見下圖: 這張圖展示的是任何元素都有的共通的空間性質,每一個元素都具有自己的長寬等上述屬性來確定本身在頁面中佔了多少空間。


2012 部落格行動日 – 我們的力量 The Power of We

部落格行動日從2007年開始到現在,每年部落客們都選出一個主題在同一天發表文章來關注這個主題,藉由全球所有部落客在同一天做出這個行動,讓世界更關心一些公共議題,經過環境、貧窮、氣候變遷、水資源、糧食危機到2012,這次要關注的主題是:我們的力量。 過去,在君權時代、民主初期,個人的力量是相對微小的,當大環境及政策改變時個人往往只能隨波逐流,在資訊不夠流通的時代,言論及思想的散布都會被當權者所掌握,不對稱的資訊造成一般人的無知及無力。 但是在網路逐漸普及,世界越來越像地球村的現在,個人的行動及發言可以凝聚成廣大的群眾意識,原本在社會群體中微不足道的聲音可以引發火種及力量,我們不再讓掌握資訊的權力者操控,而擁有發聲和聚集的力量足以由自身開始改變世界。