# **網頁設計&創意入門實作筆記** :+1: :banana:
---
# 作者:林永瑋
## 指導老師：徐麗娟
老師的筆記連結:https://hackmd.io/@iamfefe/H1HisJiJj
hackmd.io/@iamfefe
<h1 style="font-size:50px;color:rgb(155,155,255);background-color:yellow;">421 7 林永瑋 </h1>
<p style="font-size:50px;">I am big</p>
---
靈感來源:
___
#### 我的WIX網站介紹:https://456123ghjk.wixsite.com/weiiiii
___
#### 我的職涯觀察心得:看完VR超牆職業-電競後我發現電競選手並沒有我想的那麼簡單，並不是只要一直玩，什麼都不用想，但實際上每天都要記進行高強度的訓練，每天都要玩十幾個小時來練習遊戲的技巧跟觀念，非常的累，還要面臨選手的自己的巔峰期的問題，會有更年輕的人，來替補你自己，退休後也會發現你自己只會打遊戲，其他甚麼都不會的問題，這些問題都值得深深的考慮，來思考自己的未來，好好規劃自己的人生。
___
# 專題網站製作：
### 我們的專題的名稱是大溪木器-協大木器行，我們是用Visual Studio Code來製作我們的專題網站，我們利用Bootstrap來尋找我們網頁的框架，裡面有許多的框架給我們選擇，在精挑細選之後我們大致決定了我們網頁的基礎架構，在去查找內容加入網頁中，並加入許多互動式設計還有Google地圖和FB嵌入，最後在老師的教導下做出這個網站。
---
# 專題網站製作心得：
### 在製作這個網頁的途中，我遇到了許多的困難，在找靈感時有遇到些許困難，寫網站寫到一半會有靈感不足的問題，還有在指揮組員時會有點小困難，他們會一時不知道要做什麼事情，甚至有時會偷懶休息之類的，但我們都慢慢地克服了這些問題，而且在製作完這個網站後我也學到了許多有關寫網頁的技巧，排版、框架、設定...尤其是FB和Google地圖嵌入特別讓我印象深刻，讓我知道怎麼把FB和Google地圖放進網站裡，也讓我可以學會製作一個屬於自己的網站。
---
# 專題網頁內容截圖：
<iframe src="https://drive.google.com/file/d/1UgTWwp22Z2m2dHVbdgj5gMOO3Y8kjJEM/preview" width="640" height="480" allow="autoplay"></iframe>
<iframe src="https://drive.google.com/file/d/1AJgNZRYvIqqMk9o37S00yLSH2Ag7fwy8/preview" width="640" height="480" allow="autoplay"></iframe>
<iframe src="https://drive.google.com/file/d/1UWxlNkCQOEj_AqMfreWVX7teumW0G4_c/preview" width="640" height="480" allow="autoplay"></iframe>
___
## 講作筆記:
研究背景動機
1.議題出現的背景
2.觀察到什麼現象
3.選擇的對象、區域
4.提出具體問題
如何修正？
你傳送了
前言重點提醒
你傳送了
文獻探討的作用
你傳送了
文獻的挑選
你傳送了
文獻探討標題之訂定:
文獻探討撰寫常見的錯誤即修正
1.文不對題
2.當成參考文獻撰寫
3.僅解釋名詞
4.僅做文獻介紹
5.沒有探討的過程
6.而是資料呈現方式錯誤
7.文獻未追根究底年代由遠到近
___
### 專題網頁UIUX設計(標題):
大溪木器─協大木器行
### 工作分配:
製作回主畫面面按鈕等等、美化網頁、製作各式委託
### 製作心得:
做完這個專題網站後，我學到了許多東西，在我們的分工合作下我們完成了這個報告，我知道了分工合作的重要性，原本看似艱難的專題，在大家的配合下，把它變成了一個有趣的事情，做專題事半功倍，每個人做一件事情，把專題變得比較簡單，雖然是第一次做網頁，做得不是很好，但在做的過程中我也了解到做網頁的技巧，我會吸取這次做網頁的經驗，下一次一定會做得更好。
網站網址:https://reurl.cc/8pknaR
___
QRcode:
___
### 網站截圖:
___
### 日常練習成果:
https://codepen.io/bqcwlqdo-the-flexboxer/pen/OJZGKxr
---
# HTML與CSS練習成果
<iframe src="https://drive.google.com/file/d/1hn26ud8UniPDvZ_1xCU_146iLfzuHjmN/preview" width="640" height="480" allow="autoplay"></iframe>
## 練習成果截圖:
<iframe src="https://drive.google.com/file/d/1t30fdOkDt557hA6OygrhtVgA5kNYquSP/preview" width="640" height="480" allow="autoplay"></iframe>
---
<!-- [連結放這](/6ZLux6yfRyOejeKhjdfmsQ) -->
---
# 電子書
## 個人貢獻：電子書的頁面設計和製作，並美化版面、嵌入影片。
## 學習重點：先利用canva來製作電子書的頁面，之後再上傳到電子書網站進行多媒體功能製作和嵌入，並加入GIF圖片來使版面更活潑。
## 個人心得：在製作完這個電子書後我學到了許多東西，知道了如何製作屬於自己的電子書，雖然過程十分艱辛但我也收穫良多，像是如何製作各式各樣的多媒體功能......也讓我知道團隊合作不一樣的一面，以及當一個組長的困難之處。
## 成果影片展示：
<iframe width="1280" height="720" src="https://www.youtube.com/embed/0PRsLHxCX2g" title="「欲窮千里木 趣趣創學園」" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
---
<iframe width="100%" height="640" frameborder="0" allow="xr-spatial-tracking; gyroscope; accelerometer" allowfullscreen scrolling="no" src="https://kuula.co/share/collection/7FCqg?logo=1&info=1&fs=1&vr=0&sd=1&thumbs=1"></iframe>
```htmlembedded=
<html>
<body>
<h2>表單</h2>
<form action="/action_page.php">
<label for="fname">班級:</label><br>
<input type="text" id="lname" name="lname" value="">
<select name=""><option value="">資二一</option>
<option value="">資二二</option>
<option value="">資二三</option>
</select><br>
<label for="lname">座號:</label><br>
<input type="text" id="lname" name="lname" value=""><br>
<label for="fname">姓名:</label><br>
<input type="text" id="fname" name="fname" value=""><br>
<label for="fname">性別:</label><br>
<input type="radio" name="sex" value="" checked="">男
<input type="radio" name="sex" value="">女<br>
<label for="fname">密碼:</label><br>
<input type="password" name="" value=""><br>
<input type="hidden" name="" value="">
<label for="fname">疫苗:</label>
<input type="checkbox" name="1" value="" checked="">第一劑
<input type="checkbox" name="2" value="">第二劑
<input type="checkbox" name="3" value="">第三劑<br>
<input type="button" name="" value="說明">
<input type="reset" value="重設">
<input type="submit" value="送出">
</form>
</body>
</html>
```
### 影像地圖練習
```htmlembedded=
<img src="協大.png" usemap="#image-map">
<map name="image-map">
<area target="" alt="click" title="click" href="http://taoyuanminnan.com.tw/xie-da-mu-qi-hang/" coords="17,15,7,373,95,374,567,360,311,17,288,358,432,369,566,373,569,186,555,15" shape="poly">
</map>
```
Sign in with Wallet
Connect another wallet