設計網站外觀
本文將講述在編寫網站代碼之前，需要進行什麼樣的規劃和設計工作，包括「網站提供哪些信息？」、「用哪些字體和顏色？」、「網站是做什麼的？」等。
第一步：計劃
做任何事情之前，都要先有一些想法。你的網站到底是做什麼的？一個網站基本上可以做任何事情，但對於第一個網站來說，最好簡單一些。我們將從創建一個簡單網頁開始，它包含一個標題、一張圖片和幾個段落。
首先，請考慮以下問題：
-
網站的主題是什麼？你喜歡狗、上海、還是吃豆人？
-
基於所選主題要展示哪些信息？寫下標題和幾段文字，再找個你想在網站上展示的圖像。
-
背景顏色用什麼，或者，用高級一點的話來說，你的網站外觀是什麼樣的？使用哪種字體比較合適：正式的、卡通的、粗體還是瘦體？
備註： 複雜的網站需要更詳細的指引，深入到顏色、字體、頁面上元素的間距、適當的書寫風格等等以及其他細節。這有時被稱為設計指南、設計系統或品牌手冊，可以在 Firefox Photon 設計系統中找到一個示例。
繪製草圖
接下來，拿起筆和紙，大致勾勒出你所希望的網站樣子。當然，這個簡單的網頁不需要太複雜的草圖，但你現在應該養成這樣做的習慣。畫草圖很有用——並且不需要梵高的手法！
備註： 即使在實際的複雜網站中，設計團隊通常也是從粗略的草圖開始設計的，再使用圖形編輯器或 Web 技術建立數字模擬圖。
Web 團隊通常包括一個平面設計師和一個用戶體驗（UX）設計師。平面設計師把網站的視覺效果放在一起。用戶體驗設計師則以一種更抽像的模式來解決用戶如何體驗及與網站交互方面的問題。
選定素材
此時，就可以開始組織網頁上的內容了。
文本
準備好剛才撰寫的標題和文字。把這些東西放到旁邊。
主題顏色
使用色彩選擇器挑選心儀的顏色。當選中某種顏色時，會顯示一個六位神秘代碼，類似於 #660066。它是一個十六進制數，用於表示顏色。將其複製並暫存。
圖像
訪問 Google 圖片搜索 來搜索合適的圖片。
-
當找到你想要的圖像時，點擊該圖像以獲得其放大的視圖。
-
右鍵單擊圖像（Mac 上為 Ctrl + 單擊），選擇將圖像另存為...，並選擇一個可靠的位置來保存你的圖像。或者，從瀏覽器地址欄中複製圖片的網址，以便以後使用。
請注意，網絡上的大多數圖片，包括谷歌圖像中的圖片，都是有版權的。為了減少侵權的可能性，可以使用谷歌的許可證過濾器。點擊工具按鈕，然後點擊下面出現的使用權限選項。你應該選擇知識共享許可這個選項。
字體
和圖片一樣，很多字體都受版權保護，也就是說，你不可以在你的網站上隨意使用它們。Google Fonts 是 Google 旗下的網絡服務，提供了許多字體許可。
選好字體後，你有兩種方式使用它：
備註： 在你的網站使用從 Google 服務器加載的字體可能會違反歐盟的數據隱私規定 GDPR，因為加載字體時會暴露用戶的 IP 地址。如果你遇到這種潛在風險，需要選擇第二種方式。
另一個選擇是使用 安全 Web 字體，如 Arial、Times New Roman、Courier New。
jangowt2xrfLGu20230101x8dm5