111-1網頁設計&創意實作專題
=

###### tags: `Curriculum notes` ๐˙Ⱉ˙๐
## <a href="https://hackmd.io/@Yueyi20051214/HyZ8mjYai">**【111-2筆記傳送門:star:】**</a>

<a href="https://hackmd.io/@iamfefe/H1HisJiJj">**【教學筆記】**</a>

<a href="https://docs.google.com/spreadsheets/d/11lfkH05dxkAxL6VKNYsjM_izd9-GbTVgv1JU52GREMs/edit?usp=sharing">**【功課筆記回報區】**</a>

<a href="https://meet.google.com/ink-avsn-cjc">**【Meet連結】**</a>

<font color="705840">0830課程</font>
=
<a href="http://igt.kpvs.ntpc.edu.tw/assets/documents/17507/original/ff09fcfb49789e26f1ab93a8ba175ef9.pdf">**【課程進度參考(暫)】**</a>

<a href="http://cyberfair.taiwanschoolnet.org/global_award">**【網界博覽會得獎作品】**</a>

<a href="https://sci.me.ntnu.edu.tw/Contest/ContestAnnounList?c_class=2">**【全國技藝競賽網站】**</a>

<font color="705840">0901課程</font>
=
學習工具
-
- <a href="https://www.w3schools.com/">W3 school</a> ==學習語法==
- <a href="https://code.visualstudio.com/">VS code</a>

開發練習
-
**【實作網站】**
<a href="https://popcat.click/">Popcat:cat:</a>

**【結果】**
==自動點擊螢幕==


**【程式碼】**
~~~
setInterval(function () { document.dispatchEvent(new KeyboardEvent(‘keydown’)); }, 500);
~~~
複製程式碼後，需要自行改<font color="Red">‘’</font>的部分

My First Heading
-

<h1 style="color:rgb(255,255,255);background-color:#87CEEB;">資二一李怡蓁</h1>

**【程式碼】**

~~~
<h1 style="color:rgb(255,255,255);background-color:#87CEEB;">資二一李怡蓁</h1>
~~~
<font color="705840">0906課程</font>
=
創作平台
-
- <a href="https://www.canva.com/">Canva 免費設計</a>
- <a href="https://www.wix.com/">Wix 免費網站設計平台</a>
- <a href="https://spark.adobe.com/sp">Adobe Spark 免費網站設計平台</a>

設計靈感
-
- <a href="https://www.tumblr.com/">Tumblr</a>
- <a href="https://www.pinterest.com/">pinterest</a>

**【釘圖應用】**

素材應用
-
- <a href="https://www.pexels.com/zh-tw/">質感圖片下載pexels</a>
- <a href="https://www.pexels.com/search/videos/videos/">影片下載pexels video</a>
- <a href="https://www.pexels.com/zh-tw/license/">使用規則</a>
- <a href="http://www.freepik.com/">向量設計freepik</a>
- <a href="https://undraw.co/illustrations">插畫圖片</a>
- <a href="https://www.openpeeps.com/">組合插畫</a>

==**要特別注意授權條款！！**==

配色網站
-
- <a href="https://coolors.co/">coolors</a>
- <a href="https://webgradients.com/">改背景,改box背景,改字顏色等-超美漸層產生器</a>
- 改插圖-超好用插圖
- Humaaans：人物角色與場景插畫 use with blush
- OpenDoodles：可愛的人物角色插畫
- unDrawn：簡報利器插畫圖庫
- Glaze：精緻向量插畫
- manypixels：可自行定義配色
- mixkit-Art：充滿藝術感的精緻插畫
- illlustrations：生活物品插畫
- isoflat：最大的免費立體投影插畫網站
- Paaatterns：Patterns 圖樣插畫

製作你的個人介紹網站:fire:
-
創作平台：**++Wixsite++**

<a href="https://014125.wixsite.com/my-website">點這裡:point_left: </a>

我的職涯觀察 :question:
-
觀看影片：<a href="https://www.youtube.com/watch?v=Zk73H2eu3GU">**++VR超牆職業-互動設計++**</a>

### **製作心得 :stars:**

<font color="705840">0908課程</font>
=
挑選一個興趣主題?-組員是?(2-5人)
-
主題：++**昀澤農場**++
組員：42114 陳帟宏、42123 吳千惠、42127 邱紫綾、42129 徐佑涵

基礎練習
-
**【鍵盤指法】**

<a href="http://cssline.com/">**【各種好站推薦】**</a>

