這系列文章,把這幾年透過CSS寫網站常用的技巧、概念以及選擇方式整理起來,讓大夥兒能夠較快的進入使用CSS寫網站的世界。

做網站時,不外乎是依照業主或自行規劃的網站選單、內容、呈現來決定一個網站的架構。
當架構出來時,就是網站設計師溝通的時候。透過交流確定顧客群,以及整體希望以什麼樣的風格呈現。

其實若僅是一般公司形象網站、單頁式介紹網頁、或類似電影官方網站這種規模不大的網站,著重在整體給人的感覺,細緻度一定要夠,這攸關該公司在網際網路上的門面。
現在環境的趨勢,也能夠很明顯的感受到青少年對於網路的使用度有多高。無論商家搜尋、購買物品、出門旅遊等... 第一件事情一定是上網搜尋。
當看到一個網站只是簡單的三個框架拉出來,選單是放大粗體標楷體、標題是大粗體配一張圖片,內文充斥著表格及看起來不協條的圖片,當第一眼看到時,對公司的感覺一定是大打折扣的。

有些人會說:內容才是網站最重要的部份。

但,連第一眼都留不住人時,你的內容又怎能夠吸引人繼續看下去呢?  
又,頗具規模的公司竟然吝於經營網路這一領域,怎令對公司於趨勢的走向抱持肯定呢?

扯遠了....


個人網站設計步驟如下:
1.確定網站內容、呈現方式(顧客群)
2.規劃網站架構
3.網站草圖設計
4.將草圖呈現圖與業主討論
5.開始實做網站


其實這個也算扯遠了.... 哈


CSS設計版型時,個人先都將草稿繪製好,接著透過軟體(PS或FW)將整體風格、物件繪製出。
接下來的因應CSS版型切塊就是看經驗了。


整體篇:


通常背景因需要有捲軸下拉的銜接,通常都要有兩三個標籤去將整體網站包起來。

body(標籤)下主要顏色的背景或延展後的背景。
而body下通常都還會多放置一個div將所有內容包起來,而包起來的層數就看背景需要蓋幾次。
CSS的呈現方式有點類似一般影像處理軟體的圖層,越外層的在越下面。
所以有時候因設計考量需要加入僅為了裝飾用的div標籤,若設計上允許的話,div標籤應用盡量只用在結構化資料,而不要為了一些點綴效果的圖示卻增加了無意義的標籤。

採用CSS必須將資料的結構分層好(頁首、內容、導航選單、內容、標題等...)
尤其以往的i、b、u這種標籤就不要用了。
取而代之的應使用class,依同性質使用class,透過CSS統一管理。
維護網頁時若需要將粗體加上顏色,也能夠只用CSS就一次修改完畢,而不用逐頁尋找修改。

字體的顏色及大小,千萬不用類似使用預設DW編輯時的style1、style2這種方式來宣告class。
除了未來維護麻煩外,也不利於共用class。
如果是要當作小標題,小標題的子標題時,就可以用.head1、.head2這種方式來定位階層。

主要需要考量到整體版型哪些位置需要哪些功能,再將該區獨立成一個div包覆起來。
最後才將原始圖切割以後用背景或圖片方式組合成網站。


整體篇大概提到這裡,後續有機會再繼續補充。


arrow
arrow
    文章標籤
    css 教學
    全站熱搜

    ezcshi 發表在 痞客邦 留言(0) 人氣()