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

Advanced

[期末作業] 專題網站設計

[期末作業說明] 專題網站製作


1. 作業說明


請參考[期末作業說明] 專題網站製作--以網站新人王或全國慈善/科技/人文網頁設計比賽
為例


1. 參考網址


2018年全國慈善/科技/人文網頁設計比賽暨行動APP創作比賽
https://www.cpmah.org.tw/2018.html
2017網頁設計比賽得獎名單
https://www.cpmah.org.tw/2017/20160903.html
2018網頁設計比賽得獎名單
https://www.cpmah.org.tw/2018/20180911.html

1.2017-第16屆新人王網站設計大賽 http://2017.netking.tw
2.2016-第15屆新人王網站設計大賽 http://2016.netking.tw
3.2015-第14屆新人王網站設計大賽 http://2015.netking.tw
4.2014-第13屆新人王網站設計大賽 http://2014.netking.tw 發掘台灣新亮點
5.2013-第12屆新人王網站設計大賽 http://2013.netking.tw 台灣讚起來,讓全世界看見(行銷台灣)
6.2012-第11屆新人王網站設計大賽 http://2012.netking.tw 戀戀故鄉,點亮台灣
7.2011-第10屆新人王網站設計大賽 http://2011.netking.tw 建國一百,幸福台灣
8.2010-第9屆新人王網站設計大賽 http://2010.netking.tw 發掘台灣的故事




請設計與台灣有關的主題
如:景點,小吃,行業,廟宇,風俗,文化,故事....等。

可參考現有免費版型製作,須為多頁版型
http://mepopedia.com/forum/read.php?804,87785

所有網站內容須為原創
包含文字、照片及插圖
若為他人之文字或圖片請務必取得授權並註明來源

*未依照要求,期末作業不及格*

2. 進度規劃


第十三週12/13 RWD網頁實作/列表頁/內容頁/Google Fonts網路中文字型應用
第十四週12/20 RWD首頁-Slider輪播與animation微動畫
第十五週12/27 RWD-相簿設定(繳交企劃大綱)
第十六週01/03 RWD多頁網站製作/案例分析/問題討論
第十七週01/10 期末作業/RWD多頁專題網站製作-繳交、報告與檢討
第十八週01/17 期末考週-期末檢討-分數確認


3. 企劃大綱


請於第十五週12/27前回覆
企劃大綱的內容製作

1.網站主題:
2.內容大綱(導覽列/中文/檔名):
3.參考版型:
4.主要對象(分析):
5.網頁架構圖(樹狀圖):
6.色彩規劃(色調):
7.組員名單(學號)



4. 說明


盡可能地將本學期學習的技術應用於其中
仍須以視覺美感為主,設計頁數請盡量至少以十頁以上為主
設計上若有困難,請找老師討論

每週上課確實依照進度製作,期末即可完成期末作業

第十七週上課前製作完成,課堂報告評分
*期末若未出席及繳交作業,期末成績以零分計算*


將資料夾命名為 final-學號(組長),以FTP上傳至final資料夾
作業網址為
A班:http://ftp.mepopedia.com/~css107a/final/final-1065445XXX
C班:http://ftp.mepopedia.com/~css107c/final/final-1065445XXX



5. 製作完成後回覆項目


製作完成後,請在企劃內容前編輯加入以下內容:

1.作業網址:
A班:http://ftp.mepopedia.com/~css107a/final/final-1065445XXX
C班:http://ftp.mepopedia.com/~css107c/final/final-1065445XXX

2.網站主題:
3.內容描述:
4.風格設計:
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
6.個人製作心得:

(請編輯於企劃之前)



6. 評分標準


1.視覺美感、創意
2.內容技巧,是否有應用所學技巧
3.網頁架構(HTML+CSS)網頁效能 jQuery
4.網頁內容完整性、原創性
5.工作分配之項目



上傳圖片可使用
http://imgur.com/

若寬度太寬,請使用以下語法,將圖片網址帶入:
<img width="100%" src="圖片網址" border="0">

7. 參考範例


http://mepopedia.com/forum/read.php?2723,88098



Edited 6 time(s). Last edit at 01/10/2019 08:39AM by JinJin.
(編輯記錄)

1.作業網址:
http://ftp.mepopedia.com/~css107c/final/final-1065445141/final
2.網站主題:回憶錄
3.內容描述:介紹手機相冊裏各種照片
4.風格設計:簡單
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):HCM HCM一手包辦
6.個人製作心得:以前一直覺得會做網頁很酷很難會禿頭,但是跟著老師上課教的内容一點點學習,感覺自己升華了哈哈哈哈。有了之前做網頁的練習,期末的網頁製作速度快了許多,語法也看熟練了。謝謝老師這個學期教會了我們許多的技巧,辛苦你了!



