网页设计之模型

《网页设计之模型》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、网页设计之模型最近看了许多关于网页设计和Web标准的文章，对于网页设计的模型有了更为深刻的理解。一个优秀网页设计模型不仅仅在美观上有出色的表现，同时也是前端Web工程师所喜欢的，它会具有非常好的可移植性和文档标准性，对于应用Css和Js都是非常好的Dom模型。我在这里说的设计模型主要分为两个方而，一个是表现模型，另一个是组织模型。表现模型负责网页元索的表现效果设计，包括对齐、重复、留口、对比、强调、边界的设计思想的合理应用以及结合细节处的微创新和Photoshop处理效果，以达到规律、舒适、层次感、交

2、互的阅读体验。组织模型偏向文档的组织与实现。通过文档内容的合理组织，以达到优秀的Dorn模型，符合SEO、有代码上的层次感与语义的模型，对Web前端开发者将拥有非常美妙的体验。因此对于如何将设计模型转化成组织模型，是一个非常需要创新、经验与灵活思维的事情。如何透过表现得到一个良好的组织模型，是一个Web前端开发者必须具备的一项能力。需要掌握这项能力，我认为需要下面的儿项基础技能：1、对于Web标准有着非常深入的理解与体验，了解语义化的思想以及实现细节；2、对于Css、Js、JQ有较深入的理解，指导如此

3、才能搭建合理的Dom模型；3、对于网站的SEO有着初步和大致掌握，能够在写代码吋同吋优化搜索引藥对网站的体验；4、灵活的思维与创新能力，实现的组织模型拥有良好的通用性和可拓展性;5、对于设计理念与思想有较深入的认知与领会，能够进行前端微调达到最完美的效果。下而是我修改的一个例子，仅捉供参考，由于没有网页设计师设计，主耍是按照口己对设计的理解进行的修改，有部分细节并没有修改到位。上面是根据占己的体验与经验进行的设计修改处，下面我给出我修改好的图。下面我将对我修改好的设计模型如何转化为组织模型进行分析。在

4、分析之前，我想对于控制宽度、高度、间距的方面进行简单的阐述，以作修改中的指导。1、宽度控制一般使用外层控制，通过外层宽度设定来逐层控制里层元素的宽度表现，该例子中我只对左右两个栏的宽度设定，其他元索的宽度都是通过自适应效果达到所需要的表现效果的。2、高度控制通常使用里层控制，通过控制最基层的元素的高度和行椎高度，最终逐层得到最外层元素的高度。例子中的右侧列表高度就是使用了这个理念。这里注意一定要清除浮动，以防出错。关于何吋应该使用清除浮动，清除浮动的方法，浮动提出的起源、浮动布局的根据和注意点，可以参

5、考我博客中的相关文章，希望能有所收益。3、间距控制。这里我想说明的第一点是盒子模型，每一个Web前端开发师在通过Css來表现样式的时候，中心一定要有非常明确的盒子模型，或在Css初始化的吋候可以默认将边框显示，以辅助制作。只有在明确盒子边框基础上，才能够确定盒子间元素的间距（通过Margin外边距控制），盒子与盒子内容的留白间距（通过Padding内留白控制），盒了内容宽度、高度的控制。基于这一点，我还想说明的是尽量能够有意识地去控制这样一些间距元素，以达到非常美妙的体验效果。在此基础上,我们需要了解

6、Padding相互重合的处理方式、Margin相互重合的处理方式，尽量能够通过这样一些效果，以最为简化的代码实现我们所需耍的效果。下面我以网站文章内容的P元素为例，P元素的边距控制最好是通过Margin來控制垂总元素间的间距，使用Padding来控制左右的留口效果。因为Margin垂直重合的效果是选择较大的Margin值作为两个元素的外边距，这样能够方便处理P元索之间的间距，P元索与其他元索的间距，因为你只要设定它的垂直Margin值就能知道其表现效果。分析其中我就右侧的最热推荐栏目进行组织模型的分析

7、。代码组织：最热推荐1……这里的幣个uL元素中包含了9个Li,每个li的高度是33px;height:21px;padding-top:8px;padding-bottom:3px;border-bottom:1px;这里的height属性是通过Li元素屮的span、a>em元素的行高來确定的行框高度。有一些小错误，我设置的行高是20px,但是由于span浮动后貌似底基线没有对齐所导致的，这里不进行展开讨论。所以我在这里使用的盒子模型是以H为基础，li的高度通过Li里面的元索和内容决定，li的宽度通过

8、侧边栏的高度逐层计算得到。每个li通过设置Padding属性来处理超白，因此9个li组成的ul鬲度为33*9=297px;对于li中的元素这里也不展开叙述，只要按照设计模型进行实现就可以了。ul外层有big和small两个层。通过两个边框来表现设计效杲，其他通过padding和背景颜色來表现。是整个栏冃的了标题，同样方法表现出来。忍耐和坚持虽是痛苦的事情，但却能渐渐地为你带来好处。一一奥维德