高二下自主學習成果

初探網頁設計#

二年六班侯竣奇

Contents#

計劃
- 教材 & 工具
基礎中的基礎
- Flexbox 排版
- RWD 設計
JavaScript
- 共用 Header
上架靜態伺服器
- Github
網域與 Nameserver
每次更新內容都需要這樣嗎？
- 認識 Markdown 語法
初識 Hugo 靜態網頁生成
在 Netlify 上架
- CMS：靜態網站也能有後台

計劃#

教材選用#

彭彭的教學頻道

1	基礎 HTML	8	CSS3 Flexbox – RWD
2	基礎 CSS	9	JavaScript (JS) 入門
3	CSS 選擇器	10	JS 變數與運算子
4	CSS 表格樣式	11	JS 判斷式
5	基礎網頁排版	12	JS 迴圈
6	回應式排版設計	13	編寫網頁並上架
7	CSS3 Flexbox

工具#

Repl.it 線上多程式語言編譯 IDE
Notion 學習過程記錄
Brackets 網頁編輯軟體，有即時預覽功能

基礎中的基礎#

HTML 語法#

先認識最基本的網頁架構，在這個階段做出來的網頁只有最基礎的內容。
基本上就是跟著影片中的教學在 repl.it 上面把程式碼敲一遍，最後看瀏覽器渲染出來的結果。

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8"></meta>
5
        <title>我的首頁</title>
6
    </head>
7
    <body>
8
        <h3>我的照片</h3>
9
        <img width="200" src="head.jpg"/>
10
        <hr/>
11
        <h3>我的最愛</h3>
12
        <ul>
13
            <li><a href="https://www.google.com">Google</a></li>
14
            <li>Facebook</li>
15
            <li>PTT.cc</li>
16
        </ul>
17
        <h3>MLB baseball</h3>
18
        <table border=1 width="400" cellpadding="5">
19
            <tr>
20
                <td>Name</td>
21
                <td>Win</td>
22
                <td>Lose</td>
23
            </tr>
24
            <tr>
25
                <td><b>New York Yankees</b></td>
26
                <td>10</td>
27
                <td>8</td>
28
            </tr>
29
            <tr>
30
                <td>Boston Red Sox</td>
31
                <td>9</td>
32
                <td>9</td>
33
            </tr>
34
        </table>
35
    </body>
36
</html>

CSS 語法#

除了教學用途之外，基本上很少會看到「純的」html 網頁。CSS 可以幫助我們將網頁修飾得更為美觀，而且可以讓多個區塊套用相同的屬性，不僅避免多次的重複編寫還能讓格式更統一。

基礎 CSS#

class 選擇器
- 在 style 區塊或者獨立的 CSS 文件中使用 .xxx 代表指定特定的 class 名詞要使用的 css 效果
- 在 div、p 中可以使用 class="xxx" 來使整個區塊套用已經寫好的 css 語法

id 選擇器

1
#btn{
2
 border:1px solid #888888;
3
 background-color:#ffffff;
4
 padding: 5px;
5
}
6

7
/* 套用在物件上 */
8
<button id="btn">我是要套用的按鈕</button>

虛擬選擇器：以 :focus 為例
- ```
1
input:focus{
2
 border:2px solid #ff0000;
3
}
```
- 當目標取得焦點（鍵盤或滑鼠）時套用此設定
階層式選擇
- CSS 可以指定「在 A 區塊中的 B」套用某組設定
- ```
1
.favorite h1{
2
 color:#0000ff;
3
}
```

1
  <!DOCTYPE html>
2
    <html>
3
    <head>
4
        <meta charset="utf-8"/>
5
        <title>CSS 基礎語法</title>
6
        <style type="text/css">
7
        .title{font-weight:bold;font-size:24px}
8
        .content{width:400px;padding:10px;border:1px dashed blue;margin-top:10px;margin-bottom:10px}
9
        .keyword{color:red}
10
        .box{
11
            position:relative;left:200px;top:50px;
12
            width:100px;height:100px;background-color:green
13
        }
14
        </style>
15
    </head>
16
    <body>
17
        <div class="title">今天天氣不錯</div>
18
        <div class="content">
19
           我去公園散步，餵<span class="keyword">鴿子</span>。<br/>
20
           覺得鴿子好可愛喔。
21
        </div>
22

23
        <div class="title">公園裡有很多小朋友</div>
24
        <div class="content">
25
           小朋友在玩溜滑梯，盪鞦韆，還有幾隻<span class="keyword">狗狗</span>和貓貓。
26
        </div>
27
        <div class="content">
28
           還有幾位老公公<span style="position:relative;top:-8px">2</span>在聊天。
29
        </div>
30
    </body>
31
    </html>

CSS 表格#

1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8" />
5
<title>CSS 表格樣式 - 詳細介紹</title>
6
<style type="text/css">
7
table{
8
  width:400px;
9
  border-collapse:collapse;
10
}
11
td{
12
  border-bottom:1px solid#888888;padding:10px;
13
}
14
/* 表格中的第一對 <tr> */
15
tr:nth-child(1){
16
  background-color:#7788aa;color:#ffffff;
17
}
18
/*表格中的偶數對 <tr> */
19
tr:nth-child(even){
20
  background-color:#e8e8e8;
21
}
22
</style>
23
</head>
24
<body>
25
  <table>
26
    <tr>
27
      <td>球隊</td>
28
      <td>勝</td>
29
      <td>敗</td>
30
    </tr>
31
    <tr>
32
      <td>紐約洋基隊</td>
33
      <td>10</td>
34
      <td>8</td>
35
    </tr>
36
    <tr>
37
      <td>波士頓紅襪隊</td>
38
      <td>9</td>
39
      <td>9</td>
40
    </tr>
41
    <tr>
42
      <td>多倫多藍鳥隊</td>
43
      <td>8</td>
44
      <td>9</td>
45
    </tr>
46
  </table>
47
</body>
48
</html>

Flexbox 排版#

傳統 CSS 排版#

讓 <div> 不換行
- display:inline-block;
讓 <div> 置中
- margin-left:auto; margin-right:auto;
讓 <div> 對母塊置中
- vertical-align:top;
調整行高
- line-height: 30px;
讓 <body> 與邊界沒有距離（網頁貼齊螢幕）
- margin:0px;

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8" />
5
  <title>竣奇的自我介紹</title>
6
  <style type="text/css">
7
  .head{
8
    background-color:#003344;color:white;
9
    font-weight:bold;font-size:30px;
10
    text-align:center;padding:10px
11
  }
12
  .content{
13
    width:1000px;
14
    margin-left:auto;margin-right:auto;
15
  }
16
  .box{
17
    width:280px;padding:10px;margin:10px;
18
    background-color:white;
19
    display:inline-block;vertical-align:top;
20
    text-align:center;height:150px;line-height:30px;
21
  }
22
  .title{
23
    font-weight:bold;
24
  }
25
  </style>
26
</head>
27
<body style="margin:0px;background-color:#eeeeee;">
28
  <div class="head">竣奇的自我介紹</div>
29
  <div class="content">
30
    <div class="box">
31
      <div class="title">我的基本資料</div>
32
      <div>姓名：侯竣奇</div>
33
      <div>2004 年生</div>
34
    </div>
35
    <div class="box">
36
      <div class="title">我的個人興趣</div>
37
      <div>寫程式</div>
38
      <div>金融交易</div>
39
      <div>研究生產力工具</div>
40
    </div>
41
    <div class="box">
42
      <div class="title">學經歷</div>
43
      <div>嘉義高中</div>
44
      <div>南興國中</div>
45
      <div>興安國小</div>
46
    </div>
47
  </div>
48
</body>
49
</html>

Flexbox 排版#

什麼是 Flexbox？
Flex 是 CSS3 開始出現的 box model。它就像一個一個靈活的盒子，可以藉由設定盒子的內容物如何排列來控制網頁中的內容

justify-content
- 內容與整個 Flexbox 的「水平對齊」
- flex-start
- flex-end
- center
- space-between
- space-around
align-items
- 內容與整個 Flexbox 的「垂直對齊」
- flex-start
- flex-end
- center
- stretch：預設值，將內容元素全部撐得和 Flexbox 一樣高
- baseline 以所有內容的基線作為對齊標準

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8" />
5
  <title>CSS3 Flexbox</title>
6
  <link href="style.css" rel="stylesheet" type="text/css"
7
      media="all" />
8
</head>
9
<body>
10
  <nav>
11
    <div class="logo">Logo</div>
12
    <div class="menu">Menu</div>
13
    <div class="user">User</div>
14
  </nav>
15
  <!-- Flex 如何解決：並排（切欄）、水平對齊、垂直對齊的問題 -->
16
  <main>
17
    <div class="item">News 1<br/>Today is a good day.</div>
18
    <div class="item">News 2</div>
19
    <div class="item">News 3</div>
20
  </main>
21
</body>
22
</html>

RWD#

RWD：Responsive Web Design
自適應排版

✩ 依照使用者的螢幕大小（1200px/500px/…）規畫不同的 CSS 設定

HTML：

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="utf-8" />
5
  <title>CSS3 Flexbox RWD 排版</title>
6
  <link href="style.css" rel="stylesheet" type="text/css"
7
      media="all" />
8
</head>
9
<body>
10
  <nav>
11
    <div class="logo">Logo</div>
12
    <div class="menu">Menu</div>
13
    <div class="user">User</div>
14
  </nav>
15
  <!--
16
    RWD 回應式設計的關鍵動作：欄位變化
17
    Flex 如何控制欄位的變化？
18
    例如：4欄 > 2欄 > 1欄
19

20
    規劃：
21
      1200px 以上的規劃：4 欄，固定尺寸
22
      500px~1200px 的規劃：2 欄，彈性尺寸
23
      500px 以下的規劃：1 欄，彈性尺寸
24
  -->
25
  <main>
26
    <div class="item">News 1<br/>Today is a good day.</div>
27
    <div class="item">News 2</div>
28
    <div class="item">News 3</div>
29
    <div class="item">News 4</div>
30
  </main>
31
</body>
32
</html>

1
body{margin:0px;}
2
/* nav 樣式設定 */
3
nav{
4
  display:flex;
5
}
6
nav>.logo{
7
  /* 沒有彈性，固定尺寸 */
8
  flex:none;width:100px;
9
  background-color:#ffcccc;
10
}
11
nav>.menu{
12
  /* 盡量把容器的空間張滿 */
13
  flex:auto;
14
  background-color:#ccccff;
15
}
16
nav>.user{
17
  flex:none;width:100px;
18
  background-color:#ccffcc;
19
}
20
/* main 樣式設定 */
21
main{ /* 容器 */
22
  display:flex;flex-wrap:wrap;
23
  justify-content:center;
24
  align-items:flex-start;
25
  background-color:#cccccc;
26
}
27
main>.item{ /* 項目 */
28
  flex:none;
29
  width:270px;margin:10px;
30
  background-color:#ffcccc;
31
}
32
@media (max-width:1200px){
33
  main>.item{
34
    width:45%;
35
  }
36
}
37
@media (max-width:500px){
38
  main>.item{
39
    width:90%;
40
  }
41
}

Desktop：
Phone：

JavaScript#

基礎語法#

與 C++ 相似處：

都須以 ; 結尾
都區分大小寫
變數觀念似乎相似

1
//在 head 裡面可以寫 JS
2
<script type="text/javascript">
3
    alert("大家好");
4
    alert("大家午安");
5
</script>

事件處理#

讓按扭在按下時顯示 Clicked

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8"/>
5
    <title>Event 事件處裡</title>
6
    <script type="text/javascript">
7
      function over(element){
8
        element.style.color="red";
9
      }
10
      function out(element){
11
        element.style.color="black";
12
      }
13
    </script>
14
  </head>
