# 2023-08-20 響應式網站開發實戰班
## 目錄
- [第一天(8/20)](#第一天(8/20))
- [第二天(8/27)](#第二天(8/27))
- [第三天(9/3)](#第三天(9/3))
- [第四天(9/10)](#第四天(9/10))
- [第五天(9/17)](#第五天(9/17))
#### Visual Studio Code快速功能健
|MacOS|Windows|說明|
|---|---|---|
|Shift + Alt + F|Shift + Alt + F|重新排版檔案內容|
|`CMD` + `/`|`Ctrl` + `/`|註解/解除註解|
|`CMD` + `Shift` + `P`|`Ctrl` + `Shift` + `P`|打開功能選單|
## 第一天(8/20)
1. 使用google搜尋`visual studio code`後點擊第一筆搜尋結果。
2. 進入Visual Studio Code官網後點擊左方藍色按鈕下載安裝檔。
3. 安裝只要一直下一步即可完成安裝。
4. 前往VSCode內Extension功能搜尋「Chinese」中文化。
5. 前往 https://html5up.net/ 下載Forty與Lens兩個樣板。
6. 確認樣板的授權。
> 英文網站可以以「License」相關字來找到樣版的授權。
7. html5up網站提供的樣板授權可以用在「商業行為」及「任意修改」。
8. 講下載的檔案解壓縮後放到合適的地放。
> 路徑名稱盡量不要使用中文字，避免有些雲端主機對中文路徑支援不完整而找不到該網頁。
9. 安裝「open in browser」插件可以在右鍵點擊檔案時出現「open in default browser」來快速打開網頁。
10. 網頁的首頁檔名都會叫`index.xxx`，請勿修改首頁主檔名。
11. 回到Visual Stuio Code，透過「檔案」->「開啟資料夾」找到剛剛解壓縮的目錄來打開它；打開後VSCode左邊會出現網站的檔案清單。
12. 打開index.html並搜尋「Hi, my name is Forty」。
> 搜尋的快速鍵: Ctrl+F(Windows), CMD+F(MacOS)
13. 修改完後記得按Ctrl+S儲存檔案。
> 未存擋前，檔名標籤旁會是一個實心小圓，存擋後會變x
14. 回到瀏覽器除重新整理網頁確認剛剛修改的標題有成功。
15. WIN按鈕加左右方向鍵可以將視窗放到螢幕左邊或右邊。
16. html標籤的五個基本規則：
- 標籤都是成雙成對的「起始」＋「結束標籤」。
- 沒內容的標籤可以寫成空標籤。
- 標籤可以包圍其他標籤，但是標籤不可以交錯。
- html標籤和屬性名稱建議使用小寫，較容易閱讀。
- 標籤可以有屬性用來提供額外設定。
17. html標籤清單: https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element
> 或是前往w3school學習html基礎: https://www.w3schools.com/html/html_basic.asp
18. 一個簡單的網頁
```html=
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的網站</title>
</head>
<body>
<h1>我的室內設計網站</h1>
<p>介紹介紹介紹介紹介紹介紹介紹介紹介紹</p>
<ul>
<li>資料1</li>
<li>資料2</li>
</ul>
</body>
</html>
```
> 請網頁的檔案在存檔時，務必選擇UTF-8編碼格式，才不會網頁上出現亂碼，且在網頁的`<head>`標籤內加上`<meta charset="utf-8" />`來設定網頁使用的編碼。
19. CSS權重: `!important > inline style > ID > Class > Element > *`
20. `Ctrl - /` 可以讓標籤變成註解，再按一次會恢復原狀。
21. CSS與RWD(響應式網頁)介紹
##### index.html
```css=
<!DOCTYPE html><!DOCTYPE html>
<html>
<head>
<title>我的網站</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- 這是筆記
這是筆記
這是筆記 -->
<h1 class="my-title">網頁大標題</h1>
<section>
<h3 id="my-h3">文章標題</h3>
<div class="img-center">
<img class="my-img" src="imgs/tokyo1.png" />
</div>
<p class="my-title">這是文章段落第一段</p>
<p>這是文章段落第二段</p>
</section>
<article>
<h6>TestTest</h6>
<p>這是文章另一段</p>
</article>
<footer class="my-footer" id="footer-id">Copyright 2023 by Aaron</footer>
</body>
</html>
```
##### main.css
```css=
body {
color: aqua;
background-color: yellow;
}
p {
color: orange;
}
.my-title {
color: white;
background-color: black;
}
#my-h3 {
color: #00916e;
font-size: 3em;
}
footer {
color: red;
}
.my-footer {
color: green !important;
}
#footer-id {
color: blue;
}
.my-img {
width: 50%;
}
.img-center {
display: flex;
width: 100%;
justify-content: center;
}
@media only screen and (max-width: 900px) {
.my-img {
width: 100%;
}
body {
color: aqua;
background-color: blue;
}
}
@media only screen and (max-width: 768px) {
.my-img {
width: 100%;
}
body {
color: aqua;
background-color: green;
}
}
/* media query */
@media only screen and (max-width: 400px) {
.my-img {
width: 100%;
}
body {
color: aqua;
background-color: red;
}
}
```
> CSS顏色: https://www.w3.org/wiki/CSS/Properties/color/keywords
> 配色: https://coolors.co/00916e-feefe5-ffcf00-ee6123-fa003f
> 配色可以搜尋: color palatte
> 照片可以放在本地端，也可以存放在子目錄下，例如: `imgs/tokyo1.png`
19. 透過搜尋來找到網頁上的文字並透過Visual Studio Code修改。
20. 透過搜尋`aaron:`來找到上課範例裡頭有修改過的地方。
21. Ctrl-C後再Ctrl-V可以快速複製滑鼠游標那一行。
> 不可選取任何文字
22. \[CSS\] id屬性在css檔裡頭前面會有一個#號，而class屬性的名稱在css裡前面需要加上一個點「.」。
23. Forty樣板的CSS檔案在`assets/css/main.css`，搜尋banner後可以在33xx行看到banner的樣式。
24. 註解的方式:
##### html
```
<!-- 這是註解 -->
```
##### css
```
/* 這是註解 */
```
#### 修改樣板
##### `assets/css/main.css`
1. 第3383行，修改banner背景圖
```css=
background-image: url("../../images/banner.jpg");
```
2. 第3413行：修改banner遮罩顏色
```css=
background-color: #412722; /* aaron: banner背景圖遮罩的顏色 */
```
3. 第3418行：修改banner遮照透明度
> 透明度範圍0~1之間的小數，1為完全不透明
```css=
opacity: 0.4; /* aaron:不透明度，範圍0~1之間的小數 */
```
4. 第3404~3411行，修改轉場效果
```css=
/* -moz-transition: opacity 2.5s ease;
-webkit-transition: opacity 2.5s ease;
-ms-transition: opacity 2.5s ease; */
transition: opacity 1s ease; /* aaron:修該透明轉場效果持續時間 */
/* -moz-transition-delay: 0.75s;
-webkit-transition-delay: 0.75s;
-ms-transition-delay: 0.75s; */
transition-delay: 3s; /* aaron:修該網頁打開後要延遲幾秒再開始轉場效果 */
```
## 第二天(8/27)
1. 2755、2830、2833行，修改色塊寬度
```css=
/* aaron:指定色塊位置的寬度，以n=1來說, 3跟2位置的色塊寬度會是40% */
.tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) {
width: 40%;
}
/* aaron:指定第5個色塊寬度為100% */
.tiles article:nth-child(5) {
width: 100%;
}
```
2. 2830行，修改色塊顏色
```css=
/* aaron:指定色塊位置的寬度，以n=1來說, 3跟2位置的色塊寬度會是40% */
.tiles article:nth-child(6n - 5):before {
background-color: #6fc3df; /* aaron:修改色塊的顏色 */
}
```
6. 2767行，色塊上標題的文字大小和顏色
```css=
.tiles article h3 {
font-size: 1.75em; /* aaron:調整色塊的標題文字大小 */
color: #c5e31a; /* aaron:調整色塊的標題文字顏色 */
}
```
7. 1785行~1801行: 修改色塊副標題的顏色
```css
header.major > :first-child:after {
content: '';
background-color: #ffffff; /* aaron: 色塊標題下方底線的顏色 */
display: block;
height: 2px;
margin: 0.325em 0 0.5em 0;
width: 100%;
}
/* aaron:大於代表只有直接的子元素才會生效 */
header.major > p {
font-size: 1em; /* aaron: 色塊副標題的文字大小 */
color: rgb(0, 0, 0); /* 等同於#000000， aaron:設定副標題文字顏色 */
font-weight: 600;
letter-spacing: 0.25em;
margin-bottom: 0;
text-transform: uppercase;
}
```
> 使用Google Chrome開發工具「檢查」找到的
8. 獨立設定每個色塊的標題, 副標題和槓槓的顏色
```css=
/* aaron:幫每個色塊設定不同的標題顏色 */
.tiles article:nth-child(1) h3 {
font-size: 3em;
color: #ea7609;
}
/* aaron:幫每個色塊設定不同的副標題顏色 */
.tiles article:nth-child(1) p {
color: #ea7609;
font-size: 1.5em;
}
```
9. 2882行，解決響應式下平板和手機的第五個分類區塊問題
```css=
@media screen and (max-width: 980px) {
.tiles article {
width: 50% !important;
}
/* aaron:處理第5個分類區塊在平板和手機的寬度 */
.tiles article:nth-child(5) {
width: 100% !important;
}
}
```
10. 再不同解析度切換不同圖片
```css=
@media screen and (max-width: 1150px) {
#banner {
background-image: url("../../images/banner.jpg");
}
}
```
11. 3760行，附屬區塊的背景色
```css=
#main {
background-color: rgb(57, 80, 93); /* aaron:附屬區塊的背景色 */
}
```
> 使用Google Chrome檢查時，在`div#main`分頁找到背景樣式。
12. 加上點擊回到最上面按鈕(固定按鈕)
###### index.html
```html=
<body class="is-preload" id="top">
<a href="#top" class="go-top scrolly">↑</a>
```
> 貼在`body`標籤下一行即可
###### main.css
```css=
.go-top {
display: flex;
align-items: center;
justify-content: center;
background-color: darkslateblue;
width: 50px;
height: 50px;
font-size: 2em;
text-decoration: none;
border-radius: 50px;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 10;
padding-bottom: 5px;
border: none;
box-shadow: 2px 2px 2px white;
}
.go-top:hover {
background-color: #53e3fb;
}
```
> 請勿貼到`@media`內
13. 加上點擊回到最上面按鈕(圖片按鈕) (固定按鈕)
###### index.html
```html=
<body class="is-preload" id="top">
<a href="#top" class="go-top scrolly">↑
<img src="https://upload.wikimedia.org/wikipedia/zh/b/b0/Doraemon_Charactor.jpg" />
</a>
```
###### main.css
```css=
/* aaron:浮動按鈕的樣式 */
.go-top {
display: flex;
align-items: center;
justify-content: center;
background-color: darkslateblue;
width: 50px;
height: 50px;
font-size: 2em;
text-decoration: none;
border-radius: 50px;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 10;
padding-bottom: 5px;
border: none;
box-shadow: 2px 2px 2px white;
}
.go-top:hover {
background-color: #1f4e56 !important;
text-decoration: none;
}
.go-top img {
width: 50px;
height: 50px;
border-radius: 50px;
position: absolute;
top: 0;
left: 0;
}
```
14. 203行，聯絡資訊的輸入框背景色
```css=
textarea {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
background: rgba(21, 84, 200, 0.1); /* aaron:輸入框的背景色, 最後一個數字是透明度0~1 */
border: none;
border-radius: 0;
color: inherit;
display: block;
outline: 0;
padding: 0 1em;
text-decoration: none;
width: 100%;
}
```
15. 修改網頁上按鈕
##### 25xx行，按紐文字語邊框色
```css=
box-shadow: inset 0 0 0 2px #ee2121; /* aaron:按鈕的邊框顏色 */
color: #dd2424; /* aaron:按鈕的文字顏色 */
```
##### 26xx行，按鈕的方向箭頭
```css=
.button.next:before {
/* aaron: 修改按鈕指標形狀的顏色 */
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='36px' height='24px' viewBox='0 0 36 24' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffff00%3B stroke-width: 2px%3B %7D%3C/style%3E%3Cline x1='0' y1='12' x2='34' y2='12' /%3E%3Cline x1='25' y1='4' x2='34' y2='12.5' /%3E%3Cline x1='25' y1='20' x2='34' y2='11.5' /%3E%3C/svg%3E");
}
```
> 因為這個方向箭頭是使用svg格式畫出來，所以是用搜尋ffffff色碼找到的
5. 修改網頁上按鈕(hover時)
##### 255x行，按紐文字語邊框色
```css=
input[type="submit"]:hover, input[type="submit"]:active,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="button"]:hover,
input[type="button"]:active,
button:hover,
button:active,
.button:hover,
.button:active {
box-shadow: inset 0 0 0 2px #d66910;
color: #f16d15 !important;
}
```
16. 修改Icon
##### 前言
這個樣板內Icon使用的是Font Awesome Icon字型，而非圖片，目的是相比圖片，Icon字型可以大幅節省網路傳輸流量。
Font Awesome 5官網: https://fontawesome.com/v5/search
> 由main.css相同目錄下的fontawesome-all.min.css檔案內的第一行可以得知，這個樣板使用的是5.9.0版本的Font Awesome，所以要找Icon時，需切換到5版的頁面，才不會出現找到的Icon不支援的情況。
##### Icon vs Pro Icon
Pro Icon的版本是收費版本，免費版本無法使用，所以搜尋Icon時，請使用左邊的Free Icon過慮條件來過濾。
##### Icon style
Font Awesome的Icon有五種樣式:
|Style名稱|描述 |補充|
| --- | --- | --- |
|solid|實心Icon，通常為免費|fas|
|reqular|標準Icon，通常為免費|far|
|light|線條較細版本，收費版本|fal|
|duotone|雙色調版本，收費版本|fad|
|brands|商標Icon，通常為免費|fab|
##### 範例
在Font Awesome的範例如果為:
```html
<i class="fab fa-line"></i>
```
在此樣版內會是:
```html
<span class="icon brands alt fa-line"></span>
```
> 請注意fab對應brands，fa-line則對應fa-開頭的樣式名稱。
17. 21xx行，修改Icon顏色
```css=
.icon.alt:before {
background-color: #e31616; /* aaron:Icon背景顏色 */
border-radius: 100%;
color: #e1eca0; /* aaron:Icon文字顏色 */
display: inline-block;
height: 2em;
line-height: 2em;
text-align: center;
width: 2em;
}
```
18. 26xx行，修改[送出]按鈕顏色
```css=
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary, .button.primary {
background-color: #91a82a; /* aaron:送出按鈕的背景色 */
box-shadow: none;
color: #b0baeb; /* aaron:送出按鈕的文字色 */
}
input[type="submit"].primary:hover,
input[type="submit"].primary:active,
input[type="reset"].primary:hover,
input[type="reset"].primary:active,
input[type="button"].primary:hover,
input[type="button"].primary:active,
button.primary:hover,
button.primary:active,
.button.primary:hover,
.button.primary:active {
background-color: #6d7b27; /* aaron:滑鼠移到送出按鈕上的背景色 */
color: #eb95dc !important; /* aaron:滑鼠移到送出按鈕上的文字色 */
}
```
> 很多樣板都會習慣將填滿顏色的按鈕樣式命名為`primary`
19. 38xx行，footer的調整
```css=
/* Footer */
#footer {
background-color: #38726C; /* aaron:自行加上的footer區塊背景顏色 */
text-align: center; /* aaron:把footer內的元素全部置中 */
}
#footer .copyright {
font-size: 0.8em;
list-style: none;
padding-left: 0;
}
#footer .copyright li {
border-left: solid 1px rgba(212, 212, 255, 0.1);
color: rgba(246, 246, 250, 1); /* aaron:footer版權宣告文字的顏色 */
display: inline-block;
line-height: 1;
margin-left: 1em;
padding-left: 1em;
}
```
20. 幫瀏覽器分頁上的標題前面加上圖示
```html=
<head>
<title>Aaron的室內設計作品</title>
<link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- aaron:網頁頁籤上的圖示 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
```
> icon網站: https://icon-icons.com/zh/%E5%9B%BE%E6%A0%87/%E7%8C%AB/125831
> - 也可以是jpg或一般圖檔, 例如: `<link rel="icon" type="image/jpg" href="https://storage.googleapis.com/www-cw-com-tw/article/201810/article-5bd182cf13ebb.jpg" />`
21. 2642行，調整按鈕邊框角落的圓弧程度
```css=
.button {
...
border: 0;
border-radius: 20px;
box-shadow: inset 0 0 0 2px #ffffff;
color: #ffffff;
...
}
```
> - 使用`border-radius`樣式設定邊框的直角圓弧程度
> - 當`border-radius`的設定跟寬, 高一樣時，該元素會變成圓形。
22. 將landing.html複製出多個檔案，然後更改檔名為:
- 地中海風.html
- 工業風.html
- 現代風.html
- 古典風.html
- 北歐風.html
> **補充:**
> 因為首頁不同的色快點擊後目前都會切換到同一個網頁，如果要切換到不同網頁，必須要有不同的html檔案。
23. 70行，將a超連結標籤的href屬性值設定成要連結的檔案名稱
```html=
<article>
<span class="image">
<!-- aaron:每個色塊的背景圖設，直接用其他圖片覆蓋就可以修改背景圖 -->
<img src="images/pic01.jpg" alt="" />
</span>
<header class="major">
<!-- aaron:將a標籤的href屬性值改成要連結的檔案名稱 -->
<h3><a href="地中海風.html" class="link">地中海風</a></h3>
<p>很地中海的風格</p>
</header>
</article>
```
> **補充:**
> 可以重網址列確認有沒有跳到剛剛改過的頁面檔名
24. 要放Youtube影片的話，可以在Youtube影片上點右鍵，選擇「複製嵌入程式碼」，後去取代掉原本的img標籤；如果會影響版型可以試著也刪除img標籤外層不需要的標籤。
25. 100行，將內頁的照片換成影片
```html=
<!-- aaron:因為要換成影片，所以把原本的img標籤刪除 -->
<!-- <a href="generic.html" class="image">
<img src="images/pic09.jpg" alt="" data-position="top center" />
</a> -->
<!-- aaron:將youtube影片取代原本的照片 -->
<iframe width="50%" height="380" src="https://www.youtube.com/embed/F0hsuegHV1I" title="南無阿彌陀佛 Namo Amitabha 12小時 憶佛念佛 長時薰修" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```
## 第三天(9/3)
#### 將樣式分開
當修改`工業風.html`的樣式時，首頁的樣式也被影響到了，因此我們必須將首頁的樣式複製一份給`工業風.html`使用，讓兩個網頁的樣式可以獨立開來。
##### 步驟
1. 首頁樣式: /assets/css/main.css
2. 複製成: /assets/css/工業風.css
3. 將`工業風.html`的:
```
<link rel="stylesheet" href="assets/css/main.css" />
```
改成：
```
<link rel="stylesheet" href="assets/css/工業風.css" />
```
> 備註:
> 在`head`標籤內
#### 如何增加一個設計理念區塊
```html=
<section id="one">
<div class="inner">
<header class="major">
<h2>設計理念</h2>
</header>
<p>工業風裝潢來源自歐洲，以19世紀末的巴黎鐵塔為主要的靈感來源，艾菲爾鐵塔是歷史第一座工業風建築，最主要的特色就是大量採用鋼筋、水泥、焊接、鉚釘、金屬等建材，而當時又因為後來的二戰爆發，這些便宜又耐用的建材也熱門起來，一開始先從工廠建造大量使用這些工業風元素，到後來轉變成住宅風格的流行元素，透過裝潢展現出特有的個性品味，成為當時人們的一種新興生活態度。</p>
</div>
</section>
<!-- 以下為新複製的區塊 -->
<section id="oneone">
<div class="inner">
<header class="major">
<h2>我的工業風學習歷程</h2>
</header>
<p>我的工業風學習歷程我的工業風學習歷程我的工業風學習歷程我的工業風學習歷程我的工業風學習歷程我的工業風學習歷程我的工業風學習歷程</p>
</div>
</section>
```
> 注意:
> 因為複製的區塊內有id, 而同一個網頁的內不可以有重複名字的id, 所以新複製的區塊id必須要調整。
#### 幫Learn More按鈕加上不同的網頁
因為樣板的每一顆Learn More按鈕都會連結到`generic.html`，因此必須複製新的給不同的按鈕使用，才不會都連結到同一個網頁。
#### 1903行
```css=分類區塊標題底線的顏色
header.major> :first-child:after {
content: '';
background-color: yellow;
/* aaron:分類區塊標題底線的顏色 */
display: block;
height: 2px;
margin: 0.325em 0 0.5em 0;
width: 100%;
}
```
#### 3102行:作品區塊奇數背景色
```css=
.spotlights>section {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
background-color: #6d4629; /* 作品區塊奇數背景色 */
}
```
#### 3159行:作品區塊偶數背景色
```css=
.spotlights>section:nth-child(2n) {
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
background-color: #5f501b; /* aaron:作品區塊偶數背景色 */
}
```
#### 當有資料超出區塊範圍，可以直接以`overflow: hidden`裁切掉
```css=
.mysection {
overflow: hidden
}
```
#### 幫每個作品區塊加上高度限制
###### 82, 98, 114行，index.html
```html=
<section id="two" class="spotlights">
<section class="mysection">
...
</section>
<section class="mysection">
...
</section>
<section class="mysection">
...
</section>
</section>
```
###### 3176行，工業風.css
```css=
.mysection {
height: 360px;
}
```
#### 3114行，調整作品的照片高度
```css=
.spotlights>section>.image img {
border-radius: 0;
display: block;
width: 100%;
height: 360px; /* aaron:調整照片高度 */
}
```
#### 新增作品集（相簿）到網站內
1. 使用 https://html5up.net/ 網站下載的len樣板來建立相簿集，如果你有五種風格，那你會需要五個相簿，就要解壓縮五次（或解壓縮後複製成五份），且以五個目錄存放，然後放在先前的Forty目錄下（與Forty樣板的index.html同一個位置）。
```html=
<ul class="actions">
<li><a href="地中海風作品集/index.html" class="button next">前往作品集</a></li>
</ul>
```
2. 在Lens樣板內的index.html加上一個回到網站首頁的功能
第23行改為:
```
<p>請參觀 - <a href="..\index.html">回首頁</a></p>
```
> 兩個`..`代表目前路徑的上一層路徑
4. len樣板內一張照片的結構為:
```html=
<!-- aaron:多加一張照片 -->
<article>
<a class="thumbnail" href="images/fulls/13.jpg">
<img src="images/thumbs/13.jpg" alt="" />
</a>
<h2>Mattis lorem sodales</h2>
<p>Feugiat auctor leo massa, nec vestibulum nisl erat faucibus, rutrum nulla.</p>
</article>
```
##### 說明
- 縮圖放在`images/thumbs/`目錄下
- 原圖放在`images/fulls/`目錄下
## 使用github pages來託管你的網站
#### 介紹
github Pages官方首頁: https://pages.github.com/
#### 步驟一: 建立儲存庫(Create a repository)
- 須有一個github帳號，沒有的話可以使用自己的email申請
- 儲存庫(repository)名稱必須為: `username`.github.io
> **注意:**
> 1. username必須填入自己建立github帳號時的使用者名稱，大小寫必須符合
> 2. 結尾固定加上`.github.io`
> 3. 這個名稱同時也是你的網站位址。
> 4. 如果這個儲存庫的名稱錯誤，將會造成你的網站無法連線。
> 5. 必須是Public(預設，請勿改為Private)
#### 步驟二: 下載GitHub Desktop軟體
下載網址: https://desktop.github.com/
安裝後第一次使用需使用你的github帳號登入。
> **提示:**
> GitHub Desktop登入時會打開GitHub登入網頁，如果使用的瀏覽器是Edge，有可能授權按鈕會無法點擊，可以直接將整個網址複製到Chrome瀏覽器進行登入。
登入完後會跳轉回GitHub Desktop，接著選擇Clone Repository將github上的網站原始碼下載到本機電腦上。
> **提示:**
> 如果是剛建立的儲存庫，只會看到一個空目錄。
#### 步驟三: 將網站檔案放到GitHub Pages目錄下
接著將開發完成的網站檔案(包含子目錄和下面的檔案)全部複製到github目錄中。
回到GitHub Desktop App在左下的Summary欄位輸入本次修改的描述，接著點擊Commit to Main按鈕，此時會將本次的修改打包存放在本機電腦。
點選Publish藍色按鈕後發布到GitHub上。
#### 步驟四: 連線到網站
發布後等待大約10秒~數分鐘，即可以使用`https://{username}.github.io`這個網址打開你的網站。
> **補充:**
> GitHub Pages只能存放靜態網站。
> username為你的帳號名稱。
### 相簿樣板
#### 983行，調整照片顯示模式，將縮圖出現的黑邊處理掉
```css=
#thumbnails article .thumbnail {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: block;
position: relative;
border: 0;
outline: 0;
width: 100%; /* 給縮圖的object-fit用的設定 */
height: 100%; /* 給縮圖的object-fit用的設定 */
}
#thumbnails article .thumbnail img {
display: block;
width: 100%;
height: 100%; /* 給縮圖的object-fit用的設定 */
object-fit: cover; /* 設定縮圖的顯示模式 */
}
```
> 補充:
> 當使用`object-fit`屬性時，元素本身及外層元素都必須有`width`和`height`的設定
#### 1218行，相簿原圖的背圖片模式和背景色
```css=
#viewer .slide .image {
-moz-transition: opacity 0.5s ease-in-out;
-webkit-transition: opacity 0.5s ease-in-out;
-ms-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain; /* aaron:左邊原圖的顯示模式 */
opacity: 0;
background-color: aquamarine; /* aaron:左邊原圖的背景色 */
}
```
## 進階排版
#### 加一個影片到首頁下面的的區塊右邊
```html=
<section id="two">
<div class="inner">
<div style="display: flex; flex-direction: row; height: 600px; justify-content: center; align-items: center;">
<div style="display: flex; flex-direction: column; padding-right: 15px;">
<header class="major">
<h2>綠建築標章</h2>
</header>
<p>「 綠建築 」是什麼？在環保意識抬頭的現代社會，主打會呼吸的 綠建築 越來越受購屋民眾的喜愛，有專家表示，現在的民眾購屋時除了考量「區位」、「屋齡」等因素，建築物有沒有擁有「 綠建築標章
」也成為至關重要的選擇關鍵！</p>
<p>綠建築標章等級越高，可以提供的效用也越好，所以相較於非綠建築的建物，購屋民眾願意支付更高的價格來換取更高品質的居住環境，也進一步造成綠建築住宅的溢價（比原來的銷售價格高出的部分）效果。</p>
<p>取得標章的綠建築相較一般建築物到底增加了多少價格？取得不同等級標章的綠建築之間溢價程度又有多少差異？就讓我們一起透過這篇研究來一探究竟吧！</p>
</p>
<ul class="actions">
<!-- aaron: target="_blank" 屬性可以用心的分頁打開網頁 -->
<li><a href="https://gb.tabc.org.tw/" target="_blank"
class="button next">前往官網</a></li>
</ul>
</div>
<div style="display: flex; background-color: blanchedalmond;">
<iframe width="480" height="360" src="https://www.youtube.com/embed/mLXE_vtI9SM" title="FLYING OVER GREECE (4K Video UHD) - Relaxing Music With Beautiful Nature Video For Stress Relief" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
```
## 第四天(9/10)
#### 個人履歷網頁
1. 請前往 https://templateflip.com/ 下載Creative CV樣板。
> **備註**
> 這個樣板Font Awesome用的是 4.7版的
> (由index.html的第10行`<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">`可以得知。
#### 排版快速鍵
`Shift` + `Alt` + `F`=
#### 5156行，調整照片旁邊的光暈顏色
```css=
.cc-profile-image a:before {
content: "";
border: 15px solid #00bbf980; /* aaron:條整照片旁光暈顏色 rgba(55, 140, 63, 0.6); */
border-radius: 50%;
height: 180px;
width: 180px;
position: absolute;
left: 0;
-webkit-animation: pulsate 1.6s ease-out;
animation: pulsate 1.6s ease-out;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0.0;
z-index: 99; }
```
#### 3839行，banner的第一層黑色半透明遮罩
```css=
.page-header:before {
background-color: rgba(0, 0, 0, 0.5); } /* aaron:banner的第一層黑色半透明遮罩 */
```
#### 5126行，調整banner背景漸層色
```css=
.page-header {
background: rgba(44, 44, 44, 0.2);
/* For browsers that do not support gradients */
/* For Safari 5.1 to 6.0 */
/* For Opera 11.1 to 12.0 */
/* For Firefox 3.6 to 15 */
background: linear-gradient(0deg, rgba(44, 44, 44, 0.2), #00bbf980); /* aaron:以漸層的方式設定banner背景色 */
/* Standard syntax */ }
.page-header .btn {
width: 140px; }
```
#### 1256行，修改按鈕顏色
```css=
.btn-primary {
background-color: #00bbf9; /* aaron:按鈕色 */
color: #FFFFFF; }
```
#### 調整全站色系
1. Ctrl + F
2. 切換成取代模式
3. 搜尋園網站的綠色#378C3F，並在取代欄位貼上要取代的綠色
4. 全部取代
#### 1262，調整滑鼠移到按鈕上的顏色
```css=
.show > .btn-primary.dropdown-toggle:hover {
background-color: #30ebf9; /* aaron:滑鼠移到按鈕上顏色 */
color: #FFFFFF;
box-shadow: none; }
```
#### 想讓個人資訊也卡片上面也出現標題
1. 參考下方Professional Skill區塊的標題
```html=
<div class="section" id="skill">
<div class="container">
<div class="h4 text-center mb-4 title">Professional Skills</div>
<div class="card" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<div class="card-body">
...
```
2. 把`<div class="h4 text-center mb-4 title">Professional Skills</div>`複製到個人資訊區塊且位置在`<div class="container">`這一行的下方, 例如:
```html=
<div class="section" id="about">
<div class="container">
<div class="h4 text-center mb-4 title">個人資料</div> <!-- 從專業區塊參考過來的 -->
<div class="card" data-aos="fade-up" data-aos-offset="10">
<div class="row">
...
```
#### 網格系統
在這個樣板中，如果看到像
- col-lg-6
- col-md-12
的class設定，代表使用的是一種網格系統的布局；網格系統將目前的畫面(或區域)切成12等分，然後使用class來決定佔據多少等分。
col-lg-6內的lg為電腦畫面, md為平板畫面, sm為手機畫面，也就是說col-lg-6意思為在電腦畫面時會佔據一半的畫面(因為12等分裡的6等分即為一半), col-md-12表示在平板上該標籤會佔據整個畫面。
> **參考:**
> - https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
> - Bootstrap官網: https://getbootstrap.com/
#### 將要被下載的檔案名稱設定給a標籤的href屬性
index.html - 第58行
```html=
<a class="btn btn-primary" href="aaronho.pdf" target="_blank" data-aos="zoom-in" data-aos-anchor="data-aos-anchor">下載履歷</a>
```
> a標籤除了可以拿來跳轉網頁，也可以拿來下載檔案。
#### 專長區塊
一個專長的區塊結構為:
```html=
<div class="col-md-4">
<div class="progress-container progress-primary"><span class="progress-badge">HTML</span>
<div class="progress">
<div class="progress-bar progress-bar-primary" data-aos="progress-full" data-aos-offset="10"
data-aos-duration="2000" role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 90%;">
</div>
<span class="progress-value">90%</span>
</div>
</div>
</div>
```
- 兩個專長的區塊結構會被一組`<div class="row"></div>`包圍住，代表一列
- 被`<div class="row"></div>`包住的行可以使用網格系統來做排版
#### 2048行，更換專長的進度條背景顏色
```css=
.progress-container.progress-primary .progress {
background: rgba(55, 140, 163, 0.4); } /* aaron:專長進度條的背景色 */
```
#### 新增一個作品集的按鈕
```html=
<!-- 多一顆按鈕:start -->
<li class="nav-item">
<!-- aaron:active樣式可以設定網頁仔入後第一個亮起來的按鈕 -->
<a class="nav-link active" data-toggle="tab" href="#Heart" role="tablist">
<i class="fa fa-heart-o" aria-hidden="true"></i>
</a>
</li>
<!-- 多一顆按鈕:end -->
```
> 補充:
> `active`這個class可以讓網頁載入後第一個亮起來的按鈕為`active`指定的按鈕
#### 新增一個作品內容的區塊
```html=
<!-- aaron:這一個分類的內容:start, 複製的區塊id必須改成不重複的 -->
<div class="tab-pane active" id="Heart" role="tabpanel">
<div class="ml-auto mr-auto">
<div class="row">
<div class="col-md-6">
<div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<a href="#Photography">
<figure class="cc-effect"><img src="images/pic01.jpg" alt="Image" />
<figcaption>
<div class="h4">工業風</div>
<p>簡潔的風格</p>
</figcaption>
</figure>
</a></div>
<div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<a href="#Photography">
<figure class="cc-effect"><img src="images/pic03.jpg" alt="Image" />
<figcaption>
<div class="h4">現代風</div>
<p>現代的風格</p>
</figcaption>
</figure>
</a></div>
</div>
<div class="col-md-6">
<div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<a href="#Photography">
<figure class="cc-effect"><img src="images/pic02.jpg" alt="Image" />
<figcaption>
<div class="h4">地中海風</div>
<p>地中海的風格</p>
</figcaption>
</figure>
</a></div>
<div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<a href="#Photography">
<figure class="cc-effect"><img src="images/pic04.jpg" alt="Image" />
<figcaption>
<div class="h4">古典風</div>
<p>古典的風格</p>
</figcaption>
</figure>
</a></div>
</div>
</div>
</div>
</div>
<!-- aaron:這一個分類的內容:end -->
```
> 注意:
> 如果要讓網頁載入完成後第一個出現這個品的話，`id="Heart"`的那個標籤也需要設定`active`class
#### 經歷區塊的結構(也適用於學歷區塊)
```html=
<!-- aaron:經歷區塊start -->
<div class="card">
<div class="row">
<div class="col-md-3 bg-primary" data-aos="fade-right" data-aos-offset="50" data-aos-duration="500">
<div class="card-body cc-experience-header">
<p>2014年12月 - 現在</p>
<div class="h5">健行科技大學</div>
</div>
</div>
<div class="col-md-9" data-aos="fade-left" data-aos-offset="50" data-aos-duration="500">
<div class="card-body">
<div class="h5">講師</div>
<p>
<ul>
<li>響應式網頁班</li>
<li>Java基礎班</li>
<li>全端工程師養成班</li>
<li>Python大數據分析班</li>
</ul>
</p>
</div>
</div>
</div>
</div>
<!-- aaron:經歷區塊end -->
```
#### 推薦人區塊下方的指示器小圖示
```html=
<ol class="carousel-indicators">
<li class="active" data-target="#cc-Indicators" data-slide-to="0"></li>
<li data-target="#cc-Indicators" data-slide-to="1"></li>
<!-- <li data-target="#cc-Indicators" data-slide-to="2"></li> -->
</ol>
```
#### 完整的一個推薦人的區塊結構
```html=
<!-- 一個推薦人的區塊start -->
<div class="carousel-item active">
<div class="row">
<div class="col-lg-2 col-md-3 cc-reference-header"><img src="images/reference-image-1.jpg"
alt="Image" />
<div class="h5 pt-2">Aiyana</div>
<p class="category">CEO / WEBM</p>
</div>
<div class="col-lg-10 col-md-9">
<p> Habitasse venenatis commodo tempor eleifend arcu sociis sollicitudin ante pulvinar ad, est
porta cras erat ullamcorper volutpat metus duis platea convallis, tortor primis ac quisque etiam
luctus nisl nullam fames. Ligula purus suscipit tempus nascetur curabitur donec nam ullamcorper,
laoreet nullam mauris dui aptent facilisis neque elementum ac, risus semper felis parturient
fringilla rhoncus eleifend.</p>
</div>
</div>
</div>
<!-- 一個推薦人的區塊end -->
```
> 補充:
> 推薦的指示器和內容區塊也可以透過`active`class來指定網頁載入後第一個要顯示的區塊
#### 自訂字型
```css=
@font-face {
font-family: myFont;
src: url(jf-openhuninn-2.0.ttf)
```
}
> 注意:
> 字型檔需放在css同一個目錄下
## 第五天(9/17)
### 使用CSS元件樣板來打造網頁
一個CSS元件樣板網站：https://freefrontend.com/
#### Header
https://freefrontend.com/css-headers-footers/
#### Table
https://freefrontend.com/css-tables/
> **補充:**
> - 如果沒有download選項可以直接下載，可以點進demo and code選項，將HTML區塊內的語法直接全部複製到我們的HTML檔案內;而CSS區塊內的語法要複製之前，必須先確認，如果原始語法是SCSS的話，必須先從左上選單，選擇View Compiled CSS切換成CSS才能複製下來用。
#### 調整header和table之間多餘的空白
1. 使用Chrome檢查工具找到table.css第16行的`.container`樣式設定
2. 將`min-height`設定去掉，並加上`padding-top`
```css=
.container {
max-width: 1000px;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: center;
align-items: center;
/* min-height: 100vh; aaron:去掉不需要的最小高度 */
padding-top: 100px; /* aaron:增加上內間距 */
}
```
#### Footer
https://freefrontend.com/css-headers-footers/#google_vignette
1. 解壓縮後將dist目錄下的html, css, js檔名都改為footer
2. 將html複製到專案跟目錄，CSS複製到專案的css目錄下，js檔複製到專案的js目錄下
3. 因為`container`樣式跟table名字衝突了，所以改為`footer-container`，而table的`container`樣式改名為`table-container`樣式
4. 將footer.html內的`body`標籤內容全部複製到`index.html`內(放在table下方)
5. footer內容有蓋住table, 所以調整了`.footer`這個樣式
```css=
.footer {
position: relative;
margin-top: 300px;
padding: 3rem 0;
color: #fff;
background: #000;
margin-top: 500px; /* aaron:將整個footer往下移動，才不會蓋住table */
}
```
#### 樣式衝突調整
1. 將table.css內的`body`樣式改為`table-body`
2. 將footer.css內的`body`樣式改為`body-body`
3. 因為table往上捲動時會蓋住header，因此`table-body`內加上定位:
```css=
.table-body {
padding: 24px;
font-family: "Source Sans Pro", sans-serif;
margin: 0;
position: relative; /* aaron:加上定位 */
top: 100px; /* aaron:加上定位，table往下100像素 */
}
```
#### 引入Bootstrap元件庫
##### 文件
https://getbootstrap.com/docs/5.3/components/buttons/
##### 引入css
```html=
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
```
##### 引入js
```html=
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
```
##### 加入一顆按鈕
https://getbootstrap.com/docs/5.3/components/buttons/
```html=
<!-- Table -->
<div class="table-body table-container">
<!-- Bootstrap按鈕 -->
<button type="button" class="btn btn-primary">Primary</button>
<div class="css-table">
<div class="table-header">
...
```
##### 調整樣式
###### /css/table.css, 第18行
```css=
.table-container {
max-width: 1000px;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* aaron:將排版改成由上到下排列 */
gap: 10px; /* aaron:將元件間隔設定為10px */
/* min-height: 100vh; aaron:去掉不需要的最小高度 */
}
```
#### 加入input元件
https://getbootstrap.com/docs/5.3/forms/form-control/
##### 調整樣式
```html=
<!-- Table -->
<div class="table-body table-container">
<div class="row">
<div class="col">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
</div>
<div class="col">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="col">
<!-- Bootstrap按鈕 -->
<button type="button" class="btn btn-primary">Primary</button>
</div>
</div>
...
```
#### Bootstrap排版
間距調整: https://getbootstrap.com/docs/5.3/utilities/spacing/
文字調整: https://getbootstrap.com/docs/5.3/utilities/text/
```html=
<!-- Table -->
<div class="table-body table-container">
<!-- Bootstrap元件 -->
<div class="container">
<div class="row">
<div class="col pt-2 text-end">
<label for="exampleFormControlInput1" class="form-label" >Email address</label>
</div>
<div class="col">
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="col">
<!-- Bootstrap按鈕 -->
<button type="button" class="btn btn-primary">Primary</button>
</div>
</div>
</div>
...
```
## 引入Vue.js網頁互動功能框架
官網Quick Start: https://vuejs.org/guide/quick-start.html#using-vue-from-cdn
1. 在網頁下方加入script引入
```html=
<!-- 1. 引入vue.js框架 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```
2. 在`body`標籤上加上`id="app"`屬性
```html=
...
<!-- 2. 加上id屬性 -->
<body id="app">
<!-- Header -->
<div class="hero-nav">
...
```
3. 將官網的一段程式碼複製到html中(貼到body結束標籤下)
```html=
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
```
4. 測試是否引入成功(修改網站標題)
```html=
<h1>{{message}}</h1>
```
> **注意:**
> 左右的雙大括號必須存在
## 使用axios拿到桃園Ubike開放資料
#### Open Data網址
https://data.tycg.gov.tw/opendata/datalist/datasetMeta?oid=5ca2bfc7-9ace-4719-88ae-4034b9a5a55c
1. 引入axios套件
```html=
<!-- 引入axios套件 -->
<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
```
> **補充:**
> axios官網: https://github.com/axios/axios#installing
2. 加入呼叫桃園Ubike API程式碼
```html=
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: '桃園Ubike查詢網站'
}
},
// 在網頁載入完成後打算發生的事情
mounted() {
// 呼叫桃園市Ubike Open Data API
axios.get('https://data.tycg.gov.tw/api/v1/rest/datastore/a1b4714b-3b75-4ff8-a8f2-cc377e4eaa0f?format=json&limit=999')
.then(function (response) {
// handle success 成功拿到資料
console.log(response.data.result.records); /* aaron:指定只保留records裡面的資料就好 */
})
.catch(function (error) {
// handle error 發生錯誤
console.log(error);
})
.finally(function () {
// always executed 其他需要完成的動作
});
}
}).mount('#app')
</script>
```
#### 資料欄位說明
|索引|欄位名稱|說明|
|-|-|-|
|0|sareaen|行政區英文名|
|1|sarea|行政區中文名|
|2|lng|經度|
|3|sna|中文站名|
|4|snaen|英文站名|
|5|bemp|空位數量|
|6|ar|中文地址|
|7|act|全站禁用狀態(0:禁用、1:啟用)|
|8|sno|站編號|
|9|aren|英文地址|
|10|tot|場站總停車格|
|11|_id|資料編號|
|12|sbi|場站目前車輛數量|
|13|mday|微笑單車各場站來源資料更新時間|
|14|lat|緯度|
#### 將資料顯示到網頁上
```html=
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: '桃園Ubike查詢網站',
ubike_data: null, // 準備好要存ubike資料的盒子
}
},
// 在網頁載入完成後打算發生的事情
mounted() {
// 呼叫桃園市Ubike Open Data API
axios.get('https://data.tycg.gov.tw/api/v1/rest/datastore/a1b4714b-3b75-4ff8-a8f2-cc377e4eaa0f?format=json&limit=999')
.then((response) => {
// handle success 成功拿到資料
console.log(response.data.result.records); /* aaron:指定只保留records裡面的資料就好 */
this.ubike_data = response.data.result.records; // 把拿到的ubike資料傳給vue
})
.catch(function (error) {
// handle error 發生錯誤
console.log(error);
})
.finally(function () {
// always executed 其他需要完成的動作
});
}
}).mount('#app')
</script>
```
#### 加上v-for語法來讓vue根據資料筆數重複產生html標籤
```html=
<div class="css-table">
<div class="table-header">
<div class="header__item"><a id="name" class="filter__link" href="#">名稱</a></div>
<div class="header__item"><a id="wins" class="filter__link filter__link--number" href="#">地址</a></div>
<div class="header__item"><a id="draws" class="filter__link filter__link--number" href="#">可借數量</a>
</div>
<div class="header__item"><a id="losses" class="filter__link filter__link--number" href="#">可還空位</a>
</div>
<div class="header__item"><a id="total" class="filter__link filter__link--number" href="#">車輛總數</a>
</div>
</div>
<div class="table-content">
<div v-for="item in ubike_data" class="table-row">
<div class="table-data">{{item.sna}}</div>
<div class="table-data">{{item.ar}}</div>
<div class="table-data">{{item.sbi}}</div>
<div class="table-data">{{item.bemp}}</div>
<div class="table-data">{{item.tot}}</div>
</div>
</div>
</div>
```
Sign in with Wallet
Connect another wallet