第七章 WEB标准与页面布局基础(理论)_第1页
第七章 WEB标准与页面布局基础(理论)_第2页
第七章 WEB标准与页面布局基础(理论)_第3页
第七章 WEB标准与页面布局基础(理论)_第4页
第七章 WEB标准与页面布局基础(理论)_第5页
已阅读5页，还剩32页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

WEB标准与页面布局基础第七章本章单词Structure （体系，构造，结构）

Presentation （介绍，演示，外观，表象）

Behavior （反应，行为，举止）

XML （Extensible

Markup

Language，即可扩展标记语言）

DTD （DocumentTypeDefinition，文档类型定义）

Transitional （过渡性的）

Strict （严格的）

margin （外边的空白，外边距，外补丁）

padding （填充物，内边距，内补丁）

block （街区，块）

inline （内联，行内）

overflow （泛滥，溢出）

relative （相对的）

absolute （绝对的）

vertical （垂直的，竖直的）预习检查3预习检查当使用margin属性对元素的四个外边距进行设置，依次的顺序为()。top bottom left rightleft right top bottomtop left bottom righttop right bottom left使用position属性可设置元素的定位机制。要使元素以它的父元素为参照，进行相对定位，应为postion属性赋以下（）的值。staticabsoluterelativefixed

预习检查当页面中有多个元素在垂直于浏览器窗口的方向上发生层叠时，可使用()属性设置它们的层叠顺序，此属性的值越()则此元素就越接近浏览者。z 大index 小z-index 大z-number 大要将一个元素隐藏，并且要求此元素原来占据的页面空间被释放，应为此元素设置()属性，并赋值为()。visibility nonevisibility hiddendisplay hiddendisplay none

预习检查CSS盒状模型规定盒子由四个content,margin,padding,border部分组成。由盒子的外部到盒子内部，这四个部分的顺序依次是()。border padding margin contentmargin border padding contentcontent padding border marginborder margin content padding

网站重构与WEB标准

网站重构把“未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点”变成“让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。”的过程就是网站重构。网站重构>>>WEB标准

WEB标准网页主要由三个部分构成：结构（Structure）、表现（Presentation）和行为（Behavior）。它们都有各自的标准。结构结构是指一个网页有哪些内容以及这些内容如何被清晰地组织在一起。网页结构的标准主要是XML语言和XHTML语言。表现表现是指一个网页的内容以何种样式来展现。网页表现的标准是CSS语言。行为行为是指一个网页及其所它包含的网页元素以及它所属的浏览器窗口如何与用户交互。网页行为由JavaScript脚本语言来实现。XHTML

XHTML是HTML的替代者，它是从HTML继承而来，但使用了XML的规则进行严格规范。XHTML与传统的HTML的不同之处，主要来自于XML语法规范的格式要求，即要求“格式良好”。必须有且仅能有一个根元素<html></html>标签必须正确地嵌套标签必须关闭标签名和属性名必须使用小写属性必须赋值属性值必须包含在引号内特殊字符必须用实体编码来表示图片必须有替代文字注释的内容中不能包含”--”DTDXHTML文档的有效性网页文档中可以使用的标签有哪些，标签有哪些可用的属性，属性可用哪些值，标签之间如何嵌套，特殊字符如何表示等等。XHTML文档的有效性通过DTD（DocumentTypeDefinition，文档类型定义）来定义和验证。在文档第一行（<html>标签开始之前）添加DOCTYPE即文档类型声明。万维网联盟（W3C）为XHTML制定了三种DTD过渡的(Transitional)<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"“url">

严格的(Strict)<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN"“url">

框架集的(Frameset)<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Frameset//EN""url">

结构与表现分离CSS的出现，使得网页的结构与表现比较清晰地分离成为可能。对于网页包含的数据内容，由HTML标签负责承载，同时，文档内众多标签的先后顺序和嵌套关系，也说明了这些数据内容的结构。对于网页中的每一个元素最终在浏览器中以何种样式来呈现，则由CSS的样式规则来负责定义。CSS样式规则一般编写在网页的头部<head></head>中，这样可使得用来承载数据和描述结构的HTML代码与控制样式的CSS代码分离开来。如果需要二者更进一步地分离，则可将CSS样式规则转移到独立的外部样式表文件中。网页的结构与表现分离，带来的好处。WEB标准与CSS实现网页布局

网页布局又可理解为网页排版。简单地说就是：网页中的某一块内容应该放置在网页的哪个位置，占用多大的面积。大量使用表格实现页面布局，不符合WEB标准。目前普遍采用CSS结合div标签来实现网页的布局。将整个网页的所有内容分割成为相对独立的内容块，这些内容块分别用一个div标签来包裹，再使用CSS的属性分别设置这些内容块的位置和尺寸。这样整个页面的版式就受到了控制，从而实现了网页的布局。CSS的盒状模型

