想找資料嗎?到這看看也許會有收穫喔。
‧wordpress: 佈景主題 / 插件介紹 #
‧網站教學 : css新手必看 / css筆記 / seo
‧電影片單 : 驚悚 / 懸疑 / 靈異 / 動作 / 文藝 / 劇情 / 喜劇 / 紀錄 / 科幻 / 史詩 / 戰爭 / 動畫
2008/12/07

教學 | 學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學習者有沒有覺得不錯的書?
最重要的是,希望大家可以親自到實體書店走一趟,翻翻每本書的內容,看哪一本的編排最適合你
不過只是聽了朋友的推薦就衝動買下來,到時候如果不喜歡書本的解說、或者覺得內容太難,就欲哭無淚囉~
res1 這邊有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。

☆延伸教學閱讀

1. 輕鬆上手css(I) - 不可不知篇

Related Posts with Thumbnails
人氣:4,497    
  • 引用網址:
  • 文章標籤:,
  • 上篇文章:
  • 下篇文章:

    1. comments(29)
    2. #1
      //LV.21
      2008/12/07

      FrontPage2000這本我也有
      不過我只大概看過幾次而已
      後來就被我送給社團的學妹了 ...

    3. Carrie
      #2
      Carrie//LV.33
      2008/12/07

      看來 muki 要來分享 CSS 學習筆記了呢~這讓我想到我去年時也曾買了數本網頁程式語言學習的書籍(http://blogs.carrielis.com/200 ; http://blogs.carrielis.com/250)想好好學習,不過後來因為工作繁忙的緣故因而荒廢了。

      現在我又閒下來了,或許又該是好好學習的時候了:)

    4. 游阿貓
      #3
      游阿貓//LV.13
      2008/12/07

      我也想學css...

      我被佈景搞的好煩 嗚...

    5. muki
      #4
      muki//LV.953
      2008/12/07

      我是覺得我買的那本還不錯XD!
      圖文並茂+漫畫式的介紹,很適合我國中那個年紀
      當初是在世貿展的時候買的,書名忘了,只記得在講2000的東西(笑

    6. muki
      #5
      muki//LV.953
      2008/12/07

      喔喔
      我之前有看到那篇文章(200),還有回覆呢 真是懷念XD!!
      Carrie在250那邊推薦的書籍好像都不錯,我等等來仔細看。
      工作一忙起來,人真的無法兼顧很多事情
      我發現學生也有學生的好處呢
      一起加油吧XD!

    7. muki
      #6
      muki//LV.953
      2008/12/07

      我有看到你的佈景
      前幾天也有幫你看過為什麼sidebar會掉下去
      但是連我也找不出原因 囧..

    8. koka
      #7
      koka//LV.8
      2008/12/07

      一定要寫的啦,我一定看。因為我有訂閱rss orz
      我是初學者但是我還是不想買書。囧
      之前有看到某些部落格介紹軟體:cssvista 還有simple css
      還是不會用,他寫要輸入網址。
      我蠻希望能像window live writer一樣
      在程式碼部分編輯
      編輯完了可以直接看結果

    9. muki
      #8
      muki//LV.953
      2008/12/07

      謝謝你的支持
      我還不清楚大家想要看的教學偏重哪裡,但是想要直接看結果的那種我應該也是不懂有哪些軟體
      因為自己本身是用火狐的某個掛件可以直接看結果QQ
      目前打算先從基礎的概念、語法跟大家解說^^"

    10. koka
      #9
      koka//LV.8
      2008/12/07

      喔,我有裝firebug,webdeveloper,measureit,colorzilla,aardvark。裡面只有firebug我會用來觀察
      我在想可不可以寫一點秀出一點這樣的方式寫css呢
      可以寫一些淺顯易懂的教學喔。
      因為有些套件我裝了也不會用。

    11. muki
      #10
      muki//LV.953
      2008/12/07

      我目前只裝了firebug,
      webdeveloper不知道從哪版之後,突然無法使用,我後來就沒用了。
      如果有需要
      我會寫一點簡單的firebug使用方法在blog裡頭:)
      至於colorzilla、aardvark我來去搜尋一下他們的功能XD!(今天第一次聽到呢:P

    12. koka
      #11
      koka//LV.8
      2008/12/07
    13. muki
      #12
      muki//LV.953
      2008/12/07

      謝謝你唷
      這些資訊對我很有用
      你提供的部落格寫的東西也很讚^^

    14. 游阿貓
      #13
      游阿貓//LV.13
      2008/12/08

      是阿
      我也找了香腸幫我看...

      找時間去書店看看有沒有初學用的書好了XD

    15. Donald
      #14
      Donald//LV.38
      2008/12/08

      10項中有9項我都符合,看來我已經不是CSS初學者了。完全是空白啊- -

    16. Arno+Ruan
      #15
      Arno+Ruan//LV.39
      2008/12/08

      10題中我有5項,努力學習中。^_^

    17. muki
      #16
      muki//LV.953
      2008/12/08

      恩恩!!後來也是香腸問我的XD
      很抱歉幫不上忙(汗
      我建議你換佈景XD

    18. muki
      #17
      muki//LV.953
      2008/12/08


      慢慢來吧 我們一起努力^^!!!
      這種東西就是要學習學習再學習XD

    19. muki
      #18
      muki//LV.953
      2008/12/08

      很棒啊
      表示你已經很厲害了>w<
      大家真的都要不斷學習呢^^

    20. Li Chi
      #19
      Li Chi//LV.1
      2008/12/08

      喔...我符合3項..
      現在看到美麗的版面也只是讚嘆...^^

    21. muki
      #20
      muki//LV.953
      2008/12/08

      Li Chi一直以來都很厲害啊><
      尤其是設計的apeskin、cgi等版面
      我們這些作網站的人一定要一直努力下去Q口Q

    22. 星夜如雨
      #21
      2008/12/09

      初學者建議還是買本入門的書

      已經有基礎的可以買工具書...像是字典一樣的書籍(有基礎後才有用 搜尋的能力)..

      完全沒基礎者我看連 搜尋 keyword 都不知道打啥...這種人真的很多

    23. willy
      #22
      willy//LV.13
      2008/12/09

      推一下台北車站那家忘記名字的電腦書專賣店囉,最近想學css(主要想改wp版面),但想到上次那本php都還沒看…

    24. A`Vai Poitsonu
      #23
      2008/12/09

      嗯...命中五題。
      第一題我還真的不知道全文叫什麼耶^_^||(快去查 ...)

    25. muki
      #24
      muki//LV.953
      2008/12/09

      我也覺得初學者可以買本入門的書!!
      畢竟初學&進階怎樣都是有差別的xd

    26. muki
      #25
      muki//LV.953
      2008/12/09

      你說的是天瓏資訊吧?
      那家還蠻有名的^^
      php不好學啊,如果有要學習就一起加油吧(握拳

    27. muki
      #26
      muki//LV.953
      2008/12/09

      其實第一題我覺得是基本要知道的啦
      話雖這麼說,我自己在想題目的時候,也不知道這題的答案(笑

    28. 風痕影
      #27
      風痕影//LV.27
      2009/02/20

      第一題我背不起來 (大哭)
      只知道是 C_____ Style Sheets

      串接的英文啊...到底是啥咧

      剛才去查了,是 Cascading :mrgreen:

    29. DANIEL
      #28
      DANIEL//LV.3
      2009/11/14

      看完你的css的完全初學者的十個問題後,我確定我是你所形容的完完全全的初學者,學習動機是,想擁有一個具有個人風格的的BOLG,用於發表個人的對特定事物的觀點..並做為親友間交流用的平台.

      我買了一本工具書,旗標出版的CSS,HTML.XHTML精緻範例辭典.做為參考,再看到你的介紹之前,完全看不懂這一本書,http://www.flag.com.tw/book/5105.asp?bokno=FS470

      很喜歡你這乾淨清爽的頁面,以及精湛的教學文章發表,也給我學習HTML及CSS帶夾很大的動力,並以你為典範來勉勵自己,更佩服您那偉大的無私奉獻的情操.

      小弟正逐篇地研究您有關css的教學文章,希望能透過您的文章入門css,往後,如有不懂,再向您請教,希望您不吝賜教..

      小弟在此向您請安了

    30. muki
      #29
      muki//LV.953
      2009/11/14

      @DANIEL
      很高興有人又因為我寫的教學而燃起熱情^^
      本來都很怕寫了沒有人看呢
      謝謝你的鼓勵與支持,我會繼續加油

    comments(29)



    :wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: