# 2024-09-03健行科技大學室內設計班（二） 作品導覽網站筆記

## 2024-10-18
下載個人履歷網頁樣板: https://templateflip.com/templates/creative-cv/

### 個人網站開發
##### /css/main.css

#### 1106行，修改社群按鈕背景色顏色

.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: #707;  /* aaron:社群按鈕背景色 */
  color: #FFFFFF; }

#### 1126行，社群按鈕滑鼠懸浮時背景色

  .navbar .navbar-nav > a.btn.dropdown-toggle:hover {
    background-color: #972297;  /* aaron:社群按鈕滑鼠懸浮時背景色 */
    color: #FFFFFF;
    box-shadow: none; }

#### 1263行，按鈕滑鼠移上去的顏色

.btn-primary {
  background-color: #7b378c;
  color: #FFFFFF; }
  .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: #3d0572;  /* aaron:按鈕滑鼠移上去的顏色 */
    color: #FFFFFF;
    box-shadow: none; }

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

然後到主網站的，工業風.html內找到前往作品集的`a`標籤，將`href`屬性值改為指向`工業風/index.html`檔案

<ul class="actions">
    <li><a href="工業風/index.html" class="button next">前往作品集</a></li>
</ul>

> **補充:**
> 如果其他風格都需要自己的相簿，請完整複製lens這個樣版後做一樣的動作即可，因為每個作品集的相簿都是獨立的，所以需要幾個相簿，就必須複製對應數量的lens樣板。
2. 修改`工業風/index.html`內第23行，加上回到首頁的功能:
將:

   <p>Just another fine responsive site template by <a href="http://html5up.net">HTML5 UP</a></p>

改為:

   <p><a href="../index.html">回到首頁</a></p>

3. 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/`目錄下

4. 修改相簿標題和背景色, 請打開`工業風/assets/main.css`
###### 第182行:

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.25;
    margin: 0 0 0.5em 0;
    color: #fff;  /* aaron:修改相簿標題顏色 */
}

###### 第840行:

#main {
    -moz-transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s;
    -webkit-transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s;
    -ms-transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s;
    transition: opacity 0.75s ease, right 0.75s ease, left 0.75s ease, visibility 0.75s;
    -webkit-overflow-scrolling: touch;
    position: fixed;
    top: 0;
    width: 22.5em;
    height: 100%;
    background: #723d46; /* aaron: 修改相簿背景色 */
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: right;
    visibility: visible;
    z-index: 10000;
    right: 0;
}

###### 第891行

@media screen and (max-width: 980px) {
    #main {
        background: #723d46; /* aaron:將相簿背景在解析度980px以下的顏色改成咖啡色 */
    }

    #main .toggle {
        display: block;
    }
}

###### 第908行

#main {
    -moz-transition: opacity 0.5s ease, visibility 0.5s;
    -webkit-transition: opacity 0.5s ease, visibility 0.5s;
    -ms-transition: opacity 0.5s ease, visibility 0.5s;
    transition: opacity 0.5s ease, visibility 0.5s;
    width: 100%;
    background: #723d46; /* aaron:將相簿背景在解析度480px以下的顏色改成咖啡色 */
    text-align: center;
}

5. 將縮圖改成從右到左顯示

#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行，改編原圖的顯示方式

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

#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行，修改照片被選取時的邊框色

#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`內）。

## 2024-09-16
#### 修改樣板
##### assets/css/main.css
1. 第3383行，修改banner背景圖

background-image: url("../../images/banner.jpg");

2. 第3413行：修改banner遮罩顏色

background-color: #412722; /* aaron: banner背景圖遮罩的顏色 */

3. 第3418行：修改banner遮照透明度
> 透明度範圍0~1之間的小數，1為完全不透明

opacity: 0.4; /* aaron:不透明度，範圍0~1之間的小數 */

4. 第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:修該網頁打開後要延遲幾秒再開始轉場效果 */

5. 2830行，修改色塊顏色

/* aaron:指定色塊位置的寬度，以n=1來說, 3跟2位置的色塊寬度會是40% */
.tiles article:nth-child(6n - 5):before {
   background-color: #6fc3df; /* aaron:修改色塊的顏色 */
}

6. 2828行，修改色塊寬度

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

7. 2767行，色塊上標題的文字大小和顏色

