# 2024健行科技大學室內設計班（ㄧ） 作品導覽網站筆記
###### tags: `2024` `綠建築室內設計實作班`
## 目錄
- [第一天(6/17)](#第一天(6/17))
- [第二天(6/18)](#第二天(6/18))
- [第三天(6/19)](#第三天(6/19))
- [第四天(6/20)](#第四天(6/20))
- [第五天(6/21)](#第五天(6/21))
- [第六天(8/12)](#第六天(8/12))
## 第六天(8/12)
下載個人履歷網頁樣板: https://templateflip.com/templates/creative-cv/
### 個人網站開發
##### /css/main.css
#### 1106行，修改社群按鈕背景色顏色
```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: #707; /* aaron:社群按鈕背景色 */
color: #FFFFFF; }
```
#### 1126行，社群按鈕滑鼠懸浮時背景色
```css=
.navbar .navbar-nav > a.btn.dropdown-toggle:hover {
background-color: #972297; /* aaron:社群按鈕滑鼠懸浮時背景色 */
color: #FFFFFF;
box-shadow: none; }
```
#### 1263行，按鈕滑鼠移上去的顏色
```css=
.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; }
```
#### 2041行，專長進度列的未滿情況下的背景色
```css=
.progress-container.progress-primary .progress {
background: rgba(155, 40, 163, 0.4); } /* aaron:專長進度列的未滿情況下的背景色 */
```
#### 2323行，網站基礎文字大小
```css=
body {
color: #2c2c2c;
font-size: 18px; /* aaron:網站基礎文字大小 */
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased; }
```
> **補充:**
> 網頁內如果出現em大小單位，則代表為網站基礎大小乘以em後的大小。
#### 2523行，修改上方選單文字大小
```css=
.navbar .navbar-nav .nav-link:not(.btn) {
text-transform: uppercase;
font-size: 1.2em; /* aaron: 修改上方選單文字大小 */
padding: 0.5rem 0.7rem;
line-height: 1.625rem; }
```
#### 3839行，banner第二層遮罩
```css=
.page-header:before {
background-color: rgba(0, 0, 0, 0.5); /* aaron:banner第二層遮罩 */
}
```
#### 5129行，banner遮罩
```css=
/* Profile Page Background Style */
.page-header {
/* aaron:banner遮罩 */
/* 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:banner遮罩 */
background: linear-gradient(0deg, rgba(144, 44, 44, 0.4), rgba(155, 130, 63, 0.5), rgba(155, 30, 163, 0.4));
/* Standard syntax */ }
```
#### 5161行，大頭照光暈顏色
```css=
.cc-profile-image a:before {
content: "";
border: 15px solid rgba(155, 0, 163, 0.6); /* aaron:大頭照光暈顏色 */
border-radius: 50%;
height: 180px;
width: 180px;
position: absolute;
left: 0;
-webkit-animation: pulsate 0.6s ease-in;
animation: pulsate 0.6s ease-in;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
opacity: 0.0;
z-index: 99; }
```
### index.html
#### 聯絡我區塊地發送email(730行)
```html=
<form action="#" method="POST" onsubmit="return mailto()">
<div class="p pb-3"><strong>Feel free to contact me </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="Name"
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="Subject"
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-envelope"></i></span>
<input class="form-control" type="email" name="email" placeholder="E-mail"
required="required" />
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Your Message"
required="required"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary">Send</button>
</div>
</div>
<!-- 呼叫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:xxxxxxxxxx@gmail.com?subject=我沒有問題&body=您好, 我是" + name + ":%0D%0A" + message;
return false;
}
</script>
<!-- 呼叫email程式的語法:end -->
</form>
```
> **注意:**
```html=
name = document.getElementsByName('name')[0].value; // 把使用者輸入的名稱拿出來用
email = document.getElementsByName('email')[0].value; > 把使用者輸入的email拿出來用
message = document.getElementsByName('message')[0].value.replaceAll('\n', '%0D%0A'); // 把使用者輸入的內容拿出來用
```
這三行的`name`必須對應上面三個`input`的name屬性名稱，否則會召喚outlook失敗
```html=
...
<input class="form-control" type="text" name="name" placeholder="Name" required="required" />
...
<input class="form-control" type="email" name="email" placeholder="E-mail" required="required" />
...
<textarea class="form-control" name="message" placeholder="Your Message" required="required"></textarea>
```
## 第五天(6/21)
#### 使用animate幫元素加上動畫
官網: https://animate.style/
#### 第一步: 引入animate.css
```html
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
```
將引入animate.css的`<link>`標籤加入`<head>標籤內
#### 第二步: 在想要有動畫的標籤上`animate__animated`
#### 第三部: 加上動畫名稱的css
```html=
<!-- Banner -->
<section id="banner" class="major">
<div class="inner">
<header class="major">
<h1 class="animate__animated animate__fadeInLeft">Hi, my name is Forty</h1>
</header>
<div class="content">
<p class="animate__animated animate__rotateIn animate__infinite">A responsive site template designed by HTML5 UP<br />
and released under the Creative Commons.</p>
<ul class="actions">
<li><a href="#one" class="button next scrolly">Get Started</a></li>
</ul>
</div>
</div>
</section>
```
#### 新增一顆可以回到網頁上方的按鈕
##### index.html
```html=
<!-- <a href="#footer" class="back-btn">🢁</a> -->
<a href="#footer" class="back-btn"><img class="back-img" src="images/cat.jpg" /></a>
```
`a`標籤的href屬性，如果是`#`開頭，代表他可以讓網頁捲動到該名字的`id`標籤位置。
##### cat.jpg
> 照片必須放在images目錄下
##### main.css
```css=
.back-btn {
position: fixed; /* 將元素設定成固定位置，會固定在網頁畫面的某個地方 */
right: 50px; /* 元素的位置要離畫面右邊多遠 */
bottom: 50px; /* 元素的位置要離畫面下面多遠 */
z-index: 10; /* 元素的圖層位置 */
border-bottom: 0; /* 去掉下面出現的底線 */
background-color: brown; /* 元素顏色 */
width: 50px; /* 元素寬度 */
height: 50px; /* 元素高度 */
border-radius: 50px; /* 讓元素變成圓形 */
display: flex; /* 元素的顯示模式 */
justify-content: center; /* 水平置中 */
align-items: center; /* 垂直置中 */
box-shadow: 2px 2px 10px 1px #242943; /* 陰影*/
font-size: 1.2em; /* 文字大小 */
overflow: hidden; /* 讓元素裏頭的圖片不要超出範圍 */
}
.back-img {
width: 100%;
height: 100%;
}
```
## 第四天(6/20)
1. 將landing.html複製出多個檔案，然後更改檔名為:
- 地中海風.html
- 工業風.html
- 現代風.html
- 古典風.html
- 北歐風.html
> **補充:**
> 因為首頁不同的色快點擊後目前都會切換到同一個網頁，如果要切換到不同網頁，必須要有不同的html檔案。
2. 70行，將a超連結標籤的href屬性值設定成要連結的檔案名稱
```html=
<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. 自行增加新的樣式
```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=
<!-- 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`屬性可以根據實際影片大小來調整成適合網頁的寬跟高。
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=
<!-- 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/`目錄下
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`內）。
## 第三天(6/19)
## 修改樣板
#### 第2524行，修改首頁下方按鈕文字大小
```css=
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行新增下面的樣式:
```css=
.my-color {
color: yellow; /* aaron:自行新增樣式設定首頁下方區塊的標題顏色 */
}
```
在index.html 123加上my-color的class
```html=
<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行
```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%;
}
```
#### 首頁下方區塊背景顏色
3959行新增下面樣式
```css=
#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的範例如果為:
```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;
}
```
#### 發送郵件
檔案: index.html
行號138行, 和 161行左右
```html=
<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:xxxxxxxxxx@gmail.com?subject=我沒有問題&body=您好, 我是" + name + ":%0D%0A" + message;
return false;
}
</script>
<!-- 呼叫email程式的語法:end -->
</form>
</section>
```
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"> <!-- 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">`
## 第二天(6/18)
###### main.css
```css=
h1 {
color: #44baf0;
}
/* class */
.test {
color: rebeccapurple;
}
#andy {
color: goldenrod;
}
.apple {
color: brown !important;
}
```
###### aaron.html
```html=
<!DOCTYPE html>
<html>
<head>
<!-- 註解 -->
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- 網頁要顯示的東西都放在這裡 -->
<!-- inline css -->
<h1 class="test apple" id="andy" style="color: pink;">顏色樣式示範</h1>
<h1>顏色樣式示範</h1>
<h1>顏色樣式示範</h1>
<h1>顏色樣式示範</h1>
<h1>顏色樣式示範</h1>
<h1 style="color: #ad6a6c">Aaron的室內設計</h1>
<header style="font-size:2em;color:#e5ede6;background-color:hotpink">這是一篇文章標題</header>
<h3 style="font-family: Berlin Sans FB"><span style="font-size: 1.5em">作者:</span> Aaron Ho</h3>
<h6>日期: 2024-06-18</h6>
<p>文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容</p>
<p>文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容</p>
<p>文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容</p>
<img style="width: 40%;height:280px;object-fit:cover" src="sendaiginzan.jpg" />
<img style="width: 40%;height:280px;object-fit:cover" src="仙台遺跡.jpg" />
<h4>如何去仙台?</h4>
<ul>
<li>有錢買機票</li>
<li>有假可以放</li>
</ul>
<a href="https://www.yahoo.com.tw">前往我的部落格</a>
</body>
</html>
```
#### 註解的方式:
##### html
```
<!-- 這是註解 -->
```
##### css
```
/* 這是註解 */
```
#### css優先權
由低到高:
1. 外部檔案, 以標籤名稱設定
2. 外部檔案, 以class名稱設定(名稱前面有一點)
3. 外部檔案, 以id名稱設定(名稱前面有#號)
4. 直接在html標籤內用style屬性設定css
5. 在樣式名稱後面，使用`!important`關鍵字
#### 修改樣板
##### 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:修改色塊的顏色 */
}
```
6. 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%;
}
```
7. 2767行，色塊上標題的文字大小和顏色
```css=
.tiles article h3 {
font-size: 1.75em; /* aaron:調整色塊的標題文字大小 */
color: #c5e31a; /* aaron:調整色塊的標題文字顏色 */
}
```
8. 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;
}
```
9. 獨立設定每個色塊的標題, 副標題和槓槓的顏色
```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;
}
```
10. 再不同解析度切換不同圖片
```css=
@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");
}
}
```
## 第一天(6/17)
#### 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標籤和屬性名稱建議使用小寫，較容易閱讀。
- 標籤可以有屬性用來提供額外設定。
16. html標籤清單: https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element
> 或是前往w3school學習html基礎: https://www.w3schools.com/html/html_basic.asp
#### 一個簡單的HTML範例:
aaron.html
```html=
<!DOCTYPE html>
<html>
<head>
<title>我的室內設計</title>
</head>
<body>
<h1>大標題</h1>
<img src="https://www.galilee.com.tw/Page/ThemeData_Pic/hash_adad2b7de3681cfaf818afca465b0cf9_1920_10000.jpg"></img>
<P>asdjfljasdlfjaldsjflafjdfldalfd</P>
<p>asdjfljasdlfjaldsjflafjdfldalfd</p>
<a href="https://www.yahoo.com.tw">這是一個可以前往Yahoo的網址</a>
</body>
</html>
```
## 關於HTML
https://hackmd.io/@aaronlife/html
Sign in with Wallet
Connect another wallet