[心得]給網頁初心者一篇文章

或許你也是站在小河旁邊，看著逆流而上的小魚兒，然後心所感悟 於是立下了弘願，奮不顧身的跳下河流，探出已快滅頂的頭大喊： 「我要成為網頁設計師！!咕嚕咕嚕~~..............」 很好，你的這句話打動了我的腐朽的心靈，開啟我的宅門 看來我只好把我畢生所學來誤人子弟了(一一+) 俗話說的好，師父引進門，徒弟來滅門 希望有朝一日能在我背上看見你的藍波刀 --------------------------------------------------------------- client 第一階段：HTML 或 HTML5 --------------------------------------------------------------- 【基本】 　　在網頁按右鍵檢視原始碼，可以了解文內９０％標籤的意義 　　而不是一堆陌生的文字，例如<p>（段落)<br />（斷行) <hr />(水平線)等...，能夠對每種標籤了解。 【專業】 寫出來的HTML必需符合W3C的規定(註1)，而且也必需考慮到影 　　響朗讀程式的一些必要屬性例如header，以及使用者輸入表單時 　　的跳欄順序tableindex、accesskey等屬性，換句話說也要考慮 　　無障礙網頁設計的細節 　　註1：如果你使用的firefox瀏覽器，你可以考慮安裝下列的plus-in 　 來幫助你驗證網頁是否符合W3C的規定 http://users.skynet.be/mgueury/mozilla/ 【拋磚引玉】 　　通常只要有《基本HTML》的能力，就能進行下一階段了，不過這階段 　　最大的問題就是學習者會過度依賴編輯器(例如Dreamweaver、FrontPage 等...)來設計網頁，導致對於HTML仍然不熟，建議的最好的方法是 　　手裡拿著一本HTML的書(如果你還是學生，請善用圖書館資源)，試著用筆 　　記本編輯並馬上開啟瀏覽比對你所編輯的內容是否如同書上所說的一樣。 　　至於《專業HTML》只要在後期編輯時慢慢的提醒自己去注意，就會習慣。 　　不過如果你一開始就把檢驗工作做好，比較能節省學習時間 --------------------------------------------------------------------- client 第二階段：HTML + CSS 或 HTML5 + CSS3 --------------------------------------------------------------------- 【基本】 　　 　　將大部分的HTML的標籤屬性，改由CSS取代 例如將 <p><font color="red">紅字的文字</font></p> 改為 <p style="color:red">紅字的文字</p> 【專業】 　　使用CSS的技巧，做出版面定位、選單(註2)，並且 將HTML當作文字資料(如身體)，CSS當作樣式(衣服) 如此分開的設計 註2：透過CSS你可以完成如下列的選單 http://cssmenumaker.com/ 　 註3：下列的網頁是一個相當好的CSS活用參考網站，你可以發現網站 　　　　 使用同一個HTML資料內容，套用不同的CSS樣式，有著不同的畫面 　　　 http://www.csszengarden.com/ 　　　　 【拋磚引玉】 　　CSS部分需要長期設計網頁排版才能快速累積經驗技巧，最好 　　練習方式就是，「找到一個設計漂亮的網頁，然後用CSS技巧 　　將畫面編排成一模一樣」如此一來你就會為了要去完成某個 　　面版畫面，而對CSS有更深的了解。如果你不知道從哪下手， 　　試著去設計你的blog(部落格)的CSS吧 ------------------------------------------------------------------- client 第三階段：Javascript ------------------------------------------------------------------- 【基本】 　　事實上，javascript(簡稱js)算是屬於程式語言部分了，在此階段你必 需知道js的基本命令，例如絛件分歧(if..else,switch)、迴圈(for,while..) 輸出(alert,document.write)還有變數的觀念(把他想成國中的代數運算)等... 【專業】 　　能透過js去動態網頁的內容(不需重整網頁)，甚至改用最近熱門的JQuery來 js部分舊式用法(註4)，最後將網頁的讀取都以Ajax的技術觀念完成 註4:下列範例為使用JQuery完成的動態網頁功能 http://doublekai.org/demo/jpvowel/ 【拋磚引玉】 javascript算是最基礎程式語言，在這部分你必需將他視為一個獨立的單元 來學習，最好能買一本「JavaScript完整語法參考辭典」(既然他是辭典，算是 　工具書，如果經濟上准許的話，那麼就買回家放著吧，用借的還要歸還比較麻煩) 試著將書本上的每一個範例看完，如此應該就有一堆的js功力了。接著開始試著 　 去學使用JQuery JQuery的基本教學可以參考 http://jsgears.com/thread-63-1-1.html 以上屬於client的部分，現在線上有提供非常方便的工具，可以拿來練習 http://jsbin.com/ 或 http://jsfiddle.net/ 都是不錯的選擇。 jsbin更詳細部分可參考保哥的文章：http://goo.gl/51jL9 ※※※※※※※※※※※※※※※※※※※※※※※※※※※※　 ※　前三段都為client的技術，意思就是你不需安裝任何像是 ※ PHP、JSP、ASP.net的server環境，只要用最簡單的工作 ※　(筆記本 + firefox or IE + 書)　就可以做學習了 ※※※※※※※※※※※※※※※※※※※※※※※※※※※※ ------------------------------------------------------------- Server 第四階段：PHP 或 ASP.net 或 JSP 或 Ruby ------------------------------------------------------------- 【基本】 　跟js的基本部分相當類似，若你有javascript的基礎，那麼學起來 　 就沒那麼困難了，此階段你必需安裝學習的環境，以PHP為例的話 　 若你要快速設置環竟，可以試著使用Wamp、Appserv(註5)，學習目標 可以放在函式的運用(註6)，並且使用PHP去產生HTML(所以這就是你 　 為什麼必需先了解HTML囉) 【專業】 　 使用物件導向的方式撰寫程式，利用ＷebService(註7)的遠端程式呼叫 　 技術做資料的讀取，考慮分散式資料處理的資料設計 註5：關於PHP環境快裡建置的部分，你可以參考 http://doublekai.org/blog/?p=242 註6：以PHP為例可用的函式多到你可能用不到，把重點放在字串、陣列 檔案、雜項的部分 http://linux.tnc.edu.tw/techdoc/banic/ 【拋磚引玉】 　　事實上第四階段會與下一階段(第五階段)並存進行，這也是他們為 server端的最終意義，學PHP的目的就是為了從資料庫讀資料，然後 處理完畢後將他輸出 --------------------------------------------------------------- Server 第五階段：MySQL、PostgreSQL、SQL Server --------------------------------------------------------------- 【基本】 　　了解資料庫正規化、表單的設計與關聯概念，基本的SELECT語法 　　簡單的JOIN 【專業】 　　熟用各種SQL語法，例如使用大量的join複雜性高的關聯表單語法 能在資料被讀取之前，就已經透過內建的SQL語法完成必要的處理 【拋磚引玉】 　　很遺憾...目前只有基本的程式，專業的部分還不是很熟(失格！紅牌退場..囧rz) －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ 結語： 　1.若你還對多媒體有興趣，可以考慮加入flash這個選項 甚至可以考慮換flex....算了= = 2.你想開發2D/3D遊戲，恭喜你走錯路了，請去插C/C++或C#的背吧 (不過話說flash有俄國人開發一個3D引擎，很炫喔，如果只做小型3D遊戲可以考慮) 請參考：http://www.flashsandy.org/demos 3.分享才是王道，請多學習外國人被插背的精神 　　抱怨文：http://doublekai.org/blog/?p=240 4.資料庫部分如果你想開發的是單機版的網頁應用程式，你可以使用SQLite或是 　　Google Gears API 相關參考：http://blog.ijliao.info/archives/2007/05/31/3099/ -- 歡迎來我的網誌看看 http://blog.liaosankai.com http://liaosankai.pixnet.net -- ※ 發信站: 批踢踢實業坊(ptt.cc)