1.網站主題: 回憶錄
2.內容大綱(導覽列/中文/檔名): 初來乍到(index.html) 出門耍呀(chumen) 日常生活(richang) 獻醜作品(zuopin)
3.參考版型:老師上課版型
4.主要對象(分析): 介紹手機相冊裏的一些照片
5.網頁架構圖(樹狀圖):

6.色彩規劃(色調): 白
7.組員名單(學號):1065445141



Edited 8 time(s). Last edit at 01/10/2019 07:30PM by 是很聰明呀.
(編輯記錄)

1.網址:http://ftp.mepopedia.com/~css107a/hw01/hw01-1065078
2.設計概念與製作心得: 我的偶像小松菜奈,幫他做一個演藝紀錄
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因 :http://www.ainwoods.com/LOVESERIES?fbclid=IwAR1t5zwRZ1vYaHHNMNswL4L0wb4VPNfFz9R2HeFCddxbugv6lh1132-HQQw 很好看
5.期待這門課的學習成果與收穫為何? 知道如何做網頁的基礎。

1.作業網址: http://ftp.mepopedia.com/~css107a/final/final-1065445121
2.網站主題: 烏來遊記
3.內容描述: 介紹烏來觀光地區
4.風格設計: 鮮明愉悅
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 自己一人
6.個人製作心得: 其實說難不難,說簡單也不簡單,因為我是自己一個人做,所以從拍攝照片開始就是一大難題,加上烏來在山區,常常下雨,我也是淋著雨拍照,再來對我來說製作上最大的煩惱就是,更改顏色這件事,真~~~~~~的找不到阿!!!老師!!!去網頁上用檢查,也無法顯示,超級耗時的,幾乎時間都是用在找顏色,還會搞不清楚改的位置到底對獨對,做這個真的很崩潰,眼睛看太多英文不太好,但這學期有上老師的網頁課真的收穫很多,還好我有修,有很多東西多是新接觸的,這才讓我有真正意義上的學習,是目前為止我上過最有用的課,對自己也有很大的幫助,謝謝老師~~


1.網站主題: 烏來遊記
2.內容大綱(導覽列/中文/檔名):烏來遊記/光觀烏來/美景欣賞/與我聯絡
3.參考版型: 老師上課提供的
4.主要對象(分析): 景點介紹分享
5.網頁架構圖(樹狀圖):

6.色彩規劃(色調): 簡約白 黃、黑、灰配
7.組員名單(學號)1065445121



Edited 4 time(s). Last edit at 01/10/2019 08:33AM by JinJin.
(編輯記錄)

1.網站主題: EAT ME
2.內容大綱(導覽列/中文/檔名):首頁/EAT/PHOTO/聯絡我
3.參考版型: 老師的
4.主要對象(分析): 新竹台中咖啡廳美食
5.網頁架構圖(樹狀圖): https://imgur.com/a/EPUthFJ
6.色彩規劃(色調): 豐富色彩

1.作業網址:
A班:http://ftp.mepopedia.com/~css107a/final/final-1065445067

2.網站主題:EAT ME
3.內容描述:介紹新竹台中美食
4.風格設計:簡約
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):我自己
6.個人製作心得: 做起來雖然偶爾有點混亂但是如果腦袋清楚的話看程式碼改東西是很好玩的哈哈哈,而且做起來很有成就感



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

1.作業網址:
C班:http://ftp.mepopedia.com/~css107c/final/final-1065445003

2.網站主題:詩情畫意
3.內容描述:介紹王維的詩和我的畫結合再一起
4.風格設計: 溫暖
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
6.個人製作心得:那個是畫水墨作品,是畫得有氣勢。 但是字體來不及改,行距找不到地方改。網頁瑕疵有點多,期待可以做得更好。


1.網站主題:詩中有畫
2.內容大綱(導覽列/中文/檔名): 首頁 關於我 關於王維 詩中的畫 地圖
3.參考版型:老師上課的範例
4.主要對象(分析):王維的詩和我的畫
5.網頁架構圖(樹狀圖):



6.色彩規劃(色調):淡皮膚色系
7.組員名單(學號) 1065445003



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

1.作業網址:
http://ftp.mepopedia.com/~css107c/final/final-1065445135

2.網站主題:角色介紹
3.內容描述:介紹各個原創角色
4.風格設計:簡單
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
6.個人製作心得:覺得做網頁有點慢慢上手了~雖然有時候還會思考到腦殼疼






