[期中作業] OnePage-個人網頁製作

1. 製作OnePage網頁

---

2. 參照期中前講義製作

---

3. 作業說明

1.請以個人網站、作品集等主題製作，作品須原創，不可使用他人作品。

2.參照免費版型，挑選一適合期中作業主題的版型，結合選擇之版型製作。
DreamTemplate
http://www.dreamtemplate.com
tooplate 
http://www.tooplate.com/free-templates
templatemo 
http://www.templatemo.com/page/1
Free CSS Free CSS Templates, CSS Layouts & More! 
http://www.free-css.com/free-css-templates
HTMLl5UP 
https://html5up.net
W3.CSS Templates 
https://www.w3schools.com/w3css/w3css_templates.asp
Free Responsive HTML5 CSS3 Website Templates 
https://medium.com/web-development-zone/free-responsive-html5-css3-website-templates-bcbe3f8a20b9
https://onepagelove.com/templates
https://startbootstrap.com/template-categories/one-page/
https://colorlib.com/wp/best-one-page-wordpress-themes/

3.需完成之製作項目：
(1)製作個人favicon
(2)使用圖示字體(icon font) Font Awesome，並使用最新版本作更替。
(3)製作輪播圖
(4)了解網頁格線概念，並進行修改。
(5)製作作品分類，並進行修改。

4.製作完畢請上傳FTP，midterm資料夾。

請回覆於作業文章

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-105ooooo
(2) 參考之版型網址：
(3) 設計主題 / 風格
(4) 導覽列項目：
(5) 遇到之問題:
(6) 製作時間:
(7) 製作心得:

4. 課程影片

https://youtu.be/aGO1GQxbwTI

(1) 作業網址 ：
http://mepopedia.com/~web106-2b/midterm/midterm-1055445038

(2) 參考之版型網址：
http://www.tooplate.com/free-templates
(3) 設計主題 / 風格 : 主題是自己的畫作,以油畫.水彩為主,以及兩段影片!有一個藏在畫裡面~

(4) 導覽列項目：首頁, 關於,各類型作品,年份,如何聯繫

(5) 遇到之問題: 有些東西會突然不見,或是變大,但後來都有回來~不知道進去的時間可不可以縮短...~

(6) 製作時間: 3天

(7) 製作心得:比之前的網站更有質感,很開心!



(編輯記錄)

(1) 作業網址 ：
http://mepopedia.com/~web106-2b/midterm/midterm-1055445148

(2) 參考之版型網址：
http://www.free-css.com/free-css-templates/page219/auro
(3) 設計主題 / 風格 : 主題是自己的作品，風格簡單大方。

(4) 導覽列項目：首頁, 關於,作品,鼓勵話語,如何聯繫

(5) 遇到之問題: 原本網站版型語法很多，看上去很複雜。

(6) 製作時間: 2天

(7) 製作心得:因為放自己的作品,很開心!

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445052
(2) 參考之版型網址：http://www.tooplate.com/live/2089-meteor
(3) 設計主題 / 風格 : 我的插畫品牌 / 可愛插畫
(4) 導覽列項目：關於我 / 手繪 / 聯絡資訊 / 市集 / 商品
(5) 遇到之問題: 圖片更改大小較麻煩，其他都還可以!
(6) 製作時間: 一天
(7) 製作心得: 覺得製作個人網頁滿有趣的!



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445082
(2) 參考之版型網址： http://www.tooplate.com/live/2089-meteor
(3) 設計主題 / 風格 :個人攝影及作品 / 簡單的風格
(4) 導覽列項目： home /about / story / Introduction /
(5) 遇到之問題: 沒有什麼太大的問題，有遇到問題都有放慢步調去找出答案。
(6) 製作時間: 兩天
(7) 製作心得:完成了屬於自己的網頁，很有成就感。



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445056
(2) 參考之版型網址 ：http://www.dreamtemplate.com
(3) 設計主題 / 風格 ：主題是介紹更詳細的自己 (哈)
(4) 導覽列項 ：PHOTOS - ABOUT - SCHOOL
(5) 遇到問題 ：覺得很多東西會亂跑~~~
(6) 製作時間 ：一個晚上 !!
(7) 製作心得 ：做出來很有心得



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445097
(2) 參考之版型網址：http://www.tooplate.com/view/2083-steak-house
(3) 設計主題 / 風格 : 我的插畫品牌 / 可愛插畫
(4) 導覽列項目：關於我 /品牌故事/我的商品/連結
(5) 遇到之問題: 圖片找不到於砝碼可以換XD
(6) 製作時間: 2天
(7) 製作心得:還不錯



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445095
(2) 參考之版型網址： http://ccnt1.cute.edu.tw/cpland/future/
(3) 設計主題 / 風格 :個人作品介紹/簡約
(4) 導覽列項目：home/about/paint/design/link
(5) 遇到之問題: css改起來有些困擾,圖片改大小很麻煩.
(6) 製作時間: 約3天.
(7) 製作心得: 很棒很好玩,感謝老師.