15
  <body>
16
    <button onclick="alert('Clicked')">Click</button>
17
    <span onmouseover="over(this);" onmouseout="out(this);">Test</span>
18
    <div onmouseover="over(this);" onmouseout="out(this);">Line2</div>
19
  </body>
20
</html>

神奇的語法問題#

計時器

1
//第一種寫法：執行後倒數計時器馬上就歸零了
2
window.setTimeout(countdown(),1000);
3

4
//後來試著跟著影片裡寫，這樣子居然就可以了
5
window.setTimeout(countdown,1000);

有誰知道為什麼嗎？

資料：

查詢到的方法

手寫 JavaScript
利用 JQuery

其中第一種方法我嘗試失敗，後來改用第二種。

其實我第二種一開始也失敗，因為竟然不知道 JQuery 裡面的語法不是內建的，要先下載下來引用…

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8"/>
5
        <title>樹（いつき）的金融學堂</title>
6
        <link rel="icon" href="/favicon.svg" type="image/x-icon" />
7
        <link rel="stylesheet" href="main.css" />
8
        <script src="jquery-3.6.0.min.js"></script>
9
    </head>
10
    <body>
11
        <script type="text/javascript" src="/main.js"></script>
12

13
        <div class="header"></div>
14
        <script>$(".header").load("header.html");</script>
15

16
        <main>
17
            <H1>HOMEPAGE</H1>
18
        </main>
19
    </body>
20
</html>

然後在目錄放一個叫 header.html 的檔案，裡面只需要寫 Menu 的區塊就好了（不用寫完整的 html 檔）

上架靜態伺服器#

做到此時網頁的樣子：#

花了很多時間才完成的 RWD Menu
沒錯，我花了好久才弄好 Menu，而且其實比例好像有哪裡怪怪的。

Github#

別管那麼多，先上架就對了！

資料：

上傳到 Gtihub

開啟 Github Pages

網域與 Nameserver#

源由#

Github 可以自訂網域
.com、.net 等大部分頂級網域需要花錢
不想用次級網域 eg.junqi.github.io

資料：

Freenom#

提供 .tk、.ml、.ga 等免費頂級網域
把 DNS 指向 Github 伺服器
- Verifying your custom domain for GitHub Pages

小結#

每次更新內容都需要這樣嗎？#

根據原訂的計畫，到了這一步以後應該就是開始寫一些網頁的內容豐富我的網站。但是突然想到幾個問題點：

每次一需要修訂內容就需要動到網頁原始碼。
對於寫文章來說，每一行都動到 HTML 原碼並不是一個很順暢的書寫體驗。

於是乎想到我現在正在用來記錄學習過程的 Notion 似乎也支援分享為網頁的功能，後來深入找尋資料發現 Markdown 語法似乎天生就可以轉成 HTML…

Markdown 語法#

最初接觸#

Notion：支援 Markdown 的線上多功能筆記軟體

從這個學期初開始，我為了方便記錄我的學習內容，一直都是使用 Notion 作為記錄的工具。
在 Notion 中許多常用的語法，其實都是 Markdown 語法：

# 標題
- ## 次標題
- ### 次次標題
  …以此類推，最高支援六層
