目前分類:CSS 教學 (2)

瀏覽方式: 標題列表 簡短摘要

這系列文章,把這幾年透過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包覆起來。
最後才將原始圖切割以後用背景或圖片方式組合成網站。


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


文章標籤

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

/*-------歸零-------*/
/* CSS Document */
/* Normalizes margin, padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{ margin : 0; padding : 0; }

/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size : 100%; }

/* Removes list-style from lists */
ol,ul { list-style : none; }

/* Normalizes font-style and font-weight to normal */
address, caption, cite, code, dfn, em, strong, th, var
{ font-style : normal; font-weight : normal; }

/* Removes list-style from lists */
table { border-collapse : collapse; border-spacing : 0; }

/* Removes border from fieldset and img */
fieldset,img { border : 0; }

/* Left-aligns text in caption and th */
caption, { text-align : left; }

/* Removes quotation marks from q */
q:before, q:after { content :''; }



/*-------包覆類-------*/
#wrp{

}

#wrapper{

}

#contentWrapper{

}



/*-------頁首類-------*/
#header{

}

#header h1{

}

#header #logo, #header .logo{

}

#banner{

}



/*-------選單導覽類-------*/
#mainNav{

}

#subNav{

}



/*-------內文類-------*/
#intro{

}


#about{

}


#newsRelease{

}


#summary{

}


#primary{

}


#secondary{

}


#content{

}



/*-------零件類-------*/
#calendar{

}



/*-------商品類-------*/

#productList{

}

#orderForm{

}



/*-------頁尾類-------*/
#footer{

}



/*-------排版類-------*/
#column_one{

}

#column_two{

}

#column_three{

}


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

找更多相關文章與討論