首页 理论教育HTML与CSS网页设计:第7章WEB标准与页面布局基础

HTML与CSS网页设计:第7章WEB标准与页面布局基础

【摘要】:视频教学资源学校目标理解WEB 标准了解XHTML理解结构与表现分离理解CSS 的盒状模型掌握CSS 实现页面布局所需的样式属性本章单词请在预习前完成下列单词的学习,将其写在横线上。在持续多年的网站重构浪潮中,经过广大WEB 设计者和开发者广泛的实践和传播,WEB标准的概念逐渐深入人心。而现在,遵循WEB 标准进行网站和网页设计与开发,已成为业界的共识。

视频教学资源

学校目标

理解WEB 标准

了解XHTML

理解结构与表现分离

理解CSS 的盒状模型

掌握CSS 实现页面布局所需的样式属性

本章单词

请在预习前完成下列单词的学习,将其写在横线上。

① behavior([bɪ'heɪvjə]反应,行为,举止)______________________________

② XML(Extensible Markup Language,即可扩展标记语言)_________________

③ DTD(Document Type Definition,文档类型定义)________________________

④ margin(['mɑ:dʒɪn] 外边的空白,外边距,外补丁)______________________

⑤ padding([ˈpædɪŋ]填充物,内边距,内补丁)____________________________

⑥ block([blɒk] 街区,块)__________________________________________

⑦ inline(['ɪn,laɪn] 内联,行内)____________________________________

⑧ overflow([ˌəʊvə'fləʊ] 泛滥,溢出)________________________________

⑨ position([pəˈzɪʃn] 位置,定位)___________________________________

⑩ relative([ˈrelətɪv] 相对的)_____________________________________

⑪ absolute([ˈæbsəlu:t] 绝对的)_____________________________________

⑫ vertical([ˈvɜ:tɪkl]垂直的,竖直的)________________________________

预习任务

1.当使用margin 属性对元素的4 个外边距进行设置,依次的顺序为( )。(选择 一项)

A.top bottom left right

B.left right top bottom

C.top left bottom right

D.top right bottom left

2.使用position 属性可设置元素的定位机制。要使元素以它的父元素为参照,进行相对定位,应为postion 属性赋( )的值。(选择一项)

A.static(www.chuimin.cn)

B.absolute

C.relative

D.fixed

3.当页面中有多个元素在垂直于浏览器窗口的方向上发生层叠时,可使用( )属性设置它们的层叠顺序,此属性的值越( )则此元素就越接近浏览者。(选择 一项)

A.z 大

B.index 小

C.z-index 大

D.z-number 大

4.要将一个元素隐藏,并且要求此元素原来占据的页面空间被释放,应为此元素设置( )属性,并赋值为( )。(选择一项)

A.visibility none

B.visibility hidden

C.display hidden

D.display none

5.CSS 盒状模型规定盒子由content,margin,padding,border 4 个部分组成。由盒子的外部到盒子内部,这4 个部分的顺序依次是( )。(选择一项)

A.border padding margin content

B.margin border padding content

C.content padding border margin

D.border margin content padding

6.在网页中显示一个带绿色实线边框的层,如下图所示。(参考本章例7.1)

带边框的层

7.在网页中显示一个带红色虚线边框的层,如下图所示。(参考本章例7.2)

虚线边框层

8.在网页中显示一个带黑色实线边框的层,层中的文字距离左边框线有20px 的间隔,如下图所示。(参考本章例7.3)

使用间隙的层

从21 世纪的最初几年开始,在网站和网页开发领域,由众多的网站运营者、WEB 设计师、WEB 开发人员共同掀起了一股网站重构浪潮

按照《网站重构》这本业界经典名著的解释,“未采用CSS,大量使用HTML 进行定位、布局,或者虽然已经采用了CSS,但是未遵循HTML 结构化标准的站点‘变成’让标记回归标记的原本意义。通过在HTML 文档中使用结构化的标记以及用CSS 控制页面表现,使页面的实际内容与它们呈现的格式相分离的站点”的过程就是网站重构。

在持续多年的网站重构浪潮中,经过广大WEB 设计者和开发者广泛的实践和传播,WEB标准的概念逐渐深入人心。而现在,遵循WEB 标准进行网站和网页设计与开发,已成为业界的共识。