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

Advanced

[期中作業] 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/~css108b/midterm/midterm-105ooooo
(2) 參考之版型網址:
(3) 設計主題 / 風格:
(4) 導覽列項目:
(5) 遇到之問題:
(6) 製作時間:
(7) 製作心得:



3. 製作進度


第六週 10/16 OnePage網頁實作/使用圖示字體(icon font) Font Awesome
http://mepopedia.com/forum/read.php?804,87786
第七週 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 6 time(s). Last edit at 11/01/2019 03:00PM by JinJin.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445068
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/ (老師的)
(3) 設計主題 / 風格:偶像
(4) 導覽列項目:首頁/mainArea,關於他們/about,成員介紹/Introduction,歷代專輯/Album,個人私心/Selfish
(5) 遇到之問題:改歷代專輯的時候,想要加列表卻不會加
(6) 製作時間:24小時
(7) 製作心得:做完有個成就感

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445076
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:我的作品
(4) 導覽列項目:首頁 關於我 聯絡我 我的作品 CONTOCT
(5) 遇到之問題: 從這裡打開網站發現少了一些圖片
(6) 製作時間:3小時
(7) 製作心得:把自己的作品放在網站上,感覺挺好的



Edited 1 time(s). Last edit at 11/10/2019 09:11PM by 傑宇.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445054
(2) 參考之版型網址: http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格: 韓劇鬼怪
(4) 導覽列項目: 首頁/劇情介紹/演員陣容/劇照/OST得獎歌手
(5) 遇到之問題: 圖片選擇障礙
(6) 製作時間: 一天
(7) 製作心得: 做完好爽



Edited 1 time(s). Last edit at 11/12/2019 10:49PM by 1075445054.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445086
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:沖繩/橘色
(4) 導覽列項目:首頁/mainArea,關於/aboutArea,景點/sightseeingArea,照片/photoArea,活動/eventsArea
(5) 遇到之問題:排照片的時候,跑掉了很多次
(6) 製作時間:兩天
(7) 製作心得:覺得有點難,但可以排很多照片很有趣。

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445050
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:個人/藍色
(4) 導覽列項目:首頁/mainArea 專業能力/aboutArea 興趣/interest 作品/workArea 分享/share Contact/contactArea
(5) 遇到之問題:圖示字體顏色大小跑掉(已解決)
(6) 製作時間:2天
(7) 製作心得:分享自己的作品、喜歡的東西很好



Edited 1 time(s). Last edit at 11/12/2019 10:27PM by 1075445050.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445018
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:貓咪/ 淡橘色水藍色。
(4) 導覽列項目:首頁 關於 習性 吸貓 網貓 貓貓
(5) 遇到之問題:標題字的大小無法更改,CSS語法找不到QAQ
(6) 製作時間:1天
(7) 製作心得:有點小複雜,但是看到貓貓就很開心。

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1055443132
(2) 參考之版型網址:
(3) 設計主題 / 風格:红白
(4) 導覽列項目:
(5) 遇到之問題:fontawesome图片不会置入
(6) 製作時間:3d
(7) 製作心得:略难~

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445012
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:青青踏踏遊玩誌
(4) 導覽列項目:首頁 前言 推薦地點 圖片區 私心景點
(5) 遇到之問題:文字排版一直跑掉
(6) 製作時間:一個晚上
(7) 製作心得:做完後覺得很開心,第一次用的照片都是自己拍的



Edited 1 time(s). Last edit at 11/13/2019 04:52AM by 1075445012.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445066
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:遊戲 / 墨綠色
(4) 導覽列項目:首頁 關於動森 NPC介紹 角色照片 個人愛角
(5) 遇到之問題:CSS語法很多很亂,有點難找語法
(6) 製作時間:6hr
(7) 製作心得:不會說太困難,就是東西有點多,挺複雜

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



Edited 1 time(s). Last edit at 11/13/2019 09:57AM by 1075445073.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445058
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:個人/藍色
(4) 導覽列項目:首頁 / 關於我自己 / 專業領域 / 作品欣賞 / 個人分享 / 聯絡資訊
(5) 遇到之問題:log大小設置尺寸
(6) 製作時間:14H
(7) 製作心得: 不錯~

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midtern-1075445072
(2) 參考之版型網址:GEM
(3) 設計主題 / 風格:英雄
(4) 導覽列項目:傳說對決 其實原本想做英雄聯盟
(5) 遇到之問題: 我太難了
(6) 製作時間:6小時
(7) 製作心得:人生好難



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

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midtern-1075445048
(2) 參考之版型網址:GEM
(3) 設計主題 / 風格:TEKASHI 69
(4) 導覽列項目:首頁 歌曲
(5) 遇到之問題: 發現少了一些圖片
(6) 製作時間:5小時
(7) 製作心得:,感覺挺好的猛的

