Dreamweaver, 網頁設計

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

梅干 2008/12/17
  浮動圖片算是相當實用的範例,雖然不是經常的被使用到,但每當要用時,時常是要找找沒有,不找快快的感覺,為了防止這種慘痛的事再度發生,特地製作成教學文件,以防日後使用,此範例不但符合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 預瀏結果。


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