前言：一個業(yè)余者的網(wǎng)頁設(shè)計經(jīng)歷/體驗
學(xué)網(wǎng)頁設(shè)計大概是上大學(xué)那會兒（不到2000年）吧德召，記得一上手就是Dreamweaver堂飞，是學(xué)Flash的時候順帶著學(xué)的。反正“所見即所得”，也就學(xué)著玩唄。那時候的流行的方法主要是表格定位歹茶，先Photoshop做好設(shè)計，然后切換ImageReady切片，輸出HTML再用Dreamweaver打開編輯惊豺。記得當(dāng)時老是會錯位燎孟，很討厭。
CSS也比較早就出現(xiàn)了扮叨，主要也是輔助做版式缤弦，大部分的工作還是在Dreamweaver中“所見即所得”來完成。<div>還是個比較稀罕的玩意彻磁，大部分教程中都沒有建議用<div>來定位，現(xiàn)在想來原因可能是當(dāng)時的主流瀏覽器對<div>的支持還不完善或者服務(wù)器開銷有點大的原因吧狸捅。
服務(wù)器端開始出現(xiàn)PHP了衷蜓，但主流還是ASP。
在QUT那幾年尘喝，因為Communication Design課程的原因磁浇，需要做Flash+PHP的交互。PHP看了一下跟編程似得朽褪，就頭大了置吓。當(dāng)時的作業(yè)其實是找同學(xué)幫忙完成的，我做Flash部分缔赠，交互都交給一個跨專業(yè)過來修課的新加坡人了（他主修計算機圖形圖像的）衍锚。這時候其實CSS+PHP的主流地位就已經(jīng)奠定了，只是我還不是很有概念嗤堰。
等到2012年要做動畫教學(xué)視頻庫的時候戴质，才真正下定決心（痛定思痛）開始研究PHP，因為需要去從頭開始建一個帶數(shù)據(jù)庫交互功能的網(wǎng)站踢匣，純HTML肯定是不夠用的了告匠。很頭大，但必須咬牙啃离唬。
看了好幾個星期的幫助文檔后专，最后還是放棄手寫PHP，轉(zhuǎn)而借助PHP 框架來曲線救國输莺。PHP環(huán)境的搭建選擇的是PHPNow戚哎，而框架則選擇用CodeIgniter。CI是國外比較流行的PHP框架模闲，國內(nèi)其實貌似用ThinkPHP的比較多建瘫，但我覺得ThinkPHP貌似更復(fù)雜，所以挑了個簡單點的尸折。
來自百度百科：
CodeIgniter是一個簡單快速的PHP MVC框架啰脚，它為組織提供了足夠的自由支持，允許開發(fā)人員更迅速地工作。
自由意味著使用CodeIgniter時橄浓，您不必以某種方式命名數(shù)據(jù)庫表粒梦，也不必根據(jù)表命名模型。這使CodeIgniter成為重構(gòu)遺留PHP應(yīng)用程序的理想選擇荸实，在此類遺留應(yīng)用程序中匀们，可能存在需要移植的所有奇怪的結(jié)構(gòu)。
CodeIgniter不需要大量代碼准给，也不會要求您插入類似于PEAR的龐大的庫泄朴。它在PHP4和PHP5中表現(xiàn)同樣良好，允許您創(chuàng)建可移植的應(yīng)用程序露氮。最后祖灰，您不必使用模板引擎來創(chuàng)建視圖，只需沿用舊式的HTML和PHP即可畔规。
做的時候還是滿糾結(jié)局扶，CI寫起來跟編程也蠻像的，加上還要從頭開始理解MYSQL語句叁扫。好在之前搞過一段Maya的MEL腳本三妈，玩Unity3D的時候又寫過一點點C#，勉強能夠跟上吧莫绣。HTML前端這時候已經(jīng)進化到較少使用<table>來定位了畴蒲，改為大量采用CSS+DIV結(jié)構(gòu)兔综。
2015年10月，剛剛通過Comfirmation Colloquium的我發(fā)現(xiàn)后續(xù)的研究可能需要用到數(shù)據(jù)庫涧窒，加上代購業(yè)務(wù)上也需要有個在線的記錄系統(tǒng)，所以就動念做個網(wǎng)站锭亏，權(quán)作練習(xí)PHP+MYSQL纠吴。一上手還真是不習(xí)慣慧瘤，2008年積累的那一點點知識居然都忘光了，只好從頭開始看視頻锅减。好在撿起來還是比新學(xué)習(xí)要快糖儡，至少可以少走很多彎路。比如現(xiàn)在知道了可以用set_value()函數(shù)來直接獲得表單提交的變量怔匣，而不用頻繁去get或者post。
與08年的視頻教學(xué)庫相比金闽，這次做網(wǎng)站完全沒有用到Dreamweaver（部分原因也是這次的網(wǎng)站不需要太多視覺設(shè)計的東西，簡單能用就行）代芜，所有代碼都是直接在Notepad++中寫，而且view中能用CI函數(shù)的就盡量不直接寫html代碼钞速，比如anchor()嫡秕、add_row()、echo $this->table->generate();等等。
網(wǎng)站空間上屠升，08年的時候用的國內(nèi)的“九零起航”最便宜的那款，這次選擇的是“BYET”的免費空間汇在，反而更大更方便脏答，沒有被墻，速度也還行阿蝶。整個網(wǎng)站制作上花了將近2周吧黄绩，這個周期比之前還是短了很多，如果馬上要再去做一個網(wǎng)站爽丹，我相信應(yīng)該也不會很慢粤蝎。
對網(wǎng)頁制作相關(guān)技術(shù)/工具的分析與介紹
HTML+Browser：基礎(chǔ)平臺的建立
有了瀏覽器之后才有HTML。HTML是超級文本標(biāo)記語言初澎，其本質(zhì)上的功能其實是網(wǎng)頁設(shè)計者的輸入工作，用相對較簡單的標(biāo)記語言來寫HTML灸眼，然后交給瀏覽器將其翻譯成我們所見到的頁面。HTML和瀏覽器一起霉囚，起到了一個標(biāo)準(zhǔn)化的作用匕积，不管客戶使用的是什么操作系統(tǒng)，只要通過標(biāo)準(zhǔn)的瀏覽器來翻譯符合HTML標(biāo)準(zhǔn)的text闪唆，就能顯示出幾乎完全一致的結(jié)果頁面。
我這里說“幾乎”悄蕾，是因為早期不同瀏覽器對HTML的解釋結(jié)果會略有差異。而這種“差異”帆调，給當(dāng)時的網(wǎng)頁制作者帶來了一個麻煩：兼容性番刊。HTML必須在不同瀏覽器的不同版本上測試無誤才能上線，而且對新技術(shù)的采用（比如CSS+DIV）顯需要非常的謹(jǐn)慎芹务。
可以說枣抱，瀏覽器這一工具（toolkit）通過引入標(biāo)準(zhǔn)（ standardization）的方式給網(wǎng)頁制作這一創(chuàng)作（creation）帶來促進（facilitation）的同時，也帶來了新的限制（limitation）（我稱這種限制為功能可見性：affordance）沃但。
CSS：對HTML外觀的補充（supplement）
單純HTML的功能還是蠻有限的宵晚。在排版方面，HTML標(biāo)記對文字的格式化基本上沒問題淤刃，但版式設(shè)計方面就很弱逸贾。早期用<table>來做其實是無奈之舉津滞，也很受限制灼伤。對于“網(wǎng)頁版式”這一項creation來講，“表格化排版”這一創(chuàng)意路徑帶來的限制遠(yuǎn)大于促進撞鹉，雖然“切片（slicing）”這一個技術(shù)（ImageReady和DW同門的Fireworks都主打slicing功能）大大的促進了“表格化排版”颖侄，但它最終還是被“CSS+DIV”所完全取代。
“CSS+DIV”是從CSS發(fā)展而來的孝鹊，CSS一開始是為了簡化HTML的格式功能（format）展蒂，但配合<div>標(biāo)簽就能實現(xiàn)幾乎完全不受限制的版式功能（layout）。
JavaScript：對HTML功能的外掛（add-on）
單純的HTML并不具備太多的交互功能皇钞，純粹是一個用來展示頁面的工具松捉。HTML原生標(biāo)簽應(yīng)該只有<form>能夠有一點點交互功能吧馆里。但隨著互聯(lián)網(wǎng)的發(fā)展，用戶有時候也需要在網(wǎng)頁上添加一些小功能丙者，于是JavaScript被設(shè)計了出來营密。
來自百度百科：
JavaScript是一種直譯式腳本語言，是一種動態(tài)類型纷捞、弱類型被去、基于原型的語言，內(nèi)置支持類型糜值。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分病往，廣泛用于客戶端的腳本語言骄瓣，最早是在HTML網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能叠穆。
在1995年時臼膏，由Netscape公司的Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計實現(xiàn)而成嚷硫。因為Netscape與Sun合作始鱼，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript起暮。
我傾向于把JS看做是HTML的外掛（add-on）会烙，它雖然被寫在HTML文檔中，但卻是被非常生硬的插入HTML代碼的纸厉，瀏覽器必須同時具備解釋HTML和解釋JS的功能五嫂，才能正確顯示網(wǎng)頁。相比較而言躯枢，CSS對HTML的補充更為自然槐臀，JS只能說是勉勉強強，同時也給網(wǎng)頁帶來了很多問題败匹。這一toolset的命運我認(rèn)為應(yīng)該和“表格化排版”類似，最后會被更好的方案所取代舔哪。
PHP+MYSQL：對HTML功能的擴展（expansion）
原生HTML是靜態(tài)的（static）槽棍，而PHP是動態(tài)的（dynamic）。之所以對動態(tài)網(wǎng)頁產(chǎn)生需求缆巧，是因為需要被用來展示在網(wǎng)頁上的內(nèi)容不僅其信息量越來越大豌拙，而且還處于不斷更新的狀態(tài)按傅。而動態(tài)頁面較之靜態(tài)頁面的最大優(yōu)勢，比如新聞網(wǎng)頁唯绍，如果采取靜態(tài)方案，每則新聞都要手動制作一個頁面惜纸，且沒添加一個新頁面绝骚，導(dǎo)航頁都要進行修改皮壁。但如果采取動態(tài)方案哪审，則可能一次性寫不超過5個PHP就能實現(xiàn)同樣的結(jié)果，省時省力滴须。
來自百度百科：
PHP（超文本預(yù)處理器）是一種通用開源腳本語言叽奥。語法吸收了C語言、Java和Perl的特點魔市，利于學(xué)習(xí)，使用廣泛君丁，主要適用于Web開發(fā)領(lǐng)域将宪。PHP獨特的語法混合了C、Java印蔗、Perl以及PHP自創(chuàng)的語法丑勤。它可以比CGI或者Perl更快速地執(zhí)行動態(tài)網(wǎng)頁。用PHP做出的動態(tài)頁面與其他的編程語言相比除呵，PHP是將程序嵌入到HTML文檔中去執(zhí)行爪喘，執(zhí)行效率比完全生成HTML標(biāo)記的CGI要高許多；PHP還可以執(zhí)行編譯后代碼泛豪，編譯可以達到加密和優(yōu)化代碼運行侦鹏，使代碼運行更快略水。
PHP是在服務(wù)器端對文檔（包括.html和.php文檔）進行解釋，生成針對特定終端的HTML頁面再反饋到用戶的瀏覽器慎璧。這是一個對信息進行自動化（automation）處理的過程跨释，而原生HTML僅僅是直接發(fā)送信息。從百度百科的解釋可以看出岁疼，PHP不是第一個缆娃，也不是唯一一個用來做這項工作的語言瑰排，只是PHP最終變成了標(biāo)準(zhǔn)凶伙，笑到了最后而已它碎。回顧當(dāng)時傻挂，它的優(yōu)勢在于“更快”挖息、“更方便”。而著眼現(xiàn)在绪抛，它的最大優(yōu)勢我認(rèn)為應(yīng)該是它已經(jīng)成為了標(biāo)準(zhǔn)电禀，且功能上沒有嚴(yán)重缺陷。
MYSQL自然不是網(wǎng)頁獨有的東西症副，對于信息的儲存和處理政基，使用數(shù)據(jù)庫是最好的選擇沮明。但原生HTML是不能處理數(shù)據(jù)庫的，這就需要PHP的幫助了酱畅。在這項工作上摧扇，PHP起到了橋（bridge）的作用挚歧。
原生PHP調(diào)用MYSQL的方式是這樣的：
$dbhost = '127.0.0.1';
$dbuser = 'mysql_user';
$dbpass = 'mysql_password';
$dbname = 'mysql_databaseName';
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error with MySQL connection');
mysql_query("SET NAMES 'utf8'");
mysql_select_db($dbname);
$sql = "SELECT COUNT(*) as total FROM `FileList` WHERE `class` = 0;";
$result = mysql_query($sql) or die('MySQL query error');
while($row = mysql_fetch_array($result)){
echo $row['name'];
}
可以看出來是直接把SQL語句寫到$sql中然后通過mysql_query()來調(diào)用滑负，這要求使用者完全了解如何使用MYSQL才可以用含，且必須在執(zhí)行PHP頁面時才能驗證SQL語句是否正確（當(dāng)然也可以在PHPMyAdmin中驗證好語句再復(fù)制過來）帮匾。PHP從4開始提供了一些SQL函數(shù)瘟斜，但依然不夠方便。
CodeIgniter：對PHP和HTML的輔助（facilitation）
CI是PHP框架虽惭，所以CI并不能實現(xiàn)PHP不能實現(xiàn)的功能蛇尚，它只是讓使用者更方便的寫PHP。
CI提供輔助的方式依然是將PHP和HTML標(biāo)準(zhǔn)化（standardization）匆笤。CI文件的后綴同樣是.php谱邪，所以它其實就是PHP虾标，只不過是按照MVC規(guī)范化之后的PHP。
來自百度百科：
MVC全名是Model View Controller傀蚌，是模型（model）－視圖（view）－控制器（controller）的縮寫蘸吓，一種軟件設(shè)計典范，用一種業(yè)務(wù)邏輯箩艺、數(shù)據(jù)宪萄、界面顯示分離的方法組織代碼拜英，將業(yè)務(wù)邏輯聚集到一個部件里面，在改進和個性化定制界面及用戶交互的同時虫给，不需要重新編寫業(yè)務(wù)邏輯。MVC被獨特的發(fā)展起來用于映射傳統(tǒng)的輸入缠黍、處理和輸出功能在一個邏輯的圖形化用戶界面的結(jié)構(gòu)中药蜻。
這個規(guī)范來源于軟件設(shè)計領(lǐng)域的多年經(jīng)驗積累（當(dāng)然，網(wǎng)頁設(shè)計與軟件設(shè)計其實從根本上來說是一致的）蒿往。對于程序員出身的用戶來說湿弦，這個規(guī)范的邏輯是不言而喻的颊埃，但對于從寫HTML起步的網(wǎng)頁設(shè)計員（比如我自己）來說，一開始感受到不是便利饥漫，而是限制罗标。
PS：我在開始寫MEL腳本的時候是完全沒有編程概念的，甚至覺得使用function()都是多此一舉的麻煩彻消。直到在用C#寫Unity腳本時才感受到程序結(jié)構(gòu)的重要性宾尚⌒怀海可惜的是，編程的入門門檻太高牛郑，我至今還沒能摸到編程結(jié)構(gòu)的門檻敬鬓。主要原因也是我之前一直寫的東西都是些小的不能再小的腳本灶似，MEL是基于Maya運行的，C#是基于Unity運行的希痴，壓根不能算程序砌创。我倒是希望能夠?qū)W習(xí)一門程序語言來著，可惜本科Basic都差點不及格的說刽辙。
經(jīng)歷過一個熟悉過程之后甲献，用戶才會真正體會到便捷性。比如上述PHP查詢MYSQL數(shù)據(jù)庫的語句慨灭，在CI中就變成這樣：
$this->load->database('database');
$this->db->where('name', $name);
$query = $this->get($table);
return $query->result();
而對數(shù)據(jù)庫的設(shè)置則干脆變成了專門的config文件夾下database.php中對所需參數(shù)（4個左右）的填寫氧骤。
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
'dsn' => '',
'hostname' => '', //需要填寫的參數(shù)1
'username' => '', //需要填寫的參數(shù)2
'password' => '', //需要填寫的參數(shù)3
'database' => '', //需要填寫的參數(shù)4
'dbdriver' => 'mysql',
'dbprefix' => '',
'pconnect' => FALSE,
'db_debug' => (ENVIRONMENT !== 'production'),
'cache_on' => FALSE,
'cachedir' => '',
'char_set' => 'utf8',
'dbcollat' => 'utf8_general_ci',
'swap_pre' => '',
'encrypt' => FALSE,
'compress' => FALSE,
'stricton' => FALSE,
'failover' => array(),
'save_queries' => TRUE
);
對比CI中的SQL查詢語句和原生的SQL查詢語句筹陵，不管是可讀性和便捷性上都有很大的提升镊尺。至少，讓我這個“菜鳥”也不至于畏難到下不去手吕粗。
CI雖然便捷旭愧，但其實還是需要一個相對較長的學(xué)習(xí)周期的输枯，且對于業(yè)余者而言，它還是太復(fù)雜了先口。比如，如果完全沒有PHP或者MYSQL的基礎(chǔ)厢汹，是不可能用CI做出具備哪怕是稍微復(fù)雜一點功能的網(wǎng)站的谐宙。所以凡蜻，以上（包括CI）都是專業(yè)工具（proffesional toolkit）。
WordPress/PrestaShop
對于特定用途的網(wǎng)頁兑巾，其實還有更簡單的制作方法忠荞。比如WordPress之于個人博客，再比如PrestaShop之于獨立電商平臺奋姿。我將這些工具稱為模板化創(chuàng)作工具称诗。
模板化創(chuàng)作工具其實已經(jīng)可以被看作是一個應(yīng)用軟件（Application）了头遭，用戶可以完全不用接觸底層代碼（代碼并不一定被封裝起來或者被編譯過），而直接用“所見即所得”的方式來完成創(chuàng)作過程袜香。
比如WordPress蜈首，將下載包解壓上傳到網(wǎng)站空間欠母，訪問域名就可以開始設(shè)置，首先選擇“語言”踩寇，然后配置數(shù)據(jù)庫信息（4個參數(shù)）俺孙，最后設(shè)置站點基本信息（5個參數(shù)），這個個人博客就可以直接使用了荣茫。對于業(yè)余者來說场靴，頂多再到主題庫去挑選一個自己喜歡的外觀主題模板，讓自己的博客顯得與眾不同。
PrestaShop甚至不需要用戶自己擁有網(wǎng)站空間泞边，其在線版本與WordPress的設(shè)置過程類似：填入最基本最必須的信息疗杉，點擊確認(rèn)烟具，就可以使用了。
當(dāng)然嗡午，博客的精髓在于文章冀痕，電商平臺的精髓在于商品言蛇，這兩項都不是模板能夠提供給用戶的，需要用戶自己去創(chuàng)作（寫作/添加商品信息）吨拗。
模板化創(chuàng)作可以被集成為一項服務(wù)婿斥，從而進一步減少用戶在內(nèi)容創(chuàng)作之外的勞動，同時產(chǎn)生規(guī)模效應(yīng)携龟。WordPress再進一步集成就成了新浪博客峡蟋，PrestaShop再進一步集成就是淘寶或者微店，這都是大眾非常熟悉的產(chǎn)品仅乓。
從創(chuàng)意生產(chǎn)的角度看網(wǎng)頁制作的變化
網(wǎng)頁剛誕生的時候蓬戚，其實是程序員的禁臠子漩，普通人很難掌握豫喧，甚至都接觸不到。瀏覽器的出現(xiàn)第一次讓普通人能夠接觸到網(wǎng)頁（雖然還不能做幢泼，但至少可以看和用）紧显。然后，在瀏覽器+HTML這個最根本的框架下缕棵，網(wǎng)頁的功能性和視覺性被層出不窮的新技術(shù)和新工具所強化和擴展孵班。
在較早的時期，雖然“業(yè)余創(chuàng)作”這一需求還未出現(xiàn)招驴，“專業(yè)創(chuàng)作”同樣需要更好更新的工具來完成工作篙程，這種環(huán)境對業(yè)余創(chuàng)作者是不利的，因為他們只能選擇專業(yè)工具來完成其創(chuàng)作别厘，故而不得不付出與職業(yè)者同等的代價才能進行其創(chuàng)作，同時他們又不太能像職業(yè)者一樣從其創(chuàng)作中獲得回報（物質(zhì)上的回報幾乎為0触趴，精神上的回報也僅只是自我滿足感而已）郭厌，甚至還要被迫與職業(yè)者同臺競爭。等到“業(yè)余創(chuàng)作”的需求出現(xiàn)并普及以后雕蔽，創(chuàng)作工具才逐漸出現(xiàn)分化折柠，業(yè)余創(chuàng)作工具被獨立出來，其要求和特征逐漸同專業(yè)創(chuàng)作工具區(qū)分開批狐，這才是有利于業(yè)余創(chuàng)作者的環(huán)境扇售。
對于網(wǎng)頁制作來說，HTML和Browser是基礎(chǔ)嚣艇，PHP承冰、MYSQL、JS甚至包括CI在內(nèi)都是專業(yè)工具食零，只有WordPress和PrstaShop屬于業(yè)余工具困乒。CI在專業(yè)工具中似乎可以起到承前啟后的作用，它能夠引導(dǎo)初學(xué)者逐漸學(xué)習(xí)PHP的基本規(guī)范贰谣，但無需掌握所有的PHP語法娜搂、函數(shù)及技巧迁霎。
