技術類文章

金魚也能學會寫網頁-編輯器

“工欲善其事，必先利其器”。好的編輯器讓你事半功倍，壞的編輯器讓你事倍功半。

💡 Hint: 以下筆記內容所使用的作業系統為"Windows 10"

📝 編輯器的選擇

1: 記事本

  • 好處是不用安裝每台電腦都有，但接著看下去的話，相信你不會想要選這個做為編輯器。

2: Notepad++

  • 跟上面的記事本很像，但它本身支援多種語言的撰寫，會自動為關鍵字標上各種不同的顏色，在排版上也較記事本容易許多(在視窗左方有行號可以對照)。

3: Adobe Brackets

  • 由 Adobe Systems 開發的一個以 HTML、CSS 及 JavaScript 編寫的 HTML 編輯器。除了 Notepad++ 有的功能以外，在編寫 HTML 元素的屬性時，會自動出現一些相關的關鍵字供選擇，同時也提供即時預覽網頁功能，最後也可透過安裝擴充元件的方式，讓編輯器功能更加強大!

4: Microsoft Visual Studio

  • 上面有的功能，Visual Studio 通通都有，它有各式各樣酷炫的快捷鍵，保證在編寫時的高效率。同時，可以安裝的擴充元件極多，你可以將編輯器調教成自己最舒服的環境~

私心排名: Visual Studio > Brackets > Notepad++ > 記事本

💡 Hint: 除了上面介紹的四種編輯器，其他還有許多沒有被提到。上述的都是我用過的編輯器，個人私心推薦使用 Visual Studio 作為主要編輯器。

🚀 BONUS: 安裝 Visual Studio

如果你已經有用習慣的網頁編寫工具，可以選擇略過此部分，下面以VS Code為例

💡 Step 1: 下載並安裝 VS Code

Download VS Code 👉基本上按照預設一直點下一步就行

💡 Step 2: 設定 VS Code 環境

  1. 設定Ctrl+滑鼠滾輪的程式碼縮放功能、自動儲存

  1. 安裝Live Server套件

💡 Step 3: 使用快捷鍵建立基本架構

  1. 開啟欲存放檔案的資料夾
  2. 右鍵新增.html檔案
  3. 在檔案內輸入 !+Enter 或 !+Tab 自動生成基本架構(如下方程式碼區塊)

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

💡 Step 4: 使用 Live Server 檢視網頁

  1. 點擊右下角 Go Live，此時瀏覽器應自動開啟並顯示網頁

:::info
💡 Hint: 1.若在右下角沒看到 Live Server，請在程式碼區塊內按滑鼠右鍵，點擊 Open with Live Server。 2.網頁預設路徑: 127.0.0.1:5500。
:::

👇 檢視你的網頁!

成功完成基本環境設定! 😆

分享到