在網頁中圖片的效果多種多樣，今天本人在此製作一種圖片的擠壓效果，同時將製作過程和截圖分享出來，供大家參考使用。本效果當點選圖片時圖片將從左上角消失，希望對大家有所幫助和啟發。
工具/原料
dreamweaver cs5
方法/步驟
啟動dreamweaver cs5，執行檔案-新建命令，在彈出的新建文件對話方塊中選擇html，點選建立按鈕。
.在標題
在body中建立一個層div並設定class屬性為tp，接著在第一層div中新建四個div，id屬性設定為tp1，程式碼為
選擇第一div，執行插入-影象命令，在彈出的選擇影象原始檔對話方塊中找到圖片所存放的位置點選確定按鈕，將圖片匯入到層中。
選擇圖片，執行ctrl+f3組合鍵調出屬性視窗，在屬性視窗中設定圖片寬度為96%，高度為100%。
重複步驟4、5分別匯入另外三張圖片，並調整其大小，使整體佈局美觀。
選擇第一張圖片點選右邊的行為面板，在該面板中點選“+“號，從下拉選單中選擇效果-擠壓命令。
在彈出的擠壓對話方塊中選擇目標元素為div“top1”，然後接著點選確定按鈕，這時就為第一張圖片設定的擠壓效果。
重複步驟7、8，分別為剩下的三張圖片設定擠壓效果後，在設計面板中檢視自動生成程式碼的變化。 -language:ZH-CN; mso-bidi-language:AR-SA'>擠壓命令。
儲存網頁，按f12鍵彈出“將改動儲存到”提示資訊，找到一個合適的位置點選是進行儲存即可，這時會在瀏覽器中展示剛才設定的內容。
測試效果，在瀏覽器中出現的介面中，點選任意一張圖片，檢視擠壓效果的變化。
