Try   HackMD

2022-07-18 作品導覽平台開發 - 上課紀錄

tags: 2022 綠建築室內設計實作班

目錄

課程開始

上課講義

http://www.aaronlife.com/v1/teaching/_timetable_uch_rwd_2022-07-18.html

上課資料雲端位置

https://drive.google.com/drive/folders/1crxPURoO9PH1I5SXTWppOQ79n1vmxXF0

Visual Studio Code快速功能健

MacOS Windows 說明
Shift + Alt + F Shift + Alt + F 重新排版檔案內容
CMD + / Ctrl + / 註解/解除註解
CMD + Shift + P Ctrl + Shift + P 打開功能選單

第一天（7/18）

  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. 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範例：


































<!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>

  1. Ctrl - / 可以讓標籤變成註解，再按一次會恢復原狀。

  2. 透過搜尋來找到網頁上的文字並透過Visual Studio Code修改。

  3. 透過搜尋aaron:來找到上課範例裡頭有修改過的地方。

  4. Ctrl-C後再Ctrl-V可以快速複製滑鼠游標那一行。

    不可選取任何文字

  5. [CSS] id屬性在css檔裡頭前面會有一個#號，而class屬性的名稱在css裡前面需要加上一個點「.」。

  6. Forty樣板的CSS檔案在assets/css/main.css，搜尋banner後可以在33xx行看到banner的樣式。

  7. 註解的方式:

    html
    ​​​​<!-- 這是註解 -->
    css
    ​​​​/* 這是註解 */

修改樣板

assets/css/main.css
  1. 第3383行，修改banner背景圖
background-image: url("../../images/banner.jpg");
  1. 第3413行：修改banner遮罩顏色
background-color: #412722; /* aaron: banner背景圖遮罩的顏色 */
  1. 第3418行：修改banner遮照透明度

    透明度範圍0~1之間的小數，1為完全不透明

opacity: 0.4; /* aaron:不透明度，範圍0~1之間的小數 */
  1. 第3404~3411行，修改轉場效果








/* -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:修該網頁打開後要延遲幾秒再開始轉場效果 */
  1. 2830行，修改色塊寬度









/* 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%;
}
  1. 2767行，色塊上標題的文字大小和顏色




.tiles article h3 {
  font-size: 1.75em; /* aaron:調整色塊的標題文字大小 */
  color: #c5e31a;  /* aaron:調整色塊的標題文字顏色 */
}
  1. 1785行~1801行: 修改色塊副標題的顏色
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;
}
  1. 獨立設定每個色塊的標題, 副標題和槓槓的顏色
















/* 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; 
}

/* aaron:幫每個色塊設定不同的標題和副標題之間的槓槓顏色 */
.tiles article:nth-child(1) header.major > :first-child:after {
  background-color: #ea7609;
}

因為是自行新增的設定，所以可以放在css檔內任意位置，建意放在色塊顏色設定語法(28xx行)附近就好。

  1. a標籤內可以加上target="_blank"，讓點下超連結後以新的分頁打開。

  2. 3836行，修改綠建築標章介紹的區塊的底色

    ​​​​#main {
​	background-color: #38726C; /* aaron:修改底下綠建築標章介紹區塊的底色 */
​}

  3. 修改網頁上按鈕

    25xx行，按紐文字語邊框色


box-shadow: inset 0 0 0 2px #ee2121;  /* aaron:按鈕的邊框顏色 */
color: #dd2424;                       /* aaron:按鈕的文字顏色 */

​​​​##### 26xx行，按鈕的方向箭頭





.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色碼找到的

第二天(7/19)

assets/css/main.css

  1. 第18xx行























/* aaron:新增一個major2讓綠建築標章介紹區塊的標題底線修改不要影響到上面其他的底線樣式 */
header.major2 {
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -ms-max-content;
    width: max-content;
    margin-bottom: 2em;
}

/* aaron:指定class=major2裡面的h2標籤文字顏色 */
.major2 h2 {
    color: pink;
}

