上QQ阅读APP看书，第一时间看更新
3.5 案例实战：设计新闻内页
视频讲解
网页正文内容部分处理的方式一般很简单，文字和图片或堆叠显示，或图文环绕显示。本案例的设计效果如图3.17所示。
图3.17 设计新闻内容页面版式
新闻内容页面一般情况下不是在页面设计过程中实现的，而是在后期网站发布后通过网站的新闻发布系统进行自动发布，这样的内容发布模式对于图像的大小、段落文本排版都是属于不可控的范围，因此要考虑到图与文不规则的问题。
【操作步骤】
第1步，启动Dreamweaver CC，新建网页，保存为index.html，切换到【代码】视图，在<body>标记内输入如下结构代码。为了方便快速练习，用户也可以直接打开模板页面temp.html，另存为index.html。
整个结构包含在<div class="pic_news">新闻框中，新闻框中包含3部分，第一部分是新闻标题，由标题标记负责；第二部分是新闻图像，由<div class="pic">图像框负责控制；第三部分是新闻正文部分，由<p>标记负责管理。
第2步，在<head>标记内添加<style type="text/css">标记，定义一个内部样式表，然后输入下面的样式，定义新闻框显示效果。
.pic_news {
width:94%; /* 控制内容区域的宽度，根据实际情况考虑，也可以不需要 */
}
第3步，继续添加样式，设计新闻标题样式，其中包括三级标题，统一标题为居中显示对齐，一级标题字体大小为22像素，二级标题字体大小为14像素，三级标题大小为12像素，同时三级标题取消默认的上下边界样式。
第4步，设计新闻图像框和图像样式，设计新闻图像居中显示，然后定义新闻图像大小固定，并适当拉开与环绕的文字之间的距离。
第5步，设计段落文本样式，主要包括段落文本的首行缩进和行高效果。
