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

Advanced

Re: [期中作業]RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

1. 參照 
[講義] RWD-OnePage網頁實作解析(一)輪播圖-Grid System格線系統



[講義] OnePage網頁實作解析(一)輪播圖-Grid System格線系統
http://mepopedia.com/forum/read.php?804,87859

[講義] OnePage網頁實作解析(二)相片分類與燈箱效果、地圖設定
http://mepopedia.com/forum/read.php?804,87905



2. 作業說明


1.請以個人網站、作品集或自己有趣的主題製作,✷站內容與作品須原創✷,不可使用他人作品,✷如需使用他人作品須取得授權✷。

2.請以老師上課版型製作,或者參照免費版型,挑選一適合期中作業主題的版型,結合選擇之版型製作。
OnePage免費版型資源
https://onepagelove.com/templates
https://startbootstrap.com/template-categories/one-page/
https://colorlib.com/wp/best-one-page-wordpress-themes/

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

3.需完成之製作項目:
(1)使用圖示字體(icon font) Font Awesome。
(2)製作輪播圖
(3)了解網頁格線概念,並進行修改。
(4)製作作品相簿分類,並進行修改。
(5)製作地圖嵌入。

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

請回覆於作業文章

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



3. 製作進度


第六週 10/16 OnePage網頁實作/使用圖示字體(icon font) Font Awesome
第七週 10/23 OnePage網頁實作/slider /Grid system
第八週 10/30 OnePage網頁實作/相簿 /地圖
第九週 11/06 RWD網站製作/案例分析/問題討論
第十週 11/13 期中作業發表與檢討



4. 參考範例


http://ftp.mepopedia.com/~css107a/midterm/midterm-1065445121/

1.畢業專題
http://mepopedia.com/~css105-2a/lion_candy/

2. 活動網站
http://ccnt1.cute.edu.tw/cpland/4e/
http://ccnt1.cute.edu.tw/cpland/future/
http://www.cute.edu.tw/dvcd/master/

3. 品牌與導覽網站設計
http://ccnt1.cute.edu.tw/cpland/4e/http://www.cute.edu.tw/dvcd/lieyu/





5. 課程影片


https://youtu.be/aGO1GQxbwTI






https://youtu.be/BrslTed-BB4





Edited 3 time(s). Last edit at 11/01/2019 03:01PM by JinJin.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108a/midterm/midterm-1075445036
(2) 參考之版型網址: http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:貓咪餐廳 / 文青
(4) 導覽列項目: 首頁、關於、服務、菜單、景觀、地圖
(5) 遇到之問題: 完成了 但有BUG好難過,作了3天3夜黑眼圈超嗨
BUG在轉換圖片的那部分
(6) 製作時間: 無上限
(7) 製作心得:做得心被擊敗



Edited 1 time(s). Last edit at 11/12/2019 11:20PM by 1075445036朱儀瑄.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108a/midterm/midterm-1075445075
(2) 參考之版型網址: http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:個人網頁 / 文青
(4) 導覽列項目: 首頁、關於、如何找到我、關於我們
(5) 遇到之問題: 顏色還沒改完,用舊版好難做,做到心好累
(6) 製作時間: 還沒做完 還在持續中
(7) 製作心得:心累卻還沒全部完成

(1) 作業網址 :http://file.mepopedia.com/~css108a/midterm/midterm-1075445037
(2) 參考之版型網址: http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:個人網頁 / 簡約
(4) 導覽列項目: 首頁、關於、床邊故事、照片、地圖
(5) 遇到之問題: 我要摸索很久、還有我眼睛好痛來不及做完
(6) 製作時間: 還要繼續做但我眼睛可能需要休息一下
(7) 製作心得:眼睛真的很痛

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445073
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:粉嫩
(4) 導覽列項目:首頁/關於追星/音樂節目/追星歷程/團體/地圖
(5) 遇到之問題:有時候圖片讀不出來,要嘗試幾次
(6) 製作時間:一整天
(7) 製作心得:雖然圖片置入有點麻煩,但做完很有成就感

(1) 作業網址 :http://file.mepopedia.com/~css108a/midterm/midterm-1075445045
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:旅行/輕鬆看起來舒服的湖水綠風格
(4) 導覽列項目:HOME/ABOUT/TRAVEL/PHOTO/WONDERLAND/OUTSET
(5) 遇到之問題:圖片跑掉原來是沒改css、icon部分還沒做完confused smiley而且不太會做Font Awesome圖示字體
(6) 製作時間:6天
(7) 製作心得:還沒有做完!!sad smiley



Edited 1 time(s). Last edit at 11/13/2019 10:07AM by 1075445045.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108a/midterm/midterm-1075445005
(2) 參考之版型網址: http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:法鬥
(4) 導覽列項目: 首頁、關於、瞭解、照片、網紅、地圖
(5) 遇到之問題: 標題不知道為什麼不能變顏色
(6) 製作時間: 無上限
(7) 製作心得:這次的網頁太多語法 眼睛要爛了

(1) 作業網址 :http://file.mepopedia.com/~css108a/midterm/midterm-1075445023/
(2) 參考之版型網址: http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:自我介紹 / 橘色
(4) 導覽列項目: 首頁 自我介紹 課程領域 我的作品 個人分享 學校地址
(5) 遇到之問題: 看不到輪播圖和圖片
(6) 製作時間: 快兩個禮拜
(7) 製作心得:覺得超難的



Edited 1 time(s). Last edit at 11/13/2019 09:30PM by 1075445023.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108a/midterm/midterm-1075445015
(2) 參考之版型網址: http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:偶像/暗色
(4) 導覽列項目: 首頁、關於、認識他、照片、官方、地圖
(5) 遇到之問題: 覺得很多細節要處理很麻煩、而且蠻多看不懂的
(6) 製作時間: 無上限
(7) 製作心得:做到很累