2023-05-01 作品導覽平台開發 - 上課紀錄

# 作品導覽平台開發 - 上課紀錄 ###### tags: `2023` `綠建築室內設計實作班` ## 目錄 - [第一天(5/1)](#第一天(5/1)) - [第二天(5/2)](#第二天(5/2)) - [第三天(5/3)](#第三天(5/3)) - [第四天(5/4)](#第四天(5/4)) - [第五天(5/5)](#第五天(5/5)) ## 課程開始 #### 上課講義 http://www.aaronlife.com/v1/teaching/_timetable_uch_rwd_2023-05-01.html #### 開發環境 https://code.visualstudio.com/ #### 樣板網站 https://html5up.net/ - 請下載`Forty`樣板 - 解壓縮到目錄 - 開啟資料夾並選擇剛剛解壓縮的目錄 #### VSCode快速鍵 #### Visual Studio Code快速功能健 |MacOS|Windows|說明| |---|---|---| |Shift + Alt + F|Shift + Alt + F|重新排版檔案內容| |`CMD` + `/`|`Ctrl` + `/`|註解/解除註解| |`CMD` + `Shift` + `P`|`Ctrl` + `Shift` + `P`|打開功能選單| |`CMD`+F|Ctrl + F|搜尋文字| |`CMD`+S|Ctrl + S|存檔| |`CMD`+R|Ctrl + R|重新整理網頁| |`CMD`+`Shift`+R|Ctrl + Shift + R|重新整理網頁| ## 第一天(5/1) 1. 使用google搜尋`visual studio code`後點擊第一筆搜尋結果。 2. 進入Visual Studio Code官網後點擊左方藍色按鈕下載安裝檔。 3. 安裝只要一直下一步即可完成安裝。 4. 前往VSCode內Extension功能搜尋「Chinese」中文化。 5. 前往 https://html5up.net/ 下載Forty與Lens兩個樣板。 6. 確認樣板的授權。 > 英文網站可以以「License」相關字來找到樣版的授權。 7. html5up網站提供的樣板授權可以用在「商業行為」及「任意修改」。 8. 講下載的檔案解壓縮後放到合適的地放。 > 路徑名稱盡量不要使用中文字，避免有些雲端主機對中文路徑支援不完整而找不到該網頁。 9. 網頁的首頁檔名都會叫`index.xxx`，請勿修改首頁主檔名。 10. 回到Visual Stuio Code，透過「檔案」->「開啟資料夾」找到剛剛解壓縮的目錄來打開它；打開後VSCode左邊會出現網站的檔案清單。 11. 打開index.html並搜尋「Hi, my name is Forty」。 > 搜尋的快速鍵: Ctrl+F(Windows), CMD+F(MacOS) 12. 修改完後記得按Ctrl+S儲存檔案。 > 未存擋前，檔名標籤旁會是一個實心小圓，存擋後會變x 13. 回到瀏覽器除重新整理網頁確認剛剛修改的標題有成功。 14. WIN按鈕加左右方向鍵可以將視窗放到螢幕左邊或右邊。 15. 網站需要做SEO提升在搜尋引擎的排行，是一門學問，可參考google課程: https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-tw 16. html標籤的五個基本規則： - 標籤都是成雙成對的「起始」＋「結束標籤」。 - 沒內容的標籤可以寫成空標籤。 - 標籤可以包圍其他標籤，但是標籤不可以交錯。 - html標籤和屬性名稱建議使用小寫，較容易閱讀。 - 標籤可以有屬性用來提供額外設定。 16. html標籤清單: https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element > 或是前往w3school學習html基礎: https://www.w3schools.com/html/html_basic.asp 17. 一個簡單的HTML範例: ```html= <!DOCTYPE html> <html> <head> <title>我的標題</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link ref="stylesheet" href="main.css" /> </head> <body> <h1>網頁大標題</h1> <section> <h3>文章標題</h3> <img width="50%" src="https://img-qn.51miz.com/2017/06/01/03/2017060103635742_P349620_93791e84O.jpg" /> <p>sadkfjalskfjlakjflkafjlajfldkflalfjlafjldflaf</p> <p>sadkfjalskfjlakjflkafjlajfldkflalfjlafjldflaf</p> <p>sadkfjalskfjlakjflkafjlajfldkflalfjlafjldflaf</p> <ul> <li>項目一</li> <li>項目2</li> <li>項目3</li> </ul> <ol> <li>項目一</li> <li>項目2</li> <li>項目3</li> </ol> </section> <footer>Copyright by aaron 2023. Official Website: <a target="_blank" href="http://www.aaronlife.com">http://www.aaronlife.com</a></footer> </body> </html> ``` 18. `Ctrl - /` 可以讓標籤變成註解，再按一次會恢復原狀。 19. 透過搜尋來找到網頁上的文字並透過Visual Studio Code修改。 20. 透過搜尋`aaron:`來找到上課範例裡頭有修改過的地方。 21. Ctrl-C後再Ctrl-V可以快速複製滑鼠游標那一行。 > 不可選取任何文字 22. \[CSS\] id屬性在css檔裡頭前面會有一個#號，而class屬性的名稱在css裡前面需要加上一個點「.」。 23. Forty樣板的CSS檔案在`assets/css/main.css`，搜尋banner後可以在33xx行看到banner的樣式。 24. 註解的方式: ##### html ```  ``` ##### css ``` /* 這是註解 */ ``` 25. a標籤內可以加上`target="_blank"`，讓點下超連結後以新的分頁打開。 #### CSS範例 ```css= <!DOCTYPE html> <html> <head> <title>我的標題</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="main.css" /> </head> <body style="background-color: #b5a886;"> <h1 style="font-size:4em; color: #f44174; background-color: #b5a800;">網頁大標題</h1> <section> <h3>文章標題</h3> <img width="50%" src="https://img-qn.51miz.com/2017/06/01/03/2017060103635742_P349620_93791e84O.jpg" /> <p>sadkfjalskfjlakjflkafjlajfldkflalfjlafjldflaf</p> <p>sadkfjalskfjlakjflkafjlajfldkflalfjlafjldflaf</p> <p>sadkfjalskfjlakjflkafjlajfldkflalfjlafjldflaf</p> <ul> <li>項目一</li> <li>項目2</li> <li>項目3</li> </ul> <ol> <li>項目一</li> <li>項目2</li> <li>項目3</li> </ol> </section> <footer>Copyright by aaron 2023. Official Website: <a target="_blank" href="http://www.aaronlife.com">http://www.aaronlife.com</a></footer> </body> </html> ``` > CSS寫在HTML的版本 #### CSS和HTML分開的版本 ##### index.html ```html= <!DOCTYPE html> <html> <head> <title>我的標題</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href="main.css" > </head> <body> <h1>網頁大標題</h1> <section> <h3>文章標題</h3> <img width="50%" src="https://img-qn.51miz.com/2017/06/01/03/2017060103635742_P349620_93791e84O.jpg" /> <p>sadkfjalskfjlakjflkafjlajfldkflalfjlafjldflaf</p> <p class="test">sadkfjalskfjlakjflkafjlajfldkflalfjlafjldflaf</p> <p id="ok" class="test">sadkfjalskfjlakjflkafjlajfldkflalfjlafjldflaf</p> <ul> <li>項目一</li> <li>項目2</li> <li>項目3</li> </ul> <ol> <li>項目一</li> <li>項目2</li> <li>項目3</li> </ol> </section> <footer>Copyright by aaron 2023. Official Website: <a target="_blank" href="http://www.aaronlife.com">http://www.aaronlife.com</a></footer> </body> </html> ``` ##### main.css ```css= h1 { font-size: 4em; color: #f44174; background-color: #b5a800; } body { background-color: #eccbd9; } p { color: #7fff00; } .test { font-weight: 800; color: #009933 !important; } /* 我的筆記 */ #ok { color: #777777; } ``` #### 練習請把下面網頁語法分別加到html和css檔案內: ##### html ``` <div class="btn">+</div> ``` ##### css ``` .btn { display: flex; align-items: center; justify-content: center; position: fixed; width: 50px; height: 50px; bottom: 10px; right: 10px; background-color: #00aa00; border-radius: 50px; font-size: 2em; } .btn:hover { background-color: #00ff00; } ``` #### 修改樣板 ##### `assets/css/main.css` 1. 第3383行，修改banner背景圖 ```css= background-image: url("../../images/banner.jpg"); ``` 2. 第3413行：修改banner遮罩顏色 ```css= background-color: #412722; /* aaron: banner背景圖遮罩的顏色 */ ``` 3. 第3418行：修改banner遮照透明度 > 透明度範圍0~1之間的小數，1為完全不透明 ```css= opacity: 0.4; /* aaron:不透明度，範圍0~1之間的小數 */ ``` 4. 第3404~3411行，修改轉場效果 ```css= /* -moz-transition: opacity 2.5s ease; -webkit-transition: opacity 2.5s ease; -ms-transition: opacity 2.5s ease; */ transition: opacity 1s ease; /* aaron:修該透明轉場效果持續時間 */ /* -moz-transition-delay: 0.75s; -webkit-transition-delay: 0.75s; -ms-transition-delay: 0.75s; */ transition-delay: 3s; /* aaron:修該網頁打開後要延遲幾秒再開始轉場效果 */ ``` 5. 2830行，修改色塊顏色 ```css= /* aaron:指定色塊位置的寬度，以n=1來說, 3跟2位置的色塊寬度會是40% */ .tiles article:nth-child(6n - 5):before { background-color: #6fc3df; /* aaron:修改色塊的顏色 */ } ``` 5. 2828行，修改色塊寬度 ```css= /* aaron:指定色塊位置的寬度，以n=1來說, 3跟2位置的色塊寬度會是40% */ .tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) { width: 40%; } /* aaron:指定第5個色塊寬度為100% */ .tiles article:nth-child(5) { width: 100%; } ``` 6. 2767行，色塊上標題的文字大小和顏色 ```css= .tiles article h3 { font-size: 1.75em; /* aaron:調整色塊的標題文字大小 */ color: #c5e31a; /* aaron:調整色塊的標題文字顏色 */ } ``` 7. 1785行~1801行: 修改色塊副標題的顏色 ```css header.major > :first-child:after { content: ''; background-color: #ffffff; /* aaron: 色塊標題下方底線的顏色 */ display: block; height: 2px; margin: 0.325em 0 0.5em 0; width: 100%; } header.major > p { font-size: 1em; /* aaron: 色塊副標題的文字大小 */ color: rgb(0, 0, 0); /* 等同於#000000， aaron:設定副標題文字顏色 */ font-weight: 600; letter-spacing: 0.25em; margin-bottom: 0; text-transform: uppercase; } ``` 8. 獨立設定每個色塊的標題, 副標題和槓槓的顏色 ```css= /* aaron:幫每個色塊設定不同的標題顏色 */ .tiles article:nth-child(1) h3 { font-size: 3em; color: #ea7609; } /* aaron:幫每個色塊設定不同的副標題顏色 */ .tiles article:nth-child(1) p { color: #ea7609; font-size: 1.5em; } ``` 9. 再不同解析度切換不同圖片 ```css= @media screen and (max-width: 1150px) { #banner { background-image: url("../../images/banner.jpg"); } } ``` ## 第二天(5/2) #### 修改樣板 ##### `assets/css/main.css` 1. 3836行，修改工作室介紹的區塊的底色 ```css= #main { background-color: #38726C; /* aaron:修改底下綠建築標章介紹區塊的底色 */ } ``` 2. 修改工作室介紹區塊的標題顏色 ```css= .imhappy { color: #333856; } ``` > **備註: ** > - 這個class是自行加上的，所以只需要在main.css內找個地方貼上即可 > - 記得在html內的標籤套用這個class, 如: `<h2 class="imhappy">aaron工作室介紹</h2>` 3. 修改工作室介紹的描述文字顏色 ```css= #two .inner p { color: greenyellow; } ``` > **備註: ** > - 使用層級的方式指定只有在id=two內的class=inner內的p標籤才會被套用 > - 這個class是自行加上的，所以只需要在main.css內找個地方貼上即可 4. 修改網頁上按鈕 ##### 25xx行，按紐文字語邊框色 ```css= box-shadow: inset 0 0 0 2px #ee2121; /* aaron:按鈕的邊框顏色 */ color: #dd2424; /* aaron:按鈕的文字顏色 */ ``` ##### 26xx行，按鈕的方向箭頭 ```css= .button.next:before { /* aaron: 修改按鈕指標形狀的顏色 */ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='36px' height='24px' viewBox='0 0 36 24' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffff00%3B stroke-width: 2px%3B %7D%3C/style%3E%3Cline x1='0' y1='12' x2='34' y2='12' /%3E%3Cline x1='25' y1='4' x2='34' y2='12.5' /%3E%3Cline x1='25' y1='20' x2='34' y2='11.5' /%3E%3C/svg%3E"); } ``` > 因為這個方向箭頭是使用svg格式畫出來，所以是用搜尋ffffff色碼找到的 5. 修改網頁上按鈕(hover時) ##### 255x行，按紐文字語邊框色 ```css= input[type="submit"]:hover, input[type="submit"]:active, input[type="reset"]:hover, input[type="reset"]:active, input[type="button"]:hover, input[type="button"]:active, button:hover, button:active, .button:hover, .button:active { box-shadow: inset 0 0 0 2px #d66910; color: #f16d15 !important; } ``` #### 醒腦用 ##### 將色塊改成卡片式來呈現 ##### index.html - 5x行 `head`內引入animate.css ```css= <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> ``` 每個`article`標籤都加上動畫 ``` <article class="animate__animated animate__bounceIn"> ``` ##### main.css - 27xx行 ``` .tiles { ... padding: 50px; gap: 50px; } ``` ``` .tiles article { ... width: calc(60% - 25px); border-radius: 50px; } ``` ``` .tiles article:nth-child(4n - 1), .tiles article:nth-child(4n - 2) { width: calc(40% - 25px); } ``` #### 繼續修改樣板 1. 37xx行，修改留言區的背景顏色 ```css= #contact { border-bottom: solid 1px rgba(212, 212, 255, 0.1); overflow-x: hidden; background-color: #941C2F; /* aaron:設定留言區塊的背景色 */ color: #ffff00; } ``` 2. css顏色名稱列表: https://www.w3.org/wiki/CSS/Properties/color/keywords 3. 修改input和textarea背景色 ##### 191x行 ```css= input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="url"], select, textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; background: rgba(212, 212, 255, 0.4); border: none; border-radius: 0; color: inherit; display: block; outline: 0; padding: 0 1em; text-decoration: none; width: 100%; } ``` 5. 修改Icon ##### 前言這個樣板內Icon使用的是Font Awesome Icon字型，而非圖片，目的是相比圖片，Icon字型可以大幅節省網路傳輸流量。 Font Awesome 5官網: https://fontawesome.com/v5/search > 由main.css相同目錄下的fontawesome-all.min.css檔案內的第一行可以得知，這個樣板使用的是5.9.0版本的Font Awesome，所以要找Icon時，需切換到5版的頁面，才不會出現找到的Icon不支援的情況。 ##### Icon vs Pro Icon Pro Icon的版本是收費版本，免費版本無法使用，所以搜尋Icon時，請使用左邊的Free Icon過慮條件來過濾。 ##### Icon style Font Awesome的Icon有五種樣式: |Style名稱|描述 |補充| | --- | --- | --- | |solid|實心Icon，通常為免費|fas| |reqular|標準Icon，通常為免費|far| |light|線條較細版本，收費版本|fal| |duotone|雙色調版本，收費版本|fad| |brands|商標Icon，通常為免費|fab| ##### 範例在Font Awesome的範例如果為: ```html <i class="fab fa-line"></i> ``` 在此樣版內會是: ```html <span class="icon brands alt fa-line"></span> ``` > 請注意fab對應brands，fa-line則對應fa-開頭的樣式名稱。 6. 21xx行，修改Icon顏色 ```css= .icon.alt:before { background-color: #e31616; /* aaron:Icon背景顏色 */ border-radius: 100%; color: #e1eca0; /* aaron:Icon文字顏色 */ display: inline-block; height: 2em; line-height: 2em; text-align: center; width: 2em; } ``` 7. 26xx行，修改[送出]按鈕顏色 ```css= input[type="submit"].primary, input[type="reset"].primary, input[type="button"].primary, button.primary, .button.primary { background-color: #91a82a; /* aaron:送出按鈕的背景色 */ box-shadow: none; color: #b0baeb; /* aaron:送出按鈕的文字色 */ } input[type="submit"].primary:hover, input[type="submit"].primary:active, input[type="reset"].primary:hover, input[type="reset"].primary:active, input[type="button"].primary:hover, input[type="button"].primary:active, button.primary:hover, button.primary:active, .button.primary:hover, .button.primary:active { background-color: #6d7b27; /* aaron:滑鼠移到送出按鈕上的背景色 */ color: #eb95dc !important; /* aaron:滑鼠移到送出按鈕上的文字色 */ } ``` > 很多樣板都會習慣將填滿顏色的按鈕樣式命名為`primary` 8. css的四個選擇器(Selector) ```css= /* unvisited link */ a:link { color: green; } /* visited link */ a:visited { color: green; } /* mouse over link */ a:hover { color: red; } /* selected link */ a:active { color: yellow; } ``` > 參考來源: https://www.w3schools.com/cssref/sel_visited.asp 9. 38xx行，footer的調整 ```css= /* Footer */ #footer { background-color: #38726C; /* aaron:自行加上的footer區塊背景顏色 */ text-align: center; /* aaron:把footer內的元素全部置中 */ } #footer .copyright { font-size: 0.8em; list-style: none; padding-left: 0; } #footer .copyright li { border-left: solid 1px rgba(212, 212, 255, 0.1); color: rgba(246, 246, 250, 1); /* aaron:footer版權宣告文字的顏色 */ display: inline-block; line-height: 1; margin-left: 1em; padding-left: 1em; } ``` 10. 幫瀏覽器分頁上的標題前面加上圖示 ```html= <head> <title>Aaron的室內設計作品</title> <link rel="icon" type="image/x-icon" href="favicon.ico">  <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <link rel="stylesheet" href="assets/css/main.css" /> <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript> </head> ``` > 參考: https://www.w3schools.com/html/html_favicon.asp > 如果要使用png, 需要指定圖片格式，例如: > `<link rel="icon" type="image/png" href="http://example.com/image.png" />` > jpg格式則是: > `<link rel="icon" type="image/jpg" href="images/favicon.jpg">` 11. 要放Youtube影片的話，可以在Youtube影片上點右鍵，選擇「複製嵌入程式碼」，然後貼到想要擺放影片的html檔案內。例如: ```  <section id="two"> <div class="inner"> <header class="major"> <h2 class="imhappy">aaron工作室介紹</h2> </header> <p>介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字</p> <p>介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字</p> <p>介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字介紹文字</p> <div class="myyoutube"> <iframe class="myvideo" width="831" height="467" src="https://www.youtube.com/embed/7sR22wXK1VI" title="【2023抖音熱歌】2023 五月新歌更新不重复💖年抖音最火的歌曲2023💖2023五月新歌更新不重复 // 那些打進你心底的歌💖New Tiktok Songs 2023 March#417" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div> <ul class="actions"> <li><a target="_blank" href="https://zh-tw.facebook.com/help/104002523024878" class="button next">前往粉絲團</a></li> </ul> </div> </section> ``` ###### main.css樣式 ```css= .myyoutube { display: flex; justify-content: center; margin-bottom: 50px; } .myvideo { border: 1px solid #1f1268; border-radius: 5px; } ``` ## 第三天(5/3) 1. 將landing.html複製出多個檔案，然後更改檔名為: - 地中海風.html - 工業風.html - 現代風.html - 古典風.html - 北歐風.html > **補充:** > 因為首頁不同的色快點擊後目前都會切換到同一個網頁，如果要切換到不同網頁，必須要有不同的html檔案。 2. 70行，將a超連結標籤的href屬性值設定成要連結的檔案名稱 ```html= <article> <span class="image">  <img src="images/pic01.jpg" alt="" /> </span> <header class="major">  <h3><a href="地中海風.html" class="link">地中海風</a></h3> <p>很地中海的風格</p> </header> </article> ``` > **補充:** > 可以重網址列確認有沒有跳到剛剛改過的頁面檔名 #### 小練習 ###### 幫網頁加上一顆可以點擊回到頁面最上面的按鈕 ##### index.html ``` <a href="#wrapper" class="btn">+</a> ``` > - 盡量家在網頁的下面，比較不會被其他元素擋住 > - wrapper是一個元素的id ##### main.css ``` .btn { display: flex; align-items: center; justify-content: center; position: fixed; width: 50px; height: 50px; bottom: 10px; right: 10px; background-color: #00aa00; border-radius: 50px; font-size: 2em; } .btn:hover { background-color: #00ff00; } ``` #### 調整landing.html的背景色 ``` <section id="banner" class="style3"> ``` > 雖然banner的樣式和首頁是共用的，但是這頁，可以使用style1~style6來指定banner顏色 1. 自行增加新的樣式 ```css= /* aaron:新增inside class來設定設計理念區塊背景和文字顏色和字型大小 */ .inside { background-color: #4d83a2; color: #f7dfa2; font-size: 1.5em; } /* aaron:新增一個major2讓設定設計理念區塊的標題底線修改不要影響到上面其他的底線樣式 */ header.major2 { width: -moz-max-content; width: -webkit-max-content; width: -ms-max-content; width: max-content; margin-bottom: 2em; } /* aaron:新增一個major3讓設定設計理念區塊的標題底線修改不要影響到上面其他的底線樣式 */ header.major2 > :first-child:after { content: ''; background-color: #f7dfa2; /* aaron: 色塊標題下方底線的顏色 */ display: block; height: 2px; margin: 0.325em 0 0.5em 0; width: 100%; } ``` 6x行，html檔案也需要加上這新的樣式: ```html= <section id="one" class="inside"> <div class="inner"> <header class="major2"> <h2 class="inside">地中海風格設計理念</h2> </header> <p>文藝復興前的西歐，家具藝術經過浩劫與長時期的蕭條後，在9至11世紀又重新興起，並形成獨特的風格地中海式風格。地中海風格家具以其極具親和力田園風情及柔和色調和組合搭配上的大氣很快被地中海以外的大區域人群所接受。物產豐饒、長海岸線、建築風格的多樣化、日照強烈形成的風土人文，這些因素使得地中海具有自由奔放、色彩多樣明亮的特點，很快被地中海以外的大區域人群所接受。“地中海風格”對中國城市家居的最大魅力，來自其純美的色彩組合，及西班牙蔚藍色的海岸與白色沙灘。</p> </div> </section> ``` 2. 修改第二個區塊的顏色，且不影響到首頁的調整採用新增class的方式來修改 ```css= .style-one { background-color: #125c1e; color: #2a2f4a; } .style-one .inner .major2 h2 { color: #37a6cb; } ``` 2. 要放Youtube影片的話，可以在Youtube影片上點右鍵，選擇「複製嵌入程式碼」，後去取代掉原本的img標籤；如果會影響版型可以試著也刪除img標籤外層不需要的標籤。 3. 100行，將內頁的照片換成影片 ```html=    <iframe width="50%" height="380" src="https://www.youtube.com/embed/F0hsuegHV1I" title="南無阿彌陀佛 Namo Amitabha 12小時憶佛念佛長時薰修" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> ``` ##### 說明 `iframe`標籤內的`width`和`height`屬性可以根據實際影片大小來調整成適合網頁的寬跟高。 ## 使用github pages來託管你的網站 #### 介紹 github Pages官方首頁: https://pages.github.com/ #### 步驟一: 建立儲存庫(Create a repository) - 須有一個github帳號，沒有的話可以使用自己的email申請 - 儲存庫(repository)名稱必須為: `username`.github.io > **注意:** > 1. username必須填入自己建立github帳號時的使用者名稱，大小寫必須符合 > 2. 結尾固定加上`.github.io` > 3. 這個名稱同時也是你的網站位址。 > 4. 如果這個儲存庫的名稱錯誤，將會造成你的網站無法連線。 > 5. 必須是Public(預設，請勿改為Private) #### 步驟二: 下載GitHub Desktop軟體下載網址: https://desktop.github.com/ 安裝後第一次使用需使用你的github帳號登入。 > **提示:** > GitHub Desktop登入時會打開GitHub登入網頁，如果使用的瀏覽器是Edge，有可能授權按鈕會無法點擊，可以直接將整個網址複製到Chrome瀏覽器進行登入。登入完後會跳轉回GitHub Desktop，接著選擇Clone Repository將github上的網站原始碼下載到本機電腦上。 > **提示:** > 如果是剛建立的儲存庫，只會看到一個空目錄。 #### 步驟三: 將網站檔案放到GitHub Pages目錄下接著將開發完成的網站檔案(包含子目錄和下面的檔案)全部複製到github目錄中。回到GitHub Desktop App在左下的Summary欄位輸入本次修改的描述，接著點擊Commit to Main按鈕，此時會將本次的修改打包存放在本機電腦。點選Publish藍色按鈕後發布到GitHub上。 #### 步驟四: 連線到網站發布後等待大約10秒~數分鐘，即可以使用`https://{username}.github.io`這個網址打開你的網站。 > **補充:** > GitHub Pages只能存放靜態網站。 > username為你的帳號名稱。 ## 第四天(5/4) 1. 使用 https://html5up.net/ 網站下載的len樣板來建立相簿集，如果你有五種風格，那你會需要五個相簿，就要解壓縮五次（或解壓縮後複製成五份），且以五個目錄存放，然後放在先前的Forty目錄下（與Forty樣板的index.html同一個位置）。 ```html= <ul class="actions"> <li><a href="地中海風作品集/index.html" class="button next">前往作品集</a></li> </ul> ``` 2. 在Lens樣板內的index.html加上一個回到網站首頁的功能第23行改為: ``` <p>請參觀 - <a href="..\index.html">回首頁</a></p> ``` > 兩個`..`代表目前路徑的上一層路徑 4. len樣板內一張照片的結構為: ```html=  <article> <a class="thumbnail" href="images/fulls/13.jpg"> <img src="images/thumbs/13.jpg" alt="" /> </a> <h2>Mattis lorem sodales</h2> <p>Feugiat auctor leo massa, nec vestibulum nisl erat faucibus, rutrum nulla.</p> </article> ``` ##### 說明 - 縮圖放在`images/thumbs/`目錄下 - 原圖放在`images/fulls/`目錄下 3. 將縮圖改成從右到左顯示 ```css= #thumbnails { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-flex-wrap: wrap; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0 0.75em; justify-content: flex-end; /* aaron:讓縮圖如果只有一個會靠右顯示 */ } ``` ##### 說明因為這個樣板使用flex排版模式，所以`text-align`會沒有效果，需使用`justify-content`屬性來排版。其設定值有以下方式： - `flex-start`: 靠左對齊(預設值) - `flex-end`: 靠右對齊 - `center`: 置中對齊 - `space-between`: 分散對齊（左右兩邊不留間距） - `space-around`: 分散對齊（左右兩邊會有間距，最旁邊的間距為內間距的一半） - `space-evenly`: 均分對齊（左右兩邊會有間距，所有間距一樣） 4. 12xx行，改編原圖的顯示方式 ```css= #viewer .slide .image { -moz-transition: opacity 0.5s ease-in-out; -webkit-transition: opacity 0.5s ease-in-out; -ms-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: cover; /* aaron:原圖的顯示方式, cover=滿版(裁切)，contain=全圖顯示(會有黑邊) */ opacity: 0; } ``` 5. 9xx行，讓縮圖填滿整個顯示區域，不要出現黑邊 ```css= #thumbnails article .thumbnail { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); display: block; position: relative; border: 0; /* 要幫每一張縮圖加邊框可以改這裡 */ outline: 0; height: 100px; /* aaron:將img的外層固定在100像素, 如果沒有固定大小，高度會因為每張照片不同而不同 */ } #thumbnails article .thumbnail img { display: block; width: 100%; height: 100%; /* aaron:指定照片的高度填滿外層高度, 否則會看到外層的黑邊 */ object-fit: cover; /* aaron:設定照片顯示的方式為滿板裁切 */ } ``` ##### 說明因為縮圖如果同一行兩張照片高度不同，高度較小的照片會因為被撐篙而出現黑邊，而此時因為不是`img`標籤的黑邊，而是外層`a`標籤的黑邊，所以先給外層一個固定高，然後將`img`高度調整為`100%`，此時`object-fit`屬性設定為`cover`才會生效。 > 加邊框範例: > ``` > border: 1px solid #c21111 ; > ``` 6. 10xx行，修改照片被選取時的邊框色 ```css= #thumbnails article .thumbnail:before { pointer-events: none; -moz-transition: opacity 0.25s ease; -webkit-transition: opacity 0.25s ease; -ms-transition: opacity 0.25s ease; transition: opacity 0.25s ease; content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; /* aaron:照片被選取的邊框設定 */ box-shadow: inset 0 0 0 2px #00D3B7, inset 0 0 0px 3px rgba(0, 0, 0, 0.15); opacity: 0; z-index: 1; } ``` 7. 將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`內）。 #### 其它 1. 移除超連結的底線。新增一個class樣式叫`remove-underline` ```css= .remove-underline{ border-bottom: 0px solid #09eaa3; } ``` 然後在你相要移除超連結底線的標籤上加上這個樣式，例如: ```html= <a class="remove-underline">test</a> ``` 因為這個樣板的超連結底線使用的是邊框屬性，所以一般`text-decoration`屬性沒有效果。 ## 第二個專案-個人線上履歷 #### 個人履歷網頁 1. 請前往 https://templateflip.com/ 下載Creative CV樣板。 > **備註** > 這個樣板Font Awesome用的是 4.7版的 > (由index.html的第10行`<link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">`可以得知。 2. 瀏覽器分頁名稱 index.html - 第7行 ```html= <title>我是Aaron Ho</title> ``` 3. 將要被下載的檔案名稱設定給a標籤的href屬性 index.html - 第58行 ```html= <a class="btn btn-primary" href="aaronho.pdf" target="_blank" data-aos="zoom-in" data-aos-anchor="data-aos-anchor">下載履歷</a> ``` > a標籤除了可以拿來跳轉網頁，也可以拿來下載檔案。 4. 一組社群按鈕的標籤範圍 index.html - 第66~69行 ```html= <a class="btn btn-default btn-round btn-lg btn-icon" target="_blank" href="https://zh-tw.facebook.com/aaronyanmusic" rel="tooltip" title="追蹤我的臉書"> <i class="fa fa-facebook"></i> </a> ``` 5. 修改banner背景遮罩顏色 ##### 38xx行，黑色遮罩 ```css= .page-header:before { background-color: rgba(0, 0, 0, 0.1); } /* aaron:banner的黑色遮罩(banner有兩層遮罩) */ ``` ##### 51xx行，漸層遮罩 ```css= .page-header { background: rgba(44, 44, 44, 0.2); /* For browsers that do not support gradients */ /* For Safari 5.1 to 6.0 */ /* For Opera 11.1 to 12.0 */ /* For Firefox 3.6 to 15 */ /* aaron: linear-gradient()漸層色函式，0deg=0度, 順時鐘方向, 起始顏色, 中間色1....中間色n, 結束顏色 */ background: linear-gradient(180deg, rgba(44, 44, 44, 0.2), #ffff0070, rgba(247, 178, 173, 0.8)); /* Standard syntax */ } ``` 6. 74xx行，大頭照旁的光暈顏色 ```css= .cc-profile-image a:before { content: ""; /* aaron:大頭照旁邊的光暈顏色 */ border: 15px solid rgba(247, 178, 173, 0.6); border-radius: 50%; height: 180px; width: 180px; position: absolute; left: 0; -webkit-animation: pulsate 1.6s ease-out; animation: pulsate 1.6s ease-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; opacity: 0.0; z-index: 99; } ``` 7. 31xx行，設定網頁字型 ```css= body { color: #2c2c2c; font-size: 14px; /* aaron:設定網頁字型 */ font-family: "微軟正黑體", "Montserrat", "Helvetica Neue", Arial, sans-serif; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } /* aaron:只改變頭銜文字的自行跟大小 */ .my-font { font-family: "標楷體"; font-size: 1.5em; } ``` 8. 15xx行，按鈕文字顏色 ```css= .btn-primary { /* background-color: #378C3F; 原本的綠色按鈕 */ background-color: #F7B2AD; /* aaron:按鈕顏色 */ color: #FFFFFF; /* aaron:按紐文字顏色 */ } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary:active:focus, .btn-primary:active:hover, .btn-primary.active:focus, .btn-primary.active:hover, .show>.btn-primary.dropdown-toggle, .show>.btn-primary.dropdown-toggle:focus, .show>.btn-primary.dropdown-toggle:hover { /* background-color: #40a249; */ background-color: #CEB7B3; /* aaron:滑鼠移到按鈕上時的按鈕顏色 */ color: #FFFFFF; /* aaron:滑鼠移到按鈕上的按鈕文字顏色 */ box-shadow: none; } ``` 10. 12xx行，社群按鈕的顏色設定 ```css= .btn, .navbar .navbar-nav>a.btn { border-width: 2px; font-weight: 400; font-size: 0.8571em; line-height: 1.35em; margin: 5px 1px; border: none; border-radius: 0.1875rem; padding: 11px 22px; cursor: pointer; background-color: #F7B2AD; /* aaron:社群按鈕的顏色 */ color: #FFFFFF; /* aaron:社群icon的顏色 */ } .btn:hover, .btn:focus, .btn:active, .btn.active, .btn:active:focus, .btn:active:hover, .btn.active:focus, .btn.active:hover, .show>.btn.dropdown-toggle, .show>.btn.dropdown-toggle:focus, .show>.btn.dropdown-toggle:hover, .navbar .navbar-nav>a.btn:hover, .navbar .navbar-nav>a.btn:focus, .navbar .navbar-nav>a.btn:active, .navbar .navbar-nav>a.btn.active, .navbar .navbar-nav>a.btn:active:focus, .navbar .navbar-nav>a.btn:active:hover, .navbar .navbar-nav>a.btn.active:focus, .navbar .navbar-nav>a.btn.active:hover, .show>.navbar .navbar-nav>a.btn.dropdown-toggle, .show>.navbar .navbar-nav>a.btn.dropdown-toggle:focus, .show>.navbar .navbar-nav>a.btn.dropdown-toggle:hover { background-color: #CEB7B3; /* aaron:滑鼠移到社群按鈕上的顏色 */ color: #FFFFFF; /* aaron:滑鼠移到社群按鈕上的icon顏色 */ box-shadow: none; } ``` 11. 快速修改整個網頁色系的小技巧-全部取代將`#378C3F`這個綠色RGB值透過Visual Studio Code的全部取代功能，可以一次將所有同樣式綠色的地方一次變成想要的色系。全部取代的快速鍵: |MacOS|Windows| |---|---| |`CMD`+`H`|`Ctrl`+`H`| 如果全部取代後發現效果不對，直接使用快速鍵:MacOS=`CMD`+`Z`或Windows=`Ctrl`+`Z`復原即可。 12. 27xx行，專業技能進度條背景色 ```css= .progress-container.progress-primary .progress { /* aaron:專技能進度條的背景色 */ background: rgba(117, 168, 120, 0.4); } ``` ## 第五天(5/5) ### HTML結構在調整時須注意其完整性有個網頁畫面如下: ![](https://i.imgur.com/NYghB7O.png) HTML如下: ```html= <section> <article> <img src="pic01.jpg" alt="圖片一" /> <h2>文字一</h2> </article> <article> <img src="pic02.jpg" alt="圖片二" /> <h2>文字二</h2> </article> </section> <section> <article> <img src="pic03.jpg" alt="圖片三" /> <h2>文字三</h2> </article> <article> <img src="pic04.jpg" alt="圖片四" /> <h2>文字四</h2> </article> </section> ``` ##### 說明: 1. 由於每一個`img`標籤和`h2`標籤都被一組`<article>`和`</article>`標籤包圍，所以如果要一張新的圖片，勢必要連同`<article>`標籤一起複製。 2. 由於畫面左邊的的文字一和文字二兩張圖片被一組`<section>`和`</section>`標籤包圍，所以可以推測左邊的圖片都屬於第一個`<section>`區塊，右邊的兩張圖片都放在第二個`<seciton>`區塊內。 3. 因此如果想在右邊加上一張新的圖片，必須將一組`<article>`標籤整個放到第一個`<section>`標籤內，例如: ```html= <section> <article> <img src="pic01.jpg" alt="圖片一" /> <h2>文字一</h2> </article> <article> <img src="pic02.jpg" alt="圖片二" /> <h2>文字二</h2> </article> <article> <img src="pic05.jpg" alt="圖片五" /> <h2>文字五</h2> </article> </section> <section> <article> <img src="pic03.jpg" alt="圖片三" /> <h2>文字三</h2> </article> <article> <img src="pic04.jpg" alt="圖片四" /> <h2>文字四</h2> </article> </section> ``` 結果示意: ![](https://i.imgur.com/qX1u93d.png) #### 網格系統在這個樣板中，如果看到像 - col-lg-6 - col-md-12 的class設定，代表使用的是一種網格系統的布局；網格系統將目前的畫面(或區域)切成12等分，然後使用class來決定佔據多少等分。 col-lg-6內的lg為電腦畫面, md為平板畫面, sm為手機畫面，也就是說col-lg-6意思為在電腦畫面時會佔據一半的畫面(因為12等分裡的6等分即為一半), col-md-12表示在平板上該標籤會佔據整個畫面。 > **參考:** > https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp #### `&nbsp` 網頁上的空白字元單純的空白建所產生出來的空白字元對瀏覽器來說是無效的，如果要在網頁上出現空白字元，必須使用`&nbsp`，兩個空白字元就打兩次就好，例如:` nbsp;` #### `a`標籤的功能 - 前往其他網站的網頁 - 前往目前網站的其他頁面 - 在目前網頁內移動，例如: `<a href="one"></a>`，#號代表one為某個目標元素的id。 #### 這個樣板的font-awesome字型是直接使用線上版而非下載版設定在index.html的head標籤內 ``` <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"> ``` > 在VSCode內可以按住`Ctrl`按鈕，然後滑鼠左鍵點及該連結可以打開 #### 個人資料區塊調整 ```html= <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-4"><strong class="text-uppercase">年齡:</strong></div> <div class="col-sm-8">24</div> </div> <div class="row mt-3"> <div class="col-sm-4"><strong class="text-uppercase">Email:</strong></div> <div class="col-sm-8">anthony@company.com</div> </div> <div class="row mt-3"> <div class="col-sm-4"><strong class="text-uppercase">電話:</strong></div> <div class="col-sm-8">+1718-111-0011</div> </div> <div class="row mt-3"> <div class="col-sm-4"><strong class="text-uppercase">地址:</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">宗教:</strong></div> <div class="col-sm-8">無</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">24</div> </div> <div class="row mt-3"> <div class="col-sm-4"><strong class="text-uppercase">國籍:</strong></div> <div class="col-sm-8">anthony@company.com</div> </div> <div class="row mt-3"> <div class="col-sm-4"><strong class="text-uppercase">語言:</strong></div> <div class="col-sm-8">English, German, French</div> </div> </div> </div> </div> </div> </div> </div> ``` #### 專長的進度條每一列的兩個專長都是由一個`<row>`標籤包圍住，例如: ``` <div class="row"> <div class="col-md-6"> <div class="progress-container progress-primary"> <span class="progress-badge">AutoCAD</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: 100%;"></div><span class="progress-value">100%</span> </div> </div> </div> <div class="col-md-6"> <div class="progress-container progress-primary"><span class="progress-badge">Maya</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: 55%;"></div><span class="progress-value">55%</span> </div> </div> </div> </div> ``` 如果想增加一個專長，需要從`<row>`標籤開始複製，然後刪掉一組`<div class="col-md-6">`標籤，如: ``` <div class="row"> <div class="col-md-6"> <div class="progress-container progress-primary"><span class="progress-badge">Test</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> ``` #### 新增自傳區塊步驟一: 最頂端的選單加一個新的選項，讓點擊時可以直接捲到自傳區塊: ```html= <div class="collapse navbar-collapse justify-content-end" id="navigation"> <ul class="navbar-nav"> <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="#me">自傳</a></li> <li class="nav-item"><a class="nav-link smooth-scroll" href=" ">跟我聯絡</a></li> </ul> ``` 步驟二: 複製一個完整的基本資料區塊放到References區塊上面 ```html=  <div class="section" id="me"> <div class="container"> <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"> <div class="h4 mt-0 title">自傳</div> <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p> <p>第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段</p> <p>第三段第三段第三段第三段第三段第三段第三段第三段第三段第三段第三段第三段第三段第三段</p> </div> </div>  </div> </div> </div> </div> ``` #### 作品區塊調整幫作品區在多加一個分類，這有兩件事情要做一。多加一顆按鈕 ```html= <ul class="nav nav-pills nav-pills-primary" role="tablist"> <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 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>  <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#Anchor" role="tablist"><i class="fa fa-anchor" aria-hidden="true"></i></a></li> </ul> ``` **說明** 1. href屬性要改成新的id 二。多加一個作品區塊，一個完整的作品區塊如下: ```html=  <div class="tab-pane" id="Anchor" role="tabpanel"> <div class="ml-auto mr-auto"> <div class="row">  <div class="col-md-6"> <div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"> <a href="#Photography"> <figure class="cc-effect"><img src="images/16.jpg" alt="Image" /> <figcaption> <div class="h4">Photoshoot</div> <p>Photography</p> </figcaption> </figure> </a></div> <div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"> <a href="#Photography"> <figure class="cc-effect"><img src="images/17.jpg" alt="Image" /> <figcaption> <div class="h4">Wedding Photoshoot</div> <p>Photography</p> </figcaption> </figure> </a></div> </div>   <div class="col-md-6"> <div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"> <a href="#Photography"> <figure class="cc-effect"><img src="images/18.jpg" alt="Image" /> <figcaption> <div class="h4">Beach Photoshoot</div> <p>Photography</p> </figcaption> </figure> </a></div> <div class="cc-porfolio-image img-raised" data-aos="fade-up" data-aos-anchor-placement="top-bottom"> <a href="#Photography"> <figure class="cc-effect"><img src="images/19.jpg" alt="Image" /> <figcaption> <div class="h4">Nature Photoshoot</div> <p>Photography</p> </figcaption> </figure> </a></div> </div>  </div> </div> </div>  ``` **說明:** 1. 第一行的id需設定成跟上一個步驟的href指向的id一樣，這樣按鈕被點擊才會切換到這個區塊內的照片。 #### 幫作品的區塊由兩行變為三行 - 因為網格系統會將畫面切分成12等份，而原本的`<div class="col-md-6">`代表每一行的寬度會占掉畫面的一半，因此要改成`<div class="col-md-4">`才有空間塞入第三行>。 3. 因為原本樣版裡面的每張作品照片長寬比都不一樣，所以在呈現上會出現兩邊照片占據不同高度的情況，此時只要把照片的長寬比例調整成一樣的解析度就可以左右照片的大小對稱了。 ```html=  <div class="tab-pane active" id="web-development"> <div class="ml-auto mr-auto"> <div class="row">  <div class="col-md-4">   <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-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/project-2.jpg" alt="Image" /> <figcaption> <div class="h4">Startup Project</div> <p>Web Development</p> </figcaption> </figure> </a></div> </div>  <div class="col-md-4">   <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-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/project-2.jpg" alt="Image" /> <figcaption> <div class="h4">Startup Project</div> <p>Web Development</p> </figcaption> </figure> </a></div> </div>  <div class="col-md-4">  <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-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/project-4.jpg" alt="Image" /> <figcaption> <div class="h4">Web Advertising 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/project-4.jpg" alt="Image" /> <figcaption> <div class="h4">Web Advertising Project</div> <p>Web Development</p> </figcaption> </figure> </a></div> </div> </div> </div> </div> ``` - 因為網格系統會將畫面切分成12等份，而原本的`<div class="col-md-6">`代表每一行的寬度會占掉畫面的一半，因此要改成`<div class="col-md-4">`才有空間塞入第三行>。 #### 工作經歷和學歷 ```html= <div class="section" id="experience"> <div class="container cc-experience"> <div class="h4 text-center mb-4 title">工作經歷</div>  <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>2018年1月 ~ 現在</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>教學教學教學教學教學教學教學教學教學教學教學教學教學教學教學教學教學教學教學教學教學</p> <ul> <li>綠建築課程</li> <li>Java程式設計</li> <li>遊戲開發</li> </ul> </div> </div> </div> </div>     </div> </div> ```