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

Advanced

Re: [作業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-2b/hw05/hw05-1025445XXX


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

[hr]

8. 上課影音


網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]



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

(1)原網站名稱及網址: [url=http://www.kh.edu.tw/]高雄市教育部網站-英文版[/url]
作業網址:http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱: [url=http://www.ok-studios.de/home/]OK-Studios[/url]
(3)色彩計畫: 舒適簡潔的大地色
(4)風格特色: 一頁下拉式網站、扁平化設計
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 117px、57px
h3文章標題級數 20px
內文級數(font-size)(單位px) 15px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
切片後在DW製作過程,有時候框架會跑掉,但又不能直接改,還要重新切片,PSD圖層多,會弄得自己混亂,
在沒有老師寫好的原始碼直接製作,總是問題一大堆...

學號 1025445005



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

(1)原網站名稱及網址: 白木屋中文版網站http://www.wwhouse.com.tw/index.php
(2)參考網站網址與網站名稱:好果設計公司http://www.hgo-design.com/pages/page_index_tw
(3)色彩計畫: 咖啡色 粉紅色 橘色
(4)風格特色: 一頁下拉式網站、顏色區塊設計
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數18px、20px
h3文章標題級數 16px
內文級數(font-size)(單位px) 11px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
之前還沒理作業內容就做了,所以重做了一部分

學號 102544197

(1)網站主題:臺北動物園保育網http://www.zoo.gov.tw
(2)參考網站網址與網站名稱:
http://www.hermitagemuseum.org/wps/portal/hermitage/
(3)色彩計畫:大自然的色彩
(4)風格特色:一般色塊的風格
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
一開始在製作過程中有一部分就會去思考要怎麼樣可以把網頁做更好
雖然還是會碰到一些小問題,但會試著努力做做看

學號1025445041



Edited 3 time(s). Last edit at 06/10/2015 10:00PM by 1025445041.
(編輯記錄)

(1)原網站名稱及網址: 好果設計公司中文版網站
(2)參考網站網址與網站名稱:http://www.hgo-design.com/pages/page_index_tw
(3)色彩計畫: 粉色與咖啡色
(4)風格特色: 一頁下拉式網站、色塊表現
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 18px
h3文章標題級數16px
內文級數(font-size)(單位px) 11px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
在PS改好後要用DW製作發現不會製作滑入效果。

學號 1025445197

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

作業網址: http://mepopedia.com/~web103-2b/hw05/hw05-1025445062

(1)網站網站網址及主題: http://www.moc.gov.tw/
(2)參考網站網址與網站名稱: http://www.designblvd.nl/
(3)色彩計畫:保持原來文化部的顏色藍色系
(4)風格特色: 看起來是意圖片居多的網頁安排
(5)請整理以下數值:
字體設定(font-family) 黑體
h1,h2標題級數 18/12
h3文章標題級數 8
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:因為看不太懂要做什麼所以先來回復

學號 1025445062



Edited 2 time(s). Last edit at 05/10/2015 12:25PM by julie1025445062.
(編輯記錄)

(1)網站主題: 埃爾米塔日博物館
(2)參考網站網址與網站名稱: http://www.image-festival.com/
(3)色彩計畫: 繽紛活潑的顏色
(4)風格特色: 以活潑的色塊介紹博物館
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:難

http://mepopedia.com/~web103-2b/hw05/hw05-1025445008/index.html

學號 :1025445008



Edited 2 time(s). Last edit at 05/13/2015 03:38PM by 裕婷邱.
(編輯記錄)

(1)網站主題: STARKIKI
(2)參考網站網址與網站名稱: [url=http://nodoubtyou.kr/]no doubt you![/url]
(3)色彩計畫: 黑白灰色調為主
(4)風格特色: 簡潔俐落
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 有點不懂要交的內容,還在製作中 confused smiley

學號 1025445080



Edited 1 time(s). Last edit at 05/13/2015 02:18AM by wenhui06.
(編輯記錄)

(1)網站主題:The British Museum
(2)參考網站網址與網站名稱:
http://swinkinc.com/

作業網址: http://mepopedia.com/~web103-2b/hw05/hw05-1025445226
(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 11:15AM by 1025445226.
(編輯記錄)

(1)網站主題: 文化部
(2)參考網站網址與網站名稱:
http://sgu.adm.kanazawa-u.ac.jp/
(3)色彩計畫:藍色搭配其他一些小配色,想讓整體不要都是藍色,會顯得單調
(4)風格特色: 排版簡單能讓各年齡層方便閱讀,顏色鮮明,圖文搭配
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:好難喔

(1)網站主題: 科技部
(2)參考網站網址與網站名稱: http://www.tokyu-cnst.co.jp/index.html 東急建設株式會社
(3)色彩計畫: 灰白藍 帶一點綠
(4)風格特色: 簡單乾淨為主
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 20px
h3文章標題級數 18px
內文級數(font-size)(單位px) 11px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)1600(單位px)

(6)製作心得: 有點不知道該怎麼做........ 還被PS的圖層搞得很混亂~~~~



Edited 1 time(s). Last edit at 05/13/2015 01:03AM by month19.
(編輯記錄)

(1)網站主題: 妞新聞 niusnews
(2)參考網站網址與網站名稱:http://www.isshine.com/main.php
(3)色彩計畫: 明亮的色調,多數以黃色系及粉色系為基礎。
(4)風格特色: 讓人能感覺到女生可愛又青春有活力的感覺。
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
作業網址h:http://mepopedia.com/~web103-2b/hw05/hw05-1025445071
花了很多時間在存圖片放圖片改圖片放文字改文字顏色,
以及無止盡的複製貼上,一度被圖層搞得很混亂,
呼~花了不少時間,終於搞定了!

學號 1025445071



Edited 3 time(s). Last edit at 05/15/2015 01:54AM by 1025445071.
(編輯記錄)

(1)原網站名稱及網址:奇美博物館 http://www.chimeimuseum.org/
(2)參考網站網址與網站名稱: http://subsign.co/
(3)色彩計畫:能充滿博物館神秘氣息的顏色,例:酒紅、淺灰帶咖啡色系
(4)風格特色:簡約風格,圖文鮮明。
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:完全不知道怎麼下手製作,也不懂怎麼放到DW製作,低一次遇到大難題....

1025445046

作業網址 http://mepopedia.com/~web103-2b/hw05/hw05-1025445065

(1)網站主題: Cereal-Travel&Style Magazine
(2)參考網站網址與網站名稱: http://readcereal.com/
(3)色彩計畫: 黑白
(4)風格特色: 簡潔的黑白風格,滑鼠滑到圖片上變彩色
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:不知道有沒有做對confused smiley

學號 :1025445065



Edited 1 time(s). Last edit at 05/13/2015 10:31AM by miho.
(編輯記錄)

(1)網站主題: 文化部
(2)參考網站網址與網站名稱:
http://www.louvre.fr/
(3)色彩計畫:以黑色調為主,看起來比較時尚一些,也不呆板
(4)風格特色: 排版簡單能讓各年齡層方便閱讀,顏色鮮明,圖文搭配
(5)請整理以下數值:

(6)製作心得:快瘋了,超難的

作業網址: http://mepopedia.com/~web103-2b/hw05/hw05-1025445029

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

(6)製作心得:好難,還是不懂怎麼用。但大概用了一下,覺得糟....救命!!!!!confused smiley

學號 1025445029

作業網址: http://mepopedia.com/~web103-2b/hw05/hw05-1025445131


1)網站網站網址及主題: iSET 三立官方網站
(2)參考網站網址與網站名稱:http://vsco.co/
(3)色彩計畫:比較以藍黃跟灰白做搭配
(4)風格特色:主要想要呈現簡單又好看的排版的感覺
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 14
h3文章標題級數 12
內文級數(font-size)(單位px) 12
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 覺得做完鬆了一口氣,花了2天做,剛開始做覺得很多地方很難做,因為對ps不怎麼熟,所以做起來沒有那麼得心應手,可是之後做出來就覺得蠻不錯的,不過有個缺點就是跟原本的參考的網頁的尺寸有點不太一樣就是了。

學號 1025445131



Edited 1 time(s). Last edit at 06/28/2015 11:37PM by 1025445131.
(編輯記錄)

(1)網站主題: 文化部
(2)參考網站網址與網站名稱:
http://sgu.adm.kanazawa-u.ac.jp/
(3)色彩計畫:藍色搭配其他一些小配色,想讓整體不要都是藍色,會顯得單調
(4)風格特色: 排版簡單能讓各年齡層方便閱讀,顏色鮮明,圖文搭配
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:好難喔

http://mepopedia.com/~web103-2b/hw05/hw05-1025445002/

(1)原網站名稱及網址:the girls who
作業網址:http://mepopedia.com/~web103-2b/hw05/hw05-1025445083
(2)參考網站網址與網站名稱: http://www.valtastic.com/
(3)色彩計畫:簡單
(4)風格特色: 簡單明瞭
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 117px、57px
h3文章標題級數 20px
內文級數(font-size)(單位px) 15px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
有點小複雜 做了好久
學號 1025445083



Edited 1 time(s). Last edit at 05/20/2015 01:22AM by 丘中儀.
(編輯記錄)

(1)原網站名稱及網址: http://www.tripadvisor.com.tw/Hotels
(2)參考網站網址與網站名稱:https://www.behance.net/gallery/25769395/Mercer
(3)色彩計畫: 藍色系列
(4)風格特色:顏色區塊設計
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數55px、30px
h3文章標題級數 24px
內文級數(font-size)(單位px) 22px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
用了很多時間做,覺得版型很美,但是卻找不到真實網頁,有點可惜

作業網址: http://mepopedia.com/~web103-2b/hw05/hw05-1025445167

學號 1025445167

(1)原網站名稱及網址: 雄獅旅遊 http://www.liontravel.com/
作業網址:http://mepopedia.com/~web103-2b/hw05/hw05-1025445170
(2)參考網站網址與網站名稱: 有.設計uDesign
(3)色彩計畫: 以灰白普通顏色為主
(4)風格特色: 用紅色字讓人比較興奮,整個風格是想走輕鬆簡單風
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
做的時候問題好多,熬了超多天的晚上終於做好了!這是到目前為止,最難的一個網頁作業,超累!!!
真的好難好難做阿~~~

學號 1025445170

(1)網站主題: 文化部
(2)參考網站網址與網站名稱:
http://sgu.adm.kanazawa-u.ac.jp/
(3)色彩計畫:藍色搭配其他一些小配色,想讓整體不要都是藍色,會顯得單調
(4)風格特色: 排版簡單能讓各年齡層方便閱讀,顏色鮮明,圖文搭配
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 12
h3文章標題級數 9
內文級數(font-size)(單位px)12
區塊內與區塊間的距離(padding)(margin)(單位px)55px
網站寬度(width)(單位px)1014 px

(6)製作心得:終於用出來了sad smiley用了老半天...!總算抓到訣竅!

http://mepopedia.com/~web103-2b/hw05/hw05-1025445002/

Adobe的連結
https://assets.adobe.com/link/d8f4ff0d-97a3-43d9-576a-b3139e5d39cc

(1)網站主題:QUEEN FASHION SHOP
(2)參考網站網址與網站名稱:
http://www.hermitagemuseum.org/wps/portal/hermitage?lng=zh

作業網址: http://mepopedia.com/~web103-2b/hw05/hw05-1025445224
(3)色彩計畫:白&黑
(4)風格特色:簡約
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
好複雜,自己根本無法完成,需要同學協助,做完還是不太清楚自己會了什麼。

作業網址: http://mepopedia.com/~web103-2b/hw05/hw05-1025445020

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

(6)製作心得:弄了很久,終於弄完了~~

1025445020

作業網址: http://mepopedia.com/~web103-2b/hw05/hw05-1025445068

(1)網站網站網址及主題:華山1914文化創意產業園區
(2)參考網站網址與網站名稱: 駁二藝術特區
(3)色彩計畫: 黑白色調
(4)風格特色: 簡潔明瞭的風格
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 還是不是很懂...

學號 1025445068



Edited 1 time(s). Last edit at 06/11/2015 12:47AM by 068.
(編輯記錄)

(1)網站主題:brianlichtenberg
(2)參考網站網址與網站名稱:
http://www.vam.ac.uk

作業網址: http://mepopedia.com/~web103-2b/hw05/hw05-1025445155
(3)色彩計畫:白&黑
(4)風格特色:簡約
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
覺得視線模糊 超累

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

(6)製作心得: 史上最複雜的作業五

學號 1025445113
(因網頁設計伺服器硬碟故障重新上傳、回復)

(1)原網站名稱及網址:宜蘭縣衛生局 http://www.ilshb.gov.tw/
作業網址:http://mepopedia.com/~web103-2b/hw05/hw05-1025445128
(2)參考網站網址與網站名稱:Wythe Hotel http://wythehotel.com/
(3)色彩計畫:藍綠
(4)風格特色:色塊
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:學會提案的方法

學號 1025445113
(因網頁設計伺服器硬碟故障重新上傳、回復)

作業網址: http://mepopedia.com/~web103-2b/hw05/hw05-1025445092/

(1)網站網站網址及主題: http://www.cles.tyc.edu.tw/longtan/longtanhis.htm 龍潭
(2)參考網站網址與網站名稱: http://www.crmsociety.com/default.aspx 介紹 查爾斯·雷尼·麥金托什
(3)色彩計畫: 黑 灰 白
(4)風格特色: 打照出有質感的畫面
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得: 一開始設定置中了 不過還是靠左

學號 1025445092

(1)原網站名稱及網址: 台北市文山區公所
作業網址:http://mepopedia.com/~web103-2b/hw05/hw05-1025445035
(2)參考網站網址與網站名稱:DGA | Diehl Group Architects
(3)色彩計畫: 古意茶香
(4)風格特色: 一頁下拉式網站
(5)請整理以下數值:
字體設定(font-family)
h1文章標題級數 18px
內文級數(font-size)(單位px) 14px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
很喜歡一頁下拉式的這種網站但不會做標記沒辦法到達定位...所以沒有分頁

學號 1025445035

(1)原網站名稱及網址:GAP
作業網址:http://mepopedia.com/~web103-2b/hw05/hw05-1025445095
(2)參考網站網址與網站名稱:http://www.gap.tw/
(3)色彩計畫:藍、白做為基礎色
(4)風格特色: 簡單明瞭
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 117px、57px
h3文章標題級數 20px
內文級數(font-size)(單位px) 15px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得:
有點小複雜 做了好久
學號 1025445095