前言：一個(gè)業(yè)余者的網(wǎng)頁(yè)設(shè)計(jì)經(jīng)歷/體驗(yàn)

學(xué)網(wǎng)頁(yè)設(shè)計(jì)大概是上大學(xué)那會(huì)兒（不到2000年）吧，記得一上手就是Dreamweaver，是學(xué)Flash的時(shí)候順帶著學(xué)的。反正“所見即所得”，也就學(xué)著玩唄。那時(shí)候的流行的方法主要是表格定位，先Photoshop做好設(shè)計(jì)，然后切換ImageReady切片，輸出HTML再用Dreamweaver打開編輯。記得當(dāng)時(shí)老是會(huì)錯(cuò)位，很討厭。

CSS也比較早就出現(xiàn)了，主要也是輔助做版式，大部分的工作還是在Dreamweaver中“所見即所得”來(lái)完成。<div>還是個(gè)比較稀罕的玩意，大部分教程中都沒(méi)有建議用<div>來(lái)定位，現(xiàn)在想來(lái)原因可能是當(dāng)時(shí)的主流瀏覽器對(duì)<div>的支持還不完善或者服務(wù)器開銷有點(diǎn)大的原因吧。

服務(wù)器端開始出現(xiàn)PHP了，但主流還是ASP。

在QUT那幾年，因?yàn)镃ommunication Design課程的原因，需要做Flash+PHP的交互。PHP看了一下跟編程似得，就頭大了。當(dāng)時(shí)的作業(yè)其實(shí)是找同學(xué)幫忙完成的，我做Flash部分，交互都交給一個(gè)跨專業(yè)過(guò)來(lái)修課的新加坡人了（他主修計(jì)算機(jī)圖形圖像的）。這時(shí)候其實(shí)CSS+PHP的主流地位就已經(jīng)奠定了，只是我還不是很有概念。

等到2012年要做動(dòng)畫教學(xué)視頻庫(kù)的時(shí)候，才真正下定決心（痛定思痛）開始研究PHP，因?yàn)樾枰念^開始建一個(gè)帶數(shù)據(jù)庫(kù)交互功能的網(wǎng)站，純HTML肯定是不夠用的了。很頭大，但必須咬牙啃。

看了好幾個(gè)星期的幫助文檔，最后還是放棄手寫PHP，轉(zhuǎn)而借助PHP 框架來(lái)曲線救國(guó)。PHP環(huán)境的搭建選擇的是PHPNow，而框架則選擇用CodeIgniter。CI是國(guó)外比較流行的PHP框架，國(guó)內(nèi)其實(shí)貌似用ThinkPHP的比較多，但我覺得ThinkPHP貌似更復(fù)雜，所以挑了個(gè)簡(jiǎn)單點(diǎn)的。

來(lái)自百度百科：

CodeIgniter是一個(gè)簡(jiǎn)單快速的PHP MVC框架，它為組織提供了足夠的自由支持，允許開發(fā)人員更迅速地工作。

自由意味著使用CodeIgniter時(shí)，您不必以某種方式命名數(shù)據(jù)庫(kù)表，也不必根據(jù)表命名模型。這使CodeIgniter成為重構(gòu)遺留PHP應(yīng)用程序的理想選擇，在此類遺留應(yīng)用程序中，可能存在需要移植的所有奇怪的結(jié)構(gòu)。

CodeIgniter不需要大量代碼，也不會(huì)要求您插入類似于PEAR的龐大的庫(kù)。它在PHP4和PHP5中表現(xiàn)同樣良好，允許您創(chuàng)建可移植的應(yīng)用程序。最后，您不必使用模板引擎來(lái)創(chuàng)建視圖，只需沿用舊式的HTML和PHP即可。

