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

Advanced

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

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

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



1. 一、製作說明:


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

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

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上的資料夾為:midtern

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

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

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



2.全部完成後上傳至FTP

3.依進度回覆本篇文章


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



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


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


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製作,彈性較小,會比較難修改。



6. 參考範例



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/

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



Edited 2 time(s). Last edit at 11/12/2014 10:44AM by JinJin.
(編輯記錄)

Attachments:
開啟 | 下載 - midterm.rar (1.09 MB)
(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445192
1有無遇到的問題 :不知道是不是網頁問題還是... 上傳後我檔案開起來少了一張圖片 但是在家開起來有圖片的
2.製作感想 :終於完成了一個完整的網頁 頗有成就
3.製作作業的時間 1天多

前置作業
(1)網站主題: 一零八抹茶茶廊
(2)製作動機: 因為好吃所以想推薦
(3)製作內容: (1)最新商品(2)店家簡介(3)商品介紹(4)情報(5)聯絡我們
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://www.wix.com/ 配色簡單 視覺上舒服
◎相關網站列表與分析:
-> http://www.k-chaya.co.jp/index.html
-> http://www.cha-no-wa.jp/
二個網站都是以抹茶綠色為主色 配色也很乾淨簡單

1025445192 黃婷萱



Edited 2 time(s). Last edit at 11/17/2014 05:42PM by 黃婷萱.
(編輯記錄)

前置作業
(1)網站主題 : 永真急制-聶永真介紹
(2)製作動機 : 很愛這位設計師
(3)製作內容 : 1聶永真介紹 2專輯封面作品 3書籍封面作品 4海報設計作品
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析 : http://30000fps.com/ 配色排版簡約大膽看了舒服
◎相關網站列表與分析 : https://www.flickr.com/photos/riddleture/ 一樣簡約的排版和配色

完成品

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445036

1有無遇到的問題 : 顏色搭配有點久
2.製作感想 : 很開心能自己製作出一個網站
3.製作作業的時間 : 做了兩三天 11/18完成

1025445036 李易達



Edited 8 time(s). Last edit at 11/19/2014 12:24AM by 李易達.
(編輯記錄)

完成品
作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445165

1有無遇到的問題 : 原始碼很亂看不太了解
2.製作感想 : 好累可是很有挑戰性
3.製作作業的時間 : 6小時


前置作業
(1)網站主題 : 《無懼勇士》Bravest Warriors
(2)製作動機 : 很喜歡這部動畫
(3)製作內容 :1.關於2.出場角色3.集數4.劇照


1025445165 陳文晴

完成品
作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445141

1有無遇到的問題 : 有很多問題,可是看了老師的影片之後,就了解很多了
2.製作感想 :一開始覺得複雜難懂,可是後來懂了之後,就簡單多了
3.製作作業的時間 : 9小時


前置作業
(1)網站主題 : 日本時尚品牌HYSTERIC GLAMOUR
(2)製作動機 : 很喜歡這品牌
(3)製作內容 :品牌簡介 作者介紹 外部連結 合作聯名 產品介紹

完成品

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445174

1有無遇到的問題 : 覺得語法很麻煩,想破頭,還要請教同學來幫助我
2.製作感想 : 雖然做的不是很好,但以後一定會做更好的
3.製作作業的時間 : 做了一個禮拜 11/20完成

1025445174 黃琪雅

前置作業

(1)網站主題: 三麗鷗
(2)製作動機: 喜歡裡面的角色人物
(3)製作內容: 1. 關於三麗鷗 2. 三麗鷗家族 3. 商品精選 4. 情報特輯 5. 店鋪情報 6. 會員專區
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://flipermag.com/ 網頁排版整齊有獨特性

◎相關網站列表與分析:
1. http://www.ghibli.jp/ponyo/
2. http://www.ghibli.jp/ged/
3. http://www.karigurashi.jp/index.html
(網頁排版特別 一進網頁就可以清楚了解主題)


期中作業

(1)作業網址 :http://mepopedia.com/~web103-c/midterm/midterm-1025445063/index1.html

(2).
1有無遇到的問題 :很亂 很難 很多都做不出來
2.製作感想 :很難
3.製作作業的時間:好幾個小時

10254450563 洪筠真



Edited 4 time(s). Last edit at 12/03/2014 12:11PM by JinJin.
(編輯記錄)

(1)網站主題: 米朗期咖啡館
(2)製作動機: 甜點看起來非常吸引人
(3)製作內容: 1.最新訊息2.關於我們3.菜譜4.連絡我們
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://www.melangecafe.com.tw/news(米朗期官網)
個人認為風格比較像雜誌 顏色看起來一致很舒服
◎相關網站列表與分析:
1.http://www.cadeau.com.tw/
2.http://www.krispykreme.com.tw/
前者顏色素雅 排版也較簡潔
後者配色令我連想到SUBWAY的風格
但共同點是兩者皆有會自動變更的圖片


1025445099 陳盛倫

前置作業

(1)網站主題: 三麗鷗
(2)製作動機: 喜歡裡面的角色人物
(3)製作內容: 1. 關於三麗鷗 2. 三麗鷗家族 3. 商品精選 4. 情報特輯 5. 店鋪情報 6. 會員專區
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://flipermag.com/ 網頁排版整齊有獨特性

◎相關網站列表與分析:
1. http://www.ghibli.jp/ponyo/
2. http://www.ghibli.jp/ged/
3. http://www.karigurashi.jp/index.html
(網頁排版特別 一進網頁就可以清楚了解主題)


期中作業

(1)作業網址 :1.file:///C:/Users/User/Desktop/midterm-1025445063/index1.html

(2).
1有無遇到的問題 :很亂 很難 很多都做不出來 製作出來後但只能用上面的網址進去網頁 用老師指定的網址會變亂碼
2.製作感想 :很難
3.製作作業的時間:好幾個小時

10254450563 洪筠真

前置作業

(1)網站主題: 三麗鷗
(2)製作動機: 喜歡裡面的角色人物
(3)製作內容: 1. 關於三麗鷗 2. 三麗鷗家族 3. 商品精選 4. 情報特輯 5. 店鋪情報 6. 會員專區
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://flipermag.com/ 網頁排版整齊有獨特性

◎相關網站列表與分析:
1. http://www.ghibli.jp/ponyo/
2. http://www.ghibli.jp/ged/
3. http://www.karigurashi.jp/index.html
(網頁排版特別 一進網頁就可以清楚了解主題)


期中作業

(1)作業網址 :1.file:///C:/Users/User/Desktop/midterm-1025445063/index1.html

(2).
1有無遇到的問題 :很亂 很難 很多都做不出來 做好後只能用上面的網址進入網頁 用老師給的進去後變亂碼
2.製作感想 :很難
3.製作作業的時間:好幾個小時

10254450563 洪筠真

完成作業
(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445018
(2) 1.有無遇到的問題: 語法還是一樣很複雜,而且會搞混。
2.製作感想:做完自己的網頁覺得頗有成就感,而且學到很多。
3.製作作業的時間:兩天

前置作業
(1)網站主題:辛普森家庭 The Simpsons
(2)製作動機:我很喜歡的一部卡通,因為內容很搞笑,風格也很有特色。
(3)製作內容:(1)故事起源 (2)人物介紹 (3)劇情分集介紹 (4)電影介紹 (5)獎項成就
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.chienjaunestudio.com/ 雖然看起來顏色不多,但是簡單有力很有設計感。
◎相關網站列表與分析:
1. http://www.luhsetea.com/ 很有自己的特色和風格,顏色也很符合主題。
2. http://www.pixar.com/ 配色和排版都很簡單,看上去很舒服。
3. http://www.cartoonnetwork.com/games/adventuretime/index.html 色彩豐富,很符合卡通的感覺。

1025445018 陳怡融



Edited 1 time(s). Last edit at 11/18/2014 02:50AM by 1025445018.
(編輯記錄)

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

1.有無遇到的問題:在圖片那一頁不知道要怎麼排版才排的好看
滑鼠變換影像在index看MOVIE頁面時,變換的MOVIE英文字跑不出來......................................

2.製作感想: 自己摸了很久也思考很久,
最後才做出來,語法很多要慢慢吸收,
不過有比前幾次上手一些了,
希望之後能越做越進步。



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





(1)網站主題:懶懶熊

(2)製作動機: 自己非常喜歡懶懶熊,所以想以這主體為主

(3)製作內容:1.關於懶熊 2.成員介紹 3.懶熊圖片 4.懶熊店家 5.懶熊影片

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://www.polaris.net.tw/tw/graphic_list.html
配色舒服簡單,讓人感覺很舒適的簡約設計,沒有太多繁複複雜的東西。

◎相關網站列表與分析:
http://www.san-x.co.jp/rilakkuma/campaign/shoplist.html
配色感覺舒服簡單

1025445060黃淯婷



Edited 4 time(s). Last edit at 11/19/2014 01:34AM by 黃淯婷.
(編輯記錄)

完成品

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445045

1.有無遇到的問題 : 影片/網路不能開
2.製作感想 : 累
3.製作作業的時間 : 3天


前置作業
(1)網站主題: 米老鼠
(2)製作動機: 角色人物很可愛
(3)製作內容: 1. 關於米老鼠 2. 米老鼠創造 3. 米老鼠歷史 4. 米老鼠配音員 5. 米老鼠形象
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://ya-lynndesign.tumblr.com網頁排版整齊很舒服

◎相關網站列表與分析:
1. http://www.mydesy.com/they-draw-and-cook
2. http://mickey.disney.com
網頁排版整齊明瞭,網頁可以清楚了解

1025445045 饒文欣



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

1025445051 林芳伃


完成作業

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

1.有無遇到的問題: 多設了一個多餘的資料夾,到上傳FTP時才發現錯誤,全部檢查重用了一下才成功上傳。
2.製作感想:真的很難,不過還是試著做出來了。
3.製作作業的時間:2天


前置作業(11/05)

(1)網站主題: The Dinner brunch

(2)製作動機: 想嘗試做做看美式混合日式風格,在簡單明瞭的美式風閣下蘊含着傳統的日式風格。

(3)製作內容: 1.Home 2. See Us 3. Eat Us 4. Drink Us 5. Where Us

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://designmuseum.org/ 網頁排版特別

◎相關網站列表與分析:
https://www.google.com.tw/search?ion=1&espv=2&es_th=1&q=brunch&bav=on.2,or.r_cp.&bvm=bv.79908130,d.dGY&biw=1022&bih=480&dpr=1.25&um=1&ie=UTF-8&hl=zh-TW&tbm=isch&source=og&sa=N&tab=wi&ei=nn1rVO7oJKeNmwWf9YLoBA 搜集圖片



Edited 2 time(s). Last edit at 11/19/2014 01:11AM by wen sin.
(編輯記錄)

完成作業
(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445153
(2)
1.有無遇到的問題: 影片一次趕入上傳FTP會有問題,要一個感崁入一個上傳FTP的動作影片才不會有問題...
2.製作感想:很好玩 雖然研究超級久
3.製作作業的時間:14天


前置作業(11/05)
(1)網站主題: 童話鎮
(2)製作動機: 因為我喜歡這部劇
(3)製作內容: 1.首頁2.關於3.內容4.演員5.影片賞析
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.artie.com.tw/ 簡潔明瞭
◎相關網站列表與分析:
http://www.eztrust.com.tw/html/about/ 在按鈕的地方設計的很特別 很有趣

1025445153 廖敏君



Edited 1 time(s). Last edit at 11/19/2014 12:42AM by 小累.
(編輯記錄)

(1)網站主題: 上鎖的房間
(2)製作動機: 喜歡的推理日劇之一
(3)製作內容: 1.故事2.主角介紹3.分集介紹及SP4.預告片及官網連接 5. 製作團隊
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://www.lilyfei.com/index.html
因為她是做飾品的,所以底部是用乾淨的白色
◎相關網站列表與分析:
http://www.fujitv.co.jp/kagi/index.html
開頭時有動畫,上面的按鈕也超有質感


1025445147 張 郁



Edited 2 time(s). Last edit at 11/18/2014 10:32PM by 詠月吾熹.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445072
(2).
1有無遇到的問題 影片語法要加入http:才會顯示出來,找了很久
2.製作感想 很久沒有用頭腦了
3.製作作業的時間 兩天





(1)網站主題: 神偷奶爸 小小兵
(2)製作動機: 內容有趣角色可愛
(3)製作內容: 1首頁 2角色介紹 3故事內容 4預告片 5即將上映
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://www.pixar.com/ 網頁簡單清楚
◎相關網站列表與分析:
1.http://www.jeanco.com.tw/cht/who.html
風格都是走簡單路線,清楚明瞭





1025445072 王人永



Edited 1 time(s). Last edit at 11/16/2014 12:48PM by 1025445072.
(編輯記錄)

(1)作業網址http://mepopedia.com/~web103-c/midterm/midterm-1025445069
(2).
1有無遇到的問題:還好 但是一直搞混
2.製作感想:做完很有成就感
3.製作作業的時間:11/15~16


(1)網站主題:grimes
(2)製作動機: 喜歡她
(3)製作內容: 1.關於2.12件事3.照片4.音樂連結5.連結
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://pfestival.tw/news/簡單乾淨明瞭

◎相關網站列表與分析:
http://flipermag.com/category/design/
http://1cm.life/index.php
http://hokkfabrica.com/cat/beauty/

都是簡單然後讓人一目瞭然



Edited 1 time(s). Last edit at 11/16/2014 02:15PM by KUPEIRU.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445090/
(2).
1有無遇到的問題 語法研究很久,製作按鈕也弄很久
2.製作感想 做完一個網頁很有成就感
3.製作作業的時間 11/15~11/16


(1)網站主題: 湯姆貓與傑利鼠
(2)製作動機:從小就很喜歡看湯姆貓與傑利鼠,想藉此介紹。
(3)製作內容: 1關於 2角色 3歷史 4劇情介紹 5影片
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.peichung.com/
簡單明瞭
◎相關網站列表與分析:
http://www.tinyfootprintcoffee.com/story/
顏色搭配得很棒

1025445090 鍾婷玟



Edited 1 time(s). Last edit at 11/17/2014 12:29AM by 1025445090.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025443044
(2)
1有無遇到的問題:會有點卡卡的
2.製作感想:完成後有成就感
3.製作作業的時間:兩天完成


前置作業
(1)網站主題:SNOOPY
(2)製作動機:喜歡SNOOPY
(3)製作內容:1.簡介 2.兄弟姊妹 3.主要人物 4.照片 5.影音連結
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://www.htc.com/tw/smartphones/htc-butterfly/ 排版整齊
◎相關網站列表與分析:http://www.peanuts.com/characters/charlie-brown/#.VGI0i8n8aJt
人物介紹設計得不錯

1025443044 王薏茹



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

完成作品

(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445102/
(2).
1有無遇到的問題: 有些語法搞不清楚
2.製作感想 : 看到自己作完的完成品真得很有成就感
3.製作作業的時間 11/15~11/17



前製作業

(1)網站主題: Girls' Generation-TaeTiSeo
(2)製作動機:很喜歡他們的歌曲舞蹈所以想要作屬於他們的網頁
(3)製作內容: 1關於 2成員介紹1 3成員介紹2 4成員介紹3 5圖片
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
https://www.apple.com/tw/
簡單又有質感
◎相關網站列表與分析:
http://girlsgeneration-tts.smtown.com/
他們自己的韓文官方網站我覺得很好看,而且有音樂,簡單明瞭 。

1025445102 邱筱惠



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

(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445126
1有無遇到的問題 :字體大小一直跑掉
2.製作感想 :酷
3.製作作業的時間 :4.5天



前置作業
(1)網站主題:Jack Johnson
(2)製作動機:喜歡他的音樂
(3)製作內容: about.music.videoflims.pictures
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://www.acxion.co.jp/

◎相關網站列表與分析:
http://jackjohnsonmusic.com/
http://en.wikipedia.org/wiki/Jack_Johnson_(musician)

1025445126宋映萱



Edited 3 time(s). Last edit at 11/19/2014 02:56AM by XuanSong.
(編輯記錄)

完成品
(1)作業網址:http://mepopedia.com/~web103-c/midterm/midterm-1025445015/
(2)
1有無遇到的問題 :表格語法複雜不太會
2.製作感想:製做出自己喜歡的偶像網頁很開心
3.製作作業的時間:四天


前置作業
(1)網站主題: Krystal & Jessica
(2)製作動機: 欣賞的偶像
(3)製作內容: 1姐妹介紹2妹妹個人資料3姐姐個人資料4共同合作節目
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://shopping.udn.com/mall/cus/gbr/Cc1g00.do
是能清楚明白這個網站的目的為何的設計感網站。
◎相關網站列表與分析:
http://www.meierq.com/tw/
MEIER.Q 服飾店網站,簡約的利用深灰跟白突顯照片上的衣服。

1025445015陳曉琪



Edited 2 time(s). Last edit at 11/18/2014 04:23AM by CHEN CHICHI.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-c/midterm/midterm-1025445129
1有無遇到的問題 :有些地方還不熟,常常一個步驟部隊全都不見了
2.製作感想 : 學到很多,更熟練了
3.製作作業的時間 2天多

前置作業
(1)網站主題: Jelly Belly
(2)製作動機: 因為喜歡雷根糖的顏色
(3)製作內容: (1)公司歷史(2)商品介紹(3)參觀Jelly Belly(4)聯絡我們
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
簡約風格
復古風格
◎相關網站列表與分析:
-> https://prospek.ca/equipe/->
http://honke-owariya.co.jp
1025445129 王嬿婷



Edited 1 time(s). Last edit at 11/18/2014 09:15PM by 王嬿婷.
(編輯記錄)

http://mepopedia.com/~web103-c/midterm/midterm-1025445009
1有無遇到的問題 :有遇到超級多問題幸好有同學指導
2.製作感想 : 超級開心的
3.製作作業的時間 3-4天晚上


前置作業

(1)網站主題:SpongeBob SquarePants
(2)製作動機:因為我很喜歡看卡通,而且它的內容都好無理頭
很有趣也很好笑。
(3)製作內容:誕生,人物介紹,內容,小影片
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://ecodazoo.com/
他很特別而且他還是用3d的效果呈現,還滑鼠自己變視角

◎相關網站列表與分析:http://eiffel.ag/
統一的色調,吶喊的人,上面加上插畫的字,很有趣

1025445009 蔡宜庭



Edited 1 time(s). Last edit at 11/19/2014 03:26AM by 1025445009.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445180/
(2)
1.有無遇到的問題 語法很複雜研究很久
2.製作感想 自己完成一個網頁很有成就感
3.製作作業的時間 11/15~11/18


(1)網站主題:魔髮奇緣
(2)製作動機:很喜歡他們的歌曲和故事內容
(3)製作內容: 1劇情大綱 2人物介紹 3原聲帶 4影片欣賞
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.nakamise.org/
可愛風趣
◎相關網站列表與分析:
http://www.atelierbutch.com/
我覺得會很想點進去看,而且滑鼠碰的每個地方都會動很可愛 。

1025445180 謝芷寧



Edited 1 time(s). Last edit at 11/18/2014 12:46AM by 謝芷寧.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445012/
(2)
1.有無遇到的問題:常出現一些問題又不知道哪裡出錯,語法超麻煩。
2.製作感想:做完一個自己的網頁有種爽感。
3.製作作業的時間:11/16~11/18。

(1)網站主題:玩命關頭6
(2)製作動機:喜歡看
(3)製作內容: 1劇情大綱 2人物介紹 3預告片 4電影原聲帶
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://yugop.com/
◎相關網站列表與分析:
http://www.rustboy.com/rustweb.htm


1025445012 戴嫻淳



Edited 3 time(s). Last edit at 11/19/2014 11:12AM by 戴嫻淳.
(編輯記錄)

完成品

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445156

1.有無遇到的問題 : 字的編排有點障礙 還有不知道圖片怎麼居中 最後圖片還遺失重貼才無誤
2.製作感想 : 看著老師錄的影片慢慢摸出來 是很有成就感沒錯
3.製作作業的時間 : 2-3天 11/15完成

1025445156 蔡佳芬



Edited 2 time(s). Last edit at 11/15/2014 10:17PM by fanny40721.
(編輯記錄)

完成品:
(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445132
1有無遇到的問題 :圖片會一直跑掉
2.製作感想 :覺得有點困難 但終於做出一個完整的網頁覺得很棒!
3.製作作業的時間 3天多


前置作業
(1)網站主題: 森永牛奶糖
(2)製作動機: 大家從小到大的牛奶糖
(3)製作內容: (1)我們的牛奶糖(2)創始介紹(3)廣告包裝(4)系列產品
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:幾乎都以牛奶糖的顏色當底
◎相關網站列表與分析:
-> http://www.mms.com.tw/
http://www.77.com.tw/


1025445132 羅雅嫚



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

完成品

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445003

1有無遇到的問題 : 花了很長時間想-如何架構整個網站
2.製作感想 : 能親手製作出屬於自己的一個網站,很開心
3.製作作業的時間 : 做了一晚,11/16完成

1025445003 潘相逸

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445111

1有無遇到的問題 :蠻多單字都不太懂,做起來比較辛苦
2.製作感想 : 做出一個網站很有成就感
3.製作作業的時間 : 三天

1025445111 莊于萱

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445198
1有無遇到的問題 :不太會嵌入影片,CSS設定有點不懂
2.製作感想 : 自己做一個網站真的是挺難又挺麻煩的
3.製作作業的時間 : 二天

(1)作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445120/
(2).
1有無遇到的問題: 複雜
2.製作感想: 複雜
3.製作作業的時間 :很久




(1)網站主題: hello flumpool
(2)製作動機: 喜歡
(3)製作內容: 1關於 2認識 3專輯 4影片 5更多
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: 簡單
◎相關網站列表與分析:http://www.pampaneo.es/en/



1025445120

完成品
(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445030
1有無遇到的問題 :語法很複雜常常找不到如何更改內容物
2.製作感想 :做完屬於自己的網頁很有成就感
3.製作作業的時間 :一天


前置作業
(1)網站主題: 無印良品
(2)製作動機: 喜歡類似的風格
(3)製作內容: 學習類似的網頁架構
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://www.muji.com/tw/
◎相關網站列表與分析: http://www.muji.com/tw/

1025445030王泰然



Edited 1 time(s). Last edit at 11/18/2014 06:50PM by 1025445030.
(編輯記錄)

完成作業
(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445123
(2) 1.有無遇到的問題: 要背很多語法,還有點搞不清楚。
2.製作感想:終於完成了一個網頁,花了蠻多時間的 ,而且也學到很多。
3.製作作業的時間:11/17
前置作業
(1)網站主題:agnes cecile
(2)製作動機:我很喜歡的一位藝術家。
(3)製作內容:(1)關於 (2)作品 (3)視頻(4)連結
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.quay.com.au/喜歡這種簡單配置,配色簡單的感覺,看起來很舒適。
◎相關網站列表與分析:
1. http://give.zeropointseven.org/覺得他開頭設計的很特別,蠻有趣的
2.http://www.valeriemartinez.com/他主要的顏色是白色和黑色,看起來簡潔,又不單調。


1025445123姚育慈

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445186
1有無遇到的問題 :不太會嵌入影片,CSS設定有點不懂
2.製作感想 : 自己做一個網站真的是挺麻煩又難弄 枯燥乏味
3.製作作業的時間 : 一天

作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445147
1有無遇到的問題 :上傳影片讓我煩惱很大,而有些問題也只是我粗心沒看到,而且只有主頁能連到其他地方,其他的不能
2.製作感想 :完成了一個完整的網頁,讓我覺得自己超累得,但覺得不錯
3.製作作業的時間 二天多

1025445147 張 郁



Edited 1 time(s). Last edit at 11/19/2014 12:06AM by 詠月吾熹.
(編輯記錄)

前置作業
(1)網站主題: 皂寶天然皂
(2)製作動機: 因為是自家品牌
(3)製作內容: 1.首頁2.商品介紹3.店內寫真
(4)資料蒐集分析
◎相關網站列表與分析: 自己原本買的網站
http://www.shop2000.com.tw/ISoapbaby/home


完成品(11/18前)
請將這項放置於文章最前面
(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445006
(2).
1有無遇到的問題
有~很多~~
圖片大小很難控制常常跑出去不然就是太大又太小
很困擾不太會用~

2.製作感想
需要花很多時間去了解
語法那些真的很難理解
大小也很難控制><
弄得頭昏眼花

3.製作作業的時間
5小時以上

前置作業
(1)網站主題: Babymelody
(2)製作動機: 因為是自家品牌
(3)製作內容: 1.首頁2.商品介紹3.店內寫真
(4)資料蒐集分析
◎相關網站列表與分析: 自己原本買的網站
http://www.shop2000.com.tw/Babymelody/home

(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445075
1有無遇到的問題 非常困難><
2.製作感想 好累~
3.製作作業的時間 五小時以上



Edited 2 time(s). Last edit at 11/19/2014 01:22AM by melody830610.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445195
(2).
1有無遇到的問題 整個系統都是英文 我都看不懂 很多語法也會搞混
2.製作感想 做完之後覺得我可以當神了
3.製作作業的時間 我已經不知道自己做了多久多久


(1)網站主題:1顆心裡面的第3個世界
(2)製作動機:這是我個人的粉絲頁 裡面都是我平常時的小插畫
(3)製作內容: 1關於 2動機 3作品 4 我的專頁

1025445195古馥瑜

(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445144
(2).
1有無遇到的問題 仔細看清楚所有語法 不然就會痾....
2.製作感想 做完之後覺得 用心做都很簡單
3.製作作業的時間:大概5小一定可做完


(1)網站主題:街頭品牌Supreme
(2)製作動機:喜愛的東西囉
(3)製作內容: 1關於 2聯名 3共創作品 4 官網


1025445144 李欣翰

(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1005445191
(2).
1有無遇到的問題 語法還是會忘記,要翻講義才記得
2.製作感想 做出自己的東西很有成就感
3.製作作業的時間 一天

1005445191 陳佳雯

完成品
(1)作業網址:http://mepopedia.com/~web103-c/midterm/midterm-1025445039/
1有無遇到的問題 :語法設定錯誤
2.製作作業的時間:2天


前置作業
(1)網站主題:梵谷
(2)製作動機:喜歡梵谷
(3)製作內容: 1關於梵谷2梵谷的畫作3梵谷的事蹟4連結
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.squarespace.com/apps#intro簡潔能明瞭

◎相關網站列表與分析:
http://journeykaffe.wix.com/journeykaffe#!menu/c12gp訊息清楚

1025445039 何佳霖

(1)作業網址 http://mepopedia.com/~web103-c/midterm/midterm-1025445099
(2).
1有無遇到的問題 有很多但都一一解決了
2.製作感想 太多複雜的東西 思緒很亂
3.製作作業的時間 兩天


(1)網站主題: 米朗期咖啡館
(2)製作動機: 甜點看起來非常吸引人
(3)製作內容: 1.最新訊息2.關於我們3.菜譜4.連絡我們
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析: http://www.melangecafe.com.tw/news(米朗期官網)
個人認為風格比較像雜誌 顏色看起來一致很舒服
◎相關網站列表與分析:
1.http://www.cadeau.com.tw/
2.http://www.krispykreme.com.tw/
前者顏色素雅 排版也較簡潔
後者配色令我連想到SUBWAY的風格
但共同點是兩者皆有會自動變更的圖片

1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445162

1.有無遇到的問題:不會圖片置中,在連結網頁有問題

2.製作感想: 自己摸了很久才摸出網頁連結, 語法也慢慢熟練了

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

(1)網站主題:自己的作品網頁

(2)製作動機:想要有一個屬於自己的網頁
(3)製作內容:1首頁 2.美術 3.人像 4.電繪 5.得獎作品

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:file:///C:/Users/admin/Desktop/Untitled-1.html
風格設計的簡潔有力

◎相關網站列表與分析:
http://inch.sakura.ne.jp/



Edited 1 time(s). Last edit at 11/19/2014 04:37AM by 陸怡潔.
(編輯記錄)

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

1有無遇到的問題 :

覺得有障礙 前面的基礎還ok
後面所教的 有點跟不上
做起來覺得混亂
不會的地方
有請教人家教我

但最後做出來 覺得 很有成就感

2.製作作業的時間: 熬夜到天亮才把它完成 花蠻多時間的><


前置作業
(1)網站主題:THE ONE gb
(2)製作動機:想做屬於自己的網頁
(3)製作內容: 1. gb 2. fb 3. ig 4. to 5. ab
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.image-men.com.tw/Shop/ 素又極簡 排版很好

◎相關網站列表與分析:
http://www.pazzo.com.tw/ 簡約

黃振誠 1025445117

(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445108
1有無遇到的問題 :做完後發現突出部來,連結容易連錯。
2.製作感想 :完成了一個完整的網頁很有成就感。
3.製作作業的時間 1天

前置作業
(1)網站主題: 夏樹甜品
(2)製作動機: 想要自己做一個網頁
(3)製作內容: (1)品牌介紹(2)產品介紹(3)外送訂單(4)宅配方法(5)門市資訊
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://summertreesweet.com/aboutus2.html 配色簡單
◎相關網站列表與分析: http://www.izenq.com.tw/簡約


1025445108 張惟婷

完成品

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445135

前置作業
(1)網站主題 : masking tape
(2)製作動機 : 我愛紙膠帶❤
(3)製作內容 : 關於紙膠帶 / Mark's / Mt / Dailylike / Funtape
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析 : http://www.zihling.com/ 很喜歡這個會師的網站很華麗 可是因為是自己畫的圖片 所以跑有點慢
◎相關網站列表與分析 : http://tayako.weebly.com/about.html 簡約白的感覺詪人很不錯


1有無遇到的問題 : 內文的文字很難按照意思排版
2.製作感想 : 覺得很有成就感~~
3.製作作業的時間 : 架構花了一天的時間 剩餘時間花了幾小時拼湊內容



1025445135 李品萱

完成品
作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445048

1有無遇到的問題 : 原始碼很亂,會看花,搞不清楚自己做到的步驟!圖片尺寸和連結會出錯
2.製作感想 : 好累很有耐心地要完成他
3.製作作業的時間 : 花了很多天的時間慢慢做

前置作業
(1)網站主題: 安東
(2)製作動機: 崇拜我的明星
(3)製作內容: 1. 關於安東 2. 安東的紀錄


1025445048 林侑慶

(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445087
1有無遇到的問題 :都不是很熟
3.製作作業的時間

前置作業
(1)網站主題: Chrissy Costanza
(2)製作動機: 喜愛的翻唱藝人
(3)製作內容:首頁/關於/音樂影片
網站(風格)列表與分析:http://www.chrissycostanza.com/ 配色簡單 甜美
1025445087

(1)作業網址:http://mepopedia.com/~web103-c/midterm/midterm-1005445188
1有無遇到的問題:語法複雜
2.製作感想:略複雜
3.製作作業的時間:兩天

(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1005448079
1有無遇到的問題 :在dw改完 結果按網頁全部都跑掉
2.製作作業的時間:2天

前置作業
(1)網站主題: 蛋堡
(2)製作動機: 喜愛的饒舌歌手
(3)製作內容:首頁/關於/音樂影片


1005448079江芳瑜

完成品

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445177

1有無遇到的問題 : 語法很難
2.製作感想 : 很開心能製作出一個網站
3.製作作業的時間 : 做了一天


前置作業
(1)網站主題 : 小美人魚
(2)製作動機 : 很喜歡小美人魚
(3)製作內容 : 1小美人魚2劇情3人物介紹4相關影音

(4)資料蒐集分析
◎設計優良網站(風格)列表與分析 迪士尼官網



1025445177 吳永婷



Edited 1 time(s). Last edit at 11/19/2014 04:44PM by 1025445177.
(編輯記錄)

完成品

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445054

前置作業
(1)網站主題 : るろうに剣心 -明治剣客浪漫譚-
(2)製作動機 : 一直很喜歡這部漫畫,最近因電影而紅起來,想推廣一下。
(3)製作內容 : るろうに剣心 /物語 / 登場人物 / 主題曲 / 映像
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析 :http://nipponcolors.com/#akabeni
畫面簡約,乾淨舒服編排的方式很喜歡。
◎相關網站列表與分析 :http://wwws.warnerbros.co.jp/rurouni-kenshin/1/index.html
畫面乾淨很直接地強調風格,清楚表達訊息。
http://wwws.warnerbros.co.jp/rurouni-kenshin/index.html?oro=mile
喜歡排版的方式,尤其是按鈕的地方。


1有無遇到的問題 : 文字的設計與頁面的連接、影片放置
2.製作感想 :有時找不到語法哪裡錯誤,做完有成就感
3.製作作業的時間 :4天



1025445054 許雅筑

MEPOERs said:
JinJin: 沒有其他頁面連結喔!請補齊!
(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445171
1遇到的問題 摸索摸很久.
2.製作作業的時間:4小時

前置作業
(1)網站主題: 米老鼠
(2)製作動機: 可愛
(3)製作內容: 米老鼠/配音員/圖片集/參與影集



1025445171謝睿騏

(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445078
1有無遇到的問題 :連結一
2.製作感想 :非常有成就感
3.製作作業的時間 2天

前置作業
(1)網站主題:幾米童話
(2)製作動機:因為喜歡幾米作品
(3)製作內容: (1)幾米童話城堡(2)幾米特別繪本介紹(3)幾米繪本語錄(4)幾米公園(5)回首頁
(4)資料蒐集分析
https://plus.google.com/102933625113196726283/about?gl=tw&hl=zh-TW



1025445078 黃歆媛

作業網址 : http://mepopedia.com/~web103-c/midterm/midterm-1025445150

1.有無遇到的問題 : 有
2.製作感想 :很疲憊但有收穫
3.製作作業的時間 : 1天


前置作業
(1)網站主題: 鄧紫琪
(2)製作動機: 喜歡這個歌手
(3)製作內容: 1. 關於鄧紫琪 2.鄧紫琪 圖片 3. 鄧紫琪 影音 4. 鄧紫琪 網站連結
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:
http://www.pinkoi.com/?gclid=CjwKEAiAodOlBRDCjr-UlJDjtVUSJABR7fxyuy7jP0d_3WYEDAf3TRXTaOMihmJuAHTCIOVVnF_heRoCye7w_wcB
網頁排列很好瀏覽 清楚

◎相關網站列表與分析:
1. http://tw.weibo.com/gemtieba
2.http://tieba.baidu.com/f?kw=%E6%88%91%E6%98%AF%E6%AD%8C%E6%89%8B%E5%90%A7
網頁資訊清楚

1025445150 張曉萱



Edited 1 time(s). Last edit at 01/13/2015 10:37PM by 張曉萱.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-c/midterm/midterm-1025445033
1遇到的問題 摸索摸很久.
2.製作作業的時間:4小時 (不小心混了一陣

前置作業
(1)網站主題: 聖鬥士星矢
(2)製作動機: 回憶起童年
(3)製作內容: 黃荊聖鬥士/配音員/圖片集/參與影集
1025445033 林子軒

(1)網站主題:希臘三哲人之一:蘇格拉底
(2)製作動機:平常有接觸相關書籍、偶像
(3)製作內容:介紹蘇格拉底及名言分享
(4)資料蒐集分析
◎設計優良網站(風格)列表與分析:http://www.webackers.com/Proposal/About
◎相關網站列表與分析:http://www.ted.com/



(1)作業網址─http://mepopedia.com/~web103-c/midterm/midterm-1025445138/Index.html
(2).
1有無遇到的問題 有點抓到訣竅了
2.製作感想 下次不會在遲交了>"<
3.製作作業的時間 二小時

1025445138 梁奕堯



Edited 3 time(s). Last edit at 01/16/2015 07:50PM by 邊緣人.
(編輯記錄)