安裝基礎軟件
- 計算機
- WebStorm
- Web瀏覽器：Microsoft Edge
- 圖像編輯器
- 版本控制系統：Gitee - 基於 Git 的代碼托管和研發協作平台
- 自動化構建工具：用來自動完成壓縮代碼和運行測試等重復性任務（使用WebStorm中的插件：Gradle）
設計網站外觀
做出計划
- 網站主題是什么？
- 基於所選主題要展示哪些信息？
- 網站采用怎樣的外觀？
注：復雜項目需要更詳細的指引，包括顏色、字體、間距、編寫規范等等。亦稱為設計指南、設計系統、品牌手冊
繪制草圖
接下來，拿出紙筆畫出網站草圖。雖然第一個簡單網頁能做的不多，但最好在一開始就該養成這樣的習慣。畫草圖很有用，而且並不需要梵高的手法。
選定內容
文本
包括標題和文字
主題顏色
色彩選擇器：一個好用的調色板 | 顏色選擇器 - Codeeeee 在線工具
色彩提取器：安裝 PowerToys | Microsoft Docs
圖像
- 找到心儀的圖片時，單擊放大。
- 右擊圖片，選擇 “另存圖像為...”，然后選擇一個安全的位置存放這張圖像。也可以復制你的瀏覽器地址欄上的圖像地址以便后來使用。
請注意大多數網絡圖片（包括 Google 圖片）都是受版權保護的。為了降低盜版風險，可以使用“Google 許可證過濾器”。點擊“工具”按鈕，然后在使用權限的選項下選擇類似“啟用CC授權”的選項：
字體
- 打開右側邊欄可現實選中的字體家族。
- 可通過 Categories（類別）、Languages（語言）、Font Properties（字體屬性）過濾想要的字體。
- 在列出的字體風格列表中，選擇合適的粗細、是否傾斜等信息。
- 在右側邊欄中可以看到 Google 給出的代碼片段，將其復制到文本編輯器就可以使用了。
處理文件
網站由文本、代碼、樣式表、媒體內容、等多種文件組成。構建站點時要確保文件夾結構合理，文件之間交互通暢，沒有明顯錯問，然后再上傳至服務器。
網站應保存在何處？
對於本地網站，應將所有相關文件放在一個單獨文件夾內，可以映射出服務器端站點文件結構。
- 確定網站項目儲存位置。在該位置下創建一個文件夾（比如
web-projects）。所有網站項目都存在一處。 - 在這個文件夾里再新建一個文件夾（比如
test-site，），來存放第一個網站。
關於大小寫和空格的提示
文中所有的文件夾名和文件都使用小寫字母，且沒有空格。
- 很多計算機，特別是 Web 服務器，是對大小寫敏感的。
- 瀏覽器、Web 服務器，還有編程語言處理空格的方式不一致。比如，一些系統會將包含空格的文件名其視為兩個。一些服務器將會把文件名里的空格替換為 “%20”（URI 里空格的編碼），從而使鏈接遭到破壞。
- 最好使用中划線，而不是下划線來分離單詞：對比
my-file.html和my_file.html。谷歌搜索引擎把連字符當作單詞的分隔符， 但不會識別下划線。基於此，最好在一開始就養成習慣，文件夾和文件名使用小寫，用短橫線而不是空格來分隔。可以避免許多問題。
網站應該使用什么結構？
最基本的結構：主頁、圖片文件夾、樣式表文件夾和腳本文件夾。
- 主頁
index.html：這個文件一般包含主頁內容，即用戶第一次訪問站點時看到的文本和圖像。使用文本編輯器在test-site文件夾中新建index.html。 - 圖片文件夾
images：這個文件夾包含站點中的所有圖像。在test-site文件夾中新建images文件夾。 - 樣式表文件夾
styles：這個文件夾包含站點所需樣式表（比如，設置文本顏色和背景顏色）。在test-site文件夾中新建一個styles文件夾。 - 腳本文件夾
scripts：這個文件夾包含提供站點交互功能的JavaScript代碼（比如讀取數據的按鈕）。在test-site文件夾中新建一個scripts文件夾。
文件路徑
為使文件間正常交互，應為每個文件提供訪問路徑，讓一個文件知道另一個文件的位置。在index.html 文件中插入一小段 HTML，讓其顯示設計網站外觀小節中的Hello World圖案。
-
將Hello World圖案保存到
images文件夾。 -
打開
index.html文件，粘貼以下代碼。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的測試頁面</title> </head> <body> <img src="" alt="我的測試頁面"> </body> </html> -
<img src="" alt="我的測試頁面">是在頁面里插入圖像的 HTML 代碼。我們需要告訴 HTML 圖像的位置。這張圖片在 images 目錄下_，_而 images 目錄與index.html處於同級目錄。要從index.html所處一級目錄進入圖片所在目錄。例如，這里的圖像叫做helloworld.png，所以文件路徑就是images/helloworld.png。 -
在 HTML 代碼里
src＝""的雙引號中插入文件路徑。 -
保存 HTML 文件，然后使用瀏覽器打開（雙擊文件）。
文件路徑的一些通用規則：
-
若引用的目標文件與HTML文件同級，只需直接使用文件名，比如
helloworld.png
-
要引用子文件夾中的文件，要在路徑前寫下目錄名並加上一個斜杠，比如
images/helloworld.png。
注：Windows 文件系統使用反斜杠而不是正斜杠，比如 C:\Windows 。但與 HTML 沒什么關系，即使在 Windows 上做 Web 開發，代碼中仍應使用正斜杠。
-
若引用的目標文件夾位於HTML的上級，需要加上兩個點。比如，如果
index.html在test-site下面的一個子目錄html中，而helloworld.png在test-site目錄，你可以在index.html里使用../``helloworld.png引用helloworld.png。
-
以上方法可以隨意組合，比如
../subdirectory/another-subdirectory/helloworld.png。