【網頁入門】01 .基礎概念與安裝

 

●基礎架構：HTML+CSS+JS

一份網頁的內容，基礎需包含三種文件：HTML、CSS和JS。

這三種文件類型在網頁中執行不同的功能，將建構網頁比喻為蓋房子的話，HTML是網頁的架構，等於房屋的鋼筋，蓋房子之前需要先決定房子的架構，內部需要幾間房間、有幾間廁所......這些會在html內寫好，才能套上CSS文件──房屋的裝潢（決定網頁內容呈現的外觀）。比如牆壁的顏色、要不要貼壁紙等等......而在html（房子）和CSS（裝潢）都完成後，記得為屋子通電接水（JS文件），讓使用者可以和空間互動，確定按下某個開關後，屋內的燈會亮起來、功能可以正常運作。

●安裝編輯器：Sublime https://www.sublimetext.com/

編輯器是寫網頁的工具，另有VS code、Notepad、Brackets...等等編輯器，可以嘗試不同的編輯器，找到最符合自己使用習慣的工具，此次以Sublime作示範介紹。

從官網下載安裝完成後，需要安裝套件讓編寫程式碼的過程更快速順利。
使用Ctrl+Shift+P 呼叫安裝套件的控制器， 輸入:Package Control : Install Package 點擊Enter安裝。

等待選單再次出現，即可輸入要安裝的套件名稱，按Enter確認安裝。
每一次安裝套件前都要先呼叫Package Control，重複步驟:Ctrl+Shift+P > 呼叫Install Package > 出現選單再輸入套件名稱> Enter安裝。

安裝過程畫面不一定會出現提示，安裝時可以看到左下角會有等號左右跑，跑完即安裝完成。

建議安裝的套件（之後文章會使用以下套件的快捷鍵）：

更多套件可至 Packagecontrol (https://packagecontrol.io/) 找尋或參閱。