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

Advanced

Re: [期中作業 ] 以單欄為主的網站設計

[期中作業 ] 以單欄為主的網站設計

[color=#990000][期中作業] 以單欄為主的網站設計[/color]



1. 一、製作說明:


1.請參考期中之前教過的做法及講義,製作以單欄為主的網站

2.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color]

在#footer 註明 Designed by 某某某(可自行取名) 1055445ooo

3.題目自訂,請設計出符合網站主題的配色及設計風格。

4.需自行設計圖片,製作網站內容。

5.需以DIV搭配CSS的方式完成,設定尺寸、字體、顏色等等。

6.頁數要求:
(1)至少完成三頁的內容,語法無錯誤(60分),若內容完整,設計精美可再加分至多80。
(2)至少完成五頁的內容,語法無錯誤(80分),若內容完整,設計質感高,最多100分。

[color=#993300]7.若真的不會做,可下載附檔,參考老師的檔案,加以修改完成,但圖片及文字內容不可一樣。
(附檔有兩組:
一組是以圖片按鈕為主,需自行製作圖片
一組是以導覽列為主(色彩編排),請選擇一組參考製作)[/color]

8.製作完成上傳至FTP

9.本次作業的重點在於:

[color=#CC0000](1)能自行設計以DIV與CSS製作的網站
(2)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁[/color]



2. 二、評分標準與製作檢核


1.HTML的正確架構(DIV的使用)
2.整體設計美感(CSS運用,風格及配色,字體設定、圖片製作)
3.導覽列的正確性(含導覽超連結)
4.h1或h2的使用
5.class(類別)的運用
6.HTML Title的設定
7.Footer的版權宣告
8.內容完整的兩頁(至少)的連結
9.製作說明


3. 三、繳交作業方式


[color=#CC0066]1.製作完成後,檔案命名方式:[/color]

[color=#669900]期中作業FTP上的資料夾為:midterm

每位同學請將自己的資料夾命名為:midterm-學號
這個作業的網址則為:http://mepopedia.com/~css106-2a/midterm/midterm-105xxxxxxx

資料夾內含:
(1).首頁命名為index.html
(2).其他頁面請自行命名,但需注意命名為則,不可出現中文及全形字、特殊符號等等
(3).一個命名為style.css的css樣式檔
(4).存放圖檔的images資料夾

存放在 < midterm-學號 > 的資夾內[/color]


[color=#CC0066]2.全部完成後上傳至FTP[/color]

[color=#CC0066]3.依進度回覆本篇文章[/color]


[color=#0066CC]前置作業[/color](11/16)
(1)網站主題:
(2)製作動機:
(3)製作內容:
(每個導覽列的中文及(英文檔名))
(4)風格設定:
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:



[color=#0066CC]完成品[/color](11/23/30前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-105xxxxxxx
(2)
1有無遇到的問題
2.製作感想
3.製作作業的時間


[color=#CC0066]4.請務必在11/23前回覆,否則為遲交[/color]

寫法參考:http://mepopedia.com/forum/read.php?2603,82673

4. 五、同學常見問題之注意事項



隨時補充:

1.網頁圖檔不宜太大,否則網頁開啟速度會變慢,請盡量在Photoshop或Illustrator的『儲存為網頁與裝置用』的功能裡,修改圖檔的大小至100KB以下,100KB會佔1Mb頻寬(每秒鐘),以此類推。

2.有文字出現的區塊,要記得設定padding,文字才不會跟邊框黏在一起。

3.亂碼問題,放在 <head> </head> 之間
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 編碼方式記得存utf-8

5.CSS檔案的路徑,放在 <head> </head> 之間
<link rel="stylesheet" href="style.css" media="screen" />
6.檔案宣告,在HTML檔最前面放 <!DOCTYPE html>
7.任何出現在網頁裡的命名不能出現中文及全形字。

8.圖片必須放在images圖片資料夾裡

[hr]

5. 參考範例



http://mepopedia.com/forum/read.php?851,16485

http://mepopedia.com/forum/read.php?855,16484

[hr]
http://mepopedia.com/~web100b/midterm/midterm-1001445022/
http://mepopedia.com/~web100b/midterm/midterm-1001445042/
http://mepopedia.com/~web100b/midterm/midterm-1001445006/
http://mepopedia.com/~web100a/midterm/midterm-1001445068/
http://mepopedia.com/~web100a/midterm/midterm-1001445096/
http://mepopedia.com/~web100a/midterm/midterm-1001445015/
http://mepopedia.com/~web100b/midterm/midterm-1001445049/
http://mepopedia.com/~web100b/midterm/midterm-1001445123/
http://mepopedia.com/~web100b/midterm/midterm-1001445026/
http://mepopedia.com/~web100a/midterm/midterm-1001445072/
http://mepopedia.com/~web100a/midterm/midterm-1001445080/

http://mepopedia.com/~web103-a/midterm/midterm-1025445001/
http://mepopedia.com/~web103-a/midterm/midterm-1025445070/
http://mepopedia.com/~web103-c/midterm/midterm-1025445069/

=================================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
=================================================



Edited 1 time(s). Last edit at 11/30/2017 08:43AM by JinJin.
(編輯記錄)

1055445004 王咨涵

(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445004
(2)
1有無遇到的問題 :圖片的排版不如意
2.製作感想 :能幫自己喜歡的偶像製作出自己的網頁成就感很高
3.製作作業的時間 : 一週多



(1)網站主題: 南條愛乃
(2)製作動機: 因為喜歡這個歌手,想要介紹給大家
(3)製作內容: 首頁(index) 介紹(about) 音樂(album) 團體(team) 寫真(photo) 影音(video) 連結(links)
(每個導覽列的中文及(英文檔名))
(4)風格設定: 潔白清爽 清新感
(5)資料蒐集分析

https://zh.moegirl.org/zh-hant/%E5%8D%97%E6%9D%A1%E7%88%B1%E4%B9%83
由各種不同的粉絲一起共同整理的資料
資料量大且錯誤不多

◎設計優良網站(風格)列表與分析:
http://corgipower6.wixsite.com/akzome-ryo
喜歡他的網站雖然好像空空的沒甚麼東西 但卻在各種小地方散發出強烈的個人風格

http://land-of-the-lustrous.com/chara/
在角色介紹的頁面不使用整張立繪 甚至不是正面 卻能讓人一目了然的圖片切面
旁邊的分頁連結也簡單清新 不會有太繁複的視覺衝擊 能馬上就專心在主題上

http://zh.battlegirl.wikia.com/wiki/%E6%88%B0%E9%AC%A5%E5%A5%B3%E5%AD%90%E5%AD%B8%E5%9C%92_Wiki
雖然是遊戲資料卻分的很細也很清楚



Edited 2 time(s). Last edit at 11/30/2017 08:34AM by 1055445004.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445148
1)網站主題: 明星大偵探 (推理形綜藝節目)
(2)製作動機: 他特別的節目形式和角色扮演推理,讓我希望推薦更多人觀看這個節目。
(3)製作內容:
節目形式(Program form)
環節(Links)
固定玩家(Fixed players)
節目列表(Programme list)
(4)網站(風格)列表與分析:簡單、分明
(5)資料蒐集分析 :
http://jessy116.pixnet.net/blog/post/43559430-%5B%E7%B6%9C%E8%97%9D%5D%E3%80%8A%E6%98%8E%E6%98%9F%E5%A4%A7%E5%81%B5%E6%8E%A2%E3%80%8B%E7%AC%AC%E4%B8%80%E5%AD%A3&%E7%AC%AC%E4%BA%8C%E5%AD%A3%E8%A7%80%E5%BE%8C%E6%84%9F%E3%80%82
http://lokc.blog.fc2.com/blog-entry-25.html
https://baike.baidu.com/item/%E6%98%8E%E6%98%9F%E5%A4%A7%E4%BE%A6%E6%8E%A2
*相關網站列表與分析:
http://tw.weibo.com/5862147128
(簡約明瞭的設計)



Edited 1 time(s). Last edit at 11/30/2017 09:10AM by 1055445148.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445010
(2)
1有無遇到的問題 :語法看的眼睛很花
2.製作感想:好難 但有同學跟老師教 都不是問題
3.製作作業的時間:一整晚

1055445085 林安情


(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445085

(2) 1有無遇到的問題

圖片置中跟影片連結

2.製作感想 能做自己喜歡的電視劇很開心

3.製作作業的時間 2天






(1)網站主題:終極一班

(2)製作動機:以前很喜歡這一系列的電視劇,是我童年的回憶

(3)製作內容:劇情介紹(Synopsis) 主要角色(main character) 配角(supporting role) 音樂(music)連結(link)

(4)風格設定:熱血.青春

(5)資料蒐集分析
https://zh.wikipedia.org/wiki/%E7%B5%82%E6%A5%B5%E4%B8%80%E7%8F%AD
終極一班維基百科

◎設計優良網站(風格)列表與分析:
https://www.gtv.com.tw/Program/P2005112601/index.html
終極一班官方網站,看到會有一種熱血的感覺。



Edited 1 time(s). Last edit at 11/30/2017 10:11AM by 綰瑛.
(編輯記錄)

(1)網站主題:Hello Nico
(2)製作動機:喜愛的樂團
(3)製作內容:
分為4個分頁
1.樂團介紹(index.html)
2.專輯介紹 (about.html)
3.MV欣賞 (music.html)
4.樂團資訊(band.html)

(4)資料蒐集分析
相關網站列表與分析:http://tw.streetvoice.com/
版面配色風格簡單,又不失美感。

(1)作業網址:http://mepopedia.com/~css106-2a/midterm/midterm-1035443128

(2)
1有無遇到的問題:還好
2.製作感想:花很多的時間及耐心,但做出來的成果很滿意的
3.製作作業的時間:5小時



Edited 1 time(s). Last edit at 12/06/2017 07:30AM by 1035443128.
(編輯記錄)

完成品(11/23/30前)
請將這項放置於文章最前面
(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445082
(2)
1有無遇到的問題:沒有太大的問題spinning smiley sticking its tongue out
2.製作感想:製作完畢後,很有成就感。hot smiley
3.製作作業的時間 :4~5小時smileys with beer

(1)網站主題: 奧斯卡金像獎
(2)製作動機: 喜歡看大型頒獎典禮的我,想收集獲獎人的優點及作品,並向他們學習。
(3)製作內容:關於奧斯卡(about)獎項(awards)得獎人(winners)照片(photo) 連結(link)
(4)風格設定: 穩重有質感
(5)資料蒐集分析 :
Academy Awards - Wikipedia
https://en.wikipedia.org/wiki/Academy_Awards#Oscar_statuette
◎設計優良網站(風格)列表與分析:
http://www.goldenpin.org.tw/tw/
網頁中的配色人有種尊進感,因為是頂尖設計師或是有得到金典設計獎的作品
皆會在這大平台展出。讓點進此網站的人們有種進配感以及想成為得獎一份子的心情。smileys with beer



Edited 3 time(s). Last edit at 11/30/2017 08:47AM by 1055445082.
(編輯記錄)

1055445016 張渝翔
完成品
(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445016
(2)
1有無遇到的問題 :沒
2.製作感想 :邊做邊睡
3.製作作業的時間 :忘了一天吧

(1)網站主題: 射手座
(2)製作動機: 因為是射手座
(3)製作內容: 射手簡介(About) ,射手神話(Story),射手之愛(Love),射手生日解析(Birthday),不一樣的射手座(Different)

(4)風格設定: 乾淨清新
(5)資料蒐集分析 :https://zh.wikipedia.org/wiki/%E4%BA%BA%E9%A9%AC%E5%BA%A7
◎設計優良網站(風格)列表與分析:http://www.twwiki.com/wiki/%E5%B0%84%E6%89%8B%E5%BA%A7



Edited 2 time(s). Last edit at 11/29/2017 10:16PM by h2207538.
(編輯記錄)

完成品
(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445097
(2)
1有無遇到的問題 :於砝碼很多,有點眼花,排整齊也很重要。(☉д⊙)
2.製作感想 :還不錯,挺有趣的。(ノ>ω<)ノ
3.製作作業的時間 :3 ~ 4 天



前置作業
(1)網站主題: go go little ant (上啊! 小螞蟻!)
(2)製作動機: 這是我的插畫原創人物,想做一個介紹自己品牌的可愛網頁。
(3)製作內容:關於我_(about me) LINE貼圖_(LINE STORE) 商品(_commodity) 照片_(Photo) 連結_(Link)
(4)風格設定: 可愛風趣
(5)資料蒐集分析 :
http://park11.wakwak.com/~tetsuro/
這是一位日本的插畫家個人網站,背景是簡單的白色,有巨大的發展空間,作品也很可愛 ,我非常喜歡這種風格
◎設計優良網站(風格)列表與分析:
https://store.line.me/stickershop/author/82171/zh-Hant
我所製作的貼圖(可愛風格)



Edited 2 time(s). Last edit at 11/25/2017 03:18PM by 1055445097 _(:3 」∠)_.
(編輯記錄)

1055445190鄭喻云

完成品
(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445190
(2)
1有無遇到的問題 : 大致沒什麼問題,只是會花比較久時間
2.製作感想 :找自己喜歡的主題做比較有興趣,做出網頁很有成就感
3.製作作業的時間 : 1-2天左右




前置作業

(1)網站主題: 拉拉熊

(2)製作動機: 因為本身很喜歡拉拉熊,所以想做關於他們的網頁。

(3)製作內容: 關於拉拉熊(About Rilakkuma)、角色介紹(Character description)、拉拉熊店家(Rilakkuma shop)、拉拉熊書籍(Rilakkuma books)

(4)風格設定: 使用拉拉熊身上本身的顏色所製作(黃、褐、白)

(5)資料蒐集分析 https://zh.wikipedia.org/zh-tw/%E9%AC%86%E5%BC%9B%E7%86%8A

◎設計優良網站(風格)列表與分析: http://www.san-x.co.jp/rilakkuma/profile/



Edited 1 time(s). Last edit at 11/30/2017 08:37AM by yuyun.
(編輯記錄)

1055445043 賴映竹

(1)(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445043
(2)
1.有無遇到的問題
沒有什麼太大的問題
2.製作感想
做完很有成就感
3.製作作業的時間
七小時左右



前置作業(11/16)
(1)網站主題:電視劇-千金女賊
(2)製作動機:播出許久還是回味無窮,就介紹一下。
(3)製作內容:
劇情介紹(Synopsis)、主角(protagonist)、配角(supporting role)、音樂欣賞(Music)、劇照(Stills)
(4)風格設定:暗色系、金色、浪漫
(5)資料蒐集分析:
https://zh.wikipedia.org/wiki/%E5%8D%83%E9%87%91%E5%A5%B3%E8%B3%8A
◎設計優良網站(風格)列表與分析:
http://www.diehlgroup.com/
簡單大方不失質感,清晰明瞭字又少。



Edited 2 time(s). Last edit at 11/30/2017 09:28AM by 1055445043.
(編輯記錄)

1055445178 陳宜宜
1055445178
(1)作業網址: http://mepopedia.com/~css106-2a/midterm/midterm-1055445178

(2)
1有無遇到的問題: 理想跟現實往往不同,DW細節調整很累.....
2.製作感想 :製作過程中資料整理與圖片修整蠻花時間的
3.製作作業的時間 :兩個禮拜的時間




(1)網站主題: Against The Current
(2)製作動機:國高中時讀書的心靈雞湯
(3)製作內容:關於(about)專輯(Album)音樂(Music Video)連結(link)
(4)風格設定: 圖片顏色白.粉.藍

(5)資料蒐集分析:
http://lovetfjolin.pixnet.net/blog/post/75981842-%E4%BB%8B%E7%B4%B9%E8%A5%BF%E6%B4%8B%E6%A8%82%E5%9C%98-against-the-current
https://zh.wikipedia.org/wiki/%E9%80%86%E6%B5%81%E8%80%8C%E4%B8%8A%E6%A8%82%E5%9C%98
https://www.youtube.com/watch?v=VfmMU04xD74
http://tube.chinatimes.com/20160909005807-261406
◎設計優良網站(風格)列表與分析:http://www.atcofficial.com/#videos
圖片顏色白.粉.藍



Edited 2 time(s). Last edit at 11/30/2017 08:48AM by 1055445178.
(編輯記錄)

1055445169 李菀甄
完成品
(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445169
1有無遇到的問題 : 圖比較難放
2.製作感想 :學到很多東西
3.製作作業的時間 : 1-2天左右

1)網站主題: 跳躍吧!時空少女
(2)製作動機: 這是部很感人的動畫,也很好看,所以想介紹給大家
(3)製作內容: 劇情介紹(Synopsis) 人物介紹(Characters) 音樂欣賞(music appreciation)漫畫介紹(Comics introduction)編劇(screenwriter)
(4)風格設定: 青春活潑的風格
(5)資料蒐集分析
http://punchline.asia/archives/28938
◎設計優良網站(風格)列表與分析: http://promo.kadokawa.co.jp/tokikake/#COLUMN
細膩的風格介紹



Edited 6 time(s). Last edit at 11/30/2017 12:57PM by 1055445169.
(編輯記錄)

完成品(11/23/30前)
(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445052
(2)
1有無遇到的問題 : 沒甚麼大問題smiling bouncing smiley
2.製作感想 : 做過那麼多次之後,每次做都越來越上手。smileys with beer
3.製作作業的時間: 4個小時thumbs up

----------------------------------------------------------------------------------------------------------------------------
(1)網站主題:CHIH HSIN 小寧
(2)製作動機: 我想替自己的手繪品牌創立一個網站!
(3)製作內容:關於我_(about) * 品牌故事(story) * 市集資訊(Market) * 手繪商品(commodity) * 手繪插畫(illustration)
(4)風格設定: 可愛手繪風格
(5)資料蒐集分析 :
https://aiueoshigeru.com/
這是日本的一個插畫個人網站,網頁中間以及下面放自己的創作,底色用白色的乾淨簡潔~ 是我喜歡的網頁風格~
◎設計優良網站(風格)列表與分析:
https://www.instagram.com/chihhsin0729/
這是目前我在經營的手繪專頁~ smileys with beer



Edited 3 time(s). Last edit at 11/30/2017 08:46AM by 1055445052.
(編輯記錄)

1055445157 鄭宇辰

完成品
(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445157
1有無遇到的問題 : 我覺得我做的好亂 頭腦快爆了
2.製作感想 :眼睛快瞎了
3.製作作業的時間 : 2-3天


(1)網站主題:部落衝突

(2)製作動機:這是一個我很常玩的手機遊戲

(3)製作內容:遊戲影片(game film) 遊戲圖片
(game image) 遊戲內容介紹(
game content) 遊戲下載(game download)

(4)風格設定: 簡單 乾淨

(5)資料蒐集分析
https://zh.wikipedia.org/wiki/%E9%83%A8%E8%90%BD%E5%86%B2%E7%AA%81部落衝突
維基百科

設計優良網站(風格)列表與分析: https://coc.kunlun.com/



Edited 1 time(s). Last edit at 12/04/2017 05:45PM by cchjjs002.
(編輯記錄)

(1)網站主題:DAY6(樂團)
(2)製作動機:他們的音樂很好聽
(3)製作內容:團員(Member)經歷(experience)獎項(Awards)專輯(Album)音樂(music)
(4)風格設定: 流行風
(5)資料蒐集分析 :
https://zh.wikipedia.org/wiki/DAY6#.E5.BD.B1.E8.A6.96.E5.AA.92.E9.AB.94.E4.BD.9C.E5.93.81
設計優良網站(風格)列表與分析:
https://www.jype.com/
版面簡單不複雜卻有設計感


(1) 作業網址:http://mepopedia.com/~css106-2a/midterm/midterm-1055445055


 (2) 主題 / 風格設定(色彩設定部份) 湖水綠簡單不失設計感

 (3) 有無遇到的問題:有些程式碼沒有印象,要靠中文翻譯

 (4) 製作感想:一開始覺得很難又很麻煩,但做完後還蠻有成就的

 (5) 製作作業的時間 5小時



Edited 2 time(s). Last edit at 11/30/2017 09:31AM by 1055445055.
(編輯記錄)

1055445112 徐坤煌

(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445112
(2)
1有無遇到的問題 :按鈕研究很久
2.製作感想 :難
3.製作作業的時間 : 2天

1055445112 徐坤煌

(1)網站主題:ONE PIECE
(2)製作動機:很喜歡的漫畫
(3)製作內容: 作者(Author) 作品歷史(history) 故事簡介(story) 登場人物(character)
(4)風格設定: 簡單
(5)資料蒐集分析 :https://zh.wikipedia.org/wiki/ONE_PIECE
◎設計優良網站(風格)列表與分析
https://www.artstation.com/artwork?sorting=trending
字少 簡單



Edited 1 time(s). Last edit at 12/06/2017 10:13PM by aok15958.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445204
(2)
1有無遇到的問題:連結
2.製作感想 :還是有少部分語法混亂
3.製作作業的時間:3小時

(1)網站主題: 迪士尼小飛俠
(2)製作動機:迪士尼第14部經典動畫,長篇劇情動畫片
(3)製作內容: 劇情介紹(Synopsis) 人物介紹(Characters) 作者(Author)作品歷史(history)
(4)風格設定: 小飛俠衣服的顏色
(5)資料蒐集分析
https://zh.wikipedia.org/wiki/小飛俠_(電影)
維基百科
◎設計優良網站(風格)列表與分析: http://www.disney.com.tw/digital/



Edited 2 time(s). Last edit at 11/30/2017 09:13AM by 1055445204.
(編輯記錄)

1)作業網址: http://mepopedia.com/~css106-2a/midterm/midterm-1055445088

(2)
1有無遇到的問題: 按鍵鏈接問題
2.製作感想 :看到眼睛脫窗
3.製作作業的時間 :2天



(1)網站主題: 深海水族館
(2)製作動機: 最近喜歡上的手遊
(3)製作內容:
作品介紹
遊戲方法
隱藏魚
限時活動
(4)風格設定 黑底紅字
(5)資料蒐集分析 :httpsforum.gamer.com.twC.phpbsn=30852&snA=53
◎設計優良網站(風格)列表與分析:httpapple83411.pixnet.netblogpost189420420-%E3%80%90%E6%94%BB%E7%95%A5%E3%80%91%E6%B7%B1%E6%B5%B7%E6%B0%B4%E6%97%8F%E9%A4%A8abyssrium%E2%98%85%E9%9A%B1%E8%97%8F%E9%AD%9A
符合主題 豐富



Edited 1 time(s). Last edit at 12/01/2017 03:02AM by jing52096.
(編輯記錄)

1055445106葉東侑

(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445106
(2)
1有無遇到的問題:無
2.製作感想 :很累
3.製作作業的時間 :兩天

(1)網站主題: 刺青文化

(2)製作動機:很喜歡刺青的文化

(3)製作內容:
刺青簡介(About),刺青歷史(history),社會現象(Social phenomenon),刺青注意事項(Precautions),作品欣賞(photos)

(4)風格設定: 黑暗

(5)資料蒐集分析
https://zh.wikipedia.org/wiki/%E5%88%BA%E9%9D%92

◎設計優良網站(風格)列表與分析:
https://www.hongkong-tattoo.com/



Edited 2 time(s). Last edit at 11/30/2017 08:20AM by 1055445106.
(編輯記錄)

(1)網站主題:防彈少年團bts
(2)製作動機: 因為我很喜歡他們,而且他們的歌都很好聽,歌詞裡面都有特別的含意
(3)製作內容: 經歷過程(bts)歌迷名稱(army)品牌識別(beyondthescene)成員介紹(member)音樂作品(music)
(4)風格設定: 溫和
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.kpopn.com/2017/09/08/bts%E3%80%8Alove-yourself%E3%80%8Bv%E3%80%81e-%E6%A6%82%E5%BF%B5%E7%85%A7/
BTS《LOVE YOURSELF》V、E 概念照(照片來源)

https://www.kpopn.com/2017/09/07/bts%E3%80%8Alove-yourself%E3%80%8Bl%E3%80%81o-%E6%A6%82%E5%BF%B5%E7%85%A7/
BTS《LOVE YOURSELF》L、O 概念照(照片來源)

https://zh.wikipedia.org/wiki/%E9%98%B2%E5%BD%88%E5%B0%91%E5%B9%B4%E5%9C%98#.E5.93.81.E7.89.8C.E8.AD.98.E5.88.A5
防彈少年團基本介紹維基百科

1055445076 李珮瑄

(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445076
(2)
1有無遇到的問題 :沒有問題
2.製作感想 :覺得能夠自己做一個網頁很有成就感,而且學到很多東西。
3.製作作業的時間 :2小時


(1)網站主題: 《小王子》The Little Prince
(2)製作動機: 這是一部兩年前的電影,但令我印象很深刻,並且也改變我很多想法,希望讓大家都能關注這部電影。
(3)製作內容:
電影起源(Movie origins)
劇情概要(Synopsis)
角色介紹(Character introduction)
電影心得(Movie experience)
經典名言(Classic famous)
(4)風格設定:溫暖、柔和、夢幻
(5)資料蒐集分析
http://punchline.asia/archives/16730
https://baike.baidu.com/item/%E5%B0%8F%E7%8E%8B%E5%AD%90/1000131
http://hots.blurfeed.com/topic/18779/
https://www.niusnews.com/=P03nmm38
◎設計優良網站(風格)列表與分析:
http://www.hypesphere.com/archives/63821
(簡約明瞭的設計)



Edited 1 time(s). Last edit at 12/07/2017 08:54AM by ukiss52007.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445034
(2)
1有無遇到的問題:連結不上
2.製作感想:雖然處理圖片很累,但做完很有成就感
3.製作作業的時間:1-3天

(1)網站主題:我畫過的作品
(2)製作動機:想給人欣賞
(3)製作內容:關於我(about me) 水彩(watercolor) 素描(pencil) 麥克筆(makerpen) 攝影(photography)
(4)風格設定: 偏藍色和帶點藝術風格
(5)資料蒐集分析:https://aiueoshigeru.com/
設計偏簡單,畫面很舒服,不會有過於的設計和雜亂的空間,我很喜歡



Edited 1 time(s). Last edit at 11/30/2017 09:24AM by 豆丁.
(編輯記錄)

作業網址: http://mepopedia.com/~css106-2a/hw03/hw03-1055440074
主題 / 風格設定 : 名柯南介紹 / 卡通
有無遇到的問題 :沒有
製作感想 :會想學更多
製作時間 :3小時



1055440074 石佳紘

(1)網站主題:名偵探柯南

(2)製作動機:這是一個我常看的動畫

(3)製作內容:故事簡介 作者介紹等......相關資訊
(4)風格設定: 動畫內的風格

(5)資料蒐集分析
https://zh.wikipedia.org/wiki/%E5%90%8D%E5%81%B5%E6%8E%A2%E6%9F%AF%E5%8D%97

設計優良網站(風格)列表與分析:http://www.conan.url.tw/



Edited 1 time(s). Last edit at 11/30/2017 09:53AM by 石佳紘.
(編輯記錄)

1055445037黃育亭
(1)網站主題:蠟筆小新
(2)製作動機:喜歡看蠟筆小新
(3)製作內容:野源新之助
(4)風格設定: 歡笑感覺
(5)資料蒐集分析 : https://zh.wikipedia.org/wiki/%E8%9C%A1%E7%AC%94%E5%B0%8F%E6%96%B0
Academy Awards - Wikipedia
https://en.wikipedia.org/wiki/Academy_Awards#Oscar_statuette
◎設計優良網站(風格)列表與分析:
https://www.ttv.com.tw/drama13/shin/

1055445008 陳建瑋

(1)網站主題:南方公園
(2)製作動機: 我喜歡這卡通
(3)製作內容: 故事介紹story、人物介紹character、作者介紹author、配音人員dubbing、相關網站website
(每個導覽列的中文及(英文檔名))
(4)風格設定: 童趣風
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:

http://southpark.cc.com/

1055445007 吳郁婕
完成品
(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445007
(2)
1有無遇到的問題 : 沒問題
2.製作感想 : 很累,但很有成就感
3.製作作業的時間: 6個小時
_________________________________________________________
(1)網站主題: CINYEE CHIU
(2)製作動機: 這個插畫家繪畫風格很讚所以想製作讓大家知道
(3)製作內容: 介紹(About) 插圖(illustration) 所有項目(all project) 產品(product) 社論(editorial) 運動(motion)
(4)風格設定: 簡單
(5)資料蒐集分析
https://cinyeechiu.com/
◎設計優良網站(風格)列表與分析:
https://amberyeh.carbonmade.com/
https://sijingchen.carbonmade.com/projects/6023470
很簡單又分明網頁整體很舒服



Edited 1 time(s). Last edit at 12/07/2017 06:57AM by wuyujie.
(編輯記錄)

1055445160 陳宥蓁
(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445160
(2)
有無遇到的問題:圖片放置問題
製作感想 :雖然花了很多時間與心血,但看到自己喜歡的東西被做成網站還是很有成就
製作作業的時間:2天

(1)網站主題:角落生物

(2)製作動機:很喜歡這個小插圖,很療癒

(3)製作內容:角落生物出生(生まれる) 北極熊(しろくま) 恐龍(とかげ) 企鵝(ぺんぎん?) 炸豬排(とんかつ) 貓咪(ねこ)

(4)風格設定:可愛夢幻

(5)資料蒐集分析
https://news.gamme.com.tw/1418547
角落君生物介紹

◎設計優良網站(風格)列表與分析:
http://www.san-x.co.jp/sumikko/
角落君日文官方網站,很可愛,滑了會好心情



Edited 1 time(s). Last edit at 11/30/2017 09:25AM by 1055445160.
(編輯記錄)

(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445109
(2)
1有無遇到的問題 :按鈕切換沒換好
2.製作感想 :眼睛好花
3.製作作業的時間 :5小

(1)網站主題: Pokémon GO
(2)製作動機: 很無聊時玩寶可夢,覺得很可愛,抓到稀有的會很開心
(3)製作內容: 設計與開發、寶可夢圖鑑、寶可夢前史、傳說寶可夢、團體戰
(每個導覽列的中文及(英文檔名))
(4)風格設定: 簡單乾淨
(5)資料蒐集分析 :
https://zh.wikipedia.org/wiki/%E7%B2%BE%E9%9D%88%E5%AF%B6%E5%8F%AF%E5%A4%A2GO
https://wiki.52poke.com/wiki/%E4%B8%BB%E9%A1%B5
◎設計優良網站(風格)列表與分析:

1)作業網址: http://mepopedia.com/~css106-2a/midterm/midterm-1055445088

(2)
1有無遇到的問題: 按鍵鏈接問題
2.製作感想 :看到眼睛脫窗
3.製作作業的時間 :2天



(1)網站主題: 深海水族館
(2)製作動機: 最近喜歡上的手遊
(3)製作內容:
作品介紹
遊戲方法
隱藏魚
限時活動
(4)風格設定 黑底紅字
(5)資料蒐集分析 :httpsforum.gamer.com.twC.phpbsn=30852&snA=53
◎設計優良網站(風格)列表與分析:httpapple83411.pixnet.netblogpost189420420-%E3%80%90%E6%94%BB%E7%95%A5%E3%80%91%E6%B7%B1%E6%B5%B7%E6%B0%B4%E6%97%8F%E9%A4%A8abyssrium%E2%98%85%E9%9A%B1%E8%97%8F%E9%AD%9A
符合主題 豐富

(1)作業網址: http://mepopedia.com/~css106-2a/midterm/midterm-1055445064
(2)
1有無遇到的問題: 按鍵鏈接問題
2.製作感想 : 終於把網站做完整了!
3.製作作業的時間 :幾個小時吧......!



(1)網站主題: 新世紀福爾摩斯
(2)製作動機: 豐富的內容以及經典重新改編的新鮮吸引我
(3)製作內容:
Episodes 情節
Characters 人物
case 案件
original 原著
Highlights 彩蛋
(4)風格設定: 簡約黑白色調
(5)資料蒐集分析 :https://zh.wikipedia.org/wiki/%E7%A5%9E%E6%8E%A2%E5%A4%8F%E6%B4%9B%E5%85%8B
◎設計優良網站(風格)列表與分析:http://www.pbs.org/wgbh/masterpiece/shows/sherlock/
http://www.digitalspy.com/tv/sherlock/feature/a819122/sherlock-season-5-air-date-cast-episodes-news-and-everything-you-need-to-know/
符合主題 豐富



Edited 2 time(s). Last edit at 11/30/2017 09:28AM by 1055445064.
(編輯記錄)

(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445037
(2)
1有無遇到的問題 :連結問題

2.製作感想 :能自己做網站是很棒的事情
3.製作作業的時間 : 3小時

(1)網站主題: 蠟筆小新
(2)製作動機: 因為我喜歡蠟筆小新
(3)製作內容:首頁 故事介紹 作者介紹 人物介紹 配音人員 相關網站
(4)風格設定: 可愛簡潔
(5)資料蒐集分析

(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445193
1)網站主題: KAKAO FRIENDS(萊恩ryan)
(2)製作動機:因為它超可愛的~~~
(3)製作內容:
kakao介紹(카카오 소개)
角色故事(캐릭터 이야기)
化妝品聯名(화장품 조인트)
娃娃販售(인형 판매)
其他周邊(기타)
(4)網站(風格)列表與分析:簡單、分明 、可愛
(5)資料蒐集分析 :
http://linlinhorse.pixnet.net/blog/post/105349951-kakao-friends-%E5%A8%83%E5%A8%83-%E6%8A%B1%E6%9E%95
https://www.nalu85.com/categories/dollall
*相關網站列表與分析:
https://www.nalu85.com/categories/dollall
(簡約明瞭的設計)

1055445091 何芯萍
完成品
(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445091
1有無遇到的問題 : 顏色不見和多出些東西
2.製作感想 :學到很多東西
3.製作作業的時間 : 3-4天

1)網站主題:神影少女
(2)製作動機:在宮崎駿的動畫中我最喜歡的一部,想讓更多人知道它。
(3)製作內容: 劇情介紹(Synopsis) 人物介紹(Characters) 音樂(music)提名獎項(Awards)
(4)風格設定: 神影少女
(5)資料蒐集分析
https://zh.wikipedia.org/wiki/千与千寻
◎設計優良網站(風格)列表與分析:http://inmywordz.com/archives/9420



Edited 1 time(s). Last edit at 12/04/2017 08:03PM by 何芯萍.
(編輯記錄)

(1)作業網址 :http://mepopedia.com/~css106-2a/midterm/midterm-1055445100
1有無遇到的問題 :圖片遺失
2.製作感想 :很花心力....
3.製作作業的時間 : 3小時

(1)網站主題: 咖啡廳
(2)製作動機: 去過這間咖啡廳覺得很棒
(3)製作內容:關於我們 想喝什麼 想吃什麼 我在哪裡 粉絲專業
(4)風格設定: 簡單乾淨
(5)資料蒐集分析

(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445103
(2)
1有無遇到的問題 圖片繞文有問題 後來解決了
2.製作感想 剛開始很難 但做到後面漸漸的會了 做完有成就感
3.製作作業的時間 1-2天

完成品(11/23/30前)
請將這項放置於文章最前面
(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445073
(2)
1有無遇到的問題
有!家裡沒有dw嘗試過各種方法了
2.製作感想
非常得趕,做的非常的不精緻.......
3.製作作業的時間 沒有計算

作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445094
(2)
1有無遇到的問題 :字的換行排版跟字與圖的排版
2.製作感想 :越做越起飛
3.製作作業的時間 :10小時

作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445181

(1)網站主題: 屁桃世界
(2)製作動機: 覺得屁桃長得很有特色
(3)製作內容: 首頁,連結,生態,影片
節目形式(Program form)
環節(Links)
固定玩家(Fixed players)
節目列表(Programme list)
(4)網站(風格)列表與分析:醜比頭裡最多人知道的是屁桃,所以以屁桃的顏色為主,偏粉紅
(5)資料蒐集分析 : 上網找有關醜比頭的圖片影片跟網站



Edited 1 time(s). Last edit at 12/08/2017 01:00AM by 1055445181.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445046

1有無遇到的問題 :有很多

2.製作感想:很累

3.製作作業的時間:2天

(1)作業網址 http://mepopedia.com/~css106-2a/midterm/midterm-1055445196
(2)
1有無遇到的問題 :有

2.製作感想:很累

3.製作作業的時間:5天

完成品(11/23/30前)
請將這項放置於文章最前面
(1)作業網址 http://mepopedia.com/~css106-2a/hw03/hw03-1055445010/
(2)
1有無遇到的問題:無
2.製作感想 :很有成就
3.製作作業的時間 :1天

前置作業(11/16)
(1)網站主題: 發福廚房
(2)製作動機: 喜歡吃漢堡
(3)製作內容: 漢堡介紹.餐廳介紹
(每個導覽列的中文及(英文檔名))
(4)風格設定: 簡單.單調
(5)資料蒐集分析 https://www.google.com.tw/search?q=%E7%99%BC%E7%A6%8F%E5%BB%9A%E6%88%BF&source=lnms&tbm=isch&sa=X&ved=0ahUKEwia9cHLtuDYAhVFTbwKHX5uCHQQ_AUICygC&biw=1920&bih=949
◎設計優良網站(風格)列表與分析: 簡單.單調