網頁如何製作圖片的擠壓效果

　　在網頁中圖片的效果多種多樣，那你知道如何製作圖片的擠壓效果嗎，下面是小編給大家整理的一些有關網頁中製作圖片的擠壓效果的方法，希望對大家有幫助!

　　網頁中製作圖片的擠壓效果的方法

　　啟動dreamweaver cs5，執行檔案-新建命令，在彈出的新建文件對話方塊中選擇html，點選建立按鈕。

　　.在標題<title>中輸入文字內容為擠壓效果，接著在下面輸入程式碼<style <style type="text/css">

　　.tp{ ; ; ;}

　　#tp1{; ; ; ;}

　　</style>定義一種類。

　　在body中建立一個層div並設定class屬性為tp，接著在第一層div中新建四個div，id屬性設定為tp1，程式碼為

　　<div>

　　<div id="tp1"></div>

　　<div id="tp1"></div>

　　<div id="tp1"></div>

　　<div id="tp1"></div>

　　</div>

　　選擇第一div，執行插入-影象命令，在彈出的選擇影象原始檔對話方塊中找到圖片所存放的位置點選確定按鈕，將圖片匯入到層中。

　　選擇圖片，執行ctrl+f3組合鍵調出屬性視窗，在屬性視窗中設定圖片寬度為96%，高度為100%。

　　重複步驟4、5分別匯入另外三張圖片，並調整其大小，使整體佈局美觀。

　　選擇第一張圖片點選右邊的行為面板，在該面板中點選“+“號，從下拉選單中選擇效果-擠壓命令。

　　在彈出的擠壓對話方塊中選擇目標元素為div“top1”，然後接著點選確定按鈕，這時就為第一張圖片設定的擠壓效果。

　　重複步驟7、8，分別為剩下的三張圖片設定擠壓效果後，在設計面板中檢視自動生成程式碼的變化。 -;

　　儲存網頁，按f12鍵彈出“將改動儲存到”提示資訊，找到一個合適的位置點選是進行儲存即可，這時會在瀏覽器中展示剛才設定的內容。

　　測試效果，在瀏覽器中出現的介面中，點選任意一張圖片，檢視擠壓效果的變化。

　　END