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

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