DW网页设计—第11章进一步讨论页面布局的方法解析.ppt

第11章 进一步讨论页面布局的方法 在了解了基本的层和框模型后，接下来便可以进一步去讨论，可以做出怎样效果的页面。设计者需要将页面划分为不同的区域，就好像是在城市规划，将不同的页面内容布局在不同的位置，哪里放置公园、哪里放置社区、哪里是商业区等等。页面的分布和内容所处的位置，将会给浏览者传递重要的网站讯息。 11.1 页面中的定位 当能够娴熟地将层布局在页面中时，Web设计一定会带给用户无限的乐趣。在第10章中，定义框模型的时候，已经了解了有一个position属性。基于这个属性的运用，可以将页面内容定位分成静态定位、绝对定位、相对定位、固定定位和浮动这5种方式。 11.1.1 静态定位 position默认情况下定义的便是static属性，此时的框模型是静态定位，和其他文本内容配合。代码的写法是： position:static; 11.1.2 相对位置 如果将例子11-1中position属性改成relative，其作用表示相对定位，那么它所相对的参照物，就是static属性下的位置，也就是默认情况下的位置。当设定不同的数值时，相对于初始位置发生改变，而初识位置会留下空白占位。这里，可以通过top、right、bottom和left属性来控制位移。如将示例11-1代码中的12和13句属性改写成： position:relative; //采用相对位置定位 left:20px; 11.1.3 绝对定位 绝对定位的属性是absolute，也许它是使用最多的属性之一。较之于相对定位的relative，它的改变在于当对象发生位移时，原先的初始位置，如同被挖去了一样。这个对象独立于其他的页面内容，而初始位置的空白会被其他内容自然填补掉。 此外，绝对定位的对象并非是相对于初始位置发生位移。事实上，它是相对于上一级的对象的初始位置发生位移。如果上一级的对象是浏览器窗口，那么它就是相对于整个页面来发生位移。同样，绝对定位也可以使用top、right、bottom和left属性来控制位移。 11.1.4 固定定位 固定定位比较类似于绝对定位，当页面长度超出浏览器窗口时候，此时会出现滚动条。区别就在于绝对定位下的页面对象的框，会随着滚动条和页面一起移动，而固定定位下的页面对象的框则不会随之滚动。同样，固定定位也可以使用top、right、bottom和left属性来控制位移。 11.2 浮动层 浮动层可以将所定义的页面内容方便地放置在页面的左边或者右边，通常放入图像的时候使用这种方法会很方便。事实上，浮动层中可以应用于任何对象，浮动框的代码写法写为： float:left; 也可以定义成right和none。 11.2 浮动层 浮动层定义在文本的左边，而文本被挤压在右边。所以，浮动层并不是说会浮动在页面的上方而盖住下面的文本。相反，浮动层更像是可以随意嵌入页面的一个技术。此外，如果不需要浮动层的左右存在页面内容，可以使用“clear”属性来清除页面其它内容。在代码的样式表定义中，加入clear属性的声明，代码如下： span {clear:left; } 11.3 CSS的新奇技术以及未来发展 在现在流行的CSS样式设计中，包括本书中所讨论的大部分内容都是基于CSS 2.1。而现在，CSS 3.0也慢慢地向我们走近，其中多数功能目前还未能被广泛的支持。但是其中不乏一些已经尝试使用的功能。 11.3.1 图像替换技术 图像替换技术是指使用图像替换页面中文本的功能，类似于在页面中插入图像，只是这种方法更为方便，易于代码管理。通常来说，设计者习惯使用有意义的图像去替换一些标题、LOGO、某些特定的页面背景。 11.3.2 CSS 3.0中的新发展 2008年开始，W3C组织起草新的CSS 3.0的标准。从中可以发现，在新的标准中，大幅扩展了background和border属性的功能。主要表现在对于背景图像和边框的精细修改，如修改边框的border-radius，它能使直角边框改成圆角，其效果如下图所示。 11.3.2 CSS 3.0中的新发展 定义框模型下的文本阴影效果的box-shadow属性。如下图所示。 11.3.3 实现圆角框模型 目前IE 10和其他浏览器的最新版本已经能有效地支持border-radius属性。 11.4 案例：有效的管理页面布局 标准化工作当然是更为专业的设计习惯，本节将介绍YAHOO公司的一种YUI Grids CSS推广的布局思路。这是一种很好的布局页面的思路，通过这些可以学习到出色布局经验，先解决什么问题，再解决什么问题。 11.4 案例：有效的管理页面布局 此外，在布局页面时候，要养成一个良好的定义样式表命名的习惯，如表11.1所示，仅供参考。