网页布局原则.docVIP

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