网站建设-网页的排版布局.ppt

知识5页面排版布局趋势（Web2.0） Web2.0是一个新兴的网站设计技术概念。Web2.0的网页一般使用CSS+DIV实现网页的布局。使用Ajax和XML与服务器进行数据交互。 Web2.0网页的布局更加强调网站的专业性与网站的交互性。网站可以体现出强大的功能，网页在简单的布局中可以体现出强大的功能。例如，“谷歌”和“百度”就是Web2.0网站优秀布局方式的代表。在一个简单的网页输入框中可以查询到所需要的知识。同时，在查询结果的网页中，高效地布局出用户所需要的内容。 百度网站版面设计 任务1 使用CSS+DIV布局一个网页 1．新建一个网页，切换到代码视图，在body/body标签中加入如下代码。 div id=container div id=headerimg src=header.jpg //div div id=linksimg src=links.jpg //div div id=leftimg src=left.jpg //div div id=mainimg src=main.jpg //div div id=footerimg src=footer.jpg //div /div 2．在head/head标签中加入如下CSS代码用来控制各DIV的显示。 style type=text/css !-- body{ text-align:center; } #container{ position:relative; background-color:#00FF00; margin-top:0px; margin-right:auto; margin-bottom:0px; margin-left:auto; height:776px; width:900px; text-align:left; } #header{ position:relative; background-color:#FF0000; height:113px; width:900px; text-align:left; } #links{ position:relative; background-color:#FF9900; height:29px; width:900px; text-align:left; } #left{ position:relative; background-color:#FFFF66; height:587px; width:216px; text-align:left; float:right; } #main{ position:relative; background-color:#00FFFF; height:587px; width:684px; text-align:left; float:left; } #footer{ position:relative; background-color:#FF00FF; height:47px; width:900px; text-align:left; float:left; } -- /style 代码说明： (1)代码中共包含6个DIV标签，分别代表6个层。其中最外层的id为container的DIV起到一个容器的作用，用于容纳其它5个层。 (2)选择器body和#container的样式用于将最外层id为container的DIV（容器层）水平居中显示。 (3)其它几个选择器样式如#header，#links，#left，#main和#footer分别用来控制容器内5个层的显示。 (4)选择器#left和#main中有一个重要CSS属性float。其中在选择器#left中设置为float:left；而选择器#main中设置为float:right。该属性设定了id为left的层居左显示，id为main的层则居右显示。在网页中预览如图5-24所示。 (5)如果想将id为left和main的层交换位置，只需要在选择器#left中设置float:right；同时在选择器#main中设置float:left即可。在网页中的预览效果如图5-25所示。从图5-25可以看出，使用CSS+DIV布局的网页，要调整各模块之间的相对位置是很简单的。 05模块 网页的排版布局 在进行网站设计时，需要对网站的版面与布局进行一个整体的规划，这就是网站的排版布局。本模块