/* aaron:新增一個major2讓綠建築標章介紹區塊的標題底線修改不要影響到上面其他的底線樣式 */
header.major2 > :first-child:after {
    content: '';
    background-color: #f71414; /* aaron: 色塊標題下方底線的顏色 */
    display: block;
    height: 2px;
    margin: 0.325em 0 0.5em 0;
    width: 100%;
}

在index.html裡要做對應的修改:




<header class="major2">
  <h2>綠建築標章</h2>
</header>

將原本class="major"改為class="major2"
因為header.major這個樣式在很多地方都會用，為了讓下面介紹綠建築標章區塊的標題下面的底線樣式修改不要影響到其他的底線樣式，所以自行從原本的header.major樣式複製一份，改class名字後自行修改成新樣式。

  1. 37xx行，修改留言區的背景顏色






#contact {
    border-bottom: solid 1px rgba(212, 212, 255, 0.1);
    overflow-x: hidden;
    background-color: #941C2F; /* aaron:設定留言區塊的背景色 */
    color: #ffff00;
}

  1. css顏色名稱列表:
    https://www.w3.org/wiki/CSS/Properties/color/keywords

  2. 自行新增class樣式設定
    步驟一: 在html標籤內設定class屬性，屬性值為樣式名稱，如:






















<section>
    <div class="contact-method">
        <span class="icon solid alt fa-envelope"></span>
        <h3 class="contact-email">Email</h3> <!-- aaron:因為想要獨立設定文字顏，所以自行增加class名稱 -->
        <a href="#">xxxxxx@gmail.com</a>
    </div>
</section>
<section>
    <div class="contact-method">
        <span class="icon solid alt fa-phone"></span>
        <h3 class="contact-phone">電話</h3> <!-- aaron:因為想要獨立設定文字顏，所以自行增加class名稱 -->
        <span>+886-2-1224-5678</span>
    </div>
</section>
<section>
    <div class="contact-method">
        <span class="icon solid alt fa-home"></span>
        <h3 class="contact-address">地址</h3> <!-- aaron:因為想要獨立設定文字顏，所以自行增加class名稱 -->
        <span>健行科技大學</span>
    </div>
</section>

然後到css檔案內新增剛剛設定的class樣式:















/* aaron:幫自己新增的class實現樣式設定 */
.contact-email {
    color: pink;
}

/* aaron:幫自己新增的class實現樣式設定 */
.contact-phone {
    color: lightcoral;
}

/* aaron:幫自己新增的class實現樣式設定 */
.contact-address {
    color: honeydew;
}

  1. 修改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的範例如果為:

    ​​​​<i class="fab fa-line"></i>

    在此樣版內會是:

    ​​​​<span class="icon brands alt fa-line"></span>

    請注意fab對應brands，fa-line則對應fa-開頭的樣式名稱。

  2. 21xx行，修改Icon顏色











.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;
}
  1. 26xx行，修改[送出]按鈕顏色






















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

  1. css的四個選擇器(Selector)



















