Dreamweaver實現(xiàn)網(wǎng)頁滾動的QQ在線咨詢功能_Dreamweaver教程
設(shè)計背景:在制作網(wǎng)頁時,制作者經(jīng)常將網(wǎng)頁菜單置于網(wǎng)頁頂端,這樣當(dāng)瀏覽者瀏覽較長內(nèi)容的網(wǎng)頁時,假如想選擇其他菜單,就不得不回到網(wǎng)頁頂端才能選擇其他菜單。前天上QQ的時候忽然跳出了群的聊天窗口,里面有個人問在一個網(wǎng)頁的右端有一個QQ的面板,上面有好多QQ號碼而且可以實現(xiàn)點擊哪個可以在線聊天!并且該QQ面板可以和頁面一起滾動,我看了看覺得這家網(wǎng)站的創(chuàng)意很是不錯,于是就決定研究下怎么制作的?但是他的代碼太多了!我都懶的看了,于是想到了Dreamweaver,在這里給大家介紹一下制作方法。
效果說明:瀏覽頁面時,右上角的QQ面板跟隨著滾動條的滾動而滾動。
創(chuàng)造這樣的效果很是麻煩,于是想起了插件在網(wǎng)上一找,呵呵,還真有!這里的插件是 Perisistent Layers 。點擊這里可以下載該插件下載之后解壓縮找到Perisistent Layers。
操作步驟
1、安裝擴展插件。下載之后解壓縮,找到 Perisistent Layers 直接雙擊就可以了!或者先啟動Dreamweaver之后使用“命令”菜單選擇“擴展治理”來安裝也是可以的。假如不會安裝的話可以看以前的文章。
2、繪制描繪層。新建立一個HTML文件,選擇“布局”插入欄中的“描繪層”按鈕,在頁面右邊插入一個圖層,如下圖所示。
3、插入圖片。將光標(biāo)置于圖層內(nèi),在圖層中插入圖片,如下圖所示。
提示:插入圖片后,可以對圖片進行熱點區(qū)域的設(shè)置。我只是象征性的做了一個熱區(qū),至于QQ在線咨詢的代碼是...大家應(yīng)該知道吧?在這里公布下,以后不要再問了。
http://wpa.qq.com/msgrd?V=1&Uin=76312395&Site=在線咨詢&Menu=no
把紅顏色的號碼改為你自己的就可以了。
( 4 )添加 Persistent Layers 行為。在文檔窗口的左下角單擊<body>標(biāo)簽選中整個頁面,打開行為面板,添加 Persistent Layers 行為,如下圖所示。
( 5 )設(shè)置基本參數(shù)。彈出“Persistent Layers”對話框后,在“Select Layer”中選擇要應(yīng)用行為的圖層 Layer1 ,然后選擇“Stick to the position Specified by the following options”命令,表示根據(jù)選項來確定層的位置。
6、設(shè)置圖層水平方向和垂直方向的位置參數(shù),并設(shè)置圖層以動畫形式滾動,如圖 57-7 所示。設(shè)置完成后單擊“確定”按鈕。
7、此時在頁面編輯狀態(tài)下不能正確顯示圖層的位置。保存頁面并按 F12 鍵在瀏覽器中進行預(yù)覽。假如覺得不合適可以回來繼續(xù)修改。
- 用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 完美網(wǎng)站建設(shè)從入門到精通
- Dreamweaver CS4 中文版完全自學(xué)教程
- 中文版Dreamweaver 8入門必練
- 精通Javascript+jQuery
- Dreamweaver 8 完美網(wǎng)頁設(shè)計—CSS網(wǎng)頁設(shè)計篇
- 巧學(xué)巧用Dreamweaver制作網(wǎng)頁習(xí)題精解
- Dreamweaver網(wǎng)頁設(shè)計與制作完全手冊
- Dreamweaver+Flash+Photoshop網(wǎng)頁制作教程
- Dreamweaver 8+ASP構(gòu)造動態(tài)網(wǎng)站實例與操作
- 網(wǎng)站重構(gòu)&web標(biāo)準(zhǔn)設(shè)計教程
- 相關(guān)鏈接:
- 教程說明:
Dreamweaver教程-Dreamweaver實現(xiàn)網(wǎng)頁滾動的QQ在線咨詢功能。