部落格技術文件01.jpg 撰文:黃玲君 老師

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

 

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

 部落格技術文件02.jpg

        

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

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

部落格技術文件03.jpg

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

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

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

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

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

部落格技術文件04.jpg 

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

部落格技術文件05.jpg 

CSS設定:

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

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

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

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

                    

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

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

 

本文轉載自聯成電腦歡迎點選此連結 :  聯成電腦技術論壇  或點   聯成電腦痞客邦- - 在成長的路上彼此相伴 看更多相關文章 

 

arrow
arrow

    justkidding2266 發表在 痞客邦 留言(0) 人氣()