為什麼這篇html練習範例鄉民發文收入到精華區：因為在html練習範例這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者liaosankai (低溫烘焙)看板Web_Design標題[心得]給網頁初心者一篇文章時間S...
或許你也是站在小河旁邊，看著逆流而上的小魚兒，然後心所感悟
於是立下了弘願，奮不顧身的跳下河流，探出已快滅頂的頭大喊：
「我要成為網頁設計師！!咕嚕咕嚕~~..............」
很好，你的這句話打動了我的腐朽的心靈，開啟我的宅門
看來我只好把我畢生所學來誤人子弟了(一一+)
俗話說的好，師父引進門，徒弟來滅門
希望有朝一日能在我背上看見你的藍波刀
---------------------------------------------------------------
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)
◆ From: 203.67.218.165
推 carlcarl:推一個! 07/12 22:12
→ TonyQ:四跟五應該要先打底子,不然1,2,3做起來也會很沒成就感. 07/12 22:13
→ TonyQ:我的建議是 1,4,5 是網頁的核先學 , 2,3 可算加分用. 07/12 22:13
→ TonyQ:另外初學者可以不用把規範當聖經遵奉,但是一定要了解有這樣 07/12 22:14
→ TonyQ:的規範 , 在需要時(ex.無障礙or力求自己精進）時再努力充實. 07/12 22:14
→ TonyQ:如果太苛求規範而且因剛入門對各項基礎都不熟練而窒礙難行, 07/12 22:15
→ TonyQ:那就有點失去學習的原意了. 07/12 22:15
→ TonyQ:我自己的經驗真的完全了解哪些可以用跟哪些不能用,大概離我 07/12 22:16
→ TonyQ:學網頁語法開始寫網頁後隔了起碼一年吧,css也是隔了半年後 07/12 22:17
→ TonyQ:才看,雖然說這些東西大多屬於學就會 查表就ok的東西,但對 07/12 22:17
→ TonyQ:全然陌生的人來講 , 就好像完全不會講英文要靠查字典跟外國 07/12 22:17
→ TonyQ:人溝通一樣,會綁手榜腳的, 以上是我自己給新鮮人的建議 XD 07/12 22:18
→ TonyQ:當然 跟學習語言一樣, 環境很重要 ,有人可以問是很幸福的:p 07/12 22:19
推 ateclean:推 07/12 22:27
推 DWR:我也贊同先1,4,5，因為網頁的美觀固然重要，但先做出功能再求 07/12 22:45
推 JYHuang:看到這邊，突然想到我的學習順序是很怪異的 XD 07/12 22:49
推 adahsu:我贊成 1,2,3 ，至於 4,5 無所謂！ 07/12 23:35
→ shouea:第一階段裡面的專業，應該是plug-in喔! 07/12 23:48
推 kiloking:推 07/12 23:55
推 chrisQQ:美工版面：123、coding：145。我大概是 1 [2345]混著學… 07/13 00:05
推 yew:我是先學1,2,3 如果要接待遇不錯的通常要 4,5 07/13 00:53
推 JYHuang:1 ->3 ->4,5 ->2+ ->3+ ->3x4 XDD 07/13 01:38
推 ComicMan:大推 規劃中flash player將內建3D引擎,3D小遊戲指日可待 07/13 03:41
推 bcse:我是12453 XD 07/13 12:55
推 Kenqr:推～ 07/13 17:07
推 pttjames:大推 可是我都是用到才去學...(半路出家的人....汗) 07/13 17:50
推 zrredeye:推~ 我也是混著學 不過這篇文章可以給初學者一些方向 07/13 20:02
推 mirrorz:推！ 覺得最難的是與美感調和 07/13 22:46
推 ateclean:美感調和 有部份是天生直覺 或者要用經驗來補全 07/14 00:35
推 uice:囧rz...我是Ps、Ai、CD、Html→CSS、Flash→現在努力啃AS3… 07/14 00:41
推 a0955133:大推 我是模仿學習法說 07/14 07:35
推 senser:我倒覺得設計的的美感是最重要的 程式肯學會就會 07/14 13:45
→ senser:設計師卻很難訓練 偏偏重視的人不多 只會當成網頁美工 07/14 13:47
→ sujara:好文，不介意借放置底吧 :) 07/14 21:31
→ TonyQ:其實senser的推文反過來說也是ok的...XDXD 人各有志 07/14 22:45
推 rickybien:大推 07/15 14:47
推 edia0912:推推!! 如果當初在學也有這篇文章就好了xDD 07/16 09:22
推 iamNori:@@我只會12 3會一點 然後就跑去鑽研美術了... 07/21 11:24
※ 編輯: liaosankai 來自: 123.240.37.127 (09/19 01:44)※ 編輯: liaosankai 來自: 123.240.37.127 (09/19 01:47)
推 ptt3592:原po寫的很好耶 好文章 :) 09/23 19:48
推 kiyawork:文章把網頁的架構都明確的標定,對初學者會有很大的幫助 10/09 16:05
→ kiyawork:不過要成為網頁設計師,而不是網頁工程師~美感也是要學習 10/09 16:07
推 nicayoung:推 10/11 15:19
推 horngsh:作者真是佛心來的.. 12/10 09:14
推 Refauth:感謝～～ 02/26 13:30
推 aneyoko:T_T 初學者的疑問都豁然開朗了.. 03/17 04:13
推 magyQQ:謝謝大大的分享，讓我了解學習的方向~^^ 04/08 22:00
推 die246:這篇真的很正點 05/02 14:57
推 funkin:讓我有正確的觀念！謝謝版大的心得 05/20 20:54
推 dance1016:感恩...在網頁爬好久...早知道先來這爬的... 06/10 11:33
推 SJimi:樓主這篇對初學者真來說 獲益良多 好文 大推! 06/18 16:44
推 dream1x:大推 有看有推 07/30 00:05
推 sookgreat:這真是篇好文啊！ 推你一把！ 08/01 04:50
→ igi9532:目前算是在12打轉,但是轉沒多久就去戰程式語言了orz 08/09 21:14
推 Adamsun0306:我是14523.... 11/21 19:24
推 wody:感謝這篇 有點頭緒了 03/08 17:55
推 qwqwqww:關於架設網站行情問題~ 大家給我點建議 04/05 23:32
推 popo1080a:請問在Server第四階段提到的WebService(註7)在哪邊呢?? 06/11 02:15
推 allimontti:美感也是要學習 <== Orz 06/15 03:33
推 ian305:我只會用Dreamweaver....想走網頁設計應該不夠吼!! 06/23 23:38
推 CCSyaoran:分享才是王道那篇網站不能看了... 07/22 10:02
推 teddy7777777:非常感謝! 初學者能看到這篇文真幸運" 08/26 11:25
推 jerry030897:感謝原PO無私分享!!!!!!!!!!! 11/28 22:39
推 iiiivy:只會用Dreamweaver初心者+1 只會亂用css+js...真的該補了 12/18 17:53
推 Lucyyy:DW初學+1 QQ 太感激原PO了~~ 01/08 14:35
推 tb6342:謝謝~前面真的很好笑XD 04/15 23:48
推 panda0911:新手值得一看的文章 NICE 06/02 14:08
推 mickeyopq:新手來了 06/15 22:35
推 sldj:新手感謝高手的分享!總算有點頭目要怎樣學習了 :D 08/06 06:41
推 fdwill:如果有網頁設計師的學程(系)，還真應該放進去...如果有的話 09/04 22:51
推 ANCEE:大推 解惑了好多 09/18 09:24
推 whatai:學習過程1453 XDDD 3 10/16 01:21
推 tobywin:寫得好好唷!!!我正要開始朝CSS方向邁進XDDD 11/27 12:00
推 mathrew:1254 ......3 XDDDDD 01/29 15:10
推 jerry030897:這篇寫得很棒 02/01 21:02
推 d0506948:對我這空有志向卻無從學起的初學者來講這篇根本是曙光！ 05/22 22:14
推 abcde1028123:good 03/09 03:30
※ 編輯: liaosankai 來自: 203.203.54.193 (07/02 08:28)推 ZingYu:!! 08/04 12:09
推 GinnyVila:推推~!! 08/24 23:48
推 CIHM:感謝分享 08/25 16:20
推 jenesis: 資工畢業你底子好的話 CSS HTML Javascrip一下就搞定了啦 09/03 18:54
推 elsu6fu0:我想請問一下版大這邊提到的HTML是指HTML4嗎??? 09/05 15:27
→ elsu6fu0:有爬一下是說HTML5還有沒正式規範，所以建議開發用4研究5 09/05 15:28
→ elsu6fu0:小弟是電機畢業現在剛學這樣有建議學4還是5嗎?? 09/05 15:28
→ liaosankai:直接學HTML5就可以了 09/06 08:38
推 elsu6fu0:好的!謝謝~ 09/06 17:30
→ jenesis:他還有補間動畫 所以純CSS還要用keyframe 10/06 16:33
推 NinaMoon:謝謝指引 我有方向啦 04/17 23:50
推 easonwolf:推! 04/22 23:26
推 vi000246:我是倒著學回來的 先PHP 資料庫 再html JS 06/10 14:35
推 mollycareer:謝謝你 08/07 16:10
※ 編輯: liaosankai (114.41.254.2), 09/14/2014 11:39:45推 brian980466: 我覺得爽度最高的是JQuery，1->2->3->4or5 11/29 07:48
推 Shinpachi: 新手來朝聖 01/19 00:04
推 zoko741235: 新手朝聖 我的路線是1-45-2-3 XD js好難的感覺啊... 01/29 20:46
推 joybee: 新手推一個~~ 02/23 14:39
推 fr5411: 新手推一個！ 02/23 17:32
推 justdondoit: 朝聖一下!! 02/24 21:26
推 baliman: 不少LINK 壞了 03/02 13:42
推 k308123: 新手終於有一個方向了QQ 03/30 09:07
推 holishing: 想玩玩看的新手推! 07/10 19:34
推 yoyoyolo: 剛剛的入門新手推推 12/23 09:22
推 owentseng: 真是好分享 推 07/17 21:46
→ pizzafan: 刪那一篇 記得po圖前2h內都沒看到views統計 連零都沒寫 08/01 15:20
推 tw88: 感謝作者與推文們的分享 11/08 19:58
推 babypanda: 推 11/14 23:19
推 qwe8526545: 推一個~ 11/22 23:02
推 pizzafan: www.ptt.cc/bbs/Soft_Job/M.1480172012.A.18E.html 11/27 12:56
推 SkIllen: 推 01/24 08:04
推 s1004929: 為什麼兄弟有些球員球衣上有C？ 04/07 19:59
推 supermars: 謝謝分享，雖然看完還是霧煞煞QQ 樓上留言錯版了? 05/26 23:47
推 a000782003: 感謝分享 11/06 10:55
推 Tatum0119: 學習中 01/12 14:03
推 s66449: 推 01/17 22:49
推 crazwade: 推個 目前準備進入node.js了 02/06 20:24
推 de606430: 大推 感謝整理 02/22 10:22
推 lairx: 朝聖 04/02 04:37
推 boo1024555: 推推推！！！ 05/03 13:01
推 kevin2chi: 朝聖推 05/14 13:31
推 r9998plse: 先推一個 08/19 09:22
推 imjeffreylee: 朝聖推 好我現在剛到4了... 09/05 03:38
→ laechan: 感覺這邊有難的精深的,也有簡單到不行,初階的,文章兩極化 09/28 16:11
→ laechan: 有點不確定自己若要貼"心得"是否妥當..還是不限,都可貼? 09/28 16:12
推 gatewong: 淚推，剛開始學，網頁好有趣~ 07/02 16:24
推 achkarh: 好文 還有美術也要學習 11/11 14:54
推 joeyhsua: 推一波優質文 12/02 05:36