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

Advanced

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

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

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



1. 一、製作說明:


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

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

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

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

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

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

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

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


3. 三、繳交作業方式


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

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

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

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

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



2.全部完成後上傳至FTP

3.依進度回覆本篇文章


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



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


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

寫法參考: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圖片資料夾裡



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/

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

完成品
(1) http://mepopedia.com/~css106-2c/midterm/midterm-1055445129
(2)
1不太會用a那著按鈕的地方,剛好沒拍到老師說可以只要單一轉換頁面的按鈕就好了,所以我整個網站全部按鈕都會有顏色了 confused smiley有些地方還是不太懂...
2.第一次完成整個網頁,希望之後可以越做越上手,雖然做的時間很久不過很開心看到完整的網頁
3.做很久...大概3天左右


前置作業
(1)網站主題:卡娜赫拉與他的小動物們

(2)製作動機:因為我超喜歡卡娜赫拉的作品,希望可以為她做一個中文化的網頁版本 介紹卡娜赫拉系列。

(3)製作內容:
首頁(index)>>簡單的介紹卡娜赫拉這個作者
關於(about)>>卡娜赫拉創作小動物的有哪些?
合作(works)>>放卡娜赫拉她與台灣合作廠商活動
圖片(picture)>>放卡娜赫拉的歷屆作品
連結(link)>>作者相關連結網址

(4)風格設定: 馬卡龍顏色的配色,甜美的風格,製作成少女心爆發的一個非常可愛的網站,希望能夠以我第二的作業去修改成完整的介紹頁面。

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
這個網站很粉色,配色我覺得很可愛
例:http://www.tagsis.com/
還有一些其他網址,基本上全部都是馬卡龍配色系的網站



Edited 2 time(s). Last edit at 11/28/2017 01:46PM by 1055445129.
(編輯記錄)

(1)網站主題: 史迪奇與利羅

(2)製作動機:想介紹這外星來可愛可愛的生物。

(3)製作內容:
首頁 index 概略介紹史迪奇從何而來
關於 about 史迪奇與他的歐哈娜(家人)們
故事 story 史迪奇的故事
圖片 picture 史迪奇系列作品
連結 link 相關網頁資料來源

(4)風格設定: 銀河系、星空系列的色彩。

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://zh.wikipedia.org/wiki/%E6%98%9F%E9%99%85%E5%AE%9D%E8%B4%9D
以上是關於史迪奇的相關資料

完成品(11/22/29前)
(1)作業網址 :http://mepopedia.com/~css106-2c/midterm/midterm-1055445075
(2)
1有無遇到的問題 : 有 遇到存完第二個頁面的檔案 ,要打開Google瀏覽器時 無法跟第一個頁面連在一起,最後自己有找到是按鈕的存檔連結,沒有打到html這四個英文字母。
2.製作感想 :第一次完成自己喜歡的主題網站,感覺很開心 ,希望以後的作業可以越做越順利。
3.製作作業的時間 :2~3天完成

前置作業(11/15)
(1)網站主題: 小小兵

(2)製作動機: 因為我很喜歡小小兵,想藉由這次的網頁設計的期中作業,來介紹可愛的小小兵

(3)製作內容:
劇情介紹(index)
角色介紹(people)
小小兵語大解密(language)
精彩預告片(movie)
精彩劇照(photo)

(4)風格設定: 利用小小兵的代表色,黃色系列去製作出可愛的卡通風格的網站

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://universalshowtimes.com/tw/minions/
http://www.nick-asia.com/shows/spongebob-squarepants/76ypv4
這些網站都類似用黃色系列的配色,這些配色我都還滿喜歡的



Edited 3 time(s). Last edit at 11/28/2017 10:12PM by 林宥柔.
(編輯記錄)

作業網址:http://mepopedia.com/~css106-2c/midterm/midterm-1055445205
(1)網站主題:怪醫黑傑克

(2)製作動機:我很喜歡作者給黑傑克塑造的形象 他常常行醫都是劫富濟貧 真的沒錢的可憐人 他都說寫借據 但最後也都沒要回來

(3)製作內容:
作者(index)>>介紹作者的生平
漫畫(about)>>怪醫黑傑克的漫畫圖片
動畫(works)>>怪醫黑傑克的動畫版跟劇場版
周邊商品(picture)>>介紹關於怪異黑傑克的周邊商品
紀念館(link)>>連結紀念館的官網

(4)風格設定: 用黑白紅三個怪醫黑傑克這個角色的顏色 做出簡約的風格。

(5)資料蒐集分析
http://www.city.takarazuka.hyogo.jp/tezuka/index.html



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

(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445206
(2)
1有無遇到的問題 有遇到存完檔案 ,要打開Google瀏覽器時頁面連在一起無法,最後自己有找到問題。
2.製作感想 完成自己喜歡的主題網站,做完還是很有成就感
3.製作作業的時間 2~3天

(1)網站主題:沉月之鑰
(2)製作動機:喜歡這本小說
(3)製作內容:
故事簡介(index)
人物介紹(character)
遊戲合作(game)
繪師介紹(artist)
關於作者(about)
(4)風格設定: 星空系列的色彩
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://suru8aup3.blogspot.tw/2017/05/blog-post.html



Edited 1 time(s). Last edit at 12/06/2017 07:27PM by 1055445206.
(編輯記錄)

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445192

1有無遇到的問題 :有一點
2.製作感想 :其實有點做上癮了 畢竟是自己的偶像
3.製作作業的時間 : 5-6hr
-----------------------------------------------------------------------------------------------------------------------------------------------------

(1)網站主題:頑童MJ116

(2)製作動機:欣賞他們的音樂風格跟生活態度

(3)製作內容:
團體介紹index介紹團體由來
團員介紹people介紹三位團員
歷年專輯three歷年專輯介紹
MV cd MV欣賞
照片 photo照片欣賞
(4)風格設定: 暗黑系

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.truecolor.mu/
以上是關於頑童的相關資料



Edited 1 time(s). Last edit at 12/06/2017 01:11AM by 邱翊淇.
(編輯記錄)

完成作業

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


(2)
1有無遇到的問題 還好
2.製作感想 做的過程中很困難 但做完還是很有成就感
3.製作作業的時間 7-8小時



1)網站主題: 玩具總動員

