[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 的架构，蓝区是网页显示的内容 / 红区是包裹的容器。主要有 Logo 和 Navigation 左右两区。

要注意的是，我们统一要在每个区块的最外层设置 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 代码，但建议大家在做的过程中，可以一段一段去观察每个样式会对网页造成什麽样的改变，进而去熟悉使用各式各样的样式，这样会有助於日後你自己做网页的时候，可以清楚的知道要套用什麽样式属性，来达成你想要的外观。

下一篇会继续讲解剩下的三个部分：Works、Section-about 和 Footer，那我们就明天见罗！

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

<<: DAY12 如何使用样板

>>: Day 15：如何解决 PowerShell 无法使用 Angular 指令的问题？

[Day 14 - 小试身手] 用HTML、CSS、JS打造个人网站 (1)

前置准备

开启本地服务器

拆解设计稿

引入网页字体

清除预设样式

Header

建构内容

设定排版、宽高样式

设定外观、文字

Link-text hover样式

清除body的预设样式

Section-Primary

建构内容

设定排版、宽高样式

设定外观、文字

Button

Button hover样式

Social List

小结

Day 19 - [语料库模型] 07-程序码: 余弦相似性

30天学会C语言: Day 3-资料也要取名字!

[鼠年全马] W37 - Vue出一个旅馆预约平台(11)

从 JavaScript 角度学 Python(23) - Class

Day10【Web】网路攻击：CSRF

DAY 3 - 飞天鲸鲨

【左京淳的JAVA WEB学习笔记】第四章转发、重定向、steam输出

【CSS】【Bootstrap】让图片满版的object-fit

Day26，Kubecost 体验，算钱好难......

App 里的广告运用的格式跟广告商，不同平台的收益差别