# 114135謝惠如網頁專題隨堂筆記
---
[老師的筆記(上)](https://hackmd.io/@iamfefe/HyiBBJsph)
[老師的筆記(下)](https://hackmd.io/@iamfefe/rkDw_zfn6)
---
### 自我介紹
- 我是資二一的謝惠如 :construction_worker:
- 平時的興趣是宅家畫畫、玩遊戲和聽音樂 :hand:
- 在班上擔任副班長，在社團(二次元研究社)裡是副社和美宣
- [個人自介網站](https://1141351.wixsite.com/my-site)
### 本學年在這堂課設定的自我目標
- 順利學會網頁設計相關的技巧
- 專題能做好
---
<h1 style="color:#545775 !important">一般快捷鍵專區</h1>
<h2 style="color:#718F94 !important">全螢幕截圖</h2>
- 開F12 :arrow_right:Ctrl+Shift+P:arrow_right:打full:arrow_right:完成5
<h2 style="color:#718F94 !important">圈選字</h2>
- Shift+方向鍵
<h2 style="color:#718F94 !important">搜尋關鍵字</h2>
- Ctrl+F
---
<h1 style="color:#545775;background-color:#BFC8AD !important">markdown語法練習 html</h1>
<h3 style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);color:#545775 !important">這麼好</h3>
<p style="color:#8dad63 !important">內文在這</p>
<hr>
## <h2 style="color:#718F94 !important">程式碼如下</h2>
```htmlembedded=
<h1 style="color:#545775;background-color:#BFC8AD !important">markdown語法練習 html</h1>
<h3 style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);color:#545775 !important">這麼好</h3>
<p style="color:#8dad63 !important">內文在這</p>
<hr>
```
<h2 style="color:#718F94 !important">筆記色票</h2>
<p style="color:#DBCFB0 !important">#DBCFB0</p>
<p style="color:#BFC8AD !important">#BFC8AD</p>
<p style="color:#90B494 !important">#90B494</p>
<p style="color:#718F94 !important">#718F94</p>
<p style="color:#545775 !important">#545775</p>
---
<h1 style="color:#545775 !important">codecombat 遊戲式網頁程式學習</h1>
---
<h1 style="color:#545775 !important">專題網頁UIUX設計</h1>
<h2 style="color:#718F94 !important">工作分配 / 個人貢獻度報告</h2>
- **<p style="color:#90B494 !important">114108陳易歆：部分排版、魚腥草寶寶角色設計、製作網站按鈕超連結、分頁介紹文</p>**
- **<p style="color:#90B494 !important">114126邱亞筑：繪製魚腥草寶寶、魚腥草寶寶角色設計、製作網站按鈕、分頁介紹文</p>**
- **<p style="color:#90B494 !important">114135謝惠如：網站頁面設計、魚腥草寶寶角色設計、製作網站超連結、分頁介紹文</p>**
<h2 style="color:#718F94 !important">製作心得</h2>
在這次的網頁頁面設計課程中，雖然有一天缺席去考檢定導致做到的按鈕工具大部分都由夥伴完成了，自己沒什麼做到這部分，但大家一起參與討論如何做網頁規劃才會更好、更貼近消費者需求，也漸漸讓專題實際了起來。雖然討論過程很漫長、製作也有些吃力，但也有有趣的地方，例如：大家一起討論吉祥物的名字、角色設定等等，是我以前沒有的經驗，希望能因為這次的經驗讓之後的專題製作之路更加順利。
<h2 style="color:#718F94 !important">製作畫面</h2>
<h2 style="color:#718F94 !important">網站網址+QRcode</h2>
https://reurl.cc/q0b6d3
<h1 style="color:#545775 !important">HTML語法</h1>
- html:5+tab 基本頁面
- tab 自動生成(?)語法
- 游標在字前面/選取 Shift+Alt+:arrow_down: 向下複製貼上此行
```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="123.JPG" />
<style>
body {
background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
}
h1 {
color: #003459;
}
h3 {
color: #d1fdff;
}
p {
color: #f7ff10;
}
</style>
</head>
<body>
<h1>我是大標123</h1>
<h2>我是大標123</h2>
<h3>我是大標123</h3>
<h4>我是大標123</h4>
<h5>我是大標123</h5>
<img src="https://picsum.photos/900/200" alt="" />
<hr />
<p>
Lorem ipsum, <br />dolor sit amet consectetur adipisicing elit.
Perspiciatis laudantium nemo porro cum qui, odit temporibus commodi non
quidem obcaecati hic. Laboriosam asperiores odit aspernatur tempora
deserunt maxime sequi aliquam. Nihil magni odit rerum provident unde!
Quisquam saepe nulla facilis expedita non! Perspiciatis, illo iure. Velit
natus exercitationem iusto numquam eos, ea eveniet. Nobis reiciendis
repellat, minima deserunt eaque quam. Quod beatae, voluptas eum
reprehenderit odit, consectetur exercitationem dolorem doloremque aperiam
amet sit nulla ipsa, temporibus asperiores placeat? Repellat blanditiis at
cupiditate adipisci vel iste, velit dolorum et nihil enim?
</p>
<hr />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis
laudantium nemo porro cum qui, odit temporibus commodi non quidem
obcaecati hic. Laboriosam asperiores odit aspernatur tempora deserunt
maxime sequi aliquam. Nihil magni odit rerum provident unde! Quisquam
saepe nulla facilis expedita non! Perspiciatis, illo iure. Velit natus
exercitationem iusto numquam eos, ea eveniet. Nobis reiciendis repellat,
minima deserunt eaque quam. Quod beatae, voluptas eum reprehenderit odit,
consectetur exercitationem dolorem doloremque aperiam amet sit nulla ipsa,
temporibus asperiores placeat? Repellat blanditiis at cupiditate adipisci
vel iste, velit dolorum et nihil enim?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis
laudantium nemo porro cum qui, odit temporibus commodi non quidem
obcaecati hic. Laboriosam asperiores odit aspernatur tempora deserunt
maxime sequi aliquam. Nihil magni odit rerum provident unde! Quisquam
saepe nulla facilis expedita non! Perspiciatis, illo iure. Velit natus
exercitationem iusto numquam eos, ea eveniet. Nobis reiciendis repellat,
minima deserunt eaque quam. Quod beatae, voluptas eum reprehenderit odit,
consectetur exercitationem dolorem doloremque aperiam amet sit nulla ipsa,
temporibus asperiores placeat? Repellat blanditiis at cupiditate adipisci
vel iste, velit dolorum et nihil enim?
</p>
<b>design by fefe</b>
<h3>產品特色</h3>
<ul>
<li>魚腥草</li>
<li>雞蛋</li>
<li>蔥油餅</li>
</ul>
<h3>寄送方式</h3>
<ol>
<li>郵寄</li>
<li>冷凍貨運</li>
<li>自取</li>
</ol>
</body>
</html>
```
## 1115語法練習心得
在這次學習html的語法課程，我學到了超級多快捷鍵能方便又快速的寫程式，也終於了解vs code的好用之處！而且和一年級的程式設計課的python語法相比，意外的感覺html語法其實挺有趣的。
Sign in with Wallet
Connect another wallet