Dreamweaver網(wǎng)頁(yè)制作教程:創(chuàng)建導(dǎo)航條_Dreamweaver教程
創(chuàng)建導(dǎo)航條
假如不使用框架,可以在每個(gè)頁(yè)面設(shè)置導(dǎo)航條,導(dǎo)航條設(shè)一組鏈接按鈕,供瀏覽者選擇使用。按鈕有多種形式,下邊介紹由鼠標(biāo)經(jīng)過(guò)圖像變換按鈕的組成的導(dǎo)航條制作:(導(dǎo)航條在頁(yè)面頂部)
“鼠標(biāo)經(jīng)過(guò)圖像”是當(dāng)訪問(wèn)者用鼠標(biāo)指針指向該圖像時(shí),該圖像發(fā)生變化。
“鼠標(biāo)經(jīng)過(guò)圖像”由兩個(gè)圖片組成:頁(yè)面最初載入時(shí)顯示的原始圖像,訪問(wèn)者將鼠標(biāo)指針移到原始圖像上時(shí)顯示另一幅圖像。
提示:事先您要制作好按鈕圖像,確保每個(gè)按鈕的圖像都具有相同的寬度和高度(以像素為單位)。
請(qǐng)執(zhí)行以下操作:
打開(kāi)主頁(yè) (index.htm)
在“文檔”窗口中,將插入點(diǎn)放置在要顯示導(dǎo)航條的位置。一般在導(dǎo)航條上邊要放置一個(gè)橫幅圖像(logo),導(dǎo)航條就安排在logo下邊的位置。
選擇“插入”>“圖像對(duì)象”>“導(dǎo)航條”。彈出對(duì)話框如下:

在“插入導(dǎo)航條”對(duì)話框中,單擊頂部加號(hào)“+”按鈕,按照上圖所示①②③④⑤對(duì)應(yīng)的文本框,填入相應(yīng)的文件。即完成了一個(gè)按鈕的添加。
然后,單擊頁(yè)面頂部的加號(hào)“ ”按鈕,添加另一個(gè)按鈕。重復(fù)以上步驟,直至您所需的按鈕添加完畢。
勾選“預(yù)先載入圖像”,在對(duì)話框底部的“插入”菜單中,選中“水平”。勾選“使用表格”。
單擊“確定”關(guān)閉該對(duì)話框,成功創(chuàng)建了導(dǎo)航條。
保存頁(yè)面。
按F12,預(yù)覽一下你的導(dǎo)航條,假如滿足了,可以將該頁(yè)面多次“另存為”其它頁(yè)面,分別指定不同的名稱。比如:p1.htm、p2.htm.....等。保存多少次視您的按鈕數(shù)量而定。然后,分別打開(kāi)其它頁(yè)面進(jìn)行編輯。
【注】:鼠標(biāo)指針經(jīng)過(guò)按鈕,圖像變化,只能在瀏覽器中看到效果。
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動(dòng)換行
- 探討Dreamweaver制作網(wǎng)頁(yè)時(shí)的空格
- 使用Dreamweaver制作網(wǎng)頁(yè)的20個(gè)技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開(kāi)發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- Dreamweaver網(wǎng)頁(yè)制作超級(jí)技巧36則
- Javascript 表單之間的數(shù)據(jù)傳遞
- Dreamweaver制作網(wǎng)頁(yè)技巧20則
- DreamwaverMX與ASP.NET
- Adobe CS3系列初探密之:Dreamweaver CS3
- Dreamweaver網(wǎng)頁(yè)制作教程:定義站點(diǎn)
- 網(wǎng)頁(yè)制作 用Dreamweaver制作細(xì)邊表格
- Dreamweaver開(kāi)發(fā)ASP實(shí)例視頻教程登錄頁(yè)面
- Dreamweaver MX進(jìn)階教程:固定單元格寬度
- Dreamweaver CS3的代碼片斷功能面板詳解
猜你也喜歡看這些
- Dreamweaver+ASP動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)視頻教程
- Dreamweaver視頻課程
- Dreamweaver 8中文版職業(yè)應(yīng)用視頻教程
- 呂聰賢dreamweaver視頻教程下載
- Dreamweaver網(wǎng)頁(yè)制作與色彩搭配全攻略(感激驢友boerly,新增完整版pdf)
- Dreamweaver MX構(gòu)建PHP+MySQL站點(diǎn)
- 美工之路系列視頻
- DIV.CSS應(yīng)用視頻教程(DIV+CSS)
- 4u2v Drwamweaver網(wǎng)頁(yè)制作實(shí)例教程100例
- 視友工作室網(wǎng)站頁(yè)設(shè)計(jì)制作全面通
- 相關(guān)鏈接:
復(fù)制本頁(yè)鏈接| 搜索Dreamweaver網(wǎng)頁(yè)制作教程:創(chuàng)建導(dǎo)航條
- 教程說(shuō)明:
Dreamweaver教程-Dreamweaver網(wǎng)頁(yè)制作教程:創(chuàng)建導(dǎo)航條
。