# 2023-09-04 室內設計班
## 目錄
- [第一天（9/4）](#第一天（9/4）)
- [第二天（9/5）](#第二天（9/5）)
- [第三天（9/6）](#第三天（9/6）)
- [第四天（9/7）](#第四天（9/7）)
- [第五天（9/8）](#第五天（9/8）)
## 第一天（9/4）
1. 使用google搜尋`visual studio code`後點擊第一筆搜尋結果。
2. 進入Visual Studio Code官網後點擊左方藍色按鈕下載安裝檔。
3. 安裝只要一直下一步即可完成安裝。
4. 前往VSCode內Extension功能搜尋「Chinese」中文化。
5. 前往 https://html5up.net/ 下載Forty與Lens兩個樣板。
6. 網頁的首頁檔名都會叫`index.xxx`，請勿修改首頁主檔名。
7. 回到Visual Stuio Code，透過「檔案」->「開啟資料夾」找到剛剛解壓縮的目錄來打開它；打開後VSCode左邊會出現網站的檔案清單。
8. 打開index.html並搜尋「Hi, my name is Forty」。
> 搜尋的快速鍵: Ctrl+F(Windows), CMD+F(MacOS)
9. 修改完後記得按Ctrl+S儲存檔案。
> 未存擋前，檔名標籤旁會是一個實心小圓，存擋後會變x
10. 回到瀏覽器除重新整理網頁確認剛剛修改的標題有成功。
11. WIN按鈕加左右方向鍵可以將視窗放到螢幕左邊或右邊。
12. 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`
#### 修改樣板
##### `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:修該網頁打開後要延遲幾秒再開始轉場效果 */
```
5. 第3427行，修改標題顏色
```css=
#banner h1 {
font-size: 3.25em;
color: #807182;
}
```
> 這個顏色是我們自己加上去的樣式
###### index.html
6. 第60 ~70 行，一個分類的區塊範圍
```html=
<article>
<span class="image">
<img src="images/pic01.jpg" alt=""/>
</span>
<header class="major">
<h3><a href="工業風.html" class="link">工業風</a></h3>
<p>這是我的工業風作品</p>
</header>
</article>
```
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:修改色塊的顏色 */
}
```
## 第二天（9/5）
13. 加上點擊回到最上面按鈕(圖片按鈕) (固定按鈕)
###### index.html
```html=
<body class="is-preload" id="top">
<a class="go-top" href="#top">↑</a>
```
###### 圖片版本
```html=
<body class="is-preload" id="top">
<a class="go-top scrolly" href="#top">
<img class="btn-img" src="https://png.pngtree.com/png-vector/20190123/ourmid/pngtree-thank-you-little-fool-cute-cartoon-cute-cat-png-image_533627.jpg" />
</a>
```
###### main.css
```css=
.go-top {
display: flex; /* 使用flex排版方式 */
width: 50px; /* 設定按鈕寬度 */
height: 50px; /* 設定按鈕高度 */
background-color: #87c5a4; /* 設定按鈕顏色 */
position: fixed; /* 使用fixed定位，固定在螢幕上不會被捲動 */
right: 20px; /* 將按鈕放到畫面右邊，距離邊界20像素 */
bottom: 20px; /* 將按鈕放到畫面左邊，距離邊界20像素 */
z-index: 10; /* 將按鈕的圖層往上拉，不然會被蓋住 */
align-items: center; /* 箭號垂直置中 */
justify-content: center; /* 箭號水平置中 */
font-size: 2.5em; /* 箭號大小 */
border-radius: 50px; /* 按鈕變成圓形 */
border: none; /* 消除下面的底線 */
padding-bottom: 5px; /* 讓箭號往上移動一點點(圖片版需移除移除) */
box-shadow: 2px 2px 10px 2px white; /* 按鈕陰影 */
overflow: hidden; /* 隱藏超出按鈕的資料 */
opacity: 0.5; /* 設定按鈕平常是半透明 */
}
.btn-img {
object-fit: cover; /* 縮小圖片 */
width: 100%; /* 圖片和按鈕一樣寬 */
height: 100%; /* 圖片和按鈕一樣 */
}
.go-top:hover { /* 滑鼠移到按鈕上會套用的樣式 */
background-color: #53e3fb;
color: black;
opacity: 1; /* 設定按鈕滑鼠在上方時不透明，清楚顯示 */
}
```
> 加在main.css的最下面即可
### 幫分類區塊的某個標題換個顏色
###### index.html
#### 第86行左右
```html=
<h3><a href="landing.html" class="link"><span class="special-text">現代風</span></a></h3>
<p class="special-text2">這是現代風</p>
```
###### main.css
加在最下面:
```css=
.special-text, .special-text2 {
color: yellowgreen;
font-size: 1.2em;
}
```
#### 3602行，修改下面區塊的背景色
```css=
#main {
background-color: #3d703b;
}
```
#### 3606行，新增一個樣式，指定inner class內的h2標籤會生效的樣式
```css=
#main > * > .inner h2 {
color: yellowgreen; /* 調整下方區塊標題顏色 */
}
> 此段語法是自行新增的
#### 3619，修改網頁下方區塊文字的顏色
```css=
#main > * > .inner {
color: #c8de6f; /* 修改網頁下方區塊的文字顏色 */
padding: 4em 0 2em 0;
margin: 0 auto;
max-width: 65em;
width: calc(100% - 6em);
}
```
## 修改網頁上的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-開頭的樣式名稱。
6. 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;
}
```
## 修改網頁上按鈕樣式
#### 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色碼找到的
## 修改網頁上按紐樣式(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;
}
```
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`的設定跟寬, 高一樣時，該元素會變成圓形。
## 第三天（9/6）
1. 將landing.html複製出多個檔案，然後更改檔名為:
- 地中海風.html
- 工業風.html
- 現代風.html
- 古典風.html
- 北歐風.html
> **補充:**
> 因為首頁不同的色快點擊後目前都會切換到同一個網頁，如果要切換到不同網頁，必須要有不同的html檔案。
2. 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>
```
> **補充:**
> 可以重網址列確認有沒有跳到剛剛改過的頁面檔名
#### 將樣式分開
當修改`工業風.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必須要調整。
4. 要放Youtube影片的話，可以在Youtube影片上點右鍵，選擇「複製嵌入程式碼」，後去取代掉原本的img標籤；如果會影響版型可以試著也刪除img標籤外層不需要的標籤。
5. 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="100%" height="400" src="https://www.youtube.com/embed/g7u1QJejJAM" title="26坪像52坪？！ 她不只讓空間翻倍 還能辦趴聚會！ ｜豐聚室內裝修設計-李羽芝｜@gorgeousspace" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
```
#### 新增作品集（相簿）到網站內
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/7）
#### 如何從github網站拿回你的原始碼並且可以繼續修改網站
1. 下載github desktop: https://desktop.github.com/
2. 安裝並登入github
> 登入後會跳轉回紫貓
3. 選擇要下載到本地端的專案（通常會是{帳號名稱}.github.io)
4. 下載完成後選擇畫面右邊的「Open in Visual Studio Code」可以開始修改網站
5. 修改完後回到紫貓
6. 撰寫本次修改的了什麼
7. commit
8. push推到github
9. 等待10秒～3分鐘左右就會更新到網站上
> 注意：
> 修改時請注意透過紫貓來打開Visual Studio Code，比教不會改錯第方造成網站沒有變化
### 調整工業風
###### 工業風.html
#### 48行，banner背景圖
```html=
<img src="images/banner.jpg" alt="" /> <!-- 內頁的banner背景圖 -->
```
#### 53~55行，幫banner標題加樣式
###### 工業風.html
```html=
<div class="content">
<p class="hi">秒懂３大工業風設計元素！工業風客廳家具推薦，打造復古美感</p>
</div>
```
#### 3422~3425行
###### assets/css/工業風.css
```css=
#banner .inner .content .hi {
color: #7c3f1c;
font-size: 1.5em;
}
```
#### 87行，幫「看更多」按鈕調整樣式
```html=
<p>工業風大約在2000至2010年之間流行，這種粗曠、帶有原始氣息的風格在歐美地區大多被用在郊區住家的閣樓（Loft）或是倉庫，因為多半是閒置的空間所以並沒有放置太多家具及物品，只有沒有粉刷過的牆壁，和一些放置久未使用的沙發家具，也許會簡單的掛一盞燈。</p>
<ul class="actions">
<li><a href="generic.html" class="button"><span class="hi2">看更多</span></a></li>
</ul>
```
#### 2984~2988行
###### assets/css/工業風.css
```css=
/* aaron:作品區塊的標題顏色 */
.spotlights > section > .content h3, .spotlights section .content .action li a .hi2 {
color: #fc8f5c;
}
```
#### 191行，修改footer文字
```html=
<ul class="copyright">
<li>© 2023</li><li>Design: Aaron Ho</li>
</ul>
```
#### 102行，工業風全網頁的背景色
###### assets/css/工業風.css
```html=
body {
background: #753911; /* aaron:全網頁的背景色 */
}
```
#### 119~120行，聯絡我表單文字顏色＋字型修改
###### assets/css/工業風.css
```css=
body, input, select, textarea {
color: #dd00dd; /* aaron:連絡我表單文字顏色 */
font-family: "Source Sans Pro", Helvetica, sans-serif; /* aaron:網頁字型 */
font-size: 17pt;
font-weight: 300;
letter-spacing: 0.025em;
line-height: 1.65;
}
```
#### 184行，聯絡表單內的標題顏色
###### assets/css/工業風.css
```css=
h1, h2, h3, h4, h5, h6 {
color: #aaaa00; /* aaron:聯絡表單內的標題顏色 */
font-weight: 600;
line-height: 1.65;
margin: 0 0 1em 0;
}
```
> 注意：
> 此處修改的是全網頁的標題預設顏色，其他地方的標題顏色有可會受到影響
#### 1787行，banner下方區塊的底線顏色
###### assets/css/工業風.css
```css=
header.major > :first-child:after {
content: '';
background-color: #ceb213; /* aaron:banner下方區塊的底線顏色 */
display: block;
height: 2px;
margin: 0.325em 0 0.5em 0;
width: 100%;
}
```
#### 1893行，聯絡我表單的文字顏色
###### assets/css/工業風.css
```css=
label {
color: #d8ca7b; /* aaron:聯絡我表單的文字顏色 */
display: block;
font-size: 0.8em;
font-weight: 600;
letter-spacing: 0.25em;
margin: 0 0 1em 0;
text-transform: uppercase;
}
```
#### 2136行，icon字型的顏色
###### assets/css/工業風.css
```css=
.icon.alt:before {
background-color: #ffffff; /* icon字型的顏色 */
border-radius: 100%;
color: #242943;
display: inline-block;
height: 2em;
line-height: 2em;
text-align: center;
width: 2em;
}
```
#### 2519~2520行，修改按鈕文字色
###### assets/css/工業風.css
```css=
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
-moz-appearance: none;
-webkit-appearance: none;
-ms-appearance: none;
appearance: none;
-moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
-webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
-ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: inset 0 0 0 2px #f86706; /* aaron:修改按鈕邊框色 */
color: #d4611f; /* aaron:修改按鈕文字色 */
cursor: pointer;
display: inline-block;
...
}
```
#### 2633 + 2642，修改按鈕文字色
###### assets/css/工業風.css
```css=
input[type="submit"].next:before,
input[type="reset"].next:before,
input[type="button"].next:before,
button.next:before,
.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");
}
input[type="submit"].next:after,
input[type="reset"].next:after,
input[type="button"].next:after,
button.next:after,
.button.next:after {
/* 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: %23ffffff%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");
opacity: 0;
z-index: 1;
}
```
#### 2953行，作品介紹奇數區塊背景色
###### assets/css/工業風.css
```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: #795511; /* aaron:作品介紹奇數背景色 */
}
```
#### 2984~2987行，作品區塊的標題顏色
###### assets/css/工業風.css
```css=
/* aaron:作品區塊的標題顏色 */
.spotlights > section > .content h3, .spotlights section .content .action li a .hi2 {
color: #fc8f5c;
}
```
#### 3021行，作品介紹偶數背景色
###### assets/css/工業風.css
```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: #64421b; /* aaron:作品介紹偶數背景色 */
}
```
#### 3135行，網頁最上方選單bar的背景色
###### assets/css/工業風.css
```css=
#header {
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
background-color: #975a13; /* aaron:最上面選單的背景色 */
box-shadow: 0 0 0.25em 0 rgba(0, 0, 0, 0.15);
cursor: default;
font-weight: 600;
height: 3.25em;
left: 0;
letter-spacing: 0.25em;
line-height: 3.25em;
margin: 0;
position: fixed;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 10000;
}
```
#### 3287行，網頁最上方選單bar的背景色
###### assets/css/工業風.css
```css=
#header.alt.style3 .logo strong { /* 內頁的 banner顏色 */
color: #ec8d81;
}
```
#### 3421~3425行，網頁最上方選單bar的背景色
###### assets/css/工業風.css
```css=
/* 設定 ID=banner裡面的p標籤文字顏色 */
#banner .inner .content .hi {
color: #7c3f1c;
font-size: 1.5em;
}
```
> 這個樣式整個都是新增的
#### 3626行，調整banner下面那個區塊高度
###### assets/css/工業風.css
```css=
#main > *:first-child {
border-top: 0;
height: 350px; /* aaron:調整banner下面那個區塊高度 */
}
```
#### 3630~3632行，新增一個樣式，指定 inner class內的h2標籤會生效的樣式
###### assets/css/工業風.css
```css=
/* aaron:新增一個樣式，指定 inner class內的h2標籤會生效的樣式 */
#main > * > .inner h2 {
color: rgb(202, 113, 40);
}
```
> 這個樣式整個都是新增的
#### 3635行，修改網頁下方區塊的文字顏色
###### assets/css/工業風.css
```css=
#main > * > .inner {
color: #d49d26; /* aaron:修改網頁下方區塊的文字顏色 */
padding: 4em 0 2em 0 ;
margin: 0 auto;
max-width: 65em;
width: calc(100% - 6em);
}
```
## 第五天（9/8）
## 第二個專案-個人線上履歷
#### 個人履歷網頁
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">`可以得知。
2. 瀏覽器分頁名稱
index.html - 第7行
```html=
<title>我是Aaron Ho</title>
```
3. 將要被下載的檔案名稱設定給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標籤除了可以拿來跳轉網頁，也可以拿來下載檔案。
4. 一組社群按鈕的標籤範圍
index.html - 第66~69行
```html=
<a class="btn btn-default btn-round btn-lg btn-icon" target="_blank"
href="https://zh-tw.facebook.com/aaronyanmusic" rel="tooltip" title="追蹤我的臉書">
<i class="fa fa-facebook"></i>
</a>
```
> Fontawesome 4.7網站: https://fontawesome.com/v4/icons/
6. 5156行，大頭照旁的光暈顏色
```css=
.cc-profile-image a:before {
content: "";
/* aaron:大頭照旁邊的光暈顏色 */
border: 15px solid #46b1c9;
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;
}
```
5. 修改banner背景遮罩顏色
##### 38xx行，黑色遮罩
```css=
.page-header:before {
background-color: rgba(0, 0, 0, 0.1); } /* aaron:banner的黑色遮罩(banner有兩層遮罩) */
```
##### 51xx行，漸層遮罩
```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 */
/* aaron: linear-gradient()漸層色函式，0deg=0度, 順時鐘方向, 起始顏色, 中間色1....中間色n, 結束顏色 */
background: linear-gradient(180deg, rgba(44, 44, 44, 0.2), #ffff0070, rgba(247, 178, 173, 0.8));
/* Standard syntax */
}
```
6. 15xx行，按鈕文字顏色
```css=
.btn-primary {
/* background-color: #378C3F; 原本的綠色按鈕 */
background-color: #F7B2AD; /* aaron:按鈕顏色 */
color: #FFFFFF; /* aaron:按紐文字顏色 */
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.btn-primary:active:hover,
.btn-primary.active:focus,
.btn-primary.active:hover,
.show>.btn-primary.dropdown-toggle,
.show>.btn-primary.dropdown-toggle:focus,
.show>.btn-primary.dropdown-toggle:hover {
/* background-color: #40a249; */
background-color: #CEB7B3; /* aaron:滑鼠移到按鈕上時的按鈕顏色 */
color: #FFFFFF; /* aaron:滑鼠移到按鈕上的按鈕文字顏色 */
box-shadow: none;
}
```
7. 快速修改整個網頁色系的小技巧-全部取代
將`#378C3F`這個綠色RGB值透過Visual Studio Code的全部取代功能，可以一次將所有同樣式綠色的地方一次變成想要的色系。
全部取代的快速鍵:
|MacOS|Windows|
|---|---|
|`CMD`+`H`|`Ctrl`+`H`|
如果全部取代後發現效果不對，直接使用快速鍵:MacOS=`CMD`+`Z`或Windows=`Ctrl`+`Z`復原即可。
8. 1257行，按鈕背景顏色
```css=
.btn-primary {
background-color: #46b1c9;
...
}
9. 1266行，滑鼠移到按鈕上時的背景顏色
```css=
.show > .btn-primary.dropdown-toggle:hover {
background-color: #66e1e9;
...
}
10. 1106、1126行，社群按鈕的顏色設定
```css=
.btn,
.navbar .navbar-nav>a.btn {
border-width: 2px;
font-weight: 400;
font-size: 0.8571em;
line-height: 1.35em;
margin: 5px 1px;
border: none;
border-radius: 0.1875rem;
padding: 11px 22px;
cursor: pointer;
background-color: #F7B2AD; /* aaron:社群按鈕的顏色 */
color: #FFFFFF; /* aaron:社群icon的顏色 */
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.btn:active:focus,
.btn:active:hover,
.btn.active:focus,
.btn.active:hover,
.show>.btn.dropdown-toggle,
.show>.btn.dropdown-toggle:focus,
.show>.btn.dropdown-toggle:hover,
.navbar .navbar-nav>a.btn:hover,
.navbar .navbar-nav>a.btn:focus,
.navbar .navbar-nav>a.btn:active,
.navbar .navbar-nav>a.btn.active,
.navbar .navbar-nav>a.btn:active:focus,
.navbar .navbar-nav>a.btn:active:hover,
.navbar .navbar-nav>a.btn.active:focus,
.navbar .navbar-nav>a.btn.active:hover,
.show>.navbar .navbar-nav>a.btn.dropdown-toggle,
.show>.navbar .navbar-nav>a.btn.dropdown-toggle:focus,
.show>.navbar .navbar-nav>a.btn.dropdown-toggle:hover {
background-color: #CEB7B3; /* aaron:滑鼠移到社群按鈕上的顏色 */
color: #FFFFFF; /* aaron:滑鼠移到社群按鈕上的icon顏色 */
box-shadow: none;
}
```
## 自訂字型
```css=
@font-face {
font-family: myFont;
src: url(jf-openhuninn-2.0.ttf)
}
> 注意:
> 字型檔需放在css同一個目錄下
Sign in with Wallet
Connect another wallet