網(wǎng)頁(yè)設計中的新聞內容主要包含了新聞標題、新聞?wù)?、新聞發(fā)布相關(guān)信息、新聞內容以及相關(guān)討論等內容。在網(wǎng)頁(yè)設計時(shí)，在HTML代碼中相對應地采用可以相關(guān)聯(lián)的HTML標簽，使HTML代碼結構相對性地更具有語(yǔ)義化。

【操作步驟】

第1步，構建網(wǎng)頁(yè)結構。根據圖2.74的結構分析，可以將新聞內容頁(yè)的內容區域在HTML代碼中的結構表示如下：

<div class="news-box">

 <!--新聞標題S-->    <h1>上海市將公務(wù)員酒后駕車(chē)列入年度考核</h1>    

<!--新聞標題E-->    

<!--新聞相關(guān)信息S-->    

<div class="info"> 

<span class="date">2014-05-23 19:05:37</span> 

<span class="from">來(lái)源:<a href="#">新華網(wǎng)</a>

</span> 

<a href="#" class="comments_num">跟貼 23 條</a> 

<a href="#">手機看新聞</a> 

</div>    

<!--新聞相關(guān)信息E-->    

<!--新聞?wù)猄-->    

<div class="summary">        

<h2>新聞?wù)?lt;/h2>        

<p>核心提示：上海市日前規定，公務(wù)員酒后駕車(chē)等交通安全違法行為將列入年度考核。紀委給予交通違法人相應處分、誡勉談話(huà)或通報批評。</p>    

</div>    

< !-- 新聞?wù)?nbsp; E -->

 <!-- 新聞內容  S -->    

<div class="content">        

<h2>新聞內容：</h2>        

<p><strong>新華網(wǎng) 5 月 23 日電</strong> 上海市紀委、組織部、公安局、監察局日前聯(lián)合作出規定：機關(guān)、事業(yè)單位工作人員嚴重道路交通安全違法行為，向當事人所在單位抄告，并列入干部年度考核的依據之一。</p>        

<p>上海市紀委認定的嚴重道路交通安全違法行為主要有：無(wú)駕駛證駕駛機動(dòng)車(chē)輛，發(fā)生道路交通事故后逃逸、故意破壞現場(chǎng)或者冒名頂替，飲酒后或醉酒駕駛機動(dòng)車(chē)輛，因抗拒或阻礙道路交通管理而受到行政處罰，因交通安全違法行為受到行政拘留處罰。</p>        

<p>省略部分內容，信息來(lái)源于網(wǎng)絡(luò )！

<span class="editor">(本文來(lái)源：<a href="#">新華網(wǎng)</a> 作者：張和平)</span></p>    

</div>

<!--新聞內容E-->    

<!--新聞評論S-->    

<div class="comments"><a href="#">【已有<em>23</em>位網(wǎng)友發(fā)表了看法，點(diǎn)擊查看?！?lt;/a></div>    

<!--新聞評論E-->

</div>

為了能在網(wǎng)站建設時(shí)體現剛剛在分析結構時(shí)所說(shuō)的語(yǔ)義化，可以通過(guò)瀏覽器直接瀏覽未添加CSS樣式的網(wǎng)頁(yè)（即網(wǎng)絡(luò )中所說(shuō)的“裸奔”），這樣可以讓頁(yè)面結構、內容層次清晰，即使在無(wú)樣式下都能使他人了解頁(yè)面中哪些信息是代表著(zhù)什么含義的。

第2步，但最終一個(gè)頁(yè)面是需要通過(guò)CSS樣式的美化才能更漂亮，因此需要根據設計稿將頁(yè)面美化。

首先，將頁(yè)面中所有元素的內外補丁全部清零，并將.news-box這個(gè)容器設置寬度、文字大小、背景色等樣式。

* {/*清除頁(yè)面中所有元素的內外補丁*/    margin:0;

 padding:0;}

