网页设计中的设计图文混排

  • 2019-09-29 15:03:29
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

本实例进一步巩固网页设计中图文混排方法的使用,并把该方法运用到实际的网站制作中。示例介绍中国的传统节日为题材,利用图文混排的方法,实现页面的图文效果。

【操作步骤】

第1步,启动Dreamweaver,新建文档,保存为index.html。

第2步,构建网页的整体结构。第一个<p>标签的内容是网页的首段,在首段中用<span>标签设置了首字下沉效果。然后是各个分标题,每个分标题都由两个<p>标签、一个<img>标签组成,分别是分标题中的标题、图片和段落内容。具体代码如下:

<body>

<p><span  class="first">中</span>国的传统节日形式多样,内容丰富,是我们中华民族悠久的历史文化的一个组成部分。……</p>

<p class="title1">春节</p><img src="images/chunjie.jpg" class="pic1">

<p  class="content">春节是我国一个古老的节日,也是全年最重要的一个节日,如何庆贺这个节日,在千百年的历史发展中,形成了一些较为固定的风俗习惯,有许多还相传至今。……</p>

<p class="title2">清明节</p><img src="images/qingming.jpg" class="pic2"><p class="content">清明是我国的二十四节气之一。由于二十四节气比较客观地反映了一年四季气温、降雨、物候等方面的变化,所以古代劳动人民用它安排农事活动。《淮南子?天文训》云:“春分后十五日,斗指乙,则清明风至。”  ……</p><p class="title1">中秋节</p><img src="images/zhongqiu.jpg" class="pic1">

<p class="content">每年农历八月十五日,是传统的中秋佳节。这时是一年秋季的中期,所以被称为中秋。……

</p>

</body>

第3步,规划整个页面的基本显示属性:为网页选择一个合适的背景颜色,设置<p>标签的字体大小,也就是所有段落的字体大小,并设置首字下沉效果。

<style type="text/css">body { background-color: #d8c7b4; /*页面背景色*/ }p { 

font-size: 12px; /*段落文字大小*/ }span.first { /*首字放大*/    

font-size: 60px;    

font-family: 黑体;    

float: left;

font-weight: bold;    

color: #59340a; /*首字颜色*/}</style>

第4步,考虑到网站建设时整体的图文排版,采用一左一右的形式,所以图文混排的CSS分为左右两段,分别定义为img.pic1和img.pic2,不同的是一个在左边一个在右边。

img.pic1 {    float: left;                  /*左侧图片混排*/    

margin-right: 10px;           /*图片右端与文字的距离*/    

margin-bottom: 5px;           /*图片底端与文字的距离*/}img.pic2 {    

float: right;                 /*右侧图片文字的距离*/    margin-bottom: 5px;

}

第5步,设置正文的文字,文字本身不需要做太多调整,但是每一个段落的标题同样是分为左右两侧的,要根据图片的位置做出变化。所以小标题也和图片一样进行左右两个CSS设置,分别为ti-tle1和title2。

.title1 {/*左侧标题*/    

text-decoration: underline;  /*下划线*/    

font-size: 18px;    

font-weight: bold;           /*粗体*/    

text-align: left;            /*左对齐*/

color: #59340a;              /*标题颜色*/}

.title2 {/*右侧标题*/    

text-decoration: underline;    

font-size: 18px;    

font-weight: bold;    

text-align: right;    

color: #59340a;}p.content {/*正文内容*/    

line-height: 1.2em;         /*正文行间距*/}

从代码中可以看出,两段标题的代码不同就在于文字的对齐方式,当图片应用img.pic1而位于左侧时,标题则使用title1,也相应地在左侧。当图片应用img.pic2而位于右侧时,标题则使用title2,也相应地在右侧。p.content设置了段落正文的样式。

本例主要是通过图文混排的技巧,使文字和图片一左一右应用两种不同的对齐方式,采用两组不同的CSS类样式标记,合理地将图片和文字融为一体。

当前文章标题:网页设计中的设计图文混排

当前URL:http://www.lyjtt.cn/news/wzzz/3105.html

上一篇:设置文字环绕

下一篇:网页设计中的图片布局

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)