影片素材大全(2022年更新) - 16個免費可商用，無版權的影片素材網站
這篇「免費影片素材大全(2022年更新)」精選了16個「CCO」和「CC by」授權的免費可商用，無版權的影片素材網站，不論你需要什麽影片素材，這裏都一應俱全！
寫網頁教學課程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種編程語言組成，它們分別是：
- HTML
- CSS
- 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)了。
整個上網的流程，就像這樣：
- 用家開電腦
- 開瀏覽器
- 在瀏覽器輸入網址
- 網址變成IP Address
- 根據IP Address，找到伺服器
- 問伺服器可否看你的網頁
- 伺服器說OK，它給你HTML
- 瀏覽器收到HTML，把它變為你看得懂的網頁
第2章架站步驟
一般來說，要建立一個網站或平台，一共有4個步驟。
他們分別是：
- 用家體驗 （USER EXPERIENCE）
- 資訊架構 （INFORMATION ARCHITECTURE）
- 設計 （VISUAL DESIGN）
- 開發 （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外，還可以看到他們的用字，表達的內容等等。對你在設計網頁時，非常有用。
第5章編程學習路徑
好了！如果你終於下定決心，要學習網頁編程。那麼，你應該從哪裡開始學起？
以下是我推介的學習路徑：
前台（Frontend）：
- HTML
- CSS + Bootstrap
- Javascript
- JQuery
- GSAP
- Vuejs + Nuxtjs
後台（Backend）：
- PHP + Wordpress
- 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/
總結
你可能也會喜歡...
Wordpress備份Backup教學 - 外掛 + 手動方法, 讓你完成WordPress搬家
這篇「Wordpress備份Backup教學 - 外掛 + 手動方法, 讓你完成WordPress搬家」將讓你學會：備份Wordpress技巧及WordPress搬家移轉的技巧，並分享一個外掛工具，讓入門者更容易進行Wordpress搬家。
加入我們的Email List
免費參加【網頁開發入門CRASH COURSE】線上課程！
