[作業02] 網頁格線排版練習

1. 網頁格線排版練習作業說明

請參考[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354

1. 作業目的

1.熟悉格線排版的目的與意義
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧

[hr]

2. 作業說明

1.請以格線設計原則，以講義上任一優良網站為例，使用其排版概念及網頁資訊，重新改編為一新的網站設計。
2.製作：(1)首頁，(2)滑鼠移過的效果，以及(3)進入後的至少其中一子頁。

[hr]

3. 作業步驟

1.請下載[url=https://github.com/nathansmith/960-Grid-System/archive/master.zip]格線系統版型[/url]，並以photoshop軟體版本選用其中一種製作。
2.請選擇講義中任何一個你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
3.試著以格線系統重新排版，以原參考網頁的版型與網頁資訊，重新以photoshop設計新的網站，包含標題文字、圖片、色彩。
4.重新設定網站主題、使用對象、色彩計畫、圖片元素等。
5.[color=#CC0066]完成後請保留原檔[/color](以方便日後修改)，並存成PDF檔以夾檔方式上傳，並將檔名命名為 hw02-學號.pdf 。

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

參考網站網址：
(1)網站分類：
(2)網站主題：
(2)對象：
(3)色彩計畫：
(4)風格設定、網頁看點、預期成效：
(5)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
學號

[hr]

4. 注意事項

1.網站主題、標題名稱、圖片、配色請務必為新的設計，單純圖片可以網頁圖片取代，但必須符合網站整體屬性與效果，需設計之圖片(如頂圖、背景圖等，需經過設計，不可以現成圖片取代)
2.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
3.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
4.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。

5.若沒有特別想法，可將網站設定為：
(1)網站主題：設計工作室(請自行命名，中英文皆可)
(2)對象：對設計有興趣的人，以20~30為主。
3.請於規定時間準時繳交作業，逾期不後。
[hr]



(編輯記錄)

參考網站網址：[img]http://i.imgur.com/QQ3Gm69.jpg[/img]
改過成自己的： 已修改過的
滑鼠移過去導覽列字體顏色的改變、content圖片更改、 字顏色的變化


(1)網站分類：Design Firm設計公司
(2)網站主題：Tom and Jerry
(2)對象：小孩到成人的人〈5歲─50歲〉
(3)色彩計畫：以粉紅色為主要色調，header用淡淡的粉紅色加花邊，content用深的粉紅色，footer用比較注目的黃橘色為主要色調，因為footer就是要讓大家看到的注意事項，所以，用黃色會比較顯眼。
(4)風格設定、網頁看點、預期成效：
風格設定：想要讓整個網頁看起來有種親近、可愛的感覺
網頁看點：header和footer，header主要是以Tom and Jerry 的照片為主，footer是以整個材質為主，大主標題想要讓大家更看得清楚，所以，我以陰影作呈現。
(5)請整理以下數值：
字體設定(font-family)
標題級數 Book Antiqua - 24px
導覽列 Book Antiqua 12px
文章標題級數 微軟正黑體- 18px
內文級數(font-size) 微軟正黑體- 11px
區塊內與區塊間的距離(padding) 20px (margin) auto
網站寬度(width) 1024乘768
(6)製作心得：第一次利用photoshop格線來做，格線可以讓整個畫面很整齊，做任何東西都不會歪掉， 可以做自己想要做的網頁效果，真的很不錯，希望下次還可以做更多更好的網頁效果，雖然，這個做了兩次，因為電腦當機，所以，可能更加熟能生巧，也希望越做越好的網頁。



(編輯記錄)

.參考網站:www.theimport.co.uk Search the import advertise

[img]http://i.imgur.com/59lYvKD.png[/img]

[img]http://i.imgur.com/j6PY73i.jpg[/img]

(1)網站分類： 資訊網站

(2)網站主題： 美食食譜和介紹

(2)對象： 喜愛美食且享受烹飪樂趣的大眾

(3)色彩計畫： 深淺鐵灰色系列

(4)風格設定：淺顯易懂 文字俐落 圖案清晰
　網頁看點：簡單方塊幾何圖形線條和圖案清晰分明


(5)請整理以下數值：

　字體設定(font-family) ：Microsoft Sans serif
　標題級數：18px
　文章標題級數：14px



(編輯記錄)

原


改

(1)網站分類：動物網站
(2)網站主題： 中華民國保護動物協會
(2)對象：任何人
(3)色彩計畫：主要是紅色及暖色系的顏色，想給人也熱情、積極的感覺
風格設定：
(5)請整理以下數值：
字體設定(font-family)
標題級數 Adobe Fan He B - 24px
導覽列 Adobe Fan He B 最大16px
文章標題級數 Adobe Fan He B - 最大18px 最小9
內文級數(font-size) Adobe Fan He B - 最大11px
區塊內與區塊間的距離(padding)0px (margin) auto
網站寬度(width) 1024乘768
(6)製作心得：重做了第二次之後，感覺好像有進步...

原
[IMG]http://i.imgur.com/imCcbWo.jpg[/IMG]

改
[IMG]http://i.imgur.com/yakOnUp.jpg[/IMG]

(1)網站分類：資訊網站
(2)網站主題：神盾局特工影集介紹
(2)對象：英雄系列電影愛好者
(3)色彩計畫：主要為黑色及深淺的鐵灰色系列
風格設定：神秘酷帥且乾淨俐落
(5)請整理以下數值：
字體設定(font-family)
標題級數 Bold - 66px
導覽列 Bold -16px
內文級數(font-size) 標楷體 - 14px
區塊內與區塊間的距離(padding)20px (margin) auto
網站寬度(width) 1550乘1540
(6)製作心得：因為是自己最愛的影集所以做完很有成就感

1015445042

參考網站網址： http://livedemo00.template-help.com/joomla_47756/


自己做(我的pdf檔太大了...)：
http://i878.photobucket.com/albums/ab344/angelscs/1015445001.jpg


(1)網站分類： 風景介紹
(2)網站主題： 介紹自然景點資訊
(2)對象： 20歲以上
(3)色彩計畫： 偏大自然色系(綠、咖啡、黃等等)有些部分會比較透明，希望給予輕鬆的感覺。
(4)風格設定、網頁看點、預期成效：
風格：精緻清新
網頁看點：上面最大的圖片，如果可以，會讓有多張慢慢替換的特效
預期：能給觀看者有舒服、自然的感覺

(5)請整理以下數值：
字體設定：英文,Eras Light ITC，中文,華康儷細黑
標題級數、文章標題級數、內文級數(font-size) ：最大標題18px，文章標題14px，內文9px
區塊內與區塊間的距離：
padding：50px
margin：43px
網站寬度(width) 780px
(6)製作心得：一開始會不知道要做怎樣的風格，但是有了主題後就比較有方向了，做一做大概就知道方向了~希望我可以多嘗試些不同風格的版型

1015445001



(編輯記錄)

原[IMG]https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-ash4/t1.0-9/10013963_3936678672877_1945693812_n.jpg[/IMG]

改[IMG]https://scontent-b-pao.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/1969228_3936647952109_1389379643_n.jpg[/IMG]

(1)網站分類：美食網站。
(2)網站主題：甜點食譜介紹。
(2)對象：對甜點有興趣的大眾。
(3)色彩計畫：區域色塊區分。
(4)風格設定、網頁看點、預期成效： 簡潔明瞭、重點清晰。
(5)請整理以下數值：
字體設定(font-family)：微軟正黑體
標題級數、文章標題級數、內文級數(font-size)(單位px)：
標題級數 微軟正黑體 60px
小標級數 微軟正黑體 48px
文章標題級數 微軟正黑體 18px
內文級數(font-size) 微軟正黑體 16px
區塊內與區塊間的距離(padding)(margin)(單位px)：45px
網站寬度(width)(單位px)：1020x1444
(6)製作心得：主要呈現甜點的精緻度，所以顏色上較簡潔乾淨，以凸顯甜點重點。
學號：1015445266

(1)網站分類：平面設計師

(2)網站主題：個人網站

(2)對象：20~45

(3)色彩計畫：用灰階的方式做表現

(4)風格設定、網頁看點、預期成效：

▲風格設定：強調資訊明確
▲網頁看點：輪播圖為中心，襯托出整體氣氛

(5)請整理以下數值：

字體設定(font-family)
標題級數 Hobo stb- 26pt
導覽列 Hobo stb- 12px
文章標題級數 Hobo stb- 18pt
內文級數(font-size) Hobo stb- 12pt
區塊內與區塊間的距離(padding) 20px (margin) auto
網站寬度(width) 1024x768

(6)製作心得：個人網站的表現點比較少，缺乏商品展示這塊在做網頁上增加不少困難，還在摸索找出一個適合點並評估灰階色調是否妥當



(編輯記錄)

參考網站網址： http://www.myeunhyuk.com/





[hr]

(1)網站分類： 資料網站

(2)網站主題： Justdoit手工資訊站

(2)對象： 15歲以上女性

(3)色彩計畫：粉嫩色系/粉紅、

(4)風格設定：幾何色塊
　網頁看點：首頁有最新DIY資訊相簿可左右翻閱、圖片為主文字為輔
　預期成效：以圖片為主

(5)請整理以下數值：



(6)製作心得：主題真的很難想，大部分的時間都在找圖片、不知道該做什麼主題的
　但是主題一確定，照片找到後就不難...一開始也很猶豫要不要用這個網頁改
　有點猶豫，意外的是改出來和原本的風格完全不同!! \ >▽< /
　
學號 1015445039



(編輯記錄)

參考網站網址：

[img]https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn1/v/t34.0-12/1620037_492299140874793_947524798_n.jpg?oh=72f497275cecca47572b65c8524b19a9&oe=532863DC&__gda__=1395186918_8e075dad3df1949c274ebb9673522e24[/img]

改過成自己的：

[img]https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn1/v/t34.0-12/1061897_492299137541460_2018028458_n.jpg?oh=ec7544bb09736a31c8582c25267d34fb&oe=5328379E&__gda__=1395162923_fdcbee44731083726957a8a1f77db8f8[/img]

(1)網站分類：插畫

(2)網站主題：個人網站

(2)對象：該國家法定成年年齡 ~

(3)色彩計畫：低彩度的顏色，以襯托作品為主

(4)風格設定、網頁看點、預期成效：

1.風格設定：簡約

2.網頁看點：作品

(5)請整理以下數值：

字體設定(font-family)
標題級數 Hobo stb- 18pt
導覽列 Hobo stb- 14px
文章標題級數 Hobo stb- 18pt
內文級數(font-size) Hobo stb- 12pt
區塊內與區塊間的距離(padding) 30px (margin) auto
網站寬度(width) 1024x768

(6)製作心得：在製作網頁的同時，打算一邊畫內容用到的作品，希望能畫多一點。

參考網站:
http://www.richardphotolab.com/
[IMG]http://i.imgur.com/s6ODyCG.png[/IMG]

臨摹成品
[IMG]http://i.imgur.com/waY4Pdo.png[/IMG]

(1)網站分類： 甜點網站
(2)網站主題： 介紹甜食
(2)對象： 女孩
(3)色彩計畫： 柔和的粉嫩色系
(4)風格設定、網頁看點、預期成效：
風格：溫和甜美
網頁看點：banner
預期：女孩看了以後會有想吃甜點的衝動

(5)請整理以下數值：
字體設定：英文,Arial Rounded MT Bold，微軟正黑
標題級數、文章標題級數、內文級數(font-size) ：最大標題33px，文章標題20px，內文13px

(6)製作心得：想以甜美的風格呈現,所以在配色上做了很多次搭配,最後以banner的顏色做整體的視覺

1015445268