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

Advanced

[作業05] 網頁美感排版設計

1. 網頁美感排版設計參考講義


請參考[講義] 網頁美感排版設計:http://mepopedia.com/forum/read.php?804,75770

[hr]

2. 設計目的

1.解讀與思考設計主題如何透過網頁形式表現
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧

3. 設計主題

請選擇一需要修改的網站,並列出需要修改的原因
或以科技部,或文化部等網站為修改範例
http://www.most.gov.tw
http://www.moc.gov.tw

蒐集優良參考範例,並提出修改方案
以photoshop製作:
(1)首頁http://www.most.gov.tw (http://www.moc.gov.tw)
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁,文章頁或活動頁等)

http://www.most.gov.tw/newwp.aspx?act=Detail&id=29c94e68bc7243b0a9fd2ff5103d37a9&ctunit=31&ctnode=42&mp=1
http://www.moc.gov.tw/information_250_35497.html
http://event2.culture.tw/NCO/portal/Registration/C0103MAction?actId=50005

(4)列表頁(加分)
http://www.most.gov.tw/wlp.aspx?CtUnit=31&mp=1&CtNode=42
http://www.moc.gov.tw/informationlist_250.html

[hr]

4. 製作步驟


1.請分析欲製作主題網站風格與元素,並加以整理。
2.搜尋相關資料及網站,參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象,截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊,重新以photoshop設計,包含標題文字、圖片、色彩。
6.存成html,並上傳至FTP,於hw05中

7.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案PSD及JPG
上傳至Adobe Creative Cloud

6.上傳
(1)首頁,(2)滑鼠移過的效果,(3)進入後的至少其中一子頁。
並請回覆:

作業網址:

(1)網站網站網址及主題:
(2)參考網站網址與網站名稱:
(3)色彩計畫:
(4)風格特色:
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:

學號

[hr]

5. 注意事項


1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主,一般設定建議以微軟正黑為主,較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示,[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業,逾期不後。

[hr]

6. Adobe Creative Cloud


請至http://www.adobe.com/tw/
註冊帳號

將完成的檔案PSD及JPG
上傳至Adobe Creative Cloud

體驗雲端共享PSD的便利。

[hr]

7. 作業繳交


1.製作連結提案模擬,上傳網址為
http://mepopedia.com/~web103-2a/hw05/hw05-1025445XXX


2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案PSD及JPG,上傳至Adobe Creative Cloud

[hr]

8. 上課影音


網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]



Edited 7 time(s). Last edit at 05/08/2015 10:13PM by JinJin.
(編輯記錄)

網站網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/

