当前位置:16教程网 > 网页设计 > DW教程 >

Dreamweaver为什么要用CSS进行网页排版
栏目分类:DW教程   发布日期:2016-09-20   浏览次数:次   发布:www.16jiaocheng.com

为了让大家明白CSS的作用,以及为什么要用CSS代替HTML表格进行网页排版,下面通过一个实例向大家讲解。

为了让大家明白CSS的作用,以及为什么要用CSS代替HTML表格进行网页排版,下面通过一个实例向大家讲解。 其中一个页面通过HTML进行格式化,另一个页面通过CSS进行格式化。
HTML格式化实例

HTML代码如下所示:

<body>
 <h1><font face="Verdana" size="5" color="green">下载吧</font></h1>
 <p> <font face="Verdana" size="4" color="blue">下载吧CSS教程</font></p> 
<h1><font face="Verdana" size="5" color="green">xiazaiba</font></h1>
 <p> <font face="Verdana" size="4" color="blue">xiazaiba all rights reserved.</font></p>
 <h1><font face="Verdana" size="5" color="orange">瓦力旗下</font></h1> 
<p> <font face="Verdana" size="4" color="blue">广东瓦力网络科技有限公司</font></p> </body>

Dreamweaver为什么要用CSS进行网页排版

用单词“orange”替换“瓦力旗下”前的“green”,点击“视图”窗口,文本现在将显示为橙色。从以上实例可见,通过HTML格式化网页不仅繁琐还容易出错。

CSS格式化实例

HTML代码如下所示:

<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>下载吧 CSS示范</title> 
<style type="text/css"> 
h1 { font-family: Verdana;
           font-size: 20pt; 
          color: green; }
 p  { font-family: Verdana; 
          font-size: 12pt;
           color: orange; } 
</style> </head>
 <body> 
<h1>下载吧</h1>
 <p>下载吧CSS教程</p>
 <h1>xiazaiba</h1> 
<p>xiazaiba all rights reserved.</p> 
<h1>瓦力旗下</h1> 
<p>广东瓦力网络科技有限公司</p> 
</body>



 

内容与前一个文档完全相同,只不过是通过CSS格式化的。你可以试着将两处color后面的单词更改为black/red等。

通过两个实例,你明白了为什么要用CSS控制页面效果了吗?

相关热词: CSS网页排版

Copyright © 2002-2016 16教程网 版权所有     
电脑教程 Office教程 平面设计 PS教程 室内设计 网页设计