前言：一個業余者的網頁設計經歷/體驗
學網頁設計大概是上大學那會兒（不到2000年）吧，記得一上手就是Dreamweaver，是學Flash的時候順帶著學的。反正“所見即所得”，也就學著玩唄。那時候的流行的方法主要是表格定位，先Photoshop做好設計，然后切換ImageReady切片，輸出HTML再用Dreamweaver打開編輯。記得當時老是會錯位，很討厭。
CSS也比較早就出現了，主要也是輔助做版式，大部分的工作還是在Dreamweaver中“所見即所得”來完成。<div>還是個比較稀罕的玩意，大部分教程中都沒有建議用<div>來定位，現在想來原因可能是當時的主流瀏覽器對<div>的支持還不完善或者服務器開銷有點大的原因吧。
服務器端開始出現PHP了，但主流還是ASP。
在QUT那幾年，因為Communication Design課程的原因，需要做Flash+PHP的交互。PHP看了一下跟編程似得，就頭大了。當時的作業其實是找同學幫忙完成的，我做Flash部分，交互都交給一個跨專業過來修課的新加坡人了（他主修計算機圖形圖像的）。這時候其實CSS+PHP的主流地位就已經奠定了，只是我還不是很有概念。
等到2012年要做動畫教學視頻庫的時候，才真正下定決心（痛定思痛）開始研究PHP，因為需要去從頭開始建一個帶數據庫交互功能的網站，純HTML肯定是不夠用的了。很頭大，但必須咬牙啃。
看了好幾個星期的幫助文檔，最后還是放棄手寫PHP，轉而借助PHP 框架來曲線救國。PHP環境的搭建選擇的是PHPNow，而框架則選擇用CodeIgniter。CI是國外比較流行的PHP框架，國內其實貌似用ThinkPHP的比較多，但我覺得ThinkPHP貌似更復雜，所以挑了個簡單點的。
來自百度百科：
CodeIgniter是一個簡單快速的PHP MVC框架，它為組織提供了足夠的自由支持，允許開發人員更迅速地工作。
自由意味著使用CodeIgniter時，您不必以某種方式命名數據庫表，也不必根據表命名模型。這使CodeIgniter成為重構遺留PHP應用程序的理想選擇，在此類遺留應用程序中，可能存在需要移植的所有奇怪的結構。
CodeIgniter不需要大量代碼，也不會要求您插入類似于PEAR的龐大的庫。它在PHP4和PHP5中表現同樣良好，允許您創建可移植的應用程序。最后，您不必使用模板引擎來創建視圖，只需沿用舊式的HTML和PHP即可。
做的時候還是滿糾結，CI寫起來跟編程也蠻像的，加上還要從頭開始理解MYSQL語句。好在之前搞過一段Maya的MEL腳本，玩Unity3D的時候又寫過一點點C#，勉強能夠跟上吧。HTML前端這時候已經進化到較少使用<table>來定位了，改為大量采用CSS+DIV結構。
2015年10月，剛剛通過Comfirmation Colloquium的我發現后續的研究可能需要用到數據庫，加上代購業務上也需要有個在線的記錄系統，所以就動念做個網站，權作練習PHP+MYSQL。一上手還真是不習慣，2008年積累的那一點點知識居然都忘光了，只好從頭開始看視頻。好在撿起來還是比新學習要快，至少可以少走很多彎路。比如現在知道了可以用set_value()函數來直接獲得表單提交的變量，而不用頻繁去get或者post。
與08年的視頻教學庫相比，這次做網站完全沒有用到Dreamweaver（部分原因也是這次的網站不需要太多視覺設計的東西，簡單能用就行），所有代碼都是直接在Notepad++中寫，而且view中能用CI函數的就盡量不直接寫html代碼，比如anchor()、add_row()、echo $this->table->generate();等等。
網站空間上，08年的時候用的國內的“九零起航”最便宜的那款，這次選擇的是“BYET”的免費空間，反而更大更方便，沒有被墻，速度也還行。整個網站制作上花了將近2周吧，這個周期比之前還是短了很多，如果馬上要再去做一個網站，我相信應該也不會很慢。
對網頁制作相關技術/工具的分析與介紹
HTML+Browser：基礎平臺的建立
有了瀏覽器之后才有HTML。HTML是超級文本標記語言，其本質上的功能其實是網頁設計者的輸入工作，用相對較簡單的標記語言來寫HTML，然后交給瀏覽器將其翻譯成我們所見到的頁面。HTML和瀏覽器一起，起到了一個標準化的作用，不管客戶使用的是什么操作系統，只要通過標準的瀏覽器來翻譯符合HTML標準的text，就能顯示出幾乎完全一致的結果頁面。
我這里說“幾乎”，是因為早期不同瀏覽器對HTML的解釋結果會略有差異。而這種“差異”，給當時的網頁制作者帶來了一個麻煩：兼容性。HTML必須在不同瀏覽器的不同版本上測試無誤才能上線，而且對新技術的采用（比如CSS+DIV）顯需要非常的謹慎。
可以說，瀏覽器這一工具（toolkit）通過引入標準（ standardization）的方式給網頁制作這一創作（creation）帶來促進（facilitation）的同時，也帶來了新的限制（limitation）（我稱這種限制為功能可見性：affordance）。
CSS：對HTML外觀的補充（supplement）
單純HTML的功能還是蠻有限的。在排版方面，HTML標記對文字的格式化基本上沒問題，但版式設計方面就很弱。早期用<table>來做其實是無奈之舉，也很受限制。對于“網頁版式”這一項creation來講，“表格化排版”這一創意路徑帶來的限制遠大于促進，雖然“切片（slicing）”這一個技術（ImageReady和DW同門的Fireworks都主打slicing功能）大大的促進了“表格化排版”，但它最終還是被“CSS+DIV”所完全取代。
“CSS+DIV”是從CSS發展而來的，CSS一開始是為了簡化HTML的格式功能（format），但配合<div>標簽就能實現幾乎完全不受限制的版式功能（layout）。
JavaScript：對HTML功能的外掛（add-on）
單純的HTML并不具備太多的交互功能，純粹是一個用來展示頁面的工具。HTML原生標簽應該只有<form>能夠有一點點交互功能吧。但隨著互聯網的發展，用戶有時候也需要在網頁上添加一些小功能，于是JavaScript被設計了出來。
來自百度百科：
JavaScript是一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。
在1995年時，由Netscape公司的Brendan Eich，在網景導航者瀏覽器上首次設計實現而成。因為Netscape與Sun合作，Netscape管理層希望它外觀看起來像Java，因此取名為JavaScript。
我傾向于把JS看做是HTML的外掛（add-on），它雖然被寫在HTML文檔中，但卻是被非常生硬的插入HTML代碼的，瀏覽器必須同時具備解釋HTML和解釋JS的功能，才能正確顯示網頁。相比較而言，CSS對HTML的補充更為自然，JS只能說是勉勉強強，同時也給網頁帶來了很多問題。這一toolset的命運我認為應該和“表格化排版”類似，最后會被更好的方案所取代。
PHP+MYSQL：對HTML功能的擴展（expansion）
原生HTML是靜態的（static），而PHP是動態的（dynamic）。之所以對動態網頁產生需求，是因為需要被用來展示在網頁上的內容不僅其信息量越來越大，而且還處于不斷更新的狀態。而動態頁面較之靜態頁面的最大優勢，比如新聞網頁，如果采取靜態方案，每則新聞都要手動制作一個頁面，且沒添加一個新頁面，導航頁都要進行修改。但如果采取動態方案，則可能一次性寫不超過5個PHP就能實現同樣的結果，省時省力。
來自百度百科：
PHP（超文本預處理器）是一種通用開源腳本語言。語法吸收了C語言、Java和Perl的特點，利于學習，使用廣泛，主要適用于Web開發領域。PHP獨特的語法混合了C、Java、Perl以及PHP自創的語法。它可以比CGI或者Perl更快速地執行動態網頁。用PHP做出的動態頁面與其他的編程語言相比，PHP是將程序嵌入到HTML文檔中去執行，執行效率比完全生成HTML標記的CGI要高許多；PHP還可以執行編譯后代碼，編譯可以達到加密和優化代碼運行，使代碼運行更快。
PHP是在服務器端對文檔（包括.html和.php文檔）進行解釋，生成針對特定終端的HTML頁面再反饋到用戶的瀏覽器。這是一個對信息進行自動化（automation）處理的過程，而原生HTML僅僅是直接發送信息。從百度百科的解釋可以看出，PHP不是第一個，也不是唯一一個用來做這項工作的語言，只是PHP最終變成了標準，笑到了最后而已。回顧當時，它的優勢在于“更快”、“更方便”。而著眼現在，它的最大優勢我認為應該是它已經成為了標準，且功能上沒有嚴重缺陷。
MYSQL自然不是網頁獨有的東西，對于信息的儲存和處理，使用數據庫是最好的選擇。但原生HTML是不能處理數據庫的，這就需要PHP的幫助了。在這項工作上，PHP起到了橋（bridge）的作用。
原生PHP調用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()來調用，這要求使用者完全了解如何使用MYSQL才可以，且必須在執行PHP頁面時才能驗證SQL語句是否正確（當然也可以在PHPMyAdmin中驗證好語句再復制過來）。PHP從4開始提供了一些SQL函數，但依然不夠方便。
CodeIgniter：對PHP和HTML的輔助（facilitation）
CI是PHP框架，所以CI并不能實現PHP不能實現的功能，它只是讓使用者更方便的寫PHP。
CI提供輔助的方式依然是將PHP和HTML標準化（standardization）。CI文件的后綴同樣是.php，所以它其實就是PHP，只不過是按照MVC規范化之后的PHP。
來自百度百科：
MVC全名是Model View Controller，是模型（model）－視圖（view）－控制器（controller）的縮寫，一種軟件設計典范，用一種業務邏輯、數據、界面顯示分離的方法組織代碼，將業務邏輯聚集到一個部件里面，在改進和個性化定制界面及用戶交互的同時，不需要重新編寫業務邏輯。MVC被獨特的發展起來用于映射傳統的輸入、處理和輸出功能在一個邏輯的圖形化用戶界面的結構中。
這個規范來源于軟件設計領域的多年經驗積累（當然，網頁設計與軟件設計其實從根本上來說是一致的）。對于程序員出身的用戶來說，這個規范的邏輯是不言而喻的，但對于從寫HTML起步的網頁設計員（比如我自己）來說，一開始感受到不是便利，而是限制。
PS：我在開始寫MEL腳本的時候是完全沒有編程概念的，甚至覺得使用function()都是多此一舉的麻煩。直到在用C#寫Unity腳本時才感受到程序結構的重要性。可惜的是，編程的入門門檻太高，我至今還沒能摸到編程結構的門檻。主要原因也是我之前一直寫的東西都是些小的不能再小的腳本，MEL是基于Maya運行的，C#是基于Unity運行的，壓根不能算程序。我倒是希望能夠學習一門程序語言來著，可惜本科Basic都差點不及格的說。
經歷過一個熟悉過程之后，用戶才會真正體會到便捷性。比如上述PHP查詢MYSQL數據庫的語句，在CI中就變成這樣：
$this->load->database('database');
$this->db->where('name', $name);
$query = $this->get($table);
return $query->result();
而對數據庫的設置則干脆變成了專門的config文件夾下database.php中對所需參數（4個左右）的填寫。
$active_group = 'default';
$query_builder = TRUE;
$db['default'] = array(
'dsn' => '',
'hostname' => '', //需要填寫的參數1
'username' => '', //需要填寫的參數2
'password' => '', //需要填寫的參數3
'database' => '', //需要填寫的參數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雖然便捷，但其實還是需要一個相對較長的學習周期的，且對于業余者而言，它還是太復雜了。比如，如果完全沒有PHP或者MYSQL的基礎，是不可能用CI做出具備哪怕是稍微復雜一點功能的網站的。所以，以上（包括CI）都是專業工具（proffesional toolkit）。
WordPress/PrestaShop
對于特定用途的網頁，其實還有更簡單的制作方法。比如WordPress之于個人博客，再比如PrestaShop之于獨立電商平臺。我將這些工具稱為模板化創作工具。
模板化創作工具其實已經可以被看作是一個應用軟件（Application）了，用戶可以完全不用接觸底層代碼（代碼并不一定被封裝起來或者被編譯過），而直接用“所見即所得”的方式來完成創作過程。
比如WordPress，將下載包解壓上傳到網站空間，訪問域名就可以開始設置，首先選擇“語言”，然后配置數據庫信息（4個參數），最后設置站點基本信息（5個參數），這個個人博客就可以直接使用了。對于業余者來說，頂多再到主題庫去挑選一個自己喜歡的外觀主題模板，讓自己的博客顯得與眾不同。
PrestaShop甚至不需要用戶自己擁有網站空間，其在線版本與WordPress的設置過程類似：填入最基本最必須的信息，點擊確認，就可以使用了。
當然，博客的精髓在于文章，電商平臺的精髓在于商品，這兩項都不是模板能夠提供給用戶的，需要用戶自己去創作（寫作/添加商品信息）。
模板化創作可以被集成為一項服務，從而進一步減少用戶在內容創作之外的勞動，同時產生規模效應。WordPress再進一步集成就成了新浪博客，PrestaShop再進一步集成就是淘寶或者微店，這都是大眾非常熟悉的產品。
從創意生產的角度看網頁制作的變化
網頁剛誕生的時候，其實是程序員的禁臠，普通人很難掌握，甚至都接觸不到。瀏覽器的出現第一次讓普通人能夠接觸到網頁（雖然還不能做，但至少可以看和用）。然后，在瀏覽器+HTML這個最根本的框架下，網頁的功能性和視覺性被層出不窮的新技術和新工具所強化和擴展。
在較早的時期，雖然“業余創作”這一需求還未出現，“專業創作”同樣需要更好更新的工具來完成工作，這種環境對業余創作者是不利的，因為他們只能選擇專業工具來完成其創作，故而不得不付出與職業者同等的代價才能進行其創作，同時他們又不太能像職業者一樣從其創作中獲得回報（物質上的回報幾乎為0，精神上的回報也僅只是自我滿足感而已），甚至還要被迫與職業者同臺競爭。等到“業余創作”的需求出現并普及以后，創作工具才逐漸出現分化，業余創作工具被獨立出來，其要求和特征逐漸同專業創作工具區分開，這才是有利于業余創作者的環境。
對于網頁制作來說，HTML和Browser是基礎，PHP、MYSQL、JS甚至包括CI在內都是專業工具，只有WordPress和PrstaShop屬于業余工具。CI在專業工具中似乎可以起到承前啟后的作用，它能夠引導初學者逐漸學習PHP的基本規范，但無需掌握所有的PHP語法、函數及技巧。
