安裝基本軟體
在本文中，我們將討論需要哪些軟體來進行簡單的 Web 開發，以及現在需要安裝哪些軟體，包括程式碼編輯器和一些現代 Web 瀏覽器。
| 先備知識： | 對所使用的電腦作業系統有基本認識。 |
|---|---|
| 學習成果： |
|
程式碼編輯器
一個體面的程式碼編輯器是任何開發者在其機器上必備的重要工具之一。程式碼編輯器不僅是撰寫程式碼的地方，它還具備許多其他功能。我們在後續的系列中專門撰寫了一篇關於程式碼編輯器的文章。
目前，我們建議安裝 Visual Studio Code，因為它支援多個平台、擁有優秀的功能集和支援，且是大多數人主要使用的編輯器。你應該現在就安裝它，以便後續跟著本文操作。
現代 Web 瀏覽器
擁有現代 Web 瀏覽器對 Web 開發至關重要，這樣才能在訪客使用的瀏覽器上測試你所建立的 Web 或應用程式。你也需要保持瀏覽器更新，以確保它們支援最新的網頁技術並套用最新的安全修補。
備註： 大多數瀏覽器會自動安裝更新，並在重新啟動時套用變更。你通常可以在瀏覽器「關於」頁面中檢查更新，例如在 Firefox > 關於 Firefox 或 Chrome > 關於 Google Chrome（macOS 上的 Firefox/Chrome），或在選單圖示 > 說明 > 關於 Firefox 或選單圖示 > 說明 > 關於 Google Chrome（Windows 上的 Firefox/Chrome）。
目前，你應該安裝幾款桌面以及行動／其他裝置的瀏覽器，以便測試你的程式碼。你最常會在桌面、筆記型電腦和行動裝置上接觸到 Web 瀏覽器，但也可能在平板電腦、手錶和電視等其他裝置上接觸到 Web 瀏覽器。如果可能，請確保每個渲染引擎系列中至少安裝一款瀏覽器（這樣你就不會只在多個基於相同渲染引擎的瀏覽器中進行測試）：
- 桌面瀏覽器：
- Chromium：Google Chrome、Opera、Brave、Microsoft Edge、Vivaldi。
- Gecko：Mozilla Firefox。
- WebKit：Apple Safari。
- 行動／其他裝置瀏覽器：
- Chromium（Android）：Google Chrome、Opera、Brave、Microsoft Edge、Samsung Internet、Vivaldi。
- Gecko（Android）：Mozilla Firefox。
- WebKit（iOS）：Apple Safari。
備註： 上述大部分 Android 瀏覽器在 iOS 上都有版本，但由於蘋果的 App Store 規定，歷史上它們皆使用蘋果的 WebKit 引擎。撰寫本文時，由於規範變更，各瀏覽器正開始推出基於自家渲染引擎的 iOS 版本。請參閱 Apple 終於允許 iPhone 上運行完整版本的 Chrome 和 Firefox。
本機 Web 伺服器
通常當你在瀏覽器中輸入網址以載入網站時，組成該網站的檔案會從遠端網頁伺服器（位於世界其他地方的伺服器電腦上）取得，再由瀏覽器組合渲染。你將在系列的下一篇文章中進一步了解這個過程。
當你在本機（自己的電腦）上建立網站時，你通常可以直接在瀏覽器中載入主要 HTML 索引檔進行測試。然而，部分範例需要透過本機安裝的網頁伺服器才能正確運作。
我們發現其中一個最簡單的方法是使用程式碼編輯器擴充功能——如此一來，它就能直接在你的程式碼編輯器內運作。請在 Visual Studio Code 中依照以下步驟操作：
- 使用檢視 > 擴充功能選單選項開啟擴充功能面板。
- 在此面板頂部的「搜尋...」欄位中輸入「live preview」。搜尋結果最上方應該會顯示由 Microsoft 所建立的 Live Preview 擴充功能。
- 點選該選項以開啟包含使用說明的頁面。
- 按下安裝按鈕以安裝此擴充功能。
- 現在，當你在編輯器中處理 HTML 檔案時，你應該可以點擊「顯示預覽」按鈕，在另一個分頁中開啟即時範例。
上述方法雖簡單，但彈性有限。未來你可能會希望擁有更具彈性的本機伺服器選項，以便在任何可用的瀏覽器中載入範例。關於其他選項（以及更多有關為何需要本機伺服器的背景資訊），請參見如何設定本機測試伺服器？。
圖形編輯器
網頁開發者常常需要處理用於網站的影像，這可能意味著設計／建立圖形資產；但同時，這些圖形也可能由圖形設計師（可能是團隊成員或第三方）提供，此時你可能需要裁切或調整接收到的檔案大小。
MDN 的學習文章均不要求你自行建立圖形，但部分文章可能要求你處理我們所提供的檔案。
市面上有許多圖形編輯工具可供選擇。我們建議你在學習過程初期不要購買昂貴的商業產品，如果你認為真的有需求，現有許多免費軟體工具和線上服務，對目前來說可能已足夠使用。
例如：
- macOS 附帶一個名為 Preview 的工具。該工具主要用於檢視影像和 PDF，但也提供調整大小、旋轉、裁切、註記以及不同檔案類型轉換等實用的影像編輯功能。
- 內建於 Windows 的相片應用程式具備許多類似功能。
- tinypng 網站提供免費服務，讓你壓縮 PNG、JPEG 等檔案。這是在準備網站資產時你常需執行的任務。
若你有更進階的圖形編輯／建立需求，你會需要一套完整的圖形軟體套件。就商業產品而言，Adobe Photoshop 長期以來一直是業界標準，而其他熱門產品還包括 Figma、Sketch 以及 Canva。
如果你的預算有限，以上大部分應用程式皆提供試用或免費模式，值得你一試。也有一些備受推崇的免費應用程式，例如 GIMP、Adobe Express 以及 Paint.NET。