做的時(shí)候還是滿糾結(jié)，CI寫起來(lái)跟編程也蠻像的，加上還要從頭開始理解MYSQL語(yǔ)句。好在之前搞過(guò)一段Maya的MEL腳本，玩Unity3D的時(shí)候又寫過(guò)一點(diǎn)點(diǎn)C#，勉強(qiáng)能夠跟上吧。HTML前端這時(shí)候已經(jīng)進(jìn)化到較少使用<table>來(lái)定位了，改為大量采用CSS+DIV結(jié)構(gòu)。

2015年10月，剛剛通過(guò)Comfirmation Colloquium的我發(fā)現(xiàn)后續(xù)的研究可能需要用到數(shù)據(jù)庫(kù)，加上代購(gòu)業(yè)務(wù)上也需要有個(gè)在線的記錄系統(tǒng)，所以就動(dòng)念做個(gè)網(wǎng)站，權(quán)作練習(xí)PHP+MYSQL。一上手還真是不習(xí)慣，2008年積累的那一點(diǎn)點(diǎn)知識(shí)居然都忘光了，只好從頭開始看視頻。好在撿起來(lái)還是比新學(xué)習(xí)要快，至少可以少走很多彎路。比如現(xiàn)在知道了可以用set_value()函數(shù)來(lái)直接獲得表單提交的變量，而不用頻繁去get或者post。

與08年的視頻教學(xué)庫(kù)相比，這次做網(wǎng)站完全沒(méi)有用到Dreamweaver（部分原因也是這次的網(wǎng)站不需要太多視覺設(shè)計(jì)的東西，簡(jiǎn)單能用就行），所有代碼都是直接在Notepad++中寫，而且view中能用CI函數(shù)的就盡量不直接寫html代碼，比如anchor()、add_row()、echo $this->table->generate();等等。

網(wǎng)站空間上，08年的時(shí)候用的國(guó)內(nèi)的“九零起航”最便宜的那款，這次選擇的是“BYET”的免費(fèi)空間，反而更大更方便，沒(méi)有被墻，速度也還行。整個(gè)網(wǎng)站制作上花了將近2周吧，這個(gè)周期比之前還是短了很多，如果馬上要再去做一個(gè)網(wǎng)站，我相信應(yīng)該也不會(huì)很慢。

對(duì)網(wǎng)頁(yè)制作相關(guān)技術(shù)/工具的分析與介紹

HTML+Browser：基礎(chǔ)平臺(tái)的建立

有了瀏覽器之后才有HTML。HTML是超級(jí)文本標(biāo)記語(yǔ)言，其本質(zhì)上的功能其實(shí)是網(wǎng)頁(yè)設(shè)計(jì)者的輸入工作，用相對(duì)較簡(jiǎn)單的標(biāo)記語(yǔ)言來(lái)寫HTML，然后交給瀏覽器將其翻譯成我們所見到的頁(yè)面。HTML和瀏覽器一起，起到了一個(gè)標(biāo)準(zhǔn)化的作用，不管客戶使用的是什么操作系統(tǒng)，只要通過(guò)標(biāo)準(zhǔn)的瀏覽器來(lái)翻譯符合HTML標(biāo)準(zhǔn)的text，就能顯示出幾乎完全一致的結(jié)果頁(yè)面。

我這里說(shuō)“幾乎”，是因?yàn)樵缙诓煌瑸g覽器對(duì)HTML的解釋結(jié)果會(huì)略有差異。而這種“差異”，給當(dāng)時(shí)的網(wǎng)頁(yè)制作者帶來(lái)了一個(gè)麻煩：兼容性。HTML必須在不同瀏覽器的不同版本上測(cè)試無(wú)誤才能上線，而且對(duì)新技術(shù)的采用（比如CSS+DIV）顯需要非常的謹(jǐn)慎。

可以說(shuō)，瀏覽器這一工具（toolkit）通過(guò)引入標(biāo)準(zhǔn)（ standardization）的方式給網(wǎng)頁(yè)制作這一創(chuàng)作（creation）帶來(lái)促進(jìn)（facilitation）的同時(shí)，也帶來(lái)了新的限制（limitation）（我稱這種限制為功能可見性：affordance）。

