認識網頁開發從生活開始

曾想想過自己花多少時間上網嗎？

重度網路成癮症的我們每天拿著手機滑呀滑的，通勤時滑，就連上班和上廁所的時候都在滑，就這樣，我們每天在不同的社群平台瀏覽大量資訊，在不同的網頁上來回擷取資訊，滑手機漸漸變成現代人一種戒不了的癮！

你可能心裡有個網站待看清單，每天固定來回瀏覽 Facebook 和 Instrgram 又或是網拍的新品登場，你也可能沈迷於社群媒體，深怕錯過周遭身邊親友的分享，讓自己一不小心就變成時代的眼淚（擦）；你也可能透過某個網頁獲得知識，經由連結或是搜尋進到其他網站，資訊的流通彈指間就能完成。

你最常瀏覽的網站又是哪些呢？

也許有人會說 PChome 或是 Ikea，但不論是哪一個網站，你曾經想過自己的視覺習慣嗎？每次瀏覽網頁時，哪些網站會特別留住你的目光呢？它們有什麼共同的特色或是風格呢？

如果你是網頁菜菜子，不妨跟筆者的腳步認識一下網頁是什麼，跟著我的視角來練習，一步一步打穩網頁的基本概念！

網站怎麼組成了呢？

我們每天瀏覽的網站到底是怎麼組成呢？這邊簡單地將網站分為「前端」和「後端」。

前端：掌管一個網站的所顯現的畫面和排版。
後端：控制一個網站的功能或是資料庫管理，例如：金流或是發信系統。

這是最籠統的分類，不管是前端和後端，它們的學問極深，都有各自的發展規則，彼此可能卻有息息相關。

認識網頁開發從生活開始
Photo by Florian Olivo

❏ 前端的三大基礎天王

筆者要帶大家稍微認識前端的三大基礎天王，用一個簡單的例子讓大家可以更好理解。
想像一下，如果我們把網站想像成一個人，「前端」- 負責一個人的外貌長相有沒有突出，而「後端」就控制人的器官和四肢能不能正常運作。

前端，你必須要認識三大天王，它們分別為 HTML 和 CSS 以及 JavaScript。有了以上三位的幫忙，一個人的肢體表現才能活靈活現！

HTML：就是臉上的五官和身體的四肢要擺在對的地方，總不能把嘴巴擺在眼睛的上面。
CSS：可以想成化妝品和裝飾品， CSS 替你的身體穿上一件漂亮的洋裝還是帥氣的皮外套；又或是要替你的嘴巴畫上淡橘還是現在流行的奶茶色口紅，跟外觀相關的就由 CSS 來決定。
JavaScript：則是掌管身體的神經元素，讓骨架可以移動，讓身體可以改變姿勢。

透過這樣簡單的介紹，從生活開始認識網頁，對於「前端」這個名詞在網站上代表的意思，是不是具體多了呢！

❏ 網頁起步走

仔細回想大家開網站的習慣，都我們透過連結又獲釋搜尋引擎進入網站，而網站內又按主題分類分成數十個網頁。
我們就先從網頁寫在哪裡開始認識吧！

❏ 網頁寫在哪裡呢？

無論你是要寫在電腦裡頭的記事本，又或是 Office 的 Word ，只要能把文字寫下來的應用程式都可以用來寫網頁，要特別注意的是網頁是由 HTML 格式完成的，不過你用什麼應用程式，副檔名記得改成 .html，這樣在瀏覽器 (Chrome、Safari、Firefoxe 等)開啟檔案時，才能正確讀取唷！
但一般寫網頁會在專門寫網站的工具編輯器或網站上撰寫喔！ (別擔心，這篇文章將會一步一步帶你認識這些工具！)

❏ 寫在 CodePen

你甚至可以使用線上的程式碼編輯器 CodePen 學習，優點是每個輸入的步驟都會同步更新，讓你可以立刻所見即所得。

認識網頁開發從生活開始-codepen

接著點選左邊的 Pen 後，畫面則會被切為兩半，上半又分為 HTML、CSS 和 JavaScript 三個部分，下半部則會根據你上方所做的動作而呈現出來的內容。

認識網頁開發從生活開始-codepen

看看 CodePen 的結構，我們已經很清楚的知道 HTML、CSS 以及 JavaScript 可以寫在對應的欄位，當你寫在對應欄位，畫面上的效果也會跟著語法而改變。

❏ 寫在 VScode

市場上有著各種不同的程式碼編輯器，無論是哪種都有各自的擁護者，就趁這篇文章來大家簡單介紹開源免費的編輯器 Visual Studio Code，目前也是市場上使用人數最多的編輯器唷！

下載起步走

認識網頁開發從生活開始-vscode

下載完 Visual Studio Code 後，可以安裝一些套件，可以大幅減低輸入語法的時間。

認識網頁開發從生活開始-vscode

VS Code 在寫，套件要有

fakimg：快速生成假圖。
當我們在開發一個網站時，會想要大概排出圖片和文字的位置，有時候可能是還沒找到對應的圖片，這時候就可以使用假圖來先畫出心中預設的網頁畫面。
live-serve：看語法在瀏覽器所呈現的畫面。
每當寫好一個標籤或是效果的時候，想要看它在瀏覽器所呈現的畫面，這個時候就可以用 live-serve 的套件直接看畫面，讓你可以不用存好檔案再打開來看。
Chinese Lorem：可快速產生無意義的中文文字，讓你可以快速放入。
為了暫時版面網頁的畫面效果，可以先穿插一些假字來預先呈現網頁的整個雛形。
Auto rename tag：改了標籤後，重複的標籤可以選取一起更改。
每個語法都會有一些規則，這些規則往往是重複書寫的，這時候如果使用該套件，一些語法就可以快速一鍵生成或是一鍵修改。

既然介紹下載 VS code，就趁現在好好的安裝以上介紹的這些套件，之後也有助於自己可以更有效率地開發網頁。今天的網頁面面觀到此為止，下篇文章我們再來好好介紹語法寫在編輯器上的規則和呈現方式！