.news-box {/*設置新聞內容區域的寬度，并設置文字大小、顏色等樣式*/    

width:580px;    

padding:10px;    

font:normal 14px/1.5em simsun, Verdana,Lucida, Arial, Helvetica, sans-serif; /*simsun 字體就是宋體的英文寫(xiě)法*/        

color:#000000;    

border:1px solid #333333;    

background-color:#F6FAFD;}

第3步，根據設計稿所示，HTML結構中的“新聞?wù)焙汀靶侣剝热荨笔遣恍枰@示在頁(yè)面中，因此可以在CSS樣式中將其隱藏。

.news-box h2 { /*隱藏新聞內容區域中不需要的標題*/    display:none;}

第4步，整體的CSS樣式已經(jīng)差不多完成了，那么就可以開(kāi)始將其從頭到尾的修飾，先將新聞的標題h1標簽中的文字樣式修飾一下。

.news-box h1 {/*設置新聞標題的樣式高度為30px，寬度為默認值auto，并添加行高以及設置文字大小*/    

height:20px;    

padding:5px 0;    

line-height:26px;   

 overflow:hidden; /*行高比高度屬性值大，設置overflow:hidden; 隱藏超過(guò)部分*/    

font-size:20px;}

第5步，對“新聞相關(guān)信息”文字添加CSS樣式進(jìn)行美化。

.news-box .info {/*設置新聞相關(guān)信息樣式，添加外補丁，使其與內容信息產(chǎn)生間距*/    

height:20px;    

margin-bottom:15px;

  font-size:12px;}

第6步，“新聞?wù)辈糠直容^特殊，有屬于其自己的背景色以及邊框，不過(guò)不用擔心，可以利用CSS樣式來(lái)達到效果。

.news-box .summary { /*設置新聞?wù)獌热輩^域的樣式*/    

padding:5px;    

margin-bottom:10px;    

text-indent:2em; /*首行縮進(jìn)2個(gè)漢字的寬度*/    

border:1px solid #DCDDDD;    

background-color:#FFFFFF;}

第7步，“新聞內容”區域的文字信息都是存在段落p標簽中的，其中的strong加強標簽代表著(zhù)該處內容是“新聞內容”區域中需要強調的部分，將每個(gè)段落的行間距加大，并設置首行縮進(jìn)。

.news-box .content p {/*新聞內容區域的每個(gè)段落加大行間距（行高），并首行縮進(jìn)，段落與段落之間存在一點(diǎn)間距*/    

margin-bottom:10px;    

line-height:22px;    

text-indent:2em;}

第8步，最后一個(gè)“相關(guān)討論”區域的內容也要將其用CSS樣式美化，主要體現就是背景色以及上下兩邊的邊框樣式，還有高度的屬性。

.news-box .comments {/*設置討論區域上下邊框樣式為虛線(xiàn)的灰色，背景色為白色*/    

height:30px;    

padding:0 5px;    

line-height:30px; /*行高屬性值與高度屬性值相同，可將單行文字垂直居中顯示*/    

border-top:1px dashed #AFAFB0;    

border-bottom:1px dashed #AFAFB0;    

background-color:#FFFFFF;}

第9步，通過(guò)以上的CSS樣式定義，新聞內容頁(yè)面已經(jīng)基本上完成了。只能說(shuō)是基本上已經(jīng)完成，有部分細節內容還需要添加CSS樣式將其美化。部分細節主要體現在鏈接的文字顏色，以及部分特殊的文字鏈接樣式。

那么最后需要做的事情就是將文檔中文字鏈接的樣式美化一下。

a {/*設置頁(yè)面中所有a鏈接的顏色*/    

color:#1E50A2;}a:hover {/*設置頁(yè)面中所有a鏈接被觸發(fā)時(shí)的顏色以及下劃線(xiàn)消失*/    

color:#BA2636;    

text-decoration:none;}

a.comments_num {/*設置新聞相關(guān)信息處的跟帖信息鏈接的文字顏色*/    

color:#BA2636;}

.comments a em {/*設置新聞評論處的評論數據文字樣式非傾斜*/    

font-style:normal;}

第10步，細節部分修飾完畢，現在通過(guò)瀏覽器查看頁(yè)面效果。