.tiles article h3 {
  font-size: 1.75em; /* aaron:調整色塊的標題文字大小 */
  color: #c5e31a;  /* aaron:調整色塊的標題文字顏色 */
}

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

9. 獨立設定每個色塊的標題, 副標題和槓槓的顏色

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

10. 再不同解析度切換不同圖片

@media screen and (max-width: 1280px) {
	#banner {
		background-image: url("../../images/小蜜蜂.jpg");
	}
}

@media screen and (max-width: 1000px) {
	#banner {
		background-image: url("../../images/工業風.jpg");
	}
}

@media screen and (max-width: 800px) {
	#banner {
		background-image: url("../../images/現代風.jpg");
	}
}

@media screen and (max-width: 600px) {
	#banner {
		background-image: url("../../images/童話風.jpg");
	}
}

@media screen and (max-width: 400px) {
	#banner {
		background-image: url("../../images/地中海風.jpg");
	}
}

#### 第2524行，修改首頁下方按鈕文字大小

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -moz-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    -webkit-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    -ms-transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 2px #ffffff;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 1.2em;  /* aaron:修改按鈕的文字大小 */
    font-weight: 600;
    height: 3.5em;
    letter-spacing: 0.25em;
    line-height: 3.5em;
    padding: 0 1.75em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

#### 首頁下方區塊的標題顏色
在3955行新增下面的樣式:

.my-color {
	color: yellow;  /* aaron:自行新增樣式設定首頁下方區塊的標題顏色 */
}

在index.html 123加上my-color的class

<section id="two">
    <div class="inner">
        <header class="major">
            <h2 class="my-color">關於綠色建築</h2>
        </header>
        <p>滿滿的綠色，通過綠色建築標章，可以看起來很厲害</p>
        <ul class="actions">
            <li><a href="https://gb.tabc.org.tw/" target="_blank" class="button next">前往綠建築標章網站</a></li>
        </ul>
    </div>
</section>

#### 修改input和textarea背景色
##### 191x行

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

#### 首頁下方區塊背景顏色
3959行新增下面樣式

#two {
	background-color: darkorange;  /* aaron: 修改首頁下方區塊背景顏色 */
}

#### 修改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-開頭的樣式名稱。

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

#### 發送郵件
檔案: index.html
行號138行, 和 161行左右

<section>
    <!-- 這一行需要加上onsubmit="return mailto()" -->
    <form method="post" action="#"  onsubmit="return mailto()">
        <div class="fields">
            <div class="field half">
                <label for="name">名稱</label>
                <input type="text" name="name" id="name" />
            </div>
            <div class="field half">
                <label for="email">Email</label>
                <input type="text" name="email" id="email" />
            </div>
            <div class="field">
                <label for="message">訊息</label>
                <textarea name="message" id="message" rows="6"></textarea>
            </div>
        </div>

        <ul class="actions">
            <li><input type="submit" value="傳送" class="primary" /></li></a>
            <li><input type="reset" value="清除" /></li>
        </ul>

        <!-- 呼叫email程式的語法:start -->
        <script>
            function mailto() {
                name = document.getElementsByName('name')[0].value; // 把使用者輸入的名稱拿出來用
                email = document.getElementsByName('email')[0].value; // 把使用者輸入的email拿出來用
                message = document.getElementsByName('message')[0].value.replaceAll('\n', '%0D%0A'); // 把使用者輸入的內容拿出來用
                window.location.href = "mailto:[e-mail]?subject=我沒有問題&body=您好, 我是" + name + ":%0D%0A" + message;
                return false;
            }
        </script>
        <!-- 呼叫email程式的語法:end -->
    </form>
</section>

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

