作者liaosankai (低温烘焙)
看板Web_Design
标题[心得]给网页初心者一篇文章
时间Sat Jul 12 21:37:40 2008
或许你也是站在小河旁边，看着逆流而上的小鱼儿，然後心所感悟
於是立下了弘愿，奋不顾身的跳下河流，探出已快灭顶的头大喊：
「我要成为网页设计师！!咕噜咕噜~~..............」
很好，你的这句话打动了我的腐朽的心灵，开启我的宅门
看来我只好把我毕生所学来误人子弟了(一一+)
俗话说的好，师父引进门，徒弟来灭门
希望有朝一日能在我背上看见你的蓝波刀
---------------------------------------------------------------
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
1F：推 carlcarl:推一个! 07/12 22:12
2F：→ TonyQ:四跟五应该要先打底子,不然1,2,3做起来也会很没成就感. 07/12 22:13
3F：→ TonyQ:我的建议是 1,4,5 是网页的核先学 , 2,3 可算加分用. 07/12 22:13
4F：→ TonyQ:另外初学者可以不用把规范当圣经遵奉,但是一定要了解有这样 07/12 22:14
5F：→ TonyQ:的规范 , 在需要时(ex.无障碍or力求自己精进）时再努力充实. 07/12 22:14
6F：→ TonyQ:如果太苛求规范而且因刚入门对各项基础都不熟练而窒碍难行, 07/12 22:15
7F：→ TonyQ:那就有点失去学习的原意了. 07/12 22:15
8F：→ TonyQ:我自己的经验真的完全了解哪些可以用跟哪些不能用,大概离我 07/12 22:16
9F：→ TonyQ:学网页语法开始写网页後隔了起码一年吧,css也是隔了半年後 07/12 22:17
10F：→ TonyQ:才看,虽然说这些东西大多属於学就会 查表就ok的东西,但对 07/12 22:17
11F：→ TonyQ:全然陌生的人来讲 , 就好像完全不会讲英文要靠查字典跟外国 07/12 22:17
12F：→ TonyQ:人沟通一样,会绑手榜脚的, 以上是我自己给新鲜人的建议 XD 07/12 22:18
13F：→ TonyQ:当然 跟学习语言一样, 环境很重要 ,有人可以问是很幸福的:p 07/12 22:19
14F：推 ateclean:推 07/12 22:27
15F：推 DWR:我也赞同先1,4,5，因为网页的美观固然重要，但先做出功能再求 07/12 22:45
16F：推 JYHuang:看到这边，突然想到我的学习顺序是很怪异的 XD 07/12 22:49
17F：推 adahsu:我赞成 1,2,3 ，至於 4,5 无所谓！ 07/12 23:35
18F：→ shouea:第一阶段里面的专业，应该是plug-in喔! 07/12 23:48
19F：推 kiloking:推 07/12 23:55
20F：推 chrisQQ:美工版面：123、coding：145。我大概是 1 [2345]混着学… 07/13 00:05
21F：推 yew:我是先学1,2,3 如果要接待遇不错的通常要 4,5 07/13 00:53
22F：推 JYHuang:1 ->3 ->4,5 ->2+ ->3+ ->3x4 XDD 07/13 01:38
23F：推 ComicMan:大推 规划中flash player将内建3D引擎,3D小游戏指日可待 07/13 03:41
24F：推 bcse:我是12453 XD 07/13 12:55
25F：推 Kenqr:推～ 07/13 17:07
26F：推 pttjames:大推 可是我都是用到才去学...(半路出家的人....汗) 07/13 17:50
27F：推 zrredeye:推~ 我也是混着学 不过这篇文章可以给初学者一些方向 07/13 20:02
28F：推 mirrorz:推！ 觉得最难的是与美感调和 07/13 22:46
29F：推 ateclean:美感调和 有部份是天生直觉 或者要用经验来补全 07/14 00:35
30F：推 uice:囧rz...我是Ps、Ai、CD、Html→CSS、Flash→现在努力啃AS3… 07/14 00:41
31F：推 a0955133:大推 我是模仿学习法说 07/14 07:35
32F：推 senser:我倒觉得设计的的美感是最重要的 程式肯学会就会 07/14 13:45
33F：→ senser:设计师却很难训练 偏偏重视的人不多 只会当成网页美工 07/14 13:47
34F：→ sujara:好文，不介意借放置底吧 :) 07/14 21:31
35F：→ TonyQ:其实senser的推文反过来说也是ok的...XDXD 人各有志 07/14 22:45
36F：推 rickybien:大推 07/15 14:47
37F：推 edia0912:推推!! 如果当初在学也有这篇文章就好了xDD 07/16 09:22
38F：推 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)
39F：推 ptt3592:原po写的很好耶 好文章 :) 09/23 19:48
41F：推 kiyawork:文章把网页的架构都明确的标定,对初学者会有很大的帮助 10/09 16:05
42F：→ kiyawork:不过要成为网页设计师,而不是网页工程师~美感也是要学习 10/09 16:07
43F：推 nicayoung:推 10/11 15:19
44F：推 horngsh:作者真是佛心来的.. 12/10 09:14
45F：推 Refauth:感谢～～ 02/26 13:30
46F：推 aneyoko:T_T 初学者的疑问都豁然开朗了.. 03/17 04:13
47F：推 magyQQ:谢谢大大的分享，让我了解学习的方向~^^ 04/08 22:00
48F：推 die246:这篇真的很正点 05/02 14:57
49F：推 funkin:让我有正确的观念！谢谢版大的心得 05/20 20:54
50F：推 dance1016:感恩...在网页爬好久...早知道先来这爬的... 06/10 11:33
51F：推 SJimi:楼主这篇对初学者真来说 获益良多 好文 大推! 06/18 16:44
52F：推 dream1x:大推 有看有推 07/30 00:05
53F：推 sookgreat:这真是篇好文啊！ 推你一把！ 08/01 04:50
54F：→ igi9532:目前算是在12打转,但是转没多久就去战程式语言了orz 08/09 21:14
55F：推 Adamsun0306:我是14523.... 11/21 19:24
56F：推 wody:感谢这篇 有点头绪了 03/08 17:55
57F：推 qwqwqww:关於架设网站行情问题~ 大家给我点建议 04/05 23:32
58F：推 popo1080a:请问在Server第四阶段提到的WebService(注7)在哪边呢?? 06/11 02:15
59F：推 allimontti:美感也是要学习 <== Orz 06/15 03:33
60F：推 ian305:我只会用Dreamweaver....想走网页设计应该不够吼!! 06/23 23:38
61F：推 CCSyaoran:分享才是王道那篇网站不能看了... 07/22 10:02
62F：推 teddy7777777:非常感谢! 初学者能看到这篇文真幸运" 08/26 11:25
63F：推 jerry030897:感谢原PO无私分享!!!!!!!!!!! 11/28 22:39
64F：推 iiiivy:只会用Dreamweaver初心者+1 只会乱用css+js...真的该补了 12/18 17:53
65F：推 Lucyyy:DW初学+1 QQ 太感激原PO了~~ 01/08 14:35
66F：推 tb6342:谢谢~前面真的很好笑XD 04/15 23:48
67F：推 panda0911:新手值得一看的文章 NICE 06/02 14:08
68F：推 mickeyopq:新手来了 06/15 22:35
69F：推 sldj:新手感谢高手的分享!总算有点头目要怎样学习了 :D 08/06 06:41
70F：推 fdwill:如果有网页设计师的学程(系)，还真应该放进去...如果有的话 09/04 22:51
71F：推 ANCEE:大推 解惑了好多 09/18 09:24
72F：推 whatai:学习过程1453 XDDD 3 10/16 01:21
73F：推 tobywin:写得好好唷!!!我正要开始朝CSS方向迈进XDDD 11/27 12:00
74F：推 mathrew:1254 ......3 XDDDDD 01/29 15:10
75F：推 jerry030897:这篇写得很棒 02/01 21:02
76F：推 d0506948:对我这空有志向却无从学起的初学者来讲这篇根本是曙光！ 05/22 22:14
77F：推 abcde1028123:good 03/09 03:30
※ 编辑: liaosankai 来自: 203.203.54.193 (07/02 08:28)
78F：推 ZingYu:!! 08/04 12:09
79F：推 GinnyVila:推推~!! 08/24 23:48
80F：推 CIHM:感谢分享 08/25 16:20
81F：推 jenesis: 资工毕业你底子好的话 CSS HTML Javascrip一下就搞定了啦 09/03 18:54
82F：推 elsu6fu0:我想请问一下版大这边提到的HTML是指HTML4吗??? 09/05 15:27
83F：→ elsu6fu0:有爬一下是说HTML5还有没正式规范，所以建议开发用4研究5 09/05 15:28
84F：→ elsu6fu0:小弟是电机毕业现在刚学这样有建议学4还是5吗?? 09/05 15:28
85F：→ liaosankai:直接学HTML5就可以了 09/06 08:38
86F：推 elsu6fu0:好的!谢谢~ 09/06 17:30
87F：→ jenesis:他还有补间动画 所以纯CSS还要用keyframe 10/06 16:33
88F：推 NinaMoon:谢谢指引 我有方向啦 04/17 23:50
89F：推 easonwolf:推! 04/22 23:26
90F：推 vi000246:我是倒着学回来的 先PHP 资料库 再html JS 06/10 14:35
91F：推 mollycareer:谢谢你 08/07 16:10
※ 编辑: liaosankai (114.41.254.2), 09/14/2014 11:39:45
92F：推 brian980466: 我觉得爽度最高的是JQuery，1->2->3->4or5 11/29 07:48
93F：推 Shinpachi: 新手来朝圣 01/19 00:04
94F：推 zoko741235: 新手朝圣 我的路线是1-45-2-3 XD js好难的感觉啊... 01/29 20:46
95F：推 joybee: 新手推一个~~ 02/23 14:39
96F：推 fr5411: 新手推一个！ 02/23 17:32
97F：推 justdondoit: 朝圣一下!! 02/24 21:26
98F：推 baliman: 不少LINK 坏了 03/02 13:42
99F：推 k308123: 新手终於有一个方向了QQ 03/30 09:07
100F：推 holishing: 想玩玩看的新手推! 07/10 19:34
101F：推 yoyoyolo: 刚刚的入门新手推推 12/23 09:22
102F：推 owentseng: 真是好分享 推 07/17 21:46
103F：→ pizzafan: 删那一篇 记得po图前2h内都没看到views统计 连零都没写 08/01 15:20
104F：推 tw88: 感谢作者与推文们的分享 11/08 19:58
105F：推 babypanda: 推 11/14 23:19
106F：推 qwe8526545: 推一个~ 11/22 23:02
107F：推 pizzafan: webptt.com/cn.aspx?n=bbs/Soft_Job/M.1480172012.A.18E.html 11/27 12:56
108F：推 SkIllen: 推 01/24 08:04
109F：推 s1004929: 为什麽兄弟有些球员球衣上有C？ 04/07 19:59
110F：推 supermars: 谢谢分享，虽然看完还是雾煞煞QQ 楼上留言错版了? 05/26 23:47
111F：推 a000782003: 感谢分享 11/06 10:55
112F：推 Tatum0119: 学习中 01/12 14:03
113F：推 s66449: 推 01/17 22:49
114F：推 crazwade: 推个 目前准备进入node.js了 02/06 20:24
115F：推 de606430: 大推 感谢整理 02/22 10:22
116F：推 lairx: 朝圣 04/02 04:37
117F：推 boo1024555: 推推推！！！ 05/03 13:01
118F：推 kevin2chi: 朝圣推 05/14 13:31
119F：推 r9998plse: 先推一个 08/19 09:22
120F：推 imjeffreylee: 朝圣推 好我现在刚到4了... 09/05 03:38
121F：→ laechan: 感觉这边有难的精深的,也有简单到不行,初阶的,文章两极化 09/28 16:11
122F：→ laechan: 有点不确定自己若要贴"心得"是否妥当..还是不限,都可贴? 09/28 16:12
123F：推 gatewong: 泪推，刚开始学，网页好有趣~ 07/02 16:24
124F：推 achkarh: 好文 还有美术也要学习 11/11 14:54
125F：推 joeyhsua: 推一波优质文 12/02 05:36