利用DivCSS布局网页.pptx

该【利用DivCSS布局网页 】是由【niuww】上传分享，文档一共【9】页，该文档可以免费在线阅读，需要了解更多关于【利用DivCSS布局网页 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。
网站的布局不是盲目地在网页里面罗列各种构成要素。怎么样才能达到网页构成的目的,怎么样才能使网站看起来既美观又实用,这是我们每一个网页布局设计者首先应该考虑的问题。如果网页布局不合理,则会在向浏览者传达网页内容的时候发生困难,也不会让人对其产生兴趣。因此,?四芄簧杓瞥黾让拦邸⑿掠保质褂梅奖愕耐巢季郑颐怯斜匾喽?参考别人的布局方法。我们应该在仔细研究别人优秀的布局方式的同时,对如何能在有限的空间里把页面中丰富多彩的内容更加有机地搭配起来,如何才能营造出一种良好的视觉效果这些问题进行认真思考。

在过去使用表格进行布局时,设计的最开始阶段就要确定页面的布局形式。由于使用表格来进行布局,一旦确定下来就无法再更改了,因此有很大的缺陷。使用CSS布局则完全不同,设计者首先考虑的不是如何分割网页,而是从网页内容的逻辑关系出发,区分出内容的层次的重点。然后根据逻辑关系,把网页的内容使用<div>或其他的HTML标记组织好,再考虑网页的形式如何与内容相适应。下面简单介绍几种常见的网页布局形式。

,这样的页面通常是:一列较宽,用于展示页面主要内容;一列较窄,用于放置公告板、用户登陆框、目录等信息。

,这种布局方式主要出现在网站的首页或频道页。

搜狐网是一个很有名的门户网站,该网站经营综合性业务、社区、无线等增值性服务。。由于网站的信息量比较大,要呈现的信息种类很多,因此采用四列布局,可以使网站结构看起来更加清晰。
+CSS布局网页
Div标签作为页面元素的主要容器,可容纳所有子Div标签、图像和文字等内容,并根据具体需要对各子Div标签和对象进行格式化。读者要能灵活掌握Div+CSS准确定位页面元素的排版技术,创建布局合理、美观的网页。
+CSS搭建页面
通常用Div标签来定义网页上的一个特定的区域,将文字、图片和表格等网页元素放到此区域中,再用CSS对该Div标签定义的区域进行定位和样式的设置。CSS样式表不仅是定义页面样式的最佳工具,同时也具有精确地定位独享的控制能力,因此,它成为不可多得的网页布局工具。为了提高设计效率,可以事先定义好布局所需的CSS样式规则,然后在“插入Div标签”对话框中应用。使用这种方法排版的网页中的代码简洁且更新方便,更能兼容更多的浏览器。

+CSS布局操作方法
+CSS标准的优点
使用Div+CSS布局网页已经成为一种潮流,下面是使用Div+CSS标准的优点。
符合W3C标准。W3C标准是现在主流的标准,这样可以保证网站不会因为网络的升级而惨遭淘汰。
结构清晰,容易被搜索引擎搜索到,并能够优化搜索引擎。
有很强的易用性,可以进行一次设计后,在其他地方发布。支持浏览器的向后兼容,几乎在所有的浏览器上都可以使用。
表现和内容分离。这是使用CSS布局的特色所在,网页有许多内容,而将网页设计部分剥离出来放在一个独立的样式文件中,代码会更加简洁,页面和样式可以方便地进行更新,也能大大提高网页下载速度。
在使用表格布局时,会产生很多垃圾代码,并且一些修饰的样式及布局的代码混合在一起。相比之下,Div更着重体现样式和结构相分离,因此结构的重构性强。

当<div>标签用于网页布局和定位时,需要与CSS配合实现页面的精确定位,同时CSS作为一种新的布局技术能够精确地定位文本和图片,并且能够实现更多的显示特效。通过本章的学习,读者要熟练掌握为页面中的元素添加ID并通过CSS控制元素的位置、通过CSS规则控制页面布局等内容。