CSS：對(duì)HTML外觀的補(bǔ)充（supplement）

單純HTML的功能還是蠻有限的。在排版方面，HTML標(biāo)記對(duì)文字的格式化基本上沒(méi)問(wèn)題，但版式設(shè)計(jì)方面就很弱。早期用<table>來(lái)做其實(shí)是無(wú)奈之舉，也很受限制。對(duì)于“網(wǎng)頁(yè)版式”這一項(xiàng)creation來(lái)講，“表格化排版”這一創(chuàng)意路徑帶來(lái)的限制遠(yuǎn)大于促進(jìn)，雖然“切片（slicing）”這一個(gè)技術(shù)（ImageReady和DW同門的Fireworks都主打slicing功能）大大的促進(jìn)了“表格化排版”，但它最終還是被“CSS+DIV”所完全取代。

“CSS+DIV”是從CSS發(fā)展而來(lái)的，CSS一開始是為了簡(jiǎn)化HTML的格式功能（format），但配合<div>標(biāo)簽就能實(shí)現(xiàn)幾乎完全不受限制的版式功能（layout）。

JavaScript：對(duì)HTML功能的外掛（add-on）

單純的HTML并不具備太多的交互功能，純粹是一個(gè)用來(lái)展示頁(yè)面的工具。HTML原生標(biāo)簽應(yīng)該只有<form>能夠有一點(diǎn)點(diǎn)交互功能吧。但隨著互聯(lián)網(wǎng)的發(fā)展，用戶有時(shí)候也需要在網(wǎng)頁(yè)上添加一些小功能，于是JavaScript被設(shè)計(jì)了出來(lái)。

來(lái)自百度百科：

JavaScript是一種直譯式腳本語(yǔ)言，是一種動(dòng)態(tài)類型、弱類型、基于原型的語(yǔ)言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語(yǔ)言，最早是在HTML網(wǎng)頁(yè)上使用，用來(lái)給HTML網(wǎng)頁(yè)增加動(dòng)態(tài)功能。

在1995年時(shí)，由Netscape公司的Brendan Eich，在網(wǎng)景導(dǎo)航者瀏覽器上首次設(shè)計(jì)實(shí)現(xiàn)而成。因?yàn)镹etscape與Sun合作，Netscape管理層希望它外觀看起來(lái)像Java，因此取名為JavaScript。

我傾向于把JS看做是HTML的外掛（add-on），它雖然被寫在HTML文檔中，但卻是被非常生硬的插入HTML代碼的，瀏覽器必須同時(shí)具備解釋HTML和解釋JS的功能，才能正確顯示網(wǎng)頁(yè)。相比較而言，CSS對(duì)HTML的補(bǔ)充更為自然，JS只能說(shuō)是勉勉強(qiáng)強(qiáng)，同時(shí)也給網(wǎng)頁(yè)帶來(lái)了很多問(wèn)題。這一toolset的命運(yùn)我認(rèn)為應(yīng)該和“表格化排版”類似，最后會(huì)被更好的方案所取代。

PHP+MYSQL：對(duì)HTML功能的擴(kuò)展（expansion）

原生HTML是靜態(tài)的（static），而PHP是動(dòng)態(tài)的（dynamic）。之所以對(duì)動(dòng)態(tài)網(wǎng)頁(yè)產(chǎn)生需求，是因?yàn)樾枰挥脕?lái)展示在網(wǎng)頁(yè)上的內(nèi)容不僅其信息量越來(lái)越大，而且還處于不斷更新的狀態(tài)。而動(dòng)態(tài)頁(yè)面較之靜態(tài)頁(yè)面的最大優(yōu)勢(shì)，比如新聞網(wǎng)頁(yè)，如果采取靜態(tài)方案，每則新聞都要手動(dòng)制作一個(gè)頁(yè)面，且沒(méi)添加一個(gè)新頁(yè)面，導(dǎo)航頁(yè)都要進(jìn)行修改。但如果采取動(dòng)態(tài)方案，則可能一次性寫不超過(guò)5個(gè)PHP就能實(shí)現(xiàn)同樣的結(jié)果，省時(shí)省力。

