2007/09/29

什麼是色彩搭配設計師(coloe coordinator)?

資訊來源節錄自:中國設計之窗



曾有項國外科學實驗證明,人的視覺器官在觀察物體最初的20秒內,色彩感覺占80%,形體感覺占20%;2分鐘後,色彩感覺占60%,形體感覺占40%,5分鐘後,色彩感覺和形體感覺各占一半,並且這種狀態將持續下去。.......別是對于沖動型、激情型的顧 客群體,鮮豔明了的産品會一下子滿足他們的購買欲望,瞬間效應特別明顯。


色彩營銷的重要
色彩營銷,就是要在了解和分析消費者心理的基礎上,做消費者所想,給商品恰當定位,然後 給産品本身、産品包裝、人員服飾、環境設置、店面裝飾一直到購物袋等配以恰當的色彩,使商品高情感化,成爲與消費者溝通的橋梁,實現“人心-色彩-商品” 的統一,將商品的思想傳達給消費者,提高營銷的效率,並減小營銷成本。


※MiyaC小註:目前內地已有色彩搭配設計師的相關執照,不過台灣好像還沒看到...

歡迎部份轉貼或引用,請註明出處


2007/09/28

怎麼用CSS把網站做起來+基本佈局16例

用table排版網頁,光看原始碼完全很難想像排出來是什麼樣子、html code比較多導致網頁速度慢、容易出現跑位等等的問題,讓MiyaC斷斷續續在磨些CSS排版功,尤其對於能夠兼容於IE6、IE7、FireFox瀏覽器的一些基本佈局設定,剛開始還真是很頭大,因為自學是沒有人教應該怎麼做會更快速、便捷,而且對於css不熟悉的人,一開始看到用css去編排網頁、版面、設定字型,會覺得也經過了不少錯誤的學習,一直以來都還能勝任。
直到有次當自己寫的layout配置,程式設計看了說:『架構有點亂、可以再嚴謹些』,才開始study,到底當版型該怎麼開始著手規劃,然後撰寫div+css排版。

構思-->畫出草圖-->作出版型

可以在版型做好後,也可以在畫草圖的時候,根據不同類別,畫出區塊與區塊名稱,如圖:

圖片引用自:>網站製作學習誌:蠟筆小新 CSS 版型大進擊



剛開始,自己規劃撰寫配置時,容易遇到很多不知問題出在哪裡的狀況,可以用一些常見的基本版型配置去調整應用。以下是基本佈局16例:


資料來源:http://www.w3cn.org/article/layout/2004/55.html

單行單列

  • :採用float浮在左上角,固定寬度。
  • :固定在左上角,固定寬度,採用的是絕對(absolute)定位。
  • :固定在左上角,不固定寬度,採用百分比(%)定義寬度來自適應頁面。
  • (推薦):固定寬度,採用在body樣式中定義居中屬性(text-align: center;)實現適應頁面自動居中。

單行兩列

  • :兩列都固定寬度。第一列浮在左上角,第二列浮在第一列右邊。
  • :兩列都百分比寬度,但不滿版。第一列固定在左上角,第二列浮在第一列右邊。
  • :兩列都百分比寬度,滿版。兩列都採用絕對定位。
  • :兩列都百分比寬度,滿版。第一列浮在左上角,第二列浮在右上角。
  • :兩列都百分比寬度,滿版。第一列浮在左上角,第二列浮在第一列右邊。

單行三列

  • :左右列都絕對定位(右列定位在右上)。左列和右列固定寬度,中間列自適應頁面。
  • :左列定位在左上,右列定位在右上,中間列浮在左列右面。左列和右列固定寬度,中間列自適應頁面。
  • :三列都絕對定位。左列和右列固定寬度,中間列根據內容自適應。
  • (推薦):類似樣式2,只是將margin: 20px屬性增加在body樣式中,解決了中間列在Netscape6.0中置頂的問題。
  • :左右列絕對定位,中間列自適應。寬度滿版。

頂行三列




延伸閱讀:
> 徹底弄懂CSS盒子模式
> CSS 排版觀念:Position - 史考特部落格園地
> DIV CSS佈局實例:用css佈局網站的十步驟!

2007/09/27

我的小筆記 - XHTML 與 HTML 的差別

說實在,MiyaC到現在還是無法確切說清楚,到底XHTML跟html差別在哪,持續的爬文、搜尋、用破破的英文看W3School,將一些覺得不錯的內容小小整理筆記在這篇。

XHTML Elements Must Be Properly Nested 標籤必須有頭有尾,沒有結尾的話,在頭要加" /" (為了支援現在的瀏覽器,所以/之前要加一個空格)


標籤包裹要對應層次



用id不要用name



註解中間不能使用--


大小寫有差別的,以下是來自W3School的對照:


HTML XHTML
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"





延伸閱讀:
> 第6天:XHTML代碼規範
>XML Tutorial


歡迎部份轉貼或引用,請註明出處