如何用DIV+CSS进行网页样式布局

html-css028

如何用DIV+CSS进行网页样式布局,第1张

一、选择“div标签”命令

打开dreamweaver,新建网页并保存为“die.html”,选择【插入】【布局对象】【div标签】命令,打开“div标签”对话框。

二、输入div标签名称

1、在“ID”列表框中选择“top”

2、单击“新建css规则”按钮准备进行css规则定义

三、新建css规则

在打开的对话框中保持默认设置,单击“确定”按钮进行css规则新建。

四、设置属性

1、在“分类”列表框中选择“方框”选项。

2、在窗口右侧进行css规则定义,其中margin值的设置非常重要,“left”及“right”为auto,则可让div页面水平居中。

3、单击“确定”按钮。

五、创建div按钮

返回“插入div标签”,单对话框,单击“确定”按钮,完成div标签的插入

六、查看创建的div

将鼠标光标定位在div,即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。

div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的代码定位方式,可实现网页页面内容与表现相分离。

简单来说就是把设计的网页(用ps,fireworks等设计的),用div+css布局后,使得页面内容(div)和表现(css)的分离,有利于用户的体验,更是精简了代码。

1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。

2、支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。

3、搜索引擎更加友好。相对与传统的table,

采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。

4、样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。

现在YAHOO,MSN等国际门户网站,网易,新浪等国内门户网站,和主流的WEB2.0网站,均采用DIV+CSS的框架模式,更加印证了DIV+CSS是大势所趋。

5、CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。

6、表现和结构分离,在团队开发中更容易分工合作而减少相互关联性