[文字](URL) 超連結
`code` 程式碼引用
- 使用三個 ` 在頭尾：可以輸入多行程式碼

Markdown 特性#

由於 Markdown（下稱 MD）在最終顯示時會被轉換成 HTML，當 MD 語法無法滿足你需求的時候，其實可以直接在檔案中寫上 HTML 碼，最終顯示出來是不會有問題的。

認識 Hugo#

前言#

資料：

最後我選用 Hugo 當靜態網頁生成器。

Why Hugo?#

What’s Hugo?#
Hexo 與 Hugo 都是靜態網頁生成器，只要給它們 Markdwon 文件就可以自動依據你給的模版產生出網頁。

靜態網站產生器大比拚

我選用 Hugo 主要有以下原因：

開源免費。
極快的網頁生成速度，既使文章數量多起來也不必擔心。
支援 Markdown 語法，方便更新文章。

Code Notes:#

1
hugo new site xxx //建立一個網站
2
hugo new posts/xx.md //建立一個新文章
3
hugo server -D //在本機架預覽伺服器

選擇模版#

LoveIt
1. KaTeX 語法
  - 例：等差級數和公式
  - $\sum_{i=1}^{n}{a_i}=\frac{(a_1+a_n)*n}{2}$
  - $\sum_{i=1}^{n}{a_i}=\frac{(a_1+a_n)*n}{2}$
2. 黑色模式
3. 程式碼高亮
4. RWD
5. 簡潔美觀

設定 `config.toml`#

設定 Menu 的項目、網站的 icon、等等
Hugo 的 config.toml

在 Netlify 上架#

部屬#

将 Hexo 博客部署至 Netlify

Netlify 提供免費的靜態伺服器，並且支援 Automatic Deploy，可以在你把更新的文章 push 到 Github 上面以後自動更新文章到網頁上。

Github 作為源碼儲存庫
Netlify 發現有變動後自動 Deploy

Netlify CMS：靜態網站的後台系統#

建立#

CMS：Content Management System（內容管理系統）

設定後台可以管理的項目（標題、內文、日期、分類等…）#

設定 Netlify CMS

（對應的設定介面）
Netlify CMS 畫面

最終成果#

本站網址：junqi.ml
2023/07/11 更：現為 blog.junqi.tw 2025/11/23 更：現為 blog.pytreedao.com

文章管理流程：

在 CMS 上面新增文章
- 會自動開一個 Github 的分支儲存
從 HackMD 上面 Pull 下來修改內文
從 HackMD 寫好後 Push 回 Github
在 CMS 上「發文」，合併分支及 Deploy 的部分會全自動處理

Netlify CMS 畫面2

在 HackMD 編輯文章

心得#

與上學期的差異#

我上學期的自主學習的主題是「自學 MT5 程式交易」，起初我也有個宏大的目標：希望能夠寫出一些市場上流傳常見的策略，利用歷史資料一一驗證它們在這些年的績效表現並做數據分析。
但到了後來頻繁出現的編譯錯誤，又加上不是常見的程式語言以至無從問起，經過好幾週的重寫與測試後我還是放棄了…又或者說是放到以後待完成的願望清單。
這學期我將目標放得更鬆，為了讓我學習過程中即使遇到障礙也較容易尋找協助，我把主題定在較常見的網頁設計。我最低的目標是：學習基礎的語法、了解網頁的構成。
雖然最終我沒有硬生生把整個網頁手刻出來，但在把預計的教材學習完並且初步寫出 Menu 後，我透過修改模版、結合架站時學到的網域概念，最終生出了本站。

未來展望#

今後在學習的過程中會順手把歷程在這裡，除了作為自己的學習記錄，也希望今後若有人遇到與我相同問題時，我能幫上忙。

歹喙斗 PytreeDao

高二下自主學習成果

初探網頁設計#

Contents#

計劃#

教材選用#

工具#

基礎中的基礎#

HTML 語法#

CSS 語法#

基礎 CSS#

CSS 表格#

Flexbox 排版#

傳統 CSS 排版#

Flexbox 排版#

RWD#

JavaScript#

基礎語法#

事件處理#

神奇的語法問題#

共用 Header#

上架靜態伺服器#

做到此時網頁的樣子：#

Github#

網域與 Nameserver#

源由#

Freenom#

小結#

每次更新內容都需要這樣嗎？#

Markdown 語法#

最初接觸#

Markdown 特性#

認識 Hugo#

前言#

Why Hugo?#

What’s Hugo?#

Code Notes:#

選擇模版#

設定 config.toml#

在 Netlify 上架#

部屬#

Netlify CMS：靜態網站的後台系統#

建立#

設定後台可以管理的項目（標題、內文、日期、分類等…）#

最終成果#

心得#

與上學期的差異#

未來展望#

評論區

目錄

設定 `config.toml`#