---
# System prepended metadata

title: 2022-09-27 作品導覽平台開發（第二期）-上課日誌
tags: [已轉移]

---

# 2022-09-27 作品導覽平台開發（第二期）-上課日誌
###### tags: `綠建築室內設計實作班`
---
## 課程開始之前
### 文件註記
#### 說明
樣板修改處都會加上註記，複習時只要搜尋註記的關鍵字就可以快速找到修改過的地方。
    
#### 註記格式
aaron:{日期}:{序號}:{描述}
例如:
###### html文件
```
<!-- aaron:20211001:01:網頁大標題 -->
```
###### css文件
```
/* aaron:20211001:01:修改Banner大標題的顏色 */
```

### 作業繳交
#### 說明
請上傳上課後產出的作品展示平台、個人介紹網頁其中一個壓縮後放到Google Drive作業繳交區內

#### 期限
結訓前一週。

#### 上傳地點
```
https://drive.google.com/drive/folders/1GcnOLjon6-qiyhsPKwIY0v7qPt-vtf6x
```
#### 檔案格式
```
{學號}_{姓名}_檔名.zip
```
例如:
```
01_何偉全_aaron_resume.zip
```

## 第一天（9/27）
1. 講義網址:http://www.aaronlife.com/v1/teaching/_timetable_uch_rwd_2021-09-27.html
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標籤和屬性名稱建議使用小寫，較容易閱讀。
    - 標籤可以有屬性用來提供額外設定。
11. 一個簡單的HTML範例：
    ```
    <!DOCTYPE html>
    <html>
      <head>
        <title>Aaron的標題</title>
        <meta charset="utf-8"/>

        <meta name="viewport" content="width=device-width" />
        <link rel="stylesheet" href="main.css">


      </head>

      <body>
        <!-- 這個標籤裡面的文字不會出現在網頁上  
             多行
        -->
        <h1>網頁大標題</h1>
        <setion>
          <h3 id="test">文章標題</h3>
          <img src="https://g.udn.com.tw/upfiles/B_A1/a11193452/PSN_PHOTO/685/f_26210685_1.jpg"></img>
          <p id="p1" class="style1">這是文章第一段</p>
          <p id="p2" class="style1">這是文章第二段</p>
        </setion>
        <article>
           <h6>TestTest</h6>
           <p>這是文章另一段</p>
        </article>


        <footer>Copyright by Aaron Ho</footer>

      </body>
    </html>
    ```
12. `Ctrl + /` 可以讓標籤變成註解，再按一次會恢復原狀。
13. 上課用圖片下載: https://drive.google.com/drive/folders/1vn49dqbTP3buiK_Z1yDPaEibOOTqcdRu
14. a標籤內可以加上`target="_blank"`讓點下超連結後以新分頁來打開。
15. 搜尋font awesome點進Icon字型最有名的網頁，並透過上方Icon連杰進入所有Icon的頁面。
16. 如果要使用font awesome的Brand Style icon, 請把class屬性內的`solid`改為`brands`。
17. CSS範例參考:
    ```
    body 
    {
       background-color: #d4c2fc;
       color: yellow ;
       font-size: 1.5em;
       text-align: center !important;
    }

    h3
    {
       text-align: left;
       color: blue;
    }

    .style1
    {
       color: #3377ee;
       background-color: #554411;
    }

    .style2
    {
       color: #ee7733;
       background-color: #114455;
    }

    #test
    {
       text-align: center;
       color: red !important;
    }

    p
    {
       color: pink;
       background-color: gray;
    }

    article p
    {
       color: white;
       background-color: black;
    }
    ```
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;|
21. Forty樣板的修改位置: 請下載上課範例後，搜尋aaron關鍵字可以找到所有修改過的地方。
    > 載點：https://drive.google.com/drive/folders/1vn49dqbTP3buiK_Z1yDPaEibOOTqcdRu


## 第二天（9/28）
#### 今日上課進度與內容摘要
作品網站製作下半段；HTML+CSS基本語法、規則的認識；樣板調整方式。
#### 筆記
1. 修改網頁中間的區塊, 通常因為多層的內部優先全較高，所已由內往外找class或id或標簽名稱。
2. 先找較裡面的major找到了大約在1794行的幾行與法可以調整副標題:
    ```
    header.major > p {
			font-size: 1.2em; /* aaron:這是中間每個區塊的副標題字型大小 */
			font-weight: 600;
			letter-spacing: 0.25em; /* aaron:設定每個字左右之間的間距 */
			margin-bottom: 0; /* aaron:將下面的元件之間保留的間隔 */
			text-transform: uppercase;
		}
    ```
