Dreamweaver CS5-ch09-应用CSS+Div灵活布局网页.pptVIP

* * Dreamweaver CS5网页设计与制作基础教程 第9章 应用CSS+Div灵活布局网页 9.1 初识Div 9.1.1 Div概述 9.1.2 Div和Span的相同点 9.1.3 Div与Span的区别 9.1.1 Div概述 Div全称division 意为“区分”，称为区隔标记。作用是设定字、画、表格等的摆放位置。当使用CSS布局时，主要把其用在Div标签上。 9.1.2 Div和Span的相同点 span标记与div标记一样，作为容器标记而被广泛应用在HTML语言中，在span与/span中间同样可以容纳各种HTML元素，从而形成独立的对象，如，把“div”换成“span”，执行后也会发现效果完全一样。可以说div与span这两个标记起到的作用都是独立出各个区块，在这个意义上二者没有太多的不同。 9.1.3 Div与Span的区别 div与span的区别在于，div是一个块级元素，包围的元素会自动换行，而span仅仅是一个行内元素，在前后不会换行，span没有结构上的意义，纯粹是应用样式，当其他行内元素都不合适时，就可以使用span元素。 此外，span标记可以包含于div标记之中，成为子元素，而反过来则不成立，即span标记不能包含div标记。 9.2　CSS定位 9.2.1　盒子模型 9.2.2　float定位 9.2.3　position定位 9.2.1　盒子模型 这些属性可以转移到日常生活中的盒子去理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫盒子模式。 HTML文档中的每个盒子都可以看成是由从内到外的四个部分构成，即内容区、填充、边框和空白边。 9.2.2　float定位 float是CSS的定位属性，在传统的印刷布局中，文本可以按照需要围绕图片，一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样，浮动的元素仍然是网页流的一部分，float浮动属性是元素定位中非常重要的属性，常常通过对DIV元素应用float浮动来进行定位。 9.2.3　position定位 在CSS布局中，Position发挥着非常重要的作用，很多容器的定位是用Position来完成，另外，CSS中Position属性有四个可选值，分别是static、absolute、fixed、relative，static是默认值，代表无定位。 9.3　Div布局 9.3.1　使用Div对页面整体规划 9.3.2　设计各块的位置 9.3.1　使用Div对页面整体规划 使用DIV可以将页面首先在整体上进行div标记的分块，然后对各个块进行CSS定位，最后再在各个块中添加相应的内容，页面大致由右Banner、Content、Links和Footer几个部分组成。 9.3.2　设计各块的位置 在页面外部有一个container，页面的banner在最上方，然后是内容content与导航条inks，二者在页面中部，其中content占据整个页面的主体，最下方是页面脚注footer，用于显示版权信息和注册日期等。 9.4 CSS布局方式 9.4.1 居中版式布局 9.4.2 浮动版式布局 9.4.1 居中版式布局 居中的设计只占屏幕的一部分，而不是横跨屏幕的整个宽度，这样就会创建比较短的容易阅读的行，居中有两个基本方法：一个方法使用自动空白边，另一个方法使用定位和负值的空白边。 9.4.2 浮动版式布局 在Dreamweaver CS5中，使用浮动布局设计也是必不可少的，浮动布局利用了float（浮动）属性来并排定位元素，包括二列固定宽度、两列固定宽度居中布局、两列宽度自适应布局和三列浮动中间列宽度自适应布局。 *