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