3. 再來尋找tiles可以找到`.tiles article`的一些相關設定:

    - 在2767行左右會看到方塊內標題文字大小設定，如果需要修改顏色可以自行加上color語法:
        ```
        .tiles article h3 {
			font-size: 1.75em; /* aaron:設定網頁中間每個區塊的標題文字大小 */
			color: white; /* aaron:設定網頁中間每個區塊的標題文字顏色 */
		}
        ```
    - 在2814行附近可以找到滑鼠移到方塊上面時的遮罩透明度設定:
        ```
        .tiles article:hover:before {
			opacity: 0; /* aaron:滑鼠移到中間的每個區塊石的遮罩透明度 */
		}
        ```
    - 在2830行附近可以發現寬度設定:
        ```
        .tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) {
			width: 60%; /* 第4-1=3, 4-2, 4x2-1, 4x2-2的方塊寬度都會是60% */
		}
        ```
    - 在2835行附近可以找到每個方塊的遮罩顏色色定:
        ```
        .tiles article:nth-child(6n - 5):before {
			background-color: #6fc3df; /* aaron:修改中間每個區塊的遮罩顏色 */
		}

		.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;
		}
        ```
    - 在2750行附近會看到方塊較窄的設定(40%)
        ```
        width: 40%; /* aaron:預設的方塊寬度 */
        ```
