使用Div+CSS灵活布局网页.pptx

;;导读;5.3.1 网站标准;5.3.1.1 结构化标准语言;表现标准语言主要是指CSS（Cascading Style Sheets），即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS能够对网页中对象的位置进行精确控制，支持几乎所有的字体字号样式，并能对网页对象和模型样式进行编辑，能够进行初步的交互设计，是目前基于文本展示最优秀的表现设计语言，目前的最新版本为CSS3，能够真正做到网页表现与内容的分离。;5.3.1.3 行为标准;5.3.2 关于Div+CSS布局;Div+CSS是网站标准中的常用术语之一，它是一种网页布局的方法，可实现网页页面内容与表现的分离。Div+CSS是由Div标签+CSS层叠样式表进行布局的。 Div标签是HTML中一种网页元素，通常用于进行页面的布局。在HTML代码中以div /div的形式存在，在div /div之间可填充标题、文本、段落、图像和表格等网页元素，因此可将该标签看作一个区块容器标签。而CSS即层叠样式表。 ;5.3.2.2 了解基于CSS的页面布局;表格布局对于显示表格式数据（如重复元素的行和列）很有用，并且其操作简单，很容易在页面上进行创建。但使用表格时，常常需要进行嵌套，为制作过程带来很多不便，还会在网页中生成大量难于阅读和维护的代码。;基于CSS的布局通常使用Div标签，而不是table标签来创建。用户可以在网页中创建Div，并通过设置其属性，指定其宽度、高度、边框、边距、背景颜色及对齐方式等信息。;使用Div+CSS布局时，网页中的内容都是放置在Div中的，此时Div也可叫做“块”或“容器”。这里所说的“块”，一般是指其他元素的容器元素，其高度和宽度都可以进行自定义设置。;行内元素也叫内联元素，其实质是指网页内容的显示方式，它与块元素相反，其高度和宽度都不能进行设置。在Dreamweaver中常用到的a、span和img等都属于行内元素。;5.3.3 在网页中插入Div;在Dreamweaver CS6中插入Div的方法很简单，只要在需要插入的位置处单击鼠标，定位插入点，选择【插入】/【布局对象】/【Div标签】命令，在打开的“插入Div标签”对话框中对其属性进行设置即可。;在进行网页制作的过程中，仅仅只插入一个Div标签，远???达不到制作的要求，一般情况下，都需要在一个Div标签中插入更多的Div标签，以对网页元素进行定位，这就是Div的嵌套。;5.3.4 关于Div+CSS盒模型;盒模型的原理就是将页面中的元素都看作一个占据了一定空间的盒子，它由margin（边界）、border（边框）、padding（填充）和content（内容）组成，其中margin位于最外层，content位于最里层。;5.3.4.1 盒模型的概念;5.3.4.2 margin（边界）;当两个行内元素相邻时，它们之间的距离是第一个元素的边界值与第二个元素的边界值之和。;是指存在嵌套关系的元素，它们之间的间距值是相邻两个元素之和。;如果没有对块元素的位置进行定位，而是只用于产生换行效果，则相邻两个元素之间的间距会以边界值较大的元素的值来决定。;5.3.4.3 border（边框）;用于设置content与border之间的距离，其属性主要有top、right、bottom和left。;content即盒子包含的内容，就是网页要展示给用户观看的内容，它可以是网页中的任一元素，包含块元素、行内元素或HTML中的任一元素，如文本、图像等。;5.3.5 Div+CSS布局定位;5.3.5.1 CSS的定位属性;包含了几种较为常用的定义方法，即relative（相对定位）、absolute（绝对定位）和fixed（固定定位）等。在CSS的规则定义对话框中选择“定位”选项卡，在右侧的Position下拉列表框中即可进行设置。;用于设置Div的浮动属性，使其相对于另一个Div进行定位。在CSS的规则定义对话框中选择“方框”选项卡，在右侧的Float下拉列表框中即可进行设置。;relative即相对定位，是指在元素所在的位置上，通过设置其水平或垂直位置，让该元素相对于起点进行移动。可通过设置top、left、right和bottom属性的值对其位置进行定位。;absolute即绝对定位，是指通过设置Position属性的值，将其定位在网页中的绝对位置。;fixed即悬浮定位，是指使某个元素悬浮在上方，用于固定元素位于页面的某个位置。;float即浮动定位，主要用于控制网页元素的显示方式，如靠左显示、靠右显示等。在Dreamweaver中进行定位时，通常先通过它来对元素进行定位，然后再通过其他定位属性对其具体位置进行设置。;5.3.6 常用Div+CSS布局方