<h1 style="color:#BEB7DF ! important">114329陳靖恩網頁專題筆記</h1>
#### [徐麗娟老師的網頁設計筆記(上學習)](https://hackmd.io/@iamfefe/HyiBBJsph) :smile::smile::smile:
#### [徐麗娟老師的網頁設計筆記(下學習)](https://hackmd.io/@iamfefe/rkDw_zfn6?utm_source=preview-mode&utm_medium=rec):smile::smile::smile:
#### [網頁設計作業繳交區](https://docs.google.com/spreadsheets/d/1US__Fw2cqb0hLLf-avOBH11V_eGIUT1bfT2skI4lX0M/edit?usp=sharing/) :innocent::innocent::innocent:
#### [個人介紹網站](https://11432903.wixsite.com/my-site/) :sunglasses::sunglasses::sunglasses:
---
<h1 style="color:#C6DEA6 ! important">自我介紹</h1>
我是陳靖恩:stuck_out_tongue_closed_eyes::stuck_out_tongue_closed_eyes::stuck_out_tongue_closed_eyes:
資料處理科 二年三班 29號
我的興趣是聽歌、追星，還有織毛線
個性安靜話不多、溫和且有團隊合作的精神
---
<h1 style="color:#C6DEA6 ! important">本學年在這堂課設定的目標</h1>
我希望在這學年學習網頁設計的過程中，我可已獲得除了有增強美感的能力外，還有能設計出一個網站具有推廣商品效果的能力 :muscle:
---
<h1 style="color:#C6DEA6 ! important">HTML語法練習1</h1>
<ulF12 > ctrl+shift+p > 打full
1. 按 shift + alt + 向下鍵 --> 複製選取物向下貼上
2. 按 ctrl + 游標 --> 可同時修改內容
3. class="w-100" --> 可調整圖片使之隨版面更改大小
4. container --> 一個容器 (div class="container")
5. row --> 一列 (div class="row")
---
<h1 style="color:#C6DEA6 ! important">HTML語法練習2</h1>
1. 打 html:5 按 tab鍵 --> 產生基本頁面
2. h1…h6 --> 標題
3. p --> 段落
4. lorem --> 假字
5. br --> 換行
6. pre --> 預設排版
7. a -->超連結
8. href -->放連結,或是#段落命名
9. target _self -->在同一個標籤頁跳轉
10. _blank --> 另開標籤頁
11. b --> 粗體
12. em --> 斜體
13. i --> 斜體
14. u --> 底線
15. span --> 段落裡的小片段
16. ul>li5 --> 項目符號
17. ol>li3 --> 項目編號
18. ctrl + / --> < !-- 註解 - - >，中間無空格，
19. table --> 表格
20. tr --> 列
21. td -->欄 (colspan跨欄,rowspan跨列)
22. img --> 圖片
23. div 盒子
程式內容如下:
```htmlembedded=
<h1>標題一</h1>
<h2>標題二</h2>
<p>內文內文內文內文內文內文內文內文內文內文內文</p>
```
---
<h1 style="color:#C6DEA6 ! important">字體及背景改顏色</h1>
<h3 style="color:#CCDBDC ! important">白灰色</h3>
<h3 style="color:#BEB7DF ! important">紫色</h3>
<h3 style="color:#C6DEA6 ! important">綠色</h3>
<h3 style="color:#89DAFF ! important">藍色</h3>
<h3 style="color:#F0A868 ! important">橘色</h3>
<h3 style="color:black;background-color:#CCDBDC;">白灰色</h3>
<h3 style="color:black;background-color:#BEB7DF;">紫色</h3>
<h3 style="color:black;background-color:#C6DEA6;">綠色</h3>
<h3 style="color:black;background-color:#89DAFF;">藍色</h3>
<h3 style="color:black;background-color:#F0A868;">橘色</h3>
---
<h1 style="color:#C6DEA6 ! important">獎金獵人</h1>
我們利用獎金獵人中的遊戲關卡，練習將上方學到的那些語法呈現出來
<img src="https://hackmd.io/_uploads/HkJvGGUzT.png">
---
<h1 style="color:#C6DEA6 ! important">HTML[Visual Studio Code]練習11/22</h1>Html
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>餡滿紅豆</title>
<link rel="icon" href="logo.png" />
<style>
* {
transition: all 1s ease;
}
body {
background-color: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
h1 {
color: #deb887;
text-shadow: 5px 5px 5px gray;
}
h3 {
color: rgba(222, 184, 135, 20);
}
/* 位移練習 */
h1:hover {
color: gainsboro;
font-size: 50pt;
}
img:hover {
margin-left: 100px;
border: 5px solid rgb(128, 220, 226);
box-shadow: 10px 10px 10px gray;
}
table {
border: 3px solid black;
}
td {
width: 200px;
}
</style>
</head>
<body>
So tired!
<h1>我是大標題</h1>
<h2>我是大標題</h2>
<h3>我是大標題</h3>
<h4>我是大標題</h4>
<h5>我是大標題</h5>
<h6>我是大標題</h6>
<h1 id="home">紅豆餅介紹</h1>
<img src="https://picsum.photos/600/200" alt="" />
<hr />
<p>
Lorem ipsum <br />
dolor sit amet, consectetur adipisicing elit. Fugit quidem architecto
veniam repellendus dolores accusamus quia modi enim voluptate repudiandae,
reprehenderit, doloribus, neque odit qui eius libero. Fugiat, eum
cupiditate! Earum aspernatur quas, quasi obcaecati modi sint quidem itaque
voluptas totam ad consequatur dolorum necessitatibus illum saepe corrupti
dolorem doloribus assumenda quaerat quia magni at ipsa distinctio
reiciendis. Inventore, ea? Ex accusantium sit, voluptatem quis nam ab et
iusto quasi ea error. Saepe tempore culpa ea, illo blanditiis reiciendis.
Corporis voluptatum quod quasi ducimus veniam architecto ad? Culpa, non
perferendis?
</p>
<p>
Lorem ipsum <br />
<i>
dolor sit amet, consectetur adipisicing elit. Fugit quidem architecto
veniam repellendus dolores accusamus quia modi enim voluptate
repudiandae, reprehenderit, doloribus, neque odit qui eius libero.
Fugiat, eum cupiditate! Earum aspernatur quas, quasi obcaecati modi sint
quidem itaque voluptas totam ad consequatur dolorum necessitatibus illum
saepe corrupti dolorem doloribus assumenda quaerat quia magni at ipsa
distinctio reiciendis. Inventore, ea? Ex accusantium sit, voluptatem
quis nam ab et iusto quasi ea error. Saepe tempore culpa ea, illo
blanditiis reiciendis. Corporis voluptatum quod quasi ducimus veniam
architecto ad? Culpa, non perferendis?
</i>
</p>
<p>
Lorem ipsum <br />
<u>
dolor sit amet, consectetur adipisicing elit. Fugit quidem architecto
veniam repellendus dolores accusamus quia modi enim voluptate
repudiandae, reprehenderit, doloribus, neque odit qui eius libero.
Fugiat, eum cupiditate! Earum aspernatur quas, quasi obcaecati modi sint
quidem itaque voluptas totam ad consequatur dolorum necessitatibus illum
saepe corrupti dolorem doloribus assumenda quaerat quia magni at ipsa
distinctio reiciendis. Inventore, ea? Ex accusantium sit, voluptatem
quis nam ab et iusto quasi ea error. Saepe tempore culpa ea, illo
blanditiis reiciendis. Corporis voluptatum quod quasi ducimus veniam
architecto ad? Culpa, non perferendis?
</u>
</p>
<b>design by Cindy</b>
<hr />
<h3>特色產品</h3>
<!-- 符號選項練習 -->
<ul>
<li>魚腥草</li>
<li>雞蛋</li>
<li>蔥油餅</li>
</ul>
<h3>寄送方式</h3>
<ol>
<li>郵寄</li>
<li>冷凍貨運</li>
<li>自取</li>
</ol>
<a href="https://www.google.com.tw/?hl=zh_TW" target="_blank">Google</a>
<a href="mailto:114329@clvsc.tyc.edu.tw">寫信給陳靖恩</a>
<a href="#home">回首頁</a>
<table>
<tr>
<td>班級</td>
<td>座號</td>
<td>姓名</td>
<td>成績 </td>
</tr>
<tr>
<td>423</td>
<td>29</td>
<td>陳靖恩</td>
<td>100</td>
</tr>
<tr>
<td>423</td>
<td>36</td>
<td>劉亭妤</td>
<td>100</td>
</tr>
<tr>
<td>423</td>
<td>37</td>
<td>劉栩晴</td>
<td>100</td>
</tr>
<table>
<tr>
<td colspan="3">測試</td>
<td>測試</td>
<td>測試</td>
<td>測試</td>
</tr>
<tr>
<td>測試</td>
<td>測試</td>
<td>測試</td>
<td>測試</td>
<td>測試</td>
<td rowspan="2">測試</td>
</tr>
<tr>
<td>測試</td>
<td>測試</td>
<td>測試</td>
<td>測試</td>
<td>測試</td>
</tr>
</table>
</body>
</html>
```
---
<h1 style="color:#C6DEA6 ! important">HTML[Visual Studio Code]練習11/23</h1>Html
```htmlembedded=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>餡滿紅豆官網</title>
<style>
* {
transition: all 0.5s ease;
}
body {
background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
nav {
width: 80%;
height: 100px;
background-color: white;
}
nav ul {
display: flex;
justify-content: center;
}
nav li {
width: 200px;
height: 50px;
background-color: rgb(233, 200, 150);
list-style: none;
border-radius: 20px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 5px;
filter: blur(1px);
}
nav li:hover {
transform: scale(2) rotate(20deg);
filter: blur(0px);
}
#aaa {
background-color: #e2d1c3;
}
.bbb {
background-color: #e2d1c3;
}
</style>
</head>
<body>
<heaser>
<nav>
<ul>
<li>選單1</li>
<li>選單2</li>
<li>選單3</li>
<li>選單4</li>
<li>選單5</li>
</ul>
</nav>
</heaser>
<!-- 選單一內容 -->
<section>
<img src="https://picsum.photos/seed/picsum/500/200" id="aaa" />
</section>
<!-- 選單二內容 -->
<section>
<img src="https://picsum.photos/seed/picsum/500/200" alt="" />
</section>
<!-- 選單三內容 -->
<section>
<img src="https://picsum.photos/seed/picsum/500/200" class="bbb" />
</section>
<!-- 選單四內容 -->
<section></section>
<!-- 選單五內容 -->
<section></section>
<footer></footer>
</body>
</html>
```
---
<h1 style="color:#C6DEA6 ! important">學習心得</h1>
在這學期學習製作網頁及專題的過程中，我們一開始花在專題的資料蒐集及網頁的整個設計概念上的時間還滿久的，我們有用figma先製作出網站的雛型，接著我們有趣實地取財，讓我們的專題內容可以不那麼天馬行空，可以有實際的東西產出。
而我們到了接近學期末時，我們開始真正的製作一個從無到有的網頁，我覺得這對我來說還滿困難的，因為我對於這種需要以語法、程式來完成的東西，我可能還需要慢慢去了解。
期待下學期能學到更多的東西，並且期待我的網頁設計能力能更上一層樓。
---
<h1 style="color:#DDA0DD ! important">下學期開始~~~</h1>
Sign in with Wallet
Connect another wallet