聯成電腦-讓你價值連城

撰文：黃玲君 老師

        範例網址：http://zxcmnbv99.ueuo.com/a.html

剛開始接觸網站製作的人，常會犯一個毛病，以為自己所製作的網站在自己的螢幕看起來沒問題，就應該不會有問題，但是卻不知道在不同解析度設定的螢幕裡看起來可能會破綻百出。建立良好的版型製作概念，儘管不用透過不同的螢幕來檢視，也能輕易製做出無瑕疵的版型接縫技術。 

一個具有設計感的網站，往往不能沒有Photoshop影像處理軟體的搭配，熟悉Photoshop的切片製作與到Dreamweaver 做後續的拼版，使我們更能天馬行空的發揮創意，如同將網站的設計，當作是在Photoshop畫一幅畫，畫完後切成小圖，再送到Dreamweaver組裝即可。

網站版型的設計方式很多，以下僅舉例其中一種做法。背景圖主要有四種呈現型態：重複，X軸重複，Y軸重複，不重複。本範例是採用X軸重複的設計。

         切片這一環節很重要，一般將版型分成  上 / 中 / 下 三個區塊。

01-    這個細長的區塊，我們預定將其設定為背景。考量到無瑕疵銜接，拉漸層的時候必須是絕對垂直的漸層，且拉曳漸層時高度不能超過02區塊的高度。

02-    上區塊為主題橫幅區，需要好好設計一番。

03-    中間為內文區，可以隨著該頁內容多寡而增加長度，這部份的設計要考量到儘管增長後也不會跑出破綻。

04-    頁尾，一般用來呈現版權宣告與著作權之處。

 透過 檔案>儲存為網頁與裝置用，將切割後的圖片存出來，預備到Dreamweaver做組裝，檔案名稱務必為英文或數字。

CSS設定：

頁面屬性：將01圖片設定為背景圖片，上邊界設定為0，X軸重複，背景顏色吸取漸層色塊的最下端顏色。

上區塊：符合我們設計好的上橫幅尺寸，將02圖片設定為背景。

內文區塊：可不設定高度，任其隨內容多寡彈性增長，將03圖片設定為背景。為使內文區域達到視覺上的美觀，可設定Padding（內距），避免文案緊貼著邊緣。

頁尾區塊：符合我們設計好的頁尾尺寸，將04圖片設定為背景。

               STEP5：於瀏覽器檢視完成結果

剛開始學習時，可以嘗試從不同的電腦、瀏覽器、解析度，多方面檢視有無破綻產生，如果有發現問題的話，再針對問題處做即時的修改！