**【酷設計】**
- https://fanfan.fan/?ref=cssline.com
- https://www.michaelspeichert.com/?ref=cssline.com
- http://bowtieperiod.com/
- https://theatreshowcase.boston/?ref=cssline.com

XD 使用
-
**【快速鍵】**
ctrl + **➪** 放大
ctrl - **➪** 縮小
空白+移動 **➪** 移動畫布
Alt+移動 **➪** 複製
畫圖形+shift **➪** 等比例

==**註：回家可用figma**==

<font color="705840">0915課程</font>
=
XD 使用
-
**【好用套件】**
unDraw 插圖
Icondrop 按鈕
iconsout 找icon
UIFaces 自動人臉
Quick Mockup 各類預設模板
unsplash 找圖
quickmockup
color spark 隨機變色
blobular 隨意色塊
vizzy charts 統計圖表
lottie files小動圖(X) 改用iconsout找lottie animations
google sheet 對照資料庫
rotato 專案展示(X)
lorem ipsum 產生假字

<font color="705840">0927課程</font>
=
figma補充
-
安裝(新的<a href="https://drive.google.com/file/d/1zXfgeHV6OTAYGrCaOvpMmdaIJQ-o_izT/view?usp=sharing">beta版</a>)

**【套件】**
lorem ipsum,iconsout,lottiefiles,blobs

- 如何切圖( 圓角或遮罩放要放下面)
假字
autolayout
- 組合：ctrl+alt+k
多組合後可連選變成combine as varient切換狀態
要確定放在主版中的圖字才會出現
- lottiefiles的動圖要選gif

<font color="705840">0929課程</font>
=
「小論文六大架構寫作要領」研習
-
時間：9月 29日 (星期四) · 下午13:00 - 15:00
講師：興大附中主任 江瑞顏


重點整理:star:
-

<font color="705840">1004課程</font>
=
圖書資源
-
- <a href="https://ebook.nlpi.edu.tw/">**國資圖電子書**</a>
- <a href="https://www.airitilibrary.com/">**華藝線上圖書館**</a>
1.含電子期刊、博碩士論文、會議論文三大資料庫，大多可全文下載。
2.授權期限自9/25至11/25兩個月。
3.請於Google搜尋輸入「華藝線上圖書館」或點擊下方網址進入
- <a href="https://ndltd.ncl.edu.tw/cgi-bin/gs32/gsweb.cgi/ccd=951pVy/login?jstimes=2&loadingjs=1&o=dwebmge&ssoauth=1&cache=1664861928352">**碩博士論文**</a>
- <a href="https://www.books.com.tw/">**博客來電子書**</a>

<font color="705840">1011課程</font>
=
## 製作網站ing～
### 標題
:::success
**昀澤農場(陳珊宇)**
:::
### 製作心得 :stars:

### QRCode與網站網址
<a href="https://reurl.cc/QbM7v9">點這裡:point_left: </a>

---

---
### 【封面示意圖】

---

<font color="705840">1018~27課程</font>
=
## HTML、CSS課程
**【使用網站、程式】**
<a href="https://codepen.io/pen/">Codepen</a>
<a href="https://code.visualstudio.com/">vscode</a>:star:

**【vscode安裝套件】**
html,live server,prettier,chinese,HTML format

### 練習成果:sparkles:
#### **【程式碼】**
~~~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>Document</title>
<style>
/* 「*」代表全部都要套用 */
* {
transition: all 0.5s ease;
/* 動畫速度0.5秒減速 */
font-family: Microsoft JhengHei;
margin: 0px;
padding: 0px
}

