iT邦幫忙

2021 iThome 鐵人賽

DAY 14
1
Modern Web

Follow me! 來一場前端技能樹之旅系列 第 14

[Day 14 - 小試身手] 用HTML、CSS、JS打造個人網站 (1)

所有的網站大概可以分成兩類:靜態網頁、動態網頁,靜態網頁顧名思義就是靜止的網頁,不會去太頻繁的更新內容;動態網頁則是會根據使用者的輸入而有不同的內容更新,包含的功能像是會員登入、購物車...等等。

在前幾篇學到一些網頁的基本組成 HTML、CSS、JS 的知識,所以接下來就要來個小試身手,嘗試打造一個完整的靜態網頁 — 個人網站。

網站成品示意

前置準備

首先到範例程式碼下載專案,裡面包含完成版網頁和圖片包,你可以自己創建一個新的資料夾,再把 assets/images 裡的圖片包拖進去,並用 Vscode 開啟建立專案的架構,除了圖片包,還要新增必要的 HTML、CSS 檔案,整個專案的架構會長這樣:

|-- css
    |-- style.css
|-- assets
    |-- images
        |-- ...
|-- index.html

開啟本地伺服器

編輯網頁之前,要先建立 HTML 的文件架構,這裡我們可以使用 Emmet,輸入 ! 再按 tab 快速建立。再來因為要一起編輯 HTML、CSS,所以直接連結 CSS 檔案 style.css。完成之後的程式碼會長這樣:

<!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 -->
    <title>Peiyun's website</title>
    <!-- 連結css -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<!-- 接下來我們主要編輯的區塊 -->
</body>

接下來要開啟本地伺服器編輯網頁並且使用即時更新的功能,所以在 index.html 右鍵點擊 Open with Live Server,就能開啟網頁(如果你還不知道 Live Server 是什麼,可以參考我的這篇

拆解設計稿

開啟 design 資料夾內的 1024.png,是螢幕寬度為 1024px 的設計稿,我們會先從這個版本開始做,設計稿內使用的個人介紹、作品都可以自行更換成你的版本。那就先來分析一下設計稿,看看 HTML 的架構會長成什麼樣子:

可以發現整個網頁的大區塊主要會分成 Header / Primary / Works / About / Footer 五個區塊,接下來我們就會照著這個架構,一區一區的來編輯各自的 HTML 和 CSS。

引入網頁字體

另外在 style_guide.png,列出了設計稿採用的一些樣式規範。在網頁中會使用到三種字體,需要先引入才能使用 font-family 套用,所以要在 style.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 將這些預設樣式移除。你可以直接複製範例程式碼的 normalize.css 加到你的專案中的 CSS 資料夾中,並在 index.html 引入:

<head>
    ...
    <!-- style.css要記得放後面,設定的樣式才不會被覆蓋 -->
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>

終於完成了我們的前置作業,接下來就開始在<body>裡面編輯網頁內容吧。

Header

建構內容

首先要加上語意化標籤 <header>,上圖你可以看到我拆解了 Header 的架構,藍區是網頁顯示的內容 / 紅區是包裹的容器。主要有 LogoNavigation 左右兩區。

要注意的是,我們統一要在每個區塊的最外層設置 wrapper-content 包住內容,這樣內部元素寬度使用百分比的話,只要控制最外層的大小,裡面的內容就會去自動縮放

index.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

.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;
}

設定外觀、文字

排版搞定了之後,要設定字體。發現<a>的元素帶有連結的預設樣式,但我們不需要,所以要清除字體顏色和下底線的預設。要記得使用 Tag Selector 時,記得放在最前面才不會覆蓋後面的設定。

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,就會直接套用樣式。

.link-text:hover {
  transition: all 0.2s;    /* 轉場效果 */
  color: #FFB500;
}

Header 完成!

清除body的預設樣式

到這邊你應該有發現在網頁的邊緣有一區空白,其實是 Body 的預設 Margin 導致的:

加入下面的程式碼來清除預設的樣式:

body {
  ...
  margin: 0;
}

Section-Primary

建構內容

接著進入網頁的主要內容,首先加上語意化標籤 <main> 代表網頁的主內容區塊,然後每一個小區塊再用 <section> 表示,並跟 Header 一樣用 wrapper-content 包住內容。

在 Section-Primary 這個區塊裡面,主要有 左欄文字右欄圖片

index.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> 包住特別去作設定

...
<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

...
.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%;
}

設定外觀、文字

排版搞定了之後,一樣設定字體。這邊先特別觀察一下設計稿,發現到每個 Section 區塊的 Title 都有共通的設定,所以將樣式抽離成 .section__title,之後就能重複套用

...
.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;
}

Button

設計稿的 Button 也都是一致性的樣式,所以一樣將樣式抽離成 link-button,另外加上 primary__link-button 設定屬於這個區塊、其他的 Button 樣式屬性。

.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;
}

Button hover樣式

最後一樣我們要順便把滑鼠移上的回饋樣式加上,只要使用 link-button 這個 ClassName,就可以直接套用一樣的樣式。

.link-button:hover {
  background-color: #ffb500;
  transition: all 0.2s;
}

Social List

.primary__social {
  width: 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

終於完成 Header 跟 Section-Primary 囉!


小結

今天講解了開發網頁的前置作業,以及 Header 跟 Section-Primary 的區塊,希望大家都能跟著步驟順利的做出一樣的網頁。雖然在文章中是貼上完整的 CSS 代碼,但建議大家在做的過程中,可以一段一段去觀察每個樣式會對網頁造成什麼樣的改變,進而去熟悉使用各式各樣的樣式,這樣會有助於日後你自己做網頁的時候,可以清楚的知道要套用什麼樣式屬性,來達成你想要的外觀。

下一篇會繼續講解剩下的三個部分:WorksSection-aboutFooter,那我們就明天見囉!

如果文章中有錯誤的地方,要麻煩各位大大不吝賜教;喜歡的話,也要記得幫我按讚訂閱喔❤️


上一篇
[Day 13 - Git] Git版本控管,沒有它救不回來的專案
下一篇
[Day 15 - 小試身手] 用HTML、CSS、JS打造個人網站 (2)
系列文
Follow me! 來一場前端技能樹之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言