(1)原網站名稱及網址:http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱: http://www.organic-restaurant.com.tw/
(3)色彩計畫: 黃、綠、咖啡
(4)風格特色: 溫暖清爽的感覺(?!
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:還是不太會弄移動效果...

原網站圖片都很小 解析度不好 請見諒(X



Edited 3 time(s). Last edit at 05/14/2015 01:08AM by 枯葉.
(編輯記錄)

作業網址: file:///C:/Users/angel/Desktop/hw05-1025445214/index.html#

(1)網站網站網址及主題: www.world-share.net/index.html
(2)參考網站網址與網站名稱: 設計台灣
(3)色彩計畫: 白為底
(4)風格特色: 簡約
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 做了好久可是還是不會..只好用原本的方式來製作

學號 1025445214 蘇子玲

作業網址:來瞜



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

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445133
修改後
 photo index_zpshnjl1kmx.jpg
滑鼠移過去後的效果
 photo index-A_zpsspq88crw.jpg
(1)原網站名稱及網址:科技部 [url=http://www.most.gov.tw/mp.aspx?mp=1]http://www.most.gov.tw/mp.aspx?mp=1[/url]
(2)參考網站網址與網站名稱:j-period [url=http://www.j-period.com/jp/]http://www.j-period.com/jp/[/url]
(3)色彩計畫: 灰、白、藍
(4)風格特色:科技風
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 14px
h3文章標題級數 14px
內文級數(font-size)(單位px) 13px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 900px

(6)製作心得:第一次這樣做網頁,花了一點時間嘗試製作方法。

首頁與網頁地圖(Sitemap)可以連到,網頁地圖的回頂連結也可以用

1025445133



Edited 1 time(s). Last edit at 05/13/2015 03:56PM by 1025445133.
(編輯記錄)

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/


(1)原網站名稱及網址:http://www.taiwancoffee.org/index.asp
(2)參考網站網址與網站名稱:(我還再猶豫要選擇哪個版形)
(3)色彩計畫: 咖啡、灰、白
(4)風格特色: 簡單
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:雖然是假網站,但做起來還蠻有趣的,
可以去學習別人的排版方式,讓自己的累積經驗。
1025445040



Edited 1 time(s). Last edit at 05/13/2015 09:50PM by MoMi.
(編輯記錄)

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445073

(1)原網站名稱及網址:http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱: http://www.devildessert.com/
(3)色彩計畫: 色塊主成
(4)風格特色: 色塊
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:喔.......不知方向對不對,有點不知要怎麼辦



Edited 1 time(s). Last edit at 05/13/2015 09:11PM by s096076.
(編輯記錄)

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

(1)原網站名稱及網址: http://www.twelvecupcakes.com.tw/
(2)參考網站網址與網站名稱: http://wolftea.com/
(3)色彩計畫: 黑白
(4)風格特色: 淡雅、簡約
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:摁....在找網站時猶豫了很久阿...一直在想到底該做什麼網站才好。
然後開始製作時又再想到底該放哪些圖片才好(X
但是這次作業是用PS做的,可以暫時先不管語法等等,
只需要處理編排就好,做起來略為簡單一些。

1025445070



Edited 1 time(s). Last edit at 05/11/2015 11:29AM by 1025445070.
(編輯記錄)

[size=small]
作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445001
製作範圍:首頁、天仁家族(子頁)

(1)原網站名稱及網址:http://www.tenren.com.tw/content_1024/about.asp
(2)參考網站網址與網站名稱:http://www.ch0492913296.com.tw/index.php
(3)色彩計畫: 綠、白、淺咖啡
(4)風格特色: 清新、簡單
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數:25/20px
h3文章標題級數:18px
內文級數(font-size):14px
區塊內與區塊間的距離(padding)(margin):35px(?
網站寬度(width):1341px

(6)製作心得:找了一堆不好的網站,但還是不知道要做哪一個
可以參考的網站偏偏不給我截圖(眼神死

不知道為甚麼我第一頁就花了將近兩個小時到底發生甚麼事了...
看別人很快就做完了,覺得自己要再加強...。
然後因為他本身官網的圖少到一個極致,
所以有加些別的進去,然後logo解析度實在沒有辦法囉(ˊ・ω・ˋ)

我覺得參考好的設計網頁版型來做,很有挑戰性,
而且又能學到不同的排版方式,再加以修正的話又能成為不同的感覺。
但是若要加語法進去我就不知道該怎麼辦了www
既想學又怕受傷害(゜∀゜)

1025445001
[/size]



Edited 4 time(s). Last edit at 05/14/2015 03:01AM by royu.
(編輯記錄)

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445136
(1)原網站名稱及網址:http://wl.980x.com/
(2)參考網站網址與網站名稱: http://sherlock-holmes-movie.warnerbros.com/dvd/index.html#/special_features/
(3)色彩計畫:設法加色塊好統一畫面
(4)風格特色: 微煽情
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:不堪回首,不敢獻醜
我快受不了了



Edited 2 time(s). Last edit at 06/11/2015 02:05AM by 1025445136.
(編輯記錄)

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445223/index.html
(1)原網站名稱及網址:http://www.dawncake.com.tw/?m=pr&t=1&c=18
(2)參考網站網址與網站名稱: http://www.sugar.com.tw/tw
(3)色彩計畫: 粉色 白色
(4)風格特色: 美味
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 覺得平時看的網站都太完美了,都沒什麼可以改的

學號 1025445223



Edited 1 time(s). Last edit at 06/11/2015 02:20AM by 荆轲君.
(編輯記錄)

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445049/ (如果太大請自行縮小哈哈^^"
(1)原網站名稱及網址: http://www.barista.com.tw/
(2)參考網站網址與網站名稱:http://www.apple.com/tw/
(3)色彩計畫: 咖啡色系列
(4)風格特色:清晰明瞭
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 屙...好吧,雖然做出來了,但...好大哦0.0,不知這樣做對不對, 呵呵。

1025445049



Edited 1 time(s). Last edit at 05/11/2015 12:54AM by Angelina.
(編輯記錄)

修改後作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445079/index.html

(1)原網站名稱及網址:http://www.piece-cake.idv.tw/contact.htm
(2)參考網站網址與網站名稱: http://www.weddingcake.com.tw/

(3)色彩計畫: 色塊 簡單
(4)風格特色: 甜甜的
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:調完跟成品的大小 想像中有點不一樣..... XDDD (懶得重改哈哈)


1025445079



Edited 7 time(s). Last edit at 05/14/2015 01:45AM by iamve.
(編輯記錄)

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445058

(1)原網站名稱及網址:http://www.toukaya.com/index.php
(2)參考網站網址與網站名稱:http://www.suzukake.co.jp/shop/
(3)色彩計畫: 黑白
(4)風格特色: 乾淨
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:我覺得和菓子好漂亮,好想吃吃看~~~~~

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445043/

(1)網站網站網址及主題: 台北捷運: http://www.metro.taipei/
(2)參考網站網址與網站名稱:東京晴空塔Tokyo Skytree : http://www.tokyo-skytree.jp/index.html
(3)色彩計畫: 水藍 草綠 黑 白
(4)風格特色:向量圖型搭配大面積圖片

網站寬度(width)(單位px) 1902

(6)製作心得: 沒有寫不出來的問題比較敢放膽做

學號 1025445043



Edited 4 time(s). Last edit at 05/21/2015 12:52AM by 1025445043.
(編輯記錄)

(1)原網站名稱及網址:http://www.wwhouse.com.tw/index.php
(2)參考網站網址與網站名稱:http://www.mrbrown.com.tw/
(3)色彩計畫:咖啡 灰
(4)風格特色: 簡單舒服
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:還可以
作業網址 http://mepopedia.com/~web103-2a/hw05/hw05-1025445025/

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445055/


(1)原網站名稱及網址:其實只是想做一個粉絲團的升級版
(2)參考網站網址與網站名稱:是參考官方網站的設計,之後會再加上一些官方有用到的特殊語法(現在還在研究構造)
(3)色彩計畫:紫色、白色、黑色
(4)風格特色: 主要是明確的資訊跟最常點擊的網頁
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 應該22~26?
h3文章標題級數 不記得了
內文級數(font-size)(單位px) 12~15左右?..
區塊內與區塊間的距離(padding)(margin)(單位px) 這個我沒設ㄅ
網站寬度(width)(單位px) ....痾一開始應該是設960

(6)製作心得:已弄假成真,其實之後規劃完再加上特殊語法就是粉絲網站了其實XD

[size=small]作業網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445178

(1)網站網站網址及主題:http://www.etudehouse.com.tw/

(2)參考網站網址與網站名稱:http://original-unverpackt.de/
(3)色彩計畫:以原品牌粉紅色系為主 白色為輔
(4)風格特色:清爽溫和的配色 ,有甜美粉嫩的感覺
(5)請整理以下數值:

字體設定(font-family)
級數 12px
網站寬度(width)1000

(6)製作心得:上課沒聽懂還以為是色塊拉了半天才問了同學發現自己做錯,色塊砍掉重練XDD
也因為我的排版是出自國外一家店 (你只要帶家裡容器去超市買,就可以用自己的容器裝並且享有優惠)~

所以排版方式都是大色塊 清楚明瞭的方式,原本想做文具行,但內容物太多不適用在這種版型上
所以選了一家我還蠻喜歡使用的化妝品牌,做出來的感覺還不錯,不過中間有一小區塊的正方形有點大(參考版型原本就長這樣)
所以在想說要不要放圖片,但圖片太多很雜.........所以就貼字而已了
做了兩天,還好有室友幫忙不然我還是霧煞煞而且也沒有頭緒主題到底要歸類做甚麼
p.s 做完發現ps好像更熟了XDDDDDDDD[/size]

我是祐寧 :3



Edited 1 time(s). Last edit at 05/15/2015 12:01AM by yo.nin.
(編輯記錄)

作業網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445046

(1)網站網站網址及主題:http://www.freconet.com/ ( freco online)
(2)參考網站網址與網站名稱:http://www.isaacpvl.com/
(3)色彩計畫:以淡色系為主
(4)風格特色:清爽溫和的配色 ,有悠閒的感覺。
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 10px
h3文章標題級數 24px
內文級數(font-size)(單位px) 14px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1020px

(6)製作心得:不知道為什麼我的頁面都無法置中,明明設定都是對的...
我快瘋了~我快瘋了~我快瘋了~連續兩天熬夜沒睡搞到快死!!
超級難!!! 我覺得我快得乾眼症了...

1025445046



Edited 1 time(s). Last edit at 05/14/2015 04:27AM by Xin Lin.
(編輯記錄)

網站網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445091/

(1)原網站名稱及網址:國立台灣博物館http://www.ntm.gov.tw/tw/index.aspx
(2)參考網站網址與網站名稱:台北市立美術館http://www.tfam.museum/index.aspx?ddlLang=zh-tw
(3)色彩計畫:黑 灰 白
(4)風格特色:簡約時尚
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數14
h3文章標題級數 12
內文級數(font-size)(單位10px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1980

(6)製作心得:花了多的時間

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445097/

(1)原網站名稱及網址:丹堤咖啡http://www.dante.com.tw/
(2)參考網站網址與網站名稱:Krispy Kreme 甜甜圈http://www.krispykreme.com.tw/about/history.aspx
(3)色彩計畫:蒂芬妮綠、淺灰咖啡、各種綠
(4)風格特色:簡約清新
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數14-16
h3文章標題級數 14-16
內文級數(font-size)(單位12-16px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1106

(6)製作心得:第一次用別的軟體排版網頁,製作過程比較簡單快速。


視傳二A1025445097陳慶芳



Edited 1 time(s). Last edit at 05/18/2015 02:37PM by 1025445097.
(編輯記錄)

網站網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445115/

(1)原網站名稱及網址:http://www.cns11643.gov.tw/AIDB/welcome.do
(2)參考網站網址與網站名稱:http://www.pem.org/
(3)色彩計畫:黑白!
(4)風格特色:中國味
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位10px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1920

(6)製作心得:花了多的時間

(1)網站網站網址及主題:【Saizeriya薩莉亞】平價義大利料理http://www.saliya.tidi.tw/
(2)參考網站網址與網站名稱:黑羊加州餐廳: 歡享美式漢堡,樂嘗創意料理 http://www.blacksheep-bakery.com/
(3)色彩計畫:主色為logo的綠色與墨綠色,輔助色為卡其色與咖啡色
(4)風格特色:以可愛插圖搭配,讓整體感覺更親民。
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 21pt
內文級數(font-size)(單位px) 18px
網站寬度(width)(單位px) 1200px

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445100

(6)製作心得: 花了兩天的晚上才完成,作起來不會很難可是要花點時間去編排與布置,能替原本的網站整頓覺得很有趣。

1025445100 葉芳羽

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445199/
(1)原網站名稱及網址: http://www.weddingcake.com.tw/about-us.php
(2)參考網站網址與網站名稱:http://www.tsujiri.co.jp/contents/store/listNichijyo.htm
(3)色彩計畫: 粉紅色系列
(4)風格特色:簡單明瞭
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 用的蠻順利的,可是在Google Chrome打開來看時兩頁大小不同,但是又在IE看又大小一樣剛剛好,做完後覺得非常有成就感

1025445199

網站網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445187/index.html
(1)原網站名稱及網址:http://www.nitori.com.tw/
(2)參考網站網址與網站名稱: http://www.miro.com.tw/
(3)色彩計畫: 白、灰、黑
(4)風格特色: 簡單清爽
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數14
h3文章標題級數
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:這次直接先用photoshop把頁面製作好,較簡單

1025445187

網站網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445067/

原網站名稱及網址:http://www.laya.com.tw/files/11-1365-6210.php
參考網站網址與網站名稱: http://the-dept.com/
色彩計畫: 橘紅根黑
風格特色: 簡單乾淨
請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
製作心得:真的是很需要一點的時間....

網站網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445202/

原網站名稱及網址:https://www.vaseline.com.tw/
參考網站網址與網站名稱: http://www.mentholatum.com.tw/
色彩計畫: 藍色和白色
風格特色: 乾淨
請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
製作心得:先處理ps後再製作網頁容易很多

網站網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445160/

原網站名稱及網址:http://www.workinghouse.com.tw/tw/index-1.asp
參考網站網址與網站名稱: http://www.tashina.com.tw/brand.php
色彩計畫: 暖色系
風格特色: 日本的淡淡生活
請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
製作心得:用photoshop很花費時間,不過是另一種做網頁方式的經驗

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445148/
(1)原網站名稱及網址:http://www.superqin.com.tw/mwd/
(2)參考網站網址與網站名稱:http://www.muji.com/tw/
(3)色彩計畫: 深綠
(4)風格特色:簡約清新
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:不難但需要一點耐心
1025445148

作業網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025443064/

(1)網站網站網址及主題: http://www.coco-tea.com/
(2)參考網站網址與網站名稱: http://www.starbucks.com.tw/home/index.jspx
(3)色彩計畫: 粉紅粉藍
(4)風格特色: 夏天亮色系
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 用pohotoshop排版面簡單多了

學號 1025443064

作業網址:
首頁
 photo _zpsuxzgroet.jpg
滑鼠滑過
 photo _zpsf07h9la4.jpg
分頁
 photo _zpsf07h9la4.jpg

(1)原網站名稱及網址:http://www.thegirlwhoshop.com/Shop/
(2)參考網站網址與網站名稱:http://www.thegirlwhoshop.com/Shop/
(3)色彩計畫:黑白灰
(4)風格特色: 簡約
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
因為不知道到底要怎麼放成網頁的樣子,看了教學還是不太懂,所以直接弄成圖片,
其實本來的網頁設計就已經算是簡約和我原本設定的一樣,
不過因為我很常逛這網頁,就把我平常逛網頁覺得不好的動線改一下。

1025445010

(1)作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445031
(2)參考網站網址與網站名稱:http://www.adidas.com.tw/
(3)色彩計畫: 黑、白、藍
(4)風格特色:運動風
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 14px
h3文章標題級數 14px
內文級數(font-size)(單位px) 13px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 900px

(6)製作心得:以前高中有學過類似的 但還是遇到問題



1025445031

作業網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025461016/

(1)網站網站網址及主題: https://www.kodz.com.tw/
(2)參考網站網址與網站名稱: http://www.stussy.com/
(3)色彩計畫: 灰藍
(4)風格特色: 清爽系
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 一開始我的畫面一直跳不見,後來重新置入上傳後終於好了

學號 1025461016

作業網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025461052

(1)網站網站網址及主題: http://www.net-fashion.net/
(2)參考網站網址與網站名稱: https://www.pointerfootwear.com/de/
(3)色彩計畫: 淺藍 純白 灰
(4)風格特色: 簡約清爽
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 覺得蠻麻煩網站的圖有些不能存所以只好另找方法

學號 :1025461052

作業網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445112


(1)網站網站網址及主題: http://www.re-design.com.tw/index.php
(2)參考網站網址與網站名稱:http://www.francoprinzivalli.com/collection/
(3)色彩計畫: 黑色
(4)風格特色:簡潔
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 還好不難,如果複雜的話可能要做很久。

學號:1025445112

.



Edited 1 time(s). Last edit at 06/09/2015 08:27PM by 1025445085.
(編輯記錄)

網站網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445085

(1)原網站名稱及網址:http://www.lungmei.com.tw/prod3.php?id=151
(2)參考網站網址與網站名稱:http://cetmap.tw/
(3)色彩計畫: 藍綠色、灰色、白色簡單色塊呈現
(4)風格特色:簡約風
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:比網頁設計簡單多了!而且省時方便,不然都已經做好在全部改掉超級浪費時間,這種做事效果很棒



學號:1025445085



Edited 1 time(s). Last edit at 06/09/2015 08:23PM by 1025445085.
(編輯記錄)

網站網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445151

原網站名稱及網址:http://www.kaoshieh.com.tw/ks_home.htm
色彩計畫:
風格特色:
請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:很認真的看過影片,但還是不太懂

(1)網站網站網址及主題: http://mepopedia.com/~web103-2a/hw05/hw05-1025445175
(2)參考網站網址與網站名稱: http://www.mbshop.com.tw/
(3)色彩計畫: 黑 白 桃紅
(4)風格特色: 簡單個性
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 網頁設計越做越順手了 覺得很開心很有成就感

網站網址 : http://mepopedia.com/~web103-2a/hw05/hw05-1025445169/

(1)原網站名稱及網址:http://www.cupcake.com.tw/index.php
(2)參考網站網址與網站名稱: http://www.cupcake.com.tw/index.php
(3)色彩計畫:咖啡色系
(4)風格特色: 古典風
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:還是不太會弄,弄得沒有很好

網站網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445106/

(1)原網站名稱及網址:http://www.hpw.com.tw/ec99/ushop1072/default.asp
(2)參考網站網址與網站名稱: http://www.cairns-stonegrill.com.tw/
(3)色彩計畫: 藍
(4)風格特色: 海鮮 海浪
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:很好玩

網站網址 : http://mepopedia.com/~web103-2a/hw05/hw05-1025461015/

(1)原網站名稱及網址:http://www.hanlin-tea.com.tw/food_drink.html
(2)參考網站網址與網站名稱:http://www.50lan.com.tw/drinks_3.php
(3)色彩計畫:黑白綠
(4)風格特色: 簡約風
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:不太會改網站 還做得不好 希望能越做越進步
學號 : 1025461015

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445082
原網站名稱及網址:https://redtree.smartweb.tw/
參考網站網址與網站名稱: http://www.lativ.com.tw/
色彩計畫:灰、粉、白
風格特色:簡約
製作心得:此次網頁的色彩計畫盡量與logo的標準色做呼應。要改的網頁的資訊蠻亂的,所以整理很久。
學號 1025445082

作業網址:http://mepopedia.com/~web103-2a/hw05/hw05-1025445076/


(1)原網站名稱及網址:http://www.caco.com.tw/Shop/itemList.aspx?m=1&p=72&utm_source=ggadwords&utm_medium=ad&utm_campaign=GOOGLE_ADWORDS
(2)參考網站網址與網站名稱:http://www.uniqlo.com/tw/zh
(3)色彩計畫: 紅 白 藍
(4)風格特色: 簡單
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)覺得複雜
1025445076

作業網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445109

(1)網站網站網址及主題: http://www.coke.com.tw/zh/home/ 可口可樂公司
(2)參考網站網址與網站名稱: http://www.coke.com.tw/zh/home/ 可口可樂公司
(3)色彩計畫:
(4)風格特色:
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 有點複雜drinking smiley

學號 1025445109