1.網站主題: 原創角色介紹
2.內容大綱(導覽列/中文/檔名): 首頁/角色/攝影/聯絡
3.參考版型:老師上課版型
4.主要對象(分析): 原創廚廚廚
5.網頁架構圖(樹狀圖):https://i.imgur.com/POfpryM.jpg
6.色彩規劃(色調):白 淡彩
7.組員名單(學號):1065445135



Edited 2 time(s). Last edit at 01/10/2019 10:01AM by magooo.
(編輯記錄)

1.網站主題: 個人展覽
2.內容大綱(導覽列/中文/檔名): 首頁/照片區/..
3.參考版型: 網路版型
4.主要對象(分析): 自己
5.網頁架構圖(樹狀圖):https://imgur.com/N1TDOJL
6.色彩規劃(色調): 鮮豔色調
7.組員名單(學號) 1065445100



Edited 2 time(s). Last edit at 01/03/2019 03:03AM by wr00239754.
(編輯記錄)

1.作業網址: http://ftp.mepopedia.com/~css107a/final/final-1065445127
2.網站主題: 吉他社網站
3.內容描述: 吉他社介紹
4.風格設計:我也不知道我算是甚麼風格,應該是『輕鬆優雅der』感覺ㄅ?
5.個人製作心得:找不到程式碼在哪~(累)



1.網站主題: 吉他社介紹
2.內容大綱(導覽列/中文/檔名): 首頁 吉他社相關活動表演
3.參考版型:老師上課版型
4.主要對象(分析): 吉他社
5.網頁架構圖(樹狀圖)




Edited 2 time(s). Last edit at 01/10/2019 11:00AM by 小肥蚊.
(編輯記錄)

1.作業網址: http://ftp.mepopedia.com/~css107a/final/final-1065445010/index.html
2.網站主題: 海港基隆
3.內容描述: 介紹基隆
4.風格設計:恩....簡約(?) 色調為海藍調
5.個人製作心得:做到有點小小的崩潰....不過還可以啦...大概,謝謝老師這一學期的教學!

1.網站主題:海港基隆
2.內容大綱(導覽列/中文/檔名):認識基隆/基隆景點/基隆美景/與我聯絡
3.參考版型: 老師上課提供的
4.主要對象(分析):景點介紹分享
5.網頁架構圖(樹狀圖):https://i.imgur.com/0XnJqrL.jpg
6.色彩規劃(色調):藍色系、白色
7.組員名單(學號) 1065445010



Edited 4 time(s). Last edit at 01/10/2019 08:46PM by 1065445010.
(編輯記錄)

1.網站主題: 無名之地
2.內容大綱(導覽列/中文/檔名): 首頁/方圓之內/攝影/關於我(部分可能進行修改)
3.參考版型: 老師提供的版型
4.主要對象(分析): 北湖附近的景色和人文
5.網頁架構圖(樹狀圖):
https://scontent.ftpe8-1.fna.fbcdn.net/v/t1.0-9/49101929_371041393655088_8830978099500810240_n.jpg?_nc_cat=109&_nc_ht=scontent.ftpe8-1.fna&oh=5e408f81234be8032e12e6ef080d0bb4&oe=5C9C7A9C
6.色彩規劃(色調): 偏暗,會適當出現活潑的暖色
7.組員名單(學號):1065445139 何元耀

作業網址:
http://ftp.mepopedia.com/~css107c/final/final-1065445111
2.網站主題: MY LIFE .
3.內容描述: 日常生活
4.風格設計: 簡約
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
6.個人製作心得:這次的網頁比之前的內容更複雜.繁瑣了一點,不過還是順利做完了!!!
每次做完都覺得好有成就感喔!!!隨然真的好累......

1.網站主題: MY LIFE .
2.內容大綱(導覽列/中文/檔名):首頁 / 日常生活 / 福爾摩沙的美 / 遊來遊趣 / 隨意拍
3.參考版型: 老師上課版型
4.主要對象(分析):生活中的人事物
5.網頁架構圖(樹狀圖):
6.色彩規劃(色調): 無彩色 / 亮色系
7.組員名單(學號):1065445111



Edited 7 time(s). Last edit at 01/16/2019 02:38AM by 洪嬿婷.
(編輯記錄)