1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1035445064
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/ (老師的)
(3) 設計主題 / 風格:唐詩
(4) 導覽列項目:首頁/,作品簡介,唐詩介紹,作品集,團隊,連絡我們
(5) 遇到之問題:fontawsome用不出來
(6) 製作時間:3天
(7) 製作心得:做完有個成就感

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1055440093/
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/ (老師的)
(3) 設計主題 / 風格:台中市
(4) 導覽列項目:Home,About,Traffic,Scenery,Map
(5) 遇到之問題:background-image路徑跑掉
(6) 製作時間:3天
(7) 製作心得:做完有成就感吧~但還有許多地方需要加油

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1055445133
(2) 參考之版型網址:https://startbootstrap.com/previews/stylish-portfolio/
(3) 設計主題 / 風格:介紹我
(4) 導覽列項目:首頁、關於我、能力值、作品、地點
(5) 遇到之問題:找很久圖片置入的語法在哪裡。
(6) 製作時間:一天
(7) 製作心得:做完很有成就感。

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445080
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/ (老師的)
(3) 設計主題 / 風格:個人網站/紅黑配色
(4) 導覽列項目:mainArea/首頁 aboutArea/關於我 serviceArea/fallow meworkArea/手繪集map/連絡我
(5) 遇到之問題:影片的地方有放圖片卻顯示不出來,輪播圖有時候顯示不出來
(6) 製作時間:24小時
(7) 製作心得:做完有個成就感



Edited 3 time(s). Last edit at 11/15/2019 10:08PM by 1075445080.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1055461035/
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/(老師給的範例)
(3) 設計主題 / 風格:遊戲分享和介紹 "小雅的遊戲寶箱"
(4) 導覽列項目:頁首 關於 遊戲攻略 圖集/相簿 活動攻略 找到我
(5) 遇到之問題: 1.第一次摸RWD 雖然不是陌生但不夠熟悉 改網頁花了不少時間 2.css檔 url連圖片卡關 結論是檔案路徑不得有空白字元 否則會找不到路徑 3.找圖片 特意挑自己有在玩的手遊 想要什麼樣的圖片都可以自己拍 但時間不夠 想找的圖不清楚又太小 所以big background只有兩張圖 4.相簿其實最提起我的興趣 但還沒搞懂篩選怎麼連到哪幾張圖之前 還是只有準備15張圖而已
(6) 製作時間:效率不好.....三週
(7) 製作心得:把自己喜歡的遊戲跟拍好的美圖分享給同樣喜歡奇蹟暖暖的人 很滿足 也學到新東西了 因為這次的作業 第一次自己畫logo 好像還不錯但又哪裡怪怪的 因為我是用PPT插入圖案畫的 跟那兩個軟體化的相比質感難免有差 但還是學到新東西了

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445024
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:關於自己,清晰
(4) 導覽列項目:首頁/關於P/P小癖好/P日常/PPP
(5) 遇到之問題:想不到要打什麼,詞窮鬼
(6) 製作時間:一天
(7) 製作心得:照片看起來很麻煩不好用,但才發現,照片最簡單操作,做玩又有成就感了!但還不夠好!只能加油~

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445096
(2) 參考之版型網址:https://preview.uideck.com/items/unfold/
(3) 設計主題 / 風格:少女復古雜誌回憶錄
(4) 導覽列項目:主頁/關於/變化/回憶錄/實事紀錄/平面作品
(5) 遇到之問題:軟體的習慣性問題,CC版下載不停遇到困難,只能用試用版,CS6則是非常不習慣使用,導致製作效率極差
(6) 製作時間:一週
(7) 製作心得:我還在修改也還沒做完,有點難跟一般的版型不一樣



Edited 1 time(s). Last edit at 11/18/2019 11:33PM by 1075445096.
(編輯記錄)

(1) 作業網址 :http://file.mepopedia.com/~css108b/midterm/midterm-1075445002
(2) 參考之版型網址:http://mepopedia.com/~jinjin/ex/onepage/
(3) 設計主題 / 風格:世界公正全球貿易公司/科技感
(4) 導覽列項目:貿易商介紹、產品、團隊、工作項目
(5) 遇到之問題:做得時間很長
(6) 製作時間:四週
(7) 製作心得:花很長的時間,沒有辦法準時交。