body {
/* background-color: rgb(217, 243, 243); */
background-image: linear-gradient(to top, #f3e7e9 0%, #e3eeff 99%, #e3eeff 100%);
}

h1 {
font-size: 75px;
color: rgb(51, 117, 192)
}

h1:hover {

text-shadow: 5px 5px 5px rgb(0, 0, 0);

letter-spacing: 20px;

color: rgb(168, 75, 211)
}

img {
width: 150px;
height: 150px;
border-radius: 50%;
/* 切圓角 */
}

img:hover {
border: 5px solid rgb(27, 11, 70);
/* 邊框 */
}

.pics,.pics2 {
align-items: center;
justify-content: center;
background: rgb(255, 255, 255);
height: 400px;
/* 高度固定400 */
width: 80%;
/* 寬度60% */
/* margin: auto; */
/* 邊界1:自動 */
/* margin: 100px 60px 200px 90px; */
/* 邊界2:上左下右 */
margin-left: 200px;
border-radius: 20px;
display: flex
}

.pics:hover {
/* margin: 100px 60px 200px 300px; */
margin-left : 300px ;
box-shadow : 0px 0px 20px rgb(253, 237, 17);
}
.pics2:hover {
/* margin: 100px 60px 200px 300px; */
margin-left: 300px;
}

.pics img,.pics2 img {
margin: 1vw;
filter:blur(3px) grayscale(1)
}

.pics img:hover,.pics2 img:hover{
transform:rotate(45deg) scale(1.5, 1.5);
filter:blur(0) grayscale(0)
}

section {
padding-left: 4vw;
}
p:first-letter {
font-size : 500%;
color:rgb(241, 146, 146)
}
nav {
background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
color: rgb(255, 255, 255);
width: 100%;
position:fixed
/* 固定 */
}

nav ul {
list-style: none;
display: flex
/* 讓項目符號變彈性，就可以橫排 */
}

nav ul li {
font-size: 20px;
font-weight: 400;
margin: 20px;
color:white;
display:flex
}
nav ul li a {
font-size: 20px;
font-weight: 400;
margin: 20px;
color:white;
display:flex;
text-decoration: none;
}

nav ul li:hover {
background-image: linear-gradient(to right, #ed6ea0 0%, #ec8c69 100%);
font-size: 20px;
transition: all 0.2s ease;
margin-top: 15px
}

#movet{
animation:movetgo 1s ease infinite;
}
@keyframes movetgo{
0%{color:#ec8c69;
margin-left:25% }
25%{color:rgb(87, 116, 45);
margin-left: 0%}
50%{color:blue;
margin-left:50%}
100%{ color:purple;
margin-left: 25% }
}
table{
width:80%;
background-color:#fff;
margin:auto;
margin-top:20px;
text-align:center;
}
tr:first-child{
background-color:aqua ;

}
tr:nth-child(even){
background-color:pink;

}
p:nth-child(even){
color:#ec8c69
}
p:nth-child(odd){
color:#73bec2
}
#s1{padding-top:125px ;
}
</style>

</head>

<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>

<header>
<nav>
<ul>
<li>
<ion-icon name="planet-outline"></ion-icon>
</li>
<li><a href="#s1">按鈕</a></li>
<li><a href="#s2">按鈕</a></li>
<li>按鈕</li>
<li>按鈕</li>
</ul>
</nav>
</header>

<section id="s1">
<h1>123</h1>
<p>
<b>Lorem</b> <em>ipsum</em>, <span> dolor sit amet consectetur adipisicing Placeat voluptatibus eligendi
excepturi possimus unde vel </span> ut quidem ea nostrum! Omnis natus assumenda excepturi quas.
Architecto veniam molestiae sequi officia totam. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quasi sed eius similique cum nesciunt nisi soluta consequatur ipsa vitae fugiat. Laboriosam vitae numquam
nulla iste a illum. Dolorum, itaque modi! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque
corporis eaque laudantium consectetur cupiditate! Harum, quaerat nemo. Cumque saepe voluptas eius autem
quasi repellendus maxime aperiam, sequi explicabo vitae doloribus!
<br>
<em>----by coya</em>
</p>

<div class="pics">
<img src="https://picsum.photos/seed/picsum/200/300" alt="">
<img src="https://picsum.photos/seed/picsum/200/300" alt="">
<img src="https://picsum.photos/seed/picsum/200/300" alt="">
<img src="https://picsum.photos/seed/picsum/200/300" alt="">
</div>

<h1 id="movet">123</h1>
<p>
<b>Lorem</b> <em>ipsum</em>, <span> dolor sit amet consectetur adipisicing Placeat voluptatibus eligendi
excepturi
possimus unde vel </span> ut quidem ea nostrum! Omnis natus assumenda excepturi quas. Architecto veniam
molestiae sequi officia totam. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi sed eius
similique cum
nesciunt nisi soluta consequatur ipsa vitae fugiat. Laboriosam vitae numquam nulla iste a illum. Dolorum,
itaque
modi! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque corporis eaque laudantium consectetur
cupiditate! Harum, quaerat nemo. Cumque saepe voluptas eius autem quasi repellendus maxime aperiam, sequi
explicabo
vitae doloribus!
<br>
<em>----by coya</em>
</p>
<div class="pics2">
<img src="https://picsum.photos/seed/picsum/200/300" alt="">
<img src="https://picsum.photos/seed/picsum/200/300" alt="">
<img src="https://picsum.photos/seed/picsum/200/300" alt="">
<img src="https://picsum.photos/seed/picsum/200/300" alt="">
</div>>
</section>
<section id="s2">
<h1>456</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, libero? Earum, exercitationem, laboriosam aliquam nemo ipsam esse architecto iure eum atque minima omnis facere? Id impedit illo voluptates ratione voluptatum?
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, itaque esse. Pariatur amet labore saepe sequi, doloribus facilis expedita reprehenderit ad velit, praesentium quaerat, unde fugit consectetur tempora dicta sapiente!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis sapiente accusantium obcaecati repudiandae perspiciatis! Velit molestias nam quasi, officiis blanditiis vitae veniam aut tempore dolores magni placeat ducimus reprehenderit assumenda?
</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>>
</body>