來(lái)自百度百科：

PHP（超文本預(yù)處理器）是一種通用開源腳本語(yǔ)言。語(yǔ)法吸收了C語(yǔ)言、Java和Perl的特點(diǎn)，利于學(xué)習(xí)，使用廣泛，主要適用于Web開發(fā)領(lǐng)域。PHP獨(dú)特的語(yǔ)法混合了C、Java、Perl以及PHP自創(chuàng)的語(yǔ)法。它可以比CGI或者Perl更快速地執(zhí)行動(dòng)態(tài)網(wǎng)頁(yè)。用PHP做出的動(dòng)態(tài)頁(yè)面與其他的編程語(yǔ)言相比，PHP是將程序嵌入到HTML文檔中去執(zhí)行，執(zhí)行效率比完全生成HTML標(biāo)記的CGI要高許多；PHP還可以執(zhí)行編譯后代碼，編譯可以達(dá)到加密和優(yōu)化代碼運(yùn)行，使代碼運(yùn)行更快。

PHP是在服務(wù)器端對(duì)文檔（包括.html和.php文檔）進(jìn)行解釋，生成針對(duì)特定終端的HTML頁(yè)面再反饋到用戶的瀏覽器。這是一個(gè)對(duì)信息進(jìn)行自動(dòng)化（automation）處理的過(guò)程，而原生HTML僅僅是直接發(fā)送信息。從百度百科的解釋可以看出，PHP不是第一個(gè)，也不是唯一一個(gè)用來(lái)做這項(xiàng)工作的語(yǔ)言，只是PHP最終變成了標(biāo)準(zhǔn)，笑到了最后而已?；仡櫘?dāng)時(shí)，它的優(yōu)勢(shì)在于“更快”、“更方便”。而著眼現(xiàn)在，它的最大優(yōu)勢(shì)我認(rèn)為應(yīng)該是它已經(jīng)成為了標(biāo)準(zhǔn)，且功能上沒(méi)有嚴(yán)重缺陷。

MYSQL自然不是網(wǎng)頁(yè)獨(dú)有的東西，對(duì)于信息的儲(chǔ)存和處理，使用數(shù)據(jù)庫(kù)是最好的選擇。但原生HTML是不能處理數(shù)據(jù)庫(kù)的，這就需要PHP的幫助了。在這項(xiàng)工作上，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'];
}

可以看出來(lái)是直接把SQL語(yǔ)句寫到$sql中然后通過(guò)mysql_query()來(lái)調(diào)用，這要求使用者完全了解如何使用MYSQL才可以，且必須在執(zhí)行PHP頁(yè)面時(shí)才能驗(yàn)證SQL語(yǔ)句是否正確（當(dāng)然也可以在PHPMyAdmin中驗(yàn)證好語(yǔ)句再?gòu)?fù)制過(guò)來(lái)）。PHP從4開始提供了一些SQL函數(shù)，但依然不夠方便。

CodeIgniter：對(duì)PHP和HTML的輔助（facilitation）

CI是PHP框架，所以CI并不能實(shí)現(xiàn)PHP不能實(shí)現(xiàn)的功能，它只是讓使用者更方便的寫PHP。

CI提供輔助的方式依然是將PHP和HTML標(biāo)準(zhǔn)化（standardization）。CI文件的后綴同樣是.php，所以它其實(shí)就是PHP，只不過(guò)是按照MVC規(guī)范化之后的PHP。

來(lái)自百度百科：

