【写网页教学课程2021】5个章节, 从零学习网页设计

如果你想学习网页设计，随便网上一找，便会发现，怎么这么多资料？

虽然资料很多，但就是因为资料太多，初学者根本无从入手。

今天，这篇「写网页教学课程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问我！