設(shè)計(jì)背景：在制作網(wǎng)頁時(shí)，制作者經(jīng)常將網(wǎng)頁菜單置于網(wǎng)頁頂端，這樣當(dāng)瀏覽者瀏覽較長內(nèi)容的網(wǎng)頁時(shí)，假如想選擇其他菜單，就不得不回到網(wǎng)頁頂端才能選擇其他菜單。前天上QQ的時(shí)候忽然跳出了群的聊天窗口，里面有個(gè)人問在一個(gè)網(wǎng)頁的右端有一個(gè)QQ的面板，上面有好多QQ號(hào)碼而且可以實(shí)現(xiàn)點(diǎn)擊哪個(gè)可以在線聊天！并且該QQ面板可以和頁面一起滾動(dòng)，我看了看覺得這家網(wǎng)站的創(chuàng)意很是不錯(cuò)，于是就決定研究下怎么制作的？但是他的代碼太多了！我都懶的看了，于是想到了Dreamweaver，在這里給大家介紹一下制作方法。

　　效果說明：瀏覽頁面時(shí)，右上角的QQ面板跟隨著滾動(dòng)條的滾動(dòng)而滾動(dòng)。

　　創(chuàng)造這樣的效果很是麻煩，于是想起了插件在網(wǎng)上一找，呵呵，還真有！這里的插件是 Perisistent Layers 。點(diǎn)擊這里可以下載該插件下載之后解壓縮找到Perisistent Layers。

　　操作步驟

　　1、安裝擴(kuò)展插件。下載之后解壓縮，找到 Perisistent Layers 直接雙擊就可以了！或者先啟動(dòng)Dreamweaver之后使用“命令”菜單選擇“擴(kuò)展治理”來安裝也是可以的。假如不會(huì)安裝的話可以看以前的文章。

　　2、繪制描繪層。新建立一個(gè)HTML文件，選擇“布局”插入欄中的“描繪層”按鈕，在頁面右邊插入一個(gè)圖層，如下圖所示。

　　3、插入圖片。將光標(biāo)置于圖層內(nèi)，在圖層中插入圖片，如下圖所示。

　　提示：插入圖片后，可以對(duì)圖片進(jìn)行熱點(diǎn)區(qū)域的設(shè)置。我只是象征性的做了一個(gè)熱區(qū)，至于QQ在線咨詢的代碼是．．．大家應(yīng)該知道吧？在這里公布下，以后不要再問了。

http://wpa.qq.com/msgrd?V=1&Uin=76312395&Site=在線咨詢&Menu=no

　　把紅顏色的號(hào)碼改為你自己的就可以了。

　�。� 4 ）添加 Persistent Layers 行為。在文檔窗口的左下角單擊＜body＞標(biāo)簽選中整個(gè)頁面，打開行為面板，添加 Persistent Layers 行為，如下圖所示。

　�。� 5 ）設(shè)置基本參數(shù)。彈出“Persistent Layers”對(duì)話框后，在“Select Layer”中選擇要應(yīng)用行為的圖層 Layer1 ，然后選擇“Stick to the position Specified by the following options”命令，表示根據(jù)選項(xiàng)來確定層的位置。

　　6、設(shè)置圖層水平方向和垂直方向的位置參數(shù)，并設(shè)置圖層以動(dòng)畫形式滾動(dòng)，如圖 57-7 所示。設(shè)置完成后單擊“確定”按鈕。

　　7、此時(shí)在頁面編輯狀態(tài)下不能正確顯示圖層的位置。保存頁面并按 F12 鍵在瀏覽器中進(jìn)行預(yù)覽。假如覺得不合適可以回來繼續(xù)修改。