用HTML、CSS、JS打造個人網站 (1)

###### tags: `前端技能樹` # 用HTML、CSS、JS打造個人網站 (1) **所有的網站大概可以分成兩類：靜態網頁、動態網頁**，靜態網頁顧名思義就是靜止的網頁，不會去太頻繁的更新內容；動態網頁則是會根據使用者的輸入而有不同的內容更新，包含的功能像是會員登入、購物車...等等。在前幾篇學到一些網頁的基本組成HTML、CSS、JS的知識，所以接下來就要來個小試身手，嘗試打造一個完整的靜態網頁 — 個人網站。 ![](https://i.imgur.com/eY2QprJ.gif) >網站成品示意 ## 前置準備首先到[範例程式碼](https://github.com/peiyunlee/ithome-21ironman-personalwebsite)下載專案，裡面包含完成版網頁和圖片包，你可以自己創建一個新的資料夾，再把 assets/images 裡的圖片包拖進去，並用 Vscode 開啟建立專案的架構，除了圖片包，還要新增必要的 HTML、CSS 檔案，整個專案的架構會長這樣： ``` |-- css |-- style.css |-- assets |-- images |-- ... |-- index.html ``` ### 開啟本地伺服器編輯網頁之前，要先建立 HTML 的文件架構，這裡我們可以使用 Emmet，輸入 ```!``` 再按 ```tab``` 快速建立。再來因為要一起編輯 HTML、CSS，所以直接連結 CSS 檔案 style.css。完成之後的程式碼會長這樣： ```html= <!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>Peiyun's website</title>  <link rel="stylesheet" href="css/style.css"> </head> <body>  </body> ``` 接下來要開啟本地伺服器編輯網頁並且使用即時更新的功能，所以在 index.html 右鍵點擊 ```Open with Live Server```，就能開啟網頁（如果你還不知道 Live Server 是什麼，可以參考我的[這篇](https://ithelp.ithome.com.tw/articles/10260748)） ![](https://i.imgur.com/t2nUlIu.png) ### 拆解設計稿開啟 design 資料夾內的 1024.png，是螢幕寬度為 1024px 的設計稿，我們會先從這個版本開始做，設計稿內使用的個人介紹、作品都可以自行更換成你的版本。那就先來分析一下設計稿，看看 HTML 的架構會長成什麼樣子： ![](https://i.imgur.com/ouIQz9X.png) 可以發現整個網頁的大區塊主要會分成 **Header** / **Primary** / **Works** / **About** / **Footer** 五個區塊，接下來我們就會照著這個架構，一區一區的來編輯各自的 HTML 和 CSS。 ### 引入網頁字體另外在 style_guide.png，列出了設計稿採用的一些樣式規範。在網頁中會使用到三種字體，需要先引入才能使用 ```font-family``` 套用，所以要在 style.css 輸入下面的程式碼： ```css= @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Fira+Sans+Extra+Condensed:ital,wght@1,700&family=Philosopher:wght@700&display=swap"); ``` ### 清除預設樣式 **其實HTML的元件大多有預設的樣式，在很多情況下這些預設的格式會干擾排版**，使用 [Normalize.css](https://necolas.github.io/normalize.css/) 將這些預設樣式移除。你可以直接複製範例程式碼的 normalize.css 加到你的專案中的 CSS 資料夾中，並在 index.html 引入： ```html= <head> ...  <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> ``` 終於完成了我們的前置作業，接下來就開始在```<body>```裡面編輯網頁內容吧。 ## Header ![](https://i.imgur.com/R7r8rd4.png) ### 建構內容首先要加上語意化標籤 ```<header>```，上圖你可以看到我拆解了 Header 的架構，**藍區是網頁顯示的內容 / 紅區是包裹的容器**。主要有 **Logo** 和 **Navigation** 左右兩區。要注意的是，我們統一要在每個區塊的最外層設置 ```wrapper-content``` 包住內容，這樣內部元素寬度使用百分比的話，**只要控制最外層的大小，裡面的內容就會去自動縮放**。 index.html ```html= <body> <header> <div class="header-content wrapper-content"> <h1 class="logo">PEI-YUN</h1> <nav class="header-nav"> <a href="" class="link__text">HOME</a> <a href="" class="link__text">ABOUT</a> <a href="" class="link__text">WORKS</a> </nav> </div> </header> </body> ``` ### 設定排版、寬高樣式目前先不管螢幕的大小，統一設定 ```wrapper-content``` 的內容寬度為1024px，再另外設定每個區塊各自的樣式，這邊會是 Header 區塊 ```header-content```。 style.css ```css= .wrapper-content { box-sizing: border-box; width: 1024px; } .header-content { background-color: #fff5da; height: 70px; padding-left: 30px; padding-right: 30px; display: flex; justify-content: space-between; align-items: center; } .header-nav { width: 330px; display: flex; justify-content: space-between; } ``` ![](https://i.imgur.com/M2ZXb7W.png) ### 設定外觀、文字排版搞定了之後，要設定字體。發現```<a>```的元素帶有連結的預設樣式，但我們不需要，所以要清除字體顏色和下底線的預設。**要記得使用 Tag Selector 時，記得放在最前面才不會覆蓋後面的設定。** ```css= body { font-family: "Noto sans TC", sans-serif; letter-spacing: 1px; color: #333; line-height: 1.4; } a { text-decoration: none; color: #000; } ... .logo { font-family: "Fira Sans Extra Condensed", sans-serif; font-size: 24px; color: #000; text-decoration: underline; } .nav__text { letter-spacing: 3px; } ``` ### Link-text hover樣式最後要順便把滑鼠移上連結的回饋樣式一併加上，之後只要使用 ```link-text``` 這個 ClassName，就會直接套用樣式。 ```css= .link-text:hover { transition: all 0.2s; /* 轉場效果 */ color: #FFB500; } ``` ![](https://i.imgur.com/Zn9ZMxH.gif) >Header 完成！ ### 清除body的預設樣式到這邊你應該有發現在網頁的邊緣有一區空白，其實是 Body 的預設 Margin 導致的： ![](https://i.imgur.com/4bI5g6A.gif) 加入下面的程式碼來清除預設的樣式： ```css= body { ... margin: 0; } ``` ## Section-Primary ![](https://i.imgur.com/C55sYVA.png) ### 建構內容接著進入網頁的主要內容，首先加上語意化標籤 ```<main>``` 代表網頁的主內容區塊，然後每一個小區塊再用 ```<section>``` 表示，並跟 Header 一樣用 ```wrapper-content``` 包住內容。在 Section-Primary 這個區塊裡面，主要有 **左欄文字** 和 **右欄圖片**： index.html ```html= ... <main> <section class="section-primary"> <div class="primary-content wrapper-content"> <div class="wrapper-primary-text">  </div> <img class="primary__main-img" src="images/headerimg.png" alt=""> </div> </section> </main> ``` 左欄的文字內容，但要注意到 **"I am" 跟其他文字的樣式不太一樣，用 ```<span>``` 包住特別去作設定**。 ```html= ... <div class="wrapper-primary-text"> <h2 class="primary__title section__title">Hi,there<br><span>I am</span><br>pei yun.</h2> <p class="primary__text">I’m a front-end learner based in Taiwan.<br> Now I’m studying for my master's degree in Digital Technology Design at NTUE.</p> <a href="" class="primary__link-button link-button">View Works</a> <div class="primary__social"> <img src="images/github.png" alt=""> <img src="images/codepen.png" alt=""> <img src="images/facebook.png" alt=""> <img src="images/medium.png" alt=""> </div> </div> ... ``` ### 設定排版、寬高樣式 ```wrapper-content``` 的內容我們之前統一寬度為 1024px 了，只需要再設定 Section-Primary 的版本```primary-content```，來控制內部元素的排版。而左右兩欄的寬度，則用百分比去設定，讓它會自動根據父元素的大小去縮放。 style.css ```css= ... .primary-content { background-color: #fff5da; display: flex; justify-content: center; align-items: center; padding-top: 50px; padding-bottom: 80px; padding-left: 30px; padding-right: 30px; } .wrapper-primary-text { width: 40%; } .primary__main-img { width: 60%; height: 100%; } ``` ![](https://i.imgur.com/TTn3Lp5.png) ### 設定外觀、文字排版搞定了之後，一樣設定字體。這邊先特別觀察一下設計稿，**發現到每個 Section 區塊的 Title 都有共通的設定，所以將樣式抽離成 ```.section__title```，之後就能重複套用**。 ```css= ... .section__title { font-family: "Philosopher"; font-weight: bold; color: #000; letter-spacing: 2px; line-height: 1.2; } .primary__title { font-size: 72px; margin-bottom: 20px; } .primary__title > span { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .primary__text { margin-bottom: 25px; } ``` ![](https://i.imgur.com/MjTb7YA.png) ### Button 設計稿的 Button 也都是一致性的樣式，所以一樣將樣式抽離成 ```link-button```，另外加上 ```primary__link-button``` 設定屬於這個區塊、其他的 Button 樣式屬性。 ```css= .link-button { display: inline-block; background-color: #000; border-radius: 3px; padding: 10px 20px; color: white; letter-spacing: 2px; } .primary__link-button { margin-bottom: 40px; } ``` ![](https://i.imgur.com/mQMo70A.png) ### Button hover樣式最後一樣我們要順便把滑鼠移上的回饋樣式加上，只要使用 ```link-button``` 這個 ClassName，就可以直接套用一樣的樣式。 ```css= .link-button:hover { background-color: #ffb500; transition: all 0.2s; } ``` ![](https://i.imgur.com/KUXNRXp.gif) ### Social List ```css= .primary__social { width: 150px; display: flex; justify-content: space-between; align-items: center; } ``` ![](https://i.imgur.com/dMfIDfi.png) >終於完成 Header 跟 Section-Primary 囉！ ## 小結今天講解了開發網頁的前置作業，以及 Header 跟 Section-Primary 的區塊，希望大家都能跟著步驟順利的做出一樣的網頁。雖然在文章中是貼上完整的 CSS 代碼，但建議大家在做的過程中，**可以一段一段去觀察每個樣式會對網頁造成什麼樣的改變，進而去熟悉使用各式各樣的樣式**，這樣會有助於日後你自己做網頁的時候，可以清楚的知道要套用什麼樣式屬性，來達成你想要的外觀。下一篇會繼續講解剩下的三個部分：**Works**、**Section-about** 和 **Footer**，那我們就明天見囉！如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.