1.作業網址:
http://ftp.mepopedia.com/~css107c/final/final-1065445051
2.網站主題: 旅遊日記
3.內容描述: 介紹好玩的地方及我的日常
4.風格設計:簡約
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 劉芮妤全包
6.個人製作心得:一開始覺得網頁很難,一大推語法、密密麻麻的英文,但慢慢了解語法的意思其實沒有想像中這麼難,只是偶而會看到花掉,不知道自己用到哪,覺得很心累。因為早八常常睡過頭,都沒聽到老師講什麼,覺得很對不起老師,但老師很認真把講義跟影片都放在網站上,每一個步驟都做得很詳細,看著講義及影片一個步驟一個步驟慢慢做,終於完成了,超有成就感。

1.網站主題:Travel diary
2.內容大綱(導覽列/中文/檔名):Home /About_Ruiyu/Taiwan_台灣旅行/Life_日常
3.參考版型: 老師提供的版型
4.主要對象(分析):介紹我的日常及出去玩的趣事
5.網頁架構圖(樹狀圖):

6.色彩規劃(色調):藍色、綠色、白色
7.組員名單(學號):1065445051



Edited 4 time(s). Last edit at 01/12/2019 11:10PM by LRY.
(編輯記錄)

1.網站主題: CAR
2.內容大綱(導覽列/中文/檔名): 介紹台北 風景
3.參考版型: WIX 設計師頁面
4.主要對象(分析): 所有人
5.網頁架構圖(樹狀圖): https://imgur.com/a/XEjpjGC
6.色彩規劃(色調): 藍色調
7.組員名單(學號) 王鳴志1065445043

1.作業網址: https://mingzhi0746.wixsite.com/0746
2.網站主題: CAR
3.內容描述: 介紹台北這個地方 讓大家看看台北的風景
4.風格設計: 水藍色風
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):我只有一個人
6.個人製作心得: 現在的網頁設計起來比較方便很多都不用自己打程式碼,只要點幾下就可以用好了。



Edited 5 time(s). Last edit at 01/09/2019 11:44PM by 王鳴志.
(編輯記錄)

1.網站主題: 夜市
2.內容大綱(導覽列/中文/檔名): 介紹台灣夜市
3.參考版型:https://html5up.net/editorial
4.主要對象(分析): 想去夜市的觀光客
5.網頁架構圖(樹狀圖):
6.色彩規劃(色調): 以乾淨為主 強調色選紅色
7.組員名單(學號)魏鈺融 1045440044

1.作業網址: 、
2.網站主題:http://ftp.mepopedia.com/~css107c/final/final-1045440044
3.內容描述: 介紹臺灣夜市有哪些 讓來台灣的觀光客知道
4.風格設計: 簡潔
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):me
6.個人製作心得:想要嵌入google map 但一直沒辦法成就點擊圖片跳iframe



Edited 4 time(s). Last edit at 01/16/2019 10:07PM by 1045440044.
(編輯記錄)

1.作業網址:
http://ftp.mepopedia.com/~css107c/final/final-1065445021/

2.網站主題:介紹自己
3.內容描述:介紹自己的全部
4.風格設計:簡單
5.組員名單 :自己
6.個人製作心得:雖然有很多堂課都睡過頭沒去上課...但還好老師有把製作教學放在網路上讓我參考,但還是覺得做網頁很累...腰都酸了...可是做完之後很佩服自己,感謝老師讓我從看不懂程式碼到了解問題在哪並趕快做修改的人,讓我比沒修這門課的人更了解網頁設計的原理。



1.網站主題: 介紹自己還有日常
2.內容大綱(導覽列/中文/檔名): 首頁/關於我/日常紀錄/我的作品/聯絡我
3.參考版型:老師上課版型
4.主要對象(分析): 主要分析自己的全部
5.網頁架構圖(樹狀圖):


6.色彩規劃(色調): 背景白/主色調綠色
7.組員名單(學號):1065445021



Edited 4 time(s). Last edit at 01/10/2019 10:09AM by 陸憶庭.
(編輯記錄)

1.作業網址:
http://ftp.mepopedia.com/~css107c/final/final-1045445114
2.網站主題:Melancholy fish
3.內容描述:拍攝一個以魚為主題的網站
4.風格設計:簡單
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):獨自完成
6.個人製作心得:網業很難.然後又忙專題.早八的課好幾次都爬不起來sad smiley 實在不太應該sad smiley 回去只好看老師上船的影片分解來操作smiling bouncing smiley
7.組員名單(學號):1045445114



Edited 1 time(s). Last edit at 01/10/2019 10:16AM by 4c1045445114.
(編輯記錄)

