dreamweaver cs5怎么給網(wǎng)頁制作圖片的擠壓效果?
我要評論在網(wǎng)頁中圖片的效果多種多樣，今天本人在此制作一種圖片的擠壓效果，同時將制作過程和截圖分享出來，供大家參考使用。本效果當(dāng)點擊圖片時圖片將從左上角消失，希望對大家有所幫助和啟發(fā)。
1、啟動dreamweaver cs5，執(zhí)行文件-新建命令，在彈出的新建文檔對話框中選擇html，點擊創(chuàng)建按鈕。
2、在標題<title>中輸入文字內(nèi)容為擠壓效果，接著在下面輸入代碼
<style <style type="text/css">
.tp{ width:55%; margin:auto; height:430px;}
#tp1{width:48%;height:200px; float:left; margin-left:10px; margin-top:10px;}
</style>定義一種類。
3、在body中創(chuàng)建一個層div并設(shè)置class屬性為tp，接著在第一層div中新建四個div，id屬性設(shè)置為tp1，代碼為
<div>
<div id="tp1"></div>
<div id="tp1"></div>
<div id="tp1"></div>
<div id="tp1"></div>
</div>
4、選擇第一div，執(zhí)行插入-圖像命令，在彈出的選擇圖像源文件對話框中找到圖片所存放的位置點擊確定按鈕，將圖片導(dǎo)入到層中。
5、選擇圖片，執(zhí)行ctrl+f3組合鍵調(diào)出屬性窗口，在屬性窗口中設(shè)置圖片寬度為96%，高度為100%。
6、重復(fù)步驟4、5分別導(dǎo)入另外三張圖片，并調(diào)整其大小，使整體布局美觀。
7、選擇第一張圖片點擊右邊的行為面板，在該面板中點擊“+“號，從下拉菜單中選擇效果-擠壓命令。
8、在彈出的擠壓對話框中選擇目標元素為div“top1”，然后接著點擊確定按鈕，這時就為第一張圖片設(shè)置的擠壓效果。
9、重復(fù)步驟7、8，分別為剩下的三張圖片設(shè)置擠壓效果后，在設(shè)計面板中查看自動生成代碼的變化。 -language:ZH-CN; mso-bidi-language:AR-SA'>擠壓命令。
10、保存網(wǎng)頁，按f12鍵彈出“將改動保存到”提示信息，找到一個合適的位置點擊是進行保存即可，這時會在瀏覽器中展示剛才設(shè)置的內(nèi)容。
11、測試效果，在瀏覽器中出現(xiàn)的界面中，點擊任意一張圖片，查看擠壓效果的變化。
相關(guān)推薦：
dreamweaver中怎么交互圖像? dw制作鼠標經(jīng)過圖像換圖的教程
相關(guān)文章
- dreamweaver怎么做一個簡單的網(wǎng)站？想做一個簡單的網(wǎng)站，該怎么制作呢？今天我們就來卡看dreamweaver制作網(wǎng)站的一個步驟，感興趣的朋友可以進來參考一下，需要的朋友可以參2016-05-16
Dreamweaver設(shè)置頁面屬性后采用HTML格式怎么辦?
Dreamweaver設(shè)置頁面屬性后采用HTML格式怎么辦？用Dreamweaver設(shè)計了網(wǎng)頁，設(shè)置頁面屬性以后，本來想用css格式的，現(xiàn)在變成了HTML格式，該怎么辦呢？下面我們來看看詳細的2016-04-27- dreamweaver中怎么將文字放到圖片上？dreamweaver中如果想讓背景圖片上帶一些文字，比較有意境，該怎么做呢？下面我們就來看看dw在圖片上寫文字的教程，需要的朋友可以參考2016-04-22
Dreamweaver CS6制作一個新聞網(wǎng)頁首頁的實例教程
Dreamweaver CS6制作網(wǎng)頁很方便，為了方便學(xué)習(xí)我們我們舉了一個實際的例子，使用Dreamweaver CS6做了一個簡單的網(wǎng)頁，非常簡單，適合新手學(xué)習(xí)，需要的朋友可以參考2016-04-20怎么格式化html代碼? Dreamweaver格式化html代碼的技巧
怎么格式化html代碼？Dreamweaver編輯網(wǎng)頁的時候，發(fā)現(xiàn)代碼格式很亂，看起來很費勁，該怎么一鍵格式化呢？下面我們就來看看Dreamweaver格式化html代碼的技巧，需要的朋友可2016-03-31Dreamweaver怎么進行批量文件搜索指定內(nèi)容?
Dreamweaver怎么進行批量文件搜索指定內(nèi)容？Dreamweaver中的文件很多，想要查找文件很不容易，該怎么才能快速的進行批量查找文件的？下面我們來看看Dreamweaver文本查找功2016-03-30Dreamweaver中怎么讓html網(wǎng)頁中的table邊框細線顯示?
Dreamweaver中怎么讓html網(wǎng)頁中的table邊框細線顯示？Dreamweaver中插入表格默認是寬邊框的，看上去很難看，該怎么將邊框設(shè)置成細線呢？請看下文詳細介紹，需要的朋友可以2016-03-10Dreamweaver怎么添加文本?怎么設(shè)置文本?
文本行為，就是網(wǎng)頁中的文本有行為，用的最多的又狀態(tài)欄文本和文本域文本，尤其是文本域文本是最常用到的，那么Dreamweaver怎么添加文本?怎么設(shè)置文本？下面小編就為大家詳2016-03-07- 這篇教程主要是向腳本之家的朋友分享Dreamweaver瀏覽器測試方法，教程真的很不錯，很值得大家學(xué)習(xí)，推薦過來，一起來學(xué)習(xí)吧2016-03-06
Dreamweaver編輯網(wǎng)頁預(yù)覽的時候顯示亂碼該怎么辦?
Dreamweaver編輯網(wǎng)頁預(yù)覽的時候顯示亂碼該怎么辦？Dreamweaver做網(wǎng)站的時候，網(wǎng)頁出現(xiàn)了亂碼，無論是預(yù)覽還是發(fā)布出來都是亂碼，出現(xiàn)這個狀況我們需要在網(wǎng)頁編碼里面加上聲2016-03-03