# There is 網頁設計 and 創意實作專題的筆記
# I'm 黃苡禎:dizzy:
## 老師的筆記:
https://hackmd.io/@iamfefe/H1HisJiJj
<h1>專題網頁UIUX設計</h1>
## 標題
### -中興紡織廠
## 工作分配
### -報告
## 製作心得
<h4 style="background-color:PowderBlue;color:black"> 為什麼我們要介紹紡織業呢?因為我們當初在找傳統產業的時候，搜尋結果出現最多的就是紡織業了，所以就找到了中興紡織廠，進而做成專題報告，我們後來又分成了兩組使用Figma在製作網頁，以下的截圖是我和24、32共同製作的網頁，最後再和28、29做的合併在一起，才變了最終的版本。</h4>
<iframe src="https://drive.google.com/file/d/1xK80BmNhRcyyyTNKX8kC8MXGstiffCwd/preview" width="640" height="480" allow="autoplay"></iframe>
# HTML
程式碼
-
#### -VS code
```htmlembedded
專題網址:https://reurl.cc/rRegKy
<!DOCTYPE html>
<!-- 網頁開始 Ctrl+/ -->
<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>Document</title>
<style>
/* *代表全部都要套用 */
* {
/* 動畫速度0.5秒減速 */
transition: all 0.5s ease;
font-family: 微軟正黑體;
margin: 0px;
padding: 0px;
font-size: 30px;
}
body {
/* background-color: rgb(222, 216, 216); */
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}
h1 {
color: rgb(74, 3, 3);
font-size: 100px;
}
h1:hover {
letter-spacing: 20px;
color: chocolate;
text-shadow: 5px 5px 10px black;
}
img {
width: 150px;
height: 150px;
/* 切圓角 */
border-radius: 50%;
}
img:hover {
border: 5px solid rgb(255, 255, 255);
}
.pics {
/* bgc,df,jcc,aic */
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
/* 高度固定400 */
height: 400px;
/* 寬度60% */
width: 60%;
/* 邊界自動 */
/* margin:auto; */
/* 邊界:上 左 下 右 */
/* margin:100px 60px 200px 90px; */
margin-left: 200px;
/* 圓角邊 */
border-radius: 20px;
}
.pics:hover {
/* margin:100px 160px 200px 390px; */
margin-left: 300px;
box-shadow: 0px 0px 20px yellow;
}
.pics img,
.pics2 img {
margin: 1vw;
filter:grayscale(1) blur(3px);
}
.pics img:hover{
filter:grayscale(0);
transform:rotate(60deg) scale(1.3);
}
.pics2 {
/* bgc,df,jcc,aic */
display: flex;
justify-content: center;
align-items: center;
/* 高度固定400 */
height: 400px;
/* 寬度60% */
width: 60%;
/* 邊界自動 */
/* margin:auto; */
/* 邊界:上 左 下 右 */
/* margin:100px 60px 200px 90px; */
margin-left: 200px;
/* 圓角邊 */
border-radius: 20px;
}
section {
/* padding:4vw; */
padding-left: 4vw;
padding-right: 4vw;
}
nav {
/* 背景顏色 */
/* background-color: rgb(83, 62, 3); */
background-image: linear-gradient(to top, #09203f 0%, #537895 100%);
/* 顏色(字) */
color: #fff;
width: 100%;
/* 固定在上面 */
position: fixed;
}
nav ul {
list-style: none;
/* 讓項目符號變彈性,就可以橫排 */
display: flex;
}
nav ul li a{
font-size: 20px;
font-weight: 400;
margin: 20px;
color:white;
text-decoration: none;
display: flex;
}
nav ul li:hover {
font-size: 24px;
font-weight: 800;
margin-top: 15px;
transition: all 0.2s ease;
}
@keyframes movetgo{
0%{
color:#09203f;
}
33%{
margin-left:100px;
}
100%{
color:rgb(113, 5, 163);
}
}
#movet{
animation: movetgo 1s ease infinite;
}
table{
width:80%;
background-color: #fff;
margin:auto;
margin-top:20px;
}
/* 列:第一個 */
tr:first-child{
background-color:aqua;
}
p::first-letter{
font-size: 100px;
color:#09203f;
}
td{
/* 文字對齊置中 tac */
text-align: center;
}
p:nth-child(odd){
color:#537895;
}
#s1{
padding-top: 60px;
}
</style>
</head>
<!-- 主體開始 -->
<body>
<header>
<nav>
<!-- ul>li*5 -->
<ul>
<li class="logo">
<ion-icon name="diamond-outline"></ion-icon>
</li>
<li><a href="#s1">前言</a></li>
<li><a href="#s2">特色</a></li>
<li><a href="#s3">商品</a></li>
<li><a href="#s4">與我聯絡</a></li>
</ul>
</nav>
</header>
<!-- <br><br> 自己換行-->
<section id="s1">
<h1>
<ion-icon name="diamond-outline"></ion-icon>123
</h1>
<p>
<b>Lorem</b> <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Ipsam dolores laboriosam officiis
quod natus quisquam molestiae laudantium id ut vero. Molestias quos eveniet ducimus reprehenderit aut
deleniti accusantium soluta fuga?
<span>Suscipit laudantium asperiores mollitia</span>, alias aliquid quisquam itaque! Harum, commodi dolores
voluptatum mollitia libero repudiandae hic assumenda beatae ab voluptatem numquam accusamus sapiente
nesciunt ratione. Voluptate hic reiciendis dolores veritatis?
Quasi voluptatum necessitatibus nulla, explicabo expedita adipisci nisi animi iste numquam, soluta facere,
obcaecati consequuntur! Sit minima, odit mollitia autem expedita repellat? Debitis quidem quaerat
consequuntur nulla dignissimos neque expedita?
<br>
<em>----by Chancy</em>
</p>
<!-- Ctrl shift +d 可快速刪除一行 -->
<div class="pics">
<img src="https://picsum.photos/100/100" alt="">
<img src="https://picsum.photos/100/100" alt="">
<img src="https://picsum.photos/100/100" alt="">
<img src="https://picsum.photos/100/100" alt="">
</div>
</section>
<section id="s2">
<h1 id="movet">123</h1>
<p>
<b>Lorem</b> <em>ipsum</em> dolor sit amet, consectetur adipisicing elit. Ipsam dolores laboriosam officiis
quod
natus quisquam molestiae laudantium id ut vero. Molestias quos eveniet ducimus reprehenderit aut deleniti
accusantium soluta fuga?
<span>Suscipit laudantium asperiores mollitia</span>, alias aliquid quisquam itaque! Harum, commodi dolores
voluptatum mollitia libero repudiandae hic assumenda beatae ab voluptatem numquam accusamus sapiente
nesciunt
ratione. Voluptate hic reiciendis dolores veritatis?
Quasi voluptatum necessitatibus nulla, explicabo expedita adipisci nisi animi iste numquam, soluta facere,
obcaecati consequuntur! Sit minima, odit mollitia autem expedita repellat? Debitis quidem quaerat
consequuntur
nulla dignissimos neque expedita?
<br>
<em>----by Chancy</em>
</p>
<!-- Ctrl shift +d 可快速刪除一行 -->
<div class="pics2">
<img src="https://picsum.photos/100/100" alt="">
<img src="https://picsum.photos/100/100" alt="">
<img src="https://picsum.photos/100/100" alt="">
<img src="https://picsum.photos/100/100" alt="">
</div>
<div class="pics">
<img src="https://picsum.photos/100/100" alt="">
<img src="https://picsum.photos/100/100" alt="">
<img src="https://picsum.photos/100/100" alt="">
<img src="https://picsum.photos/100/100" alt="">
</div>
</section>
<section id="s3">
<h1>456</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis, perferendis assumenda maiores commodi excepturi esse debitis odit neque libero eligendi laborum itaque, quia laboriosam minus? Fuga expedita quisquam quas!
Quam nihil, esse autem aut dolor cum! Atque, nostrum voluptates alias accusamus voluptatum aliquam ipsum? Velit esse, dolore quisquam deserunt necessitatibus earum eaque ipsa eligendi porro debitis vero, facere sint?
Reprehenderit exercitationem nemo, ex sed aliquam et suscipit! Velit, ea nobis? Ab dicta asperiores, soluta at aut natus assumenda libero saepe alias voluptatum dolorem animi neque, provident, illo nemo ducimus!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis, perferendis assumenda maiores commodi excepturi esse debitis odit neque libero eligendi laborum itaque, quia laboriosam minus? Fuga expedita quisquam quas!
Quam nihil, esse autem aut dolor cum! Atque, nostrum voluptates alias accusamus voluptatum aliquam ipsum? Velit esse, dolore quisquam deserunt necessitatibus earum eaque ipsa eligendi porro debitis vero, facere sint?
Reprehenderit exercitationem nemo, ex sed aliquam et suscipit! Velit, ea nobis? Ab dicta asperiores, soluta at aut natus assumenda libero saepe alias voluptatum dolorem animi neque, provident, illo nemo ducimus!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa perspiciatis, perferendis assumenda maiores commodi
excepturi esse debitis odit neque libero eligendi laborum itaque, quia laboriosam minus? Fuga expedita quisquam
quas!
Quam nihil, esse autem aut dolor cum! Atque, nostrum voluptates alias accusamus voluptatum aliquam ipsum? Velit
esse, dolore quisquam deserunt necessitatibus earum eaque ipsa eligendi porro debitis vero, facere sint?
Reprehenderit exercitationem nemo, ex sed aliquam et suscipit! Velit, ea nobis? Ab dicta asperiores, soluta at aut
natus assumenda libero saepe alias voluptatum dolorem animi neque, provident, illo nemo ducimus!
</p>
<div>
<table>
<tr>
<td>標題</td>
<td>標題</td>
<td>標題</td>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
<td>內容</td>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
<td>內容</td>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
<td>內容</td>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
<td>內容</td>
</tr>
<tr>
<td>內容</td>
<td>內容</td>
<td>內容</td>
</tr>
</table>
</div>
</section>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
<!-- 網頁結束 -->
```
# 個人學習心得
<h4 style="background-color:PowderBlue;color:black"> 在這個單元裏我發現原來網頁設計並不是我想像中的那麼容易簡單，上課途中可能常常會因為發個呆恍了一下神就丟失了進度，但是有跟上老師的節奏一行一行的打著程式碼，即使最後的成果只是一個網站最基礎的改變顏色或著是說字體大小的調整，還不能算是一個真正完整的網站，但是能看到自己的每一步都在地上踏出了痕跡還是很有成就感的!</h4>
# 分組製作網頁設計
<h4 style="background-color:PowderBlue;color:black"> 經過之前使用figma製作網頁之後，我們換使用VS Code來製作網頁，但因為我們這組只有一個人對於網頁設計比熟悉所以大部分的程式碼都是由她負責的，我們只能負責查找資料或著是尋找書籍等內容，來增添網頁的完整度。
其中小論文的表單是我和24、29共同完成的，從最一開始只有一點點的內容，到可以拿出去給大家填寫，經歷了不少的事故，中途還發生了一點小插曲，就是我因為好奇區段是什麼而測試了一下，結果不小心把整個表單給刪除了，還好那個時候有預覽所以有留下題目與問答的內容才不至於釀成大禍，但還是給組員添了不小麻煩，這讓我知道了如果以後有要測試任何事物之前得自己另外創建一個新的物件，才不會把組員們先前作的內容全部都刪除了以致於需要全部重頭來過。</h4>
<iframe src="https://drive.google.com/file/d/1uBALFOfKT62AS3DWQCLBQyZTOdoQYJXB/preview" width="640" height="480" allow="autoplay"></iframe>
<iframe src="https://drive.google.com/file/d/1kWBHPn9EXw7fqwvAoM2UMuFXwf4DF1Ah/preview" width="640" height="480" allow="autoplay"></iframe>
Sign in with Wallet
Connect another wallet