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