我們需要先制作背景圖片。也就是網(wǎng)頁背景那塊藍色的部分,。我們需要單獨做出來,。 新建一個1920px*400px的文件 我們拉一個一個藍色(#506dbb)到白色的一個漸變 效果圖 然后我們保存這張圖片為gif格式 這時候我們新建一個 1000*800的文件 我們把網(wǎng)頁效果圖制作出來。這里都是用到ps制作的,。沒有寫任何代碼,。這個過程我就不講了 大家制作好網(wǎng)頁效果圖完成的時候一定要注意把網(wǎng)頁背景圖層刪掉,保持透明 下一步我們使用切片工具,。把頁面進行切片。如下圖所示 注意每一個鏈接都要切片一下,。切片工具和矩形選區(qū)工具一樣,,拉一下就是一個切片 為了區(qū)分我這里加了背景。我們一會一定要記得去掉 我們再使用切片選擇工具選擇單個切片,。然后右鍵 我們再逐個為切片添加鏈接 我們現(xiàn)在保存為web所用格式 我們把這里選擇png—8 保存 保存完成后 效果圖 保存完成后。會生成一個目錄和一個html文件,。我們用瀏覽器打開這個html文件可以看看效果。由于我們保存時選擇的是png格式的所以看到的效果不美觀,,且網(wǎng)頁靠左邊,。我們要做的就是讓網(wǎng)頁有一個背景就是我們剛剛制作的藍色背景,。且頁面居中 為了方便,這里我們使用 Dreamweaver,。這個軟件破解版和安裝教程問度娘要這里就不多說,。 打開 Dreamweaver界面 我們新建一個站點 我們先要給網(wǎng)頁居中,。 我們用Dreamweaver打開ps生成的html文件 進入Dreamweaver的設(shè)計視圖,。注意看 我們用鼠標(biāo)點一下最外邊的這根線,。(把鼠標(biāo)放在四個角上單擊一下就可以選中) 選中 然后把下邊的屬性設(shè)置為居中。注意看 這樣網(wǎng)頁就居中了,。 我們再添加一個背景 我們先把鼠標(biāo)在旁邊空白地方單擊一下,然后點擊下面的頁面屬性 把背景圖片設(shè)置為我們剛剛制作的背景圖,。重復(fù)選擇no開頭的那個。其他的不用管,。 然后我們按ctrl+s保存好網(wǎng)頁。然后即可使用瀏覽器預(yù)覽效果了ps制作網(wǎng)頁就是這么簡單 |
|