《CSS网页设计》课件-第12章变宽度网页布局剖析与制作

上传人：青*** IP属地：福建上传时间：2023-09-04 格式：PPT 页数：28 大小：1.25MB 积分：2.4 举报 版权申诉

已阅读5页，还剩23页未读，继续免费阅读

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

第12章变宽度网页布局剖析与制作

“1-2-1”变宽度网页布局12.1“1-3-1”宽度适应布局12.2变宽布局方法总结12.3分列布局背景色问题12.4CSS布局与传统的表格方式布局的分析12.5

上一章对固定宽度的页面布局做了比较深入的分析和讲解。本章对变宽度的页面布局做进一步的分析。

变宽度的布局要比固定宽度的布局复杂一些，根本的原因在于，宽度不确定，导致很多参数无法确定。因此必须使用一些技巧来完成。本章将介绍一些通用的方法，并对变宽度网页布局的总体情况进行归纳。12.1“1-2-1”变宽度网页布局

12.1.1“1-2-1”等比例变宽布局

图12.1“1-2-1”等比例布局12.1.2“1-2-1”单列变宽布局

图12.3“1-2-1”单列变宽布局12.2“1-3-1”宽度适应布局

12.2.1“1-3-1”三列宽度等比例布局

12.2.2“1-3-1”单侧列宽度固定的变宽布局

图12.7结构示意图

图12.8修正后的结构示意图12.2.3“1-3-1”中间列宽度固定的变宽布局

图12.9结构示意图12.2.5“1-3-1”双侧列宽度固定的变宽布局

图12.10中间列变宽的布局效果12.3变宽布局方法总结

图12.13单列布局的分类示意图

图12.14双列布局的分类示意图

图12.15三列布局的分类示意图12.4分列布局背景色问题

图12.16基本的三列布局12.5CSS布局与传统的表格方式布局的分析

图12.22版面布局

最后，总结CSS布局方法与表格布局方法相比，有如下几点明显的优势：

● CSS使页面载入更快；● CSS可以降低网站的流量费用；● CSS使设计师在修改设计时更有效率，而代价更低；

● CSS使整个站点保持视觉的一致性；● CSS使站点可以更好地被搜索引擎找到；

● CSS使站点对浏览者和浏览器更具亲和力；● 在越来越多的人采用Web标准时，掌握CSS可以提高设计师的职场竞争实力。

本书篇幅有限，尽管在CSS布局方面还有很多值得进一步探索的内容，但是这里就不再深入，这里仅提出几个值得思考的问题，如果读者有兴趣深入探讨，可以在互联网上查找相关的资料，也可以访问本书作者的网站，与作者交流。

对于CSS布局的网页应该努力实现如下要求：● 宽度适应多列布局，并且保证页头和页脚部分能够正确显示；● 可以指定列宽度固定，其余列宽度自适应；

● 在HTML中，各列以任意顺序排列，最终效果都正确显示；● 任意列都可以是最高的一列，且保证不会破坏布局，不会产生重叠；

● HTML和CSS都应该能够通过Web标准的验证；● 良好的浏览器兼容性。

以上的要求中的第3条，上面的讲解中没有深入介绍，请读者自己探索，这一条原则的目的有两个：

（1）如果页面最终效果和各列在HTML中的顺序相关，就没有真正实现内容与形式的彻底分离；

人人文库> 全部分类> 教育资料 > 中学教育

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