静态网站设计,一、网页布局原则,在网页设计的众多环节中，页面布局、颜色搭配是最为重要的环节之一。 常规网站中页面布局有以下几种特点:,1、平衡性 文字、图像等要素的空间占用上分布均匀。 色彩的平衡，要给人一种协调的感觉。,2、对称性 对称是一种美，我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。,3、对比性 让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。,二、网页布局方法,5、比例 比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。,在制作网页前，可以先勾画出网页的草图。网页布局的方法有两种，第一种为纸上布局；第二种为软件布局。下面分别加以介绍：,1、 纸上布局法 许多网页制作者不喜欢先画出页面布局的草图，而是直接在网页设计器里边设计布局边加内容。这种不打草稿的方法不能让你设计出优秀的网页来。所以在开始制作网页时，要先在纸上画出你页面的布局草图来。,2、 软件布局法 如果你不喜欢用纸来画出你的布局意图，那么你还可以利用Photoshop、Fireworks等图像处理,三、常见版面的布局形式,软件来完成这些工作。图像处理软件所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用图像处理软件可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。,网页设计要讲究编排和布局，虽然网页设计不同于平面设计，但他们有许多相近之处，应加以利用和借鉴。网页的版面布局主要指网站主页的版面布局，其他网页的版面与主页风格基本一致。为了达到最佳的视觉表现效果，应讲究整体布局的合理性，使浏览者有一个流畅的视觉体验。,常见的网页布局形式大致有“厂”字型、“口”字型、“海报”型、“同”字型、“三”字型和“框架”型布局。,1、“厂”字型：,最上方是广告条，页面下方左面是菜单，右面显示页面内容，整体上类似汉字“厂”，所以我们称之为“厂”字型布局。这种布局条理清晰、主次分明，非常适合初学者学习，但略微有点呆板，如图1所示。,2 、“口”字型,这种布局类似一个方框，上下是广告条，左面是菜单，右面是友情链接，中间是网页效果，页面布局紧凑、信息丰富，但四面封闭，给人一种压抑的感觉，如图所示。,3、 海报型,这种布局就像我们平时见到的海报一样，中间是一幅很醒目、设计非常精美的图片，周围点缀着一些图片和文字链接。这种设计常用于一些时尚类和公司的首页，非常吸引人。但大量的运用图片导致网页下载速度很慢，而且提供的信息量较少，如图所示。,4、“同”字型,这是一些大型网站首页常用的类型，在网页最上面是网站的标题以及BANNER广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。中国自助网采用的就是这种类型的布局，如图所示。,6、“框架”型, 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文，如图1-18所示。我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结构非常清晰，一目了然。但是这种结构在使用框架时有个问题，即不容易被搜索引擎找到。如果考虑到这一点，尽量少用带框架的页面。,5、“三”字型,上面是标题或广告条一类的内容，下面是正文，一些文章页面或注册页面等就是这种类型，如图所示。,四、常见的网页布局方法,网页设计现有三种布局方法，一种是表格布局，一种是框架布局，还有一种是现在W3C极力推荐的CSS布局。不过，就目前来说，由于xhtml并未完全占据主流，表格布局依然是大多数网页设计师的首选。,总之，网页布局设计要按照网站的实际情况，根据网站受众的喜好来设计。这样才能使网站受到更多人的欢迎。,1、利用表格布局网页 表格布局好像已经成为一个标准，随便浏览一个站点，它们一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。对于表格布局，你可以随便找一个站点的首页，然后保存为HTML文件，利用网页编辑工具打,开它(要所见即所得的软件)，你会看到这个页面是如何利用表格的。,2、 框架布局 不知道什么原故，框架结构的页面开始被许多人不喜欢，可能是因为它的兼容性。但从布局上考虑，框架结构不失为一个好的布局方法。它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。,3、 利用div+css布局网页 在新的HTML4.0标准中，CSS(层叠样式表)被提出来，它能完全精确的定位文本和图片。CSS对于初学者来说显得有点复杂，但它的确是一个很好的布局方法。利用CSS布局，Html可以得到很好的简化，将系统的原型转变为产品会更简单，曾经无法实现的想法利用CSS都能实现。 CSS布局网页的特点：（1）页面载入会更快。,（2）能够降低流量费用。 （3） 便于设计时的修改，提高工作效率。 （4） 能够使整个站点保持视觉的一致性。 （5）可以更好地被搜索引擎搜索到。 （6） 使站点对浏览者和浏览器更具亲和力。,