教學 | 學css前要準備什麼?

做專題之後,陸陸續續會聽到同學也想學習css,互相研究
加上有的朋友會問我該怎麼學習css,如何上手?該從哪些資料開始著手?
這邊簡單跟大家分享我的經驗,也希望對想要學習css的人有所幫助:)
★ 學css要買相關書籍嗎??
其實這一點並沒有正確的答案,我想端看你自己學習的狀況來判定。
大家可以先試著回想自己在學習其他軟體、語言的時候,是買市面上的書籍回家研究呢?還是在網路上找大家的教學來學習?
要看你自己習慣哪種模式,就跟著一貫的學習方式走吧。
另外一種建議方式,我是認為你可以先想想你是否為「css完全初學者」?
如果以下10個問題,你有7項都符合你的狀態,那你就是css完全初學者。
1.如果不查資料,我不知道css的全名是什麼?
2.在我的印象裡頭,css就等於是讓排版美觀的意思。
3.我不懂html,也不懂怎麼把html還有css兜在一起。
4.看到很漂亮的blog(ex.muki :p),我會發自內心的讚嘆。卻不會去思考blogger如何建構他的排版。(意思就是我不會去想他怎麼分割、怎麼寫...就只是單純欣賞.羨慕)
5.如果不查資料,我不懂margin以及padding的差別。
6.我一直不能理解標籤怎麼控制我的版面
7.打開一份css文件,我不懂要從何開始學習、觀看,甚至修改。
8.如果我成功的修改了字型大小、顏色還有超連結的狀態,我會覺得自己很厲害。
9.給我一份完全沒有css標籤的html檔案,我沒辦法獨力將他加上標籤、搭配css呈現出來。
10.我真的很想學css,可是我不知道從何學起。
測驗結束,如果你符合「css完全初學者」。
那我會建議你買一本書,但是這本書一定要從頭開始把整個css的架構都講的很清楚,讓你可以從基本的概念學起。
★ muki有沒有推薦的書籍??
這邊要跟大家說聲抱歉,我只買過一本實體書籍:「FrontPage2000」,其他html以及css都是從網路上自學而來。
所以我並沒有買過相關書籍,也無從推薦你們哪本比較好。
建議如果要買書的朋友,可以先問問週遭css學習者有沒有覺得不錯的書?
但最重要的是,希望大家可以親自到實體書店走一趟,翻翻每本書的內容,看哪一本的編排最適合你。
不過只是聽了朋友的推薦就衝動買下來,到時候如果不喜歡書本的解說、或者覺得內容太難,就欲哭無淚囉~
這邊有Carrie推薦的幾本css、html書籍,大家可以去看看
★ 我要準備什麼工具??
假設你買好了書(或者從網路上蒐集到教學資訊),你可能會躍躍欲試,馬上就要開始寫css。
但是你可能會發現無從下手?會不會因為你不知道要用什麼工具呢?
首先我們要知道一個概念,css這個文件他無法單獨在瀏覽器中讀取,就算讀到也只是文字而已。css必須搭配html才可以呈現他的效果。
我常常拿大家熟悉的「人」來做例子。
今天你要出門,你一定要穿衣服才能出門吧!!!
「裸體的你、什麼都沒穿的你」就是html
「穿在你身上的衣服、配件」就是css
要搭配衣服(css)穿上自己(html)的身上,才可以有美麗的效果。
所以說任何的美化一定要搭配一個實體的東西,否則就等於0。
講到這裡,相信大家應該都懂了。
你的首要工具(知識),就是你一定要懂基礎的html,否則免談。
如果你真的不懂,可能你要買的書籍就不是純粹的css,而是要搭配html的css書籍。
假設你會基礎的html,要開始學習css,這時候你的工具選擇有兩種方式:
1.用網頁編輯器的軟體輔助你使用css (ex. DreamWeaver.FrontPage),網路上也有許多是小型免費的網頁編輯器軟體可供下載,大家也可以用用看。
2.用文字編輯器的軟體輔助你使用css (ex. NotePad.Emeditor.UltraEdit)。
| 優點 | 缺點 | |
| 網頁編輯器 | 快速上手,方便 | 檔案大 |
| 文字編輯器 | 檔案小不佔資源 | 要一個字一個字的輸入 |
看完這個「超簡易」的優缺表,相信大家會選擇使用網頁編輯軟體吧
我自己也是推薦大家使用網頁編輯的軟體(雖然我是用文字編輯)
因為對初學者來說,大家不可能都把每一段css背的很熟,靠軟體輔助慢慢學習會比較好。
★ 開始上手css
最後,有了好的教學書籍,有了很棒的輔助軟體,muki就要歡迎你來到css的世界囉!!
一開始你會學的很愉快,因為css普遍來說並不難。
但是當你進入了零的領域 「float的領域」,可能會有很嚴重的挫敗感。
不過請不要氣餒,因為過了這一段前途就是美好的啦XD!!!
css不是一蹴可及的東西,他需要不斷的練習、學習,你才可以將他運用自如。
而且css一直在進化,我們都需要不斷上網學習新知識,才可以讓自己的網頁排版功力一直進步唷XD。