/* 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

  1. 38xx行，footer的調整




















/* 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;
}
  1. 幫瀏覽器分頁上的標題前面加上圖示








    <head>
       <title>Aaron的室內設計作品</title>
	   <link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- aaron:網頁頁籤上的圖示 -->
	   <meta charset="utf-8" />
	   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
	   <link rel="stylesheet" href="assets/css/main.css" />
	   <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
    </head>

參考: https://www.w3schools.com/html/html_favicon.asp

  1. 將landing.html複製出多個檔案，然後更改檔名為:
    • 地中海風.html
    • 工業風.html
    • 現代風.html
    • 古典風.html
    • 北歐風.html
  2. 70行，將a超連結標籤的href屬性值設定成要連結的檔案名稱











<article>
    <span class="image">
        <!-- aaron:每個色塊的背景圖設，直接用其他圖片覆蓋就可以修改背景圖 -->
        <img src="images/pic01.jpg" alt="" /> 
    </span>
    <header class="major">
        <!-- aaron:將a標籤的href屬性值改成要連結的檔案名稱 -->
        <h3><a href="地中海風.html" class="link">地中海風</a></h3>
        <p>很地中海的風格</p>
    </header>
</article>

其他

  1. 在網頁下方加一顆按鈕，點集後可以捲回最上面
    html檔案在需要的該功能的地方加一顆按鈕並
<!-- aaron:加一顆按鈕，點集後可以捲回網頁最上面 -->
<li><a href="#banner" class="button next scrolly">回到上面</a></li>
  • href屬性設定的是捲動目標位址的id，id前面需加上#號
  • scrolly讓捲動時可以有捲動特效
  1. 在網頁上加入音樂播放




<!-- 在網頁上加上音樂播放器(autoplay瀏覽器會擋住) -->
<audio id="audio" autoplay controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

內頁修改(地中海風.html)

  1. 自行增加新的樣式

























/* aaron:新增inside class來設定設計理念區塊背景和文字顏色和字型大小 */
.inside {
    background-color: #4d83a2;
    color: #f7dfa2;
    font-size: 1.5em;
}

/* aaron:新增一個major3讓設定設計理念區塊的標題底線修改不要影響到上面其他的底線樣式 */
header.major3 {
    width: -moz-max-content;
    width: -webkit-max-content;
    width: -ms-max-content;
    width: max-content;
    margin-bottom: 2em;
}

/* aaron:新增一個major3讓設定設計理念區塊的標題底線修改不要影響到上面其他的底線樣式 */
header.major3 > :first-child:after {
    content: '';
    background-color: #f7dfa2; /* aaron: 色塊標題下方底線的顏色 */
    display: block;
    height: 2px;
    margin: 0.325em 0 0.5em 0;
    width: 100%;
}

6x行，html檔案也需要加上這新的樣式:









<section id="one" class="inside">
    <div class="inner">
        <header class="major3">
            <h2 class="inside">地中海風格設計理念</h2>
        </header>
        <p>文藝復興前的西歐，家具藝術經過浩劫與長時期的蕭條後，在9至11世紀又重新興起，並形成獨特的風格地中海式風格。地中海風格家具以其極具親和力田園風情及柔和色調和組合搭配上的大氣很快被地中海以外的大區域人群所接受。物產豐饒、長海岸線、建築風格的多樣化、日照強烈形成的風土人文，這些因素使得地中海具有自由奔放、色彩多樣明亮的特點，很快被地中海以外的大區域人群所接受。“地中海風格”對中國城市家居的最大魅力，來自其純美的色彩組合，及西班牙蔚藍色的海岸與白色沙灘。</p>
    </div>
</section>
  1. 要放Youtube影片的話，可以在Youtube影片上點右鍵，選擇「複製嵌入程式碼」，後去取代掉原本的img標籤；如果會影響版型可以試著也刪除img標籤外層不需要的標籤。
  2. 100行，將內頁的照片換成影片






<!-- aaron:因為要換成影片，所以把原本的img標籤刪除 -->
    <!-- <a href="generic.html" class="image">
        <img src="images/pic09.jpg" alt="" data-position="top center" />
    </a> -->
    <!-- aaron:將youtube影片取代原本的照片 -->
    <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屬性可以根據實際影片大小來調整成適合網頁的寬跟高。

第三天（7/20）

  1. 使用 https://html5up.net/ 網站下載的len樣板來建立相簿集，如果你有五種風格，那你會需要五個相簿，就要解壓縮五次（或解壓縮後複製成五份），且以五個目錄存放，然後放在先前的Forty目錄下（與Forty樣板的index.html同一個位置）。



<ul class="actions">
    <li><a href="地中海風作品集/index.html" class="button next">前往作品集</a></li>
</ul>
  1. len樣板內一張照片的結構為:








<!-- aaron:多加一張照片 -->
<article>
    <a class="thumbnail" href="images/fulls/13.jpg">
        <img src="images/thumbs/13.jpg" alt="" />
    </a>
    <h2>Mattis lorem sodales</h2>
    <p>Feugiat auctor leo massa, nec vestibulum nisl erat faucibus, rutrum nulla.</p>
