相關(guān)文章:photoshop制作網(wǎng)站首頁(yè)(3):切割網(wǎng)頁(yè)圖片

導(dǎo)航菜單在首頁(yè)中占有非常重要的地位，它用于引領(lǐng)訪問(wèn)者找到需要的頁(yè)面。所以一般來(lái)說(shuō)，網(wǎng)頁(yè)設(shè)計(jì)師通常將大量的精力用在導(dǎo)航菜單的設(shè)計(jì)上，而這里我們只是舉個(gè)簡(jiǎn)單的例子來(lái)說(shuō)明。

1. 用dreamweaver 打開(kāi)網(wǎng)頁(yè)，當(dāng)鼠標(biāo)單擊后，您可以看到導(dǎo)航欄已經(jīng)完成的切片，我們現(xiàn)在要制作的是鼠標(biāo)移上時(shí)的翻轉(zhuǎn)效果，如圖1-4-1 所示。

圖1-4-1

2. 找到您存儲(chǔ)切片圖像的目錄，一般是網(wǎng)頁(yè)當(dāng)前目錄或是名為“images”的目錄。復(fù)制一個(gè)“娛樂(lè)”切片，并用photoshop 打開(kāi)，如圖1-4-2 所示。

圖1-4-2

|||

3. 用“移動(dòng)工具”選中括號(hào)，分別向左或向右移動(dòng)，使括號(hào)離文字的距離變大。這樣的操作可實(shí)現(xiàn)鼠標(biāo)移到按鈕上時(shí)，括號(hào)自動(dòng)左右撐開(kāi)的效果，如圖1-4-3 所示。

圖1-4-3

4. 打開(kāi)dreamweaver，在我們?cè)O(shè)計(jì)的導(dǎo)航欄上選擇“娛樂(lè)”切片并刪除，執(zhí)行插入“鼠標(biāo)經(jīng)過(guò)圖像”命令，如圖1-4-4 所示。

圖1-4-4

5. 在該對(duì)話框中設(shè)置原始圖像為原來(lái)的“娛樂(lè)”切片圖像，而鼠標(biāo)經(jīng)過(guò)圖像為復(fù)制并修改括號(hào)后的“娛樂(lè)”切片圖像，當(dāng)然您也可以加入自己的鏈接，如圖1-4-5 所示。

圖1-4-5