网页设计中的新闻内容主要包含了新闻标题、新闻摘要、新闻发布相关信息、新闻内容以及相关讨论等内容。在网页设计时，在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>位网友发表了看法，点击查看。】</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步，细节部分修饰完毕，现在通过浏览器查看页面效果。