(編輯記錄)

作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445191
參考之版型網址：https://onepagelove.com/verum
設計主題 / 風格 : 個人作品 /簡約
導覽列項目：關於 / 擅長 / 作品/ 經歷/ 聯絡方式

1055445076 李珮瑄

作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445076
參考之版型網址：https://www.w3schools.com/w3css/tryw3css_templates_streetart.htm#
設計主題 / 風格 : 個人作品展示 / 簡約 簡潔
導覽列項目：MY ARE / About
遇到之問題: 都還好 因為選到比較簡單易懂的版型
製作時間: 大概1 2天
製作心得: 會想再去挑戰較有難度的版型



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445104
(2) 參考之版型網址：https://html5up.net/forty
(3) 設計主題 / 風格：結構化 顯明
(4) 導覽列項目： 主頁-關於-攝影-平面-動態
(5) 遇到之問題:
照片無法使用燈箱效果(待解決
部分背景顏色無法調整(待解決
中後接Footer段時有區塊衝突(待解決
(6) 製作時間: longtimmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmme
(7) 製作心得: 很酷

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445071
(2) 參考之版型網址： https://colorlib.com/preview/#noah
(3) 設計主題 / 風格：個人作品集 / ME
(4) 導覽列項目： home-about-services-work
(5) 遇到之問題: 調整CSS花太多時間
(6) 製作時間: 5天吧
(7) 製作心得: 人生無憾ㄌ~

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445190
(2) 參考之版型網址：https://html5up.net/prologue
(3) 設計主題 / 風格 個人的攝影作品 / 小清新的感覺
(4) 導覽列項目： 介紹 / 照片 / 關於我
(5) 遇到之問題: 沒什麼太大的問題
(6) 製作時間: 5hr
(7) 製作心得: 很有成就感，看著自己的網站慢慢完成，很棒!

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445103
(2) 參考之版型網址： http://www.tooplate.com/view/2088-big-city
(3) 設計主題 / 風格 ：簡約
(4) 導覽列項目： HOME 關於我 作品
(5) 遇到之問題: 不知道為什麼首頁動畫會跳兩次
(6) 製作時間: 半天
(7) 製作心得: 語法一開始很亂 但之後熟悉後就看得懂了

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445007
(2) 參考之版型網址: https://html5up.net/big-picture
(3) 設計主題 / 風格 :簡潔吧
(4) 導覽列項目：Home/About us/Future/Illustrator/Contact
(5) 遇到之問題: ...... 問題都被自己解決了
(6) 製作時間:2天
(7) 製作心得:我眼睛很酸



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445176
(2) 參考之版型網址 ：忘了00..0.0.
(3) 設計主題 / 風格 ：自己
(4) 導覽列項 ： ABOUT - SKILLS - EXPERIENCE - EDUCATION - PORTFOLIO
(5) 遇到問題 ：地圖忘記麼改~~~
(6) 製作時間 ：兩個晚上
(7) 製作心得 ：感受佳

(1) 作業網址 ：
http://mepopedia.com/~web106-2b/midterm/midterm-1055445032

(2) 參考之版型網址：
https://startbootstrap.com/template-overviews/grayscale/
(3) 設計主題 / 風格 : 對於作業的悲傷之情

(4) 導覽列項目：首頁 關於(?)

(5) 遇到之問題: 做作業時心情超悲傷所以做的很微妙
(6) 製作時間: 沒在記

(7) 製作心得:.......恩...我喜歡用weebly

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445178
(2) 參考之版型網址： https://startbootstrap.com/template-overviews/agency/
(3) 設計主題 / 風格 作品集/簡單明瞭
(4) 導覽列項目： skill/portfolio/about/myself
(5) 遇到之問題: CSS改起來很麻煩，別人又做的...挺複雜的。
(6) 製作時間: 黃金24小時
(7) 製作心得: 做玩真的很有成就感，儘管眼睛都快要燒起來了，做的很不容易

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445089/
(2) 參考之版型網址： http://www.tooplate.com/view/2089-meteor
(3) 設計主題 / 風格 ：簡約
(4) 導覽列項目： HOME 關於我 作品
(5) 遇到之問題: 無
(6) 製作時間: 4小時
(7) 製作心得: 好

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445197/hw04
(2) 參考之版型網址： http://preview.uideck.com/items/crystal/
(3) 設計主題 / 風格 ：簡約
(4) 導覽列項目： 首頁, 關於,作品,如何聯繫 ，部落格
(5) 遇到之問題: 沒
(6) 製作時間: 3天
(7) 製作心得: 有版型之後畫面變得很好看

(1) 作業網址 ： http://mepopedia.com/~web106-2b/midterm/midterm-1055445014/

(2) 參考之版型網址：http://www.tooplate.com/live/2078-adventure

(3) 設計主題 / 風格 : 可能有這麼點跟設計有關

(4) 導覽列項目：WORK
ABOUT
TEAM
GALLERY
PLANS
CONTACT
(5) 遇到之問題: 體力不夠
(6) 製作時間: 下輩子都拿來用了

(7) 製作心得: 我明明只是修改內容，卻改了好久

Last edit at 2018 5 3 am 05:53 LUNSROT .

(1) 作業網址 ： http://mepopedia.com/~web106-2b/midterm/midterm-1055445140/index.html

(2) 參考之版型網址： http://www.tooplate.com/view/2089-meteor

(3) 設計主題 / 風格 : 大概是輕鬆，隨意的風格吧

(4) 導覽列項目：Home,About us,My projects,Blog,Contact us
(5) 遇到之問題:
(6) 製作時間:2000 years later

(7) 製作心得:連結一直出問題我直接懷疑人生



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445092
(2) 參考之版型網址： 我可能忘記了
(3) 設計主題 / 風格 :一閃一閃亮晶晶 小宇宙
(4) 導覽列項目： 都是我的
(5) 遇到之問題: 很多多多多 但有怪人幫解決我
(6) 製作時間: 兩天啊吧
(7) 製作心得:
快樂都快樂

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445146
(2) 參考之版型網址：我忘記去哪了
(3) 設計主題 / 風格 :插畫 簡單風格
(4) 導覽列項目： 有介紹 插畫人物等
(5) 遇到之問題: 連結部分有問題 icon置入不進去
(6) 製作時間: 不知道幾天了 因為裡面東西都短時間內生的
(7) 製作心得: 還可以 但我想做的更好

(1) 作業網址 ：
http://mepopedia.com/~web106-2b/midterm/midterm-1055445068

(2) 參考之版型網址：
找...不到
(3) 設計主題 / 風格 : 雅麥（原住名部落）的形象網站

(4) 導覽列項目：首頁, 關於,商家介紹，景點介紹，年度活動慶典，行程表，聯絡資訊

(5) 遇到之問題: 開天窗了連結太多上不完。。。

(6) 製作時間: 好...好問題 大約半個月？

(7) 製作心得:拔阿拔插啊插....第一個圖片上傳這邊居然掉圖了（不知道該如何形容



(編輯記錄)

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445073
(2) 參考之版型網址： http://www.tooplate.com/view/2094-mason
(3) 設計主題 / 風格 : 一些自己拍的照片,簡簡單單
(4) 導覽列項目： ......
(5) 遇到之問題: 在DW,導覽列跑不出來.....依然沒有克服
跟照片的間距....
(6) 製作時間: 沒有特別去記
(7) 製作心得: 恩......

1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445185
(2) 參考之版型網址： 忘了
(3) 設計主題 / 風格 :介紹自己
(4) 導覽列項目： 首頁 自傳
(5) 遇到之問題: 沒有
(6) 製作時間: 忘了
(7) 製作心得: 還可以

(1) 作業網址 ：http://mepopedia.com/~web106-2b/midterm/midterm-1055445143
(2) 參考之版型網址： http://www.tooplate.com/view/2087-kalay
(3) 設計主題 / 風格：感像是吸了大麻做出來的東西
(4) 導覽列項目： 我好像沒ˊ有導覽列
(5) 遇到之問題: 花了一點時間找了更改背景圖的地方
(6) 製作時間: 3小時左右(不包含準備時間)
(7) 製作心得: 用C6做等同自殘

(1) 作業網址 ：
http://mepopedia.com/~web106-2b/midterm/midterm-1055445002
(2) 參考之版型網址：
找...不到
(3) 設計主題 / 淡海輕軌介紹

(4) 導覽列項目：首頁,路線介紹,到旁及號誌設備，列車外觀介紹，列車內裝介紹，輕軌測試紀錄，


(6) 製作時間:2個禮拜

(7) 製作心得 難歸難但很有成就