7. 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`
8. 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

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

10. 幫瀏覽器分頁上的標題前面加上圖示

<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

> 如果要使用png, 需要指定圖片格式，例如:
> `<link rel="icon" type="image/png" href="http://example.com/image.png" />`
> jpg格式則是:
> `<link rel="icon" type="image/jpg" href="images/favicon.jpg">`

1. 將landing.html複製出多個檔案，然後更改檔名為:
- 地中海風.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>

> **補充:**
> 可以重網址列確認有沒有跳到剛剛改過的頁面檔名

#### 小練習
###### 幫網頁加上一顆可以點擊回到頁面最上面的按鈕
##### 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. 自行增加新的樣式

/* 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檔案也需要加上這新的樣式:

<section id="one" class="inside">
    <div class="inner">
        <header class="major2">
            <h2 class="inside">地中海風格設計理念</h2>
        </header>
        <p>文藝復興前的西歐，家具藝術經過浩劫與長時期的蕭條後，在9至11世紀又重新興起，並形成獨特的風格地中海式風格。地中海風格家具以其極具親和力田園風情及柔和色調和組合搭配上的大氣很快被地中海以外的大區域人群所接受。物產豐饒、長海岸線、建築風格的多樣化、日照強烈形成的風土人文，這些因素使得地中海具有自由奔放、色彩多樣明亮的特點，很快被地中海以外的大區域人群所接受。“地中海風格”對中國城市家居的最大魅力，來自其純美的色彩組合，及西班牙蔚藍色的海岸與白色沙灘。</p>
    </div>
</section>

2. 修改第二個區塊的顏色，且不影響到首頁的調整
採用新增class的方式來修改

.style-one {
    background-color: #125c1e;
    color: #2a2f4a;
}

.style-one .inner .major2 h2 {
    color: #37a6cb;
}

2. 要放Youtube影片的話，可以在Youtube影片上點右鍵，選擇「複製嵌入程式碼」，後去取代掉原本的img標籤；如果會影響版型可以試著也刪除img標籤外層不需要的標籤。
3. 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`屬性可以根據實際影片大小來調整成適合網頁的寬跟高。

## 2024-09-04
設定樣式的方式:
1. 方式1: tag
2. 方式2: class
3. 方式3: id

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  body {
    color: blue;
    font-weight: 1000;
  }

  article {
    color: brown;
  }  

  p {
    display: block;
    color: blueviolet;
    background-color: yellowgreen;
  }

  .ok {
    color: red !important;
  }

  #name {
    color: green;
  }

  .s1 {
    display: flex;
    width: 50px;
    height: 50px;
    background-color: aquamarine;
    margin: 2px;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    text-shadow: 2px 2px 3px white;
  }

  .row {
    display: flex;
    flex-direction: row;
  }

  .total {
    display: block;
    position: relative;
    width: 500px;
    height: 500px;
    background-color: blue;
  }

  .title {
    color: white;
  }

  .demo-absolute {
    position: absolute;
    bottom: 1px;
    right: 1px;
  }

  .fixed-btn {
    display: flex;
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 5px 5px 10px black;
  }

  span {
    display: block;
  }
</style>

<body>
  <a class="fixed-btn" href="https://www.google.com">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTZ8n89ogXN9muR_XvLt3MvA3BR8oCC0lwUCA&s" />
  </a>

  <h1>作品導覽</h1>
  <div class="total">
    <h1 class="title">CSS好有趣</h1>
    <div class="demo-absolute">
      <div class="row">
        <span class="s1">字</span>
        <span class="s1"></span>
        <span class="s1"></span>
      </div>
      <div class="row">
        <span class="s1"></span>
        <span class="s1"></span>
        <span class="s1"></span>
      </div>
      <div class="row">
        <span class="s1"></span>
        <span class="s1"></span>
        <span class="s1"></span>
      </div>
    </div>
  </div>


  <h1>大標題</h1>
  <article>
    <div>
      <p class="ok" id="name" style="color: pink;">文字1</p>
      <p>文字2</p>
      <p>文字3</p>
      <div>Hello</div>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK1</span>
      <span>OK2</span>
      <span>OK3</span>
    </div>
  </article>
  
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<style>
  body {
    color: blue;
    font-weight: 1000;
  }

  article {
    color: brown;
  }  

  p {
    color: blueviolet;
  }

  .ok {
    color: red !important;
  }

  #name {
    color: green;
  }
</style>

<body>
  <h1>大標題</h1>
  <article>
    <div>
      <p class="ok" id="name" style="color: pink;">文字1</p>
      <p>文字2</p>
      <p>文字3</p>
    </div>
  </article>
  
</body>
</html>

