第2章网页的布局(免费阅读).pptVIP

2.4 使用框架 采用框架可以将页面分割为两个或两个以上的部分。 2.4.1 框架概述 我们可以这样理解框架：一个框架由几个独立的页面组成。在一般情况下，这些页面只显示全部内容的一部分，我们可以通过滚动条浏览页面的全部内容。或者也可以说，框架实现了在一个窗口中浏览多个页面。 2.4.2 框架文件的建立与保存 单击菜单栏上的“插入”，弹出“插入”菜单，移动鼠标指针到该菜单的“框架”上，最后在其下一级菜单中选择“上方及左方框架”命令，网页被分为三部分。在顶端中单击鼠标，可以发现Dreamweaver的标题栏中网页名字变为“UntitledFrame-2”，而左下方的网页名字为“UntitledFrame-3”，右下方的网页名字为原来的“Untitled-1”。这便是使用框架与使用表格和布局视图的本质不同。 2.4.2 框架文件的建立与保存 保存框架文件要注意的是：框架的保存与单个网页的保存稍有不同，Dreamweaver为每一个框架提供一个“保存”对话框。 单击菜单栏上的“文件”，可以发现“文件”菜单下的“保存”命令变成了“保存框架”和“框架另存为”等。单击“保存框架”命令，可以保存当前光标所在的网页。 改变光标的位置，激活其他区域，可以完成对所有框架文件的保存。 2.4.3 设置框架 改变框架的大小只需将鼠标指针移至框架的分界处，当鼠标指针显示发生变化时，将其拖至适宜的位置即可。 2.4.3 设置框架 单击框架两个框架之间的边框，此时，框架边框上出现一行虚线。而窗口下面的属性面板变成框架属性的相关内容， 更改数值可以完成相应设置. * 第二章 网页的布局 * 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 网页布局实例5 Flash型结构采用Flash技术来完成，其视觉效果和听觉效果与传统网页不同，往往能够给浏览者以极大的冲击。这种网页逐渐被年轻人所喜爱。 2.1.2 网页布局实例6 封面型结构，往往首先看到的是一幅图片或动画，在图片或动画的下面有一个进入下一级网页的超链接提示文字。其中图片或动画可以用Flash来制作，与Flash型不同，这种结构并不是在Flash中完成的，而是在网页制作软件中完成的。 2.1.3 网页布局注意事项 1.平衡性 2.对称性 3.对比性 4.疏密度 5.反复性 6.韵律感 网页的排版布局是决定网站美观与否的一个重要方面，通过合理的、有创意的布局，才可以把文字、图像等内容完美地展现在浏览者面前。 2.1.4 画出网页布局草图 网站版权信息区 主要内容区 链接文字区 图片栏 标题 2.2 使用表格 网页的布局设计一般都是靠表格来实现的。可以说表格的是网页制作中最为重要的一个技巧，表格运用得好坏，直接反映了网页设计者的水平。 实现网页的布局有两种方法，