網頁基本功

《網頁設計概述》

網頁設計目前分成前端工程（Front End）與後端工程（Back End）兩種，前端負責網頁上面的視覺結構（Visual structure）、動畫（Animation）與互動設計（Interactive Design），後端負責動態內容（Dynamic Content），本課程以前端工程為教學方向，故後端部分不著墨太多。

前端工程使用的語法大致分成三種：HTML（結構）、CSS（外觀）、Javascript（動畫、互動），簡單用一句英文形容「HTML holds the content in place, CSS makes it look pretty, Javascript Let it be controlled.」。

但嚴格來說HTML與CSS只是一些固定的英文標籤和屬性寫法，並不能稱為程式語言，因為其中不包含宣告變數、定義迴圈、條件判斷…等程式面的操作，簡言之就是沒有太多邏輯思考的部分，只要常使用就能夠了解，而Javascript才算是程式語法，它支援上述程式面的所有項目。

現在許多網頁為了便於瀏覽，會利用前端語法結合後端語法做資料更新呈現（AJAX、AJAJ），故網頁設計學習更好的是由前端開始學習，慢慢再進入後端的部分，反之亦然。

《前端語法概述》

HTML目前最新的版本為5，相對之前的版本增加了許多結構性標籤、SVG（網頁向量圖檔）和多媒體…等的支援，CSS目前最新的版本為3，相對之前的版本增加了許多動畫、視覺效果與字型的支援…等的支援。

網頁上除了結構和外觀之外，要讓它看起來更炫，就必須加上許多互動和動畫效果，這項任務在許多年之前大部分會交由Flash來負責，而當行動裝置越來越普及，Flash在網頁上逐漸式微、消失，Javascript重拾其網頁動畫與互動的任務，去年TIOBE公布的2014年程式語言排行榜就由Javascript奪冠（新聞頁）。

然而Javascript已經是一個相對比較舊的語法（1995年由Netscape提出），又有瀏覽器相容性的問題（每個瀏覽器支援的寫法不同），導致學習和撰寫上的困難，而，所以現在有非常多去改善Javascript的函數庫陸續推出，例如：jQuery、Knockout、AngularJS…等。

《後端語法概述》

後端語法大致上有：ASP、JSP和PHP…等，前端語法是由網頁伺服器傳送到使用者的瀏覽器後，由瀏覽器來解讀後顯示於畫面，由於這個工作原理，使用者可以在瀏覽器直接觀賞到網頁中所有的前端語法，而後端語法是使用者提出需求後，由伺服器來解讀該需求，處理該需求後，傳回前端語法給使用者，瀏覽器解讀後再呈現。

所以若我們要撰寫後端語法，就必須要架設可以解讀該語法的伺服器，而關於伺服器的架設非網頁設計的專業領域，所以我們架設的伺服器，僅供撰寫語法與測試語法使用，通常撰寫後的頁面，必須上傳到虛擬主機來讓廣大的使用者使用，對於安全性來說會比較有保障。

《開發工具》

網頁開發工具可以分成三大類：

• 精靈類：主要利用軟體功能製作頁面，幾乎不需要撰寫程式碼，適合視覺設計師使用。
  • Adobe Muse
• 工具類：以軟體為主，程式碼為輔來製作頁面，適合網頁設計師使用。
  • Adobe Dreamweaver
  • Microsoft Expression Web
• 程式碼類：以程式碼為主來製作頁面，適合進階的網頁設計師或是想學習網頁程式碼的人使用。
  • Adobe Brackets
  • Sublime Text