本實例進一步鞏固網(wǎng)頁設(shè)計中圖文混排方法的使用，并把該方法運用到實際的網(wǎng)站制作中。示例介紹中國的傳統(tǒng)節(jié)日為題材，利用圖文混排的方法，實現(xiàn)頁面的圖文效果。
【操作步驟】
第1步，啟動Dreamweaver，新建文檔，保存為index.html。
第2步，構(gòu)建網(wǎng)頁的整體結(jié)構(gòu)。第一個<p>標(biāo)簽的內(nèi)容是網(wǎng)頁的首段，在首段中用<span>標(biāo)簽設(shè)置了首字下沉效果。然后是各個分標(biāo)題，每個分標(biāo)題都由兩個<p>標(biāo)簽、一個<img>標(biāo)簽組成，分別是分標(biāo)題中的標(biāo)題、圖片和段落內(nèi)容。具體代碼如下：
<body>
<p><span class="first">中</span>國的傳統(tǒng)節(jié)日形式多樣，內(nèi)容豐富，是我們中華民族悠久的歷史文化的一個組成部分?！?lt;/p>
<p class="title1">春節(jié)</p><img src="images/chunjie.jpg" class="pic1">
<p class="content">春節(jié)是我國一個古老的節(jié)日，也是全年最重要的一個節(jié)日，如何慶賀這個節(jié)日，在千百年的歷史發(fā)展中，形成了一些較為固定的風(fēng)俗習(xí)慣，有許多還相傳至今?！?lt;/p>
<p class="title2">清明節(jié)</p><img src="images/qingming.jpg" class="pic2"><p class="content">清明是我國的二十四節(jié)氣之一。由于二十四節(jié)氣比較客觀地反映了一年四季氣溫、降雨、物候等方面的變化，所以古代勞動人民用它安排農(nóng)事活動?！痘茨献?天文訓(xùn)》云:“春分后十五日，斗指乙，則清明風(fēng)至?！?nbsp; ……</p><p class="title1">中秋節(jié)</p><img src="images/zhongqiu.jpg" class="pic1">
<p class="content">每年農(nóng)歷八月十五日，是傳統(tǒng)的中秋佳節(jié)。這時是一年秋季的中期，所以被稱為中秋?！?/p>
</p>
</body>
第3步，規(guī)劃整個頁面的基本顯示屬性：為網(wǎng)頁選擇一個合適的背景顏色，設(shè)置<p>標(biāo)簽的字體大小，也就是所有段落的字體大小，并設(shè)置首字下沉效果。
<style type="text/css">body { background-color: #d8c7b4; /*頁面背景色*/ }p {
font-size: 12px; /*段落文字大小*/ }span.first { /*首字放大*/
font-size: 60px;
font-family: 黑體;
float: left;
font-weight: bold;
color: #59340a; /*首字顏色*/}</style>
第4步，考慮到網(wǎng)站建設(shè)時整體的圖文排版，采用一左一右的形式，所以圖文混排的CSS分為左右兩段，分別定義為img.pic1和img.pic2，不同的是一個在左邊一個在右邊。
img.pic1 { float: left; /*左側(cè)圖片混排*/
margin-right: 10px; /*圖片右端與文字的距離*/
margin-bottom: 5px; /*圖片底端與文字的距離*/}img.pic2 {
float: right; /*右側(cè)圖片文字的距離*/ margin-bottom: 5px;
}
第5步，設(shè)置正文的文字，文字本身不需要做太多調(diào)整，但是每一個段落的標(biāo)題同樣是分為左右兩側(cè)的，要根據(jù)圖片的位置做出變化。所以小標(biāo)題也和圖片一樣進行左右兩個CSS設(shè)置，分別為ti-tle1和title2。
.title1 {/*左側(cè)標(biāo)題*/
text-decoration: underline; /*下劃線*/
font-size: 18px;
font-weight: bold; /*粗體*/
text-align: left; /*左對齊*/
color: #59340a; /*標(biāo)題顏色*/}
.title2 {/*右側(cè)標(biāo)題*/
text-decoration: underline;
font-size: 18px;
font-weight: bold;
text-align: right;
color: #59340a;}p.content {/*正文內(nèi)容*/
line-height: 1.2em; /*正文行間距*/}
從代碼中可以看出，兩段標(biāo)題的代碼不同就在于文字的對齊方式，當(dāng)圖片應(yīng)用img.pic1而位于左側(cè)時，標(biāo)題則使用title1，也相應(yīng)地在左側(cè)。當(dāng)圖片應(yīng)用img.pic2而位于右側(cè)時，標(biāo)題則使用title2，也相應(yīng)地在右側(cè)。p.content設(shè)置了段落正文的樣式。
本例主要是通過圖文混排的技巧，使文字和圖片一左一右應(yīng)用兩種不同的對齊方式，采用兩組不同的CSS類樣式標(biāo)記，合理地將圖片和文字融為一體。
當(dāng)前文章標(biāo)題：網(wǎng)頁設(shè)計中的設(shè)計圖文混排
當(dāng)前URL：http://51zuanshi.com.cn/news/wzzz/3105.html
