網頁設計中如何設計圖文展示欄目
之前通過示例分析過網頁設計中圖文排版的處理技巧，那么對于圖文列表信息的處理其實大同小異，不同的是圖文列表信息的表現方式是將列表內容以圖片的形式在頁面中體現，簡單理解就是圖片列表信息附帶簡短的文字說明。在圖中展示的內容主要有列表標題、圖片和圖片相關說明的文字。
【操作步驟】
第1步，啟動Dreamweaver，新建一個網頁，保存為index.html。
第2步，構建網頁結構。假設當我們在頁面制作時拿到了由設計師提供的設計稿中出現了這樣的一個圖文列表信息結構，能一目了然地看到該效果主次分明，結構清晰。
<div class="pic_list">
<h3>愛秀</h3>
<div class="content">
<ul>
<li><a href="#"><img src="images/1245043772194_7521.jpg" alt="美女個性搞怪自拍" />美女個性搞怪自拍</a></li>
<li><a href="#"><img src="images/1245043843485_8207.jpg" alt="絕對陽光的清純小妹" />絕對陽光的清純小妹</a></li>
<li><a href="#"><img src="images/1245134073454_9288.jpg" alt="漂亮美女的可愛外拍" />漂亮美女的可愛外拍</a></li>
<li><a href="#"><img src="images/1245134177473_9822.jpg" alt="可愛美女的藝術照" />可愛美女的藝術照</a></li>
<li><a href="#"><img src="images/1245200548148_5487.jpg" alt="漂亮美女嬌美自拍" />漂亮美女嬌美自拍</a></li>
<li><a href="#"><img src="images/1245201554383_4640.jpg" alt="清純迷人的黃毛丫頭" />清純迷人的黃毛丫頭</a></li> </ul>
</div>
</div>
對于在網頁設計時列表的內容已經講解的不少了，本例以如下所示結構編寫HTML列表結構代碼。
這樣的結構不僅在HTML代碼中能很好地將頁面結構層次體現，更可以方便后期通過CSS樣式對其的利用。圖文列表的排列方式最講究的一個知識點就是寬度屬性值的計算。橫向排列的列表，當整體的列表（有序列表ol或者無序列表ul）橫向空間不足以將所有列表橫向顯示時，瀏覽器會將列表換行顯示。這樣的情況只有在寬度計算正確時，才足夠將所有列表橫向排列顯示并且不會產生空間的浪費。
這種情況是必須要避免的，因此在網站建設時準確計算列表內容區(qū)域所需要的空間是有必要的。
我們將要分析例子中，每張圖片的寬度屬性值為134px，左右內補丁分別為3px，左右邊框分別為1px寬度的線條，并且圖片列表與圖片列表之間的間距為15px（即右外補丁為15px），根據盒模型的計算方式，最終列表li標簽的盒模型寬度值為1px+3px+134px+3px+1px+15px=157px，因此圖文列表區(qū)域總寬度值為157px×6=942px。
第3步，在<head>標簽內添加<styletype="text/css">標簽，定義一個內部樣式表，然后輸入下面樣式，定義圖文列表區(qū)域的相關區(qū)域樣式。
.pic_list .content {
width:942px;
height:150px;
overflow:hidden; /*設置圖文列表內容區(qū)域的寬度和高度，超過部分隱藏*/
padding:22px 0 0 15px; /*利用內補丁增加圖文列表內容區(qū)域與其他元素之間的間距*/}
.pic_list .content li {float:left;
width:142px;
margin-right:15px; /*列表li標簽設置浮動后，所有列表將根據盒模型的計算方式計算列表寬度，并且并排顯示*/ display:inline; /*設置浮動后并且增加了左右外補丁，IE6會產生雙倍間距的Bug，利用該屬性解決*/}
.pic-list .content作為圖文列表內容區(qū)域，增加相應的內補丁使其與整體之間有空間感，這個是視覺效果中必然會處理的一個問題。
.pic-list .content li因為具有浮動屬性，并且有左右外補丁中其中一個外補丁屬性，在IE6瀏覽器中會產生雙倍間距的Bug問題。而神奇的是添加display:inline可以解決該問題，并且不會對其他瀏覽器產生任何影響。
第4步，主要內容設置成功之后，就可以對圖文列表的整體效果做CSS樣式的修飾，例如圖文列表的背景和邊框以及圖文列表標題的高度、文字樣式和背景等。
.pic_list { width:960px; /*設置圖文列表整體的寬度*/ border:1px solid #D9E5F5; /*添加圖文列表的邊框*/ background:url(images/wrap.jpg) repeat-x 0 0; /*添加圖文列表整體的背景圖片*/}.pic_list * {/*重置圖文列表內部所有基本樣式*/ margin:0;
padding:0;
list-style:none;
font:normal 12px/1.5em "宋體", Verdana,Lucida, Arial, Helvetica, sans-serif;}.pic_list h3 { /*設置圖文列表的標題的高度、行高、文字樣式和背景圖片*/
height:34px;
line-height:34px;
font-size:14px;
text-indent:12px;
font-weight:bold;
color:#223A6D;
background:url(images/h3bg.jpg) no-repeat 0 0;}
第5步，需要調整內容則是對圖文列表信息細節(jié)以及用戶體驗的把握。例如圖片的邊框、背景和文字的顏色等，并且還要考慮當用戶在鼠標經過圖片時，為了能更好地體現視覺效果，給用戶一個全新的體驗，我們還要添加當鼠標經過圖片列表信息時圖片以及文字的樣式變化。
.pic_list .content li a { display:block; /*將內聯元素a標簽轉換為塊元素使其具備寬高屬性*/
width:142px; /*設置轉換為塊元素后的a標簽的寬度*/
text-align:center; /*文本居中顯示*/
text-decoration:none; /*文本下劃線*/
color:#333333; /*文本的顏色 */}
.pic_list .content li a img { display:block; /*當圖片設置為塊元素時，可以解決IE6中圖片底部幾個空白像素的bug*/
width:134px;
height:101px;
padding:3px; /*設置圖片的寬高屬性以及內補丁屬性*/ margin-bottom:8px; /*將圖片的底部外補丁設置為8px，使其與文字之間產生一定間距*/
border:1px solid #CCCCCC;
background-color:#FFFFFF; /*背景顏色將通過內補丁的空間顯示*/}
.pic_list .content li a:hover { text-decoration:underline;
color:#CC0000; /*當鼠標經過圖文列表時，文字有下劃線并且改變顏色*/}
.pic_list .content li a:hover img { background-color:#22407E; /*當鼠標經過圖文列表時，圖片的背景顏色改變*/}
第6步，設計完成，漂亮的圖文列表信息經過簡單的CSS樣式處理后就會完美地呈現出來。