Dreamweaver第9课.pptxVIP

网站设计-Dreamweaver Flash Access VBscript主讲人 曾富洪网站设计-Dreamweaver Flash Access VBscript第 9 课使用Div+CSS灵活布局网页本章导读常用Div+CSS布局方式网站标准1内容导读6关于Div+CSS布局2Div+CSS布局定位5在网页中插入Div关于Div+CSS盒模型349.1 网站标准结构化标准语言9.1.39.1.29.1.1表现标准语言行为标准9.1.1 结构化标准语言 XML是The Extensible Markup Language的简写，是用于标记电子文件使其具有结构性的标记语言。可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XMLXHTML是The Extensible HyperText Markup Language的缩写，是一种置标语言，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。XHTML9.1.2 表现标准语言表现标准语言主要是指CSS（Cascading Style Sheets），即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS能够对网页中对象的位置进行精确控制，支持几乎所有的字体字号样式，并能对网页对象和模型样式进行编辑，能够进行初步的交互设计，是目前基于文本展示最优秀的表现设计语言，目前的最新版本为CSS3，能够真正做到网页表现与内容的分离。 9.1.3 行为标准ECMAScript DOM DOM是Document Object Model文档对象模型的缩写，是W3C组织推荐的处理可扩展置标语言的标准编程接口，可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。ECMAScript是ECMA（European Computer Manufacturers Associati-on）制定的标准脚本语言（JAVAScript）。9.2 关于Div+CSS布局9.2.1 9.2.2 9.2.3 认识Div+CSS9.2.4 了解基于CSS的页面布局块元素行内元素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的方法很简单，只要在需要插入的