因為接連著好幾天都有人一直問我如何從零開始設計一個好的樣式,說真的,我幾乎每一個星期要回5次,一個一個回了後,還是有一半的人是莫宰羊樣,我也不知道你們真的需要什麼。你們自己都毫無方向,讓我實在也很頭痛要如何回答,而且我早明擺了說不想再教學了、也不想再回答此類問題,卻還是看到很多人問,被問了我又忍不住回答,實在也真夠犯賤的我...

所以,這裡我再寫一篇如何從頭學習CSS的教學!再看不懂的朋友,就請放棄設計這一回事了吧,免得你苦惱,我也累...

● 認識模版

目前痞客有提供pixnet二欄式、pixnet三欄式、無名模版、樂多模版、痞客模版,差別在哪?在於標籤的不同!




● 認識標籤

pixnet二欄式:
#Top(橫幅)、#Sidebar(連結列整體)、#Content(文章區整體)、#Comments(回應區整體)...

pixnet三欄式:
#Top(橫幅)、#Sidebar-l(左方連結列整體)、#Content(文章區整體)、#Comments(回應區整體)...

樂多模版:
#banner(橫幅)、#links(連結列整體)、#content(文章區整體)、#comments(回應區整體)...

無名模版:
#banner(橫幅)、#links(連結列整體)、#content(文章區整體)、#comments(回應區整體)...

痞客模版:
#header(橫幅)、#links(連結列整體)、#content(文章區整體)、#comment-box(回應區整體)...


大致上,每種的模版大標籤都類似,僅有些許的不同,但在裡面的小細項就差異很大!例如:


pixnet二欄式:
#BlogHeader a(部落格標題)、.Sidetitle h4(連結列標題)、.mainEntryTitile h3(文章標題)、span.date(文章日期)...

pixnet三欄式:
#BlogHeader a(部落格標題)、.Sidetitle h4(連結列標題)、.mainEntryTitile h3(文章標題)、.date(文章日期)...

樂多模版:
.blogtitle a(部落格標題)、.sidetitle(連結列標題)、h3 .title(文章標題)、.date(文章日期)...

無名模版:
#pageheader h1 a(部落格標題)、.sidetitle(連結列標題)、.articletext h3 .title(文章標題)、.datediv(文章日期)...

痞客模版:
#banner(部落格標題)、.box-title(連結列標題)、.title(文章標題)、.publish(文章日期)...


仔細瞧,細項的部份就開始有許多大差異了!我只有截取些許部份來說明,完整的標籤請自己去找。為什麼痞客的拿去套用在無名不見得能用,因為標籤不同,原設定值的排列方式也不同,所以當然會不能用。痞客模版把許多小細項都拿出來,讓你可以控制很多小地方,所以在設計上,以痞客模版下去設計的,才更能達到你想要的境界...(此為個人感受)所以,想要設計,先選擇好你要用哪個開始下手吧!




● 基本樣式

這部份,請直接參閱我前一篇教學:CSS簡易教學




● 底圖搭配

當然要先試著自己用美工軟體設計個圖,才能下去設計...不然以CSS預設的,你只能有顏色加線條,這樣不是很沒創意?圖怎麼做?請自己試著別人設計好的圖,人家怎麼設計,大概就是那樣...這個圖要怎麼教起,實在很難!我會建議直接先去研究別人已經設計好的...




● 如何開始

了解每一個標籤代表什麼東西後,你可以先試著從基本樣式下去改改看,裡面都會有寫好的完整標籤!從最基本的改改色、改改線條、改改字體去練習。然後再試著設計一張banner去放在橫幅,看是否你設計的圖能照你想的呈現,如果可以,再去研究其他的小細項,甚至更難的部份...自己先試過,不行再問人,否則試都沒試過,誰知道要怎麼教你?




● CSS的書

基本上,我不建議買書,因為其實網路上可以找到的資料很多,買書反而成了很浪費的一件事...但,我有買,所以這裡介紹一下...

打造你的個性化痞客邦:這本完全就是為了痞客邦而生的書,內容還OK,有很詳盡所有模版的標籤、教學,和一些物件的教學。

CSS玩美樣式範例語典:各式各樣寫法的呈現,裡面都有...基本的,到進階的,還蠻容易懂的!




● 最後我的話

如果,以上您都還看不懂,又想要自己來,就自己從頭到尾去請教別人,找看看有沒有人願意一個地方一個地方教你開始學寫CSS,然後自己再花比別人多一倍的心力去研究,但請做好“被肚爛”的心理準備。因為CSS是需要花很多的時間去研究的,別人又沒有義務一定要教你,如果自己一直搞不懂,就別期望別人一定要有耐心教你,畢竟CSS這種東西,說句難聽的,是講天份的...想要研究別人已經設計好的,當然可以,但請謹記一件事“別人的設計是別人的東西,別自己改過之後就當自己的,還不要臉分享出去。”被發現了,會招人公幹!懂嗎?

要問我怎麼設計,可以!

請先自己搞懂什麼是標籤、真的有去爬過文還是找不到或不懂的再問我,不要我講了什麼是標籤、模版的差別在哪、字體怎麼改,還有聽沒有懂,根本就是要我從頭到尾step by step教?如果是這樣,請拿錢來,我會認真考慮要不要教...否則別怪我,直接忽略問題,叫你自己去爬文,甚至一個不爽殺了你的問題!問問題,也請拿個具體的東西來問,不要沒頭沒尾的,問了半天問不到重點。我以為你在問東,回答了以後,搞半天才知道你在問西,簡直是浪費我的時間。別把我惹火了...到時我留言版再關閉,網誌也不准再提問,就你害的...

最最最後,呼應“壯兔兒”的文章。請教,請用好一點的態度具體發問,然後耐心等待人家回應,不要一直催,態度又不佳,我們會設計的是欠你不成啊?



本文引用自 lovejie2005 - 教學│從頭學CSS

創作者介紹

Reiyu's Polish one~*

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