2022-09-27 作品導覽平台開發（第二期）-上課日誌

# 2022-09-27 作品導覽平台開發（第二期）-上課日誌 ###### tags: `綠建築室內設計實作班` --- ## 課程開始之前 ### 文件註記 #### 說明樣板修改處都會加上註記，複習時只要搜尋註記的關鍵字就可以快速找到修改過的地方。 #### 註記格式 aaron:{日期}:{序號}:{描述} 例如: ###### html文件 ```  ``` ###### 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> ``` ##### 放一個 (空白字元)來保留原本該行的空間 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> ``` #### Creative CV樣板 ##### 一組工作經歷卡片標籤的範圍 index.html - 第454~474行 ```  <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>  <ul>  <li>Python程式設計實務</li> <li>Android程式班</li> <li>綠建築室內設計班</li> </ul> </div> </div> </div> </div> ``` ##### 一組學歷卡片標籤的範圍 index.html - 第514~530行 ```  <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行 ```  <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> </div> <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-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> </div> </div> </div> </div> </div>  ``` ##### 從上面學歷標題複製過來的自傳標題(基本資訊的標題原本是在卡片裡面) 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>  <li class="active" data-target="#cc-Indicators" data-slide-to="1"></li>  </ol> ``` ##### 一組推薦人卡片的標籤範圍 index.html - 第623~633行 ```  <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>  ``` ##### 幫作品介紹的分類按鈕加上文字 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>  <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>  <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">  <div class="h4 text-center mb-4 title">自傳</div> <div class="card" data-aos="fade-up" data-aos-offset="10"> <div class="row">   <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-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行 ```  <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>  <ul>  <li>Python程式設計實務</li> <li>Android程式班</li> <li>綠建築室內設計班</li> </ul> </div> </div> </div> </div> ``` ##### 一組學歷卡片標籤的範圍 index.html - 第514~530行 ```  <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行 ```  <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> </div> <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-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> </div> </div> </div> </div> </div>  ``` ##### 從上面學歷標題複製過來的自傳標題(基本資訊的標題原本是在卡片裡面) 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>  <li class="active" data-target="#cc-Indicators" data-slide-to="1"></li>  </ol> ``` ##### 一組推薦人卡片的標籤範圍 index.html - 第623~633行 ```  <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>  ``` ##### 幫作品介紹的分類按鈕加上文字 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>  <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>  <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">  <div class="h4 text-center mb-4 title">自傳</div> <div class="card" data-aos="fade-up" data-aos-offset="10"> <div class="row">   <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-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動畫會不停的重複播放。