CSS的盒状模型（BoxModel），是使用CSS实现网页布局的基础。页面中可放置内容的窗口元素称为盒子即Box，盒子就是一个矩形区域。每个盒子都有内容Content，内边距Padding，边框Border，外边距Margin。盒状模型用于描述它们之间的层次，关系与相互的影响。margin：外边距border：边框padding：内边距，又称内补丁或间隙content：内容两种盒子盒子还有块级盒子(blockbox)和内联盒子(inlinebox)之分。这两种盒子分别是块级元素与内联元素的默认盒状模型。块级元素div、table、form、fieldset、h1~h6、p、ol、ul、li、hr等。内联元素span、a、label、input、select、textarea、img、embed、br等。块级元素显示为独立的一块（矩形区域），它的前后都会换行；内联元素不会导致换行，它会和其他内联元素一起在一行内显示。内联元素只能包含文本和其他内联元素；而块级元素则能包含内联元素和其他块级元素。标准文档流盒状模型的转换CSS属性display可以设置网页元素使用的盒状模型。为块级元素的display属性赋值为inline，那么这个块级元素转变为内联元素；为内联元素的display属性赋值为block，则这个内联元素转变为块级元素。<divid="firstDiv"> <pclass="myp">第一个段落</p><pclass="myp">第二个段落</p></div><ulid="myul"> <li>列表项目</li> <li>列表项目</li> <li>列表项目</li></ul><divid="secondDiv">secondDiv</div><divid="thirdDiv">thirdDiv</div>演示例7-1盒状模型的转换<style> #firstDiv,#secondDiv,#thirdDiv{ border:1pxsolidgray; }

#myulli{ display:inline; } .myp{ display:inline; } #secondDiv,#thirdDiv{ display:inline;}</style>演示例7-1外边距

CSS外边距属性用来设置一个元素所占空间的边缘到相邻元素之间的距离。使用margin属性来设置外边距。属性意义取值margin-topmargin-rightmargin-bottommargin-left设置元素的顶外边距。设置元素的右外边距。设置元素的底外边距。设置元素的左外边距。可使用像素单位的数字或百分比，也可使用auto。margin简写属性。在一个声明中设置外边距属性。依次设置顶外边距、右外边距、底外边距、左外边距。margin<body>

<divid="outerDiv"> <p>外部DIV块</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>

<divid="innerDiv"> <p>内部DIV块</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>

</div>

</div></body><styletype="text/css">*{margin:0;padding:0;}body{background-color:#fedcba;}#outerDiv{ border:1pxsolidblue; width:400px;

margin:0px; background-color:#abcdef;}#innerDiv{ border:1pxsolidred; width:300px;

margin:20px; background-color:#cccccc;}p{border:1pxdashedgreen;}</style>演示例7-2内边距CSS内边距属性是用来设置元素内容到元素边框的距离。使用padding属性来设置内边距。属性意义取值padding-toppadding-rightpadding-bottompadding-left设置元素的顶内边距。设置元素的右内边距。设置元素的底内边距。设置元素的左内边距。可使用像素单位的数字或百分比，也可使用auto。padding简写属性。作用是在一个声明中设置元素的内边距属性。依次设置顶内边距、右内边距、底内边距、左内边距。padding<body>

<divid="outerDiv"> <p>外部DIV块</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。

<divid="innerDiv"> <p>内部DIV块</p> <p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>

</div>

</div></body><styletype="text/css">*{margin:0;padding:0;}body{background-color:#fedcba;}#outerDiv{ border:1pxsolidblue; width:400px;

padding:10px; background-color:#abcdef;}#innerDiv{ border:1pxsolidred; width:300px;

padding:10px; background-color:#cccccc;}p{border:1pxdashedgreen;}</style>演示例7-3尺寸CSS尺寸属性指的是content内容区域的宽和高。使用width和height属性来设置内容区域的宽度和高度。属性意义取值width设置元素内容区域的宽度。可使用px像素单位或%百分比。height设置元素内容区域的高度。可使用px像素单位或%百分比。width和height<styletype="text/css">#mytable{

height:120px; border:4pxdoubleblack; border-collapse:collapse;}#mytabletd{

width:180px; border:1pxsolidgray;}#myp{

width:450px;height:80px; background-color:#fedcba;}</style><pid="myp">段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p><tableid="mytable"><tr> <td>单元格</td> <td>单元格</td></tr><tr> <td> <img