<!doctype html>
<html>
   <head>

   </head>

   <!-- 設定樣式用的標籤 -->
   <style>
    p {
      /* color: yellowgreen; */
      /* color: #FF00FF; */
      color: RGB(0, 255, 255);
    }

    h1 {
      color: red;
    }

    /* 這是一個叫 hello-css的class */
    .hello-css {
      color: lightcoral;
      background-color: darkcyan;

    }

    #my-id {
      /* font-size: 50px; */
      font-size: 5em;
      font-family: '新細明體';
      border: 1px dotted brown;
      width: fit-content;
    }

    .my-btn {
      font-family: '中黑體';
      font-size: 1.5em;
      padding: 10px;
      width: 150px;
      /* height: 150px; */
      background-color: blueviolet;
      color: azure;
      text-align: center;
      margin: 10px;
      border: 3px solid yellowgreen;
      border-radius: 10px;
      box-shadow: 5px 5px 15px black;
    }

    .my-btn:hover {
      background-color: brown;
      font-size: 1.7em;
    }

    .my-something {
      width: 50%;
      height: 300px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/ba/FushimiInari_Taisha_Corridor-of-Torii.jpg);
    }
   </style>
   
   <body>
      <h1>我的網站</h1>
      <div>我的網站<br /><strong>很<mark>厲害</mark></strong></div>
      <article>
        <h2 id="my-id">我的文章</h2>
        <h6>Aaron Ho</h6>
        <p>今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好</p>
        <p class="hello-css">今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好</p>

      </article>
      
      <div class="my-btn">按鈕</div>
      <div class="my-something"></div>

      <img width="50%" src="https://static.liontech.com.tw/ConsoleAPData/PublicationStatic/uplantravel_tw_b2c_travel/zh-tw/japan/_ModelFile/PrimaryVisual/770332/1091449b5d2242faacd44a4986254404.jpg">

      <br/>
      <a href="https://www.google.com" target="_blank">前往Google</a>

      <ul>
        <li>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
      </ul>

      <ol>
        <li>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
      </ol>


   </body>
</html>

## 2024-09-03

#### html範例
請記得存成index.html檔案

<!doctype html>
<html>
   <head>

   </head>


   <body>
      <h1>我的網站</h1>
      <div>我的網站<br /><strong>很<mark>厲害</mark></strong></div>
      <article>
        <h2>我的文章</h2>
        <h6>Aaron Ho</h6>
        <p>今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好</p>
        <p>今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好今天天氣真好</p>

      </article>

      <img width="50%" src="https://static.liontech.com.tw/ConsoleAPData/PublicationStatic/uplantravel_tw_b2c_travel/zh-tw/japan/_ModelFile/PrimaryVisual/770332/1091449b5d2242faacd44a4986254404.jpg">

      <br/>
      <a href="https://www.google.com" target="_blank">前往Google</a>

      <ul>
        <li>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
      </ul>

      <ol>
        <li>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
      </ol>


   </body>
</html>

### HTML語法規則

- 規則１：所有的HTML元素都有「開始」標籤和「結束」標籤，而該元素的內容放在兩個標籤內，例如：

  <開始標籤>元素內容</結束標籤>

> 雖然瀏覽器有時很聰明，當你沒有加上結束標籤時仍然可以正常顯示，但仍請保持正確的標籤規則。

- 規則二：如果該標籤內不需要元素內容，則稱為空標籤，可以將「開始」標籤與「結束」標籤簡寫為：

  <空標籤 />

- 規則三：巢狀標籤，HTML元素內可以標含其它元素，但必須將其完整包圍，也就是不可以將被包圍的元素的「結束」標籤放到包圍該元素的「結束」標籤下面，例如：

#### 正確：

  <article>
     <h1>文章</h1>
  </article>

#### 錯誤：

  <article>
     <h1>文章
  </article>
     </h1>

- 規則四：屬性，有些標籤需要透過屬性來設定其特殊功能，例如: `<a>`標籤為超連結標籤，需要透過`href`屬性來設定要前往的目的地，範例：

  <a href="https://www.google.com">前往Google首頁</a>

- 規則五：標籤名稱使用小寫英文，雖然這個規則不是強制的，也就是說HTML元素名稱並不會區分大小寫，<P>和<p>都是一樣的意義，但W3C仍建議HTML內全部使用英文小寫來作為標籤名稱，因為小寫英文字母會比大寫來的容易閱讀。

## HTML5元素

### HTML5新增的元素

HTML5新增了許多特定的語意標籤以支援網頁版面設計，用來取代了不具意義的div、span標籤，網頁設計師利用這些與義標籤建立具有明確架構定義的網頁，讓整個HTML的結構更有意義並且更容易被理解。

