寫網頁教學課程20215個章節, 從零學習網頁設計

如果你想學習網頁設計，隨便網上一找，便會發現，怎麼這麼多資料？

雖然資料很多，但就是因為資料太多，初學者根本無從入手。

今天，這篇「寫網頁教學課程2021 」，將會分開5個章節，由基本概念，架站方法到編程學習路徑等，讓你從零開始，好好去學習網頁設計。

如果你想開始學習網頁設計，看這篇教學就對了！

準備好了？我們開始吧！

目錄

第1章

基本概念

第2章

架站步驟

第3章

常見的3種架站方法

第4章

設計美感

第5章

編程學習路徑

第1章基本概念

剛剛打算學習網頁設計，但卻發現，都是一大堆聽不明白的詞彙！

別擔心！這是絕對正常的！

在這個章節，我們會把一些常用的詞彙都解釋給你聽：

  • 前台（Frontend)
  • 後台（Backend)
  • Database（數據庫)
  • 編程語言
  • 內容管理系統(CMS)
  • 響應式設計(Responsive)
  • 伺服器（Server), IP Address, 網址(Domain)

我們開始吧！

前台（Frontend)

要編寫一個網頁，原來可以分為前台（Frontend)及後台（Backend)。

前台（Frontend）就是網頁的外觀。例如你看到的文字，圖片，美麗的排版等等，通通都是前台（Frontend）。

後台（Backend）就是網頁的功能。例如網站可以讓你註冊，提交數據等等，就是後台（Backend）。

還是不明白？讓我們看看這個例子：

假設你到一家網店買東西，看見一個漂亮的主頁。

在主頁中，你看見一件T Shirt，於是按了那T Shirt一下。現在你處於T Shirt這頁。

到目前為止，你已經看到了兩個layout，分別是Home及T Shirt。這兩個不同的layout，就是前台（Frontend)了！

網頁的外觀，就是前台（Frontend）！

後台（Backend)

繼續先前的例子。你看見了兩個layout - Home及T shirt。

然而，當你由Home到T Shirt時，中間其實會經過一台Server（伺服器）。

在這台Server（伺服器）上，會有一些Program運行。而這些Program，是有Logic的。

比方說，可能你以前從來沒有訪問過這網站。於是，它便不讓你看到T Shirt這頁，反而是帶你到Register這一頁。

另外一個情況，就是你原來已訪問過這網站。因此，它今次便會帶到T Shirt這頁。

在Server上的這些Program，便是後台（Backend)。

因此，你也可以說，網頁的功能，就是後台（Backend）了。

Database（數據庫)

後台（Backend)除了有Program外，還會有Database（數據庫）。Database主要負責儲存數據，例如用戶的登入電郵，密碼等等。

你的網站能夠儲存數據，大部份情況是因為有Database（數據庫）！

編程語言

接下來，我們來看看Frontend及Backend，是由什麼編程語言組成的。

Frontend是由3種編程語言組成，它們分別是：

  1. HTML
  2. CSS
  3. Javascript

HTML主要是負責外觀的結構。
CSS負責把結構變得更美麗。
Javascript負責外觀元素的控制。

至於Backend，則有很多種選擇：PHP, NodeJS, C, JAVA, RUBY, PHY, Python......我們只要選擇一種來用就可以。

你可能會問，我應該選擇哪一種語言來學呢？以我的經驗，網頁開發的話，PHP及NODEJS比較熱門，普及。數據分析的話，Python比較多人使用。

內容管理系統(CMS)

接下來，另外一個重要概念，就是內容管理系統(CMS)。

CMS的全寫叫Content Management System。意思就是讓一個不懂編程的人，也能夠更新網頁的內容。

如果網頁沒有CMS，你不懂編程的話，是不能夠更新網頁內容的！

有了一個CMS後，你便可以像更新Facebook一樣，輕易地更新網頁內容。

跟據https://trends.builtwith.com/cms，Wordpress是現今最多人用的CMS。

像Wordpress，Drupal等等，我們稱之為「開源」的CMS。意思是它們的源代碼是公開的，全世界的編程員也可以一起維護，開發這些源代碼。你可以免費，合法地使用它去為你或你的客人建立網站。

要了解如何使用Wordpress架站，可參考：
WORDPRESS教學 - 終極架站課程

響應式設計(Responsive)

現今的網站，約有1/3的流量都是從手機而來。

因此，如何確保網站在手機，IPAD等都美觀地顯示，也是一個重要的題目。

而最常見的處理手法，就是使用響應式設計(Responsive)。

響應式設計(Responsive)就是使用同一堆源碼，讓你的網站在桌面，Tablet或手機上都可以美觀地呈現。

讓我們看看例子吧：

burdstrom.com在桌面上是這樣的：

在手機上則是這樣的。

你會看到，透過一些外觀的小改動，在桌面或手機也可以美麗地呈現網頁。

我們通常會利用CSS，及少許Javascript做到Responsive的效果。

伺服器（Server), IP Address, 網址(Domain)

在前面文章，我們常常提及到伺服器（Server）。