</article>
說明
  • 縮圖放在images/thumbs/目錄下
  • 原圖放在images/fulls/目錄下
  1. 將縮圖改成從右到左顯示












#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: 均分對齊（ 左右兩邊會有間距，所有間距一樣）
  1. 12xx行，改編原圖的顯示方式














#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;
}
  1. 9xx行，讓縮圖填滿整個顯示區域，不要出現黑邊















#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才會生效。
6. 10xx行，修改照片被選取時的邊框色




















#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;
}

  1. 將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. 將網站放到雲端：搜尋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 - 備份（需付費）。

其它

  1. 移除超連結的底線。
    新增一個class樣式叫remove-underline



.remove-underline{
	border-bottom: 0px solid #09eaa3;
}

然後在你相要移除超連結底線的標籤上加上這個樣式，例如:

<a class="remove-underline">test</a>

因為這個樣板的超連結底線使用的是邊框屬性，所以一般text-decoration屬性沒有效果。

第四天(7/21)

  1. 幫網站加上郵件發送功能：
    步驟一. 將index.html更名為index.php
    步驟二. 在index.php內加入下面程式碼：

    

















    ​​​​<?php
​​​​// 判斷是否需要發送郵件
​​​​if(isset($_REQUEST['email']) && strlen($_REQUEST['email']) > 5) 
​​​​{
​​​​    // 取得資訊
​​​​    $admin_email = "xxxxxxxx@gmail.com";
​​​​    $header = "From:".$_REQUEST['email']."\r\n";
​​​​    $name = $_REQUEST['name'];
​​​​    $message = $_REQUEST['message'];

​​​​    // 發送郵件
​​​​    if(FALSE == mail($admin_email, "由[".$name."]傳來的訊息", $message, $header))
​​​​    echo "<h2 class=\"align-center\">發送失敗！</h2>";
​​​​    else
​​​​    echo "<h2 class=\"align-center\">謝謝您的聯絡！</h2>";
​​​​    echo "<br/>";
​​​​}
​​​​?>

    步驟三: 修改form標籤的action屬性(大約在18x行)，來設定使用者留言的資料要傳送到哪一個網頁處理。

    ​​​​<form method="post" action="index.php">

    步驟四: 將index.php上傳雲端。

    備註

    • 當index.html和index.php兩個檔案同時存在雲端時，index.php會優先被當成首頁打開。
    • 可以在網頁任意地方加入，但請勿破壞html標籤不可交錯的相關規定。
    • 請將上面php程式碼內的email信箱xxxxxx@gmail.com改成你的email，這樣你才會收到。
    • 如果email收件夾沒有收到，到垃圾郵件裡找看看。

    補充

    • 因為未知原因，送信功能都會失敗，請將000webhost的PHP版本設定改為PHP8.0，目前看起來只有設定成這個版本的PHP才能送信成功。
    • 如果有FileZilla原本可以連線，但後來發生無法連線的情況，可以試試重開家裡的網路分享器(非中華電信數據機)。

  2. 如果想同時把郵件發給網站主人和留言的人，可以改用下面的程式碼:






























<?php
// 判斷是否需要發送郵件
// email欄位需要有資料且要大於5個字才會發送email
if(isset($_REQUEST['email']) && strlen($_REQUEST['email']) > 5)
{
    // 取得資訊
    $admin_email = "xxxxxxxx@gmail.com";  // 網站主人的email
    $user_email = $_REQUEST['email'];  // 留言的人的email

    $header = "From:".$_REQUEST['email']."\r\n";
    $name = $_REQUEST['name'];            // 留言的人的稱呼
    $message = $_REQUEST['message'];      // email內容
    $subject = "由[".$name."]傳來的訊息";  // email標題

    // 發送郵件給網站主人
    if(FALSE == mail($admin_email, $subject, $message, $header))
        echo "<h2 class=\"align-center\">發送失敗！</h2>";
    else
       echo "<h2 class=\"align-center\">謝謝您的聯絡！</h2>";
    echo "<br/>";

    // 發送郵件給留言的人
    if(FALSE == mail($user_email, $subject, $message, $header))
        echo "<h2 class=\"align-center\">同步發送給您失敗！</h2>";
    else
       echo "<h2 class=\"align-center\">已同步發送到您的信箱！</h2>";
    echo "<br/>";
}
?>

