網頁設計中的新聞內容主要包含了新聞標題、新聞摘要、新聞發布相關信息、新聞內容以及相關討論等內容。在網頁設計時，在HTML代碼中相對應地采用可以相關聯的HTML標簽，使HTML代碼結構相對性地更具有語義化。

【操作步驟】

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

<div class="news-box">

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

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

<!--新聞相關信息S-->    

<div class="info"> 

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

<span class="from">來源:<a href="#">新華網</a>

</span> 

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

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

</div>    

<!--新聞相關信息E-->    

<!--新聞摘要S-->    

<div class="summary">        

<h2>新聞摘要：</h2>        

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

</div>    

< !-- 新聞摘要  E -->

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

<div class="content">        

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

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

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

<p>省略部分內容，信息來源于網絡！

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

</div>

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

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

<div class="comments"><a href="#">【已有<em>23</em>位網友發表了看法，點擊查看?！?lt;/a></div>    

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

</div>

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

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

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

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

 padding:0;}

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

width:580px;    

padding:10px;    

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

color:#000000;    

border:1px solid #333333;    

background-color:#F6FAFD;}

第3步，根據設計稿所示，HTML結構中的“新聞摘要”和“新聞內容”是不需要顯示在頁面中，因此可以在CSS樣式中將其隱藏。

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

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

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

height:20px;    

padding:5px 0;    

line-height:26px;   

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

font-size:20px;}

第5步，對“新聞相關信息”文字添加CSS樣式進行美化。

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

height:20px;    

margin-bottom:15px;

  font-size:12px;}

第6步，“新聞摘要”部分比較特殊，有屬于其自己的背景色以及邊框，不過不用擔心，可以利用CSS樣式來達到效果。

.news-box .summary { /*設置新聞摘要內容區域的樣式*/    

padding:5px;    

margin-bottom:10px;    

text-indent:2em; /*首行縮進2個漢字的寬度*/    

border:1px solid #DCDDDD;    

background-color:#FFFFFF;}

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

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

margin-bottom:10px;    

line-height:22px;    

text-indent:2em;}

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

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

height:30px;    

padding:0 5px;    

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

border-top:1px dashed #AFAFB0;    

border-bottom:1px dashed #AFAFB0;    

background-color:#FFFFFF;}

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

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

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

color:#1E50A2;}a:hover {/*設置頁面中所有a鏈接被觸發時的顏色以及下劃線消失*/    

color:#BA2636;    

text-decoration:none;}

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

color:#BA2636;}

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

font-style:normal;}

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