認識網頁開發從生活開始

#HTML
Keddie
技術文章
認識網頁開發從生活開始

Photo created by tirachardz - freepik

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

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

你可能心裡有個網站待看清單,每天固定來回瀏覽 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,就趁現在好好的安裝以上介紹的這些套件,之後也有助於自己可以更有效率地開發網頁。今天的網頁面面觀到此為止,下篇文章我們再來好好介紹語法寫在編輯器上的規則和呈現方式!

延伸閱讀



推薦課程

👩‍🏫 課務小幫手:

✨ 想了解更多 HTML / CSS 知識和技巧嗎?
也歡迎報名課程 👉 網頁前端設計女性專班