# 2021-10-04 作品導覽平台開發-上課日誌
###### tags: `2021` `綠建築室內設計實作班` `第一期`
---
## 課程開始之前
##### 講義網址
[http://www.aaronlife.com/v1/teaching/_timetable_uch_rwd_2021-09-27.html](http://www.aaronlife.com/v1/teaching/_timetable_uch_rwd_2021-09-27.html)
### 文件註記
#### 說明
樣板修改處都會加上註記，複習時只要搜尋註記的關鍵字就可以快速找到修改過的地方。
#### 註記格式
aaron:{日期}:{序號}:{描述}
例如:
###### html文件
```
<!-- aaron:20211001:01:網頁大標題 -->
```
###### css文件
```
/* aaron:20211001:01:修改Banner大標題的顏色 */
```
### 上課資料
#### 下載地點
```
https://drive.google.com/drive/folders/1cYCr80wv_ipUaO6rWV7_13pRk1nyjlMZ
```
### 作業繳交
#### 說明
請上傳上課後產出的作品展示平台、個人介紹網頁其中一個壓縮後放到Google Drive作業繳交區內
#### 期限
結訓前一週。
#### 上傳地點
```
https://drive.google.com/drive/folders/1dSN8cFn04-WUqItdfJNJuWBChn5oRJlR
```
#### 檔案格式
```
{學號}_{姓名}_檔名.zip
```
例如:
```
01_何偉全_aaron_resume.zip
```
## 第一天（10/4）
### Visual Studio Code
#### 介紹
#### 快速鍵
### Google Chrome
#### 介紹
#### 快速鍵
### 上課重點
1. 21位學員。
2. 搜尋Visual Studio Code。
3. 點選第一筆搜尋結果進入後點藍色按鈕下載。
4. 前往VSCode內Extension功能搜尋Chinese中文化
5. 前往 https://html5up.net/ 下載Forty與Lens兩個樣板。
6. 英文網站可以找License相關字來看樣版的授權。
7. html5up網站提供的樣板授權可以用在「商業行為」及「任意修改」。
8. 網頁的首頁檔名都會叫`index.xxx`，請勿修改首頁主檔名。
9. WIN按鈕加左右方向鍵可以將視窗放到螢幕左邊或右邊。
10. html標籤的五個基本規則：
- 標籤都是成雙成對的「起始」＋「結束標籤」。
- 沒內容的標籤可以寫成空標籤。
- 標籤不可以交錯。
- html標籤和屬性名稱建議使用小寫，較容易閱讀。
- 標籤可以有屬性用來提供額外設定。
```
<標簽名字-起始> 內容 </結束標籤>
<h1>aaronlife室內設計</h1>
<br/> <== 也稱空標籤
------------------------------------
注意: 標籤不可交錯
<header>
<h1>aaronlife室內設計</h1>
<h3>我的作品介紹網站<br/><a>dsjlfkd</a></h3>
</header>
---------------------------
<html></html> 用小寫
---------------------------
超連結標籤 需要屬性
<a href="https://www.google.com">點我打開Google搜尋</a>
```
11. 一個簡單的HTML範例：
```
<!DOCTYPE html>
<html>
<head>
<!-- 這裡放網頁設定(註解標籤) -->
<title>Aaron標題</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- 這裡面放網頁內容 -->
<h1>網頁大標題</h1>
<setion>
<h2>選單</h2>
<ul>
<li>選項1</l1>
<li>選項2</li>
</ul>
<p>Hello</p>
</setion>
<section>
<article>
<h2 class="colorRed" id="active">文章標題</h2>
<p>文章第一段</p>
<p>文章第二段</p>
<img src="https://i1.kknews.cc/SIG=20v09hr/22q40004pqs8n7p6n590.jpg" />
</article>
<article>
<h2 class="colorRed">文章標題</h2>
<p>文章第一段</p>
<p>文章第二段</p>
<img src="https://i1.kknews.cc/SIG=20v09hr/22q40004pqs8n7p6n590.jpg" />
</article>
</setion>
<footer>
Copyright by Aaron, Design:
<a href="http://www.aaronlife.com">aaronlife</a>
</footer>
</body>
</html>
```
13. `Ctrl`-`+`: 放大VSCode文字，`Ctrl`-`-`: 縮小文字。
14. `Ctrl`-`F`: 搜尋文字。
15. 請在每次VSCode的修改後`Ctrl`-`S`儲存檔案再到瀏覽器`Ctrl`-`R`或`F5`重新整理網頁，方能看到修改後的樣子。
16. `Ctrl`-`Z`: 復原上ㄧ步，`Ctrl`-`Shift`-`Z`: 取消復原
17. VSCode裡如果看到有檔名，可以按下`Ctrl`不放，然後在檔名上點及滑鼠左鍵，就可以再VSCode內打開該檔案。
18. `Ctrl + /` 可以讓標籤變成註解，再按一次會恢復原狀。
19. 網頁內使用的Icon字型: https://fontawesome.com/
20. 字型有三種style是免費的:Solid Regular Brands，使用時在class屬性內設定需要修改成對應的style，例如:
```
class="icon brands alt fa-line"
```
21. 注意icon的版本要小於等於樣板使用的版本才可以。
22. ©是html的特殊字元( 是空白字元)。
23. CSS範例:
```
/*
1. 內層的設定優先權比外層高 。
2. 類別的樣式設定優先權比標籤高。
3. id的樣式優先權比類別高。
4. 多層的明確指定設定優先權比單層高。
5. !important的優先權很高，小心服用。
*/
h2 {
text-align: left;
color: blue;
}
body setion p {
color: Azure;
background-color: yellow;
}
body {
background-color: pink;
color: yellow;
font-size: 1.2em;
text-align: center;
}
img {
display: inline;
text-align: center;
}
p {
color: green;
background-color: gray;
}
/* CSS類別 */
.colorRed {
color: red !important;
}
/* ID樣式設定 */
#active {
color: Aqua;
}
```
18. CSS基本重點：
- 檔名通常為main.css，透過html裡的link標籤引入。
- 可以直接對著標籤這定樣式，id設定樣式，class設定樣式，語法為：
```
tag-name
{
css-name: css-value;
...
}
.class-name
{
css-name: css-value;
...
}
#id-name
{
css-name: css-value;
...
}
```
- CSS樣式套用有其優先權關係：
!important > id > class > 多層tag > tag > 外層
20. CSS指令
| 指令 | 說明 | 範例 |
| ------- | -------- | --- |
| font-size|改變文字大小 | font-size: 2em;|
|color|文字顏色|color: #ff00ff;|
|background-color|改變背景色| background-color: white;|
|font-family|設定字型|font-family: "新細明體", "Arial"|
|text-align|文字水平對齊方式(center, left, right)|text-align: center;|
|width|元素的寬度，可以使用百分比表示|width:40%;|
|border|邊框設定:樣式 寬度 顏色|border: solid 1px #FFFFFF;|
|margin|元素的外邊距設定|margin: 100px;|
|padding|元素的內邊距設定|padding: 100px;|
25. 網頁元素的組成：
26. 配色產生器: https://coolors.co/4281a4-48a9a6-e4dfda-d4b483-c1666b
27. 樣板修改會先改內容，然後再調整樣式。
## 第二天（10/5）
### 上課重點
1. 因為所有的分類次頁都是複製的，所以預設的圖檔名稱都會一樣，需要把它改掉，否則會發現所有次頁的圖檔都一模一樣，修改的地方為:
```
<section>
<a href="地中海客廳.html" class="image">
<img src="images/pic08.jpg" alt="" data-position="center center" />
</a>
<div class="content">
...
</div>
</section>
```
1. 檔案會是次頁的html檔。
2. 在每個setion裡有個img標籤，將src屬性內的檔名修改指到不同的檔案。
3. 在6x行左右。
### 樣板調整
### 最上面固定住的標題列
```
#header {
...
background-color: #12615a; /* 背景色 */
...
}
#header .logo {
...
font-size: 0.8em; /* 文字大小 */
...
}
```
> **補充**
> 1. 搜尋`#header`
> 2. 約在31xx行。
#### 調整Banner標題文字大小與顏色
```
#banner h1 {
font-size: 3.25em; /* 文字大小 */
color:#e7b788; /* 文字顏色 */
...
}
```
> **補充**
> 1. assists/css/main.css內搜尋`#banner`
> 2. 約34xx行
> 3. color是自行加上的
#### 修改Banner副標題文字大小與顏色
```
##banner > .inner .content p {
font-size: 1.7em; /* 文字大小 */
color: #ffffff; /* 文字顏色 */
...
}
```
> **補充**
> 1. assists/css/main.css內搜尋`.content`
> 2. 約34xx行
> 3. color是自行加上的
#### 調整類型裡面的描述文字大小與顏色
```
header.major > p {
font-size: 1.7em; /* 文字大小 */
color:#87c5a4; /* 文字顏色 */
...
}
```
> **補充**
> 1. assists/css/main.css內搜尋`.major`
> 2. 約17xx行
> 3. color是自行加上的
#### 調整按鈕
```
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
...
box-shadow: inset 0 0 0 2px #ffffff; /* 按鈕邊框 */
color: #ffffff; /* 按鈕文字顏色 */
...
font-size: 1.2em; /* 按鈕文字大小 */
font-weight: 100; /* 按鈕文字粗細 */
height: 2.5em; /* 按鈕高度(需line-height一起調整) */
...
line-height: 2.5em; /* 按鈕高度(需height一起調整) */
...
}
```
> **補充**
> 1. assists/css/main.css內搜尋`.button`
> 2. 約25xx行
#### 調整按鈕(滑鼠在上面停留時)
```
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 #6cc751; /* 邊框 */
color: #7a2afa !important; /* 文字顏色 */
}
```
> **補充**
> 1. assists/css/main.css內搜尋`.button`
> 2. 約25xx行
> 3. color需加上`!important`來拉高優先權。
#### 調整按鈕方向符號(滑鼠在上面停留時)
```
input[type="submit"].next:before,
input[type="reset"].next:before,
input[type="button"].next:before,
button.next:before,
.button.next:before {
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");
}
/* 滑鼠移上去 */
input[type="submit"].next:after,
input[type="reset"].next:after,
input[type="button"].next:after,
button.next:after,
.button.next:after {
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: %23000000%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");
...
}
```
> **補充**
> 1. assists/css/main.css用色碼`ffffff`反向找出有用到的`.button`內的設定
> 2. 約25xx行
> 3. 請注意`%23ffffff%3B`這段文字
### Banner遮罩
```
#banner:after {
-moz-transition: opacity 2s ease;
-webkit-transition: opacity 2s ease;
-ms-transition: opacity 2s ease;
transition: opacity 2s ease; /* 遮罩透明動畫轉場時間 */
-moz-transition-delay: 0.75s;
-webkit-transition-delay: 0.75s;
-ms-transition-delay: 0.75s;
transition-delay: 0.75s; /* 遮罩透明動畫開始時間 */
...
background-color: #43243c; /* 遮罩顏色 */
...
opacity: 0; /* 遮罩透明度，為0~1之間的小數值 */
...
}
```
> **補充**
> 1. assists/css/main.css搜尋`#banner`
> 2. 約34xx行
> 3. -moz-, -webkit-, -ms-開頭的屬性都是為了舊版上未支援HTML 5瀏覽器用。
### Banner高度
```
#banner.major {
height: 100vh; /* 100vh會占滿螢幕 */
...
}
```
> **補充**
> 1. assists/css/main.css搜尋`#banner`
> 2. 約34xx行
> 3. vh=view height, 也就是螢幕可是範圍的高度百分比，會跟隨瀏覽器縮放改變。
### 分類標題的文字
```
.tiles article h3 {
font-size: 1.75em; /*文字大小 */
color: #9d87c5; /* 文字顏色 */
}
```
> **補充**
> 1. assists/css/main.css搜尋`.tiles`
> 2. 約27xx行
> 3. color屬性需要自己加
### 分類區塊寬度
##### 較窄的那邊的寬度
```
.tiles article {
...
width: 40%;
}
```
##### 較寬的那邊的寬度
```
.tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) {
width: 60%;
}
```
##### 自行新增指定第5個分類的寬度占滿100%
```
.tiles article:nth-child(5) {
width: 100%;
}
```
> **補充**
> 1. assists/css/main.css搜尋`.tiles`
> 2. 約27xx行和28xx
### 分類方塊標題和副標題的分隔線
```
header.major > :first-child:after {
...
background-color: #74fd7b; /* 分隔線顏色 */
...
height: 4px; /* 分隔線的粗細 */
...
}
```
> **補充**
> 1. 由刪掉major之後分隔線會消失可以知道是由該css類別類設定的。
> 2. assists/css/main.css搜尋`.major`。
> 3. 約17xx行。
### 分類區塊背景色
```
.tiles article:nth-child(6n - 5):before {
background-color: #64f789;
}
.tiles article:nth-child(6n - 4):before {
background-color: #8d82c4;
}
.tiles article:nth-child(6n - 3):before {
background-color: #ec8d81;
}
.tiles article:nth-child(6n - 2):before {
background-color: #e7b788;
}
.tiles article:nth-child(6n - 1):before {
background-color: #8ea9e8;
}
.tiles article:nth-child(6n):before {
background-color: #87c5a4;
}
```
> **補充**
> 1. assists/css/main.css搜尋`.tiles`。
> 2. 約28xx行。
> 3. 搜尋時看到六個顏色的background-color設定就表是中了。
### 分類區塊的遮罩透明度
##### 一般
```
.tiles article:before {
...
opacity: 0.85; /* aaron:20211005:05:分類區塊遮罩透明度 */
...
}
```
##### 滑鼠移上去時
```
.tiles article:hover:before {
opacity: 0; /* 透明度設定值為0~1之間的小數值 */
}
```
> **補充**
> 1. assists/css/main.css搜尋`.tiles`。
> 2. 約28xx行。
> 3. hover假指令指的就是滑鼠移到元素上的動作。
### 聯絡資訊上面的文字區域標題
因為其文字顏色及大小都是使用h2標籤預設樣式:
```
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
font-weight: 600;
line-height: 1.65;
margin: 0 0 1em 0;
}
```
> **補充**
> 在1xx行
再不影響其他h2樣式設定的情況下，我們可以自行新增一個CSS類別來單獨設定它:
##### index.html
```
<!-- Two -->
<section id="two">
<div class="inner">
<header class="major">
<h2 class="my_des">關於綠建築標章</h2>
</header>
...
</div>
</section>
```
> **補充**
> 在1xx行
##### main.css
```
.my_des {
color:#7a2afa;
}
```
> **補充**
> 你可以在CSS檔內的任意地方增加它，但不可以放在其他樣式的大括號範圍內。
### 聯絡資訊上面的文字區域背景色
```
#main {
background-color: #6a9679;
}
```
> **補充**
> 1. 由於內層的class都沒有找到相關設定，因此一直往外層的class或id來搜尋，值到`<div id="main">`裡面的main(這是id)才找到。
> 2. assists/css/main.css搜尋`#main`。
> 3. 約36xx行。
### 表單內的輸入框標題
```
label {
color: #f80b0b; /* 文字顏色 */
...
font-size: 1.0em; /* 文字大小 */
font-weight: 600; /* 文字粗細 */
...}
```
> **補充**
> 1. 由於沒有CSS類別可以搜尋，`class="fields`搜尋也沒有，所以直接找label標籤的設定。
> 2. assists/css/main.css搜尋`label`。
> 3. 約19xx行。
### Icon字型
```
.icon.alt:before {
background-color: #f30a0a; /* Icon字型背景色 */
...
color: #4c68f8; /* Icon字型背前景色 */
...
font-size: 1.2em; /* Icon字型大小 */
}
```
### 聯絡資訊裡的重點按鈕
##### 一般狀態
```
input[type="submit"].primary,
input[type="reset"].primary,
input[type="button"].primary,
button.primary,
.button.primary {
background-color: #881616; /* 背景色 */
...
color: #d2ec3d;/* 文字色 */
}
```
##### 滑鼠移上去
```
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: #cc4d12; /* 背景色 */
color: #f5f6fc !important; /* 文字色 */
}
```
### 聯絡資訊右半的文字
因為其文字顏色及大小都是使用h3標籤預設樣式:
```
h1, h2, h3, h4, h5, h6 {
color: #ffffff;
font-weight: 600;
line-height: 1.65;
margin: 0 0 1em 0;
}
```
> **補充**
> 在1xx行
再不影響其他h2樣式設定的情況下，我們可以自行新增一個CSS類別來單獨設定它:
##### index.html
```
<section class="split">
<section>
<div class="contact-method">
<span class="icon brands alt fa-line"></span>
<h3 class="my_contact">Email</h3>
<a href="#" class="my_contact">aaronlife@gmail.com</a>
</div>
</section>
<section>
<div class="contact-method">
<span class="icon solid alt fa-phone"></span>
<h3 class="my_contact">電話</h3>
<span class="my_contact">(886) 03-393-9889</span>
</div>
</section>
<section>
<div class="contact-method">
<span class="icon solid alt fa-home"></span>
<h3 class="my_contact">地址</h3>
<span class="my_contact">桃園市中壢區健行路111號</span>
</div>
</section>
</section>
```
> **補充**
> 在1xx行
##### main.css
```
.my_contact {
color:#6fc3df; /* 自訂顏色給聯絡人右邊區域標題用 */
font-size: 1.1em;/* 自訂大小聯絡人右邊區域標題用 */
}
```
> **補充**
> 你可以在CSS檔內的任意地方增加它，但不可以放在其他樣式的大括號範圍內。
### 表單內的輸入框
因為其文字顏色及背景色都是使用input/textarea標籤預設樣式:
```
body, input, select, textarea {
color: #ffffff;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 17pt;
font-weight: 300;
letter-spacing: 0.025em;
line-height: 1.65;
}
```
> **補充**
> 在1xx行
再不影響預設樣式設定的情況下，我們可以自行新增一個CSS類別來單獨設定它:
##### index.html
```
<div class="fields">
<div class="field half">
<label for="name">姓名</label>
<input class="my_input" type="text" name="name" id="name" />
</div>
<div class="field half">
<label for="email">Email</label>
<input class="my_input" type="text" name="email" id="email" />
</div>
<div class="field">
<label for="message">訊息</label>
<textarea class="my_input" name="message" id="message" rows="6"></textarea>
</div>
</div>
```
> **補充**
> 在1xx行
##### main.css
```
.my_input {
color:#64f789 !important; /* 輸入框裡面文字色 */
background-color:#43243c !important; /* 輸入框背景色 */
}
```
> **補充**
> 因為input標籤套用這個class時似乎沒有生效，所以加上了`!important`拉高優先權。
### 聯絡資訊裡的邊界線條
##### 最下面那條線
```
#contact {
border-bottom: solid 10px rgba(212, 212, 255, 0.1);\
...
}
```
##### 中間那條線
```
#contact > .inner > :nth-child(2n - 1) {
...
border-right: solid 10px rgba(212, 212, 255, 0.1);
...
}
```
##### 右邊那兩條水平的線
```
#contact > .inner > .split > *:before {
border-top: solid 10px rgba(212, 212, 255, 0.1);
...
}
```
> **補充**
> 1. 搜尋`#contact`，因為`id="contact"`的範圍包含了全部的線條，所以如此推測。
> 2. 三個關於線的修改都在36xx行。
## landing.html
### 將圖片介紹改為Youtube影片
```
<section>
<!-- 刪除height設定，讓瀏覽器根據影片長寬比自動設定高度 -->
<iframe width="600" src="https://www.youtube.com/embed/JeLy1UTyybg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="content">
<div class="inner">
<header class="major">
<h3>創作過程</h3>
</header>
<p>一段艱辛的過程</p>
<ul class="actions">
<li><a href="地中海創作過程.html" class="button">看更多</a></li>
</ul>
</div>
</div>
</section>
```
##### 說明
1. 在Youtube影片上點右鍵，選擇「複製嵌入程式碼」。
2. 將原本包住img標籤的a標籤群部刪除，取代由Youtube複製過來的程式碼。
3. 如果會影響版型可以試著也刪除img標籤外層不需要的標籤。
> 有些Youtube影片擁有者會設定不允許嵌入的設定，這種影片就無法使用。
### 刪除一整組圖片+說明文字
```
<section>
<a href="generic.html" class="image">
<img src="images/pic10.jpg" alt="" data-position="25% 25%" />
</a>
<div class="content">
<div class="inner">
<header class="major">
<h3>Sed nunc ligula</h3>
</header>
<p>Nullam et orci eu lorem consequat tincidunt vivamus et sagittis magna sed nunc rhoncus condimentum sem. In efficitur ligula tate urna. Maecenas massa sed magna lacinia magna pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis tempus.</p>
<ul class="actions">
<li><a href="generic.html" class="button">Learn more</a></li>
</ul>
</div>
</div>
</section>
```
上面為一整組的標籤範圍，要多一組就整個複製，要少一組就整個刪除。
### 圖片說明的文字區
##### 奇數的背景
```
.spotlights > section {
...
background-color: #25e475;}
```
> 在29xx行。
##### 偶數的背景
```
.spotlights > section:nth-child(2n) {
...
background-color: #6f83f7;
}
```
> 在30xx行。
### 其他
1. 進到網站第二層後需要複製多個landing.html檔案，因為不同的類型點進去應該要開啟不同網頁，因爲作為樣板，只要提供一頁做為參考就夠了。
2. langding.html再點進去的第三層預設是generic.html，也需要負制多個檔案，否則都會看到同一個網頁。
## 第三天（10/6）
### 上課重點
1. 解壓縮lens樣板，然後剪下貼到Forty目錄內，該一個符合實際用途的目錄名稱；接下來修改「前往作品集」按鈕的a標籤的href屬性，讓點下按鈕後可以打開lens樣板。
#### 雲端
1. 將網站放到雲端：搜尋000webhost，點進第一筆搜尋結果，建議用google帳號登入會較快。
2. 進入網站管理功能：滑鼠移到網站的大方塊上出現Manage Website，
3. 下載FileZilla(https://filezilla-project.org/)來上傳檔案到雲端空間。
> **步驟**
> 1. 先點左邊的灰色按鈕下載Client版本。
> 2. 建議不要點選綠色按鈕下載，該版本會有其他跟FileZilla的軟體會預設安裝，需自行取消。
> 3. 進入「Show additional download options」選第一個檔案下載即可。
> 4. 下一步到底的傻瓜安裝法。
5. 進入FileZilla後，開始新增站台：
- 點選左上有三台電腦的圖示。
- 填入Host(主機）、Username（使用者）、Password（密碼）即可。
- Charset分頁的Force UTF-8選項需打勾，否則中文檔名會變成亂碼。
8. 最下方有三個關於檔案傳輸的標籤：
- 佇列中的檔案：這裡都沒有檔案代表上傳結束了。
- 錯誤傳輸：這裡如果出現檔案就代表有檔案上傳失敗，需要重新上傳。
- 成功傳輸：成功上傳的檔案。
5. 重新傳輸步驟：
- 切換到錯誤傳輸的分頁。
- 在任一檔案上點滑鼠右鍵並選擇「重設與佇列所有檔案」（第２個選項）。
- 切換到佇列的檔案分頁。
- 在任一檔案上點選滑鼠右鍵並選擇「處理佇列」（第１個選項）。
6. 當檔案有修改過，請記得重新上傳該檔案即可，不需全部重新上傳。
7. 000webhost網站主選單功能：
Build a Website - 可以透過Zyro外部網站編輯器、WordPress或是內建檔案上傳工具來建立網站。
Tools - 網址設定、檔案管理、資料庫管理和郵件管理等工具。
Website Settings - 網站的相關功能。
Community Help - 社群協助，有Discord、Blog和論壇等方式可以跟其他使用者互動。
Earn Money - 掛網就可以賺錢的平台。
Learn to Code - 一個互動學習網頁基本語法的教學網站。
Customer Support - 要收費的客服。
Power Store - 商城，有一些外部功能可以使用。
8. 點擊進入，並點選左方Website Settings展開選單：
General - 一般設定，FTP、網址、密碼、PHP版本、email、除錯、修復、刪除網站等等設定。
Statstics - 儀表板，可以監看網站相關資訊以及剩餘的免費額度。
Security - 安全相關設定：封鎖IP、Hotlink保護、登入密碼等等。
Cron Jobs - 設定工作排程（PHP）。
Redirects - 轉址設定。
Logs - 網站操作的紀錄。
Backup - 備份（需付費）。
### 樣版修改
#### 將前往作品集的按鈕改成打開Lens樣板
Forty/地中海風.html
```
<ul class="actions">
<li><a href="地中海風作品集/index.html" class="button next">前往作品集</a></li>
</ul>
```
###### 說明
1. 修改a標籤內的href屬性值為: `地中海風作品集/index.html`
2. 約1xx行左右。
#### 一張照片的完整標籤
Lens/地中海風.html
```
<article>
<a class="thumbnail" href="images/fulls/08.jpg" data-position="left center"><img src="images/thumbs/08.jpg" alt="" /></a>
<h2>Gravida quis varius enim</h2>
<p>Nunc egestas congue lorem. Nullam dictum placerat ex sapien tortor mattis.</p>
</article>
```
###### 說明
1. a標籤內的href屬性設定的是縮圖的位置和檔名。
2. img標籤的src屬性設定的
3. data-position屬性可以設定原圖顯示的對齊方式。
4. h2標籤為照片標題。
5. p標籤為照片描述。
#### 將原圖改為顯示完整照片
Lens/assets/css/main.css
```
#viewer .slide .image {
...
background-size: cover;
...
}
```
###### 說明
1. 搜尋`cover`。
2. 將`cover`改為`contain`。
3. 約在12xx行。
4. 加入郵件發送功能：
a. 將index.html更名為index.php
b. 在index.php內加入下面程式碼：
```
<?php
// 判斷是否需要發送郵件
if(isset($_REQUEST['email']) && strlen($_REQUEST['email']) > 5)
{
// 取得資訊
$admin_email = "xxxxxxxx@gmail.com";
$header = "From:".$_REQUEST['email']."\r\n";
$name = $_REQUEST['name'];
$message = $_REQUEST['message'];
// 發送郵件
if(FALSE == mail($admin_email, "由[".$name."]傳來的訊息", $message, $header))
echo "<h2 class=\"align-center\">發送失敗！</h2>";
else
echo "<h2 class=\"align-center\">謝謝您的聯絡！</h2>";
echo "<br/>";
}
?>
```
> 可以在網頁任意地方加入，但請勿破壞html標籤不可交錯的相關規定。
c. 將`$admin_email = "xxxxxxxx@gmail.com";`裡設定的email改成你自己的email。
d. 將`<form method="post" action="#">`改為`<form method="post" action="#">`。
> **補充**
> 因為未知原因，送信功能都會失敗，請將000webhost的PHP版本設定改為PHP8.0，目前看起來只有設定成這個版本的f才能送信成功。
> 
## 第四天（10/7）
### 上課重點
1. Creative CV樣板修改重點在動手術跟一些新的觀念。
2. 請前往 https://templateflip.com/ 下載Creative CV樣板。
3. 這個樣版的授權僅供個人使用，不允許商業用途。
4. 介紹樣板功能。
### 上課內容
#### Createive CV樣板
> **備註**
> 單純修改文字集中文化不會列在日誌上。
##### 瀏覽器分頁名稱
index.html - 第7行
```
<title>我是Aaron Ho</title>
```
##### 將要被下載的檔案名稱設定給a標籤的href屬性
index.html - 第58行左右。
```
<a class="btn btn-primary" href="aaronho.pdf" target="_blank" data-aos="zoom-in" data-aos-anchor="data-aos-anchor">下載履歷</a>
```
> a標籤除了可以拿來跳轉網頁，也可以拿來下載檔案。
##### 一組社群按鈕
index.html - 第66~69行
```
<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>
```
##### 刪掉一筆基本資訊
index.html - 第104~107行
```
<div class="row mt-3">
<div class="col-sm-4"><strong class="text-uppercase">Language:</strong></div>
<div class="col-sm-8">English, German, French</div>
</div>
```
##### 放一個 (空白字元)來保留原本該行的空間
index.html - 第115行
```
<div class="h4 mt-0 title"> </div>
```
> 目的是站住空間才不會讓下面的基本資訊都往上移動一行
##### 修改width屬性可以改變長條圖的填滿長度
index.html - 第157行
```
<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: 10%;">
```
##### 修改顯示的百分比數字
index.html - 第158行
```
<span class="progress-value">10%</span>
```
##### 刪掉一整列的兩個技能
index.html - 第170~186行
```
<div class="row">
<div class="col-md-6">
<div class="progress-container progress-primary"><span class="progress-badge">JavaScript</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: 60%;"></div><span class="progress-value">60%</span>
</div>
</div>
</div>
<div class="col-md-6">
<div class="progress-container progress-primary"><span class="progress-badge">SASS</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: 60%;"></div><span class="progress-value">60%</span>
</div>
</div>
</div>
</div>
```
##### 作品集區塊的icon，a標籤裡面的class屬性裡面active用來設定預設會亮起來得按鈕
index.html - 第216~219行
```
<li class="nav-item"><a class="nav-link " data-toggle="tab" href="#web-development" role="tablist"><i class="fa fa-laptop" aria-hidden="true"></i></a></li>
<li class="nav-item"><a class="nav-link " data-toggle="tab" href="#happy" role="tablist"><i class="fa fa-laptop" aria-hidden="true"></i></a></li>
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#graphic-design" role="tablist"><i class="fa fa-picture-o" aria-hidden="true"></i></a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#Photography" role="tablist"><i class="fa fa-camera" aria-hidden="true"></i></a></li>
```
##### 新增一個新的作品類別
1. 多加一顆按鈕
2. 修改href的設定為#hello
3. 修改icon(fa-home)
4. 從230行~267行選取，然後貼到230行，把原本的把下擠
5. 把230的id改成hello
6. 230行的active刪掉
index.html - 第223行
```
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#hello" role="tablist">
<i class="fas fa-chess-rook" aria-hidden="true"></i></a>
</li>
```
index.html - 第232到269行
```
<div class="tab-pane" id="hello">
<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="#web-development">
<figure class="cc-effect"><img src="images/home-1.jpg" alt="Image"/>
<figcaption>
<div class="h4">Recent Project</div>
<p>Web Development</p>
</figcaption>
</figure></a></div>
<div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"><a href="#web-development">
<figure class="cc-effect"><img src="images/home-2.jpg" alt="Image"/>
<figcaption>
<div class="h4">Startup Project</div>
<p>Web Development</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="#web-development">
<figure class="cc-effect"><img src="images/home-3.jpg" alt="Image"/>
<figcaption>
<div class="h4">Food Order Project</div>
<p>Web Development</p>
</figcaption>
</figure></a></div>
<div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"><a href="#web-development">
<figure class="cc-effect"><img src="images/home-4.jpg" alt="Image"/>
<figcaption>
<div class="h4">Web Advertising Project</div>
<p>Web Development</p>
</figcaption>
</figure></a></div>
</div>
</div>
</div>
</div>
```
##### 作品左邊多加一張照片
index.html - 第338~344行
```
<div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"><a href="#web-development">
<figure class="cc-effect"><img src="images/project-2.jpg" alt="Image"/>
<figcaption>
<div class="h4">Startup Project</div>
<p>Web Development</p>
</figcaption>
</figure></a></div>
```
## 第五天（10/8）
1. Creative CV加入郵件發送功能：
a. 將index.html更名為index.php
b. 在index.php內加入下面程式碼：
```
<?php
// 判斷是否需要發送郵件
if(isset($_REQUEST['_replyto']) && strlen($_REQUEST['_replyto']) > 5)
{
// 取得資訊
$admin_email = "xxxxxxxx@gmail.com";
$header = "From:".$_REQUEST['_replyto']."\r\n";
$name = $_REQUEST['name'];
$message = $_REQUEST['message'];
$subject = $_REQUEST['Subject'];
// 發送郵件
if(FALSE == mail($admin_email, $subject, $message, $header))
echo "<h2 class=\"align-center\">發送失敗！</h2>";
else
echo "<h2 class=\"align-center\">謝謝您的聯絡！</h2>";
echo "<br/>";
}
?>
```
> 可以在網頁任意地方加入，但請勿破壞html標籤不可交錯的相關規定。
c. 將`$admin_email = "xxxxxxxx@gmail.com";`裡設定的email改成你自己的email。
d. 修改form標籤的action屬性值。
將:
`<form action="#" method="POST">`
改為:
`<form action="index.php" method="POST">`。
> **補充**
> 因為未知原因，送信功能都會失敗，請將000webhost的PHP版本設定改為PHP8.0，目前看起來只有設定成這個版本的f才能送信成功。
> 
1. 將兩個上課範例都放到雲端的幾個方式：
- 使用兩個gmail帳號來申請兩個000webhost帳號（因為000webhost免費只能建立一個網站）。
- 將兩個網站分別使用兩個目錄一起上傳到000webhost，並且可以寫一個簡單的首頁來連接到兩個不同的網站。
簡單的首頁(index.html)參考:
```
<!DOCTYPE html>
<html>
<head>
<title>我的兩個網站</title>
</head>
<body>
<a href="my_design_web/index.html"><h1>室內設計作品展示網站</h1></a>
<a href="aaron_resume/index.html"><h1>我的個人介紹</h1></a>
</body>
</html>
```
- 將Creative CV網頁跟Forty結合成同一個網站，作為Forty的關於我。
##### Creative CV加上跳回Forty的功能
index.html - 第28行
```
<div class="navbar-translate"><a class="navbar-brand" href="../index.html" rel="tooltip">Aaron Ho</a>
```
> `../`為上一層目錄，`../../`為上兩層目錄
##### Forty選單文字修改
index.html - 第34~38行
```
<li class="nav-item"><a class="nav-link smooth-scroll" href="#about">關於</a></li>
<li class="nav-item"><a class="nav-link smooth-scroll" href="#skill">專業技能</a></li>
<li class="nav-item"><a class="nav-link smooth-scroll" href="#portfolio">個人作品</a></li>
<li class="nav-item"><a class="nav-link smooth-scroll" href="#experience">經歷</a></li>
<li class="nav-item"><a class="nav-link smooth-scroll" href="#contact">聯絡我</a></li>
```
Sign in with Wallet
Connect another wallet