究竟，什麼是伺服器呢？

「伺服器」其實就是一台連著互聯網的電腦。這台電腦的主要作用是，讓其他人看見這台電腦上的網頁。

如何在茫茫互聯網中找到這台「伺服器」？當然，它會有一個地址，這個地址就是叫IP Address。

IP Address通常都像這樣：192.3.4.2。很難記吧？因此，我們把它弄得易記一點，就變成網址(Domain)了。

整個上網的流程，就像這樣：

  1. 用家開電腦
  2. 開瀏覽器
  3. 在瀏覽器輸入網址
  4. 網址變成IP Address
  5. 根據IP Address，找到伺服器
  6. 問伺服器可否看你的網頁
  7. 伺服器說OK，它給你HTML
  8. 瀏覽器收到HTML，把它變為你看得懂的網頁

第2章架站步驟

一般來說，要建立一個網站或平台，一共有4個步驟。

他們分別是：

  1. 用家體驗 （USER EXPERIENCE）
  2. 資訊架構 （INFORMATION ARCHITECTURE）
  3. 設計 （VISUAL DESIGN）
  4. 開發 （DEVELOPMENT）

什麼東東來的？我們來看看吧！

用家體驗 （USER EXPERIENCE)

建立一個網站的第一步，原來並不是直接坐下來畫layout或是做Programming。反而，你應該要跳出自己是設計師的身份，把自己當作網站的用戶，想想看：

  • 網站的用戶是誰？
  • 他們年紀有多大？是男是女？
  • 他們有什麼特點？興趣？
  • 他們為什麼要上你的網頁？有什麼目標？
  • 有什麼功能是他們喜愛/不喜愛的？

如果可以的話，最好是找出這班目標用戶，和他們聊聊天吧！

和目標用戶聊天，除了可以了解以上問題的答案外，更重要的是，你可以從與他們對話中，了解他們說話的用字，語句，把他們都記下來。

不要小看這些語句！遲一點你在為網頁寫文字內容的時候，這些語句會對你幫助很大。因為他們都是從目標用戶親口說出來的。

資訊架構 （INFORMATION ARCHITECTURE）

第2步，我們叫「資訊架構（INFORMATION ARCHITECTURE）」。這一步有點像一個橋樑，去把你想做的東西，變成編程員會看得懂的東西。

資訊架構（INFORMATION ARCHITECTURE）通常有以下的東西：

  • Sitemap
  • WireFrame

Sitemap很容易去理解。你網頁將會有什麼頁，便把它們都列出來。如下圖，網站有Home, Service, Contact等頁：

WireFrame則是用一枝筆，把網頁大概的樣子畫出來：

