在瀏覽網(wǎng)頁(yè)時(shí)，我們經(jīng)常會(huì)被整齊劃一的圖片布局所吸引。然而，實(shí)現(xiàn)這樣的布局需要一些技巧，其中使用div是一種非常有效的方法。本文將通過(guò)介紹一個(gè)具體的制作過(guò)程來(lái)幫助您掌握這種技巧。啟動(dòng)Dreamweave

在瀏覽網(wǎng)頁(yè)時(shí)，我們經(jīng)常會(huì)被整齊劃一的圖片布局所吸引。然而，實(shí)現(xiàn)這樣的布局需要一些技巧，其中使用div是一種非常有效的方法。本文將通過(guò)介紹一個(gè)具體的制作過(guò)程來(lái)幫助您掌握這種技巧。

啟動(dòng)Dreamweaver CS5

首先，打開(kāi)Dreamweaver CS5，創(chuàng)建一個(gè)新的HTML文件并進(jìn)入主界面。在lt;titlegt;無(wú)標(biāo)題文檔lt;/titlegt;標(biāo)簽中修改名稱(chēng)為lt;titlegt;div布局圖片效果lt;/titlegt;。

設(shè)置整體樣式

接下來(lái)，在lt;stylegt;標(biāo)簽中添加有關(guān)的CSS代碼來(lái)定義整個(gè)網(wǎng)頁(yè)的樣式。樣式的正確使用對(duì)于頁(yè)面的美觀程度至關(guān)重要。

創(chuàng)建外部框架

在lt;bodygt;標(biāo)簽中，輸入三個(gè)div標(biāo)簽，并分別給它們?cè)O(shè)置類(lèi)。其中最外層div的類(lèi)為“db”，而中間兩個(gè)div則分別為“zpxc1”和“zpxc”。此時(shí)，您可以看到基本的框架效果。

設(shè)計(jì)圖片布局

在成功設(shè)計(jì)好外部框架之后，接著就要開(kāi)始設(shè)計(jì)使用div布局圖片了。設(shè)計(jì)過(guò)程中，需要書(shū)寫(xiě)相應(yīng)的代碼，并設(shè)置div的尺寸大小和相關(guān)屬性，同時(shí)還需要為圖片設(shè)置相關(guān)屬性。

以下是代碼示例：

img{

margin:0px;

height:220px;

width:120px;

margin-top:10px;

border:1px solid 333;

}

{

float:left;

height:240px;

width:140px;

margin:6px;

padding:0px;

margin-top:10px;

filter:light;

background:333;

margin-left:0.8em;

}

.pic{

float:right;

}

在類(lèi)為“zpxc1”的div中，您可以創(chuàng)建四個(gè)新的div，并設(shè)置它們的img src屬性值，以便正確地鏈接圖片。

預(yù)覽效果并進(jìn)行修改

按下F12鍵可以在瀏覽器中進(jìn)行預(yù)覽效果。如果出現(xiàn)“是否將改動(dòng)保存到”提示信息，請(qǐng)直接點(diǎn)擊“是”，然后找到一個(gè)合適的位置進(jìn)行保存。

接下來(lái)，在類(lèi)為“zpxc”的div中輸入“作品展示”四個(gè)字，再次查看效果。如果不滿(mǎn)意，可以進(jìn)行修改。如果圖片過(guò)多，可以反復(fù)修改類(lèi)“zpxc1”和“db”的高度，直到達(dá)到理想效果。不斷重復(fù)以上步驟，可以建立多個(gè)圖片div。

最后，如果對(duì)“作品展示”四個(gè)字不滿(mǎn)意，可以使用圖片進(jìn)行替換，并反復(fù)測(cè)試網(wǎng)頁(yè)效果并進(jìn)行修改。完成后，按下F12鍵進(jìn)行預(yù)覽，并執(zhí)行“文件-另存為”命令，在彈出的對(duì)話(huà)框中輸入名稱(chēng)“div布局圖片”，找到一個(gè)合適的位置進(jìn)行保存即可。

總結(jié)

通過(guò)本文的介紹，您已經(jīng)學(xué)習(xí)了如何使用div實(shí)現(xiàn)網(wǎng)頁(yè)圖片布局效果。只要您掌握了這些技巧，就可以輕松設(shè)計(jì)出美觀整潔的網(wǎng)頁(yè)。