MVC全名是Model View Controller，是模型（model）－視圖（view）－控制器（controller）的縮寫，一種軟件設(shè)計(jì)典范，用一種業(yè)務(wù)邏輯、數(shù)據(jù)、界面顯示分離的方法組織代碼，將業(yè)務(wù)邏輯聚集到一個(gè)部件里面，在改進(jìn)和個(gè)性化定制界面及用戶交互的同時(shí)，不需要重新編寫業(yè)務(wù)邏輯。MVC被獨(dú)特的發(fā)展起來(lái)用于映射傳統(tǒng)的輸入、處理和輸出功能在一個(gè)邏輯的圖形化用戶界面的結(jié)構(gòu)中。

這個(gè)規(guī)范來(lái)源于軟件設(shè)計(jì)領(lǐng)域的多年經(jīng)驗(yàn)積累（當(dāng)然，網(wǎng)頁(yè)設(shè)計(jì)與軟件設(shè)計(jì)其實(shí)從根本上來(lái)說(shuō)是一致的）。對(duì)于程序員出身的用戶來(lái)說(shuō)，這個(gè)規(guī)范的邏輯是不言而喻的，但對(duì)于從寫HTML起步的網(wǎng)頁(yè)設(shè)計(jì)員（比如我自己）來(lái)說(shuō)，一開始感受到不是便利，而是限制。

PS：我在開始寫MEL腳本的時(shí)候是完全沒(méi)有編程概念的，甚至覺得使用function()都是多此一舉的麻煩。直到在用C#寫Unity腳本時(shí)才感受到程序結(jié)構(gòu)的重要性?？上У氖?，編程的入門門檻太高，我至今還沒(méi)能摸到編程結(jié)構(gòu)的門檻。主要原因也是我之前一直寫的東西都是些小的不能再小的腳本，MEL是基于Maya運(yùn)行的，C#是基于Unity運(yùn)行的，壓根不能算程序。我倒是希望能夠?qū)W習(xí)一門程序語(yǔ)言來(lái)著，可惜本科Basic都差點(diǎn)不及格的說(shuō)。

經(jīng)歷過(guò)一個(gè)熟悉過(guò)程之后，用戶才會(huì)真正體會(huì)到便捷性。比如上述PHP查詢MYSQL數(shù)據(jù)庫(kù)的語(yǔ)句，在CI中就變成這樣：

$this->load->database('database');

$this->db->where('name', $name);
$query = $this->get($table);
return $query->result();

而對(duì)數(shù)據(jù)庫(kù)的設(shè)置則干脆變成了專門的config文件夾下database.php中對(duì)所需參數(shù)（4個(gè)左右）的填寫。

$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
);

對(duì)比CI中的SQL查詢語(yǔ)句和原生的SQL查詢語(yǔ)句，不管是可讀性和便捷性上都有很大的提升。至少，讓我這個(gè)“菜鳥”也不至于畏難到下不去手。

CI雖然便捷，但其實(shí)還是需要一個(gè)相對(duì)較長(zhǎng)的學(xué)習(xí)周期的，且對(duì)于業(yè)余者而言，它還是太復(fù)雜了。比如，如果完全沒(méi)有PHP或者M(jìn)YSQL的基礎(chǔ)，是不可能用CI做出具備哪怕是稍微復(fù)雜一點(diǎn)功能的網(wǎng)站的。所以，以上（包括CI）都是專業(yè)工具（proffesional toolkit）。

WordPress/PrestaShop

對(duì)于特定用途的網(wǎng)頁(yè)，其實(shí)還有更簡(jiǎn)單的制作方法。比如WordPress之于個(gè)人博客，再比如PrestaShop之于獨(dú)立電商平臺(tái)。我將這些工具稱為模板化創(chuàng)作工具。

模板化創(chuàng)作工具其實(shí)已經(jīng)可以被看作是一個(gè)應(yīng)用軟件（Application）了，用戶可以完全不用接觸底層代碼（代碼并不一定被封裝起來(lái)或者被編譯過(guò)），而直接用“所見即所得”的方式來(lái)完成創(chuàng)作過(guò)程。

