工作（复制/粘贴），HTML标记和一些额外的CSS调整问题。
在仔细看看图3表明，布局在Rows1和2之间的部分是著名的三栏流体布局正是网络上的许多商业网站使用的模式。只是增加了一个额外的基元在第2行和第3行之间。
现在迭代的是基元的第二个实例。为此，将的HTML代码粘贴在第二个实例中间布局内的基元中。这一次，不需要添加任何额外的CSS指令，因为这些将被重用。 2.4.3分形迭代方式
尽管可以，却并没有把迭代的过程与其他的变换结合起来，如编译和反射。总体而言，所使用的CSS代码是相当简陋。没有尝试去优化CSS的样式，将所有元素都设置为相同的高度，或设置单个元素内的CSS样式。实际开发中是一定要美化CSS样式文件的，而去追求更优的用户体验。在本节中将主要介绍几种分形设计中，以基元为单元，嵌套迭代后获得的布局模式。
图2-5 一些主题和变换后的结果
样式A和B可以通过注释掉或者移除掉div.center和div.container-center类和修改值来设计成以前的CSS样式。举例来说，对于A可以设置div.left和div.right的宽度都为50%，而B中对应的设置为25%和75%。
调整了浏览器窗口的大小来验证列的长度已调整的刚刚好，元素中的细小差别是因为正在框架中增加边框还有其中的单个元素中包括的下级元素的数量并不相同的原因，在图4中的差别并不那么明显。
为了填补这些差别，可以使用空的元素来填充或者overflow:hidden这个属
20
性，
但这样可能会引起其他的设计问题需要解决，最好选择隐藏或完全消除边界的设计布局。
样式A和B引起的并联多元素设计布局在网络上很常见，但并不是很有必要把它当成一种时尚或者同繁琐的表格搭配在一起。样式C代表着一种更复杂的布局。像添加其他转换比如旋转会导致更复杂的图案。
图2-6。附加样式和它们的结果，旋转操作处理
“丢失”的元素中的一些样式意味着没有文字内容被加入到这些里面，或着举例来说，这些都是保留的图形。这仅仅是一个惯例而已。
最后，但并非最不重要，通过简单地为这三个的例子里面的所有div.left和div.right的类重新命名的讨论并添加这些加入CSS资源当中，高度“液体化”的多重分形拼接布局方式也被收录到14个CSS样式中的一小部分集合当初了。 2.5 DIV+CSS设计优势
在第二章中,介绍了当今web网页开发中主要用到的DIV+CSS技术，可以看出这种技术和传统的界面设计(基于table的设计理念)有以下几个优势:
1.布局灵活，便于维护，代码清晰
简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量(因为重复设置的格式将被只保存一次)。这对SEO （Search Engine Optimization）（搜索引擎优化）是很有帮助的，实现加快网页解析的速度。
2.利于后期优化
只要修改保存着网站格式的CSS样式表文件就可以改变整个站点的风格特色，在修改页面数量庞大的站点时，显得格外有用。避免了一个一个网页的修改，
21
大大减少了重复劳动的工作量。将所有用到的CSS样式封装到一个或多个相对独立的.CSS文件中，易于引用，批量修改，更改一个网站的风格时，只需要去更改相对的CSS文件即可，而当整个系统风格要保持一致的时候，也只需要去引用相同的CSS文件即可。
3.元素精确定位
用DIV块来标识每个元素，然后用CSS语句来控制每个对应的元素的属性，规定它的大小，字体，背景等。这样让整个网页整齐，规范。让每个元素在自己的位置表现出最优的效果。可以很好、很方便地去控制这个图片的大小，布局等细节属性。
4.内容结构与格式控制相分离
浏览者想要看的是网页上的内容结构，而为了让浏览者更好地看到这些信息就要通过格式控制来帮忙，把两者分开方便了网页的设计者，能够对页面的布局施加更多的控制，也就是把CSS 代码独立出来从另一个角度控制页面外观
5.对浏览器的兼容性
符合W3C标准。支持浏览器的向后兼容，兼容性更好，符合web标准规范的发展趋势，可以在几乎所有的浏览器上都可以使用，不会出现在不同的浏览器中效果差距很大的情况。
6.良好的开发体验
强大的字体控制和排版能力，CSS控制字体的能力比糟糕的FONT标签好多了，CSS不再需要用FONT标签或者透明的1px图片来控制标题、改变字体颜色、字体样式等等。
更高的易用性，使用CSS可以结构化HTML，例如：p标签只用来控制段落，h1-h6标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。
更好的扩展性。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint等。
更灵活控制页面布局，通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。Table表格布局灵活性不大，你只能遵循 table tr td 的格式。而div你可以 div ul li 也可以 ol li还可以 ul li....
更好的重构性。Table表格布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结
22
构的重构性强。
第三章 基于DIV+CSS技术的网站界面设计
回顾网页设计发展历史，不论对比几年前进步多少，现今仍处在网站设计业的初期。行业的标准、客户的观点以及审美的准则都不尽成熟。仅仅看到了这座高山的一部分轮廓，实际上要向上攀岩、摸索前行的路还很远。
依旧还是设计师，但是能够在满足客户的目的的同时，确保作品的艺术性和完整性。
市场就是客户的客户，终端客户接收了网站传递给他们的信息概念：看到暖色，他们会感觉这个企业是很有亲和力的，容易沟通的；看到大量的矢量风格的网站插图时，他们会感觉这个企业是潮流派的、有个性的、有活力的。作为网站真正的使用者，他们比任何人都知道自己需要什么。 3.1 项目设计实例分析 3.1.1 项目简介
物流配送公司需要一个物流管理系统来管理其基本业务和信息。该物流配送公司的主要业务是为用户配送货物，组织结构分为省公司和配送点。省公司主要负责车辆的维护、配送点、配送线路、配送价格的维护；配送点主要是接收客户订单，并联系省公司车队将货物运送到目的地，同时还负责货物的配送工作。
对于一个货物的费用应包含如下两部分费用：运输费用和配送费用，运输费用是指由配送地到目的地配送点的费用，而配送费用是指由目的地配送点到客户指定地址的配送费用。
本系统根据客户提出的需求，从配送管理信息化，和路线安排合理化入手，开发的一款快递物流系统，客户在物流运输方面能够方便迅捷的完成任务。 3.1.2 需求分析
前期的需求分析是网站设计和开发的第一步，直接影响后期设计和开发的进度和成功率。尤其是对于一个成功的网站页面的设计直接关系到能否人性化的把所有功能展现给每一个用户。首先，应该了解几个问题：
1）都有哪些类的用户会用到的网站？
23
相关推荐：
loading