Dreamweaver網(wǎng)頁(yè)制作超級(jí)技巧36則(5)_Dreamweaver教程
27. 用Dreamweaver制作出一個(gè)類(lèi)似于下拉菜單的效果
制作一個(gè)類(lèi)似于下拉菜單的效果需要用到層的隱藏和顯示特性。具體的方法是:在頁(yè)面中插入一個(gè)單行多列的表格,作為你的菜單條。表格的列數(shù)由菜單選項(xiàng)的多少?zèng)Q定。插入一個(gè)層,在層中輸入第一個(gè)下拉菜單的內(nèi)容,并把這個(gè)層移動(dòng)到表格第一列的下面。同理,對(duì)其他菜單項(xiàng)也作如上的操作,插入相應(yīng)的層。把所有層的顯示屬性(vis)改為隱藏(Hidden)。
選擇表格的第一個(gè)單元,單擊窗口(Windows)→行為(Behaviors),彈出行為面板。按下“ ”添加行為Show-Hide layers,并將第一個(gè)層(Layer1)屬性改為顯示(Show),其他層的屬性改為隱藏(Hide)。接著在行為面板中編輯這個(gè)行為,將它的觸發(fā)事件(events)改為onMouseover。這樣,當(dāng)鼠標(biāo)移動(dòng)到第一個(gè)表格單元之上時(shí),第一個(gè)下拉菜單就會(huì)顯示出來(lái)。接著再添加一個(gè)行為Show-Hide layers,并將所有層的屬性改為隱藏。接著在行為面板中編輯這個(gè)行為,將它的觸發(fā)事件(events)改為onMouseout。這樣當(dāng)鼠標(biāo)從第一個(gè)表格單元之上移開(kāi)時(shí),第一個(gè)下拉菜單就會(huì)隱藏起來(lái)。對(duì)其他的菜單項(xiàng)重復(fù)上述操作。但要注重設(shè)置“菜單二”時(shí),第二層顯示,其他層隱藏;設(shè)置“菜單三”時(shí),第三層顯示,其他層隱藏;依此類(lèi)推下去。好了,做好了,按F12看看吧。
28. 輕松制作下載文件
用Dreamweaver其實(shí)很簡(jiǎn)單,把要讓瀏覽者下載的文件名寫(xiě)上,然后拖動(dòng)鼠標(biāo)選取這段文字,在文本的屬性面板上“Link”的屬性輸入框中寫(xiě)上文件名就行了。注重:若被下載的文件與該網(wǎng)頁(yè)不在同一目錄下,則文件名必須包含相對(duì)路徑,否則在下載時(shí)將提示找不到文件。
29. 利用Dreamweaver的書(shū)簽制作跳轉(zhuǎn)鏈接
利用Dreamweaver的書(shū)簽我們可以實(shí)現(xiàn)這個(gè)功能。具體方法是:將光標(biāo)移到你想跳轉(zhuǎn)到的地方,選擇菜單中的“插入(Insert)→書(shū)簽(Name Anchor)”,輸入書(shū)簽的名稱(chēng)。接下來(lái),在你想調(diào)用鏈接的鏈接目標(biāo)框中填入“#書(shū)簽名稱(chēng)”,這樣一個(gè)頁(yè)面內(nèi)的跳轉(zhuǎn)鏈接就做好了。在這里,假如我們?cè)跁?shū)簽名稱(chēng)前填入網(wǎng)頁(yè)的名稱(chēng),就會(huì)跳轉(zhuǎn)到其他頁(yè)面中的書(shū)簽處。 比如說(shuō)我們?cè)贚ink處填入“index.htm#top”,當(dāng)瀏覽者點(diǎn)擊這個(gè)鏈接時(shí)就會(huì)跳轉(zhuǎn)到index頁(yè)面中的top書(shū)簽處。
30. 去掉圖片和表格接觸地方的空隙
要使圖片和表格接觸的地方不留空隙,僅在表格屬性面板上把外框線(xiàn)(border)設(shè)為0是不行的,還需要在表格的屬性面板上把單元格的兩個(gè)屬性設(shè)為0(即cellspacing="0"和cellpadding="0")。
31. 用TracingImage幫助定位網(wǎng)頁(yè)中各元素的位置
TracingImage是Dreamweaver一個(gè)非常有效的功能,它答應(yīng)用戶(hù)在網(wǎng)頁(yè)中將原來(lái)的圖案設(shè)計(jì)作為輔助的背景。這么一來(lái),用戶(hù)就可以非常方便地定位文字、圖像、表格、層等網(wǎng)頁(yè)元素在該頁(yè)面中的位置了。TracingImage的具體使用是這樣的:首先使用各種繪圖軟件作出一個(gè)想象中的網(wǎng)頁(yè)排版格局圖,然后將此圖保存為網(wǎng)絡(luò)圖像格式(包括gif、jpg、jpeg和png)。用Dreamweaver打開(kāi)你所編輯的網(wǎng)頁(yè),在頁(yè)面的空白區(qū)單擊右鍵,選擇“Page Properties...”,然后在彈出的對(duì)話(huà)框中的Tracing Image項(xiàng)中輸入剛才創(chuàng)建的網(wǎng)頁(yè)排版格局圖所在位置。再在Image Transparen中設(shè)定TracingImage的透明度,OK。這樣你就可以在當(dāng)前網(wǎng)頁(yè)中方便地定位各個(gè)網(wǎng)頁(yè)元素的位置了。使用了TracingImage的網(wǎng)頁(yè)在用Dreamweaver編輯時(shí)不會(huì)再顯示背景圖案,但當(dāng)使用瀏覽器瀏覽時(shí)正好相反,TracingImage不見(jiàn)了,所見(jiàn)的就是經(jīng)過(guò)編輯的網(wǎng)頁(yè)(當(dāng)然能夠顯示背景圖案)。
32. 關(guān)于“Convert Table widths to Pixels”和“Convert Table widths to Percent”
- 用Dreamweaver在網(wǎng)頁(yè)中插入Flash按鈕
- 在Dreamweaver中編寫(xiě)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中編寫(xiě)CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁(yè)
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- 使用Dreamweaver 8 輕松制作漂亮的Flash像冊(cè)
- 玩轉(zhuǎn) Dreamweaver8.0:速記 CSS 屬性
- Dreamweaver MX進(jìn)階教程(一)可視化操作iframe
- 玩轉(zhuǎn)Dreamweaver 8.0之設(shè)置段落格式
- Dreamweaver MX 2004從零開(kāi)始
- 入門(mén):充分利用Dreamweaver8中的查找替換技巧
- 用Dreamweaver進(jìn)行數(shù)據(jù)庫(kù)操作
- DW MX 2004網(wǎng)頁(yè)中文亂碼問(wèn)題:嘗試解決
- Dreamweaver MX進(jìn)階教程:制作虛線(xiàn)
- Dreamweaver開(kāi)發(fā)ASP實(shí)例視頻教程建立數(shù)據(jù)庫(kù)
猜你也喜歡看這些
- Dreamweaver MX 2004 官方簡(jiǎn)體中文版教程
- Dreamweaver 8.0網(wǎng)頁(yè)設(shè)計(jì)
- Dreamweaver 8 完美網(wǎng)頁(yè)設(shè)計(jì)—CSS網(wǎng)頁(yè)設(shè)計(jì)篇
- 呂聰賢dreamweaver視頻教程下載
- 精通CSS+DIV網(wǎng)頁(yè)樣式與布局配套視頻教程
- Dreamweaver 8完美網(wǎng)頁(yè)設(shè)計(jì):商業(yè)網(wǎng)站篇
- Dreamweaver8中文版職業(yè)應(yīng)用視頻教程(打包下載)
- 新編Dreamweaver MX2004 中文版輕松入門(mén)視頻教程 2CD
- Dreamweaver+Flash+Photoshop網(wǎng)頁(yè)制作教程
- 挑戰(zhàn)DREAMWEAVER MX互動(dòng)網(wǎng)站百寶箱FOR ASP
- 相關(guān)鏈接:
- 教程說(shuō)明:
Dreamweaver教程-Dreamweaver網(wǎng)頁(yè)制作超級(jí)技巧36則(5)
。