個人履歷網頁

  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">可以得知。

  1. 瀏覽器分頁名稱
    index.html - 第7行
<title>我是Aaron Ho</title>
  1. 將要被下載的檔案名稱設定給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標籤除了可以拿來跳轉網頁，也可以拿來下載檔案。

  1. 一組社群按鈕的標籤範圍
    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>
  1. 修改banner背景遮罩顏色
    38xx行，黑色遮罩


.page-header:before {
    background-color: rgba(0, 0, 0, 0.1); } /* aaron:banner的黑色遮罩(banner有兩層遮罩) */
51xx行，漸層遮罩










.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 */ 
}
  1. 74xx行，大頭照旁的光暈顏色


















.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;
}
  1. 31xx行，設定網頁字型















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;
}
  1. 15xx行，按鈕文字顏色






















.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;
}
  1. 12xx行，社群按鈕的顏色設定









































.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;
}

  1. 快速修改整個網頁色系的小技巧-全部取代
    將#378C3F這個綠色RGB值透過Visual Studio Code的全部取代功能，可以一次將所有同樣式綠色的地方一次變成想要的色系。
    全部取代的快速鍵:

    MacOS Windows
    CMD+H Ctrl+H

    如果全部取代後發現效果不對，直接使用快速鍵:MacOS=CMD+Z或Windows=Ctrl+Z復原即可。

  2. 27xx行，專業技能進度條背景色





.progress-container.progress-primary .progress {
  /* aaron:專技能進度條的背景色 */
  background: rgba(117, 168, 120, 0.4);
}

