PTT數位生活區 / Web_Design

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

看板Web_Design作者 (低溫烘焙)時間16年前 (2008/07/12 21:37), 10年前編輯推噓99(99推 0噓 26→)
留言125則, 102人參與, 3年前最新討論串1/2 (看更多)
或許你也是站在小河旁邊，看著逆流而上的小魚兒，然後心所感悟 於是立下了弘願，奮不顧身的跳下河流，探出已快滅頂的頭大喊： 「我要成為網頁設計師！!咕嚕咕嚕~~..............」 很好，你的這句話打動了我的腐朽的心靈，開啟我的宅門 看來我只好把我畢生所學來誤人子弟了(一一+) 俗話說的好，師父引進門，徒弟來滅門 希望有朝一日能在我背上看見你的藍波刀 --------------------------------------------------------------- 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
推
07/12 22:12, , 1F
推一個!
07/12 22:12, 1F
→
07/12 22:13, , 2F
四跟五應該要先打底子,不然1,2,3做起來也會很沒成就感.
07/12 22:13, 2F
→
07/12 22:13, , 3F
我的建議是 1,4,5 是網頁的核先學 , 2,3 可算加分用.
07/12 22:13, 3F
→
07/12 22:14, , 4F
另外初學者可以不用把規範當聖經遵奉,但是一定要了解有這樣
07/12 22:14, 4F
→
07/12 22:14, , 5F
的規範 , 在需要時(ex.無障礙or力求自己精進）時再努力充實.
07/12 22:14, 5F
→
07/12 22:15, , 6F
如果太苛求規範而且因剛入門對各項基礎都不熟練而窒礙難行,
07/12 22:15, 6F
→
07/12 22:15, , 7F
那就有點失去學習的原意了.
07/12 22:15, 7F
→
07/12 22:16, , 8F
我自己的經驗真的完全了解哪些可以用跟哪些不能用,大概離我
07/12 22:16, 8F
→
07/12 22:17, , 9F
學網頁語法開始寫網頁後隔了起碼一年吧,css也是隔了半年後
07/12 22:17, 9F
→
07/12 22:17, , 10F
才看,雖然說這些東西大多屬於學就會 查表就ok的東西,但對
07/12 22:17, 10F
→
07/12 22:17, , 11F
全然陌生的人來講 , 就好像完全不會講英文要靠查字典跟外國
07/12 22:17, 11F
→
07/12 22:18, , 12F
人溝通一樣,會綁手榜腳的, 以上是我自己給新鮮人的建議 XD
07/12 22:18, 12F
→
07/12 22:19, , 13F
當然 跟學習語言一樣, 環境很重要 ,有人可以問是很幸福的:p
07/12 22:19, 13F
推
07/12 22:27, , 14F
推
07/12 22:27, 14F
推
07/12 22:45, , 15F
我也贊同先1,4,5，因為網頁的美觀固然重要，但先做出功能再求
07/12 22:45, 15F
推
07/12 22:49, , 16F
看到這邊，突然想到我的學習順序是很怪異的 XD
07/12 22:49, 16F
推
07/12 23:35, , 17F
我贊成 1,2,3 ，至於 4,5 無所謂！
07/12 23:35, 17F
→
07/12 23:48, , 18F
第一階段裡面的專業，應該是plug-in喔!
07/12 23:48, 18F
推
07/12 23:55, , 19F
推
07/12 23:55, 19F
推
07/13 00:05, , 20F
美工版面：123、coding：145。我大概是 1 [2345]混著學…
07/13 00:05, 20F
推
07/13 00:53, , 21F
我是先學1,2,3 如果要接待遇不錯的通常要 4,5
07/13 00:53, 21F
推
07/13 01:38, , 22F
1 ->3 ->4,5 ->2+ ->3+ ->3x4 XDD
07/13 01:38, 22F
推
07/13 03:41, , 23F
大推 規劃中flash player將內建3D引擎,3D小遊戲指日可待
07/13 03:41, 23F
推
07/13 12:55, , 24F
我是12453 XD
07/13 12:55, 24F
推
07/13 17:07, , 25F
推～
07/13 17:07, 25F
推
07/13 17:50, , 26F
大推 可是我都是用到才去學...(半路出家的人....汗)
07/13 17:50, 26F
推
07/13 20:02, , 27F
推~ 我也是混著學 不過這篇文章可以給初學者一些方向
07/13 20:02, 27F
推
07/13 22:46, , 28F
推！ 覺得最難的是與美感調和
07/13 22:46, 28F
推
07/14 00:35, , 29F
美感調和 有部份是天生直覺 或者要用經驗來補全
07/14 00:35, 29F
推
07/14 00:41, , 30F
囧rz...我是Ps、Ai、CD、Html→CSS、Flash→現在努力啃AS3…
07/14 00:41, 30F
推
07/14 07:35, , 31F
大推 我是模仿學習法說
07/14 07:35, 31F
推
07/14 13:45, , 32F
我倒覺得設計的的美感是最重要的 程式肯學會就會
07/14 13:45, 32F
→
07/14 13:47, , 33F
設計師卻很難訓練 偏偏重視的人不多 只會當成網頁美工
07/14 13:47, 33F
→
07/14 21:31, , 34F
好文，不介意借放置底吧 :)
07/14 21:31, 34F
→
07/14 22:45, , 35F
其實senser的推文反過來說也是ok的...XDXD 人各有志
07/14 22:45, 35F
推
07/15 14:47, , 36F
大推
07/15 14:47, 36F
推
07/16 09:22, , 37F
推推!! 如果當初在學也有這篇文章就好了xDD
07/16 09:22, 37F
推
07/21 11:24, , 38F
@@我只會12 3會一點 然後就跑去鑽研美術了...
07/21 11:24, 38F
※ 編輯: liaosankai 來自: 123.240.37.127 (09/19 01:44) ※ 編輯: liaosankai 來自: 123.240.37.127 (09/19 01:47)
還有 48 則推文
還有 1 段內文
→
10/06 16:33, , 87F
他還有補間動畫 所以純CSS還要用keyframe
10/06 16:33, 87F
推
04/17 23:50, , 88F
謝謝指引 我有方向啦
04/17 23:50, 88F
推
04/22 23:26, , 89F
推!
04/22 23:26, 89F
推
06/10 14:35, , 90F
我是倒著學回來的 先PHP 資料庫 再html JS
06/10 14:35, 90F
推
08/07 16:10, , 91F
謝謝你
08/07 16:10, 91F
※ 編輯: liaosankai (114.41.254.2), 09/14/2014 11:39:45
推
11/29 07:48, , 92F
我覺得爽度最高的是JQuery，1->2->3->4or5
11/29 07:48, 92F
推
01/19 00:04, , 93F
新手來朝聖
01/19 00:04, 93F
推
01/29 20:46, , 94F
新手朝聖 我的路線是1-45-2-3 XD js好難的感覺啊...
01/29 20:46, 94F
推
02/23 14:39, , 95F
新手推一個~~
02/23 14:39, 95F
推
02/23 17:32, , 96F
新手推一個！
02/23 17:32, 96F
推
02/24 21:26, , 97F
朝聖一下!!
02/24 21:26, 97F
推
03/02 13:42, , 98F
不少LINK 壞了
03/02 13:42, 98F
推
03/30 09:07, , 99F
新手終於有一個方向了QQ
03/30 09:07, 99F
推
07/10 19:34, , 100F
想玩玩看的新手推!
07/10 19:34, 100F
推
12/23 09:22, , 101F
剛剛的入門新手推推
12/23 09:22, 101F
推
07/17 21:46, , 102F
真是好分享 推
07/17 21:46, 102F
→
08/01 15:20, , 103F
刪那一篇 記得po圖前2h內都沒看到views統計 連零都沒寫
08/01 15:20, 103F
推
11/08 19:58, , 104F
感謝作者與推文們的分享
11/08 19:58, 104F
推
11/14 23:19, , 105F
推
11/14 23:19, 105F
推
11/22 23:02, , 106F
推一個~
11/22 23:02, 106F
推
11/27 12:56, , 107F
www.ptt.cc/bbs/Soft_Job/M.1480172012.A.18E.html
11/27 12:56, 107F
推
01/24 08:04, , 108F
推
01/24 08:04, 108F
推
04/07 19:59, , 109F
為什麼兄弟有些球員球衣上有C？
04/07 19:59, 109F
推
05/26 23:47, , 110F
謝謝分享，雖然看完還是霧煞煞QQ 樓上留言錯版了?
05/26 23:47, 110F
推
11/06 10:55, , 111F
感謝分享
11/06 10:55, 111F
推
01/12 14:03, , 112F
學習中
01/12 14:03, 112F
推
01/17 22:49, , 113F
推
01/17 22:49, 113F
推
02/06 20:24, , 114F
推個 目前準備進入node.js了
02/06 20:24, 114F
推
02/22 10:22, , 115F
大推 感謝整理
02/22 10:22, 115F
推
04/02 04:37, , 116F
朝聖
04/02 04:37, 116F
推
05/03 13:01, , 117F
推推推！！！
05/03 13:01, 117F
推
05/14 13:31, , 118F
朝聖推
05/14 13:31, 118F
推
08/19 09:22, , 119F
先推一個
08/19 09:22, 119F
推
09/05 03:38, , 120F
朝聖推 好我現在剛到4了...
09/05 03:38, 120F
→
09/28 16:11, , 121F
感覺這邊有難的精深的,也有簡單到不行,初階的,文章兩極化
09/28 16:11, 121F
→
09/28 16:12, , 122F
有點不確定自己若要貼"心得"是否妥當..還是不限,都可貼?
09/28 16:12, 122F
推
07/02 16:24, 3年前 , 123F
淚推，剛開始學，網頁好有趣~
07/02 16:24, 123F
推
11/11 14:54, 3年前 , 124F
好文 還有美術也要學習
11/11 14:54, 124F
推
12/02 05:36, 3年前 , 125F
推一波優質文
12/02 05:36, 125F
‣ 更多 liaosankai 的文章
文章代碼(AID): #18UBEem- (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 liaosankai 的文章
文章代碼(AID): #18UBEem- (Web_Design)