教你如何用Dreamweaver制作特色分隔線_Dreamweaver教程
注:假如你的Dreamweaver MX 2004還沒有升級,就去官方升級吧!升級完之后就可以使用時間軸了!點(diǎn)擊這里下載吧(建議使用快車或其它下載工具下載)
網(wǎng)頁分隔線可以說是網(wǎng)頁中不可缺少的元素,它主要用于分隔網(wǎng)頁內(nèi)容,也可以用于裝飾網(wǎng)頁。
效果說明:在網(wǎng)頁中間會出現(xiàn)一條漂亮的分隔線,并且能夠不斷閃動,從而充分體現(xiàn)出網(wǎng)站的個性,如圖 1 所示。
創(chuàng)作思想:本實(shí)例使用層作為定位,然后在層中插入表格,在表格中插入圖片并在時間軸中分別添加樣式濾鏡效果。
操作步驟
( 1 )新建一個網(wǎng)頁文件,并在網(wǎng)頁中插入一個層,然后在層中插入一個 1 行 2 列的表格,如圖 2 所示。
( 2 ) 設(shè)置表格的間距,然后在表格的單元格中插入圖片,如圖 3 所示。
( 3 ) 設(shè)置時間軸。調(diào)出時間軸,在時間軸的第 5 幀處添加【改變屬性】行為,并設(shè)置層對象的屬性,如圖 4 所示。
( 4 ) 添加行為和改變屬性。在其他幀中分別添加行為,并根據(jù)需要改變屬性,在第 40 幀處添加轉(zhuǎn)到時間軸的第 1 幀行為,再勾選【自動播放】復(fù)選框,如圖 5 所示。
本圖代碼如下所述:
Glow(Color=red, Strength=1)
Glow(Color=red, Strength=2)
Glow(Color=red, Strength=3)
Glow(Color=red, Strength=4)
Glow(Color=red, Strength=3)
Glow(Color=red, Strength=2)
Glow(Color=red, Strength=1)
( 5 )保存網(wǎng)頁文件,然后在瀏覽器中打開該文件,就可以看到特色分隔線效果,本實(shí)例制作完成。分隔線在網(wǎng)頁上應(yīng)用非常之廣,而且變化萬千,讀者可以自己思考,做出獨(dú)特的有自己風(fēng)格的分隔線。
這個教程截圖不是太完整!希望大家能照著做出效果來!我試了幾次最后的原因是沒有選擇自動播放!
- 用Dreamweaver在網(wǎng)頁中插入Flash按鈕
- 在Dreamweaver中編寫CSS需要掌握的技巧
- Dreamweaver CS3代碼片斷功能面板的利用
- Dreamweaver CS3 的最新功能
- 用Dreamweaver建站如何設(shè)計(jì)CSS?
- Dreamweaver文字自動換行
- 探討Dreamweaver制作網(wǎng)頁時的空格
- 使用Dreamweaver制作網(wǎng)頁的20個技巧
- Dreamweaver MX 2004的PPT格式課件
- Dreamweaver技巧:運(yùn)用代碼片斷工具提高css開發(fā)效率
- 在DreamWeaver中編寫CSS的一些技巧
- 使用Dreamweaver模板批量制作網(wǎng)頁
Dreamweaver教程Rss訂閱網(wǎng)站制作教程搜索
Dreamweaver教程推薦
- dreamweaver套用源格式,將混亂無序的代碼變得整潔
- Dreamweaver 8中文版圖文快報
- 用Dreamweaver MX創(chuàng)造網(wǎng)頁鼠標(biāo)樣式
- 通過Dreamweaver學(xué)習(xí)了解CSS
- 數(shù)據(jù)庫的設(shè)計(jì)和連接-Dreamweaver構(gòu)建Blog
- 在Dreamweaver8中創(chuàng)建代碼片段
- Dreamweaver 4.0使用技巧集錦
- 新手入門:利用DW8掌握網(wǎng)頁代碼基本格式
- Dreamweaver解決網(wǎng)頁制作中的空格問題
- Dreamweaver 入門:安裝 Dreamweaver8
猜你也喜歡看這些
- 網(wǎng)頁制作基礎(chǔ)教程
- Dreamweaver+Flash+Photoshop網(wǎng)頁制作教程
- 精通CSS+DIV網(wǎng)頁樣式與布局配套視頻教程
- 中文版Dreamweaver 8入門必練
- 學(xué)通JavaScript視頻教程下載
- 巧學(xué)巧用Dreamweaver制作網(wǎng)頁習(xí)題精解
- 通過Dreamweaver CS3學(xué)習(xí)HTML+DIV+CSS 光盤/教程
- DreamweaverMX2004互動網(wǎng)站百寶箱for PHP
- Dreamweaver 8中文版職業(yè)應(yīng)用視頻教程
- Dreamweaver CS4 中文版完全自學(xué)教程
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-教你如何用Dreamweaver制作特色分隔線。