上圖其實是twitter的wireframe! (來源：
https://www.flickr.com/photos/jackdorsey/182613360)

WireFrame不用畫得漂亮，它只是你網站外觀的大概，初稿。接下來我們還是會把它交給設計師去設計。

設計 （VISUAL DESIGN）

當有了sitemap及wireframe後，我們便會把它交給設計師去做設計。

設計師通常會使用AI，Photoshop，ADOBE XD等軟件去做設計。如下圖：

要注意設計出來的會是一個圖檔。圖檔是靜態的，而網頁則是動態的。因此，設計師在設計時，還應考慮當中的動態元素。

開發 （DEVELOPMENT）

當設計完成後，你便可以把設計交給編程員，去做開發了。

編程員通常會跟著設計，把外觀Frontend做好。

Frontend做好，而客人又滿意的話，便會做後面的功能(Backend），或把網頁連上CMS, 讓客人可以自已更新網站內容。

有關架站方法，或是編程語言的使用，我們會在接下來的章節討論更多。

第3章常見的3種架站方法

在前面文章，你學習了不同的概念，如Frontend/Backend，CMS等等。

然而，作為新手的你，想實際去建立一個網站，究竟有什麼方法呢？

以下是現今, 市面上最常見的3種架站方法：

1. 使用第3方服務如wix/shopify
2. 使用Wordpress架站
3. Custom Built Frontend + Backend

來看看吧！

使用第3方服務如wix/shopify

難易度：★☆☆☆☆
靈活度：★☆☆☆☆

如果你不想編程，最簡單的架站方法，就是使用第3方服務如wix/shopify，去建立一個網站。

wix/shopify提供簡易的drag & drop介面，讓你使用他們的模版，去建立網站。

wix.com讓你建立一般的公司網頁：

shopify.com讓你建立網店：

當然，使用這些第3方服務也有其缺點。就是你沒有網站源代碼掌控權（因為你是在使用他們的服務）。因此，網站的靈活度，可擴充性會較低。另外，某部分服務也可能需要收費。

使用Wordpress架站

難易度：★★☆☆☆
靈活度：★★★★☆

利用Wordpress架站是另外一個非常流行的方法。

Wordpress是一個最多人使用的CMS。它是免費，開源，也具備大量模版及可擴充的功能。即使你不懂編程，你也可以利用wordpress架站。

要注意我們這裡討論的是wordpress.org，而不是wordpress.com。wordpress.org是一套免費，開源的CMS。而wordpress.com則是像wix一樣的第3方服務。

利用wordpress架站的難度，會比wix/shopify高一點。（因為你還需要設置伺服器等）然而，它的靈活度及可擴充性則會大得多。你是完全掌控網站源代碼的。因此，你會編程的話，基本上任何的功能，外觀也可以加到你的網站裡。

了解更多Wordpress：Wordpress教學全攻略2019 - 15個課程

Custom Built Frontend + Backend

難易度：★★★★★
靈活度：★★★★★

最後一種架站方法，當然是自己Custom Built Frontend 和 Backend。

這是我最常用的架站方法。聽下去好像很難，但其實現今的Frontend及Backend Framework已經非常成熟。

即使要從頭編寫一個網站外觀及功能，也可以很快。

你也可以只用一些HTML Template，配上一個內容管理系統，讓你快速架站。

第4章設計美感

很多人在剛剛學習網頁設計時，也會遇到一個問題 - 就是做出來的網頁或APP，好像不太漂亮。

原因是很多人，都很容易忽略了一樣東西 - 設計美感。

無論你Programming有多強，但如果你做出來的東西不漂亮，用家看見的，就是一個不漂亮的產品。

他們不會知道你背後的code寫得多優美，只會在一個很表面的層面，去使用你的網頁/APP。

在這一章，我會與你分享一些簡單TIPS，提高你的設計美感。

尋找靈感

在開始設計網站時，我們一定會做Research。

比方說，我正在為一家HR公司設計網頁。在設計前，我一定會先看看

  • 其他HR公司的網頁(香港)
  • 其他國家HR公司的網頁
  • 香港/其他國家，做得出色的公司網頁

做Research時，你除了可以看見你競爭對手網頁的layout外，還可以看到他們的用字，表達的內容等等。對你在設計網頁時，非常有用。

培養設計美感

我在教授網頁設計時，發現學生常常遇到一個問題：

明明他們選擇的template很美麗，但當真正使用，做出來的作品卻不太專業。

為什麼呢？

原來，他們缺乏設計美感。修改template時往往把它改得亂七八糟，不倫不類。

設計美感是要培養的。而最快去培養設計美感的方法，就是：

多看一些美麗的作品

behance收集了世界各地最美麗的平面設計

awwwards收集了世界各地最美麗的網頁設計

最後，如果發現自己的設計美感還是不太行，在修改template時，就盡量不要做大的修改！以免改得不倫不類。

第5章編程學習路徑

好了！如果你終於下定決心，要學習網頁編程。那麼，你應該從哪裡開始學起？

以下是我推介的學習路徑：

前台（Frontend）：

  1. HTML
  2. CSS + Bootstrap
  3. Javascript
  4. JQuery
  5. GSAP
  6. Vuejs + Nuxtjs

後台（Backend）：

  1. PHP + Wordpress
  2. Nodejs + Strapi

編程學習路徑 - Frontend

學習網頁編程，我的建議，是你應該由Frontend語言開始學。

第一樣需要學習的是HTML（外觀的結構）。

接下來可以學習CSS（讓外觀更美麗）。

學習完基本CSS後，你可以學習一些常用的CSS Framework，例如Bootstrap。

Bootstrap: https://getbootstrap.com/

Framework是一堆一早寫好的源碼，讓你隨時使用。利用不同的Framework，可以讓你大大加快開發速度。

再下來就是javascript。

學習完基本javascript後，我們通常還會學習jQuery (雖然現在少用了很多，已版Javascript Framework取代。但基本的jQuery我還是覺得要學會)。jQuery是javascript以上的一個Framework，實際應用很多。

到了這步後，你已經成為了一個很基本的Frontend Developer！你已經可以自已去開發各種漂亮，專業的網頁外觀。

接下來，你可以學習一些動畫Framework，例如GSAP。

Greensock: https://greensock.com/

最後一步，就是學一些Javascript Framework去做Web APP，如Angular，Vue，React等等。（WEB APP就是在瀏覽器上運行的軟件，例如Gmail，Google docs等等。）

我自已會推介Vuejs + Nuxtjs，因為它相對簡單，易學易用。

Vuejs: https://vuejs.org/
Nuxtjs: https://nuxtjs.org/

編程學習路徑 - Backend

在眾多後台語言中，我會建議初學者學習PHP。因為比較普及又易學。

學習完基本PHP後，你可以學習一些以PHP為語言的CMS開發，例如Wordpress。

Wordpress: https://wordpress.org/

你也可以學習Nodejs。它基本上是Javascript來的，只不過是在後台運行。

你可以學習一些以Nodejs為語言的CMS，例如Strapi。

Strapi: https://strapi.io/

總結

恭喜你！這麼長的教學，你也看完了！相信大家看到這裡，對於網頁設計，已掌握了一定的基礎概念。

今天的教學到這裡，希望大家可以好好學習！

如果大家有什麼的問題，都可以Email問我！

你可能也會喜歡...

加入我們的Email List

免費參加【網頁開發入門CRASH COURSE】線上課程！