一.每個psd源圖都有三種配色方案,要求按照同樣規格分別切圖,且三種配色切出的同一區域圖片命名必需相同;
二.按照配色方案建立三個以顏色命名的文件夾,每個文件夾裡面放置配色方案製作成網頁所需的資料;
三.每種配色方案文件夾中包含的必需內容:images,css,headers,buttons文件夾和二個html文件以及兩張大小網頁效果圖;所有命名按照樣例進行,自定義內容可以自由命名。
四.網頁佈局,所有網頁都由以下幾部分組成:
頁頭(logo、headers)
1級導航條(buttons)
2級導航條(buttons)
頁面內容區( 內容區用於顯示英文網頁)
頁腳(底部菜單、copyright)
根據psd文件決定製作的區域,源圖中繪製出的區域必需製作出來,沒有的區域(有些沒有2級導航條,有些沒有頁腳)不需要用製作。
五.第一個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加一個空格的方式輸入);文字鏈接最少需要製作出超連接的二種狀態變化;為頁面美觀要於上下區域保留一定的距離。
六.第二個html文件製作要求:命名html2.htnl
複製第一個html文件,刪除裡面的部分內容,保留三個一級導航、二個二級導航(豎導航)、三個底部菜單,每項裡面出現6個字符;頁面內容區保留兩行英文字符(不撐開頁面)
七.在上述情況下兩個頁面要保持統一效果,背景可以實現循環;header圖片居中顯示或者可以擴展(有些header區域可以製作背景)
八.公司名稱,公司標語,內容區頁標題,與第一級和第二級的菜單字體如應該用標準的系統字體,例如:tahoma或者arial,
九.建立模板目錄時,請在工具-〉文件夾選項-〉察看裡勾選不緩存縮略圖的選項,這樣模板zip 包內才不會包含多餘的緩存文件.
十. style.css 文件不能包含任何圖片連接(實例: background-image: url( '../images/bg.gif ');),不能包含html tags 的定義(例如css裡面不應該對進行定義如果要應用在上, 可以直接寫在html 的標籤裡)
十一. html 的charset 編碼必須為utf-8
十二.所有的(包括樣式表和html)字體大小必須用points(pt) 而不是像素(pixels), 最小大小為8pt, 例如font-size: 8pt.
十三.模板內的元素(div 等)不能使用絕對定位,也不能包含javascript。
十四.所有模板在瀏覽器ie, mozilla, opera效果相同
十五.模板文件內的所有圖片路徑必須為相對路徑。相對於顏色路徑, 例如: blue 下的images 下的文件,應該寫為< img src=images/xxxx.gif > 而不是< img src=blue/images/xxxx.gif >
十六.在特殊psd裡有的無法容納40 個大小w字母的時候公司名和口號字體可以縮小, 但不能小於8pt.
十七.模板在高度上必須要填滿整屏,對於沒有內容的也一樣(使內容部分能夠垂直的延伸)
十八.所有區域必需添加背景顏色(按照psd圖進行)
十九.不能出現空格符
二十.所有屬性值必須加在裡面。
二十一.凡不成對出現的標籤都要加/ 例如:
應該寫成< img src=****** >應該寫成< img src=******/ >