# 114103吳承誼:flushed:
[老師的筆記](https://hackmd.io/@iamfefe)
---
- 自我介紹
:::info
我叫做吳承誼，在班上擔任實習股長，做事謹慎小心，在班上常常負責一些股長的工作，被班導稱為最認真的股長
:::
[我的頻道](https://youtube.com/@WuYiYi?feature=shared)
---
- 本學年在這堂課設定的目標
:::info
我希望我能夠在這堂課程裡，除了學期到基本網頁設計的能力以外，==也可以學習到一些特殊進階的一些技術==，能夠順利的產出一份好的專題!:flushed:
:::
---
全螢幕網頁截圖
1. F12
2. Ctrl + Shift + P
3. 在窗口打上full
4. 點擊==Screenshot==
---
[自我介紹的網頁](https://)
> <h1 style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);color:white !important">HTML語法練習</h1>
> <h1 style="color: #F47BB0 !important">我是大標題1</h1>
> <h3 style="color: white;background-color:green;">我是小標題3</h3>
> <p style="color:pink;background-color:blue;">這裡是內文</p>
```htmlembedded=
<h1>HTML語法練習</h1>
<h1>我是大標題1</h1>
<h3>我是小標題3</h3>
<p>這裡是內文</p>
<hr>這是水平線
<h1 style="color: blue !important">HTML語法練習</h1>
<h1 style="color: #F47BB0 !important">我是大標題1</h1>
<h1 style="background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);color:white !important">漸層配色</h1>
```
<hr>
> <h3 style="color: #FFA200 !important">筆記配色色碼#FFA200</h1>
> <h3 style="color: #FF5E00 !important">筆記配色色碼#FF5E00</h1>
> <h3 style="color: #FF8AAF !important">筆記配色色碼#FF8AAF</h1>
> <h3 style="color: #A98AFF !important">筆記配色色碼#A98AFF</h1>
> <h3 style="color: #8A92FF !important">筆記配色色碼#8A92FF</h1>
<hr>
[靈感1網站](https://toward.studio/)
[靈感2網站](https://zulu.longines.com/?ref=cssline.com)
[靈感3網站](https://studio-size.com/?ref=cssline.com)
<h2 style="color: #F47BB0 !important">專題網頁UIUX設計(標題)</h2>
>
## 昀澤田園有機風華
<h2 style="color: #F47BB0 !important">工作分配/個人貢獻程度</h2>
#### 田皓洋：製作商品簡介、美編、雞蛋寶的介紹詞
#### 吳承誼：製作主頁面、魚腥草寶寶介紹詞、各種按鈕超連結
#### 徐敬崴：製作按鈕動畫、排版調整
<h2 style="color: #F47BB0 !important">心得</h2>
#### 從這次的專題課程，我發現了許多
```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="魚腥草寶寶大頭照.png" />
<style>
/* 這裡是條文字的顏色 */
body * {
transition: all 1s ease;
}
{
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
h1 {
color: #FFA200 "
}
h2 {
color: rgb(123, 111, 255) ;
text-shadow: 0.5px 0.5px 20px blue ;
}
h3 {
color: rgba(150, 250, 11);
}
h1:hover {
color: bisque;
}
img:hover {
margin-left: 50pt;
border: 10pt dashed red;
box: text-shadow 1pt 2px rgba(255,255,0);
}
</style>
</head>
<body>
<!-- 這裡是標題 -->
Hello 徐敬崴
<h1 id="home">我是大標題1</h1>
<h2>我是大標題2</h2>
<h3>我是大標題3</h3>
<h4>我是大標題4</h4>
<h5>我是大標題5</h5>
<h6>我是大標題6</h6>
<h1>昀澤介紹</h1>
<img src="https://picsum.photos/900/200" alt="" />
<p>
<b>Lorem ipsum</b> <br />dolor sit amet consectetur adipisicing elit.
Totam voluptates consequatur suscipit voluptate perspiciatis pariatur?
Unde iusto repellat optio perferendis fugit quis quia, numquam quod quo
perspiciatis iste beatae eius. Sunt reiciendis nostrum maxime rerum
doloribus odio excepturi maiores, ratione veniam aliquid, repellendus
enim? Saepe reprehenderit, praesentium molestias nesciunt quos deleniti
rem fuga velit perferendis fugit ducimus quaerat a ea. Ad voluptates unde
eos velit quisquam, officia exercitationem voluptatibus est laborum illo
explicabo totam perspiciatis! Omnis temporibus officia mollitia illum
similique. Commodi amet totam debitis, a perferendis voluptatum veritatis
dolor?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam voluptates
consequatur suscipit voluptate perspiciatis pariatur? Unde iusto repellat
optio perferendis fugit quis quia, numquam quod quo perspiciatis iste
beatae eius. Sunt reiciendis nostrum maxime rerum doloribus odio excepturi
maiores, ratione veniam aliquid, repellendus enim? Saepe reprehenderit,
praesentium molestias nesciunt quos deleniti rem fuga velit perferendis
fugit ducimus quaerat a ea. Ad voluptates unde eos velit quisquam, officia
exercitationem voluptatibus est laborum illo explicabo totam perspiciatis!
Omnis temporibus officia mollitia illum similique. Commodi amet totam
debitis, a perferendis voluptatum veritatis dolor?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam voluptates
consequatur suscipit voluptate perspiciatis pariatur? Unde iusto repellat
optio perferendis fugit quis quia, numquam quod quo perspiciatis iste
beatae eius. Sunt reiciendis nostrum maxime rerum doloribus odio excepturi
maiores, ratione veniam aliquid, repellendus enim? Saepe reprehenderit,
praesentium molestias nesciunt quos deleniti rem fuga velit perferendis
fugit <i>ducimus quaerat</i> a ea. Ad voluptates unde eos velit quisquam,
officia exercitationem voluptatibus est laborum illo explicabo totam
perspiciatis! Omnis temporibus officia mollitia illum similique. Commodi
amet totam debitis, a perferendis voluptatum veritatis dolor?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam voluptates
consequatur suscipit voluptate perspiciatis pariatur? Unde iusto repellat
optio perferendis fugit quis quia, numquam quod quo perspiciatis iste
beatae eius. Sunt reiciendis nostrum maxime rerum doloribus odio excepturi
maiores, ratione veniam aliquid, repellendus enim? Saepe reprehenderit,
praesentium molestias nesciunt quos deleniti rem fuga velit perferendis
fugit ducimus quaerat a ea. Ad voluptates unde eos velit quisquam, officia
exercitationem voluptatibus est laborum illo explicabo totam perspiciatis!
Omnis temporibus officia mollitia illum similique. Commodi amet totam
debitis, a perferendis voluptatum veritatis dolor?
</p>
<h3>特色產品</h3>
<ul>
<li>魚腥草</li>
<li>雞蛋</li>
<li>蔥油餅</li>
</ul>
<h3>寄送方式</h3>
<ol>
<li>郵寄</li>
<li>冷凍貨運</li>
<li>自取</li>
</ol>
<!-- 這裡是最後面 -->
<b>Design by Fefe</b>
<a href="https://tw.yahoo.com/" target="_blank">連結到Yahoo </a>
<a href="mailto:114103@clvsc.tyc.edu.tw">寫信給Nasa</a>
<a href="#home">回首頁</a>
</body>
</html>
```
<h1 style="color: #F47BB0 !important"> 1115學習進度</h1>
我學到了標題的打法還有更改顏色，並且改背景跟改網頁Tittle還有iCon，loren假字的產生，還有假圖的產生，這讓我了解到原來一個網頁的標題和iCon，是從這邊更改的，我也發現到一個網頁的標題和iCon是非常重要的，因為他是在一個瀏覽器的最上方，如果視窗縮小的話，就只會顯示出iCon而已，因此iCon對於一個網頁是非常重要的。
<h1 style="color: #F47BB0 !important">專題比賽</h1>
<h2>雲創盃智慧生活創新應用競賽入圍</h2>
專題剛開始製作的時候，由於是第一次製作，也是第一次接觸，我們這組起步時就遇到大難關，因為沒有一個好的方向讓我們前進，後來老師讓我們用不同的層面去研究討論，我們這組後來決定以解決知名度不足的問題為目標，然而企畫書撰寫完成之後，前前後後讓國文老師修改了將近十次，既然作品還沒做出來，好歹文字要好看且順暢，才會吸引評審老師們的目光，因此我們的文詞十分的華麗且通暢，於是就這樣投稿出去了，但因為才剛開始接觸專題接近兩個月的時間而已，我們對於得獎沒有抱太大的希望，結果結局十分的意外和驚喜，我們組別居然進入決賽了！11/11當天要前往雲林科技大學參加決賽，需要作品展出和報告，因此我們在不到兩周的時間將報告、簡報、作品(魚腥草寶寶Vtuber、雞蛋寶Vtuber、網頁、電子書)，也成功順利地前往雲林科技大學參加決賽，我們十分的緊張，畢竟第一次做專題第一個投的比賽就進入決賽，旗開得勝對於我們來說是件好事，比賽過程中我們不抱著得名的經驗，單純去觀摩其他學校的作品，我們也和其他學校進行交流，這趟雲創杯的比賽真的十分的值得！
<h2> 0111學習進度 </h2>
<h2 style="color: #F47BB0 !important">上方按鈕導覽列</h2>
```htmlembedded=
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link gogo" href="#FFF">主頁 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link gogo" href="#UUU">影音資訊</a>
</li>
<li class="nav-item">
<a class="nav-link gogo" href="#J">吉祥物</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">商品資訊</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<div class="dropdown-divider"></div>
<a class="dropdown-item gogo" href="#XDXD">(╯°□°）╯︵ ┻━┻</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link gogo" href="#ABC">關於我們</a>
</li>
</ul>
```
<h2 style="color: #F47BB0 !important">主頁五張相片循環</h2>
```htmlembedded=
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/51272_0 (2).jpg" alt="First slide">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/51236_0.jpg" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/51234_0.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/51204_0.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/51222_0.jpg" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
```
<h2 style="color: #F47BB0 !important">影音資訊(插入超連結連至影片)</h2>
```htmlembedded=
<div class="container">
<div class="col-lg-4">
<ul class="list-unstyled">
<li class="media">
<img class="mr-3" src="images/thumbnail_1280X720.jpg" width="166.6" height="125" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1"></h5>
這是我們的介紹影片
</li>
<li class="media">
<img class="mr-3" src="images/thumbnail_1280X720 (2).jpg" width="166.6" height="125" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0 mb-1"></h5>
這是雞蛋寶的介紹影片
</div>
</li>
</ul>
</div>
</div>
</div>
```
<h1 style="color: #F47BB0 !important">商品介紹(雞蛋)</h1>
```htmlembedded=
<div class="row text-center">
<div class="col-md-4 pb-1 pb-md-0">
<div class="card">
<img class="card-img-top" src="images/螢幕擷取畫面 2024-01-04 141016.png" alt="Card image cap">
<div class="card-body">
<h5 class="">雞蛋</h5>
<p class="card-text">NT：125/每盒10顆</p>
<a href="" class="btn btn-primary">加入購物車</a>
</div>
</div>
</div>
```
<h1 style="color: #F47BB0 !important">雞蛋寶圖片(尺寸調整設定)</h1>
```htmlembedded=
<img class="mr-3" src="images/eeeeee.png" width="200" height="200" alt="雞蛋寶">
<div class="row">
<h5 class="mt-0 mb-1">雞蛋寶</h5>
```
<h1 style="color: #F47BB0 !important">底下的連結</h1>
```htmlembedded=
<li class="btn-link"> <a target="_blank" href="https://www.facebook.com/YunZeOrganicFarm/">昀澤有機農場官方FaceBook</a> </li>
<li class="btn-link"> <a target="_blank" href="https://www.youtube.com/@user-jx6vx2nk1z/channels">昀澤有機農場官方Youtube頻道</a> </li>
<li class="btn-link"> <a target="_blank" href="https://www.danongnet.com/collections/%E9%99%B3%E7%8F%8A%E5%AE%87-%E6%98%80%E6%BE%A4%E8%BE%B2%E5%A0%B4-%E6%98%80%E6%BE%A4%E7%95%9C%E7%89%A7%E5%A0%B4">昀澤有機農場-大農網</a> </li>
<li class="btn-link"> <a target="_blank" href="https://maps.app.goo.gl/pomkKC2mHrss7odb9">昀澤有機農場-Google Map</a> </li>
<li class="btn-link"> <a target="_blank" href="https://www.gogofinder.com.tw/gogofinderReader/index.php?bid=11387">電子書</a> </li>
```
<h1 style="color: #F47BB0 !important">CSS改字型、字體大小、字體顏色</h1>
```htmlembedded=
body {
background-image: url("images/123.png");
background-size: cover;
margin: 0;
font-family: Microsoft JhengHei, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
font-weight: bold;
line-height: 1.5;
color: #661D0B;
text-align: left;
}
```
<h1 style="color: #F47BB0 !important">112上學期結束心得</h1>
<h3>過一學期的網頁設計，一週四節課的學習，我發現一開始覺得網頁語法很難，現在一個學期結束了，覺得比一開始完全不懂的狀態下來說，其實網頁語法好懂很多，彈性也很大，一串程式碼只要放在對的位置上就好，不需要去在意他的位置，也是因為這樣子讓我覺得語法有時候看不太懂，div的格子對我來說也是很難理解，但是經過雲創杯和這次期末的專題網頁修改來說，其實我已經漸漸的學起來了， 並非我想像中的複雜，客服心中的那塊陰影之後，什麼事情都覺得簡單起來了，身為一個組長我也成功的帶領我的組員們，完成了這一個學期的任務，不僅是雲創杯得名讓我們覺得專題很成功，而是過程，一份報告書前前後後交給國文老師修改的次數，遠遠大於其他組別，即便最後結果不夠理想，但我們很享受其中的過程，成果並非一切，過程才是最重要的，我們三人努力的結晶，即便沒有得到優良的名次，但在我們心中，都是一個非常卓越的成果！</h3>
<h1 style="color: #F47BB0 !important">112下學期專題網站</h1>
<h1>
這是h1
</h1>
<h2>
這是h2
</h2>
<h3>
這是h3
</h3>
<h4>
這是h4
</h4>
<h5>
這是h5
</h5>
<h6>
這是h6
</h6>
Sign in with Wallet
Connect another wallet