[DW]符合網頁標準化的浮動圖片

　　浮動圖片算是相當實用的範例，雖然不是經常的被使用到，但每當要用時，時常是要找找沒有，不找快快的感覺，為了防止這種慘痛的事再度發生，特地製作成教學文件，以防日後使用，此範例不但符合W3C網頁標準化，且搭配Dreamweaver的使用，更能在最短的時間完成浮動圖片的效果。

---

Step1
先利用Dreamweaver的繪製圖層，任意拖拉出一個新圖層，並於新圖層內插入圖片。

---

Step2
開啟 圖層控制面板 ，將原本的 Layer1 更名為 div1 。

---

Step3
切回 CSS樣式控制面板 ， 分別將定位屬性中的 left 、 top 的值清空。

---

Step4
切換到 程式碼模式 ， 將下列的程式碼拷貝到 的上方，如圖所示。

貼在</body>上：
<Script language="javascript">
if (window.screen.availWidth>1200) {　　
　x=800; //靠右X軸坐標 　　
　x2=10; //靠左X軸坐標 　　
　y=50;
}else if (window.screen.availWidth>1000) {
　x=800; //靠右X軸坐標
　x2=10; //靠左X軸坐標
　y=30;
}else if (window.screen.availWidth<1000) {
　x=900; //靠右X軸坐標
　x2=10; //靠左X軸坐標
　y=0;
}else {
　x=900; //靠右X軸坐標
　x2=10; //靠左X軸坐標 y=70;
}
　div_y=0; distance=0;
　//document.all[‘div1’].style.left=x+220; // <–靠右
　document.getElementById( "div1").style.left=x2; // <–靠左
function stay(){ 　　
　var ny;　　
　ny= y+document.documentElement.scrollTop;
　distance=ny-div_y; if(div_y!=ny){
　div_y+=(distance/10);
}
　//document.all[‘div1’].style.top=div_y; // <—靠右
　document.getElementById("div1").style.top=div_y-10; // <—靠左
}
　setInterval(‘stay()’ , 1); //<— 啟動
</Script>

---

Step5
儲存檔案並按 F12 預瀏結果。

---

[ 範例預覽 ] 　 [ 範例下載 ]