Dreamweaver第9课

攀枝花学院工业设计专业a网站设计-DreamweaverFlashAccessVBscript、主讲人曾富洪网站设计-DreamweaverFlashAccessVBscript攀枝花学院工业设计专业a网站设计-DreamweaverFlashAccessVBscript、第9课使用Div+CSS灵活布局网页网站设计-DreamweaverFlashAccessVBscript攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、本章导读62345Div+CSS布局定位关于Div+CSS布局网站标准在网页中插入Div内容导读关于Div+CSS盒模型常用Div+CSS布局方式攀枝花学院工业设计专业a网站设计-DreamweaverFlashAccessVBscript、9.1网站标准行为标准结构化标准语言表现标准语言9.1.19.1.29.1.3攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、9.1.1结构化标准语言XML是TheExtensibleMarkupLanguage的简写，是用于标记电子文件使其具有结构性的标记语言。可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。XMLXHTML是TheExtensibleHyperTextMarkupLanguage的缩写，是一种置标语言，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。XHTML攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、表现标准语言主要是指CSS（CascadingStyleSheets），即层叠样式表，是一种用来表现HTML或XML等文件样式的计算机语言。CSS能够对网页中对象的位置进行精确控制，支持几乎所有的字体字号样式，并能对网页对象和模型样式进行编辑，能够进行初步的交互设计，是目前基于文本展示最优秀的表现设计语言，目前的最新版本为CSS3，能够真正做到网页表现与内容的分离。9.1.2表现标准语言攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、9.1.3行为标准DOM是DocumentObjectModel文档对象模型的缩写，是W3C组织推荐的处理可扩展置标语言的标准编程接口，可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。ECMAScript是ECMA（EuropeanComputerManufacturersAssociati-on）制定的标准脚本语言（JAVAScript）。DOMECMAScript攀枝花学院工业设计专业a网站设计-DreamweaverFlashAccessVBscript、9.2关于DIV+CSS布局9.2.19.2.29.2.39.2.4攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、Div+CSS是网站标准中的常用术语之一，它是一种网页布局的方法，可实现网页页面内容与表现的分离。Div+CSS是由Div标签+CSS层叠样式表进行布局的。Div标签是HTML中一种网页元素，通常用于进行页面的布局。在HTML代码中以div/div的形式存在，在div/div之间可填充标题、文本、段落、图像和表格等网页元素，因此可将该标签看作一个区块容器标签。而CSS即层叠样式表。9.2.1认识Div+CSS攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、9.2.2了解基于CSS的页面布局表格布局TextDiv布局攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、表格布局对于显示表格式数据（如重复元素的行和列）很有用，并且其操作简单，很容易在页面上进行创建。但使用表格时，常常需要进行嵌套，为制作过程带来很多不便，还会在网页中生成大量难于阅读和维护的代码。表格布局攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、基于CSS的布局通常使用Div标签，而不是table标签来创建。用户可以在网页中创建Div，并通过设置其属性，指定其宽度、高度、边框、边距、背景颜色及对齐方式等信息。Div布局攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、使用Div+CSS布局时，网页中的内容都是放置在Div中的，此时Div也可叫做“块”或“容器”。这里所说的“块”，一般是指其他元素的容器元素，其高度和宽度都可以进行自定义设置。9.2.3块元素元素说明元素说明address地址h55级标题blockquote块引用h66级标题center居中对齐块态hr水平分隔线dir目录列表isindexinputpromptdiv常用块容器menu菜单列表dl定义列表noframesframes可选内容，对于不支持frame的浏览器显示此区块内容fieldsetform控制组noscript可选脚本内容，对于不支持script的浏览器显示此内容form交互表单ol排序表单h1大标题p段落h2副标题pre格式化文本h33级标题table表格h44级标题ul非排序列表攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、行内元素也叫内联元素，其实质是指网页内容的显示方式，它与块元素相反，其高度和宽度都不能进行设置。在Dreamweaver中常用到的a、span和img等都属于行内元素。9.2.4行内元素元素说明元素说明a锚点img图片abbr缩写input输入框acronym首字label表格标签b粗体q短引用br大字体s中划线dl定义字段select项目选择em强调small小字体文本font字体设定span定义文本内区块i斜体strike中划线攀枝花学院工业设计专业a网站设计-DreamweaverFlashAccessVBscript、9.3在网页中插入DIV插入DivDiv的嵌套9.3.19.3.2攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、在DreamweaverCS6中插入Div的方法很简单，只要在需要插入的位置处单击鼠标，定位插入点，选择【插入】/【布局对象】/【Div标签】命令，在打开的“插入Div标签”对话框中对其属性进行设置即可。9.3.1插入Div攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、在进行网页制作的过程中，仅仅只插入一个Div标签，远远达不到制作的要求，一般情况下，都需要在一个Div标签中插入更多的Div标签，以对网页元素进行定位，这就是Div的嵌套。9.3.2Div的嵌套攀枝花学院工业设计专业a网站设计-DreamweaverFlashAccessVBscript、9.4关于DIV+CSS盒模型9.4.1盒模型的概念9.4.2margin（边界）9.4.3border（边框）9.4.4padding（填充）9.4.5content（内容）攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、盒模型的原理就是将页面中的元素都看作一个占据了一定空间的盒子，它由margin（边界）、border（边框）、padding（填充）和content（内容）组成，其中margin位于最外层，content位于最里层。9.4.1盒模型的概念攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、9.4.2margin（边界）父子关系产生换行效果的块级元素行内元素相邻攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、当两个行内元素相邻时，它们之间的距离是第一个元素的边界值与第二个元素的边界值之和。行内元素相邻攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、是指存在嵌套关系的元素，它们之间的间距值是相邻两个元素之和。父子关系攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、如果没有对块元素的位置进行定位，而是只用于产生换行效果，则相邻两个元素之间的间距会以边界值较大的元素的值来决定。产生换行效果的块级元素攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、9.4.3border（边框）color用于设置border的颜色，其设置方法与文本的color属性相同，但一般采用十六进制来进行设置。style用于设置border的样式，其值包括dashed、dotted、double、groove、hidden、inherit、none和Solid。width用于设置border的粗细程度，其值包括Medium、Thin、Thick和length。border的属性攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、用于设置content与border之间的距离，其属性主要有top、right、bottom和left。9.4.4padding（填充）攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、content即盒子包含的内容，就是网页要展示给用户观看的内容，它可以是网页中的任一元素，包含块元素、行内元素或HTML中的任一元素，如文本、图像等。9.4.5content（内容）攀枝花学院工业设计专业a网站设计-DreamweaverFlashAccessVBscript、9.5DIV+CSS布局定位Concept9.5.1CSS的定位属性9.5.2relative（相对定位）9.5.4fixed（悬浮定位）9.5.5float（浮动定位）9.5.3absolute（绝对定位）攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、9.5.1CSS的定位属性CSS的定位属性TextpositionTextTextfloat攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、包含了几种较为常用的定义方法，即relative（相对定位）、absolute（绝对定位）和fixed（固定定位）等。在CSS的规则定义对话框中选择“定位”选项卡，在右侧的Position下拉列表框中即可进行设置。position攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、用于设置Div的浮动属性，使其相对于另一个Div进行定位。在CSS的规则定义对话框中选择“方框”选项卡，在右侧的Float下拉列表框中即可进行设置。float攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、relative即相对定位，是指在元素所在的位置上，通过设置其水平或垂直位置，让该元素相对于起点进行移动。可通过设置top、left、right和bottom属性的值对其位置进行定位。9.5.2relative（相对定位）攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、absolute即绝对定位，是指通过设置Position属性的值，将其定位在网页中的绝对位置。9.5.3absolute（绝对定位）攀枝花学院工业设计专业网站设计-DreamweaverFlashAccessVBscript、fixed即悬浮定位，是指使某个元素悬浮在上方，用于固定元素位于页面的某个位置。9.5.4fixed（悬浮定位）攀枝花学院工业设计专业网站设计-Dreamweaver