1.每個psd來源圖都有三種配色方案,要求依照相同規格分別切圖,且三種配色切出的同一區域圖片命名必需相同。
2.依照配色建立三個以顏色命名的資料夾,每個資料夾裡面放置「配色」製作成網頁所需的資料。
3.每種配色方案資料夾中包含的必需內容:images,css,headers,buttons資料夾和二個html檔案以及兩張大小網頁效果圖;所有命名按照範例進行,自訂內容可以自由命名。
4.網頁佈局,所有網頁都由以下幾個部分組成:
·頁頭(logo、headers)
·1級導航條(buttons)
·2級導航條(buttons)
·頁面內容區( 內容區用於顯示英文網頁)
·頁腳(底部選單、copyright)
根據psd檔案決定製作的區域,源圖中繪製出的區域必需製作出來,沒有的區域(有些沒有2級導航條,有些沒有頁腳)不需要用製作。
5.第一個html檔案製作要求:命名html.html。整個頁面要製作在一個表格之內。
頁頭:可以把header製作成背景,或是有些header圖片屬於不規則圖形也可以切成幾個部分來處理,要盡量減少切割次數。 Logo區域單獨製作在一個表格內(可以限定表格寬度);logo分為三部分logo圖片、公司名稱、公司標語;頁面裡公司名稱需要輸入40個大寫W字符,公司標語也需要輸入40個大寫W字元;
一級導航:一級選單(導航)中的內容必需製作在一個獨立的表格內;不得設定儲存格的寬度和高度;頁面中必需製作六個一級選單的項目,每個項目裡面輸入20個大寫W字元(可以採用6個W加一個空格的方式輸入);按鈕圖片需要製作出超連接的三種狀態變化(根據psd圖,有些可能只有兩種狀態);每一項裡的圖片和文字必需製作在一行裡面可以使用br使他們產生分行顯示效果。
二級導航(垂直導航):二級選單(導航)中的內容必需製作在一個獨立的表格內;不得設定表格的高度;按照樣例製作;頁面中必需製作10個二級選單的項目,每個項目裡面輸入20個大寫W字元(可以採用6個W加一個空格的方式輸入);文字連結最少需要製作出超連接的二種狀態變化。
頁面內容區:輸入足夠多的英文字元使頁面撐開達到(在1024×768的螢幕下使用的ie瀏覽器出現左右上下拉伸條)
頁腳:版權資訊區域輸入40個大寫W字元。為頁面美觀要於上下區域保留一定的距離。
底部選單:二級選單(導航)中的內容必需製作在一個獨立的表格內;不得設定表格的高度;按照範例製作;頁面中必需製作六個二級選單的項目,每個項目裡面輸入20個大寫W字元(可以採用6個W加一個空格的方式輸入);文字連結最少需要製作出超連接的二種狀態變化;為頁面美觀要於上下區域保留一定的距離。
6.第二個html檔案製作要求:命名html2.html。複製第一個html文件,刪除裡面的部分內容,保留三個一級導航、二個二級導航(垂直導航)、三個底部選單,每項裡面出現6個字元;頁面內容區保留兩行英文字元(不撐開頁面)。
7.在上述情況下兩個頁面要保持統一效果,背景可以實現循環;Header圖片居中顯示或可以擴展(有些header區域可以製作背景)。
8.公司名稱,公司標語,內容區頁標題,與第一級和第二級的選單字體如應該用標準的系統字體,例如:Tahoma或Arial。
9.建立範本目錄時,請在「工具」-〉「資料夾選項」-〉「察看」 裡勾選「不快取縮圖「的選項,這樣模板zip包內才不會包含多餘的快取檔案。
10、style.css檔案不能包含任何圖片連線(實例: background-image: url('../images/bg.gif');),不能包含html tags的定義(例如css裡面不應該對進行定義如果要應用在上,可以直接寫在html 的標籤裡)。
11.html的charset 編碼必須為utf-8。
12.所有的(包括樣式表和HTML)字體大小必須用Points(pt) 而不是像素(pixels), 最小大小為8pt, 例如font-size: 8pt。
13.模板內的元素(div 等)不能使用絕對定位,也不能包含JavaScript。
14.所有範本在瀏覽器IE、Mozilla、Opera效果相同。
15、範本文件內的所有圖片路徑必須為相對路徑。相對於「顏色」路徑,例如:blue下的images下的文件,應該寫為< img src=images/xxxx.gif > 而不是< img src=blue/images/xxxx.gif >。
16.在特殊psd裡有的無法容納40 個大小W字母的時候公司名和口號字體可以縮小,但不能小於8pt。
17.模板在高度上必須填滿整屏,對於沒有內容的也一樣(使內容部分能夠垂直的延伸)。
18、所有區域必需添加背景顏色(按照psd圖進行)。
19、不能出現空格符。
20、所有屬性值必須加在「 」裡面。
21、凡不成對出現的標籤都要加「/」。例如:<img src=******>應該寫成<img src=******/>