(2)製作動機: 很喜歡玩具總動員,想藉這次機會來做自己喜歡的迪士尼角色

(3)製作內容:
劇情介紹(index)
角色介紹(people)
電影歌曲配樂(music)
精彩預告片(movie)
精彩劇照(photo)

(4)風格設定: 利用玩具總動員的配色呈現主要以巴斯光年,胡迪..配色為主

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://toystory.disney.com/
http://pixar.wikia.com/wiki/Toy_Story



Edited 2 time(s). Last edit at 11/28/2017 04:02PM by stelas0309.
(編輯記錄)

1)網站主題: 玩具總動員

(2)製作動機: 很喜歡玩具總動員,想藉這次機會來做自己喜歡的迪士尼角色

(3)製作內容:
劇情介紹(index)
角色介紹(people)
電影歌曲配樂(music)
精彩預告片(movie)
精彩劇照(photo)

(4)風格設定: 利用玩具總動員的配色呈現主要以巴斯光年,胡迪..配色為主

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://toystory.disney.com/

(1)作業網址:http://mepopedia.com/~css106-2c/midterm/midterm-1035471056
(2)
1有無遇到的問題 :眼睛看的快瞎了
2.製作感想 :無
3.製作作業的時間 :很久很久很久

(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-2c/midterm/midterm-1035443128

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

作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445036

1.有無遇到的問題:有時候想把圖片用在自己想要的位置上卻不會用好痛苦 ,但是大致上問同學他們都會解決((我有神同學grinning smiley

2.製作感想 :這是一個要有極度耐心和興趣的人才能繼續下去XD

3.製作作業的時間 :2個晚上
前置作業--------------------------------------------------------------------
1)網站主題:LINE FRIENDS
(2)製作動機: 因為我很喜歡裡面熊大的角色,太可愛了所以想要介紹他們smoking smiley
(3)製作內容:
首頁(home)-->LINE FRIEND的line聊天室與貼圖
關於(about)-->LINE FRIEND的由來
朋友們(friends)-->介紹LINE FRIEND角色們!
商品 (product)-->LINE FRIEND周邊商品
插圖(illustration)--->一些LINE FRIEND的圖
(4)風格設定: 想用LINE的風格,畢竟是LINE FRIEND嘛smileys with beer
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.pkthink.com/portfolio.asp
這邊的網站是一個 製作網頁的公司,他們有網站的作品,我覺得可以看一下參考是不錯的



Edited 2 time(s). Last edit at 12/06/2017 10:44AM by 薯片再一包.
(編輯記錄)

完成品(11/22/29前)

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

1.有無遇到的問題

雖然上課得時候有點跟不上老師的速度,但回去之後看著老師的影片步驟跟著做,即使我的DW是英文版,邊靠著google翻譯成中文,還有老師的教學影片,一步一步地做,錯了就重用,對了就繼續,最後終於完成了smileys with beer

2.製作感想

老師我已經使出了我的洪荒之力在做這個網頁,如果有什麼地方沒有做好請您多多包涵,希望期末考的作業,我可以做得更完美!thumbs up

3.製作作業的時間

1~2天左右

前置作業(11/15)

(1)網站主題:Rilakkuma House (拉拉熊的家)

(2)製作動機:從小就對拉拉熊情有獨鍾,想要自己製作做一個專屬拉拉熊的網頁,讓更多人深入了解拉拉熊的世界

(3)製作內容:介紹拉拉熊的故事與他身邊的角色

A.拉拉熊的由來故事(檔名:index)
B.角色介紹(檔名:Character)
C.周邊產品(檔名:product)
D.動畫影片(檔名:video)
E.主庭餐廳介紹(檔名:restaurant)

(4)風格設定: 簡約質感風又帶些可愛

(5)資料蒐集分析

拉拉熊小物的資料 http://www.sanm-in.com/

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

編排設計很棒,整體風格讓人看起來舒服不雜亂
http://www.taiwanbear.org.tw/front

配色舒服,清晰明瞭
http://www.taipeifestival.org/index.aspx



Edited 2 time(s). Last edit at 11/30/2017 12:21AM by 大漢堡王.
(編輯記錄)

(1)網站主題: 米奇米妮
(2)製作動機: 因為覺得米奇米妮很可愛
(3)製作內容:
A.米奇米妮介紹(檔名:index)
B.米妮故事(檔名:mine)
C.米奇故事 (檔名:mickey)
D.周邊商品(檔名:product)
E.動畫影片(檔名:video)


(每個導覽列的中文及(英文檔名))
(4)風格設定: 個性又有質感
(5)資料蒐集分析
http://www.disney.com.tw/fc/page.php?no=1&sno=1
◎設計優良網站(風格)列表與分析
頁面清楚有條理

完成品(11/22/29前)
請將這項放置於文章最前面
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445087
(2)
1有無遇到的問題
2.製作感想 :雖然製作過程很漫長,但是做出來真的非常有成就感,雖然做的不是很完美,希望期末可以做更好的網頁
3.製作作業的時間 :兩三天
(1)網站主題: 米奇米妮
(2)製作動機: 因為覺得米奇米妮很可愛
(3)製作內容:
A.米奇米妮介紹(檔名:index)
B.米妮故事(檔名:mine)
C.米奇故事 (檔名:mickey)
D.周邊商品(檔名:)
E.動畫影片(檔名:video)


(每個導覽列的中文及(英文檔名))
(4)風格設定: 個性又有質感
(5)資料蒐集分析
http://www.disney.com.tw/fc/page.php?no=1&sno=1
◎設計優良網站(風格)列表與分析
頁面清楚有條理

完成品
(1)作業網址:http://mepopedia.com/~css106-2c/midterm/midterm-1055445021

1有無遇到的問題 :一直把語法搞混...哈哈
2.製作感想 :製作完真的很有成就感,雖然做的很糟糕...
3.製作作業的時間 :半天吧

-------------------------
(1)網站主題:
傻嚕 / Salu

(2)製作動機:
她的畫風很可愛又療癒,想把她的作品做成網頁當作蒐藏

(3)製作內容:
1 首頁 ( 檔名 index ) → 簡單介紹傻嚕 並放上一張圖
2 關於傻嚕 ( 檔名 about ) → 介紹傻嚕的生平
3 插畫作品 ( 檔名 illustrator ) → 放她一些從2012到現在的作品進化
4 合夥 ( 檔名 coterie ) → 她與咖啡廳合作的介紹 以及連結
5 相關連結 ( 檔名 link ) → 有關她的網站連結

(4)風格設定:
想要以簡單可愛,配色用粉橘粉紅色 做出

(5)資料蒐集分析
1. https://pick.mydesy.com/archives/category/graphic-design/profile
屬於簡單留白 配色上色調是黑白灰
2. http://www.morinaga.co.jp/entertainment/index.html
森永的網站 很可愛逗趣 也不會太過複雜
兩種我都很喜歡



Edited 4 time(s). Last edit at 11/29/2017 06:09AM by exe99703.
(編輯記錄)

http://mepopedia.com/~css106-2c/midterm/midterm-1055445150
1有無遇到的問題 :
到做完的在課堂檢討時才發現圖片全遺失,問同學才發現自己圖片忘記改英文名稱
2.製作感想 :
剛學網頁設計時看到學長姐以前的作品,就覺得如果我上完這學期也能做到這樣的程度是多麼的好,可是當實際自己做時發現真的不是件簡單的事,要摸索很久,忘記打什麼全部都可能要重來,但看到成品還是很滿意,尤其老師的講義幫助甚多~
3.製作作業的時間
2~3天

(1)網站主題: 死而復甦的歌手~Aimer
(2)製作動機: 他是我最喜歡的女歌手,每首歌都很值得推薦給大家
(3)製作內容:
歌手簡介:介紹歌手的生事
歷年歌曲:整理歷年發行的單曲或專輯
歌曲心境:介紹自己聽歌的心得
歌曲推薦:喜歡的歌曲推薦與歌詞
歌曲欣賞:歌曲試聽

(4)風格設定: 用黑紫色系來做,以符合歌手的風格
(5)資料蒐集分析:https://zh.wikipedia.org/wiki/Aimer
◎設計優良網站(風格)列表與分析: http://www.aimer-web.jp/
aimer的日本官網就做得很有質感了



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

作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445102

1有無遇到的問題 不知道怎麼把照片至中 忘記影片怎麼至中
2.製作感想 教人交到我要死了也不知道我做了甚麼看起來爛透了
3.製作作業的時間 我忘了教人交到我要死根本不記得

(1)網站主題:Lady Gaga
(2)製作動機: 因為我超級喜歡Lady Gaga也因為她的歌讓我更有自信
(3)製作內容:
首頁 index 簡單介紹Lady Gaga這位歌手
故事 story 介紹Lady Gaga的背景故事
得獎紀錄 Awards 介紹Lady Gaga的得獎紀錄
專輯 Album 介紹Lady Gaga的專輯
經典歌曲推薦 songs 推薦Lady Gaga經典歌曲
(4)風格設定: 清新簡單的風格
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://pick.mydesy.com/archives/83981



Edited 1 time(s). Last edit at 11/27/2017 06:49PM by 1055445102.
(編輯記錄)

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445060
(2)
1有無遇到的問題 :還好
2.製作感想 :DW瘋狂在我準備存檔時停止運作...我好畏懼...
3.製作作業的時間 9小時......................................................................................吧



(1)網站主題: skrillex

(2)製作動機:我很喜歡的一個DJ
(3)製作內容:
歌手介紹(index):介紹歌手
知名歌曲(famous):整理出比較有名的歌曲
得獎歌曲(Awards): 有得過獎項的歌曲
歌曲推薦(recommend):個人比較喜歡的歌
DJ照片(photo):他生活照

(4)風格設定: 用白紅色系來做,以符合歌手的風格
(5)資料蒐集分析:http://www.rikuba.jp/
簡約紅白色塊很棒的



Edited 3 time(s). Last edit at 11/27/2017 10:01PM by 湯劭崴.
(編輯記錄)

http://mepopedia.com/~css106-2c/midterm/midterm-1055445168

1.有無遇到的問題 : 連接按鈕的地方做錯,繞圖排文有點難!


2.製作感想 : 覺得有點難,好險有老師放的影片可以看,還有同學教我,看到眼睛很酸,但完成後還蠻開心的!

3.製作作業的時間 : 2天吧(或更久吧)

____________________________________________________________________
(1)網站主題:宮崎駿
(2)製作動機:從以前就很喜歡看宮崎駿的動畫
(3)製作內容:生平介紹(index)
吉卜力工作室(studio)
合作夥伴們(partner)
作品介紹(works)
三鷹之森(Art Museum)
(4)風格設定: 簡單可愛風,用明亮色做出
(5)資料蒐集分析
https://zh.wikipedia.org/zh-tw/%E5%AE%AB%E5%B4%8E%E9%AA%8F
◎設計優良網站(風格)列表與分析:
http://www.ghibli-museum.jp/



Edited 1 time(s). Last edit at 12/04/2017 08:15PM by 1055445168.
(編輯記錄)

完成品
(1)作業網址:http://mepopedia.com/~css106-2c/midterm/midterm-1055440122
(2)
1.有無遇到的問題:在製作前兩頁的時候,會因為忘記加分號,而導致正確語法跑不出來,
         所以反反覆覆做了好幾次,但也藉此機會讓自己更熟悉語法!!
         還有,在瀏覽器方面也發現,IE跟google瀏覽器能看到的東西不同
         一開始用IE瀏覽器看跑不出來的東西,在google就能看得到....

2.製作感想:覺得網頁設計其實還蠻有趣的,
      尤其是做自己喜歡的東西更是加倍喜歡網頁設計呀,會想鑽研清楚然後做出來!
      食記部分也是自己寫出來的,但是有時候會腦袋空空難產。

3.製作作業的時間:約3~4天!斷斷續續得做,有靈感的時候就做。

---------------------------------
前置作業
(1)網站主題: 千芝の美食之旅
(2)製作動機: 愛吃美食女孩的吃貨人生
(3)製作內容:
首頁、摘要(index)>>作者自我介紹、簡單摘要
美食介紹(about1)>>美食的圖片&心得
美食介紹(about2)>>美食的圖片&心得
美食介紹(about3)>>美食的圖片&心得
相關連結(link)>>食記專訪影片、店家推薦
(4)風格設定:簡單明亮
(5)資料蒐集分析:
◎設計優良網站(風格)列表與分析:
http://www.teashop168.com.tw/menu/
http://sai083.pixnet.net/blog/post/344406325
https://mimihan.tw/category/taiwan-travel/hsinchu/
這些網站都算是簡單的風格、類似部落格,個人偏好簡單風格。



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

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445183
(2)
1有無遇到的問題 :歌曲推薦的頁面在GOOGLE瀏覽時會比其他頁面小,IE瀏覽時則正常,太神奇了吧...
2.製作感想 :我很畏懼...
3.製作作業的時間 ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞ ∞

前置作業
(1)網站主題: mili
(2)製作動機: 喜歡mili的歌
(3)製作內容:
首頁index:介紹mili這個團體
歷年專輯Album:介紹歷年專輯
歌曲推薦recommend:推薦有趣的歌曲
專輯美術圖Art picture:專輯的美術圖
歌曲試聽Listen:歌曲試聽
(4)風格設定: 簡約清新
(5)資料蒐集分析:
◎設計優良網站(風格)列表與分析: http://projectmili.com/#magmilktop
用色簡單又不失質感



Edited 1 time(s). Last edit at 11/27/2017 04:23PM by nine999999999.
(編輯記錄)

完成品
(1)作業網址: http://mepopedia.com/~css106-2c/midterm/midterm-1055445054
(2)
1有無遇到的問題 想說第二網頁的介紹用至中的方式來排,沒想到一動又動到了index......
2.製作感想 可以邊找影片邊看還不錯XDDD
3.製作作業的時間 4天

(1)網站主題:
Fischer's (日本youtobe團體)

(2)製作動機:
因為看youtobe認識他們覺得他們影片很生動有趣,所以想幫他們建立網站 smiling bouncing smiley

(3)製作內容:
1.Fischer's首頁(index)說明他們在做甚麼介紹為什麼組團走youtobe的路
2.魚團成員(member)介紹魚團的人員
3.運動競技(movement)他們玩過的競技設施
4.歌曲(song)這團自己做的音樂
5影片連結(link)魚團的一些有趣影片

(4)風格設定: 想做出跟他們logo一樣的配色,背景是有點水藍色
(5)資料蒐集分析
1.http://www.tw-topwaygroup.com/html/main 仲威文創網站是青綠色風格
2.http://www.fubiz.net/category/design/ fubiz的網站也很棒,畫面很有設計感



Edited 1 time(s). Last edit at 11/29/2017 12:28PM by gigiteng.
(編輯記錄)

完成品
(1) http://mepopedia.com/~css106-2c/midterm/midterm-1055445186
(2)
1.遇到的問題:有時候要做第二第三頁的時候沒有設定好他的連結,就會亂跑或是根本沒有變到第二頁的內容,所以要做新的一夜的時候都會再三檢查
2:製作的感想:一剛開始真的做到很崩潰,但是知道問題的時候會越來越有成就感,做完成品會很開心
3:製作的時間:加上崩潰的哀號時間大概有2天


前置作業
(1)網站主題:多拉a夢

(2)製作動機:因為喜歡作品哆啦a夢,想要介紹他的歷史作品

(3)製作內容:
故事大綱(index)>>簡單的介紹她的故事
經典道具(classicprops)>>介紹他最常出現的道具
動畫歷史(animationhistory)>>介紹他的歷史動畫片尾曲以及他的經典動畫故事
漫畫歷史(comichistoyr)>>介紹他的漫畫歷史
動畫歷史(moviehistory)>>介紹他的動畫片尾曲

(4)風格設定: 藍色簡約風格
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://chinesedora.com/character/doraemon.htm



Edited 2 time(s). Last edit at 12/06/2017 11:15AM by 施婉晴.
(編輯記錄)

完成品(11/22/29前)
(1)作業網址 :http://mepopedia.com/~css106-2c/midterm/midterm-1055445177
(2)
1有無遇到的問題 :按鈕連接不起來
2.製作感想 :真的覺得一步錯了就要趕快找出來,不然後面真的是只能重作
3.製作作業的時間 :2天

前置作業(11/15)
(1)網站主題:角落生物
(2)製作動機:覺得畫風很可愛
(3)製作內容:
作者(檔名Author)
由來(檔名origin)
成員(檔名member)
繪本(檔名Picture book)
周邊(檔名Surrounding)
(4)風格設定: 想要以淡淡的粉色調,呈現可愛的感覺
(5)資料蒐集分析 :https://www.niusnews.com/=P1avnml0
◎設計優良網站(風格)列表與分析:https://home.gamer.com.tw/creationDetail.php?sn=3232523



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

(1)作業網址 :http://mepopedia.com/~css106-2c/midterm/midterm-1055445003
(2)
1有無遇到的問題 : 不太會做
2.製作感想 :製作時間長,摸索很久
3.製作作業的時間 半天


(1)網站主題: one ok rock
(2)製作動機: 喜歡這個樂團
(3)製作內容:
團員介紹(Member)
團體故事(Story)
歷年專輯(album)

(每個導覽列的中文及(英文檔名))
(4)風格設定: 暗黑搖滾風
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:

https://www.facebook.com/ONEOKROCK/



Edited 2 time(s). Last edit at 11/22/2017 03:59AM by i19980730.
(編輯記錄)

完成品
(1)作業網址:http://mepopedia.com/~css106-2c/midterm/midterm-1055445024

(2)
1有無遇到的問題 : 無
2.製作感想:慢慢做就會越來越上手
3.製作作業的時間:6小時


(1)網站主題: 蘇打綠

(2)製作動機:是我最喜歡的樂團

(3)製作內容:
A.關於蘇打綠(檔名:index)
B.成員(檔名:Character)
C.經歷(檔名:product)
D.作品(檔名:video)
E.獲獎紀錄(檔名:restaurant)

(4)風格設定: 清新風格

(5)資料蒐集分析
蘇打綠資料來源:
https://www.facebook.com/sodagreen.band/
https://zh.wikipedia.org/wiki/%E8%98%87%E6%89%93%E7%B6%A0

◎設計優良網站(風格)列表與分析:
1. https://www.simpleinfo.cc/
簡單明瞭、有設計感

2.https://www.apple.com/tw/iphone/
簡約、有質感



Edited 1 time(s). Last edit at 11/29/2017 03:22PM by zhuuu.
(編輯記錄)

完成品
(1)作業網址:http://mepopedia.com/~css106-2c/midterm/midterm-1055445144

(2)
1有無遇到的問題 : 無
2.製作感想:很複雜超困難,一做錯幾乎要重頭,因為我不知道錯在哪?
感謝有好心同學們協助才能完成作業
3.製作作業的時間:6小時
前置作業(11/15)
(1)網站主題: 致我們單純的小美好

(2)製作動機: 因為江辰很帥劇情也很好看
(3)製作內容:
劇情介紹(index)
角色介紹(people)
作者介紹(author)
精彩預告片(movie)
精彩劇照(photo)

(4)風格設定: 浪漫青春的感覺

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://lujustar.com/alovesobeautiful-intro/
頁面簡單明了



Edited 1 time(s). Last edit at 12/05/2017 09:57PM by 1055445144.
(編輯記錄)

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445096

1有無遇到的問題 :還是有些地方會搞不清楚還是要慢慢摸索
2.製作感想 :我覺得慢慢學會做以後的滿有成就感的
3.製作作業的時間 : 12小時
-----------------------------------------------------------------------------------------------------------------------------------------------------
(1)網站主題:adidas

(2)製作動機:我真的非常喜歡鞋子平常也有在研究

(3)製作內容:
愛迪達鞋子介紹(index)-講說歷年來出的好鞋
Y-3 PureBOOST(Untitled-2)-近來出的神鞋款式
ZX8000 Boost(Untitled-3)-2017新出的款式好鞋
Boost 350 V2 Zebra(Untitled-4)-介紹貴慘慘又好看的鞋子
UltraBOOST(Untitled-5)-最新能運動又好看的鞋子
YeezyBoost 650V1(Untitled-6)-介紹這雙讓人夢寐以求的鞋子

(4)風格設定: 用暗黑戲來呈現

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.cool-style.com.tw/wd/?s=Y3
介紹了很多關於我想介紹的鞋子



Edited 1 time(s). Last edit at 11/29/2017 07:54PM by 吳晉瑋.
(編輯記錄)

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445156

1有無遇到的問題 :有一些小細節,常常因為小細節出現毛病
2.製作感想 :我覺得經過一些網頁上的問題與老師的教學讓我變得越喜歡網頁設計
3.製作作業的時間 : 8小時
-----------------------------------------------------------------------------------------------------------------------------------------------------

(1)網站主題:解憂雜貨店

(2)製作動機:因為我很喜歡這部電影,希望能為他們做更好更有操作性的網站並且探索更多精華

(3)製作內容:
首頁 index-介紹解憂雜貨店
關於 about- 劇中角色
故事劇情 story -介紹劇情
錄影帶videos-解憂雜貨店預告片
劇照-解憂雜貨店各種劇照

(4)風格設定: 暖色系色調

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://namiya-movie.jp/
這網站介紹了非常詳細介紹



Edited 4 time(s). Last edit at 11/27/2017 11:06PM by 高慎妤.
(編輯記錄)

(1)網站主題:我的狐仙老婆

(2)製作動機:因為我很嚮往當演員,所以希望能為這部陸劇介紹更多詳細內容

(3)製作內容:
故事背景(index)-講說整部陸劇的背景故事
角色介紹(people)-我的狐仙老婆演員列表
劇情大綱(story)-介紹整部陸劇的劇情含意
劇照(picture)-放我的狐仙老婆的劇照
連結(link)-放各個關於這部陸劇的連結

(4)風格設定: 用寒色系呈現這網站

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://maplestage.com/show/%E6%88%91%E7%9A%84%E7%8B%90%E4%BB%99%E8%80%81%E5%A9%86

完成品
(1) http://mepopedia.com/~css106-2c/midterm/midterm-1055445078
(2)
1有些地方還是不太懂...
2.第一次完成整個網頁,希望之後可以越做越上手
3.5小時


前置作業

(1)網站主題: 星際寶貝

(2)製作動機:想介紹史迪奇可愛的事蹟。

(3)製作內容:
首頁 index 概略介紹史迪奇
關於 about 史迪奇與他的歐哈娜(家人)們 內容主角
故事 story 史迪奇的故事
圖片 picture 史迪奇
連結 link 相關網頁資料來源

(4)風格設定: 星空系渲染系列的色彩。

(5)資料蒐集分析
https://zh.wikipedia.org/wiki/%E6%98%9F%E9%99%85%E5%AE%9D%E8%B4%9D



Edited 4 time(s). Last edit at 11/29/2017 03:23PM by 林笠瑄1055445078.
(編輯記錄)

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445105

1有無遇到的問題 :還是會有混亂的地方
2.製作感想 :其實最完後蠻有成就感
3.製作作業的時間 : 超久
-----------------------------------------------------------------------------------------------------------------------------------------------------



(1)網站主題: 小熊維尼

(2)製作動機:想介紹小熊維尼的故事。

(3)製作內容:
首頁 index 概略介紹維尼
關於 about 維尼與他的朋友們 內容主角
故事 story 維尼的故事
圖片 picture 維尼與朋友們
連結 link 相關網頁資料來源

(4)風格設定: 黃色 橘色為主。

(5)資料蒐集分析
http://www.disney.com.tw/fc/page.php?no=2&sno=1
https://zh.wikipedia.org/wiki/%E5%B0%8F%E7%86%8A%E7%B6%AD%E5%B0%BC



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

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445057

1有無遇到的問題 :還是有點困難
2.製作感想 :其實做久了蠻好玩
3.製作作業的時間 : 超久
-----------------------------------------------------------------------------------------------------------------------------------------------------
(1)網站主題: 海底總動員

(2)製作動機:想介紹尼莫的故事。

(3)製作內容:
首頁 index 概略介紹尼莫
關於 about 尼莫與他的朋友們 內容主角
故事 story 尼莫的故事
圖片 picture 尼莫與朋友們
連結 link 相關網頁資料來源

(4)風格設定: 藍色為主。

(5)資料蒐集分析
http://www.disney.com.tw/fc/page.php?no=3&sno=1



Edited 1 time(s). Last edit at 12/04/2017 09:47PM by kfbvd.
(編輯記錄)

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445030

1有無遇到的問題 :難
2.製作感想 :其實做完有成就感
3.製作作業的時間 : 超久

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445141

1有無遇到的問題 :沒有
2.製作感想 :學會一技之長
3.製作作業的時間 : 超快
-----------------------------------------------------------------------------------------------------------------------------------------------------



(1)網站主題: 小美人魚

(2)製作動機:想介紹小美人魚淒美的愛情故事。

(3)製作內容:
首頁 index 介紹小美人魚
關於 about 小美人魚與他的家人朋友們的內容主角
故事 story 小美人魚的故事
圖片 picture 小美人魚
連結 link 相關網頁資料來源

(4)風格設定: 海底夢幻的色彩。

(5)資料蒐集分析
https://zh.wikipedia.org/wiki/%E6%98%9F%E9%99%85%E5%AE%9D%E8%B4%9D



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

(1)作業網址 :http://mepopedia.com/~css106-2c/midterm/midterm-1055445003
(2)
1有無遇到的問題 : 不太會做
2.製作感想 :製作時間長,摸索很久
3.製作作業的時間 半天

弄錯



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

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

(2) 主題 / 風格設定(色彩設定部份):對應黃色的極簡黑

(3) 有無遇到的問題 :無

(4) 製作感想: 原來製作一個網頁是這麼的費心,也讓我了解到每一個網頁背後的努力

(5) 製作作業的時間 :1~2小時完成
-------------------------------------------------------------------------------------------------------------------------------------------------
(1)網站主題:福特野馬

(2)製作動機:想讓大家更認識福特野馬這輛車

(3)製作內容:
首頁 index 概略介紹福特野馬的特色
外型介紹 福特野馬的外型簡介
內裝介紹 粗略介紹福特野馬的內部配備
動力介紹 福特野馬引擎
同系車款 福特野馬相關系列車款
(4)風格設定: 黑暗系列

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://pick.mydesy.com/archives/83981



Edited 6 time(s). Last edit at 11/30/2017 01:28AM by 堯詩洪.
(編輯記錄)

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445045

1有無遇到的問題 :還是會有混亂的地方
2.製作感想 :其實最完後蠻有成就感
3.製作作業的時間 : 超久


(1)網站主題:你的名字。

(2)製作動機:看完這部動畫之後,真的覺得很好看。

(3)製作內容:
劇情介紹(index)
角色介紹(people)
合作夥伴們(partner)
作者手稿(manuscript)
電影歌曲配樂(music)

(4)風格設定: 星空系渲染系列的色彩。

(5)資料蒐集分析
http://starrynightmovie.pixnet.net/blog/category/81082



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

完成品
(1)作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445111

1有無遇到的問題 :cc版不一樣而且版本是英文的看不懂qqqq
卡在東西沒辦法隨心所欲想排哪裡就排哪裡 按鈕的部分也卡很久
我的電腦好像沒有正黑體qqq所以也沒辦法調文字qq
還有一堆問題我覺得難過qq

2.製作感想 :
雖然是一個小小的成果但是自己不夠認真在加上路途多災多難,所以有些地方沒有做好覺得可惜qq
不過幸運的是因為看了別人的作品之後可以把他們好的地方吸收進去應用在自己的網站上面我覺得這是我得到的成果。
在給我一點時間我覺得我會把這個網站弄的很好><

3.製作作業的時間 : 有超過24小時吧.....希望可以給我無限的時間阿阿阿qq


(2)製作動機:
因為很喜歡這個遊戲,所以想做他的網站
(3)製作內容:
故事介紹(STORY)
遊戲世界觀(WORLD)
人物介紹(CHARACTER)
遊戲方法(SYSTEM)
影片&官圖(SPECIAL)

(4)風格設定: 以遊戲美術圖為主要顏色
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.mstoria.tw



Edited 2 time(s). Last edit at 12/06/2017 11:42PM by 1055445111.
(編輯記錄)

(1)
http://mepopedia.com/~css106-2c/midterm/midterm-1055445033
多加上次作別個風格網址 在展覽裡的展覽官網(彌補缺少一個網頁,老師說過)12/11更改
(2)
製作問題:
繞圖有點困難

(1)網站主題: 嚕嚕米一家族
(2)製作動機: 喜愛的玩偶

(3)製作內容:
首頁(index)
角色(Character)
動畫(Animation)
展覽(link)


(4)風格設定: 利用嚕嚕米的配色來製作主題
(5)資料蒐集分析
這個網站很藍色色調,配色很好看
例:http://lulumi.ludao.tw/



Edited 2 time(s). Last edit at 12/11/2017 01:48AM by 1055445033.
(編輯記錄)

作業網址:http://mepopedia.com/~css106-2c/midterm/midterm-1035445036

(1)網站主題:益犬難求(導盲犬介紹)

(2)製作動機:台灣導盲犬數量供不應求,全台有6萬位盲人、視覺障礙者,正式協助視覺障礙者的導盲犬卻只有40隻,想藉由網頁設計製作推廣導盲犬,使台灣導盲犬的數量可以增加。

(3)製作內容:主題益(一)犬難求,導盲犬的相關介紹與推廣。
(每個導覽列的中文及(英文檔名))

關於我們>>about
認識導盲犬>>know
導盲犬訓練>>training
推動現況>>promote
相關法規>>legislation

(4)風格設定:溫暖、溫和的米色、咖啡色系。

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:導盲犬協會http://www.guidedog.org.tw/index.html 溫和乾淨的風格

1有無遇到的問題:一大堆,但覺得是個人的問題,目前還可自行研究。

2.製作感想:難爆了,而且明知道自己作的很矬還要交真是一件痛苦的事情,安排時間也很難。

3.製作作業的時間:很久很久很久 很久很久 很久很久 很久很久 很久 很久 很久 而且還未完成



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

完成品(11/22/29前)
請將這項放置於文章最前面
(1)作業網址 :http://mepopedia.com/~css106-2c/midterm/midterm-1055443122
(2)
1有無遇到的問題 :無
2.製作感想 :蠻難的
3.製作作業的時間 :很久

http://mepopedia.com/~css106-2c/midterm/midterm-1055445207


1有無遇到的問題 沒有
2.製作感想 很難
3.製作作業的時間 大概一個禮拜

完成品
(1)作業網址:http://mepopedia.com/~css106-2c/midterm/midterm-1055445063
(2) 1.有無遇到的問題:無
2.製作感想:要製作一個完整的網頁真的需要花很多心力
3.製作作業的時間:2天

前置作業
(1)網站主題: 小小兵
(2)製作動機:非常喜歡小小兵,是小小兵迷
(3)製作內容:
小兵身世(index)
小兵語錄(02)
小兵成員(03)
歡樂合照(04)
有趣短片(05)

(4)風格設定:以黃白色為主,帶出小小兵的感覺

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://universalshowtimes.com/tw/minions/
簡單的白色調,整體整齊又可愛

(1)作業網址http://mepopedia.com/~css106-2c/midterm/midterm-1055445003
1有無遇到的問題 有 因為活動期中沒有聽到課 所以都看老師的影片還有同學教我 謝謝身邊大德
2.製作感想 覺得天啊這團體也出太多專輯了吧!
3.製作作業的時間 大概半天

發現打開來東西沒辦法轉換 但是檔案沒錯 不知道是不是哪裡出錯了

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

(2)
1有無遇到的問題 : 無
2.製作感想:慢慢做就會越來越上手
3.製作作業的時間:6小時

完成品
(1) http://mepopedia.com/~css106-2c/midterm/midterm-1055445120
(2)
1不太會用下方的選單列,,所以使用軟體上還是有些死板 希望下次能改進這個問題
2.第一次自己獨立完成整個網頁,希望之後可以越做越好,很開心看到自己做出完整的網頁
3.做很久...大概2天左右


前置作業
(1)網站主題:貓的小知識

(2)製作動機:因為我超喜歡貓咪,希望可以為貓咪們做網頁介紹 讓大家更了解貓咪。

(3)製作內容:
貓咪的品種(index)>>簡單的介紹貓咪的類別(種類)
小貓飼養方法(feed)>>如呵照顧 飼養小貓
養貓的基本支出(basic)>>養貓所需的花費統計
認養(adopt)>>認養須知
送養(Delivery)>>相關連結網址

(4)風格設定: 蛋黃色的配色,柔軟的風格,製作成一個非常可愛的貓咪介紹網站。

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
例:http://www.cc.chu.edu.tw/~c8903042/page/6.htm
還有一些其他網址.



Edited 2 time(s). Last edit at 11/30/2017 09:40PM by 1055445120 倪子猷.

作业网址 http://mepopedia.com/~css106-2c/midterm/midterm-1055443120
问题 还是在IE打开无法显示图片的问题
时间 2小时到2.5小时之间
感想 经过作业3后感觉作业容易许多 只是时间问题
感觉难度还是有的



Edited 1 time(s). Last edit at 12/05/2017 11:03PM by 1055443120.
(編輯記錄)

作業網址 http://mepopedia.com/~css106-2c/midterm/midterm-1055445036

1.有無遇到的問題:有時候想把圖片用在自己想要的位置上卻不會用好痛苦 ,但是大致上問同學他們都會解決((我有神同學grinning smiley

2.製作感想 :這是一個要有極度耐心和興趣的人才能繼續下去XD

3.製作作業的時間 :2個晚上

這個作業的網址則為:http://mepopedia.com/~css106-2c/midterm/midterm-1055443135

(1)網站主題: 五月天
(2)製作動機: 我姐喜欢,了解一下
(3)製作內容:
1 早年经历
2 演艺经历
3 主要作品 (热门歌曲音乐作品 参演电影)
4 社会活动(演唱会记录)
5 人物评价
(每個導覽列的中文及(英文檔名))
(4)風格設定: 深色,其实风格不太明显,因为我想做摇滚做不出来,太难了硬生生做的,因为PS我也用不清楚。。。对于电子的东西我只能慢慢来。。
(5)資料蒐集分析

完成品
(1) http://mepopedia.com/~css106-2c/midterm/midterm-1055445117
(2)
1還是有地方有困難
2.有成就感
3.4小時


前置作業
(1)網站主題:快樂樹朋友

(2)製作動機:想介紹快樂樹這個動畫

(3)製作內容:
首頁(index)>>簡單的介紹這動畫這個
關於(about)>>介紹動畫角色
合作(works)>>放作品
圖片(picture)>>放快樂樹的圖片
連結(link)>>作者相關連結網址

(4)風格設定: 可愛動畫風

(5)資料蒐集分析
https://zh.wikipedia.org/wiki/%E9%96%8B%E5%BF%83%E6%A8%B9%E6%9C%8B%E5%8F%8B

這個作業的網址則為:http://mepopedia.com/~css106-2c/midterm/midterm-1055445042
(1)網站主題: 刺客教條
(2)製作動機: 想讓人知道這系列的故事
(3)製作內容:
index
story
character
picture
notice
(4)風格設定: 黑暗風格
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://www.ubisoft.com.tw/ 大概就是如此
有無問題 :目前沒有問題
感想 : 做很久
時間 : 3小時

(1)作業網址:http://mepopedia.com/~css106-2c/midterm/midterm-1055443126
(2)網站主題:一款叫做王者荣耀的手游
(3)1有無遇到的問題 :眼睛看的快瞎了
2.製作作業的時間 :好久好久

(1)作業網址: http://mepopedia.com/~css106-2c/midterm/midterm-1055445159
(2)
1.有無遇到的問題:無
2.製作感想:將整個網頁建構出來,很有成就感。
3.製作作業的時間 :2小時半


(1)網站主題:Troye Sivan介紹網頁
(2)製作動機:介紹歌手
(3)製作內容:
最新消息 - NEWS
個人生活 - LIFE
表演作品 - ACTING
音樂作品 - MUSIC
得獎提名 - AWARDS
(4)風格設定:簡約淡雅憂鬱風
(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://troyesivan.com/

完成品
(1) http://mepopedia.com/~css106-2c/midterm/midterm-1045445241
(2)
1.會一點點
2.做完後很開心
3.一天


前置作業
(1)網站主題:國立海洋生物博物館

(2)製作動機:家裡有養魚

(3)製作內容:
首頁(index)>>介紹海洋館
關於(about)>>海洋生物
合作(works)>>相關報導
圖片(picture)>>館區地圖
連結(link)>>博物館影片

(4)風格設定: 海洋的感覺藍色

(5)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.nmmba.gov.tw