1.網站主題:台灣聖誕節
2.內容大綱(導覽列/中文/檔名):首頁(index)聖誕新聞(news)、相簿( blatgallery、sicmgaller、tscmgaller、ptcmgaller、tnccgaller)
3.參考版型: 老師提供的版型
4.主要對象(分析): 台北地區有名聖誕布置景點
5.網頁架構圖(樹狀圖):
https://drive.google.com/drive/folders/1lxBTHuAfBtbVkxes3YPntRcAeSU38dPB?usp=sharing
6.色彩規劃(色調): 白、深藍色
7.組員名單(學號) 1065445001/1065445013






1.作業網址:
A班:http://ftp.mepopedia.com/~css107a/final/final-1065445001


2.網站主題: 台灣聖誕節景點
3.內容描述: 聖誕節是西方國家的節日,因此想介紹台灣在布置聖誕節會怎麼布置製造氣氛
4.風格設計:簡單又有意點華麗的感覺
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
黃竹君:拍攝、網頁製作、動畫製作、修圖
游佳軒:拍攝、LOGO、ICON、網站架構圖、修圖
6.個人製作心得:能把台灣聖誕美麗景點整理成網頁覺得很棒,也覺得台灣的聖誕布置其實不輸給其他國家,而在這次分業中也更熟悉其中接觸過的程式碼以及新的程式碼,收穫良多。



Edited 3 time(s). Last edit at 01/12/2019 09:05PM by 1065445001.
(編輯記錄)

1.作業網址:
C班:http://ftp.mepopedia.com/~css107c/final/final-1065445009
2.網站主題: 攝影作品
3.內容描述: 照片分享
4.風格設計: 簡潔
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 自己
6.個人製作心得: 比一頁難一百倍,選單超級難用,每多一個選單就要重做一次,眼睛差點死亡,不過非常有成就感~

1.作業網址:
C班:http://ftp.mepopedia.com/~css107c/final/final-1065445078

2.網站主題: 自己的攝影 插圖
3.內容描述: 發表攝影插圖
4.風格設計: 簡約
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 自己
6.個人製作心得: 我快瘋了

期末作業

1.作業網址:
http://ftp.mepopedia.com/~css107c/final/final-1065445032/
2.網站主題:我的日常和大學生活的點點滴滴
3.內容描述:介紹自己的許多回憶
4.風格設計:簡單
5.組員名單:1065445032 丁姵文
6.個人製作心得:以前在學習網頁時都覺得網頁非常難,但這學期在學習網頁自己摸索後發現只要認識網頁裡面的基本,改起來其實非常的簡單,感謝老師上課時有錄製教學影片,回家做作業時有忘記的地方還可以有東西複習。
1.網站主題: 我的日常和大學生活的點點滴滴
2.內容大綱(導覽列/中文/檔名): 我的首頁 隨手拍 毛小孩與日常生活 與我聯絡
3.參考版型:老師上課版型
4.主要對象(分析): 分享自己的生活
5.網頁架構圖(樹狀圖):

6.色彩規劃(色調): 橘色
7.組員名單(學號):1065445032

1.作業網址:
C班:http://ftp.mepopedia.com/~css107c/final/final-1065445019

2.網站主題:photo
3.內容描述: 放一些出去玩的照片
4.風格設計: 簡約風格
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 我
6.個人製作心得:其實在做作業做完還蠻有成就感的,有點像是在變魔術一樣想它動就動不想要就刪掉。

1.作業網址:
C班:http://ftp.mepopedia.com/~css107c/final/final-1065445018

2.網站主題: 攝影
3.內容描述:攝影作品 日常照片
4.風格設計: 極簡風格
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 自己
6.個人製作心得: 我覺得做網頁很有趣!雖然很難。

1.作業網址: http://ftp.mepopedia.com/~css107a/final/final-1065445127
2.網站主題: 吉他社網站
3.內容描述: 吉他社介紹
4.風格設計:極簡
5.個人製作心得:找不到程式碼在哪~(累)

1.作業網址: http://ftp.mepopedia.com/~css107a/final/final-1065445064
2.網站主題: 隨拍旅影
3.內容描述: 用手機的照片跟我的插畫 簡單的介紹我自己 還有我去了哪裡
4.風格設計:墨綠 黑
5.網站架構
首頁. 網誌
作品. 作品一覽.插畫.攝影.影片
關於. 我 家庭 學習經歷
聯繫我

6.個人製作心得:我果然還是很不會用程式碼 但是當我把圖片跟文字放進去 成功的那瞬間 開心是發自內心的
有一個問題困擾著我 網頁裡 關於 的部分 雖然做了網頁 但是從首頁點擊選項卻沒有反應
上網查也找不到 看著別的選項都能按 就只有他沒反應 難過