4. 在範例內搜尋`aaron:03`可以找到下面介紹文字整個區域的顏色, 文字, 背景色修改。
5. 網頁元素的組成：
        ![](https://i.imgur.com/6nz3alM.png)
        
6. 在上課範例內搜尋`aaron:04`可以找到聯絡資訊跟footer的相關css修改。
7. 複製多個landing.html檔案，因為不同的類型點進去應該要開啟不同網頁，因爲作為樣板，只要提供一頁做為參考就夠了。
8. 要放Youtube影片的話，可以在Youtube影片上點右鍵，選擇「複製嵌入程式碼」，後去取代掉原本的img標籤；如果會影響版型可以試著也刪除img標籤外層不需要的標籤。
    > 有些Youtube影片擁有者會設定不允許嵌入的設定，這種影片就無法使用。
9. 解壓縮lens樣板，然後剪下貼到Forty目錄內，該一個符合實際用途的目錄名稱；接下來修改「前往作品集」按鈕的a標籤的href屬性，讓點下按鈕後可以打開lens樣板。



## 第三天（9/29）
1. 將網站放到雲端：搜尋000webhost，點進第一筆搜尋結果，建議用google帳號登入會較快。
2. 進入網站管理功能：滑鼠移到網站的大方塊上出現Manage Website，
3. 000webhost網站功能：
    View Site - 
    Dashboard -
    Tools -
    Website Settings -
    Community Help - 
    Earn Money -
    Learn to Code -
    Customer Support -
    Power Store -
4. 點擊進入，並點選左方Website Settings展開選單：
    General - 一般設定，FTP、網址、密碼、PHP版本、email、除錯、修復、刪除網站等等設定。
    Statstics - 儀表板，可以監看網站相關資訊以及剩餘的免費額度。
    Security - 安全相關設定：封鎖IP、Hotlink保護、登入密碼等等。
    Cron Jobs - 設定工作排程（PHP）。
    Redirects - 轉址設定。
    Logs - 網站操作的紀錄。
    Backup - 備份（需付費）。
    
5. 請同學上傳到雲端後提供自己的網站網址。
6. 將Lens樣板的照片完整顯示而不被裁切的方式：
    a. index.html內將每張照片的a標籤內的`data-position="left center"屬性的`left`改為`center`，即可水平置中（第二個center為垂直置中）。
    
    b. main.css的1224行`background-size: cover;`改為`background-size: contain`;（在`#viewer .slide .image`內）。
    
    
8. 加入郵件發送功能：
    a. 將index.html更名為index.php
    b. 在index.php內加入下面程式碼：
    ```
    <?php
    // 判斷是否需要發送郵件
    if(isset($_REQUEST['email']) && strlen($_REQUEST['email']) > 5) 
    {
        // 取得資訊
        $admin_email = "aaronlife@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標籤不可交錯的相關規定。
    
    > **補充**
    > 因為未知原因，送信功能都會失敗，請將000webhost的PHP版本設定改為PHP8.0，目前看起來只有設定成這個版本的PHP才能送信成功。
    > ![](https://i.imgur.com/FUsYC5l.png)

## 第四天（9/30）
1. 請前往 https://templateflip.com/ 下載Creative CV樣板。

2. 將兩個上課範例都放到雲端的幾個方式：
    - 使用兩個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的關於我。

### 上課內容
#### Createive CV樣板
##### 瀏覽器分頁名稱
index.html - 第7行
```
<title>我是Aaron Ho</title>
```
##### 加上跳回Forty的功能
index.html - 第28行
```
<div class="navbar-translate"><a class="navbar-brand" href="../index.html" rel="tooltip">Aaron Ho</a>
```
> `../`為上一層目錄，`../../`為上兩層目錄

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>
```
##### 將要被下載的檔案名稱設定給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>
```
##### 放一個&nbsp;(空白字元)來保留原本該行的空間
index.html - 第115行
```
<div class="h4 mt-0 title">&nbsp;</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>
```

#### Creative CV樣板
##### 一組工作經歷卡片標籤的範圍
index.html - 第454~474行
```
<!-- aaron:20211001:01:一組卡片的標籤範圍開始 -->
<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>2016年6月 - 現在</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>
          <!-- aaron:20211001:01:清單標籤來列出工作項目 -->
          <ul> <!-- ul改為ol會變成有序清單 -->
            <li>Python程式設計實務</li>
            <li>Android程式班</li>
            <li>綠建築室內設計班</li>
          </ul>
      </div>
    </div>
  </div>
</div>
```
##### 一組學歷卡片標籤的範圍
index.html - 第514~530行
```
<!-- aaron:20211001:01:一組卡片的開始 -->
<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-education-header">
        <p>2013年 - 2015年</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 class="category">資訊科學系</p>
        <p>數據分系、深度學習、人工智慧</p>
      </div>
    </div>
  </div>
</div>
```

##### 基本資訊的區塊範圍
index - 第82~146行
```
<!-- aaron:20211001:02:基本資訊的區塊起始 -->
<div class="section" id="about">
  <div class="container">
    <div class="card" data-aos="fade-up" data-aos-offset="10">
      <div class="row">
        <div class="col-lg-6 col-md-12">
          <div class="card-body">
            <div class="h4 mt-0 title">基本資訊</div>
            <div class="row">
              <div class="col-sm-3"><strong class="text-uppercase">年齡:</strong></div>
              <div class="col-sm-9">18</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-3"><strong class="text-uppercase">Email:</strong></div>
              <div class="col-sm-9">aaronlife@gmail.com</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">電話:</strong></div>
              <div class="col-sm-8">+886-968-168168</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">地址:</strong></div>
              <div class="col-sm-8">桃園市中壢區健行路111號</div>
            </div>
            <!-- 下面是刪到一筆基本資訊 -->
            <!-- <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> -->
            <!-- aaron:02 將自傳內容移除 -->
            <!-- <p>Hello! I am Anthony Barnett. Web Developer, Graphic Designer and Photographer.</p>
            <p>Creative CV is a HTML resume template for professionals. Built with Bootstrap 4, Now UI Kit and FontAwesome, this modern and responsive design template is perfect to showcase your portfolio, skills and experience. <a href="https://templateflip.com/templates/creative-cv/" target="_blank">Learn More</a></p> -->
          </div>
        </div>
        <div class="col-lg-6 col-md-12">
          <div class="card-body">
            <!-- 放一個&nbsp;(空白字元)來保留原本該行的空間 -->
            <div class="h4 mt-0 title">&nbsp;</div>
            <div class="row">
              <div class="col-sm-4"><strong class="text-uppercase">身高:</strong></div>
              <div class="col-sm-8">175</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">體重:</strong></div>
              <div class="col-sm-8">75</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">語言:</strong></div>
              <div class="col-sm-8">中文、台語</div>
            </div>
            <!-- 右邊刪掉兩筆基本資訊 -->
            <!-- <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">Address:</strong></div>
              <div class="col-sm-8">140, City Center, New York, U.S.A</div>
            </div>
            <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> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- aaron:20211001:02:基本資訊的區塊結束 -->
```

##### 從上面學歷標題複製過來的自傳標題(基本資訊的標題原本是在卡片裡面)
index.html - 第574行
```
<div class="h4 text-center mb-4 title">自傳</div>
```
##### 將預設亮起來的小槓設成中間那個
index.html - 第618行
```
<ol class="carousel-indicators">
  <li data-target="#cc-Indicators" data-slide-to="0"></li>
  <!-- aaron:20211001:02:將預設亮起來的小槓設成中間那個 -->
  <li class="active" data-target="#cc-Indicators" data-slide-to="1"></li>
  <!-- aaron:刪掉第三條小槓 <li data-target="#cc-Indicators" data-slide-to="2"></li> -->
</ol>
```

##### 一組推薦人卡片的標籤範圍
index.html - 第623~633行
```
<!-- aaron:20211001:02:一組推薦人的起始 -->
<div class="carousel-item">
<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">Iron Man</div>
    <p class="category">CEO / Stark</p>
  </div>
  <div class="col-lg-10 col-md-9">
    <p>這個傢伙很棒</p>
  </div>
</div>
</div>
<!-- aaron:20211001:02:一組推薦人的結束 -->
```

##### 幫作品介紹的分類按鈕加上文字
1. 在a標籤的結束標前前面加可以直接顯是在按鈕下方。
2. 在a標籤內加上title的class可以設定滑鼠移到按鈕上面跳出文字。
index.html - 第220~223行
```
<li class="nav-item"><a title="類型" class="nav-link " data-toggle="tab" href="#web-development" role="tablist"><i class="fa fa-laptop" aria-hidden="true"></i>類型</a></li> <!-- aaron:20211001:03:加上按鈕下方的文字 -->
<li class="nav-item"><a title="類型" 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 title="類型" class="nav-link active" data-toggle="tab" href="#graphic-design" role="tablist"><i class="fa fa-picture-o" aria-hidden="true"></i><span class="myblackcolor">類型</span></a></li> <!-- aaron:20211001:03:幫類型兩個字額外多加一個class樣式 -->
<li class="nav-item"><a title="類型" class="nav-link" data-toggle="tab" href="#Photography" role="tablist"><i class="fa fa-camera" aria-hidden="true"></i>類型</a></li>
```

##### 自傳區塊的修改
因為原本沒有自傳區塊，所以:
1. 複製基本資訊的區塊到推薦人上面。
2. 刪除左半的基本資訊。
3. 將右半的基本資訊寬度延伸到左邊。
index.html - 第571~604行
```
<div class="section" id="about">
  <div class="container">
    <!-- aaron:20211001:02:從上面學歷標題複製過來的自傳標題 -->
    <div class="h4 text-center mb-4 title">自傳</div>
    <div class="card" data-aos="fade-up" data-aos-offset="10">
      <div class="row">
        <!-- aaron:20211001:04:刪除了一整組的<div class="col-lg-6 col-md-12">...</div> -->
        <!-- aaron:20211001:04:將col-lg-6改成col-lg-12可以將寬度占滿整個卡片 -->
        <div class="col-lg-12 col-md-12">
          <div class="card-body">
            <p><h5>我的成長</h5>
              桃園縣八德市─一個民風純樸，充滿人情味的地方，那裡就是我的故鄉。民國七十年○○月○○日，我在桃園出生，我家人口簡單，家父在中科院上班，是個公職人員，家母在詠航公司上班。家裡的小孩只有我和弟弟，弟弟今年國中三年級，和我相差三歲，在父親恩威並施的教導下，我和弟弟都受有良好的教育，家裡充滿和諧的氣氛。
              <br/>
              <br/>
              <h5>求學過程</h5>
              父親從小就很注重我們的教育，在我國小三年級時，就讓我到兒童美語班學習英文，為我將來在英文上的學習打下基礎。升上國中，曾擔任一學期的班長，因為如此，所以學到滿多的課外知識，也具備領導者的能力。國中時期，因為念的是Ａ段班所以課業較為繁重，英文則是我引以為傲的科目。曾在一次的校內英文競試中，拿到全校第二名。由於我對英文的熱衷，加上對商科的興趣，所以立志要考中壢高商的國貿科。民國八十六年國中畢業，在父母親的支持下與鼓勵下，終於進入了我心中最理想的學校─中壢高商就讀，也達成願望念了自己所喜愛的國貿科。經過三年老師用心的教導及個人的努力，我的英文不斷的進步。高二校內抽考英文，很榮幸的拿到全年級第一名，那時很開心，讓我對英文越來越有信心。念國貿科，也讓我學到很多貿易上的程序，對經濟方面也較深入的了解，但我認為最重要的還是得先將語文學好，所以我選擇報考「真理大學─外國語文系」，希望在大學四年中，好好的學習外文。
              <br/>
              <br/>
              <h5>形容自己</h5>
              朋友都說我是一個不太容易生氣的人，我想我只是覺得在許多時候，其實只要敞開心胸，將事情講開來就會沒事了，如果能冷靜的思考每一件事，也就不會和別人吵架。兩個都在氣頭上的人，說出的話總是容易傷害到別人，我也覺得凡事不要太計較，有一句話說「吃虧就是佔便宜」，做的比別人多，相對的學到的也比別人多。人最好的溝通方式就是微笑，我也時常將它掛在臉上，這樣也較容易和人親近。
              <br/>
              <br/>
              <h5>人生觀</h5>
              我是一個很樂觀的人，做任何事都會全力以赴，即使失敗了，也不會氣餒，檢討失敗的原因，下次再接再厲。文學家史蒂文曾說：「未得快樂，一無所有。」，美國名心理學家海華斯博士說：「世界上每個人都在追求快樂，有一個方法，那就是探索自己的思想，因為快樂與否，並靠你對各事物所抱持的態度和看法。」，我深信不疑，所以我都保持一顆快樂的心，去看待每一件事物。
              <br/>
              <br/>
              <h5>興趣志向</h5>
              自從小學三年級在兒童全語班學習英文後，我發現在歌唱、遊戲中，這種無壓力的情況下，學習效果是最好的。所以我就常聽西洋歌曲，我會拿著歌詞，邊看、邊聽，會試著去了解歌詞的意思，因此學到許多的單字。我也喜歡接獨電腦，常會上網去吸收最近的資訊。在資訊化的社會下，網路是吸取新資訊最便利的方法。在壢商學習的計算機概論中，也有談到一些軟體的應用，所以也略知一二、對網頁的創作也很有興趣，希望將來能有機會創作一個屬於自己的網站。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```
##### 社群按鈕
index.html - 第733~744行
```
<a class="cc-facebook btn btn-link" href="#">
          <i class="fa fa-facebook fa-2x " aria-hidden="true"></i>
        </a>
        <!-- 移除兩顆按鈕 <a class="cc-twitter btn btn-link " href="#">
          <i class="fa fa-twitter fa-2x " aria-hidden="true"></i>
        </a>
        <a class="cc-google-plus btn btn-link" href="#">
          <i class="fa fa-google-plus fa-2x" aria-hidden="true"></i>
        </a> -->
        <a class="cc-instagram btn btn-link" href="#">
          <i class="fa fa-line-chart fa-2x " aria-hidden="true"></i>
        </a>
```
> 因為原本一行太長，有先斷行並排版過。

##### 給"類型"文字用的自己加的樣式
assests/css/main.css - 第28~30行
```
.myblackcolor {
  color: black;
}
```

##### 工作經歷進度條背景色
assests/css/main.css - 第2046行
```
.progress-container.progress-primary .progress {
    background: rgba(165, 45, 145, 0.4); }
```
> **補充**
> rgba涵式裡面的四個數字分別是: 
> - 紅色強度: 0~255, 0為黑色, 1為最亮的紅色
> - 綠色強度: 0~255, 0為黑色, 1為最亮的綠色
> - 藍色強度: 0~255, 0為黑色, 1為最亮的藍色
> - 透明度: 0~1, 0為透明, 1為不透明

##### Banner背景照片的黑色遮罩
assests/css/main.css - 第3848行
```
.page-header:before {
    background-color: rgba(0, 0, 0, 0.5); } 
```

##### Banner背景圖的漸層遮罩
assests/css/main.css - 第5137行
```
.page-header {
  ...省略
  background: linear-gradient(0deg, rgba(44, 44, 44, 0.4), rgba(235, 85, 255, 0.6), rgba(219, 0, 208, 0.4));
  ...省綠
```
- 0deg: 漸層開始的方向，0度為從下面開始，180度從上面，90度從左邊。
- rgba(): 要漸層的顏色，可以有多組。

##### 大頭照旁邊的光暈顏色
assests/css/main.css - 第5167行
```
.cc-profile-image a:before {
  ...省略
  border: 15px solid rgba(255, 145, 240, 0.6);
  ...省略 }
```

##### 按鈕文字大小
assests/css/main.css - 第1104行
```
.btn,
.navbar .navbar-nav > a.btn {
  ...
  font-size: 1.2571em;
  ... }
```

##### Icon font文字大小
assests/css/main.css - 第1245行
```
.navbar .navbar-nav > a.btn.btn-icon.btn-lg i.fa {
    font-size: 1.325rem; }
```

##### 表單輸入框內的文字大小
assests/css/main.css - 第1630行
```
.form-control {
  ...
  font-size: 1.2571em; /* aaron:20211001:07:表單輸入框內的文字大小 */
  ... }
```

##### 專業技能內標題文字大小
assests/css/main.css - 第2021行
```
.progress-container .progress-badge {
    ...
    font-size: 0.8571em;
    ... }
```
和
assests/css/main.css - 第5203行
```
.progress-container {
  ...
  font-size: 28px; } 
```

##### 專業技能內的百分比文字大小
assests/css/main.css - 第2037行
```
.progress-container .progress .progress-value {
    ...
    font-size: 0.8571em; }
```
和
assests/css/main.css - 第5211行
```
.progress-container .progress {
    ...
    font-size: 28px; }
```
##### Banner大標題的文字大小
assests/css/main.css - 第2228行
```
h2, .h2 {
  font-size: 2.5em;
  ... }
```

##### 分類標題的文字大小
assests/css/main.css - 第2237行
```
h4, .h4 {
  font-size: 1.714em;
  ... }
```

##### 工作經歷、學歷，自傳內的小標題的文字大小
assests/css/main.css - 第2247行
```
h5, .h5 {
  font-size: 1.57em;
  ... }

```

##### 有被p標籤包圍的內容文字大小，推廌人的職稱文字大小
assests/css/main.css - 第2258行
```
p {
  ...
  font-size: 1.2em;
  ...
}
```

##### 最左上文字大小
assests/css/main.css - 第2268行
```
.navbar .navbar-brand {
    ...
    font-size: 0.8571em; /* aaron:20211001:07:左上文字大小 */
    ... }
```

##### 選單列文字大小
assests/css/main.css - 第5124行
```
.navbar {
  font-size: 28px;
  ... }
```


### 補充資訊
#### Animate.css
##### 介紹
一個CSS動畫套件，可以用少少的語法來增加非常豐富的動畫效果到網頁元素上。
##### 官網
https://animate.style/
##### 使用方式
###### 步驟一
在HTML文件內的head標籤內加上引入該套件的語法:
```
<head>
  ...省略...
  
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
```
###### 步驟二
在你想要加上動畫效果的元素上的class屬性內加上初始設定語法:
```
animate__animated
```

###### 步驟三
在官網首頁挑選想要的動畫效果後，在其名稱後面有個複製按鈕，複製該動畫設定後貼到上個步驟的初始語法後方，例如:
原本如下的h1元素
```
<h1>aaronlife的室內設計</h1>
```
加上初始語法和bounce動畫效果:
```
<h1 class="animate__animated animate__bounce ">aaronlife的室內設計</h1>
```
##### 設定動畫次數
|語法|說明|
|-|-|
|animate__repeat-1|1次|
|animate__repeat-2|2|
|animate__repeat-3|3|
|animate__infinite|無限次|

例如:
```
<h1 class="animate__animated animate__bounce animate__infinite">aaronlife的室內設計</h1>
```
該bounce動畫會不停的重複播放。
## 第五天（10/1）
### 另一個雲端空間
FTP Host: ftp.aaronlife.com
Username: u571370493.uch2021
Password: zZ3939889

##### 說明
請依照你的學號建立目錄，並上傳到該目錄下。
##### 網址
http://www.aaronlife.com/uch2021/{學號}

> **提示**
> 結訓後會進行關閉並清空，請記得自行備份雲端內資料。

### 上課內容
#### Creative CV樣板
##### 一組工作經歷卡片標籤的範圍
index.html - 第454~474行
```
<!-- aaron:20211001:01:一組卡片的標籤範圍開始 -->
<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>2016年6月 - 現在</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>
          <!-- aaron:20211001:01:清單標籤來列出工作項目 -->
          <ul> <!-- ul改為ol會變成有序清單 -->
            <li>Python程式設計實務</li>
            <li>Android程式班</li>
            <li>綠建築室內設計班</li>
          </ul>
      </div>
    </div>
  </div>
</div>
```
##### 一組學歷卡片標籤的範圍
index.html - 第514~530行
```
<!-- aaron:20211001:01:一組卡片的開始 -->
<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-education-header">
        <p>2013年 - 2015年</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 class="category">資訊科學系</p>
        <p>數據分系、深度學習、人工智慧</p>
      </div>
    </div>
  </div>
</div>
```

##### 基本資訊的區塊範圍
index - 第82~146行
```
<!-- aaron:20211001:02:基本資訊的區塊起始 -->
<div class="section" id="about">
  <div class="container">
    <div class="card" data-aos="fade-up" data-aos-offset="10">
      <div class="row">
        <div class="col-lg-6 col-md-12">
          <div class="card-body">
            <div class="h4 mt-0 title">基本資訊</div>
            <div class="row">
              <div class="col-sm-3"><strong class="text-uppercase">年齡:</strong></div>
              <div class="col-sm-9">18</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-3"><strong class="text-uppercase">Email:</strong></div>
              <div class="col-sm-9">aaronlife@gmail.com</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">電話:</strong></div>
              <div class="col-sm-8">+886-968-168168</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">地址:</strong></div>
              <div class="col-sm-8">桃園市中壢區健行路111號</div>
            </div>
            <!-- 下面是刪到一筆基本資訊 -->
            <!-- <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> -->
            <!-- aaron:02 將自傳內容移除 -->
            <!-- <p>Hello! I am Anthony Barnett. Web Developer, Graphic Designer and Photographer.</p>
            <p>Creative CV is a HTML resume template for professionals. Built with Bootstrap 4, Now UI Kit and FontAwesome, this modern and responsive design template is perfect to showcase your portfolio, skills and experience. <a href="https://templateflip.com/templates/creative-cv/" target="_blank">Learn More</a></p> -->
          </div>
        </div>
        <div class="col-lg-6 col-md-12">
          <div class="card-body">
            <!-- 放一個&nbsp;(空白字元)來保留原本該行的空間 -->
            <div class="h4 mt-0 title">&nbsp;</div>
            <div class="row">
              <div class="col-sm-4"><strong class="text-uppercase">身高:</strong></div>
              <div class="col-sm-8">175</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">體重:</strong></div>
              <div class="col-sm-8">75</div>
            </div>
            <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">語言:</strong></div>
              <div class="col-sm-8">中文、台語</div>
            </div>
            <!-- 右邊刪掉兩筆基本資訊 -->
            <!-- <div class="row mt-3">
              <div class="col-sm-4"><strong class="text-uppercase">Address:</strong></div>
              <div class="col-sm-8">140, City Center, New York, U.S.A</div>
            </div>
            <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> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- aaron:20211001:02:基本資訊的區塊結束 -->
```

##### 從上面學歷標題複製過來的自傳標題(基本資訊的標題原本是在卡片裡面)
index.html - 第574行
```
<div class="h4 text-center mb-4 title">自傳</div>
```
##### 將預設亮起來的小槓設成中間那個
index.html - 第618行
```
<ol class="carousel-indicators">
  <li data-target="#cc-Indicators" data-slide-to="0"></li>
  <!-- aaron:20211001:02:將預設亮起來的小槓設成中間那個 -->
  <li class="active" data-target="#cc-Indicators" data-slide-to="1"></li>
  <!-- aaron:刪掉第三條小槓 <li data-target="#cc-Indicators" data-slide-to="2"></li> -->
</ol>
```

##### 一組推薦人卡片的標籤範圍
index.html - 第623~633行
```
<!-- aaron:20211001:02:一組推薦人的起始 -->
<div class="carousel-item">
<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">Iron Man</div>
    <p class="category">CEO / Stark</p>
  </div>
  <div class="col-lg-10 col-md-9">
    <p>這個傢伙很棒</p>
  </div>
</div>
</div>
<!-- aaron:20211001:02:一組推薦人的結束 -->
```

##### 幫作品介紹的分類按鈕加上文字
1. 在a標籤的結束標前前面加可以直接顯是在按鈕下方。
2. 在a標籤內加上title的class可以設定滑鼠移到按鈕上面跳出文字。
index.html - 第220~223行
```
<li class="nav-item"><a title="類型" class="nav-link " data-toggle="tab" href="#web-development" role="tablist"><i class="fa fa-laptop" aria-hidden="true"></i>類型</a></li> <!-- aaron:20211001:03:加上按鈕下方的文字 -->
<li class="nav-item"><a title="類型" 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 title="類型" class="nav-link active" data-toggle="tab" href="#graphic-design" role="tablist"><i class="fa fa-picture-o" aria-hidden="true"></i><span class="myblackcolor">類型</span></a></li> <!-- aaron:20211001:03:幫類型兩個字額外多加一個class樣式 -->
<li class="nav-item"><a title="類型" class="nav-link" data-toggle="tab" href="#Photography" role="tablist"><i class="fa fa-camera" aria-hidden="true"></i>類型</a></li>
```

##### 自傳區塊的修改
因為原本沒有自傳區塊，所以:
1. 複製基本資訊的區塊到推薦人上面。
2. 刪除左半的基本資訊。
3. 將右半的基本資訊寬度延伸到左邊。
index.html - 第571~604行
```
<div class="section" id="about">
  <div class="container">
    <!-- aaron:20211001:02:從上面學歷標題複製過來的自傳標題 -->
    <div class="h4 text-center mb-4 title">自傳</div>
    <div class="card" data-aos="fade-up" data-aos-offset="10">
      <div class="row">
        <!-- aaron:20211001:04:刪除了一整組的<div class="col-lg-6 col-md-12">...</div> -->
        <!-- aaron:20211001:04:將col-lg-6改成col-lg-12可以將寬度占滿整個卡片 -->
        <div class="col-lg-12 col-md-12">
          <div class="card-body">
            <p><h5>我的成長</h5>
              桃園縣八德市─一個民風純樸，充滿人情味的地方，那裡就是我的故鄉。民國七十年○○月○○日，我在桃園出生，我家人口簡單，家父在中科院上班，是個公職人員，家母在詠航公司上班。家裡的小孩只有我和弟弟，弟弟今年國中三年級，和我相差三歲，在父親恩威並施的教導下，我和弟弟都受有良好的教育，家裡充滿和諧的氣氛。
              <br/>
              <br/>
              <h5>求學過程</h5>
              父親從小就很注重我們的教育，在我國小三年級時，就讓我到兒童美語班學習英文，為我將來在英文上的學習打下基礎。升上國中，曾擔任一學期的班長，因為如此，所以學到滿多的課外知識，也具備領導者的能力。國中時期，因為念的是Ａ段班所以課業較為繁重，英文則是我引以為傲的科目。曾在一次的校內英文競試中，拿到全校第二名。由於我對英文的熱衷，加上對商科的興趣，所以立志要考中壢高商的國貿科。民國八十六年國中畢業，在父母親的支持下與鼓勵下，終於進入了我心中最理想的學校─中壢高商就讀，也達成願望念了自己所喜愛的國貿科。經過三年老師用心的教導及個人的努力，我的英文不斷的進步。高二校內抽考英文，很榮幸的拿到全年級第一名，那時很開心，讓我對英文越來越有信心。念國貿科，也讓我學到很多貿易上的程序，對經濟方面也較深入的了解，但我認為最重要的還是得先將語文學好，所以我選擇報考「真理大學─外國語文系」，希望在大學四年中，好好的學習外文。
              <br/>
              <br/>
              <h5>形容自己</h5>
              朋友都說我是一個不太容易生氣的人，我想我只是覺得在許多時候，其實只要敞開心胸，將事情講開來就會沒事了，如果能冷靜的思考每一件事，也就不會和別人吵架。兩個都在氣頭上的人，說出的話總是容易傷害到別人，我也覺得凡事不要太計較，有一句話說「吃虧就是佔便宜」，做的比別人多，相對的學到的也比別人多。人最好的溝通方式就是微笑，我也時常將它掛在臉上，這樣也較容易和人親近。
              <br/>
              <br/>
              <h5>人生觀</h5>
              我是一個很樂觀的人，做任何事都會全力以赴，即使失敗了，也不會氣餒，檢討失敗的原因，下次再接再厲。文學家史蒂文曾說：「未得快樂，一無所有。」，美國名心理學家海華斯博士說：「世界上每個人都在追求快樂，有一個方法，那就是探索自己的思想，因為快樂與否，並靠你對各事物所抱持的態度和看法。」，我深信不疑，所以我都保持一顆快樂的心，去看待每一件事物。
              <br/>
              <br/>
              <h5>興趣志向</h5>
              自從小學三年級在兒童全語班學習英文後，我發現在歌唱、遊戲中，這種無壓力的情況下，學習效果是最好的。所以我就常聽西洋歌曲，我會拿著歌詞，邊看、邊聽，會試著去了解歌詞的意思，因此學到許多的單字。我也喜歡接獨電腦，常會上網去吸收最近的資訊。在資訊化的社會下，網路是吸取新資訊最便利的方法。在壢商學習的計算機概論中，也有談到一些軟體的應用，所以也略知一二、對網頁的創作也很有興趣，希望將來能有機會創作一個屬於自己的網站。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```
##### 社群按鈕
index.html - 第733~744行
```
<a class="cc-facebook btn btn-link" href="#">
          <i class="fa fa-facebook fa-2x " aria-hidden="true"></i>
        </a>
        <!-- 移除兩顆按鈕 <a class="cc-twitter btn btn-link " href="#">
          <i class="fa fa-twitter fa-2x " aria-hidden="true"></i>
        </a>
        <a class="cc-google-plus btn btn-link" href="#">
          <i class="fa fa-google-plus fa-2x" aria-hidden="true"></i>
        </a> -->
        <a class="cc-instagram btn btn-link" href="#">
          <i class="fa fa-line-chart fa-2x " aria-hidden="true"></i>
        </a>
```
> 因為原本一行太長，有先斷行並排版過。

##### 給"類型"文字用的自己加的樣式
assests/css/main.css - 第28~30行
```
.myblackcolor {
  color: black;
}
```

##### 工作經歷進度條背景色
assests/css/main.css - 第2046行
```
.progress-container.progress-primary .progress {
    background: rgba(165, 45, 145, 0.4); }
```
> **補充**
> rgba涵式裡面的四個數字分別是: 
> - 紅色強度: 0~255, 0為黑色, 1為最亮的紅色
> - 綠色強度: 0~255, 0為黑色, 1為最亮的綠色
> - 藍色強度: 0~255, 0為黑色, 1為最亮的藍色
> - 透明度: 0~1, 0為透明, 1為不透明

##### Banner背景照片的黑色遮罩
assests/css/main.css - 第3848行
```
.page-header:before {
    background-color: rgba(0, 0, 0, 0.5); } 
```

##### Banner背景圖的漸層遮罩
assests/css/main.css - 第5137行
```
.page-header {
  ...省略
  background: linear-gradient(0deg, rgba(44, 44, 44, 0.4), rgba(235, 85, 255, 0.6), rgba(219, 0, 208, 0.4));
  ...省綠
```
- 0deg: 漸層開始的方向，0度為從下面開始，180度從上面，90度從左邊。
- rgba(): 要漸層的顏色，可以有多組。

##### 大頭照旁邊的光暈顏色
assests/css/main.css - 第5167行
```
.cc-profile-image a:before {
  ...省略
  border: 15px solid rgba(255, 145, 240, 0.6);
  ...省略 }
```

##### 按鈕文字大小
assests/css/main.css - 第1104行
```
.btn,
.navbar .navbar-nav > a.btn {
  ...
  font-size: 1.2571em;
  ... }
```

##### Icon font文字大小
assests/css/main.css - 第1245行
```
.navbar .navbar-nav > a.btn.btn-icon.btn-lg i.fa {
    font-size: 1.325rem; }
```

##### 表單輸入框內的文字大小
assests/css/main.css - 第1630行
```
.form-control {
  ...
  font-size: 1.2571em; /* aaron:20211001:07:表單輸入框內的文字大小 */
  ... }
```

##### 專業技能內標題文字大小
assests/css/main.css - 第2021行
```
.progress-container .progress-badge {
    ...
    font-size: 0.8571em;
    ... }
```
和
assests/css/main.css - 第5203行
```
.progress-container {
  ...
  font-size: 28px; } 
```

##### 專業技能內的百分比文字大小
assests/css/main.css - 第2037行
```
.progress-container .progress .progress-value {
    ...
    font-size: 0.8571em; }
```
和
assests/css/main.css - 第5211行
```
.progress-container .progress {
    ...
    font-size: 28px; }
```
##### Banner大標題的文字大小
assests/css/main.css - 第2228行
```
h2, .h2 {
  font-size: 2.5em;
  ... }
```

##### 分類標題的文字大小
assests/css/main.css - 第2237行
```
h4, .h4 {
  font-size: 1.714em;
  ... }
```

##### 工作經歷、學歷，自傳內的小標題的文字大小
assests/css/main.css - 第2247行
```
h5, .h5 {
  font-size: 1.57em;
  ... }

```

##### 有被p標籤包圍的內容文字大小，推廌人的職稱文字大小
assests/css/main.css - 第2258行
```
p {
  ...
  font-size: 1.2em;
  ...
}
```

##### 最左上文字大小
assests/css/main.css - 第2268行
```
.navbar .navbar-brand {
    ...
    font-size: 0.8571em; /* aaron:20211001:07:左上文字大小 */
    ... }
```

##### 選單列文字大小
assests/css/main.css - 第5124行
```
.navbar {
  font-size: 28px;
  ... }
```


### 補充資訊
#### Animate.css
##### 介紹
一個CSS動畫套件，可以用少少的語法來增加非常豐富的動畫效果到網頁元素上。
##### 官網
https://animate.style/
##### 使用方式
###### 步驟一
在HTML文件內的head標籤內加上引入該套件的語法:
```
<head>
  ...省略...
  
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
```
###### 步驟二
在你想要加上動畫效果的元素上的class屬性內加上初始設定語法:
```
animate__animated
```

###### 步驟三
在官網首頁挑選想要的動畫效果後，在其名稱後面有個複製按鈕，複製該動畫設定後貼到上個步驟的初始語法後方，例如:
原本如下的h1元素
```
<h1>aaronlife的室內設計</h1>
```
加上初始語法和bounce動畫效果:
```
<h1 class="animate__animated animate__bounce ">aaronlife的室內設計</h1>
```
##### 設定動畫次數
|語法|說明|
|-|-|
|animate__repeat-1|1次|
|animate__repeat-2|2|
|animate__repeat-3|3|
|animate__infinite|無限次|

例如:
```
<h1 class="animate__animated animate__bounce animate__infinite">aaronlife的室內設計</h1>
```
該bounce動畫會不停的重複播放。