第3章 网页的局.pptVIP

* 第3章 规划网页的布局 * 3.1 网页布局实例 3.1.1 网页的风格 在对网页插入各种对象、修饰效果前，一定要确定要确定网页的总体风格。 针对不同的网页风格，大体可以将网页分为两大类：商业网页和个人网页。商业网站一般都有比较统一的布局设计，而个人主页由于内容专一，不可能象商业网站那样内容丰富、信息量大。但恰恰因为这个原因。个人主页的形式更灵活，更容易创造出美感。 3.1.1 网页的风格1 “搜狐”的主页的内容很丰富，色彩鲜艳并有许多大幅广告和浮动广告栏。 3.1.1 网页的风格2 微软中国的主页，内容比较专一，内容非常有条理，栏目突出，没有凌乱的感觉。 3.1.1 网页的风格3 这是一个个人主页，它看起来更简单，感觉非常清新。 3.1.2 网页布局实例 所谓网页的布局，通俗地说，就是确定网页上的网站标志、导航栏、菜单等元素的位置。 不同的网页，各种网页元素所处的地位不同，他们的位置也就不同。一般情况下，重要的元素都放在突出的位置。 简单划分，网页的布局一般可以分为：“厂”字型、“同”字型、标题正文型、分栏型、Flash型、封面型等。 3.1.2 网页布局实例1 “厂”字型结构的特点是内容清晰，一目了然。网页最顶端是徽标和图片（广告）栏，下半部分的左边是导航链接，右边是信息发布区。这种结构非常常见。 3.1.2 网页布局实例2 “同”字型结构的特点是超链接多、信息量大。网站的顶端是徽标和图片（广告）栏，下部分分为三列，或者更多。两边的两列区域比较小，一般是导航超链接和小型图片广告等，中间是网站的主要内容，最下面是网站的版权信息等。 3.1.2 网页布局实例3 标题正文型结构的顶端是网站标识和标题，下面是网页正文。内容非常简单。 3.1.2 网页布局实例4 分栏型结构，这种结构一般分为左右（或上下）两栏，也有的分为多栏。一般将导航链接与正文放在不同的栏中。这样打开新的网页，导航链接栏的内容不会发生变化。 3.1.2 网页布局实例5 Flash型结构采用Flash技术来完成，其视觉效果和听觉效果与传统网页不同，往往能够给浏览者以极大的冲击。这种网页逐渐被年轻人所喜爱。 3.1.2 网页布局实例6 封面型结构，往往首先看到的是一幅图片或动画，在图片或动画的下面有一个进入下一级网页的超链接提示文字。其中图片或动画可以用Flash来制作，与Flash型不同，这种结构并不是在Flash中完成的，而是在网页制作软件中完成的。 3.1.3 网页布局注意事项 1.平衡性 2.对称性 3.对比性 4.疏密度 5.反复性 6.韵律感 网页的排版布局是决定网站美观与否的一个重要方面，通过合理的、有创意的布局，才可以把文字、图像等内容完美地展现在浏览者面前。 3.1.4 画出网页布局草图 3.2 使用表格 网页的布局设计一般都是靠表格来实现的。可以说表格的是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了网页设计者的水平。 实现网页的布局有两种方法，一种是采用表格，一种是使用布局视图。 3.2.1 表格概述 在制作页面的过程中，我们常常需要处理和管理多组相关的信息条目。这需要我们采取一种有组织、易阅读的格式，详细列举相关的信息条目。一般情况下，我们采用列表和表格两种方法来实现这一目标。列表主要有两种方法：项目列表和编号列表。 在网页中，表格的作用主要有两种：一是存放数据和显示信息，这是常见的，也是基本的应用；二是组织网页的内容，对于图文混排的网页，利用表格可以大大提高网页制作的效率，而隐藏表格框线后，可以使浏览者感受不到表格的存在。 3.2.2 插入表格 单击菜单栏上的 “表格” ，打开“表格”菜单，移动鼠标指针到“插入”上，在下一级菜单中单击“表格”，出现“插入表格”对话框。 在“插入表格”对话框中，输入欲插入表格的行数、列数和边框线宽度，单击“确定”。 3.2.3 插入、删除表格的行、列和单元格 使光标出现在表格中。然后单击菜单栏上的 “表格” ，打开“表格”菜单，再单击“表格”菜单中的“插入” ，在下一级菜单中单击“行或列”，打开“插入行或列”对话框。 在“插入行或列”对话框选中“行”，在“行数”右端的栏位中输入1，然后选中“所选区域之上”。单击“确定” ，在第二行的上面将插入一行。 3.2.3 插入、删除表格的行、列和单元格 下面，我们一起将插入的一行再删除，学习一下删除行的步骤。 首先，单击鼠标使光标出现在该行中。然后单击“表格”菜单，将鼠标指针移动到“选定”上，自动弹出下一级菜单，最后单击“行”，选定该行。单击“表格”菜单，在下拉菜单中选择“删除行”，该行被删除。