使用語意標籤來建立網頁版面(圖片來源：W3School)

#### header

網頁頁面的頂部，通常用來放置網站的主要標題、圖片與LOGO等主要的資訊。

#### hgroup

定義著一個區段或一份文件的標題，該元素是用來對 h1 到 h6 的標題群組化。其中最大的標題為區段的主要標題，其它則屬於次要標題。當標題擁有多個層級時，這個元素會被用來對 h1-h6 元素的集合做群組化。

#### nav

通常為網站的主要功能選單。

#### article

網頁中的一個內容區塊，是獨立且完整的內容，在一個網頁中可以有很多個。

#### aside

主要內容之外的其他內容，可以為網站的側邊欄。

#### section

用於內容等等段落的區分，在一個內容中可以有許多個。

#### figure & figcaption

figure用來作為一段獨立的引用區域，用來在網頁內容旁說明或展示獨立的內容，而figcaption用來作為設定該區域的標題。

#### footer

網頁下方，用來顯示網站相關資訊、著作權等等。

#### mark

文字高亮。

> - 完整的新增元素，可以參考W3C網站：https://www.w3schools.com/html/html5_new_elements.asp
> - 讓IE8以前（包含）IE8的瀏覽器支援新元素：https://www.w3schools.com/html/html5_browsers.asp
> - W3C建議的將舊網頁改為使用語意標籤：https://www.w3schools.com/html/html5_migration.asp

### HTML5保留的元素

| 標籤 | 說明 |
| :----------- | :------------------------------------------------- |
| \<!--..--> | HTML文件註解 |
| \<!DCOTYPE> | 定義HTML文件類型 |
| \<head> | 定義與網頁文件有關之資訊，其內容不會顯示在瀏覽器上 |
| \<body> | HTML主要內容最外層的元素 |
| \<abbr> | 定義縮寫文字 |
| \<address> | 定義內容為地址 |
| \<area> | 定義帶有可點擊影像地圖區域 |
| \<base> | 定義網頁中所URL的連接基準 |
| \<bdo> | 定義文字顯示方向 |
| \<blockquote> | 定義額外註解或較長的引文 |
| \<br> | 換行符號 |
| \<button> | 定義一個按鈕 |
| \<caption> | 定義一個表格標題 |
| \<cite> | 定義著作的標題 |
| \<dd> | 在列表中定義條目的定義 |
| \<div> | 定義網頁內的一個區塊（自動換行） |
| \<span> | 定義網頁內的一個區塊（不換行） |
| \<dl> | 用於一個列表的定義 |
| \<dt> | 用於一個項目的定義 |
| \<em> | 用於強調文字 |
| \<form> | 建立表單 |
| \<h1>~\<h6> | 定義標題文字，有１～６個等級 |
| \<input> | 定義一個可輸入的區域 |
| \<ins> | 定義為插入的文字 |
| \<del> | 定義為刪除的文字 |
| \<map> | 定義一個影像地圖的範圍 |
| \<object> | 定義一個嵌入物件 |
| \<ol> | 定義一個有數字順序的清單 |
| \<ul> | 定義一個無順序的清單 |
| \<li> | 定義一個表單的項目 |
| \<p> | 定義一個段落 |
| \<pre> | 定義一段非HTML格式的文字區塊 |
| \<select> | 定義一個下拉式選單 |
| \<textarea> | 定義一個文字輸入區域 |
| \<var> | 定義一個變數 |

> 完整HTML元素：https://www.w3schools.com/tags/

### HTML5保留下來但改變用法的元素

| 標籤 | 說明 | HTML4的用法 | HTML5的用法 |
| -------- | ---------------------------------------------- | ------------------------ | ------------------------------------------------------------ |
| \<a> | 定義內容為一個超連結 | 須有href=”#”屬性才能連結 | 該標籤永遠表示超連結，只是當沒有href的情況下，就只是一個佔位符號 |
| \<b> | 定義文章區塊以外的內容，通常用於內容相關的邊欄 | 表現粗體 | 除了表現粗體，其他特別但不太重要的內容，想要特別強調時 |
| \<hr> | 定義為音效內容 | 做為水平分隔線 | 更換段落主題時使用的水平分隔線 |
| \<i> | 定義網頁上的繪圖區塊 | 表現斜體 | 除了表現斜體，無重要資料的其他內容，但想要另外標示時使用 |
| \<menu> | 定義一個指令按鈕 | - | 定義複雜的選單或表單結構 |
| \<small> | 定義一個下拉式選單 | 表現較小字體 | 備註或是其他法律特殊字體需要小字時使用 |
| \<strong> | 定義一個元件的細項 | 表現較大字體 | 除了表現較大字體，也可標示重要資訊 |

