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

Advanced

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

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

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



1. 一、製作說明:


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

2.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color]
在#footer 註明 Designed by 某某某(可自行取名) 1001445ooo

3.題目自訂

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

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

6.至少完成兩頁的內容(60分),若內容完整,沒有錯誤與法,且全部頁面完成(最少80分)。

[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.製作說明

加分:
1.內容完整度,連結頁面全部做完最少八十分,最多100分。


3. 三、繳交作業方式


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

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

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

資料夾內含:
(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/05)
(1)網站主題:
(2)製作動機:
(3)製作內容:
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:



[color=#0066CC]完成品[/color](11/18前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址
(2).
1有無遇到的問題
2.製作感想
3.製作作業的時間


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


4. 四、期中作業進度參考


第七週 10/29 前置作業,題目確定,資料蒐集與分析等
第八週 11/05 決定排版形式、尺寸、圖片製作
第九週 11/12 HTML DIV與CSS設定
第十週 11/19 期中作業上傳繳交與討論




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



隨時補充:

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

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

3.導覽列的超連結


請記得先將第一頁所有的連結都先設定好,再以另存新檔的方式,存成其他檔案,如此就不用每次都要設定超連結。

4.亂碼問題,放在 <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圖片資料夾裡

9.使用進階語法,需注意若直接以Dreamweaver製作,彈性較小,會比較難修改。

[hr]

6. 參考範例



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/

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

Attachments:
開啟 | 下載 - midterm.rar (1.09 MB)
(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445109
(2)有無遇到的問題 尺寸的問題,其他大致上之前有聽課,所以都OK,全部都弄玩了,檔案存在我的硬碟裡面,開啟是沒問題的,但是把它移到桌面上在開啟,他會給我警告,一個視窗跳出來說((((style.css不存在於定義的網站)))),然後我已無法讓他跟其他css檔連結,是為什麼?一直無法按取得style.css檔
(3)製作感想 尺寸很容易搞錯,一分心就會忘記自己做到哪裡了
(4)製作作業的時間 6個小時多吧

(1)網站主題: HH先生與美美
(2)製作動機:因為風格幾乎以插畫為主,再加上我很喜歡他畫的插圖,所以想跟大家介紹他,他是一位他畫家,最近因為一些觀察網路上網友們的PO,而藉由他的虛構人物美美,畫出他所看到的世界
(3)製作內容:
首頁: HH先生簡介
分頁:
1. 主角介紹(美美)
2. 漫畫
3. 漫畫風格
4.問與答
(4)資料蒐集分析
http://www.lineq.tw/
http://www.webtoons.com/
http://www.webtoons.com/episodeList?titleNo=197
http://line.me/zh-hant/family-apps
http://www.dgnet.com.tw/articleview.php?article_id=24006&issue_id=4749
◎設計優良網站(風格)列表與分析: http://store.apple.com/tw/buy-mac/imac-retina
這是APPLE的官方網站,我喜歡他的風格灰白色調,整個網頁加上灰白色調的金屬感,會讓人覺得IPhone跟IPad質感非常好,而且會讓人覺得是非常高級的東西,進到這個官方網站裡面,第一眼看到的就是他們最新推出的新產品IPhone 6的圖片,而且圖片大,字體也大,可以讓客戶一目瞭然,簡單素色的風格,讓我很喜歡
◎相關網站列表與分析:
http://www.webtoons.com/ LINE Webtoon 每日漫畫
分析: LINE Webtoon每日漫畫,每週更新50篇以上,各種類型題材的免費連載漫畫,陪你走到哪看到哪!配色是以LINE為主的配色,他是有關於漫畫的一個網站,圖片也是很大,讓人能夠一目瞭然



Edited 2 time(s). Last edit at 11/18/2014 02:52AM by Jia_Ling.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1005445193
(2)有無遇到的問題:排版很多次...這次已絞盡腦汁讓頁面看起來比較正常,希望期末的可以排得更好!
(3)製作感想:一開始有個地方少打一個r,造成頁面一直無法置中,讓我研究了好久...真的是打錯一個字影響就很大 xD 排版一直都是我的問題,希望期末的可以看起來更好。
(4)製作作業的時間:約4天


(1)網站主題:愛麗絲夢遊仙境
(2)製作動機:雖然愛麗絲夢仙境已經廣為人知,但個人非常喜歡這個故事。除了大家可能已經知道的部分,還想介紹別人衍伸出的愛麗絲故事給大家知道。
(3)製作內容:1.愛麗絲夢遊仙境簡介(index) 2.路易斯的愛麗絲(02lewis) 3.迪士尼的愛麗絲(03disney) 4.不一樣的愛麗絲(04different) 5.愛麗絲的異想世界(05sinyi)
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://namepara.com/
介紹菇菇栽培主題的網站。
我覺得雖然東西很多,但是他有用框架框起來,看起來就有秩序、不會很亂。
顏色也很粉嫩可愛,看了很舒服。
◎相關網站列表與分析:
http://www.masking-tape.jp/
介紹mt紙膠帶的網站。
他和上述網站相似,雖然東西很多但是看起來不會很亂。
除了介紹的內容顏色很多,本身的版面很素色、乾淨。
而且選單很特別,很多網誌都是橫的他是直的,很特別。

1005445193/徐芯儀



Edited 2 time(s). Last edit at 11/18/2014 10:52AM by 徐芯儀.
(編輯記錄)

王時峰 1005445215

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1005445215/
(2)遇到很多問題比如圖檔沒掉,操作不得手的問題
(3)製作感想 累
(4)製作作業的時間 7個小時多吧

(1)網站主題:迪士尼主角
(2)製作動機:想讓大家瞭解迪士尼有哪些角色
(3)製作內容:
迪士尼的一些角色
分頁: 詳細介紹,

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445043
(2).
1有無遇到的問題 不會設定點擊header到index
2.製作感想 這次作業作的是自己喜歡的主題,趁這次又看了很多建築的網站跟伊東豊雄的作品,因為是用假日時間完成的,雖然這樣兩天都在做這個,但是很開心,因為上大學之後都很少在看建築了,而且也新發現了很多新/舊建築。

3.製作作業的時間 11小時

(1)網站主題: 游牧空間 伊東豊雄
(2)製作動機: 喜歡他簡潔不囉嗦 在小地方又充滿細節的風格 作品總是不斷的創新
(3)製作內容:

頁面
0.入口頁 1.關於Toyo Ito 2.遊牧建築 3.作品鑑賞 4.榮耀及獎像 5.專訪視頻

(4)資料蒐集分析
http://zh.wikipedia.org/wiki/%E4%BC%8A%E6%9D%B1%E8%B1%8A%E9%9B%84
http://www.toyo-ito.co.jp/
http://www.mottimes.com/cht/article_detail.php?type=1&serial=561
http://www.searchouse.net/op/arch?bid=513
http://www.fubonart.org.tw/ugC_Lecture_Detail.asp?hidLectureKindID=2&hidLectureID=1384

◎設計優良網站(風格)列表與分析:
涵碧樓 http://www.thelalu.com.tw/
點進網站首先看的首頁以中間的意象動畫為主,在加上其他網頁的連結按鈕,白灰色組成的背景,整體簡單優雅再加上中間的動畫搭配讓在入住飯店前就給住客在視覺上有如臨現場,舒適的印象,網站的傳達跟飯店的主題非常密合,很實用又好看。

姚仁喜大元建築工場 http://www.krisyaoartech.com/ch/about
網站配色使用中彩度工作時的照片及白、灰和少量橘色點綴,給人專業形象又沒少了活潑感,按鈕統一在左側方便點入,跟我的網站主題一樣是建築很適合參考。

◎相關網站列表與分析:
Zaha Hadid Office Site http://www.zaha-hadid.com/?doing_wp_cron
網站中的按鈕做的像PS的功能列表一樣可以任意的擺放,非常特別印象深刻,配色與其他建築事務所差不多,是白黑組成,網站裡的文字不多連作品介紹都不贅述,大部分以大面積圖片表示,讓作品自己說話,網站的四邉有方向建可隨意更換背景的作品照片,整個網站的表達大方直接且多變與Zaha Hadid的建築風格相得益彰。

1025445043金家任



Edited 4 time(s). Last edit at 11/09/2014 05:01PM by 1025445043.
(編輯記錄)

(1)網站主題:巧克力
(2)製作動機:因為對巧克力有莫名其妙的著迷跟執著,不論心情好壞都希望有巧克力的陪伴。
(3)製作內容:關於這個巧克力的品牌、巧克力文化、巧克力大師之類...
◎設計優良網站(風格)列表與分析:
http://www.godiva.com.tw/
◎設計優良網站(風格)列表與分析:
http://chochoco.com/
配色簡約明瞭,而且我比較喜歡圖多於文字的網站,這樣的網頁看起來比較不無趣,比較活潑像個網頁。
◎相關網站列表與分析:
http://www.feeling18c.com/
此網站分類內容比較豐富跟細緻化,光是品味巧克力就有許多種選項更圖片可以觀覽跟挑選。

1005445196 張靜怡

(1)作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1005445195/
(2).
1有無遇到的問題:更改檔名很多設定都跑掉了,反覆檢查也重新傳很多次。
2.製作感想:有一段時間沒用到Dw,也忘的差不多了,現在用還是覺得很有趣,也很有成就感。
3.製作作業的時間:4小時

視傳4B 1005445195 黃沛容
11/16 2014

----------------------------------------------------------------------------------------------------------------------------------------------------------------


(1)網站主題: 德國足球國家隊
(2)製作動機: 台灣稱之足球沙漠,一般會接觸到足球的機會就是四年一度的世足熱,所以我選擇在台灣很熱門的德國隊做介紹,原因就是因為德國隊裡面的球員幾乎都是德甲拜仁慕尼黑及多特蒙德的球員,認識了球員,自然就提高了看球的意願。
(3)製作內容: 球隊隊史、超帥教頭、球員介紹、榮譽事跡、花邊新聞
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.apple.com/tw/
簡約的灰與白配色,相當符合apple產品風格,簡潔又明瞭。
◎相關網站列表與分析:
http://www.bvb.de/
黃跟黑的配色代表著多特蒙德,個人覺得很有質感,下面的消息下面的消息都用區塊分隔好,但又不會太過繁雜。



Edited 2 time(s). Last edit at 11/16/2014 12:00PM by 1005445195.
(編輯記錄)

(1)作業網址:[url=http://mepopedia.com/~web103-a/midterm/midterm-1025445133]http://mepopedia.com/~web103-a/midterm/midterm-1025445133[/url]
(2).
1有無遇到的問題:首頁圖片一直沒辦法放中間,花了一點時間才弄好
2.製作感想:做得還不錯,不過自己覺得還有待改進。
3.製作作業的時間:7小時

(1)網站主題:妖怪少爺
(2)製作動機:還蠻喜歡這部動畫
(3)製作內容:1.首頁(index.html)2.主角群介紹(about.html)3.主角群的相關圖片(picture.html)4.劇情介紹(上半部)-(the upper
         half of the story.html)5.劇情介紹(下半部)-(the lower half of the story.html)
(4)資料蒐集分析:
        [url=http://zh.wikipedia.org/zh-tw/%E5%A6%96%E6%80%AA%E5%B0%91%E7%88%BA]http://zh.wikipedia.org/zh-tw/%E5%A6%96%E6%80%AA%E5%B0%91%E7%88%BA
[/url]        [url=http://blog.yam.com/luotine66/article/38197676]http://blog.yam.com/luotine66/article/38197676
[/url]        
◎設計優良網站(風格)列表與分析:[url=http://www.tisdc.org/]http://www.tisdc.org/
[/url]2014年臺灣國際學生創意設計大賽簡單明瞭,風格也十分不錯,帶有一點藝術風,想要了解的資訊也不難找,相當好的網站。
◎相關網站列表與分析:[url=http://blog.yam.com/susumu/article/23837484]http://blog.yam.com/susumu/article/23837484
[/url]畫面清晰明瞭,文字內容生動活潑,圖片以黑白漫畫為主,背景色輕鬆宜人,相當不錯。

1025445133 林哲立



Edited 2 time(s). Last edit at 11/17/2014 09:38PM by 1025445133.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445061
(2).
1有無遇到的問題: 一開始開檔案都連得到, 後來上傳看的時候都連不到,
覺得很懊惱
2.製作感想 太難了
3.製作作業的時間 10小時




(1)網站主題:小熊維尼
(2)製作動機: 喜歡小熊維尼
(3)製作內容: 有關他的介紹與他的朋友, 還有電影等等...
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://163.20.173.1/~t88fh256/stud91/308/31/wepe.htm
整體配色溫暖,可愛, 有一整溫馨的感覺
◎相關網站列表與分析:
http://www.njps-s1.cyc.edu.tw/www2/web-class/92/personal/20/%E4%BB%8B%E7%B4%B9.htm

(1)作業網址 :http://mepopedia.com/~web103-a/hw03/hw03-1025445055/
(2).
1有無遇到的問題 : CSS設定錯誤
2.製作感想 : 很累....
3.製作作業的時間 :三到四小時 調整一小時

(1)網站主題: 心靈輔導社官網
(2)製作動機: 為自己社團創建網站
(3)製作內容: 介紹社團和活動內容

(4)資料蒐集分析 :
http://www.weebly.com/index.php?lang=zh#
http://dn.gameflier.com/
http://tera.omg.com.tw/

◎設計優良網站(風格)列表與分析:
http://www.managertoday.com.tw/ (條例分明)
http://tw.ncsoft.com/bns/index.nc (比較互動式)
http://en.rocketnews24.com/2014/10/08/mickey-and-friends-in-human-form-are-more-charming-than-we-had-imagined-%E3%80%90pics%E3%80%91/ (長條長版式)

◎相關網站列表與分析:
http://dn.gameflier.com/ (官網)
http://www.twitch.tv/sgal2014 (實況台)
https://www.facebook.com/SGAL2014 (專頁)

(1)網站主題:EXO
(2)製作動機:喜歡的韓國偶像
(3)製作內容:關於/經歷/EXO-K/EXO-M/專輯
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://www.yuhunkim.com/ 喜歡這種很簡潔又明瞭的風格 不會太單調也不會太過
◎相關網站列表與分析: http://www.mydesy.com/
http://www.petragraphicdesign.com/

1025445130楊淯婷

http://mepopedia.com/~web103-a/midterm/midterm-1025445214/

(1)網站主題: 抒情樂曲網
(2)製作動機:藉由音樂能垂釣人心傳遞說不出的話語,而我想做的是希望能藉由我的網站,分享我喜歡的歌手及歌曲,讓大家也能聽取那些歌曲
(3)製作內容:
1.首頁 2. 歌手介紹(潘裕文.楊宗緯.蕭閎仁.梁文音.黃鴻升) 3. 主打歌曲 4.youtube 5.留言板
(4)資料蒐集分析
http://zh.wikipedia.org/wiki/%E6%BD%98%E8%A3%95%E6%96%87 (潘裕文介紹)
http://mojim.com/twy105349x2x1.htm(主打歌曲-夏雨詩)
http://zh.wikipedia.org/zh-tw/%E6%A5%8A%E5%AE%97%E7%B7%AF(楊宗緯介紹)
http://mojim.com/twy105175x7x1.htm(其實都沒有)
http://zh.wikipedia.org/zh-tw/%E8%95%AD%E9%96%8E%E4%BB%81(蕭閎仁介紹)
http://song.key8.com/song.php?sortby=sel_song&aid=6799&sid=81180(我的世界沒有你的音準)
http://zh.wikipedia.org/zh-tw/%E6%A2%81%E6%96%87%E9%9F%B3(梁文音介紹)
http://mojim.com/twy105635x7x3.htm(心裡的孩子)
http://wikiyou.tw/%E9%BB%83%E9%B4%BB%E5%8D%87/(黃鴻升介紹)
http://mojim.com/tw105685x9.htm(忘了怎麼快樂)

◎相關網站列表與分析:
http://www.youmaker.com/video/sa?id=f0040e0060c247389c619b5f615c8da0001
http://mymedia.yam.com/m/2201016
這些都是與音樂相關網站,能夠藉由這些網站聽取自己心中所想的樂曲,而我想做的是希望能藉由我的網站,分享我喜歡的歌手及歌曲

視傳二a1025445214 蘇子玲



Edited 1 time(s). Last edit at 11/18/2014 08:44AM by Grape.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445073
(2).
1.這次做得比以前順
2.但東西複雜很多,很容易搞混
3.製作作業的時間 8小時
(1)網站主題: 法國
(2)製作動機:因為想做國家有關的介紹,而收集許多資料,最後才決定為法國。
(3)製作內容:
1.簡介2.地理3.文化4.餐飲5.交通
(4)資料蒐集分析
http://country.bridgat.com/France.html
http://163.20.173.1/~t88fh256/stud93/924/12/France%20data.htm
http://zh.wikipedia.org/wiki/%E6%B3%95%E5%9B%BD
◎設計優良網站(風格)列表與分析:http://www.laconique.com.tw/showcase/37
這是一個學校網頁,用相似色及很多的區塊做成的網頁。
◎相關網站列表與分析:
http://www.world68.com/sort.asp?bid=11

分析: 這是所有國家的資料流通網,想要知道甚麼都有,是一個龐大的資料庫。
1025445073



Edited 1 time(s). Last edit at 11/17/2014 04:49PM by s096076.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1025445079/index.html
(2).
1有無遇到的問題:一堆問題,我家的版本有點奇怪,按鈕連結明明無誤做出來卻還是亂跳~我把資料夾名字改一個字全部連結都不見了,我用半天~
2.製作感想:一堆問題快爆炸了
3.製作作業的時間:兩三天吧
---------------------------------------------------------------------------------------
(1)網站主題:OLIVIA 奧莉維亞
(2)製作動機: 網站很漂亮
(3)製作內容:歌手介紹.專輯.youtube.
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.grand-hotel.org/main/default.aspx?lang=zh-tw
簡潔明瞭
◎相關網站列表與分析:
http://www.dante.com.tw/
配色讓人看了很舒服

1025445079



Edited 1 time(s). Last edit at 11/18/2014 01:25PM by iamve.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445049/
(2)
1有無遇到的問 : 有~youtobe的連結,貼上去結果一直無法顯示,結果後來發現原因要使用舊版的連結,在這花了比較多的時間
2.製作感想 : 很難做,但做完了很有成就感,開心
3.製作作業的時間 : 四天


(1)網站主題: HELLO KITTY
(2)製作動機:因為非常非常喜歡HELLO KITTY
(3)製作內容:
1.HELLO KITTY簡介
2.DANIEL簡介
3.周邊商品
4.圖片
5.影音
(4)資料蒐集分析
http://wikipps.hk/hello-kitty/ (HELLO KITTY)
http://wikipps.hk/hello-kitty/ (DANIEL)
http://www.swarovski.com/Web_TW/zh/91222/promotion/Hello+Kitty.html;sid=Dvkpg_NKWbcsg6couKa_pZpArHPI2H-hooSlaF83FY2U1w==?WT.mc_id=06001040.200
https://tw.images.search.yahoo.com/search/images;_ylt=A8tUwYibuGJUxGMAYBFr1gt.?p=hello+kitty%E4%BB%8B%E7%B4%B9&fr=yfp-s&fr2=piv-web
https://www.youtube.com/watch?v=ouPaHFtciEU
https://www.youtube.com/watch?v=yenA49VJkBk
◎設計優良網站(風格)列表與分析: http://evakitty.evaair.com/ch/
這個是EVA AIR長榮航空公司HELLO KITTY系列的網站,我喜歡這個版,整體配色很符合主題
◎相關網站列表與分析: http://www.sanrio.com.tw/
這個網站,跟作業的很類似,可以作為參考,在它的排版上簡單明瞭,覺得不錯

1025445049 余沛綾

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445199/
(2)
1有無遇到的問 : 有~在開啟新的檔案時style有時都沒有跑出來,內容過多容易混淆,常常點錯必須重來,有時會不小心在設計的地方製作,常常出現一堆亂碼
2.製作感想 : 比範例還要花更多時間,雖然花了八個小時,但是做完很有成就感,也漸漸地知道哪些是那一個地方的。
3.製作作業的時間 : 8個小時


(1)網站主題:SHINee
(2)製作動機:喜歡的偶像團體
(3)製作內容:1.首頁2.經歷過程3.成員資料4.專輯介紹5.活動行程
http://zh.wikipedia.org/wiki/SHINee
http://kpopn.com/tag/shinee/
http://hanzhiyu.pixnet.net/blog/post/33109810-%E5%9C%98%E9%AB%94---shinee(%EC%83%A4%EC%9D%B4%EB%8B%88)%E8%B3%87%E6%96%99%E4%BB%8B%E7%B4%B9(131110%E6%9B%B4%E6%96%B0)

◎設計優良網站(風格)列表與分析:http://www.avex.com.tw/shinee/version09/
以黑白為主,人的圖片隱隱約約的色彩讓畫面變得更加生動,底加上手繪風,不會讓整著畫面變得很複雜。
◎相關網站列表與分析:http://www.avex.com.tw/shinee/version06/
文字內容都編排得很好,文字加上變化變得更有趣,背景以團體照加上藍綠色光芒,不會讓字看體不到。

1025445199 萬欣穎



Edited 1 time(s). Last edit at 11/18/2014 10:41PM by 1025445199.
(編輯記錄)

(1)作業網址
(2).
1有無遇到的問題:遇到超多超多問題!連結做不出來!重點是一直上傳不了網頁 所以作業網址是空白的
2.製作感想 :雖然做網頁設計很麻煩也很多東西要記 可是我想多做就會熟練很多!
3.製作作業的時間 :6小時



(1)網站主題:Ash Stymest
(2)製作動機:他是我很喜歡的一個英國模特兒,想藉這機會更了解!
(3)製作內容:關於他/作品/連結/
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.pinterest.com/all/tattoos/
利用圖片當作連結底圖和這次的作業很類似
簡白的底也是我這次想做的風格
◎相關網站列表與分析:
http://www.juksy.com/archives/28400
這個網站特別發了一篇關於他的作品



Edited 2 time(s). Last edit at 11/18/2014 11:33PM by 1025445010.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445202
(2).
1有無遇到的問題:上面網址跟在DW 預示於chome 不一樣,已解決
2.製作感想:看到很多好吃的食物很餓,在網路上找到的相關網站所右鍵,在打字的時候耗了一些時間
3.製作作業的時間 6-7小時

(1)網站主題: 歡迎光臨金色三麥 Le Blé d'Or
(2)製作動機: 食物好吃
(3)製作內容: 金色理念、金色據點、金色饗宴、金色禮讚、金色報報
(4)資料蒐集分析
參考金色三麥官網:http://www.lebledor.com.tw/idea.php

◎相關網站列表與分析: http://www.secondfloorcafe.com/index.html
貳樓餐廳的網站,用橘黃色做基礎設計整個網頁,網頁內容都十分清楚,菜單的圖片看了讓人食指大動,美中不足的地方是關於貳樓的其他連結似乎還沒完成

◎設計優良網站(風格)列表與分析: http://www.lebledor.com.tw/index.php
金色三麥的官方網站,剛點頁面時,有有趣的動畫和聲音效果,還可以和頁面互動,風格跟實體店面一樣很多木頭酒桶因為主打現釀啤酒,昏暗又舒服的配色,其他介紹頁面的底是懷舊的感覺,象徵百年傳承。

1025445202林彥希



Edited 1 time(s). Last edit at 11/15/2014 07:14PM by 林彥希.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445091
(2)
1有無遇到的問題:a.超連結下面有一條線b.梵谷畫作works 上的……刪不掉
2.製作感想:花了很久的時間
3.製作作業的時間 6-7小時

(1)網站主題:Vincent van Gogh
(2)製作動機:喜歡梵谷
(3)製作內容:關於梵谷、梵谷畫作、梵谷連結、梵谷影音、梵谷故事
(4)資料蒐集分析
梵谷 -【名畫檔案】五千多幅高解析度圖檔
http://www.ss.net.tw/list1.asp?num=102
梵谷(Van Gogh) - 荷蘭觀光局
http://www.holland.idv.tw/art_1.asp
《最好的朋有-梵谷與高更》
http://life.fhl.net/Art/201002/03.htm
Vincent van Gogh梵谷的一生
http://www.aerc.nhcue.edu.tw/4-0/art/s35/picture2.html
|歷史展覽-梵谷經典重現展| 日出印象國際股份有限公司
/ http://www.u-impression.com/exhibition_page.asp?seq=14

參考官網:

◎相關網站列表與分析: http://www.nmh.gov.tw/zh-tw/Home.aspx
國際歷史博物館的網站,原角的圖片來設計整體,網頁內容十分清楚明瞭,下拉式主選單,給人很復古的感覺。

◎設計優良網站(風格)列表與分析: http://www.gooddays.com.tw/product.html
好好good day的官方網站,按鈕連結插畫風很可愛,畫面很配置整齊,主體是橙色調,讓人感覺很溫暖。

1025445091



Edited 3 time(s). Last edit at 11/18/2014 04:50PM by 小碧.
(編輯記錄)

作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1025445097/
1有無遇到的問題:每一頁與法複雜做很久
2.製作感想:做完之後很開心,可是花太多時間因為以前沒接觸過覺得好難
3.製作作業的時間:1整天

視傳二A 1025445097 陳慶芳

-------------------------------------------------------------------------------------------------------------------------------------------------------

(1)網站主題:pinkoi買設計
(2)製作動機:很早之前看到這個網站就很喜歡裡面設計師所賣的商品,所以想做一個關於這個網站的介紹,讓更多人了解
(3)製作內容:關於pinkoi/手作/衣服/包包/鞋子
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://www.asobi.com.tw/Shop/喜歡簡單清晰的風格 搭配插圖還有圖片
◎相關網站列表與分析: http://nudeshop.tw/ 這個網站也是利用簡單明瞭的配色搭配文字與圖片 喜歡這種風格

1025445097陳慶芳



Edited 2 time(s). Last edit at 11/19/2014 02:33AM by 1025445097.
(編輯記錄)

[size=small]作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445001/

有無遇到的問題:
語法還是一直忘記,不知道該怎麼分類資料夾。
看別人的網頁有很多有趣的東西,但是不知道語法所以就放棄了。

製作感想:
超好玩,會越做越想放一堆東西。
希望老師可以教更多好玩語法及特殊的東西。
製作作業的時間:15個小時(其實我不知道)
__________________________________________________________________________
前置作業

(1)網站主題:米津玄師
(2)製作動機:因為我喜歡
(3)製作內容:關於他、繪圖作品、專輯介紹、音樂影音、相關連結
(4)資料蒐集:
維基 http://zh.wikipedia.org/wiki/%E7%B1%B3%E6%B4%A5%E7%8E%84%E5%B8%AB
pixiv http://www.pixiv.net/member.php?id=259546
twitter https://twitter.com/hachi_08
YANKEE專輯 http://reissuerecords.net/yankee.html

[color=#0066FF]◎設計優良網站(風格)列表與分析:[/color]
網頁設計公司 https://thethemefoundry.com/
以大圖為開頭,利用相似色來呈現整個網頁,並以簡單的線條及框架切割範圍。

AIDS宣導網站 http://www.aids.gov/
利用色塊清楚切割,並以黑色為按鈕、藍色為背景色,表現出理性的感覺。

[color=#0066FF]◎相關網站列表與分析:[/color]
米津玄師官網 http://reissuerecords.net/
很有自己的風格,整體大多留白,並與他的圖互相呼應,簡單明瞭又有趣味性。

環球音樂 http://www.universal-music.co.jp/yonezu-kenshi/
淺咖啡及白色呼應,內容條列清楚,利用一眼能辨識的大圖及他的名字,清楚說明了此網頁的主題。

1025445001
[/size]



Edited 3 time(s). Last edit at 11/19/2014 09:14AM by royu.
(編輯記錄)

[size=small](1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445178
(2). [size=small]有無遇到的問題: 之前教的按鈕連結不太會會應用所以做的時候有點卡,還有會連錯頁(笨) confused smiley ,
全部做完才發現其中兩頁連錯了.又再重新連那兩頁 grinning smiley

2.製作感想 :
很好玩,雖然中間卡了一陣子XD但是有問室友,記憶又回來了XD,
上課雖然有自己做筆記但是實際操作還是會忘掉幾個步驟,像是裁切照片那邊
影像模式沒設成rgb結果圖片跑不出來XD還有裁切相片大小有時候都抓不好比例常常超過框框
header本來考慮要不要+底圖可是又覺得還是乾乾淨淨就好不想要有太多圖片,可能看怎樣再修改新增上去這樣子

3.製作作業的時間 : 8小時

(1)網站主題: 自我介紹

(2)製作動機:因為上一個作業是做老師的範本,不曉得要做什麼,想了一下做自己好像比較快 tongue sticking out smiley

(3)製作內容: 首頁-關於我-興趣-經歷-個性-攝影作品[/size]

作業網址: http://mepopedia.com/~web103-a/midterm/midterm-1025445070/

有無遇到的問題:一綱開始把影片嵌入的時候會顯示不來
製作感想:在邊做的同時會想加越多東西,讓自己的網頁越來越完整。
整體起來很有趣,希望能在學更多的語法。
製作作業的時間:10小時左右

前置作業
(1)網站主題:2NE1
(2)製作動機:因為喜歡這團體
(3)製作內容:出道經歷、成員資料、音樂作品、音樂獎項、主打歌曲
(4)資料蒐集分析:
Facebook https://www.facebook.com/2NE1
Youtube https://www.youtube.com/user/2NE1
維基 http://zh.wikipedia.org/wiki/2NE1

◎設計優良網站(風格)列表與分析:
http://www.sagmeisterwalsh.com/
網站用了黑白兩色做設計,有種很簡約的味道。
內文用一排一排的方式整理,很整齊。
http://type.center/
這網站和上個網站很類似,一樣用兩種顏色就做出有設計的網頁。
往下拉發現它把每則文章用的有上有下的感覺,還不錯。

◎相關網站列表與分析:
http://ygladies.com/category/news/interviews
左右的內容編排的很整齊,分類也分的很好;顏色雖多,但卻不會讓人眼花頭暈。
http://www.ygfamily.com/
黑白風格走向,有一種很簡約的感覺;文字也編排的很有秩序。

1025445070

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445058/
1有無遇到的問題 : 沒
2.製作感想 : 重複再重複...
3.製作作業的時間 : 4hr

(1)網站主題: 義式餐點
(2)製作動機:我想吃義大利麵
(3)製作內容:
1.義大利麵起源
2.披薩起源
3.飲品介紹
4.景點介紹
5.食材介紹
(4)資料蒐集分析
http://www.vasa.com.tw/(瓦薩)
http://www.mita.tw/pasta/ (米塔)
◎相關網站列表與分析: http://www.alifelski.com/
想要有插畫的感覺,參考整體視覺感

1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445040/
1有無遇到的問題 : 背景一直跟我做對,眼睛快爆出來了!
2.製作感想 : 很好玩,一直放圖,放得很開心。
能用自己喜歡的主題做網頁,真的很愉快!
在製作的過程中,我覺得自己更加熟練語法的操作,
不像之前問題狀況一堆,我會繼續練習,為了做出好的網頁。

3.製作作業的時間 : 4.5hr

(1)網站主題: 貓咪
(2)製作動機:我愛貓咪
(3)製作內容:
1.喵喵種類
2.喵喵喜好
3.喵喵小物
4.喵喵旅遊
5.喵喵故事
(4)資料蒐集分析
http://www.mypacetravel.com/?p=11053(貓島)
http://www.5ipet.com.tw/article.php?n_id=330 (愛寵物)
http://zh.wikipedia.org/wiki/%E5%AE%B6%E8%B2%93%E5%93%81%E7%A8%AE%E5%88%97%E8%A1%A8(維基)
◎相關網站列表與分析: http://font.v-colors.com/

想要營造可愛俏皮的感覺,給疲憊的心治癒。

1025445040



Edited 1 time(s). Last edit at 11/18/2014 12:08AM by MoMi.
(編輯記錄)

(1)作業網址
http://mepopedia.com/~web103-a/midterm/midterm-1025445130
(2).
1有無遇到的問題 忘記如何置入影片,上網爬文很久但是很多都沒幫助,最後有找到了
2.製作感想 做完真的很累 但是看到自己的成品很有成就感
3.製作作業的時間 製作首頁4小時 開新分頁製作分頁時間花了5小時

1025445130楊淯婷

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445169/
(2)
1有無遇到的問 : 再貼youtobe的連結時,無法顯示,後來發現要使用舊版的連結,就更改了網址
2.製作感想 : 覺得很難,不過還是盡力做完
3.製作作業的時間 : 3天


(1)網站主題: Oggy and the Cockroaches
(2)製作動機:喜歡Oggy and the Cockroaches這部卡通,還有主角Oggy
(3)製作內容:
1.關於
2.故事內容
3.人物介紹
4.相關影音
5.外部連結
(4)資料蒐集分析
http://zh.wikipedia.org/zh-tw/%E8%82%A5%E8%B2%93%E5%A4%A7%E6%88%B0%E4%B8%89%E5%B0%8F%E5%BC%B7(資料
https://www.youtube.com/playlist?list=PLhY5ASwaJnQKnqD9GDeRLn3Hzht8joPml(影片)
◎設計優良網站(風格)列表與分析: http://www.image-men.com.tw/Shop/itemList.aspx?m=2&p=72&o=0&sa=0&smfp=3&
我喜歡這個網頁,覺得風格簡單,又內容清楚二要,淡色系的感覺
◎相關網站列表與分析: http://alasha.com.tw/news.php?s=111
這個網頁活潑鮮明、可愛,版面整齊,內容清楚
1025445169/視傳2A/古佳綺

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445175/

1有無遇到的問題 : 在設定字型時以及footer一直顯示不出來

2.製作感想 : 做完很有成就感,一直以來最不擅長的網頁設計終於有了進步

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

4.網站主題:醜比頭 kobitos

(2)製作動機:獨特角色設定方式帶孩子認識周遭生活的生態與自然、了解生命,除了放眼自然,還要找回「好奇」的能力,激發每個人久違的童心,重新審視生活中我們自以為理所當然存在的事物,重拾對生活的想像與創意

(3)製作內容:
1. 首頁
2.關於
3. 故事簡介
4.人物介紹
5.產品

(4)資料蒐集分析
https://www.google.com.tw/search?hl=zh-TW&site=imghp&tbm=isch&source=hp&biw=1366&bih=650&q=%E9%86%9C%E6%AF%94%E9%A0%AD&oq=%E9%86%9C%E6%AF%94%E9%A0%AD&gs_l=img.3...4442.13102.0.13499.6.2.0.4.0.0.288.369.1j0j1.2.0....0...1ac.1j4.58.img..5.1.79.I_WLmyY_JYk#imgdii=_

http://www.ettoday.net/news/20140408/343574.htm

◎設計優良網站(風格)列表與分析:http://woodstuck.com.tw/
woodstuck的網頁設計,有別於他的店面設計,以白色系為主色調,用簡單乾淨的方式來呈現,我十分欣賞

◎相關網站列表與分析http://www.disney.com.tw/DisneyChannel/showinfo/tvguide/index.html
最受大人小孩歡迎的迪士尼,同樣是屬於繪本類的作品,網頁設計華麗卻不失針,依舊整齊有序,可愛的卡通人物加上精緻的設計是非常好的網頁

1025445175/視傳2A/張怡萱

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445187
(2)有無遇到的問題:圖片尺寸的問題,放入後才發現要做裁切,網頁開啟後又會不見,蠻怪的,CSS一定要存入,不然開啟後就會發現STYLE都不見了
(3)製作感想:做完這次有更熟悉如何操作
(4)製作作業的時間 :9個小時多

(1)網站主題: 外星人E.T.
(2)製作動機:對外星人感到好奇
(3)製作內容:
首頁: 關於外星人
分頁:
1. 飛碟(關於UFO)
2. 入侵地球(外星人事件)
3. 外星遺跡(麥田圈)
4.影片
(4)資料蒐集分析
http://www.epochtimes.com/b5/ncid2120.htm
http://www.netra.tw/
◎設計優良網站(風格)列表與分析:
http://www.muji.com/tw/
這是MUJI的官方網站,我喜歡它的頁面看起來就很一目了然,風格也很乾淨整潔
◎相關網站列表與分析:
http://www.epochtimes.com/b5/ncid2120.htm
是一個關於不明生物的相關報導

(1)作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1025445184/
(2).
1有無遇到的問題:每一頁都有太多問題
2.製作感想:做完之後超級有成就感,不過真的太難了。
3.製作作業的時間:五~六小時

視傳二a 1025445184 陳薏茹

----------------------------------------------------------------------------------------------------------------------------------------------------------------


(1)網站主題:nike
(2)製作動機: 對於nike這個品牌的熱愛,所以打算介紹關於他的產品
(3)製作內容: 關於nike、男生、女生、小孩、影音
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.google.com.tw/#q=nike+roshe+runflyknitur%E4%BB%8B%E7%B4%B9
白色簡單的背景,符合我個人喜好的風格

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445148/
(2).
1有無遇到的問題 :技巧還沒熟練,要做出兼具美感的網頁,實在有些難度!
2.製作感想 :很難,一個小細節,可能不小心多打了空格,就無法呈現理想中的畫面,很謝謝在身邊指導過我的朋友,才能順利完成。
3.製作作業的時間 :5hr

(1)網站主題:mt紙膠帶
(2)製作動機: 喜歡收集紙膠帶,mt紙膠帶很有質感,但價格也很美,純屬欣賞,滿足自己想買mt的慾望。
(3)製作內容: 介紹>關於>創作>商品>展覽
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.masking-tape.jp/
設計畫面乾淨,清新,以圖為主。
◎相關網站列表與分析:
https://www.youtube.com/watch?v=1ejq8IfVrVQ#t=19

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445124
1有無遇到的問題 越做語法越亂
2.製作感想 很有成就感
3.製作作業的時間 2天


(1)網站主題: Niu&Bao
(2)製作動機:為我家的狗做一個網站
(3)製作內容: 妞妞甜八飽,誰是妞妞,誰是小飽,照片欣賞,影音欣賞
(4)資料蒐集分析 自己

◎設計優良網站(風格)列表與分析:

http://dimchevski.com/

覺得紫色很特別,所以運用紫色風格設計這個網頁


◎相關網站列表與分析:

沒有搜尋到類似的網站

(1)網站主題: 電影 玩具總動員
(2)製作動機: 動畫一直是我喜歡的東西,因為高中的朋友是動畫科所以也小小有接觸到,覺得非常喜歡動畫,所以想選擇一部自己喜歡的動畫電影來做為主題
(3)製作內容: 介紹劇情、角色
(4)資料蒐集分析
http://zh.wikipedia.org/wiki/%E7%8E%A9%E5%85%B7%E6%80%BB%E5%8A%A8%E5%91%98
http://huijen0214.pixnet.net/blog/post/112668616-%E7%8E%A9%E5%85%B7%E7%B8%BD%E5%8B%95%E5%93%A13
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:

(1)網站主題: 我的貓咪
(2)製作動機: 因為我們家有兩隻可愛的貓咪
(3)製作內容: 首頁
貓咪介紹
關於貓咪
貓咪種類
貓咪照片
(4)資料蒐集分析 :http://www.cc.chu.edu.tw/~c8903042/page/6.htm
http://w3.tkgsh.tn.edu.tw/98c430/aaa.htm
(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445112

(2).
1有無遇到的問題 :連結常常有問題
2.製作感想 :很難要做好久,但是很好玩
3.製作作業的時間 :5小時

(1)作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1025445100
(2)有無遇到的問題:經過上次的編排練習,這次比較有概念,過程中偶爾還是得回去看講義,但已慢慢熟練步驟
(3)製作感想:比起上回一直失敗,有過經驗已經能知道大概的操作,找資料的部分花了比較多的時間,能做出滿意的網站讓我很開心.
(4)製作作業的時間:約8小時

(1)網站主題:東京蚤之市
(2)製作動機:現代人物質過於豐富造成喜新厭舊,過度消費造成浪費,而二手文化的惜物與環保精神是我非常嚮往的,所以就將這個活動製作成了網站。
(3)製作內容:首頁、淺談市集、攤位介紹、二手文化、活動辦法
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://www.auntstella.com/
這是知名餐飲公司-詩特莉的官方網站,背景選用棉麻材質的布當底紋,搭配上水藍色布織的花邊,配色明亮溫和給人很舒服的感覺,每個介紹頁面都清楚有條理,讓人一目了然,選用的照片也是走溫馨的風格,整個網頁看下來讓人覺得心暖暖的。

1025445127 王嘉瑜

(1)作業網址
(2).
1有無遇到的問題 太複雜了,很多東西都找不太到在哪裡,上課有點太快
2.製作感想 眼花撩亂
3.製作作業的時間 一天

(1)網站主題: 電影 玩具總動員
(2)製作動機: 動畫一直是我喜歡的東西,因為高中的朋友是動畫科所以也小小有接觸到,覺得非常喜歡動畫,所以想選擇一部自己喜歡的動畫電影來做為主題
(3)製作內容: 介紹劇情、角色
(4)資料蒐集分析
http://zh.wikipedia.org/wiki/%E7%8E%A9%E5%85%B7%E6%80%BB%E5%8A%A8%E5%91%98
http://huijen0214.pixnet.net/blog/post/112668616-%E7%8E%A9%E5%85%B7%E7%B8%BD%E5%8B%95%E5%93%A13
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445106/
(2)
1有無遇到的問 : 用成員介紹用很久才用好,字一直跑來跑去
2.製作感想 : 超難做 但做完了很有成就感。
3.製作作業的時間 : 四天

(1)網站主題:ONE OK ROCK
(2)製作動機: 覺得歌好聽的團體
(3)製作內容: 1.首頁2.成員介紹3.專輯介紹4.音樂大人物5.相關連結
(4)資料蒐集分析

http://youtu.be/Hh9yZWeTmVM youtube

http://www.oneokrock.com/en/
https://tw.music.yahoo.net/album/mmPU6e.Ulid4Bz0F1UKR0091-index.html
http://www.kkbox.com/tw/tc/column/interviews-34-375-1.html
http://home.gamer.com.tw/creationDetail.php?sn=1336208

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445064/index.html
(2)
1有無遇到的問題 :CSS的語法有點混亂 有些小問題
2.製作感想 終於做完了QQ....比較會依賴老師給的影片教學才能做完,終於搞懂了一些東西,蠻欣慰的
首頁那張圖就是不會至中............
3.製作作業的時間 :3.4天

-------------------------------------------------------------------------
前置作業
(1)網站主題: HUNTERxHUNTER
(2)製作動機: 很喜歡這部動漫
(3)製作內容: 故事大綱(story).人物陣容(character).劇情內容(drawa).關於作者(author).相關內容(contens)
(4)資料蒐集分析:
http://zh.wikipedia.org/wiki/HUNTER%C3%97HUNTER(維基百科)
https://www.youtube.com/watch?v=-P27ax8I3fA(youtube)
https://www.facebook.com/pages/%E7%8D%B5%E4%BA%BA/114244185317718?fref=ts(facebook粉絲頁)
http://vlog.xuite.net/play/aUVSamU1LTE5MzExMTY3LmZsdg==/%E5%85%A8%E8%81%B7%E7%8D%B5%E4%BA%BA%E3%80%90%E9%98%BF%E8%B7%AF%E5%8A%A0-bull%3B%E6%8F%8D%E6%95%B5%E5%AE%A2%E3%80%91PV(隨意窩)

◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:http://www.design-in.tw/index.aspx

重點是裡面有他做過的網站案子,都很有設計感,列表很清楚.做得很有質感
整個很清晰一目了然


1025445064

(1)作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1005445196

(2).
1有無遇到的問題:很複雜 看css到眼花 因為眼花一直做錯 改錯 花了很久的時間

2.製作感想:覺得很緊繃很有壓力 一度趴死在電腦網頁前

3.製作作業的時間:5小時多

1005445196 張靜怡 視傳四B



Edited 1 time(s). Last edit at 11/19/2014 08:37AM by 1005445196.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-a/midterm/midterm-1025445046
(2).
1有無遇到的問題: 圖片文字都只能單放,不會做併排...剛開始連結沒搞懂,做到頭腦快炸掉,
很多語法設定還是會設定錯誤,或是設定了無反應,一直重複試,最後才成功,還有隨身碟後來電
腦讀不到,所以全部又重做了。
2.製作感想: 又多學會了好幾個新的語法,雖然手法還不純熟,無做的更精細,但有努力嘗試在做,
基本上有越做愈順的感覺,想在嘗試更多不同的編排,要不然做出來的網頁每一頁看起來都差不多,
感覺會很陽春。
3.製作作業的時間: 10小時以上(包括重做)


(1)網站主題:醜比頭/農場精靈 KOBITOS DUKAN
(2)製作動機:想介紹從日本來的可愛娃娃公仔,雖然他們長得很醜,卻醜得很可愛。
(3)製作內容:關於(about)、醜比頭介紹(KOBITOS list)、書籍(books)、影片(movies)、產品介紹(goods)
(4)資料蒐集分析:
◎設計優良網站(風格)列表與分析:
http://www.disney.com.tw/DisneyChannel/playhouse/friends/mmch/index.html
這是迪士尼動畫節目的網頁,裡面用了很多繽紛的顏色能吸引小朋友注意,還有自動聲音系統,
還有很多有趣的內容,甚至需要動到頭腦,讓小朋友玩樂愛不釋手。
◎相關網站列表與分析:
http://www.san-x.jp/characters/rilakkuma.html
http://www.san-x.co.jp/wanroom/index.html
http://www.san-x.co.jp/iiwaken/
三個網站內容都很類似都是以可愛的娃娃公仔介紹為主,都是偏向溫馨柔和色調,
以小巧可愛的編排方式排版內容,公仔可愛的表情,看了都會治癒人心。

1025445046

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445136
(2).
1有無遇到的問題:
上下左右分不清〈東西ㄧ堆,雜亂無章〉
東南西北找不到〈問題ㄧ有,解決半天〉
師磋衝淎詞不對〈只漏ㄧ字,篇篇失敗〉
日月星辰到不了〈步驟ㄧ多,感到難成〉

2.製作感想:
死到臨頭
腦袋昏頭
狗急跳牆
千鈞一髮
3.製作作業的時間 :共約半天


(1)網站主題:勇闖東方 郝毅博
(2)製作動機:以開始我對郝毅博用阿兜仔觀念來看中國文化很感興趣,後來看到他對議題的参與與關心程度,漸漸就變成他的粉絲了
(3)製作內容:簡介、關於他、影片、連結
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:
http://zh.wikipedia.org/wiki/%E9%83%9D%E6%AF%85%E5%8D%9A
http://news.sina.com.tw/article/20141021/13453381.html

1025445136 劉志彥
https://www.youtube.com/user/Laowaikanzhongguo

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025443064/
(2).
1有無遇到的問題 : 照片我不會置中我很煩惱
2.製作感想 : 做完很有成就感,雖然沒有做得很好!因為真的覺得很困難
3.製作作業的時間 : 總共四天左右




(1)網站主題: 我的毛小孩
(2)製作動機: 我家裡養了三隻狗狗,一隻柴犬我爸爸養的。兩隻馬爾濟斯是我自己養的,是母女喔~他們就是我的全部,所以我想要介紹他們!
(3)製作內容: 介紹狗狗
(4)資料蒐集分析 : 我是照著老師的網站做的,因為真的很難



1025443064

(1)作業網址:file:///F:/midterm-1025445181/index.html

(2)1有無遇到的問題:全部都很難,上面那排hander做好但都跑不出來
2.製作感想:做得過程很困難又很久
3.製作作業的時間:2天
(1)網站主題: 迪士尼
(2)製作動機: 喜歡迪士尼的卡通人物
(3)製作內容:
1.關於米奇.
2.關於迪士尼.
3.迪士尼樂園
4.影音

(4)資料蒐集分析 :http://web.ntnu.edu.tw/~497002081/H+F/History.html

參考官網:

◎相關網站列表與分析:http://home.disney.com.tw/tv/

◎設計優良網站(風格)列表與分析: http://disney.lovesakura.com/
內容簡單明瞭

視傳二a 1025445181 徐鄀凡

MEPOERs said:
JinJin: 這是自己電腦的網址喔~要上傳喔!
(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445223
(2).
1有無遇到的問題 :youtube的視頻嵌不進去
2.製作感想 :我真的不做網頁啦JOJO!
3.製作作業的時間 :3,4個小時

(1)網站主題:JOJO的奇妙冒險
(2)製作動機:超愛這部作品【閉眼
(3)製作內容:關於JOJO的簡介,動畫OP等
(4)資料蒐集分析 http://baike.baidu.com/subview/456293/10312136.htm?fr=aladdin

◎設計優良網站(風格)列表與分析:http://jojo-animation.com/
動畫的官網,進入網站時的角色剪影我很喜歡,進入網站項目分類很明確,一眼就能找到自己要看的東西
◎相關網站列表與分析: http://www.jojojojo.com/
色調呼應主題

1025445223 王芷漪



Edited 1 time(s). Last edit at 11/18/2014 11:07PM by 荆轲君.
(編輯記錄)

MEPOERs said:
JinJin: 你可以的啦!別輕言放棄!加油!
作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445067
有無遇到的問題 總是覺得語法明明打的是對的,但效果卻跟我預期的不一樣
製作感想 網頁真的需要時常的練習,要不然真的很難熟練,遇到的狀況會很多
製作作業的時間 15h

網站主題: 可愛的清新風格
製作動機: 想以食物吸引更多的食物
製作內容: 以好吃的食物為主,介紹各個美食
資料蒐集分析
設計優良網站(風格)列表與分析: http://www.miapatisserie.com.tw/
相關網站列表與分析: http://www.orangeshabu.com.tw/page04.asp
都是走一種簡潔明白有質感的風格,每一個部分都好像很有個性,
但我比較想走向日本風格淡淡的,可愛的網站。

MEPOERs said:
JinJin: 加油!!繼續努力會越來越好!
作業網址 - http://mepopedia.com/~web103-a/midterm/midterm-1025445151
(1)網站主題:酸黃瓜先生
(2)製作動機: 喜歡美式卡通
(3)製作內容:
內容介紹
人物簡介
網站連結
(4)資料蒐集分析
http://hdx3.blogspot.com/search/label/Mr.%20Pickles
◎設計優良網站(風格)列表與分析:
http://www.niusnews.com/
喜歡它那種貼近少女的感覺卻不會誇張的色調

MEPOERs said:
JinJin: 按鈕連結路徑有誤~勿取中文名!
(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445163
(2).
1有無遇到的問題 :滿多需要學習的 真的很難
2.製作感想 :做出來有一點心得了 但是還是不甘心 沒時間做
3.製作作業的時間 :4.5hr

(1)網站主題:羅志祥
(2)製作動機: 我的偶像 第一直覺就是要做他的網站
(3)製作內容: 簡介 專輯 經歷
4)資料蒐集分析:
https://www.google.com.tw/search?q=%E7%BE%85%E5%BF%97%E7%A5%A5&es_sm=93&source=lnms&tbm=isch&sa=X&ei=82prVNfLE-btmgX44oLgBA&ved=0CAgQ_AUoAQ&biw=1366&bih=667



1025445163 曾國鼎



Edited 1 time(s). Last edit at 11/19/2014 06:17AM by kuo ting.
(編輯記錄)

MEPOERs said:
JinJin: 一小時也太少,請多花時間練習,跟範例太像還沒做完,請繼續完成
(1)網站主題:



Edited 1 time(s). Last edit at 05/12/2022 03:10PM by 衛生綿.
(編輯記錄)

MEPOERs said:
JinJin: 還要注意部分連結的設定,也可加強超連結設計
(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445025/
(2)有無遇到的問題 有一些小問題 經室友以解決
(3)製作感想 色彩配色不知怎麼配
(4)製作作業的時間8個小時多吧

(1)網站主題:MT紙膠
(2)製作動機:因為前陣子有去看紙膠展 所以有現成的素圖可以做 以線條 可愛得顏色為主要顏色
(3)製作內容:
首頁:首頁
分頁:
1. 關於
2. 活動
3. 用途
4.影片
(4)資料蒐集分析
http://www.damanwoo.com/node/85379
圖片大多出於自己
◎設計優良網站(風格)列表與分析:http://baigo.pixnet.net/blog/post/36550021-%E5%A4%9A%E5%BD%A9%E6%9C%89%E8%B6%A3%E7%9A%84%E3%80%8Cmt%E5%92%8C%E7%B4%99%E8%86%A0%E5%B8%B6%E3%80%8D%E5%B1%95%E8%A6%BD 乾乾淨淨 上面的插畫也很漂亮

◎相關網站列表與分析:
http://www.pazzo.com.tw/WOMEN/NEWARRIVAL/NEWEST基本的黑白搭



Edited 1 time(s). Last edit at 11/18/2014 11:59PM by 許函郁.
(編輯記錄)

MEPOERs said:
JinJin: 清新的作品,還要注意部份的padding設定
(1)作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1025445076
(2).
1有無遇到的問題 :連結不會製作圖片與背景尺寸拿捏不好
2.製作感想 :覺得很難
3.製作作業的時間 :五小時

(1)網站主題:格雷的五十道陰影
(2)製作動機: 目前在看這本小說
(3)製作內容: 首頁.電影介紹.演員介紹.劇照
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://www.vscinemas.com.tw/
版面配置清楚.連結分類清楚.
◎相關網站列表與分析:
http://hiroking.pixnet.net/blog/post/156565079-%E4%BA%BA%E7%94%9F%E7%B5%95%E4%B8%8D%E8%83%BD%E9%8C%AF%E9%81%8E%E7%9A%8420%E9%83%A8%E3%80%8C%E7%B6%93%E5%85%B8%E5%BF%85%E7%9C%8B%E3%80%8D%E5%A5%BD%E8%90%8A%E5%A1%A2%E9%9B%BB
每個電影說明清楚.還有各個電影分類

MEPOERs said:
JinJin: 沒看到檔案喔!
http://mepopedia.com/~web100a/midterm/midterm-1025445190/

製作主題:蟑螂
製作時間:我想大約三小時
製作感想:雖然很累,而且我也不是很會,需要別人指導,可是很有趣,做自己選擇而且喜歡的主題,想到別人打開會有驚喜感,就越做越起勁

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445139/index.html
(2)
1有無遇到的問題 超級多,多到不想講,不過大多是編碼沒搞好的問題…覺得不知道背景怎麼改色很可惜,不然可以更完整
2.製作感想 做喜歡的動畫覺得很開心~不過這作業還真累,超級累,累到炸肝(。
3.製作作業的時間 大約四個晚上,花比較多時間在尋找素材


(1)網站主題: 排球少年──ハイキュー!!
(2)製作動機: 最近喜歡上的一部熱血動漫,想要把動漫跟運動一起推廣出去
(3)製作內容: 排球少年的大綱、排球知識、角色介紹、相關影片片段
(4)資料蒐集分析
http://zh.wikipedia.org/wiki/%E6%8E%92%E7%90%83%E5%B0%91%E5%B9%B4%EF%BC%81%EF%BC%81#.E4.B8.BB.E9.A1.8C.E6.9B.B2
http://baike.baidu.com/subview/10347500/11269566.htm
◎設計優良網站(風格)列表與分析:

http://www.vermontcoffeeworks.com/ (良好的 Flash 與CSS 結合)
http://www.letitbleedbook.com/ (大膽的視覺設計,使這個網站脫穎而出)

◎相關網站列表與分析:

http://www.j-haikyu.com/

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445031
(2).
1有無遇到的問題 超級難搞 搞不懂很多細節 明明做好用別台電腦開就跑版
2.製作感想 以後絕對不要從事網頁設計相關行業
3.製作作業的時間 13小時

(1)網站主題: 無印良品
(2)製作動機:喜歡簡單的設計
(3)製作內容: 關於無印良品的品牌介紹跟一些商品介紹
(4)資料蒐集分析 http://www.muji.com/tw/
http://www.uniqlo.com/tw/

(1)作業網址 : http://mepopedia.com/~web103-a/midterm/midterm-1025445160/index.html
(2).
1有無遇到的問題:因為我是用DW CC版做的,結果上傳開起來都跟自己在預視看的不一樣,讓我很有挫折。
2.製作感想:經過一直重做修改,最後製作終於成功,真的有很大的成就感,謝謝在我不懂時幫助我的同學。
3.製作作業的時間 7-8小時

(1)網站主題:Delicious food
(2)製作動機:喜歡美食
(3)製作內容:FOOD HOME.VIDEO.RECIPES.DRINKS.VEGETABLES
(4)資料蒐集分析 : https://www.yahoo.com/food

1025445160 吳羽筑

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445052
(2).
1.很難
2.SO HARD
3.1DAY

(1)作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1025445181/index.html

(2)1有無遇到的問題:全部都很難,上面那排hander做好但都跑不出來
2.製作感想:做得過程很困難又很久
3.製作作業的時間:2天
(1)網站主題: 迪士尼
(2)製作動機: 喜歡迪士尼的卡通人物
(3)製作內容:
1.關於米奇.
2.關於迪士尼.
3.迪士尼樂園
4.影音

(4)資料蒐集分析 :http://web.ntnu.edu.tw/~497002081/H+F/History.html

參考官網:

◎相關網站列表與分析:http://home.disney.com.tw/tv/

◎設計優良網站(風格)列表與分析: http://disney.lovesakura.com/
內容簡單明瞭

視傳二a 1025445181 徐鄀凡

(1)作業網址;http://mepopedia.com/~web103-a/midterm/midterm-1025445037

(2)有無遇到的問題:youtube影片連結不會弄

(3)製作感想 :做很久

(4).製作作業的時間:12小時


(1)網站主題:神魔之塔

(2)製作動機:很喜歡神魔之塔

(3)製作內容:遊戲教學and介紹簡介

(4)資料蒐集分析:

◎設計優良網站(風格)列表與分析:http://tos.hehagame.com/

◎相關網站列表與分析:http://tos.hehagame.com/



Edited 5 time(s). Last edit at 11/19/2014 06:19AM by 1025445037.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445163
(2).
1有無遇到的問題 :滿多需要學習的 真的很難
2.製作感想 :做出來有一點心得了 但是還是不甘心 沒時間做
3.製作作業的時間 :4.5hr

(1)網站主題:羅志祥
(2)製作動機: 我的偶像 第一直覺就是要做他的網站
(3)製作內容: 簡介 專輯 經歷
4)資料蒐集分析:
https://www.google.com.tw/search?q=%E7%BE%85%E5%BF%97%E7%A5%A5&es_sm=93&source=lnms&tbm=isch&sa=X&ei=82prVNfLE-btmgX44oLgBA&ved=0CAgQ_AUoAQ&biw=1366&bih=667



1025445163 曾國鼎

(1)作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1005445181

(2)
1有無遇到的問題:忘記自己電腦的版本是全英文 找不到按鈕的放置方法跟放置位置 無法獨自建立整體架構
2.製作感想:還好上禮拜老師有給整體的架構 不然 我講我應該 做一個禮拜也做不出來 ... 好難 好煩 但做完很有成就感。
3.製作作業的時間:2天

(1)網站主題: 日本新生代演藝男星

(2)製作動機: 今年自己有在看小有名氣的演藝人

(3)製作內容:
1.NEWS 簡介 最新消息.
2.MEDIA 宣傳
3.INTERVIEW 文字訪談
4.PROFILE 演藝資歷

(4)資料蒐集分析 :http://ameblo.jp/kento-yamazaki/

參考官網:

◎相關網站列表與分析:http://ameblo.jp/kento-yamazaki/
http://www.stardust.co.jp/profile/yamazakikento.html

◎設計優良網站(風格)列表與分析:

視傳4C 1005445181 張嘉偉



Edited 2 time(s). Last edit at 11/19/2014 09:59AM by Jhang Isher.
(編輯記錄)

作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1025445085
(2).
1有無遇到的問題 多到我要崩潰
2.製作感想 很崩潰的學到東西,我要認真上課,不敢偷懶了
3.製作作業的時間 崩潰數小時
(1)網站主題: 一位好的動畫大師
(2)製作動機: 因為我很喜歡宮崎駿
(3)製作內容:

頁面
0.入口頁 1.個人經歷 2.作品介紹 3.作詞作曲 4.個人榮譽 5.影響與評價

(4)資料蒐集分析
http://zh.wikipedia.org/wiki/%E5%AE%AB%E5%B4%8E%E9%AA%8F
http://kavanachang.pixnet.net/blog/post/82807869-%E3%80%8C%E6%9D%B1%E4%BA%AC%E3%80%82%E9%81%8A%E3%80%8D%E8%B6%85%E5%AE%8C%E6%95%B4%E5%AE%AE%E5%B4%8E%E9%A7%BF%E5%8D%9A%E7%89%A9%E9%A4%A8%EF%BC%88%E4%B8%89%E9%B7%B9%E3%81%AE%E6%A3%AE
http://blog.xuite.net/ci17518/skywalker/12105746-%E6%97%A5%E6%9C%AC+-+%E5%AE%AE%E5%B4%8E%E9%A7%BF%E7%BE%8E%E8%A1%93%E9%A4%A8
◎設計優良網站(風格)列表與分析:
http://www.mydesy.com/tag/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88

插畫賣點子

覺得很可愛我很喜歡
1025445085 楊婷淵

(1)作業網址:
http://mepopedia.com/~web103-a/midterm/midterm-1025445082/index.html
(2).
1有無遇到的問題:邊框跑掉,找好久原來是連接css的語法錯誤
2.製作感想:好累,但很有成就感。
3.製作作業的時間:2.5天

(1)網站主題:cherng馬來貘
(2)製作動機:他是我喜歡的插畫家之一
(3)製作內容:
1.簡介
2.關於Cherng
3.影音
4.連結
(4)資料蒐集分析
https://zh-tw.facebook.com/cherngs.y/posts/477606255643688
http://www.masmas.com.tw/Cherng/action-designers_detail-cid-1-did-1.htm
http://www.u-style.com.tw/topic/view/46424
http://www.mottimes.com/cht/interview_detail.php?serial=181

◎設計優良網站(風格)列表與分析:
ㄇㄞˋ點子靈感創意誌 http://www.mydesy.com/
排版整齊,雖然許多連結在同一個網頁卻不覺得亂,主要是讓人看起來很舒適,所以選此網頁作為參考網站。

◎相關網站列表與分析:
http://www.biosmonthly.com/contactd.php?id=3216
乾淨整潔,清楚表達圖文。

(1)作業網址:http://mepopedia.com/~web103-a/midterm/midterm-1025445115/
(2).
1有無遇到的問題:太多了,連結沒連好,還以為是我電腦壞了。
2.製作感想:沒有做好,所以失敗。 下次要繼續做好點,要放更多好吃的。然後,真的難!!!
3.製作作業的時間:1天


(1)網站主題: 食物,宵夜。
(2)製作動機: 主題想很久,想不出來,問了朋友,她說想看宵夜,所以放食物圖。
(3)製作內容: 宵夜,食物,還有運動一下
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:



Edited 1 time(s). Last edit at 11/21/2014 11:07PM by 1025445115.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445217
(2)遇到很多問題比如圖檔沒掉,操作不得手的問題
(3)製作感想 累
(4)製作作業的時間 7個小時多吧

(1)網站主題: 《平凡之路》音樂介紹
(2)製作動機:想讓大家瞭解《平凡之路》這首歌
(3)製作內容:
《平凡之路》音樂簡介
分頁: 詳細介紹,
PS:改了很多次葉問了很多個人,作業還是沒辦法和css連上,

1. http://mepopedia.com/~web103-a/midterm/midterm-1005445189
2. 用Note++製作非常的麻煩 ,很多語法都要一直查如何使用,而且設計方面很困難


(1)網站主題: Brock Lesnar 介紹
(2)製作動機: 非常崇拜的運動員
(3)製作內容: 影音 圖片 網站連結 基本資料介紹
(4)資料蒐集分析 WWE / UFC 官方網站
◎設計優良網站(風格)列表與分析: WWE.COM 此官網互動感很強 顏色搭配方常有風格
◎相關網站列表與分析: WWE.COM 會因螢幕解析調整

1025445103 張秀安

(1)作業網址 http://mepopedia.com/~web103-a/midterm/midterm-1025445103/
(2)遇到很多問題 像是不太了解軟體導致於不會做
(3)製作感想 很累但是做完有成就感
(4)製作作業的時間 8小時

(1)網站主題:獵人
(2)製作動機:想讓大家瞭解獵人這部卡通
(3)製作內容: 獵人詳細介紹 主角介紹 圖片欣賞