Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

[期中作業] 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) 製作心得:比之前的網站更有質感,很開心!



Edited 6 time(s). Last edit at 05/04/2018 09:50PM by tungdong.
(編輯記錄)

(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) 製作心得: 覺得製作個人網頁滿有趣的!



Edited 6 time(s). Last edit at 05/01/2018 08:06PM by 1055445052.
(編輯記錄)

(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) 製作心得:完成了屬於自己的網頁,很有成就感。



Edited 2 time(s). Last edit at 04/27/2018 06:32PM by 1055445082.
(編輯記錄)

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



Edited 2 time(s). Last edit at 04/25/2018 01:49AM by 1055445056.
(編輯記錄)

(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) 製作心得:還不錯



Edited 2 time(s). Last edit at 04/26/2018 09:06AM by 1055445097 _(:3 」∠)_.
(編輯記錄)

(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) 製作心得: 很棒很好玩,感謝老師.



Edited 1 time(s). Last edit at 04/26/2018 09:32AM by Daniel Wang.
(編輯記錄)

作業網址 :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天
製作心得: 會想再去挑戰較有難度的版型



Edited 2 time(s). Last edit at 05/05/2018 03:25PM by ukiss52007.
(編輯記錄)

(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) 製作心得:我眼睛很酸



Edited 1 time(s). Last edit at 05/03/2018 05:35AM by wuyujie.
(編輯記錄)

(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) 製作心得:連結一直出問題我直接懷疑人生



Edited 4 time(s). Last edit at 05/03/2018 05:13AM by Patrick_Lai.
(編輯記錄)

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



Edited 1 time(s). Last edit at 05/03/2018 08:40AM by 1055445068.
(編輯記錄)

(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) 製作心得 難歸難但很有成就