dreamweaver cs5怎么給網(wǎng)頁制作圖片的擠壓效果?

發(fā)布時(shí)間：2016-10-24 11:31:16 作者：佚名

dreamweaver cs5怎么給網(wǎng)頁制作圖片的擠壓效果？想使用dw給網(wǎng)頁制作圖片顯示出來是擠壓效果的樣式，該怎么設(shè)計(jì)呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下

在網(wǎng)頁中圖片的效果多種多樣，今天本人在此制作一種圖片的擠壓效果，同時(shí)將制作過程和截圖分享出來，供大家參考使用。本效果當(dāng)點(diǎn)擊圖片時(shí)圖片將從左上角消失，希望對(duì)大家有所幫助和啟發(fā)。

Adobe Dreamweaver CS5 簡(jiǎn)體中文綠色版

1、啟動(dòng)dreamweaver cs5，執(zhí)行文件-新建命令，在彈出的新建文檔對(duì)話框中選擇html，點(diǎn)擊創(chuàng)建按鈕。

2、在標(biāo)題<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)建一個(gè)層div并設(shè)置class屬性為tp，接著在第一層div中新建四個(gè)div，id屬性設(shè)置為tp1，代碼為

<div>

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

</div>

4、選擇第一div，執(zhí)行插入-圖像命令，在彈出的選擇圖像源文件對(duì)話框中找到圖片所存放的位置點(diǎn)擊確定按鈕，將圖片導(dǎo)入到層中。

5、選擇圖片，執(zhí)行ctrl+f3組合鍵調(diào)出屬性窗口，在屬性窗口中設(shè)置圖片寬度為96%，高度為100%。

6、重復(fù)步驟4、5分別導(dǎo)入另外三張圖片，并調(diào)整其大小，使整體布局美觀。

7、選擇第一張圖片點(diǎn)擊右邊的行為面板，在該面板中點(diǎn)擊“+“號(hào)，從下拉菜單中選擇效果-擠壓命令。

8、在彈出的擠壓對(duì)話框中選擇目標(biāo)元素為div“top1”，然后接著點(diǎn)擊確定按鈕，這時(shí)就為第一張圖片設(shè)置的擠壓效果。

9、重復(fù)步驟7、8，分別為剩下的三張圖片設(shè)置擠壓效果后，在設(shè)計(jì)面板中查看自動(dòng)生成代碼的變化。 -language:ZH-CN; mso-bidi-language:AR-SA'>擠壓命令。

10、保存網(wǎng)頁，按f12鍵彈出“將改動(dòng)保存到”提示信息，找到一個(gè)合適的位置點(diǎn)擊是進(jìn)行保存即可，這時(shí)會(huì)在瀏覽器中展示剛才設(shè)置的內(nèi)容。

11、測(cè)試效果，在瀏覽器中出現(xiàn)的界面中，點(diǎn)擊任意一張圖片，查看擠壓效果的變化。

相關(guān)推薦：

DW怎么設(shè)置滾動(dòng)字幕?

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片