第9章 节 使用Div+CSS灵活布局网页 中文版Dreamweaver CS6网页制作课件.pptxVIP

中文版Dreamweaver CS6从入门到精通第9章使用Div+CSS灵活布局网页· 清华大学出版社 ·本章导读网站标准1常用Div+CSS布局方式内容导读6关于Div+CSS布局2Div+CSS布局定位5在网页中插入Div关于Div+CSS盒模型34清华大学出版社从入门到精通9.1 网站标准结构化标准语言9.1.39.1.29.1.1表现标准语言行为标准9.1.1 结构化标准语言 XML是The Extensible Markup Language的简写，是用于标记电子文件使其具有结构性的标记语言。可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XMLXHTML是The Extensible HyperText Markup Language的缩写，是一种置标语言，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。XHTML清华大学出版社从入门到精通9.1.2 表现标准语言表现标准语言主要是指CSS（Cascading Style Sheets），即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS能够对网页中对象的位置进行精确控制，支持几乎所有的字体字号样式，并能对网页对象和模型样式进行编辑，能够进行初步的交互设计，是目前基于文本展示最优秀的表现设计语言，目前的最新版本为CSS3，能够它能够真正做到网页表现与内容的分离。 清华大学出版社从入门到精通9.2.1 认识Div+CSSDiv+CSS是网站标准中的常用术语之一，它是一种网页布局的方法，可实现网页页面内容与表现的分离。Div+CSS是由Div标签+CSS层叠样式表进行布局的。Div标签是HTML中一种网页元素，通常用于进行页面的布局。在HTML代码中以div /div的形式存在，在div /div之间可填充标题、文本、段落、图像和表格等网页元素，因此可将该标签看作一个区块容器标签。而CSS即层叠样式表。 清华大学出版社从入门到精通Text 表格布局 Div布局9.2.2 了解基于CSS的页面布局清华大学出版社从入门到精通表格布局表格布局对于显示表格式数据（如重复元素的行和列）很有用，并且其操作简单，很容易在页面上进行创建。但使用表格时，常常需要进行嵌套，为制作过程带来很多不变，还会在网页中生成大量难于阅读和维护的代码。 清华大学出版社从入门到精通Div布局基于CSS的布局通常使用“Div”标签，而不是“table”标签来创建。用户可以在网页中创建“Div”，并通过设置其属性，指定其宽度、高度、边框、边距、背景颜色及对齐方式等信息。 清华大学出版社从入门到精通9.2.3 块元素使用Div+CSS布局时，网页中的内容都是放置在Div中的，此时Div也可叫做“块”或“容器”。这里所说的“块”，一般是指其他元素的容器元素，其高度和宽度都可以进行自定义设置。元素说明元素说明address地址h55级标题blockquote块引用h66级标题center居中对齐块态hr水平分隔线dir目录列表isindexinput promptdiv常用块容器menu菜单列表dl定义列表noframesframes可选内容，对于不支持frame的浏览器显示此区块内容fieldsetform控制组noscript可选脚本内容，对于不支持script的浏览器显示此内容form交互表单ol排序表单h1大标题p段落h2副标题pre格式化文本h33级标题table表格h44级标题ul非排序列表清华大学出版社从入门到精通9.2.4 行内元素行内元素也叫内联元素，其实质是指网页内容的显示方式，它与块元素相反，其高度和宽度都不能进行设置。在Dreamweaver中常用到的a、span和img等都属于行内元素。元素说明元素说明a锚点img图片abbr缩写input输入框acronym首字label表格标签b粗体q短引用br大字体s中划线dl定义字段select项目选择em强调small小字体文本font字体设定span定义文本内区块i斜体strike中划线清华大学出版社从入门到精通9.3 在网页中插入Div插入Div9.3.29.3.1Div的嵌套从入门到精通清华大学出版社9.3.1 插入Div在Dreamweaver CS6中插入Div的方法很简单，只要在需要插入的位置处单击鼠标，定位插入点，选择【插入】/【布局对象】/【Div标签】命令，在打开的“插入Div标签”对话框中对其属性进行设置即可。 清华大学出版社从入门到精通9.3.2 Div的嵌套 在进行网页制作的过程中，仅仅只插入一个Div标签，远远达不到制作的要求，一般情况下，都需要在一个Div标签中插入更多的Div标签，以对网页元素进行定位，这就是Div的嵌套。