FrontPage2000這本我也有
不過我只大概看過幾次而已
後來就被我送給社團的學妹了 ...
看來 muki 要來分享 CSS 學習筆記了呢~這讓我想到我去年時也曾買了數本網頁程式語言學習的書籍(http://blogs.carrielis.com/200 ; http://blogs.carrielis.com/250)想好好學習,不過後來因為工作繁忙的緣故因而荒廢了。
現在我又閒下來了,或許又該是好好學習的時候了:)
我也想學css...
我被佈景搞的好煩 嗚...
我是覺得我買的那本還不錯XD!
圖文並茂+漫畫式的介紹,很適合我國中那個年紀
當初是在世貿展的時候買的,書名忘了,只記得在講2000的東西(笑
喔喔
我之前有看到那篇文章(200),還有回覆呢 真是懷念XD!!
Carrie在250那邊推薦的書籍好像都不錯,我等等來仔細看。
工作一忙起來,人真的無法兼顧很多事情
我發現學生也有學生的好處呢
一起加油吧XD!
我有看到你的佈景
前幾天也有幫你看過為什麼sidebar會掉下去
但是連我也找不出原因 囧..
一定要寫的啦,我一定看。因為我有訂閱rss orz
我是初學者但是我還是不想買書。囧
之前有看到某些部落格介紹軟體:cssvista 還有simple css
還是不會用,他寫要輸入網址。
我蠻希望能像window live writer一樣
在程式碼部分編輯
編輯完了可以直接看結果
謝謝你的支持
我還不清楚大家想要看的教學偏重哪裡,但是想要直接看結果的那種我應該也是不懂有哪些軟體
因為自己本身是用火狐的某個掛件可以直接看結果QQ
目前打算先從基礎的概念、語法跟大家解說^^"
喔,我有裝firebug,webdeveloper,measureit,colorzilla,aardvark。裡面只有firebug我會用來觀察
我在想可不可以寫一點秀出一點這樣的方式寫css呢
可以寫一些淺顯易懂的教學喔。
因為有些套件我裝了也不會用。
我目前只裝了firebug,
webdeveloper不知道從哪版之後,突然無法使用,我後來就沒用了。
如果有需要
我會寫一點簡單的firebug使用方法在blog裡頭:)
至於colorzilla、aardvark我來去搜尋一下他們的功能XD!(今天第一次聽到呢:P
http://jedi.org/blog/archives/005292.html
看看這個 XD
謝謝你唷
這些資訊對我很有用
你提供的部落格寫的東西也很讚^^
是阿
我也找了香腸幫我看...
找時間去書店看看有沒有初學用的書好了XD
10項中有9項我都符合,看來我已經不是CSS初學者了。完全是空白啊- -
10題中我有5項,努力學習中。^_^
恩恩!!後來也是香腸問我的XD
很抱歉幫不上忙(汗
我建議你換佈景XD
呵
慢慢來吧 我們一起努力^^!!!
這種東西就是要學習學習再學習XD
很棒啊
表示你已經很厲害了>w<
大家真的都要不斷學習呢^^
喔...我符合3項..
現在看到美麗的版面也只是讚嘆...^^
Li Chi一直以來都很厲害啊><
尤其是設計的apeskin、cgi等版面
我們這些作網站的人一定要一直努力下去Q口Q
初學者建議還是買本入門的書
已經有基礎的可以買工具書...像是字典一樣的書籍(有基礎後才有用 搜尋的能力)..
完全沒基礎者我看連 搜尋 keyword 都不知道打啥...這種人真的很多
推一下台北車站那家忘記名字的電腦書專賣店囉,最近想學css(主要想改wp版面),但想到上次那本php都還沒看…
嗯...命中五題。
第一題我還真的不知道全文叫什麼耶^_^||(快去查 ...)
我也覺得初學者可以買本入門的書!!
畢竟初學&進階怎樣都是有差別的xd
你說的是天瓏資訊吧?
那家還蠻有名的^^
php不好學啊,如果有要學習就一起加油吧(握拳
其實第一題我覺得是基本要知道的啦
話雖這麼說,我自己在想題目的時候,也不知道這題的答案(笑
第一題我背不起來 (大哭)
只知道是 C_____ Style Sheets
串接的英文啊...到底是啥咧
剛才去查了,是 Cascading
看完你的css的完全初學者的十個問題後,我確定我是你所形容的完完全全的初學者,學習動機是,想擁有一個具有個人風格的的BOLG,用於發表個人的對特定事物的觀點..並做為親友間交流用的平台.
我買了一本工具書,旗標出版的CSS,HTML.XHTML精緻範例辭典.做為參考,再看到你的介紹之前,完全看不懂這一本書,http://www.flag.com.tw/book/5105.asp?bokno=FS470
很喜歡你這乾淨清爽的頁面,以及精湛的教學文章發表,也給我學習HTML及CSS帶夾很大的動力,並以你為典範來勉勵自己,更佩服您那偉大的無私奉獻的情操.
小弟正逐篇地研究您有關css的教學文章,希望能透過您的文章入門css,往後,如有不懂,再向您請教,希望您不吝賜教..
小弟在此向您請安了
@DANIEL
很高興有人又因為我寫的教學而燃起熱情^^
本來都很怕寫了沒有人看呢
謝謝你的鼓勵與支持,我會繼續加油