網(wǎng)頁設(shè)計(jì)中的設(shè)計(jì)圖文混排

本實(shí)例進(jìn)一步鞏固網(wǎng)頁設(shè)計(jì)中圖文混排方法的使用,并把該方法運(yùn)用到實(shí)際的網(wǎng)站制作中。示例介紹中國(guó)的傳統(tǒng)節(jié)日為題材,利用圖文混排的方法,實(shí)現(xiàn)頁面的圖文效果。

【操作步驟】

第1步,啟動(dòng)Dreamweaver,新建文檔,保存為index.html。

第2步,構(gòu)建網(wǎng)頁的整體結(jié)構(gòu)。第一個(gè)<p>標(biāo)簽的內(nèi)容是網(wǎng)頁的首段,在首段中用<span>標(biāo)簽設(shè)置了首字下沉效果。然后是各個(gè)分標(biāo)題,每個(gè)分標(biāo)題都由兩個(gè)<p>標(biāo)簽、一個(gè)<img>標(biāo)簽組成,分別是分標(biāo)題中的標(biāo)題、圖片和段落內(nèi)容。具體代碼如下:

<body>

<p><span  class="first">中</span>國(guó)的傳統(tǒng)節(jié)日形式多樣,內(nèi)容豐富,是我們中華民族悠久的歷史文化的一個(gè)組成部分?!?lt;/p>

<p class="title1">春節(jié)</p><img src="images/chunjie.jpg" class="pic1">

<p  class="content">春節(jié)是我國(guó)一個(gè)古老的節(jié)日,也是全年最重要的一個(gè)節(jié)日,如何慶賀這個(gè)節(jié)日,在千百年的歷史發(fā)展中,形成了一些較為固定的風(fēng)俗習(xí)慣,有許多還相傳至今?!?lt;/p>

<p class="title2">清明節(jié)</p><img src="images/qingming.jpg" class="pic2"><p class="content">清明是我國(guó)的二十四節(jié)氣之一。由于二十四節(jié)氣比較客觀地反映了一年四季氣溫、降雨、物候等方面的變化,所以古代勞動(dòng)人民用它安排農(nóng)事活動(dò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é)。這時(shí)是一年秋季的中期,所以被稱為中秋?!?/p>

</p>

</body>

第3步,規(guī)劃整個(gè)頁面的基本顯示屬性:為網(wǎng)頁選擇一個(gè)合適的背景顏色,設(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è)時(shí)整體的圖文排版,采用一左一右的形式,所以圖文混排的CSS分為左右兩段,分別定義為img.pic1和img.pic2,不同的是一個(gè)在左邊一個(gè)在右邊。

img.pic1 {    float: left;                  /*左側(cè)圖片混排*/    

margin-right: 10px;           /*圖片右端與文字的距離*/    

margin-bottom: 5px;           /*圖片底端與文字的距離*/}img.pic2 {    

float: right;                 /*右側(cè)圖片文字的距離*/    margin-bottom: 5px;

}

第5步,設(shè)置正文的文字,文字本身不需要做太多調(diào)整,但是每一個(gè)段落的標(biāo)題同樣是分為左右兩側(cè)的,要根據(jù)圖片的位置做出變化。所以小標(biāo)題也和圖片一樣進(jìn)行左右兩個(gè)CSS設(shè)置,分別為ti-tle1和title2。

.title1 {/*左側(cè)標(biāo)題*/    

text-decoration: underline;  /*下劃線*/    

font-size: 18px;    

font-weight: bold;           /*粗體*/    

text-align: left;            /*左對(duì)齊*/

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)題的代碼不同就在于文字的對(duì)齊方式,當(dāng)圖片應(yīng)用img.pic1而位于左側(cè)時(shí),標(biāo)題則使用title1,也相應(yīng)地在左側(cè)。當(dāng)圖片應(yīng)用img.pic2而位于右側(cè)時(shí),標(biāo)題則使用title2,也相應(yīng)地在右側(cè)。p.content設(shè)置了段落正文的樣式。

本例主要是通過圖文混排的技巧,使文字和圖片一左一右應(yīng)用兩種不同的對(duì)齊方式,采用兩組不同的CSS類樣式標(biāo)記,合理地將圖片和文字融為一體。

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))