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

　　效果說明：瀏覽頁面時，右上角的qq面板跟隨著滾動條的滾動而滾動。

　　創造這樣的效果很是麻煩，于是想起了插件在網上一找，呵呵，還真有！這里的插件是 perisistent layers 。點擊這里可以下載該插件下載之后解壓縮找到perisistent layers。

　　操作步驟

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

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

　　3、插入圖片。將光標置于圖層內，在圖層中插入圖片，如下圖所示。

　　提示：插入圖片后，可以對圖片進行熱點區域的設置。我只是象征性的做了一個熱區，至于qq在線咨詢的代碼是．．．大家應該知道吧？在這里公布下，以后不要再問了。

http://wpa.qq.com/msgrd?v=1&uin=76312395&site=在線咨詢&menu=no

　　把紅顏色的號碼改為你自己的就可以了。

　?。?4 ）添加 persistent layers 行為。在文檔窗口的左下角單擊＜body＞標簽選中整個頁面，打開行為面板，添加 persistent layers 行為，如下圖所示。

　?。?5 ）設置基本參數。彈出“persistent layers”對話框后，在“select layer”中選擇要應用行為的圖層 layer1 ，然后選擇“stick to the position specified by the following options”命令，表示根據選項來確定層的位置。

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

　　7、此時在頁面編輯狀態下不能正確顯示圖層的位置。保存頁面并按 f12 鍵在瀏覽器中進行預覽。假如覺得不合適可以回來繼續修改。