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

Advanced

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

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

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



1. 一、製作說明:


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

2.每個同學記得在title的部分打上"自訂的主題"

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

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

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

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

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

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


8.製作完成上傳至FTP

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

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



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


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

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


3. 三、繳交作業方式


1.製作完成後,檔案命名方式:

期中作業FTP上的資料夾為:midterm

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

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

存放在 < midterm-學號 > 的資夾內



2.全部完成後上傳至FTP

3.依進度回覆本篇文章


前置作業(11/05)
(1)網站主題:
(2)製作動機:
(3)製作內容:
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
◎相關網站列表與分析:



完成品(11/12前)
請將這項放置於文章最前面
(1)作業網址
(2)
1有無遇到的問題
2.製作感想
3.製作作業的時間


4.請務必在11/17前回覆,否則為遲交


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



隨時補充:

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圖片資料夾裡



5. 參考範例



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

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



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/

=================================================
若經發現作業為直接複製同學檔案以零分計
=================================================



Edited 1 time(s). Last edit at 10/27/2016 09:32AM by JinJin.
(編輯記錄)

完成品
(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445115
      http://mepopedia.com/~web104-2a/midterm/midterm-1035445115-1
(2)
1有無遇到的問題:方格上面的問題有些不太能操控但基本上都還可以
2.製作感想:在製作這網頁因為是自己喜歡的動漫所以很開心grinning smiley
3.製作作業的時間:一整天下午

(1)網站主題: Onepiece-航海王
(2)製作動機: 想從回航海王的懷抱
(3)製作內容: 關於航海王的故事以及音樂
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
SQUAT
http://www.squatny.com/#otherprojects
設計簡單風格具有特色,讓人覺得很新奇。
◎相關網站列表與分析:
航海王網站
http://www.ttv.com.tw/drama/2005/cartoon/onepeace/01-story.htm
設計簡單明瞭,不佔整個網站比例。


學號:1035445115



Edited 2 time(s). Last edit at 11/17/2015 03:38PM by kelly270.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445094
(2)
1有無遇到的問題:
按鈕連結有時候會連不到 要連好幾次 好幾次

2.製作感想:終於做完 很開心
3.製作作業的時間:2天

(1)網站主題:流浪犬
(2)製作動機:社會議題
(3)製作內容:關心社會議題

學號:1035445094

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445058/
(2)
1有無遇到的問題:
圖片有時會跑框 頁面不太會設定

2.製作感想:終於做完了
3.製作作業的時間:2天

(1)網站主題:EPIK HIGH 韓國歌手
(2)製作動機:歌好聽
(3)製作內容:歌手介紹

學號:1035445058

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445199
(2)
1有無遇到的問題:
按鈕連結有時候會連不到 要連好幾次 好幾次
不太會放影片
2.製作感想:終於做完 很開心
3.製作作業的時間:一個下午

(1)網站主題:我們這一家
(2)製作動機:好看 我到現在還是會看
(3)製作內容: 我們這一家介紹
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
宮崎駿三鷹之森吉卜力美術館網
http://www.ghibli-museum.jp/
簡單、可愛,很多宮崎駿大師的作品 喜歡~
◎相關網站列表與分析:
我們這一家網站
http://www.e-muse.com.tw/property/ata_shin_chi/introduction/20070404/
很可愛,就是很卡通的形式,簡單

學號:1035445199

1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445172
(2)
1有無遇到的問題: 千萬不要亂動資料夾,動了就很麻煩
2.製作感想:超級麻煩的,但做完了很有成就感,而且很可愛
3.製作作業的時間:一個晚上

(1)網站主題:玩具總動員
(2)製作動機:很好看 而且我很喜歡裡面的角色
(3)製作內容:玩具總動員介紹
(4)資料蒐集分析
故事大綱 index.html
人物介紹 people.html
製作團隊 team.html
影片賞析 movie.html
◎設計優良網站(風格)列表與分析:
http://toystorypixar.weebly.com/
可愛的 分析內文跟圖很清楚
◎相關網站列表與分析:
/http://fennies18.pixnet.net/blog/post/100797181-%E7%9C%BC%E8%A7%92%E6%9C%89%E6%B7%9A---%E7%8E%A9%E5%85%B7%E7%B8%BD%E5%8B%95%E5%93%A13
玩具總動員 它的風格很可愛



Edited 1 time(s). Last edit at 11/24/2015 02:32AM by 邱薏娟.
(編輯記錄)

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

1有無遇到的問題:所有東西都要非常謹慎的完成
2.製作感想:雖然很複雜但是其實作完成很有成就感!
3.製作作業的時間:兩天

(1)網站主題:birdy
(2)製作動機:喜歡乾乾淨淨的感覺就想主角的歌聲一樣
(3)製作內容:birdy英國女歌手
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://officialbirdy.com/
關於birdy的網站
◎相關網站列表與分析:
http://officialbirdy.com/
裡面都是介紹birdy的東西
例如放影片

學號:1035445028 陳仲伶

完成品
(1)作業網址 :http://mepopedia.com/~web104-2a/midterm/midterm-1035445073
(2)
1有無遇到的問題 :很多地方只要少一個步驟就會失敗
2.製作感想 :雖然一開始困難重重但完成後很開心
3.製作作業的時間 :很長...

前置作業
(1)網站主題: 嚴爵
(2)製作動機: 因為很喜歡嚴爵
(3)製作內容: 嚴爵的介紹
(4)資料蒐集分析

◎設計優良網站(風格)列表與分析:
無印良品
http://www.muji.com/tw/
網頁風格與他們所販賣的商品相符合,都是走簡單的風格

◎相關網站列表與分析:
Net官網
http://www.net-fashion.net/
版面乾淨不雜亂,視覺上很舒服

個作業的網址則為:http://mepopedia.com/~web104-2a/midterm/midterm-1035445184




前置作業
(1)網站主題:BEAST
(2)製作動機: 很欣賞也很喜歡的團體
(3)製作內容:介紹成員和作品等等.......。

◎設計優良網站(風格)列表與分析:
日本插畫師網 http://www.pixiv.net/

總是能用大量的圖片牆吸引人的眼球,操作頁面簡潔方便。

◎相關網站列表與分析:
http://hanzhiyu.pixnet.net/blog/post/33800862-%E5%9C%98%E9%AB%94---beast(%EB%B9%84%EC%8A%A4%ED%8A%B8)%E8%B3%87%E6%96%99%E4%BB%8B%E7%B4%B9-(150805%E6%9B%B4%E6%96%B0)

資料多元 且分類項目清楚良好



完成品

1有無遇到的問題

太多了.....(但有順利解決)

2.製作感想

製作上有些地方會一直跑掉就要從心連結讓人很崩潰,但完成後非常開心,覺得很有趣。

3.製作作業的時間

4~5H

(1)
作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445211
      http://mepopedia.com/~web104-2a/midterm/midterm-1035445211-1
(2)
1有無遇到的問題:還好,編排吧,排好看這點覺得有些困難

2.製作感想:做完開心

3.製作作業的時間:不知道,大概五六小時

(1)網站主題: 一拳超人、七原罪
(2)製作動機: 最近在看,所以想做
(3)製作內容: 一拳超人、七原罪相關資訊
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
雲端數位科技有限公司 MINMAX
http://minmax.biz/service.php
感覺高科技感覺,簡潔、明瞭

◎相關網站列表與分析:
一拳超人官網
http://onepunchman-anime.net/
排版視覺上整齊,畫面良好


學號:1035445211

完成品
(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445181
     
(2)
1有無遇到的問題:不知道為什麼header和btn在DW用好好的
用網站開就有一條黑色分隔線無法連在一起
2.製作感想:資料比想像中的多
3.製作作業的時間:很久

(1)網站主題: KAT-TUN
(2)製作動機: 從小就很喜歡KAT-TUN
(3)製作內容: 關於 KAT-TUN的介紹經歷作品

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
INKT OFFICIAL WEB SITE
https://inkt.asia/pc/
很符合團體形象的網站,簡單明瞭搖滾。

◎相關網站列表與分析:
卡通般精采 唱出勝利之勢
http://castnet.nctu.edu.tw/castnet/article/7148?issueID=528
資料清楚詳細,很用心的描述。

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445214/
(2)
1有無遇到的問題: 不會放音樂
2.製作感想:資料好難找,過成很悲劇,做完了很開興(撒花),覺得我好厲害,其實不難
3.製作作業的時間:一個下午

(1)網站主題:銀魂
(2)製作動機:動畫好笑,看到有人做航海王,突然想做
(3)製作內容: 作品介紹index.html
角色介紹character.html
相關音樂music.html
有趣片段movie.html
相關聯結links.html
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
銀魂SUNRISE動畫官方網站
http://www.sunrise-inc.co.jp/gintama/
分類清楚簡單明了,日本風味十足,超做方便
◎相關網站列表與分析:
銀魂東京電視台動畫官方網站
http://www.tv-tokyo.co.jp/anime/gintama/index2.html
樣樣是日本風味十足,資勞豐富,操作簡單

學號:1035445214

完成品
(1)作業網址 :http://mepopedia.com/~web104-2a/midterm/midterm-1035445127
(2)
1有無遇到的問題 :無問題
2.製作感想 :一開始都看不懂 做久了就學會了
3.製作作業的時間 :1小時

前置作業
(1)網站主題: 復仇者聯盟2-奧創紀元
(2)製作動機: 很酷
(3)製作內容: 劇情介紹
(4)資料蒐集分析

◎設計優良網站(風格)列表與分析:
天狼星設計
http://www.sirius-design.com.tw/
網頁設計的很有互動

◎相關網站列表與分析:
pkthink
http://www.pkthink.com/
簡單不雜亂 很有質感

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445142/
(2)
1有無遇到的問題:
按鈕連結有時候會連不到 要連好幾次 好幾次
不太會放影片 還有放音樂不錯爽spinning smiley sticking its tongue out
2.製作感想:終於做完 很爽
3.製作作業的時間:一整天

(1)網站主題:麥可喬丹
(2)製作動機:好看 我到現在還是會看
(3)製作內容: 我們這一家介紹
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
巴哈遊戲資訊網
http://www.gamer.com.tw/
排版間單俐落
◎相關網站列表與分析:
http://nba.udn.com/nba/index?gr=www
nba資訊網
學號:1035445142

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445154/
(2)
1有無遇到的問題:
圖片就算設定好了會一直跑位,試了幾次才成功
上傳後有些圖片會不見,可是在自己的電腦都很正常
2.製作感想:花了很多時間,弄不好的時候真的會覺得很煩,但是完成後,非常開心。
3.製作作業的時間:一整天

(1)網站主題:攻殼機動隊
(2)製作動機:喜歡這部動畫
(3)製作內容: 內容簡介、介紹人物 、影片
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.eslitecorp.com/index.aspx?a=tw&l=b
簡單明瞭,整體版面很明亮
◎相關網站列表與分析:
http://www.taipei-101.com.tw/map.aspx?cid=5
資訊很多,但排版清楚整齊

學號:1035445154

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445217/
1有無遇到的問題:有時候看不懂需要回頭找講義
2.製作感想 :對網頁這堂課更有興趣了
3.製作作業的時間 :一個晚上



(1)網站主題:陳漫
(2)製作動機:是我很喜歡的一位攝影師所以想要製作一個介紹她的網站
(3)製作內容: 關於她開始攝影至今的歷程
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://adele.com/ 圖片雖然佔據整個版面卻不會有壓迫感,而且字體編排很有設計感又很漂亮
◎相關網站列表與分析:http://chenmaner.com.cn/ 網站編排圖片簡單明瞭

(1)
作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445163/
(2)
1有無遇到的問題: 連結部分花了比較多時間
2.製作感想:很多小細節容易錯亂

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

(1)網站主題: one punch man
(2)製作動機:漫畫帥
(3)製作內容: 一拳超人相關介紹
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
競時通
http://www.garena.tw/index.php
整齊亮麗
◎相關網站列表與分析:
http://acg.gamer.com.tw/acgDetail.php?s=59863
介紹的非常詳細



學號1035445163

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445148/index.html
(2)
1有無遇到的問題: 沒有,除了忘記怎麼坎入影片。
2.製作感想:還沒做前覺得會很難做,做了之後覺得也不太很難。
3.製作作業的時間:4個小時

(1)網站主題:探險活寶
(2)製作動機:喜歡這部卡通
(3)製作內容:探險活寶介紹
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://zh.wikipedia.org/zh-tw/%E6%8E%A2%E9%9A%AA%E6%99%82%E5%85%89
可愛的 分析內文跟圖很清楚
◎相關網站列表與分析:
http://attw.funz.com.tw/index.php/%E9%A6%96%E9%A0%81

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445001
(2)
1有無遇到的問題: 角色介紹那頁的部分 第一次放圖片時 圖片會跑掉 只好改樣式
2.製作感想:終於結束期中作業了 終於 終於 下台一鞠躬
3.製作作業的時間:分兩次完成

(1)網站主題:陰屍路The Walking Dead
(2)製作動機:從第一季一直看到現在正在演的第六季 已經是紛絲了!!
(3)製作內容:
劇情介紹
角色介紹
影集介紹
劇照分享
影片分享
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
國立歷史博物館全球資訊網
http://www.nmh.gov.tw/zh/index.htm
網站設計具有東方風格的味道 介紹許多歷史文物相關資料...
◎相關網站列表與分析:
The Walking Dead - AMC
http://www.amc.com/shows/the-walking-dead
設計十分符合劇情內容 黑白搭配 乾淨簡單

學號:1035445001

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445193
(2)
1有無遇到的問題:
沒有
2.製作感想:很開心
3.製作作業的時間:2天

(1)網站主題:lady gaga愛你喔
(2)製作動機:因為他勇於做自己所以從國中就一直有關注她
(3)製作內容:做自己別害怕gaga挺你到底born this way<3

學號:1035445193

(1)作業網址 http://mepopedia.com/~web104-2a/midterm/midterm-1035445157
(2)
1有無遇到的問題 一開始最上面的圖片跑不出來,後來自己跳出來~
2.製作感想 做完很有成就感雖然做的沒很好
3.製作作業的時間 1天

(1)網站主題: 五月天
(2)製作動機: 五迷
(3)製作內容: 五月天
(4)資料蒐集分析 :各個網站

(1)作業網址: http://mepopedia.com/~web104-2a/midterm/midterm-1035445061/
(2)
1有無遇到的問題:不知道為什麼會有邊框的空格,也一直改不掉。原本想要放的主題圖片因為檔案太小所以只好捨棄。
2.製作感想:雖然很麻煩,但因為是跟同學揪團一起做,時間就過的滿快也不無聊,做完也很有成就感。
3.製作作業的時間:6小時

(1)網站主題: 嚕嚕米
(2)製作動機: 喜歡MOOMIN

(3)製作內容: 介紹MOOMIN

(4)資料蒐集分析: 維基百科/嚕嚕米官網

學號:1035445061



Edited 3 time(s). Last edit at 11/24/2015 01:01AM by lily850204.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web104-2a/midterm/midterm-1035445151/
(2)
1有無遇到的問題:都是一些小問題,回頭看一下講義就會了,老師講義都寫得很詳細
2.製作感想:雖然花了滿長的時間,但做出來成就感滿大的,一直點來點去哈哈,很開心
3.製作作業的時間:3小時

(1)網站主題: STAR WARS 星際大戰

(2)製作動機: 從小時候就熱愛這部電影,近期快要上第7集,才想說做這個我熱愛的電影

(3)製作內容: 介紹星際大戰這部電影

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.starwars-tw.com/story/character/character.htm
這個網站幫我許多,裡面有很多我需要的資料,東西都很充足,資料也一直在更新

學號:1035445151



Edited 1 time(s). Last edit at 11/24/2015 12:36AM by Gochen.
(編輯記錄)

完成品
(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445088
(2)
1有無遇到的問題:嵌入影片的問題。
2.製作感想:因為主題是自己喜歡的,製作起來也比較開心,很有成就感。
3.製作作業的時間:6小時

(1)網站主題: 蘇打綠
(2)製作動機: 非常喜歡蘇打綠的專輯和創作歌曲。
(3)製作內容: 春、夏、秋、冬四張專輯的介紹與分析。
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
蘇打綠官方網站
http://www.sodagreen.com.tw/
視覺設計上很特別,可以試聽歌曲、查詢近期的活動,是一個非常完整的網站。

◎相關網站列表與分析:
魔鏡歌詞網
http://mojim.com/twh104616.htm
此網頁集結許多不同歌曲的歌詞,內容十分豐富且完整。

學號:1035445088

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445208/index.html
(2)
1有無遇到的問題: 忘記怎麼放入影片後來想起來。
2.製作感想:我沒有花太多時間,原本想說要花很久。
3.製作作業的時間:3.5個小時

(1)網站主題:某插畫家
(2)製作動機:喜歡他的插畫
(3)製作內容:介紹他的畫
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.sachinteng.com/
◎相關網站列表與分析:
http://www.sachinteng.com/

no

111



Edited 1 time(s). Last edit at 11/24/2015 12:52PM by 1035445148.
(編輯記錄)

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

2.製作感想:
蠻好玩的
3.製作作業的時間:
3個半小時

(1)網站主題: Tiziano Vecell
(2)製作動機: 想試試看做出博物館介紹畫展的感覺
(3)製作內容: 關於文藝復興時期的大師-堤香的作品、生平、影片的介紹
(4)資料蒐集分析
各國博物館與畫廊的網站
http://www.galleriaborghese.it/
http://www.uffizi.firenze.it/
http://www.savevenice.org/
https://www.museodelprado.es/
http://www.khm.at/
簡單明瞭為主

(1) 作業網址: http://mepopedia.com/~web104-2a/midterm/midterm-1035445145
(2)
1有無遇到的問題 :很多細節都不太清楚 後來看影片才了解內容
2.製作感想 :覺得自己可以做好一個網站很開心,因為是製作自己喜歡的東西所以很有興趣,雖然有點困難,
但是我還是很努力的完成。
3.製作作業的時間 10小時

(1)網站主題: 海底總動員
(2)製作動機: 覺得很可愛的電影
(3)製作內容: 介紹海底總動員這個電影,因為這部電影很有意識很有趣。
(4)資料蒐集分析
故事介紹story.html
角色介紹role.html
影片介紹movie.html
團隊介紹team.html
商品介紹product.html



Edited 1 time(s). Last edit at 11/24/2015 02:27AM by 張子芸.
(編輯記錄)

(1)作業網址 :http://mepopedia.com/~web104-2a/midterm/midterm-1035445046/
(2)
1有無遇到的問題 :無法背起語法 語法會錯亂
2.製作感想 :好累
3.製作作業的時間 :好像很長
前置作業
(1)網站主題: 探險活寶
(2)製作動機: 我是這部片的粉絲
(3)製作內容: 探險活寶的概要
(4)資料蒐集分析

◎設計優良網站(風格)列表與分析:
google
https://www.google.com.tw/?gfe_rd=cr&ei=1HxTVv7tHpKT9QWup6OYCw&gws_rd=ssl
為什麼他能成功?! 就是它的網頁啊! 大家都知道的!
◎相關網站列表與分析:
deviantar
http://www.deviantart.com/browse/all/
主要是藝術相關的都在上面,主要他的藝術列表非常細分

學號:1035445046

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445025
(2)
1有無遇到的問題:
繞圖排字有困難
2.製作感想:一開始不情願到後面停不下來
3.製作作業的時間:6小時

(1)網站主題:細田守
(2)製作動機:被譽為宮崎駿接班人 但又被宮崎駿背叛很糾結
(3)製作內容: 作者介紹

學號:1035445025

(1)作業網址 :http://mepopedia.com/~web104-2a/midterm/midterm-1035445052
(2)
1有無遇到的問題 用DW的時候都正常,但做完開往也字都往上跑
2.製作感想 :耶~終於做完了!感謝教我的同學們
3.製作作業的時間 :3小時

前置作業
(1)網站主題: Bigbang
(2)製作動機: 我的偶像是隊長
(3)製作內容: 團體介紹專及介紹
(4)資料蒐集分析

◎設計優良網站(風格)列表與分析:
http://www.beast-tw.com/
粉絲後援會
顏色簡單資料豐富齊全
◎相關網站列表與分析:
Bigbang網站
http://mepopedia.com/~web100a/final/final-1001445072/bigbang.html
介紹詳細
學號:1035445052

(1)作業網址 :http://mepopedia.com/~web104-2a/midterm/midterm-1035445067
(2)
1有無遇到的問題 :更改背景顏色等語法區塊很容易搞混
2.製作感想 :製作需要耐心與時間,完成後有成就感
3.製作作業的時間 :一個禮拜

前置作業
(1)網站主題:龍貓
(2)製作動機:設計風格好設定
(3)製作內容: 劇情簡介
(4)資料蒐集分析

◎設計優良網站(風格)列表與分析:
http://phpsrv.nutn.edu.tw/~tmfe/UCSPrd/webmag/index2.php?p=11

◎相關網站列表與分析:
http://www.ghibli-museum.jp/

學號:1035445067

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445010
(2)
1有無遇到的問題:連結上出了一些小問題
2.製作感想:認真做下來真的其實蠻簡單有趣
3.製作作業的時間:六小時

(1)網站主題: 植田正治
(2)製作動機: 攝影師介紹
(3)製作內容: 關於他醫生的攝影作品與展覽
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://carol.bluecircus.net/archives/japan/travel_23.php
http://www.thesaltyard.hk/#!illusion/c1run
設計簡單風格具有特色,讓人覺得很新奇。
◎相關網站列表與分析:
http://www.mottimes.com/cht/article_detail.php?type=0&serial=863
https://www.youtube.com/watch?v=jT4LaC3nlJ8

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445196/
(2)
1有無遇到的問題: 幾乎都不會
2.製作感想:從頭做起 每次都快瘋掉 不過做完之後 成就感很高 很開心~
3.製作作業的時間:5-6小時

(1)網站主題:少女時代
(2)製作動機:我是SONE
(3)製作內容: 作品介紹index.html
成員介紹Introduction.html
音樂專輯music.html
影片欣賞movie.html
子團體TTS.html
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
少女時代-維基百科
https://zh.wikipedia.org/wiki/%E5%B0%91%E5%A5%B3%E6%97%B6%E4%BB%A3
◎相關網站列表與分析:
KPOP韓星網
http://www.koreastardaily.com/tc/tags/%E5%B0%91%E5%A5%B3%E6%99%82%E4%BB%A3


學號:1035445196 葉至洋

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


2.製作感想:很有成就感
3.製作作業的時間:一個晚上

(1)網站主題:冰雪奇緣
(2)製作動機:很喜歡雪寶
(3)製作內容: 冰雪奇緣劇情與角色內容
(4)資料蒐集分析

◎相關網站列表與分析:
http://readandanalyse.blogspot.tw/2014/02/blog-post_17.html
內容講的很詳細


學號:1035445034

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445049/5.html
(2)
1有無遇到的問題:一開始會很難摸索,之後熟練一些就比較好上手了,但還是有些東西不會
圖片的圖忘記放在同一個資料夾裡所以全部都跑掉了...
2.製作感想:眼睛會花掉
3.製作作業的時間:一個禮拜

(1)網站主題: 川島小鳥
(2)製作動機: 帶著熱情繼續堅持下去吧!一定會大有收穫的。
(3)製作內容: 關於川島小鳥拍攝的故事
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
Planet行星

http://www.wooplanet.com/
版面設計風格有趣具有特色,讓人想買再買在在買買買。

川島小鳥個人網站 --> http://www.kawashimakotori.com/


◎相關網站列表與分析:
川島小鳥與郭采潔的網站

http://okapi.books.com.tw/article/1492
設計簡單明瞭,人物專訪也說明的詳細明瞭。


學號:1035445049



Edited 4 time(s). Last edit at 11/28/2015 12:09AM by 1035445049.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445124
(2)
1有無遇到的問題: 圖片還是出不來

2.製作感想:有些困難耶
3.製作作業的時間:一個晚上

(1)網站主題:mstudios
(2)製作動機:想介紹網站
(3)製作內容: 關於mstudios
(4)資料蒐集分析

◎相關網站列表與分析:

http://mstudios.mymy.tw/


學號:1035445124

(1)
作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445202
    
(2)
1.有無遇到的問題: 還可以

2.製作感想: 排版有點難

3.製作作業的時間: 4-5hr

(1)網站主題: 久石讓
(2)製作動機: 音樂很好聽,從小看宮崎駿電影聽他的音樂長大
(3)製作內容: 久石讓相關資訊
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.goldenhorse.org.tw/
2015金馬影展
進首頁看到獎項得主合照氣勢很磅礡。

◎相關網站列表與分析:
http://www.universal-music.co.jp/hisaishi-joe/



學號:1035445202 張洺碩

完成品
(1)作業網址 :http://mepopedia.com/~web104-2a/midterm/midterm-1035445118/
(2)
1有無遇到的問題 :無
2.製作感想 :網頁其實不難
3.製作作業的時間 :久
(1)網站主題:小魔女
(2)製作動機:小時候愛看的動畫
(3)製作內容: 作品介紹index.html

學號:1035445118

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

(2)
1有無遇到的問題: No
2.製作感想:很有趣
3.製作作業的時間: 1小時

(1)網站主題:攝影師 ARIELLE MANESH
(2)製作動機:喜歡她
(3)製作內容: 關於ARIELLE MANESH
(4)資料蒐集分析

◎相關網站列表與分析:
http://www.ariellemanesh.com/
ARIELLE MANESH個人網站


學號:10354450121

(1)作業網址: http://mepopedia.com/~web104-2a/midterm/midterm-1035445130/
(2)
1有無遇到的問題: 沒有
2.製作感想: 蠻難的,做很久
3.製作作業的時間: 兩天

(1)網站主題:G.J.R Lover
(2)製作動機:好玩~
(3)製作內容:About God
(4)資料蒐集分析

◎相關網站列表與分析:

https://unsungchess.wordpress.com/2015/11/02/%e5%bd%b1%e7%89%87%e6%83%b3%e5%af%ab%e7%9a%84%e4%bf%a1%e5%af%ab%e5%9c%a8%e6%b0%a3%e7%90%83%e4%b8%8a%e9%87%91%e5%a3%ab%e9%a0%93%e5%81%89%e5%a4%a7%e7%9a%84%e5%b0%91%e5%b9%b4/


學號:1035445130

完成品
(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445178
     
(2)
1有無遇到的問題:圖片連結
2.製作感想:覺得很有趣
3.製作作業的時間:4小時

(1)網站主題: 黃阿瑪的後宮生活
(2)製作動機: 很喜歡阿瑪和牠的後宮們
(3)製作內容: 後宮們的背後故事還有周邊
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
facebook
https://www.facebook.com/fumeancats/?fref=ts
◎相關網站列表與分析:
http://www.tanews.org.tw/info/7248



學號:1035445178

(1)
作業網址:http://mepopedia.com/~web104-2a/hw03/hw03-1035445187/index.html
(2)
1有無遇到的問題: 繞圖排文 和次標題 不太會用
教學影片太複雜
2.製作感想:很多小細節還是做不好

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

(1)網站主題: 下田光介紹
(2)製作動機: 從高中就一直很喜歡這位插畫家
(3)製作內容: 下田光相關介紹
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://fishsaut.com/
簡單乾淨俐落
◎相關網站列表與分析:
http://fishsaut.com/2010/07/hikari-shimoda.html
排版簡潔明瞭舒適

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445079
(2)
1有無遇到的問題:
ㄜ,,,,跟不太上

2.製作感想:終於做完 很開心
3.製作作業的時間:2天

(1)網站主題:小王子
(2)製作動機:動畫
(3)製作內容:照片為主

學號:1035445079



Edited 2 time(s). Last edit at 11/24/2015 04:08PM by 1035445079.
(編輯記錄)

(1)作業網址:



Edited 1 time(s). Last edit at 11/24/2015 04:12PM by danbing.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445037
(2)
1有無遇到的問題: 放音樂跟圖片跟影音有另外找教學影片參考

2.製作感想:很有成就感
3.製作作業的時間:11小時

(1)網站主題:INFINITE
(2)製作動機:單純想介紹infinte
(3)製作內容:infinite的介紹.圖片

學號:1035445037

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

2.製作感想:終於做完 很開心
3.製作作業的時間:1天

(1)網站主題:王心凌
(2)製作動機:藝人資料多
(3)製作內容:王心凌介紹

完成品
(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445064
(2)
1有無遇到的問題:就是設計風格還要再想想,覺得我要的感覺沒有出來。
2.製作感想:在製作這網頁中我非常開心,因為可以把自己喜歡的東西製作成網頁與大家分享。
3.製作作業的時間:一整天下午

(1)網站主題: 電影主題介紹(陣頭)
(2)製作動機:想要呈現屬於自己的台灣風格
(3)製作內容: 關於陣頭的電影介紹和音樂
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
SQUAT
http://www.squatny.com/#otherprojects
設計簡單風格具有特色,讓人覺得很新奇。
◎相關網站列表與分析:
航海王網站
http://www.ttv.com.tw/drama/2005/cartoon/onepeace/01-story.htm
設計簡單明瞭,不佔整個網站比例。


學號:1035445064

完成品
作業網址 :http://mepopedia.com/~web104-2a/midterm/midterm-1035445169
1有無遇到的問題 :有
2.製作感想 :剛開始覺得很難,想到要做一整個網站就不想動。但,做了以後才越來越快速,也越來越記得設定怎麼用。
3.製作作業的時間 :5個小時

前置作業
(1)網站主題:瑞穗鄉的介紹
(2)製作動機:想把美麗的家鄉特色介紹給大家,讓大家對於瑞穗不再是只有牧場跟溫泉的印象。
(3)製作內容: 瑞穗的地理位置,文化與人文特色,美食與景點介紹
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://tinie0810.pixnet.net/blog/post/396871303-%E8%8A%B1%E8%93%AE%E3%80%82%E7%91%9E%E7%A9%97%E7%BE%8E%E9%A3%9F.%E6%99%AF%E9%BB%9E6%E9%80%A3%E7%99%BC~%E7%91%9E%E7%A9%97%E7%89%A7%E5%A0%B4-%E5%90%89%E8%92%B8%E7%89%A7
簡單的設計卻帶有著濃濃的自然氣息!

◎相關網站列表與分析:
各家美食的介紹: http://www.ipeen.com.tw/search/hualien/978/1-100-0-0/
各景點介紹: http://travel.network.com.tw/tourguide/twnmap/hualiencounty/ruisui.asp
維基百科,記載較為深入的資料: https://zh.wikipedia.org/zh-tw/%E7%91%9E%E7%A9%97%E9%84%89

學號:1035445169



Edited 1 time(s). Last edit at 11/24/2015 09:38PM by jian1110.
(編輯記錄)

完成品
(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445070
(2)
1有無遇到的問題:在"title_bar"上有些置入圖片但打開網頁卻沒顯示覺得奇怪。
2.製作感想:在製作網頁時邊聽著自己喜歡的歌邊做覺得很開心,然後做完覺得很有成就感,也蠻喜歡自己做的質感。
3.製作作業的時間:一整個晚上到凌晨

(1)網站主題: 謊言留聲機 Lie Gramophone
(2)製作動機: 懷念之前聽的電子音樂而為謊言留聲機做個專屬網頁
(3)製作內容: 關於謊言留聲機的團員、專輯以及音樂介紹
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
Daniel Kim 2015
http://canadankim.com/pop-danthology-2015/
設計簡單加上很多英文字的編排,還有各種配色,覺得很有質感。
◎相關網站列表與分析:
謊言留聲機on iNDIEVOX
https://www.indievox.com/liegramophone
設計簡單、編排整齊,就是一個音樂網站設計的基本介紹。


學號:1035445070 戰安榮



Edited 1 time(s). Last edit at 11/25/2015 12:57AM by 1035445070.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1035445076/index2-2.html
1有無遇到的問題: 畫面無法置中的問題
2.製作感想:製作完成感覺很好
3.製作作業的時間:一天

(1)網站主題:SNOOPY
(2)製作動機:最可愛又天真的史奴比想和大家介紹關他的故事
(3)製作內容: 有關於史奴比和她朋友的關係

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

1有無遇到的問題:剛開始想不到怎麼讓分頁同時連結在滑鼠轉換上
2.製作感想:雖然很複雜但是其實作完成很有成就感!
3.製作作業的時間:兩天

(1)網站主題:飢餓遊戲
(2)製作動機:很喜歡這本小說 ,也很喜歡這位電影女主角
(3)製作內容:飢餓遊戲
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.hypesphere.com/archives/65525
關於飢餓遊戲的個人影評專題網站
◎相關網站列表與分析:
http://luketsu.pixnet.net/blog/post/31186001-%E7%A0%B4%E7%B6%BB%E7%99%BE%E5%87%BA%E3%80%80%E3%80%8A%E9%A3%A2%E9%A4%93%E9%81%8A%E6%88%B2%E3%80%8B%E3%80%80%EF%BC%88the-hunger-games%EF%BC%89
這個的話也是個人影評的網站

學號:1035461022 劉倏民

完成品
(1)作業網址 :http://mepopedia.com/~web104-2a/midterm/midterm-1035445031
(2)
1有無遇到的問題 :太多問題,一下開不起來然後USB放錯地方,不然就是圖片莫名其妙消失
2.製作感想 :欲哭無淚,然後終於成功
3.製作作業的時間 :一個下午

前置作業
(1)網站主題:何以笙簫墨
(2)製作動機:很喜歡這部偶像劇,希望能推廣出去! 鍾漢良好帥!!!!!!!!!!!!!!
(3)製作內容: 因為鍾漢良好帥(?
(4)資料蒐集分析

◎設計優良網站(風格)列表與分析:
黑秀網
http://www.heyshow.com/index.asp
它是我參考的依據,而且蠻多設計作品可以給我們觀賞,比賽資訊要讓我想躍躍欲試。

◎相關網站列表與分析:
opus design - オプスデザイン
http://www.opus-design.jp/
很有特色的小網站,可以觀看到很多資訊

(1)作業網址 http://mepopedia.com/~web104-2a/midterm/midterm-1035445157
(2)
1有無遇到的問題 一開始最上面的圖片跑不出來,後來自己跳出來~
2.製作感想 做完很有成就感雖然做的沒很好
3.製作作業的時間 1天

(1)網站主題: 五月天
(2)製作動機: 五迷
(3)製作內容: 五月天
(4)資料蒐集分析 :各個網站



Edited 1 time(s). Last edit at 11/28/2015 03:14PM by 1035445157.
(編輯記錄)

1)作業網址: http://mepopedia.com/~web104-2a/midterm/midterm-1035461031/
(2)
1有無遇到的問題: 很難跟不上...
2.製作感想;可能一開始就沒跟上進度導致後面就越來越跟不上,不過有找人出一起做一起卡關一起解開也很感動啦1
3.製作作業的時間:好幾天慢慢做

(1)網站主題:移動迷宮
(2)製作動機: 喜歡動作片

(3)製作內容: 人物到劇情介紹


學號:1035461031

完成品
(1)作業網址 :http://mepopedia.com/~web104-2a/midterm/midterm-1025445227
(2) 有無遇到的問題 :有時候會漏掉聯結導致不能換到另個頁面
2.製作感想 :利用了休假一整天的時間補做,才發現我已經默默學到很多了
3.製作作業的時間 :一天

前置作業
(1)網站主題: BLACKNWHITE
(2)製作動機: 喜歡黑與白 簡約 搭配喜歡的樂團
(3)製作內容: 吸血鬼周末的簡單作品集
(4)資料蒐集分析

◎設計優良網站(風格)列表與分析:
cider/
http://austineastciders.com/cider/
網頁以圖片為主,大膽滿版排版加上少少的重點文字,蠻吸引我這種懶人的
◎相關網站列表與分析:
VAMPIRE WEEKEND
http://www.vampireweekend.com/
網頁風格很簡單 配色版面也都是我喜歡的
學號 1025445227

(1)作業網址:http://mepopedia.com/~web104-2a/midterm/midterm-1005445221
(2)
1有無遇到的問題 :做切片時卡在這步驟
2.製作感想 :做完很開心
3.製作作業的時間 :很長

(1)網站主題: Hebe
(2)製作動機: 喜歡Hebe
(3)製作內容: Hebe的介紹