JinJin 的視覺設計專區 - 103 網頁設計實習專區 http://mepopedia.com/forum/list.php?2027 Wed, 22 Apr 2026 12:30:11 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2027,48767,48767#msg-48767 [第一週] 資料蒐集與首頁設計 (5 replies) http://mepopedia.com/forum/read.php?2027,48767,48767#msg-48767
  1. 1 作業目的
  2. 2 作業說明
  3. 3 作業步驟
  4. 4 注意事項
  5. 1. 參考講義與範例

1. 作業目的

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

[hr]

2. 作業說明

1.請設定一網站主題(需要是大型網站，如政府機關或知名企業)，將以此主題延續接下來的設計，請先廣泛地蒐集資料，並鎖定一主題設計。
2.鎖定主題後，請廣泛地蒐集國內外相關網站，列表整理整並說明其優缺點，將可參考的網站進一步說明可參考的項目，選擇其中一個最適合的網站為設計依據，列出網址並截圖說明。
3.以格線設計原則，以選出的優良網站為範本，使用其排版概念及網頁資訊，重新改編為一新的網站設計。
4.製作：(1)首頁，(2)滑鼠移過的效果(以圖層構圖製作)

[hr]

3. 作業步驟

1.請下載[url=https://github.com/nathansmith/960-Grid-System/archive/master.zip]格線系統版型[/url]，並以photoshop軟體版本選用其中一種製作。
3.重新以photoshop設計新的網站，包含標題文字、圖片、色彩，以及所有網頁需呈現的內容與細節。
4.重新設定網站主題、使用對象、色彩計畫、風格屬性、設計概念、圖片元素等。
5.[color=#CC0066]完成後請保留原檔[/color](以方便日後修改)，回覆JPG圖檔，並存成PDF檔以夾檔方式上傳，並將檔名命名為 hw02-學號.pdf 。

6.上傳
(1)首頁，(2)滑鼠移過的效果
並請回覆：

參考網站網址：
一、網站蒐集及分析：
1.主題設定，原網址：
2.原網站優缺點分析：
3.鄉裩國內外網站列表分析：
4.選定參考網站優缺點分析與首頁截圖分析：
(1)網址：
(2)網站名稱：
(3)風格與色彩分析：
(4)優點：
(5)缺點：
(6)首頁截圖分析

二、新設計網站說明
(1)網站分類，原網址：
(2)網站主題：
(3)對象：
(4)色彩計畫：
(5)風格設定、網頁看點、預期成效：
(6)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
網站寬度(width)(單位px)

(7)製作心得：

學號

[hr]

4. 注意事項

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

[hr]

1. 參考講義與範例


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

PSD網頁排版
http://mepopedia.com/forum/read.php?1650,42884
http://mepopedia.com/forum/read.php?1651,42885

優良網站分析
http://mepopedia.com/forum/read.php?1173,27997
http://mepopedia.com/forum/read.php?804,18412]]> JinJin 103 網頁設計實習專區 Fri, 04 Jul 2014 20:02:35 +0800