[作業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]



(編輯記錄)

(1)網站分類： 官方消息網站.部落格
(2)網站主題：Lea Michele
(2)對象： 對Lea Michele有興趣的人
(3)色彩計畫： 紫色質感風
[hr]
(4)風格設定、網頁看點、預期成效：
原始網頁
http://www.bigdaddyweave.com/

[hr]
修改網頁


[hr]
修改網頁(滑過後效果)


[hr]
修改網頁(其中一項子頁)


[hr]
(5)請整理以下數值：
[u]字體設定(font-family)[/u]
標題級數
Trebuchet MS 23px

文章標題級數
Trebuchet MS 21 px

[u]內文級數(font-size)[/u]
內文-Georgia 13 px
間距 18 px

[u]區塊內與區塊間的距離(padding)(margin)[/u]
padding-top 10px
margin 10px

[u]網站寬度(width)[/u]
960px

(6)製作心得：
心得哦....就在重做一次~~~做到快高血壓了.....((倒
雖然有少一點點東西但比較沒什麼差別((自我催眠中~~
可能選擇的一個比較簡單的版面去製作.所以內容可能跟原網站沒什麼大不同
但其中的困難點可能就是選字問題
因為我們不熟悉網路上的供應的字體有哪些
加上我們平常熟悉輸出的作品排版
很少接觸到網頁上的字體排版的呈現
所以在行距及字距間的拿捏上還要再多加的訓練



(編輯記錄)

MEPOERs said:

原始網頁：

(1)首頁：

(2)滑鼠移過的效果：

(3)進入後的至少其中一子頁：

參考網站網址：http://www.keyeast.co.kr/index/
(1)網站分類：韓國影視
(2)網站主題：來自星星的你 My Love from the Star
(2)對象：喜歡看韓劇的人們
(3)色彩計畫：湖水綠、湖水藍
(4)風格設定、網頁看點、預期成效：以外星感、簡單的風格，讓喜歡這部戲劇或是還沒看過但有興趣想看這部的觀眾帶來更進一步的相關消息，會吸引很多喜歡這部戲劇的觀眾點閱
(5)請整理以下數值：
字體設定(font-family)：Impact
標題級數：30px
文章標題級數：24px
內文級數(font-size)：14px
區塊內與區塊間的距離(padding)(margin)：0px
網站寬度(width)：1351*986
(6)製作心得：因為真的超級喜歡這一部韓劇所以就拿來做為此次的作業主角，雖然做了好久也改了好幾次，但是一看到男女主角心情就會變超級好疲勞也跟著消失
學號 1015445203 梁誠翎



(編輯記錄)

原始網站
........................
[IMG]http://i.imgur.com/2TSFsz7.jpg[/IMG]


游標經過時連結圖示上方會出現文字
[IMG]http://i.imgur.com/DFhuFmq.jpg[/IMG]



自己做的網站 / 首頁
........................
[IMG]http://i.imgur.com/AcSKmiX.jpg[/IMG]


自己做的網站 / 滑鼠移過的效果
........................
[IMG]http://i.imgur.com/15ksYWs.jpg[/IMG]


自己做的網站 / 子頁 - video
........................
[IMG]http://i.imgur.com/tIHLvKS.jpg[/IMG]



參考網站網址：Cider Sky的官方網站 http://www.cidersky.com/
(1)網站分類：卡通明星
(2)網站主題：snoopy with friend
(2)對象：喜歡snoopy的朋友們
(3)色彩計畫：紫紅色與粉紅色
(4)風格設定、網頁看點、預期成效：
可愛的風格、以簡單手繪的方式吸引大眾、希望能打造雖然繁複但又僅然有序的網頁且能讓人喜歡
(5)請整理以下數值：
字體設定(font-family)
標題級數(無)、文章標題級數14px、內文級數(font-size)12px
區塊內與區塊間的距離(padding)(margin)
13px
網站寬度(width)
600px
(6)製作心得：
一直都很像試試看自己畫的連結圖示
結合卡通本身的圖片加上自己畫的網頁
網頁含有漫畫及影片還有一些外部連結
希望這麼一來能做出很完整的網頁
做自己喜歡的卡通人物很開心哈哈哈
學號
1015445219 王斯亭



(編輯記錄)

(1)網站分類：個人作品網站
(2)網站主題：插畫
(2)對象：對插畫有興趣的對象
(3)色彩計畫：黑灰白簡單

(4)風格設定、網頁看點、預期成效：
簡單明瞭格式配上自己的插畫作品

原始網站：
[img]http://i.imgur.com/M7SEaIZ.jpg[/img]

修改後網站：
[img]http://i.imgur.com/Dmg62nT.jpg[/img]

子頁:
[img]http://i.imgur.com/fpyVqaH.jpg[/img]

滑鼠過後：
[img]http://i.imgur.com/5vVK7bh.jpg[/img]

(5)請整理以下數值：
字體設定:

標題級數:微軟正黑36pt
文章標題級數:微軟正黑12pt
內文級數:微軟正黑11pt
區塊內與區塊間的距離:10px
網站寬度:1024*768

(6)製作心得：
開始規劃如何排版然後非常期待能夠做出自己的網頁



(