</html>

<!-- 網頁結束 -->
~~~
### Emmet快速鍵
- **html:5 基本頁面**
~~~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>Document</title>
</head>
<body>

</body>
</html>
~~~

- **h1...h6 大標題**

~~~htmlembedded=
<H1>標題</H1>
~~~

- **lorem 假字**

~~~htmlembedded=
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum provident, minus, quis praesentium voluptatum, ratione nam voluptates consequuntur debitis facere enim possimus dolore reiciendis minima iste ipsum ullam tempore expedita.
~~~
- **p 段落**

~~~htmlembedded=
<p></p>
~~~

- **br 換行**

~~~htmlembedded=
<br>
~~~

- **pre 預設排版**

~~~htmlembedded=
<pre></pre>
~~~

- **a 超連結**

~~~htmlembedded=
<a href="網址">文字</a>
~~~
- **ul>li*數字 項目符號**(無序清單)(小黑點)

~~~htmlembedded=
<ul>
<li></li>
<li></li>
<li></li>
</ul>
~~~

- **ol>li*數字 項目編號**(有序清單)(1.2.3.)

~~~htmlembedded=
<ol>
<li></li>
<li></li>
<li></li>
</ol>
~~~

- **table 表格**　
td 欄
colspan跨欄
rowspan跨列

~~~htmlembedded=
<table>
<tr><td colspan=2>項目</td></tr>
<tr><td>項目</td><td rowspan=2>項目</td></tr>
<tr><td>項目</td></tr>
</table>
~~~
- **span 段落裏的小片段**

~~~htmlembedded=
<span></span>
~~~
- **b 粗體**

~~~htmlembedded=
<b>文字</b>
~~~

- **em 斜體**

~~~htmlembedded=
<em>文字</em>
~~~

- **img 圖片**

~~~htmlembedded=
<img src="圖片網址" alt="">
~~~
==**以上打完後按Tab**==

- **ctrl+/ 註解**

~~~htmlembedded=
<!-- 文字 -->
~~~
### style樣式更改

練習小遊戲：<a href="https://flexboxfroggy.com/#zh-tw">青蛙排版練習</a>:frog:

<font color="705840">1101、08課程</font>
=
**【使用網站、程式】**
<a href="https://code.visualstudio.com/">vscode</a>
<a href="https://bootstrap5.hexschool.com/">bootstrap</a>:star:

<font color="705840">1110~第一學期結束 課程</font>
=
## 製作專題時間:alarm_clock:
### 架構圖
---
### 昀澤介紹 & 地圖及聯絡資訊
---
### 賣場

---

## 模擬訪談整理

### 創立相關

品牌是一個精神
因為想照顧植物，而創立此農場
收穫為「大家開心，我們就開心！」
由於現代人開始越來越注重「養生、健康」，因此堅持種植有機食物

### 蔬菜種植

利用愛來照顧植物
且有經過政府的有機認證
最有特色的產品是「有機蔬菜」
天氣不好每個植物採不同的方式改善，下雨時搭棚子，沒下雨則反之

### 現今狀況

平時會辦活動
會將農場傳到下一代
目前人力不足、資金短缺
希望藉由社群媒體(FB、IG、推特、網站)來多多推廣農場

### 網站製作

在設計和包裝上能更加美觀
希望網站能夠展現出有機蔬菜的特色

### 問題反思

若消費者對於產品不滿意，會詢問他們有什麼需要改進的

## 製作流程:star:
簡易小論文
### 12/15~12/20 - 問卷製作
### 12/25 -文獻探討改寫
### 1/3 -SWOT、4P分析
### 1/5 -問卷結果分析
### 1/10 -參考資料、網頁成果展示

## **結束~**！！
## 小論文展示