第二章网页的布局2.1网页布局实例第二章网页的布局2.1.1网页的风格在对网页插入各种对象、修饰效果前,一定要确定要确定网页的总体风格。针对不同的网页风格,大体可以将网页分为两大类:商业网页和个人网页。商业网站一般都有比较统一的布局设计,而个人主页由于内容专一,不可能象商业网站那样内容丰富、信息量大。但恰恰因为这个原因。个人主页的形式更灵活,更容易创造出美感。第二章网页的布局2.1.1网页的风格1“搜狐”的主页的内容很丰富,色彩鲜艳并有许多大幅广告和浮动广告栏。第二章网页的布局2.1.1网页的风格2微软中国的主页,内容比较专一,内容非常有条理,栏目突出,没有凌乱的感觉。第二章网页的布局2.1.1网页的风格3“黑白音乐”是一个个人主页,它看起来更简单,色彩也不够丰富,但感觉非常清新。第二章网页的布局2.1.2网页布局实例所谓网页的布局,通俗地说,就是确定网页上的网站标志、导航栏、菜单等元素的位置。不同的网页,各种网页元素所处的地位不同,他们的位置也就不同。一般情况下,重要的元素都放在突出的位置。简单划分,网页的布局一般可以分为:“厂”字型、“同”字型、标题正文型、分栏型、Flash型、封面型等。第二章网页的布局2.1.2网页布局实例1“厂”字型结构的特点是内容清晰,一目了然。网页最顶端是徽标和图片(广告)栏,下半部分的左边是导航链接,右边是信息发布区。这种结构非常常见。第二章网页的布局2.1.2网页布局实例2“同”字型结构的特点是超链接多、信息量大。网站的顶端是徽标和图片(广告)栏,下部分分为三列,或者更多。两边的两列区域比较小,一般是导航超链接和小型图片广告等,中间是网站的主要内容,最下面是网站的版权信息等。第二章网页的布局2.1.2网页布局实例3标题正文型结构的顶端是网站标识和标题,下面是网页正文。内容非常简单。第二章网页的布局2.1.2网页布局实例4分栏型结构,这种结构一般分为左右(或上下)两栏,也有的分为多栏。一般将导航链接与正文放在不同的栏中。这样打开新的网页,导航链接栏的内容不会发生变化。第二章网页的布局2.1.2网页布局实例5Flash型结构采用Flash技术来完成,其视觉效果和听觉效果与传统网页不同,往往能够给浏览者以极大的冲击。这种网页逐渐被年轻人所喜爱。第二章网页的布局2.1.2网页布局实例6封面型结构,往往首先看到的是一幅图片或动画,在图片或动画的下面有一个进入下一级网页的超链接提示文字。其中图片或动画可以用Flash来制作,与Flash型不同,这种结构并不是在Flash中完成的,而是在网页制作软件中完成的。第二章网页的布局2.1.3网页布局注意事项1.平衡性2.对称性3.对比性4.疏密度5.反复性6.韵律感网页的排版布局是决定网站美观与否的一个重要方面,通过合理的、有创意的布局,才可以把文字、图像等内容完美地展现在浏览者面前。第二章网页的布局2.1.4画出网页布局草图标题图片栏链接文字区主要内容区网站版权信息区第二章网页的布局2.2使用表格网页的布局设计一般都是靠表格来实现的。可以说表格的是网页制作中最为重要的一个技巧,表格运用得好坏,直接反映了网页设计者的水平。实现网页的布局有两种方法,一种是采用表格,一种是使用布局视图。第二章网页的布局2.2.1插入表格在网页中确定光标的位置,然后单击“插入”面板的“表格”按钮,得到“插入表格”对话框。行数和列数是表格的大小;宽度指表格的宽度,单位可以是像素数或百分比。按像素定义的表格大小是固定的,而按百分比定义的表格,会按照浏览器的大小而变化;边框指表格线的宽度;间距指单元格间距;内距指单元格内文字与框线的距离。所谓单元格,就是表格里面的每一个小格。第二章网页的布局2.2.2插入、删除表格的行和列使光标出现在表格中。右击鼠标打开快捷菜单,移动鼠标指针到快捷菜单的“表格”上弹出子菜单,在下一级菜单中单击“插入行或列”,得到“插入行或列”对话框。使光标出现在表格中。右击鼠标打开快捷菜单,移动鼠标指针到快捷菜单的“表格”上弹出子菜单,在下一级菜单中单击“删除行”,该行被删除。第二章网页的布局2.2.3合并与拆分单元格选中多个单元格,移动鼠标指针到“...