|
在本教程的第2章中，向读者展示了一些禅意花园网站上很出色的作品，但是没有深入地介绍作品的设计和制作方法，在本章中，将更深入地分析几个典型的作品，看看它们是如何布局、如何实现出来的。此外，通过这几个页而的分析过程，向读者介绍分析网页的一些基本方法和工具，以便读者能够自己分析更多的作品，收获更多对自己有益的技术和技巧。 不少初学者在学习了一些CSS知识后，往往感觉虽然理解了基本的知识点，但是真正实践时无从下手，对于看到的一些比较复杂的页面，更是找不到分析思考的突破口。 实际上．学习技能的方法都是类似的，需要从模仿开始。这里说的模仿不是指抄袭，而是努力地点了解别人的成功作品，找出优点，进行总结。之后，再努力把这些技术用在自己的作品上，实现自己的创意，这样我们的技术水平就逐渐提高了。 其次，读者要注重实际的动手制作。有不少初学者总是在还没有把CSS的基本原理搞清楚的时候，就希望一步到位，自己创作出很有创意、很复杂的作品来，然而实际上，没有实际的动手能力是无法把创意付诸实践的，这就好像要做一名成功的服装设计师，先要能做一名裁缝，而一个好的裁缝不一定能够成为好的服装设计师一样。 总之，不断地从别人的成功作品中吸取对自己有用的东西，就能很快地提高。lodidance.com 一、191号作品分析 下面以191号作品为例，来进行一些讲解。http://www.csszengarden.com/?cssfile=191/191.css所示的是第191号作品的效果。这是俄罗斯设计师Alexander Shabuniewicz（个人网站地址http://beholder-eye.info）的作品。作品名为《The Diary》，以一个日记本为背景，右上角配有一个红色的“书签”，左下角有一个黄色的“贴纸”，作为装饰，效果非常精致一这个作品布局平衡，疏密得当，错落有致，色彩谐调，细节精致，看起来非常舒服。 这个页面是如何措建出来的呢？初看起来这个页面似乎是一个两列的布局方案，但是仔细观察可以发现，每个部分都是标题和内容一左一右，交替错落。实际上，这是个单列的布局，右下角的linklist部分是使用绝对定位盖上去的。 注意：任何一个页面都存在多种布局方法，我们分析某一个作品案例，并不是说必须要用这种方法，而仅是为了说明一些典型的布局方法，供读者借鉴。 Dave在网站上专门提到，禅意花园网站并不是一个模板网站，里面的作品的设计和图像不能被用于其他网站，但是鼓励大家研究这些案例，受到一些启发之后，做出更好的网站。 禅意花园的作品有一个很大的限制，就是它的HTML结构不能变。从前面的HTML结构可以看到，整个页面实际上就被分为了3个部分，并且都是依次排列的，因此很多本教程前面介绍的布局方式，在这里是不能使用的，禅意花园中的很多作品都是使用了绝对定位的。 在基本了解了这个作品之后，进行具体的分析。为了了解191号作品的基本布局结构，一种方法是仔细分析它的CSS代码。 如果希望对整个页面有一个总体的认识，还可以使用一些辅助的工具。例如，使用Firefox浏览器，则可以使用它的一个扩展插件——“Web Developer”，这个插件对分析、调试页面非常有帮助？因此，这里插入一节内容，简单介绍一下这个插件的作用和基本用法。 首先确保安装了Firefox浏览器，因为Web Developer只能运行在Firefox浏览器上，然后打开网页https://addons.mozilla.org/en-US/firefox/addon/60。 单击“Add to FireFox”按钮，就会自动在浏览器上安装这个插件。按装完成后，在Firefox的工具栏中会出现一个工具栏，有一横排按钮。如果没有看到这个工具栏．可以用鼠标右键单击工具栏，在弹出菜单中选择打开或关闭这个工具栏，如图1所示。  图1 打开Web Developer扩展 这一排按钮具有有很多帮助设计分折网页的功能，这里结合案例介绍常用的功能。 1．了解元素的位置和占据的空间 如果要了解一个页面中各个元素所在的位置和占据的空间，可以使用它的“outline”（标示）功能，如图I2所示。 例如按下Web Developer工具栏中的“outline”按钮，在打开的菜单中选择“outline Headings”（标示标题）命令，就会为所有使用h1—h6这些标题标记的网页内容绘制各自的轮廓线框，不同的级别会用不同的颜色表示。例如，图2中可以看到，最上面红色线框表示的是h1元素，它下面的绿色线框表示的是h2元素，再下面有若干个蓝色线框，分别对应h3元索。可以了解到，原文件中的各级标题文字都被隐藏了，而使用图片代替了相应的文字。  图2 显示轮廓线选项的作用 接着再次选中该命令，就会取消标题的轮廓线框 2．了解绝对定位元素 选中同一个菜单中的“Outline Positioned Elements—>Absolute"（“标示 已定位元素—>绝对定位”）命令，这时页面中使用了绝对定位也就是“position:absolute”的元素，就会被轮廓线包围。例如在191号作品中，如图3所示，整个内容被轮廓线包围，说明这个页面的水平居中是通过负margin实现的。此外，左下角的“linklist”区域也出现了轮廓线，这就验证了前面的判断，它确实是通过绝对定位“贴”到左下角位置的。  图3 显示出绝对定位的元素的轮廓线 3．了解块级元蠢 还可以通过“Outline Block Level Elements”（标示区块标记）命令，让所有块级元素显示轮廓线，如图4所示。  图4 显示块级元素轮廓线 如果感觉这样比较混乱，看不清楚它们之间的关系，可以使用“Outline Custom Elements”（自定义标示元素）命令，仅显示选中的元素的轮廓线。选择这个命令后，会出现一个对话框，如图5所示。  图4 定制显示轮廓线的方式 在对话框中可以输入一个或多个HTML标记名称，并制定轮廓线的颜色。在设置了为div和h3标记绘制轮廓线之后，可以看到页面div和h3都以轮廓线方式表现它们的位置和所占的空间。 通过上面几个简单的操作，这个页面的基本布局已经很清楚了。 4．了解同页拓扑结构 还可以选择Web developer工具栏的“Information”（网页信息）按钮下的“Display TopographicInfomation”（显示排版信息）命令。 此时页面中所有的背景图像都不显示了，文字以白色显示，各个部分的背景色是深度不同的灰色，表示了元素的嵌套深度，越浅的灰色，表示该元素的嵌套深度越浅。 读者还可以通过上面介绍的方法，继续对这个页面进行分析，最终可以了解到整个页面的层次结构图。 图中虚线以上是“.intro”部分，虚线以下是“.supportingText”部分，左下角的半透明框表示“.linklist”部分。整个页面就是由这3个部分构成的，化简后的布局结构如图5所示。 至此，191号页面的整体结构就十分清楚了。接下来。再用两个案例说明下一页面结构的总体分析方法。  图5 191号作品的布局示意图 二、026号作品 026号作品是—个非常成功的作品。在前面介绍CSS布局的章节中，曾介绍过这个页面，完整的页面效果如http://www.csszengarden.com/?cssfile=026/026.css所示。 026号作品简化以后的布局结构如图6所示。  图6 026号作品简化后的布局示意图 三、175号作品 下面再以175号作品为例，这个作品如http://www.csszengarden.com/?cssfile=175/175.css所示，是一个中规中矩的版式。lodidance.com 可以看到，虽然页面布局不同，但是各个div的id与前面的案例都是相对应的。这就是利用CSS禅意花园中的作品学习CSS的好处，可以不用每做一个方案就要彻底重新编写一次HTML。CSS禅意花园的HTML具有很好的灵活性，逐渐记住它的基本结构以后，就可以大量地分析，借鉴和练习，这样对提高是是有帮助的。 本章小结 本章对禅意花园网站的HTML结构进行了介绍，并在此基础上，制作了一个简单的CSS布局的页面。然后讲解了分析比较复杂的页面结构的方法。 任何在互联网上看到的好作品，读者都可以借助本章介绍的软件工具和分析方法，对它们进行分析和研究，学习它们的特点。 |
| 编辑：网页学习网 |
| 本文地址:http://www.lodidance.com/css/jc/953.html |
