《第七章 WEB标准与页面布局基础(理论).ppt》由会员分享，可在线阅读，更多相关《第七章 WEB标准与页面布局基础(理论).ppt（37页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、WEBWEB标准与页面布局基础标准与页面布局基础第七章第七章第七章第七章本章单词Structure（体系，构造，结构）Presentation（介绍，演示，外观，表象）Behavior（反应，行为，举止）XML（ExtensibleMarkupLanguage，即可扩展标记语言）DTD（DocumentTypeDefinition，文档类型定义）Transitional（过渡性的）Strict（严格的）margin（外边的空白，外边距，外补丁）padding（填充物，内边距，内补丁）block（街区，块）inline（内联，行内）overflow（泛滥，溢出）relative（相对的）abso
2、lute（绝对的）vertical（垂直的，竖直的）预习检查3预习检查当使用margin属性对元素的四个外边距进行设置，依次的顺序为()。A.topbottom leftrightB.left righttopbottomC.topleftbottom rightD.toprightbottom left使用position属性可设置元素的定位机制。要使元素以它的父元素为参照，进行相对定位，应为postion属性赋以下（）的值。A.staticB.absoluteC.relativeD.fixed预习检查当页面中有多个元素在垂直于浏览器窗口的方向上发生层叠时，可使用()属性设置它们的层叠顺序，
3、此属性的值越()则此元素就越接近浏览者。A.z大B.index小C.z-index大D.z-number大要将一个元素隐藏，并且要求此元素原来占据的页面空间被释放，应为此元素设置()属性，并赋值为()。A.visibilitynoneB.visibilityhiddenC.displayhiddenD.displaynone预习检查CSS盒状模型规定盒子由四个content,margin,padding,border部分组成。由盒子的外部到盒子内部，这四个部分的顺序依次是()。A.borderpaddingmargincontentB.marginborderpaddingcontentC.c
4、ontentpaddingbordermarginD.bordermargincontentpadding网站重构与网站重构与WEB标准标准网站重构把“未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点”变成“让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。”的过程就是网站重构网站重构。网站重构WEB标准标准WEB标准网页主要由三个部分构成：结结构构（Structure）、表表现现（Presentation）和行行为为（Behavior）。它们都有各自的标
5、准。结构结构是指一个网页有哪些内容以及这些内容如何被清晰地组织在一起。网页结构的标准主要是XML语言和XHTML语言。表现表现是指一个网页的内容以何种样式来展现。网页表现的标准是CSS语言。行为行为是指一个网页及其所它包含的网页元素以及它所属的浏览器窗口如何与用户交互。网页行为由JavaScript脚本语言来实现。XHTMLXHTML是HTML的替代者，它是从HTML继承而来，但使用了XML的规则进行严格规范。XHTML与传统的HTML的不同之处，主要来自于XML语法规范的格式要求，即要求“格式良好格式良好”。必须有且仅能有一个根元素标签必须正确地嵌套标签必须关闭标签名和属性名必须使用小写属性
6、必须赋值属性值必须包含在引号内特殊字符必须用实体编码来表示图片必须有替代文字注释的内容中不能包含”-”DTDXHTML文档的有效性网页文档中可以使用的标签有哪些，标签有哪些可用的属性，属性可用哪些值，标签之间如何嵌套，特殊字符如何表示等等。XHTML文档的有效性通过DTD（DocumentTypeDefinition，文档类型定义）来定义和验证。在文档第一行（标签开始之前）添加DOCTYPE即文档类型声明。万维网联盟（W3C）为XHTML制定了三种DTD过渡的(Transitional)严格的(Strict)框架集的(Frameset)结构与表现分离结构与表现分离CSS的出现，使得网页的结构与
7、表现比较清晰地分离成为可能。对于网页包含的数据内容，由HTML标签负责承载，同时，文档内众多标签的先后顺序和嵌套关系，也说明了这些数据内容的结构。对于网页中的每一个元素最终在浏览器中以何种样式来呈现，则由CSS的样式规则来负责定义。CSS样式规则一般编写在网页的头部中，这样可使得用来承载数据和描述结构的HTML代码与控制样式的CSS代码分离开来。如果需要二者更进一步地分离，则可将CSS样式规则转移到独立的外部样式表文件中。网页的结构与表现分离，带来的好处。WEB标准与标准与CSS实现网页布局实现网页布局网页布局又可理解为网页排版。简单地说就是：网页中的某一块内容应该放置在网页的哪个位置，占用多
8、大的面积。大量使用表格实现页面布局，不符合WEB标准。目前普遍采用CSS结合div标签来实现网页的布局。将整个网页的所有内容分割成为相对独立的内容块，这些内容块分别用一个div标签来包裹，再使用CSS的属性分别设置这些内容块的位置和尺寸。这样整个页面的版式就受到了控制，从而实现了网页的布局。CSS的盒状模型的盒状模型CSS的盒状模型（BoxModel），是使用CSS实现网页布局的基础。页面中可放置内容的窗口元素称为盒子即Box，盒子就是一个矩形区域。每个盒子都有内容Content，内边距Padding，边框Border，外边距Margin。盒状模型用于描述它们之间的层次，关系与相互的影响。ma
9、rgin：外边距border：边框padding：内边距，又称内补丁或间隙content：内容两种盒子盒子还有块级盒子(blockbox)和内联盒子(inlinebox)之分。这两种盒子分别是块级元素与内联元素的默认盒状模型。块级元素div、table、form、fieldset、h1h6、p、ol、ul、li、hr等。内联元素span、a、label、input、select、textarea、img、embed、br等。块级元素显示为独立的一块（矩形区域），它的前后都会换行；内联元素不会导致换行，它会和其他内联元素一起在一行内显示。内联元素只能包含文本和其他内联元素；而块级元素则能包含内联
10、元素和其他块级元素。标准文档流盒状模型的转换CSS属性display可以设置网页元素使用的盒状模型。为块级元素的display属性赋值为inline，那么这个块级元素转变为内联元素；为内联元素的display属性赋值为block，则这个内联元素转变为块级元素。第一个段落第二个段落列表项目 列表项目 列表项目secondDivthirdDiv演示例7-1盒状模型的转换#firstDiv,#secondDiv,#thirdDivborder:1pxsolidgray;#myullidisplay:inline;.mypdisplay:inline;#secondDiv,#thirdDivdispl
11、ay:inline;演示例7-1外边距外边距CSS外边距属性用来设置一个元素所占空间的边缘到相邻元素之间的距离。使用margin属性来设置外边距。属性意义取值margin-topmargin-rightmargin-bottommargin-left设置元素的顶外边距。设置元素的右外边距。设置元素的底外边距。设置元素的左外边距。可使用像素单位的数字或百分比，也可使用auto。margin简写属性。在一个声明中设置外边距属性。依次设置顶外边距、右外边距、底外边距、左外边距。margin外部DIV块这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。内
12、部DIV块这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。*margin:0;padding:0;bodybackground-color:#fedcba;#outerDivborder:1pxsolidblue;width:400px;margin:0px;background-color:#abcdef;#innerDivborder:1pxsolidred;width:300px;margin:20px;background-color:#cccccc;pborder:1pxdashedgreen;演示例7-2内边距CSS内边距属性是用来设置元素内容到
13、元素边框的距离。使用padding属性来设置内边距。属性意义取值padding-toppadding-rightpadding-bottompadding-left设置元素的顶内边距。设置元素的右内边距。设置元素的底内边距。设置元素的左内边距。可使用像素单位的数字或百分比，也可使用auto。padding简写属性。作用是在一个声明中设置元素的内边距属性。依次设置顶内边距、右内边距、底内边距、左内边距。padding外部DIV块这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。内部DIV块这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是
14、一个段落。这是一个段落。*margin:0;padding:0;bodybackground-color:#fedcba;#outerDivborder:1pxsolidblue;width:400px;padding:10px;background-color:#abcdef;#innerDivborder:1pxsolidred;width:300px;padding:10px;background-color:#cccccc;pborder:1pxdashedgreen;演示例7-3尺寸CSS尺寸属性指的是content内容区域的宽和高。使用width和height属性来设置内容区域的宽
15、度和高度。属性意义取值width设置元素内容区域的宽度。可使用px像素单位或%百分比。height设置元素内容区域的高度。可使用px像素单位或%百分比。width和height#mytableheight:120px;border:4pxdoubleblack;border-collapse:collapse;#mytabletdwidth:180px;border:1pxsolidgray;#mypwidth:450px;height:80px;background-color:#fedcba;段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字单元格单元
16、格段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字演示例7-4溢出溢出CSS溢出属性指内容区域的尺寸不足以容纳元素的内容时，超出的部分如何处理。使用overflow属性来设置如何处理溢出的内容。属性意义取值overflow设置当元素内容所需占用的区域超出内容区域时，如何处理。默认visible，其他值可用auto、scroll、hidden。overflow这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落这是一个段落#mydivwidth:300px;height:200px;overflow:scroll;borde
17、r:1pxsolidblue;演示例7-51、2、3、小结1盒状模型中所谓的盒子如何构成？盒状模型中所谓的盒子如何构成？有哪两种盒子？分别包含哪些标签？有哪两种盒子？分别包含哪些标签？CSS中哪个属性可以改变中哪个属性可以改变HTML标签默认的盒状模型？标签默认的盒状模型？与定位相关的CSS属性定位方式定位方式坐标坐标层叠顺序层叠顺序对齐方式对齐方式定位方式和坐标position属性可以设置默认定位方式之外的其他三种方式。top、right、bottom、left用于设置定位坐标。属性意义取值position设置元素的定位机制。static，静态定位，默认值。定位于页面文档流给定的位置。rel
18、ative，相对定位。在页面文档流给定位置基础上进行偏移。absolute，绝对定位。以父级元素作为参照，使用坐标进行绝对定位。fixed，固定定位。固定在相对于浏览器窗口的指定位置，不随页面滚动而移动。toprightbottomleft设置元素的某边界相对于其包含块相应边界的偏移量。默认为auto，可使用px像素或%百分比设定。绝对定位firstdiv位于body中seconddiv位于body中thirddiv位于seconddiv中forthdiv位于body中*margin:0px;padding:0px;divborder:1pxsolidblue;pborder:1pxdashe
19、dred;#firstposition:absolute;left:20px;top:10px;width:220px;height:250px;background-color:#abcdef;#secondposition:absolute;left:250px;top:10px;width:180px;height:150px;background-color:#abcdef;#thirdposition:absolute;left:-20px;top:50px;background-color:#fedcba;#forthposition:absolute;left:100px;top
20、:120px;width:180px;height:100px;background-color:red;演示例7-6相对定位这是一个段落这是一个段落这是一个段落pmargin:0;border:1pxsolidgray;width:250px;#p_pos_leftposition:relative;left:20px;#p_pos_topposition:relative;top:20px;演示例7-7固定定位不管页面如何滚动，我自始至终都在这里。页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文页面正文#footerposition:fixed;bo
21、ttom:10px;right:10px;width:350px;height:50px;background-color:#fedcba;演示例7-8层叠顺序层叠顺序网页中的多个内容块可能使用多种不同的定位方式，这可能导致它们在垂直于浏览器窗口（或文档正文区域）的方向上层叠起来，相互遮挡。使用z-index（Z轴索引）属性可以设置它们的层叠顺序。属性意义取值z-index设置元素在垂直浏览器窗口方向上的层叠顺序。使用数字设定，数字越大越靠近浏览者。为负数时，作为页面正文的背景显示。z-indexfirstdiv位于body中seconddiv位于body中thirddiv位于seconddi
22、v中forthdiv位于body中*margin:0px;padding:0px;divborder:1pxsolidblue;pborder:1pxdashedred;#firstposition:absolute;z-index:1;left:20px;top:10px;width:220px;height:250px;background-color:#abcdef;#secondposition:absolute;z-index:3;left:250px;top:10px;width:180px;height:150px;background-color:#abcdef;#thirdp
23、osition:absolute;background-color:#fedcba;left:-20px;top:50px;#forthposition:absolute;z-index:2;left:100px;top:120px;width:180px;height:100px;background-color:red;演示例7-9对齐方式对齐方式对齐方式属性用于设置元素的内容在作为容器的元素内部的对齐方式，有水平方向的对齐方式和垂直方向的对齐方式。属性意义取值text-align元素中文本的水平对齐。可使用left、right、center、justify。vertical-align设
24、置行内元素在所在行上的垂直对齐方式，或用于设置单元格内容在单元格内的垂直对齐方式。常用的值有：baseline、top middle、bottom、text-top、text-bottom、super、sub。vertical-align这是一个包含图片的段落，它还包含水的分子式：H2O和一个二元一次方程：Y=2X2+3X+4单元格单元格单元格单元格单元格单元格单元格单元格#mytablewidth:250px;border:4pxdoublegray;border-collapse:collapse;#mytabletdvertical-align:top;border:1pxsolidgray;演示例7-101、2、3、小结2CSS中对元素的定位有哪几种方式？中对元素的定位有哪几种方式？多个元素发生层叠时，如何让其中某个元素最容易让用户看到？多个元素发生层叠时，如何让其中某个元素最容易让用户看到？垂直对齐方式有哪几种？垂直对齐方式有哪几种？总结1、2、3、Web标准标准定位定位盒状模型盒状模型谢谢谢谢