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

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

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

今天,這篇「寫網頁教學課程2021 」,將會分開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】線上課程!