dreamweaver 怎么在網(wǎng)頁中使用div展示圖片效果?

發(fā)布時間：2016-11-01 09:18:24 作者：佚名

dreamweaver 怎么在網(wǎng)頁中使用div展示圖片效果？想給網(wǎng)站中插入一些圖片，怎么使用div展示圖片呢？下面我們就來看看詳細(xì)的設(shè)置方法，需要的朋友可以參考下

在網(wǎng)頁制作過程中，圖片的布局直接影響到網(wǎng)頁的整體效果，那么如何使圖片布局整齊劃一呢？其實使用div就可以做到，現(xiàn)在就自己制作的過程跟大家交流一下，同時分享制作的步驟和截圖，希望對你有所幫助。

Adobe Dreamweaver CS5 簡體中文綠色版

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

2、在標(biāo)簽<title>無標(biāo)題文檔</title>中修改名稱為<title>div布局圖片效果</title>。

3、在<title>標(biāo)簽下方輸入<style>相關(guān)的代碼，定義網(wǎng)頁的整體樣式，樣式直接影響著網(wǎng)頁的美觀程度。

4、接著在<body>中輸入div標(biāo)簽三個，并分別設(shè)置他們所屬于的類，最外邊的div設(shè)置類為db，中間兩個分別為zpxc1和zpxc，在下方就會看到基本的框架效果。

5、外部的框架設(shè)計好之后，接著設(shè)計使用div布局圖片，書寫相應(yīng)的代碼，設(shè)置div的尺寸大小和相關(guān)屬性，同時設(shè)計圖片的相關(guān)屬性。

代碼為：

div.pt img{margin:0px; height:220px; width:120px; margin-top:10px; border: 1px solid #333;}

div.pt{float:left; height:240px; width:140px; margin:6px; padding:0px; margin-top:10px; filter:light; background:#333; margin-left:0.8em;}

.pic{ float:right;}

6、在類為zpxc1的div中建立新的四個div，并設(shè)置img的 src屬性值，對圖片進(jìn)行正確的鏈接。

7、按f12進(jìn)行在瀏覽器中進(jìn)行預(yù)覽效果，出現(xiàn)提醒信息“是否將改動保存到”，直接點擊是，找一個合適的位置進(jìn)行保存。

8、接著在類為zpxc的div中輸入“作品展示”四個字，再次才看效果，如果不合適可進(jìn)行再次修改。

9、如果圖片過多，可以修改類zpxc1和db的高度，反復(fù)修改直至合適為止，重復(fù)步驟6、7采用同樣的方法建立多個圖片div。

10、如果對“作品展示”四個字不滿意的話，可以使用圖片進(jìn)行替換，達(dá)到滿意為止，再次按f12進(jìn)行在瀏覽器中進(jìn)行查看效果，

11、執(zhí)行文件-另存為命令，在彈出的對話框中輸入名稱為“div布局圖片”，找到一個合適的位置進(jìn)行保存即可。

相關(guān)推薦：

dreamweaver中怎么將文字放到圖片上?

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