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

Advanced

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

108-1《中國》竹視傳二B-進階網頁設計 文章列表 發表文章 PDF 列印（下載）
JinJin [ 站內寄信 / PM ]
[期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
  1. 1. 參照 
[講義] RWD-OnePage網頁實作解析(一)輪播圖-Grid System格線系統
  2. 2. 作業說明
  3. 3. 製作進度
  4. 4. 參考範例
  5. 5. 課程影片

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



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


[hr]

https://youtu.be/BrslTed-BB4





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

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445068 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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) 製作心得:做完有個成就感

推薦 / 評論　 分享到Facebook     回應文章 Quote
傑宇 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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 傑宇.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445054 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445086 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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) 製作心得:覺得有點難，但可以排很多照片很有趣。

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445050 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445018 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
黃喬永 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(1) 作業網址 ：http://file.mepopedia.com/~css108b/midterm/midterm-1055443132
(2) 參考之版型網址：
(3) 設計主題 / 風格：红白
(4) 導覽列項目：
(5) 遇到之問題:fontawesome图片不会置入
(6) 製作時間:3d
(7) 製作心得:略难~

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445012 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445066 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445073 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445058 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445072 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445048 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(1) 作業網址 ：http://file.mepopedia.com/~css108b/midterm/midtern-1075445048
(2) 參考之版型網址：GEM
(3) 設計主題 / 風格：TEKASHI 69
(4) 導覽列項目：首頁 歌曲
(5) 遇到之問題: 發現少了一些圖片
(6) 製作時間:5小時
(7) 製作心得:，感覺挺好的猛的

推薦 / 評論　 分享到Facebook     回應文章 Quote
林旆瑀 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
1055440093 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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) 製作心得:做完有成就感吧~但還有許多地方需要加油

推薦 / 評論　 分享到Facebook     回應文章 Quote
宛如 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445080 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1055461035 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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插入圖案畫的 跟那兩個軟體化的相比質感難免有差 但還是學到新東西了

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445024 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445096 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

分類標籤: 108-1《中國》竹視傳二B-進階網頁設計
(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.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1075445002-1 [ 站內寄信 / PM ]
Re: [期中作業] RWD-OnePage網頁實作/slider/Grid system/相簿/地圖

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

推薦 / 評論　 分享到Facebook     回應文章 Quote
Newer Topic Older Topic