# **114336劉亭妤 網頁專題隨堂筆記 :smile:**
## 老師主頁筆記連結 [https://hackmd.io/@iamfefe](https://hackmd.io/@iamfefe)
## 老師多媒體筆記連結 [https://hackmd.io/@iamfefe/rJ-Tkb_JT](https://hackmd.io/@iamfefe/rJ-Tkb_JT)
## 老師網頁筆記連結 [https://hackmd.io/@iamfefe/HyiBBJsph](https://hackmd.io/@iamfefe/HyiBBJsph)
## 老師網頁筆記(下學期)連結 [https://hackmd.io/@iamfefe/rkDw_zfn6?utm_source=preview-mode&utm_medium=rec](https://hackmd.io/@iamfefe/rkDw_zfn6?utm_source=preview-mode&utm_medium=rec)
## 老師電乙連結[https://hackmd.io/@iamfefe/HJn7Bi8x3](https://hackmd.io/@iamfefe/HJn7Bi8x3)
# ==**自我介紹** :thought_balloon:==
:::info
我是資料處理科二年三班劉亭妤
:::
# ==**本學年在這堂課設定的目標**:thumbsup:==
:::info
-多認識網頁學習的內容
-多看看主要學習的內容
-從零開始學一直到能自己做出一個網頁
:::
---
# ==全螢幕截圖==
<h4>按F12，ctrl+shift+p，輸入full size screenshot，按紫色的按鈕 or enter</h4>
---
# ==語法練習-大標題自訂顏色==
<h1 style='background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); !important; color:#00000'>我是大標題(網頁寫法)</h1>
<h2 style='background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); !important;color:#0a99a9;'>我是大標題</h2>
<h3 style='background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%); !important; color:#09ad63'>我是大標題</h3>
<p>這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內</p>
內容如下:
```htmlembedded=
<h1>我是大標題(網頁寫法)</h1>
<h2>我是大標題</h2>
<h3>我是大標題</h3>
<p>這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內容這裡是內</p>
```
<hr>
# ==語法小練習證書==
<h4>10/25/23</h4>
<img src="https://hackmd.io/_uploads/rkLugGUGT.png">
<hr>
# ==練習標題的大小==
<body>
hello, my friend.
<h1 id="home">我是大標題1</h1>
<h2>我是大標題2</h2>
<h3>我是大標題3</h3>
<h4>我是大標題4</h4>
<h5>我是大標題5</h5>
<h6>我是大標題6</h6>
# ==基本語法==
html:5按tab 基本頁面
h1…h6 大標題
p 段落
lorem 假字
br 換行
pre 預設排版
a 超連結
href 放連結,或是#段落命名
target _self 在同一個標籤頁跳轉 _blank 另開標籤頁
b 粗體
em 斜體
或是 b 粗體 i 斜體 u 底線
span 段落裏的小片段
ul>li5 項目符號
ol>li3 項目編號
< !-- 註解 - - > 中間無空格，ctrl+/
table 表格
tr 列
td 欄 (colspan跨欄,rowspan跨列)
img 圖片
div 盒子
# ==快速鍵==
shift+方向鍵 選取文字
選取狀態下shift+alt+往下鍵 快速複製
按住ctrl+滑鼠點選，會變超級大游標
# ==網站程式碼練習==
<h1>紅豆餅介紹</h1>
<img src="https://picsum.photos/600/200" alt="" />
<p>
<b>Lorem ipsum </br>dolor sit amet consectetur adipisicing elit. Libero
dolor, sit tenetur ipsa consequatur rem distinctio ratione nam tempore ut
molestias ipsam voluptates, ad eius assumenda magnam quaerat omnis
similique. Minima, quam. Asperiores veniam corrupti perspiciatis dolorum
explicabo id laborum iusto corporis sapiente laudantium? Provident alias
eaque dolore, ipsa laboriosam neque qui, dignissimos nesciunt vero
praesentium illum architecto recusandae asperiores. Totam quidem, enim
deleniti deserunt illum aperiam voluptatem ratione aliquid, quod excepturi
asperiores ut vitae iste sequi repellendus mollitia qui neque sapiente
error aspernatur? <i>Libero iure fuga excepturi ipsam molestiae.</i>
</p>
<hr>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero dolor, sit
tenetur ipsa consequatur rem distinctio ratione nam tempore ut molestias
ipsam voluptates, ad eius assumenda magnam quaerat omnis similique.
Minima, quam. Asperiores veniam corrupti perspiciatis dolorum explicabo id
laborum iusto corporis sapiente laudantium? Provident alias eaque dolore,
ipsa laboriosam neque qui, dignissimos nesciunt vero praesentium illum
architecto recusandae asperiores. Totam quidem, enim deleniti deserunt
illum aperiam voluptatem ratione aliquid, quod excepturi asperiores ut
vitae iste sequi repellendus mollitia qui neque sapiente error aspernatur?
Libero iure fuga excepturi ipsam molestiae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero dolor, sit
tenetur ipsa consequatur rem distinctio ratione nam tempore ut molestias
ipsam voluptates, ad eius assumenda magnam quaerat omnis similique.
Minima, quam. Asperiores veniam corrupti perspiciatis dolorum explicabo id
laborum iusto corporis sapiente laudantium? Provident alias eaque dolore,
ipsa laboriosam neque qui, dignissimos nesciunt vero praesentium illum
architecto recusandae asperiores. Totam quidem, enim deleniti deserunt
illum aperiam voluptatem ratione aliquid, quod excepturi asperiores ut
vitae iste sequi repellendus mollitia qui neque sapiente error aspernatur?
Libero iure fuga excepturi ipsam molestiae.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero dolor, sit
tenetur ipsa consequatur rem distinctio ratione nam tempore ut molestias
ipsam voluptates, ad eius assumenda magnam quaerat omnis similique.
Minima, quam. Asperiores veniam corrupti perspiciatis dolorum explicabo id
laborum iusto corporis sapiente laudantium? Provident alias eaque dolore,
ipsa laboriosam neque qui, dignissimos nesciunt vero praesentium illum
architecto recusandae asperiores. Totam quidem, enim deleniti deserunt
illum aperiam voluptatem ratione aliquid, quod excepturi asperiores ut
vitae iste sequi repellendus mollitia qui neque sapiente error aspernatur?
Libero iure fuga excepturi ipsam molestiae.
</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>
<!-- 超連結 -->
<a href="http://yahoo.tw" target="_blank">連到瀏覽器</a>
<a href="mailto:iamfefe@clvsc.tyc.edu.tw">傳訊息給fefe</a>
<a href="#home">回首頁</a>
<table>
<tr>
<td>班級</td>>
<td>座號</td>>
<td>姓名</td>>
<td>成績</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>
<td>測試</td>
</tr>
</body>
<style>
*{
transition: all 1s ease;
}
body{
background-color: #ace0f9 ;
}
nav{
widen: 80%;
height: 100px;
background-color: #48b6e9 ;
}
nav ul{
display: flex;
justify-content: center;
}
nav li{
width: 200px;
height: 50px;
background-color: #4c839c ;
list-style: none;
border-radius: 20px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
letter-spacing: 5px;
filter:blur(3px);
}
nav li:hover{
transform: scale(2) rotate(20deg);
filter:blur(0px);
}
#momo{
filter:blur(10px);
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>選單1</li>
<li>選單2</li>
<li>選單3</li>
<li>選單4</li>
<li>選單5</li>
</ul>
</nav>
</header>
<!--選單1內容這裡-->
<section>
<img src="https://picsum.photos/400/300" alt="" />
</section>
<!--選單1內容結束-->
<!--選單2內容這裡-->
<section>
<img src="https://picsum.photos/300/200" id="momo" />
</section>
<!--選單2內容結束-->
<!--選單3內容這裡-->
<section>
<img src="https://picsum.photos/400/200" class="momo" />
</section>
<!--選單3內容結束-->
<!--選單4內容這裡-->
<section></section>
<!--選單4內容結束-->
<!--選單5內容這裡-->
<section></section>
<!--選單5內容結束-->
<footer>
</footer>
</body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<style>
div {
width: 300px;
height: 200px;
background-color: rgb(9, 183, 252);
border: 1px solid rgb(255, 255, 255);
}
#box1 {
background-color: rgb(112, 221, 203);
width: 50%;
transition: 0.5s ease;
height: 100%;
}
#box1:hover,
#box2:hover,
#box3:hover {
margin-left: 300px;
}
#box2 {
background-color: rgb(138, 101, 168);
width: 50rem;
transition: 0.5s ease-in;
}
#box3 {
background-color: rgb(106, 90, 196);
width: 50vw;
transition: 0.5s linear;
}
#box4 {
background-color: rgb(45, 190, 226);
}
#box5 {
background-color: rgb(190, 133, 207);
}
</style>
</head>
<body>
<!-- div#box*5 -->
<div id="box1">
<img src="https://picsum.photos/300/200" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo animi
ratione nam maxime consectetur fuga quia earum nemo vel, tenetur nobis
voluptates dolore neque quos mollitia est. Dignissimos, numquam ullam?
</p>
</div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
</body>
<hr/>
# ==figma網站介面設計==
<hr/>
# ==css語法練習==
width 寬
height 高
border 框 1px solid red 粗度，實線，紅色
color 顏色 有4種寫法:寫英文,rgb,rgba,#色碼
background-color 背景顏色
background-image 背景圖片
url(“img/2.jpg”) 路徑與檔名
font-size 字大小
font-family 字型
font-weight 字重
text-shadow 字陰影(box-shadow 方塊陰影)
padding內距 上左下右
margin外距 [border三者差別]
overflow:hidden 溢出隱藏
<hr/>
# ==將figma介面設計轉化為實體網站==
<h4>持續修改中～</h4>
<hr/>
# ==學習心得與反思==
<h4>從一開始對於網頁這部分是懵懵懂懂的，老師一步步帶著我們從基礎開始，最先從在瀏覽器按F12來帶著我們認識各個部件，認識完基本操作後，讓我們用一些加強語法的頁面來去做練習，有了基本練習後，就來到了重頭戲—製作網頁，老師先讓我們各組選定主題，剛好我們這組有自己本身就是店主，所以就選定以紅豆餅為主題，先用figma來繪製我們的網頁介面，經過許多節課的修改，在做的過程中遇到很多的困難，像整體的風格和顏色要怎麼去做搭配、內容要怎麼排版會比較好看等，多次的和同學討論，不知不覺就慢慢的把問題一一克服和解決，成功完成了，在之後開始投各種比賽，根據他們所要的格式來完成word檔，也經過老師的建議和同學的討論，雖然沒能的名，但做的過程中也學到很多東西，也是不錯的，做完這些後，把在figma的介面設計轉化為實體網站，將上課學習到的運用到裡面就完成了。</h4>
# ==下學期==
Sign in with Wallet
Connect another wallet