比如WordPress，將下載包解壓上傳到網(wǎng)站空間，訪問(wèn)域名就可以開始設(shè)置，首先選擇“語(yǔ)言”，然后配置數(shù)據(jù)庫(kù)信息（4個(gè)參數(shù)），最后設(shè)置站點(diǎn)基本信息（5個(gè)參數(shù)），這個(gè)個(gè)人博客就可以直接使用了。對(duì)于業(yè)余者來(lái)說(shuō)，頂多再到主題庫(kù)去挑選一個(gè)自己喜歡的外觀主題模板，讓自己的博客顯得與眾不同。

PrestaShop甚至不需要用戶自己擁有網(wǎng)站空間，其在線版本與WordPress的設(shè)置過(guò)程類似：填入最基本最必須的信息，點(diǎn)擊確認(rèn)，就可以使用了。

當(dāng)然，博客的精髓在于文章，電商平臺(tái)的精髓在于商品，這兩項(xiàng)都不是模板能夠提供給用戶的，需要用戶自己去創(chuàng)作（寫作/添加商品信息）。

模板化創(chuàng)作可以被集成為一項(xiàng)服務(wù)，從而進(jìn)一步減少用戶在內(nèi)容創(chuàng)作之外的勞動(dòng)，同時(shí)產(chǎn)生規(guī)模效應(yīng)。WordPress再進(jìn)一步集成就成了新浪博客，PrestaShop再進(jìn)一步集成就是淘寶或者微店，這都是大眾非常熟悉的產(chǎn)品。

從創(chuàng)意生產(chǎn)的角度看網(wǎng)頁(yè)制作的變化

網(wǎng)頁(yè)剛誕生的時(shí)候，其實(shí)是程序員的禁臠，普通人很難掌握，甚至都接觸不到。瀏覽器的出現(xiàn)第一次讓普通人能夠接觸到網(wǎng)頁(yè)（雖然還不能做，但至少可以看和用）。然后，在瀏覽器+HTML這個(gè)最根本的框架下，網(wǎng)頁(yè)的功能性和視覺性被層出不窮的新技術(shù)和新工具所強(qiáng)化和擴(kuò)展。

在較早的時(shí)期，雖然“業(yè)余創(chuàng)作”這一需求還未出現(xiàn)，“專業(yè)創(chuàng)作”同樣需要更好更新的工具來(lái)完成工作，這種環(huán)境對(duì)業(yè)余創(chuàng)作者是不利的，因?yàn)樗麄冎荒苓x擇專業(yè)工具來(lái)完成其創(chuàng)作，故而不得不付出與職業(yè)者同等的代價(jià)才能進(jìn)行其創(chuàng)作，同時(shí)他們又不太能像職業(yè)者一樣從其創(chuàng)作中獲得回報(bào)（物質(zhì)上的回報(bào)幾乎為0，精神上的回報(bào)也僅只是自我滿足感而已），甚至還要被迫與職業(yè)者同臺(tái)競(jìng)爭(zhēng)。等到“業(yè)余創(chuàng)作”的需求出現(xiàn)并普及以后，創(chuàng)作工具才逐漸出現(xiàn)分化，業(yè)余創(chuàng)作工具被獨(dú)立出來(lái)，其要求和特征逐漸同專業(yè)創(chuàng)作工具區(qū)分開，這才是有利于業(yè)余創(chuàng)作者的環(huán)境。

對(duì)于網(wǎng)頁(yè)制作來(lái)說(shuō)，HTML和Browser是基礎(chǔ)，PHP、MYSQL、JS甚至包括CI在內(nèi)都是專業(yè)工具，只有WordPress和PrstaShop屬于業(yè)余工具。CI在專業(yè)工具中似乎可以起到承前啟后的作用，它能夠引導(dǎo)初學(xué)者逐漸學(xué)習(xí)PHP的基本規(guī)范，但無(wú)需掌握所有的PHP語(yǔ)法、函數(shù)及技巧。