第五天(7/22)

  1. 使用快速鍵CMD+\(MacOS)或Ctrl+`(Windows)可以在右邊分割出一個畫面同時打開兩個檔案。
    如果要同時捲動兩個檔案，可以安裝Sync Scroll extension，該extension有兩個功能可以透過VSCode功能選單找到:

    • Toggle Sync Scroll: 開/關同步捲動
    • Change Sync Scroll mode: 改變同步捲動的方式，從第一行對齊捲動，或是以當前的兩個檔案位置來捲動。

  2. 幫作品的區塊由兩行變為三行






































































































<!-- aaron:這是第一個按鈕點下去的作品照片 -->
<div class="tab-pane active" id="web-development">
  <div class="ml-auto mr-auto">
    <div class="row">

      <!-- aaron:這是左邊第一行的作品照片 -->
      <div class="col-md-4"> <!-- aaron:網頁寬總長為12-->

        <!-- aaron:左邊第一行第一張照片 -->
        <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>

        <!-- aaron:左邊第一行第二張照片 -->
        <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>

      <!-- aaron:中間行的作品照片 -->
      <div class="col-md-4"> <!-- aaron:網頁寬總長為12-->

        <!-- aaron:左邊第一行第一張照片 -->
        <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>

        <!-- aaron:左邊第一行第二張照片 -->
        <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>

      <!-- aaron:這是右邊第一行的作品照片 -->
      <div class="col-md-4">

        <!-- aaron:右邊第一行第一張照片 -->
        <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>

        <!-- aaron:右邊第一行第二張照片 -->
        <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>

        <!-- aaron:右邊第一行第三張照片 -->
        <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">才有空間塞入第三行>。
  1. 因為原本樣版裡面的每張作品照片長寬比都不一樣，所以在呈現上會出現兩邊照片占據不同高度的情況，此時只要把照片的長寬比例調整成一樣的解析度就可以左右照片的大小對稱了。
  2. 幫作品區在多加一個分類，這有兩件事情要做
    一。多加一顆按鈕
















<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>

  <!-- aaron:把activ樣式設定給中間的按鈕，讓他預設被選取 -->
  <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>

  <!-- aaron:新增的第四顆按鈕，可以複製第三顆按鈕來改 -->
  <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

二。多加一個作品區塊，一個完整的作品區塊如下:



































































<!-- aaron:這是第四個按鈕點下去的作品照片 - Start -->
<div class="tab-pane" id="Anchor" role="tabpanel">
  <div class="ml-auto mr-auto">

    <div class="row">

      <!-- aaron:這是左邊第一行的作品照片 - Start -->
      <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>
      <!-- aaron:這是左邊第一行的作品照片 - End -->

      <!-- aaron:這是右邊第一行的作品照片 - Start -->
      <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>
      <!-- aaron:這是左邊第一行的作品照片 - End -->

    </div>


  </div>
</div>
<!-- aaron:這是第四個按鈕點下去的作品照片 - End -->

說明:

  1. 第一行的id需設定成跟上一個步驟的href指向的id一樣，這樣按鈕被點擊才會切換到這個區塊內的照片。

  2. 工作經歷和學歷

    








































































    ​​​ <div class="section" id="experience">
​​​     <div class="container cc-experience">
​​​       <div class="h4 text-center mb-4 title">工作經歷</div>
​​​       <!-- aaron:第一個工作經歷 -->
​​​       <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>


​​​       <!-- aaron:第二個工作經歷 -->
​​​       <!-- <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>April 2014 - March 2016</p>
​​​               <div class="h5">WebNote</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">Web Developer</div>
​​​               <p>Euismod massa scelerisque suspendisse fermentum habitant vitae ullamcorper magna quam iaculis,
​​​                 tristique sapien taciti mollis interdum sagittis libero nunc inceptos tellus, hendrerit vel eleifend
​​​                 primis lectus quisque cubilia sed mauris. Lacinia porta vestibulum diam integer quisque eros
​​​                 pulvinar curae, curabitur feugiat arcu vivamus parturient aliquet laoreet at, eu etiam pretium
​​​                 molestie ultricies sollicitudin dui.</p>
​​​             </div>
​​​           </div>
​​​         </div>
​​​       </div> -->

​​​       <!-- aaron:第三個工作經歷 -->
​​​       <!-- <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>April 2013 - February 2014</p>
​​​               <div class="h5">WEBM</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">Intern</div>
​​​               <p>Euismod massa scelerisque suspendisse fermentum habitant vitae ullamcorper magna quam iaculis,
​​​                 tristique sapien taciti mollis interdum sagittis libero nunc inceptos tellus, hendrerit vel eleifend
​​​                 primis lectus quisque cubilia sed mauris. Lacinia porta vestibulum diam integer quisque eros
​​​                 pulvinar curae, curabitur feugiat arcu vivamus parturient aliquet laoreet at, eu etiam pretium
​​​                 molestie ultricies sollicitudin dui.</p>
​​​             </div>
​​​           </div>
​​​         </div>
​​​       </div> -->

​​​     </div>
​​​   </div>

  3. 新增自傳區塊
    步驟一: 最頂端的選單加一個新的選項，讓點擊時可以直接捲到自傳區塊:

    













    ​​​<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>

​​​    <!-- aaron:跳到自傳-->
​​​   <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區塊上面

    


























    ​​​<!-- aaron:字型新增的自傳區塊 -->
​​​<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"> <!-- aaron:將col-lg-6改成col-lg-12才會占滿完整網頁寬度 -->
​​​         <div class="card-body">
​​​           <div class="h4 mt-0 title">自傳</div>
​​​           <p>第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段第一段</p>
​​​           <p>第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段</p>
​​​           <p>第三段第三段第三段第三段第三段第三段第三段第三段第三段第三段第三段第三段第三段第三段</p>
​​​         </div>
​​​       </div>

​​​       <!-- 刪除原本的右半邊 <div class="col-lg-6 col-md-12">
​​​         <div class="card-body">
​​​           <div class="h4 mt-0 title"></div>
​​​           <br/><br/> 

​​​         </div>
​​​       </div> -->

​​​     </div>
​​​   </div>
​​​ </div>
​​​</div>

  4. 如想在網頁上顯示標籤，例如想在網頁上顯示<Hello>，則在html檔內要寫成:

    ​​​&lt;Hello&gt;
    • &lt; = <
    • &gt; = >

  5. 推薦人區塊


























































































<div class="section" id="reference">
<div class="container cc-reference">
  <div class="h4 mb-4 text-center title">推薦人</div>
  <div class="card" data-aos="zoom-in">
    <div class="carousel slide" id="cc-Indicators" data-ride="carousel">
      <ol class="carousel-indicators">
        <li  data-target="#cc-Indicators" data-slide-to="0"></li>

        <!-- aaron:將預設的長條型槓槓設定在第二個(class="active") -->
        <li class="active" data-target="#cc-Indicators" data-slide-to="1"></li>

        <li data-target="#cc-Indicators" data-slide-to="2"></li>
        <li data-target="#cc-Indicators" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">

        <!-- aaron:一號推薦人開頭 -->
        <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">一號推薦人</div>
              <p class="category">總裁 / 某某公司</p>
            </div>
            <div class="col-lg-10 col-md-9">
              <p>推薦他推薦他推薦他推薦他推薦他推薦他推薦他推薦他推薦他推薦他推薦他推薦他推薦他推薦他推薦他</p>
            </div>
          </div>
        </div>
        <!-- aaron:一號推薦人結束 -->

        <!-- aaron:預設推薦人需要設定active class-->
        <div class="carousel-item active">
          <div class="row">
            <div class="col-lg-2 col-md-3 cc-reference-header"><img src="images/reference-image-2.jpg"
                alt="Image" />
              <div class="h5 pt-2">二號推薦人</div>
              <p class="category">CEO / Creativem</p>
            </div>
            <div class="col-lg-10 col-md-9">
              <p> Habitasse venenatis commodo tempor eleifend arcu sociis sollicitudin ante pulvinar ad, est
                porta cras erat ullamcorper volutpat metus duis platea convallis, tortor primis ac quisque etiam
                luctus nisl nullam fames. Ligula purus suscipit tempus nascetur curabitur donec nam ullamcorper,
                laoreet nullam mauris dui aptent facilisis neque elementum ac, risus semper felis parturient
                fringilla rhoncus eleifend.</p>
            </div>
          </div>
        </div>

        <div class="carousel-item">
          <div class="row">
            <div class="col-lg-2 col-md-3 cc-reference-header"><img src="images/reference-image-3.jpg"
                alt="Image" />
              <div class="h5 pt-2">三號推薦人</div>
              <p class="category">CEO / Webnote</p>
            </div>
            <div class="col-lg-10 col-md-9">
              <p> Habitasse venenatis commodo tempor eleifend arcu sociis sollicitudin ante pulvinar ad, est
                porta cras erat ullamcorper volutpat metus duis platea convallis, tortor primis ac quisque etiam
                luctus nisl nullam fames. Ligula purus suscipit tempus nascetur curabitur donec nam ullamcorper,
                laoreet nullam mauris dui aptent facilisis neque elementum ac, risus semper felis parturient
                fringilla rhoncus eleifend.</p>
            </div>
          </div>
        </div>

        <!-- aaron:自己加的第四號推薦人 -->
        <div class="carousel-item">
          <div class="row">
            <div class="col-lg-2 col-md-3 cc-reference-header"><img src="images/reference-image-3.jpg"
                alt="Image" />
              <div class="h5 pt-2">四號推薦人</div>
              <p class="category">CEO / Webnote</p>
            </div>
            <div class="col-lg-10 col-md-9">
              <p> Habitasse venenatis commodo tempor eleifend arcu sociis sollicitudin ante pulvinar ad, est
                porta cras erat ullamcorper volutpat metus duis platea convallis, tortor primis ac quisque etiam
                luctus nisl nullam fames. Ligula purus suscipit tempus nascetur curabitur donec nam ullamcorper,
                laoreet nullam mauris dui aptent facilisis neque elementum ac, risus semper felis parturient
                fringilla rhoncus eleifend.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>
</div>
  1. 48xx行，修改每個區塊的陰影












.card {
  border: 0;
  border-radius: 0.1875rem;
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 20px;

  /* offset-x | offset-y | blur-radius | spread-radius | color */
  box-shadow: 5px 5px 10px 10px rgba(0, 0, 0, 0.5); /* aaron:每個區塊的陰影設定 */
}
  1. 幫個人履歷網站加上使用email接收訊息功能



















<?php
// 判斷是否需要發送郵件
if(isset($_REQUEST['_replyto']) && strlen($_REQUEST['_replyto']) > 5) 
{
    // 取得資訊
    $admin_email = "xxxxxxxx@gmail.com";
    $subject = $_REQUEST['Subject'];
    $header = "From:".$_REQUEST['_replyto']."\r\n";
    $name = $_REQUEST['name'];
    $message = $_REQUEST['message'];

    // 發送郵件
    if(FALSE == mail($admin_email, "[".$name."]:".$subject, $message, $header))
    echo "<h2 class=\"align-center\">發送失敗！</h2>";
    else
    echo "<h2 class=\"align-center\">謝謝您的聯絡！</h2>";
    echo "<br/>";
}
?>

form標籤的action屬性值改為index.php，例如:

























<form action="index.php" method="POST">
    <div class="p pb-3"><strong>請免費聯絡我</strong></div>
    <div class="row mb-3">
      <div class="col">
        <div class="input-group"><span class="input-group-addon"><i
              class="fa fa-user-circle"></i></span>
          <input class="form-control" type="text" name="name" placeholder="稱呼"
            required="required" />
        </div>
      </div>
    </div>
    <div class="row mb-3">
      <div class="col">
        <div class="input-group"><span class="input-group-addon"><i
              class="fa fa-file-text"></i></span>
          <input class="form-control" type="text" name="Subject" placeholder="主題"
            required="required" />
        </div>
      </div>
    </div>
    <div class="row mb-3">
      <div class="col">
        <div class="input-group"><span class="input-group-addon"><i
...以下省略...

注意
當發送郵件後，如果看不到 謝謝您的聯絡，或是發送錯誤訊息，有可能是因為網頁排版的關係，所以被吃掉了，需再調整php程式碼在網頁中的位置，這個樣版建議要放在container class內(更內層也可以)。

  1. 調整按鈕上tooltip的出現位置:





<li class="nav-item">
   <a class="nav-link" data-toggle="tab" href="#web-development" role="tablist" rel="tooltip" title="地中海風格" data-placement="left" >
     <i class="fa fa-laptop" aria-hidden="true"></i>
   </a>
</li>

說明

  • 在超連結標籤內加上data-placement屬性，屬性值有下面四種其中一種:
屬性值 說明
top tooltip顯示在按鈕上面
bottom tooltip顯示在按鈕下面
left tooltip顯示在按鈕左邊
right tooltip顯示在按鈕右邊
Last changed by 
 
aaronlife
0
794

Read more

健行科技大學 網頁全端養成班 上課筆記

Install OpenSSH Server用來遠端連線用，安裝時必須打勾

Apr 6, 2025
Java程式設計師養成班 專題

https://codepen.io/robstinson/pen/PoGyRgyhttp://www.cssmoban.com/cssthemes/25954.shtml欄位項目：1.編號（主）2.名稱3.種類4.開發商5.價格6.庫存量7.最後異動日期

Mar 25, 2025
Java 上課記錄

開發一個猜數字遊戲:

Mar 25, 2025
Python入門實作班 上課記錄

Python入門實作班 上課記錄

Mar 25, 2025
Read more from aaronlife
Published on HackMD