### HTML5移除的元素

| 移除的元素 | 替代元素 |
| :--------- | :----------------- |
| \<acronym> | \<abbr> |
| \<applet> | \<object> |
| \<basefont> | CSS |
| \<big> | CSS |
| \<center> | CSS |
| \<dir> | \<ul> |
| \<font> | CSS |
| \<frame> | 無 |
| \<frameset> | 無 |
| \<noframes> | 無 |
| \<strike> | CSS, \<s>, or \<del> |
| \<tt> | CSS |

> - 資料來源為W3C網站：https://www.w3schools.com/html/html5_intro.asp
> - 雖然瀏覽器大都繼續支援這些被移除的標籤，但作一個為良好的HTML5網頁，請盡量不要再使用它們。

#### html5up樣板網站
https://html5up.net/

> 請下載forty:
> https://html5up.net/forty/download

#### 開發環境
https://code.visualstudio.com/
> 1. 使用google搜尋`visual studio code`後點擊第一筆搜尋結果。
> 2. 進入Visual Studio Code官網後點擊左方藍色按鈕下載安裝檔。
> 3. 安裝只要一直下一步即可完成安裝。
> 4. 前往VSCode內Extension功能搜尋「Chinese」中文化。

#### 樣板網站
https://html5up.net/
> 前往 https://html5up.net/ 下載Forty樣板。
> 確認樣板的授權: 英文網站可以以「License」相關字來找到樣版的授權。
> html5up網站提供的樣板授權可以用在「商業行為」及「任意修改」。
> 講下載的檔案解壓縮後放到合適的地放，路徑名稱盡量不要使用中文字，避免有些雲端主機對中文路徑支援不完整而找不到該網頁。

- 請下載`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|重新整理網頁|

1. 網頁的首頁檔名都會叫`index.xxx`，請勿修改首頁主檔名。
2. 回到Visual Stuio Code，透過「檔案」->「開啟資料夾」找到剛剛解壓縮的目錄來打開它；打開後VSCode左邊會出現網站的檔案清單。
3. 打開index.html並搜尋「Hi, my name is Forty」。
> 搜尋的快速鍵: Ctrl+F(Windows), CMD+F(MacOS)
4. 修改完後記得按Ctrl+S儲存檔案。
> 未存擋前，檔名標籤旁會是一個實心小圓，存擋後會變x
5. 回到瀏覽器除重新整理網頁確認剛剛修改的標題有成功。
6. WIN按鈕加左右方向鍵可以將視窗放到螢幕左邊或右邊。

#### 安裝Live Server延伸模組
安裝這個可以讓你儲存後，網頁會自董重新整理
1. 到延伸模組分頁搜尋Live Server
2. 點選畫面右下角的Go Live
3. 隨便修改網頁並存檔就可以看到網頁被重新整理

## 使用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為你的帳號名稱。

#### 補充
1. 修改repo名稱: settings分頁 -> General -> 第一個選項即為修改名稱
2. 將private改為public: settings分頁 -> General -> 捲動到最下面 -> Change Repository Visibility可以將private改為public, 反之也行
3. 刪除repo: settings分頁 -> General -> 捲動到最下面 -> Delete Repository
4. 如果有建立新的repo, 使用紫貓要clone時: Current Repository -> Add -> Clone Repository ->Refresh(才會出現新的repo) -> Clone
5. 要編輯網站，請透過紫貓首頁點選Open in Visual Code

16. html標籤的五個基本規則：
- 標籤都是成雙成對的「起始」＋「結束標籤」。
- 沒內容的標籤可以寫成空標籤。
- 標籤可以包圍其他標籤，但是標籤不可以交錯。
- html標籤和屬性名稱建議使用小寫，較容易閱讀。
- 標籤可以有屬性用來提供額外設定。