src="image/eg_bg.gif"alt="示例图片"style="width:125px;height:125px;"/> </td> <td> <p>段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字段落文字</p> </td></tr></table>演示例7-4溢出CSS溢出属性指内容区域的尺寸不足以容纳元素的内容时，超出的部分如何处理。使用overflow属性来设置如何处理溢出的内容。属性意义取值overflow设置当元素内容所需占用的区域超出内容区域时，如何处理。默认visible，其他值可用auto、scroll、

hidden。overflow<divid="mydiv"> <p>这是一个段落</p><p>这是一个段落</p> <p>这是一个段落</p><p>这是一个段落</p> <p>这是一个段落</p><p>这是一个段落</p> <p>这是一个段落</p><p>这是一个段落</p> ……</div><styletype="text/css">#mydiv{ width:300px;

height:200px;

overflow:scroll; border:1pxsolidblue;}</style>演示例7-51、2、3、小结1盒状模型中所谓的盒子如何构成？有哪两种盒子？分别包含哪些标签？CSS中哪个属性可以改变HTML标签默认的盒状模型？与定位相关的CSS属性定位方式坐标层叠顺序对齐方式定位方式和坐标position属性可以设置默认定位方式之外的其他三种方式。top、right、bottom、left用于设置定位坐标。属性意义取值position设置元素的定位机制。static，静态定位，默认值。定位于页面文档流给定的位置。relative，相对定位。在页面文档流给定位置基础上进行偏移。absolute，绝对定位。以父级元素作为参照，使用坐标进行绝对定位。fixed，固定定位。固定在相对于浏览器窗口的指定位置，不随页面滚动而移动。toprightbottomleft设置元素的某边界相对于其包含块相应边界的偏移量。默认为auto，可使用px像素或%百分比设定。绝对定位<body> <divid="first"> <p>firstdiv位于body中</p> </div> <divid="second"> <p>seconddiv位于body中</p> <divid="third"> <p>thirddiv位于seconddiv中</p> </div> </div> <divid="forth"> <p>forthdiv位于body中</p> </div></body><styletype="text/css">*{margin:0px;padding:0px;}div{border:1pxsolidblue;}p{border:1pxdashedred;}#first{position:absolute;

left:20px;top:10px;width:220px;height:250px;background-color:#abcdef;}#second{position:absolute;left:250px;top:10px;width:180px;height:150px;background-color:#abcdef;}#third{position:absolute;left:-20px;top:50px;background-color:#fedcba; }#forth{position:absolute;

left:100px;top:120px;width:180px;height:100px;background-color:red; }</style>演示例7-6相对定位<body> <pid="p_pos_left">这是一个段落</p> <p>这是一个段落</p> <pid="p_pos_top">这是一个段落</p></body><styletype="text/css">p{margin:0;border:1pxsolidgray;width:250px;}#p_pos_left{position:relative;left:20px;}#p_pos_top{position:relative;top:20px;}</style>演示例7-7固定定位<body> <divid="footer"> <p>不管页面如何滚动，我自始至终都在这里。</p> </div> <p>页面正文</p><p>页面正文</p><p>页面正文</p><p>页面正文</p> <p>页面正文</p><p>页面正文</p><p>页面正文</p><p>页面正文</p> <p>页面正文</p><p>页面正文</p><p>页面正文</p><p>页面正文</p></body><styletype="text/css">#footer{

position:fixed;bottom:10px;right:10px; width:350px;height:50px; background-color:#fedcba;}</style>演示例7-8层叠顺序网页中的多个内容块可能使用多种不同的定位方式，这可能导致它们在垂直于浏览器窗口（或文档正文区域）的方向上层叠起来，相互遮挡。使用z-index（Z轴索引）属性可以设置它们的层叠顺序。属性意义取值z-index设置元素在垂直浏览器窗口方向上的层叠顺序。使用数字设定，数字越大越靠近浏览者。为负数时，作为页面正文的背景显示。z-index<body> <divid="first"> <p>firstdiv位于body中</p> </div> <divid="second"> <p>seconddiv位于body中</p> <divid="third"> <p>thirddiv位于seconddiv中</p> </div> </div> <divid="forth"> <p>forthdiv位于body中</p> </div></body><styletype="text/css">*{margin:0px;padding:0px;}div{border:1pxsolidblue;}p{border:1pxdashedred;}#first{position:absolute;z-index:1;left:20px;top:10px;width:220px;height:250px;background-color:#abcdef;}#second{position:absolute;z-index:3;left:250px;top:10px;width:180px;height:150px;background-color:#abcdef;}#third{position:absolute;background-color:#fedcba;left:-20px;top:50px; }#forth{position:absolute;z-index:2;left:100px;top:120px;width:180px;height:100px;background-color:red; }</style>演示例7-9对齐方式对齐方式属性用于设置元素的内容在作为容器的元素内部的对齐方式，

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论