网页布局.ppt

《网页布局.ppt》由会员分享，可在线阅读，更多相关《网页布局.ppt（38页珍藏版）》请在三一文库上搜索。

1、第3章 网页布局,学习目标,理解网页布局的原理 掌握用表格（普通表格、布局表格）进行布局的方法 掌握特殊表格的制作方法 掌握用层进行布局的方法 掌握用框架进行布局的方法,3.1 布局的实质,布局: 就是在页面上划分出不同的区域，按照设计的原则和方法，把不同的内容放置到不同的位置上，并通过色彩调和出不同的网站基调，使网页内容形成一个有机的整体，充分表达网站主题的过程。 布局的实质 :表格,3.2 利用表格布局,3.2.1插入表格 1设置页面属性 在插入页面内容前，一般先设置好页面的大小和页边距等属性，以达到最佳显示效果。 2插入表格 在插入面板中选择“常用”标签，点击按钮，弹出 “插入表格”对话

2、框，设置相应的参数来插入表格。也可以通过选择“【插入】【表格】”菜单命令打开“插入表格”对话框。,图3-2-1 “插入表格”对话框,行数：新插入的表格的行数，可以更改数值来确定行数。 列数：新插入的表格的列数，可以更改数值来确定列数，行、列数控制表格划分的区域个数（行列）。 表格宽度：表格的宽度可以选择是占页面宽度的百分比（单位为百分比）或者固定尺寸（单位为像素）。 边框粗细：表格的边界宽度，单位为像素，表格的属性设置中将详细讲解边框、填充值和间距值的区别。,单元格边距：单元格边框和单元格内容的间隔距离。 单元格间距：单元格和单元格之间的间隔距离。 页眉：把表格的第一行或第一列作为标题行或标题

3、列 作为标题行或标题列的行或列的内容将以粗体的形式显示。 标题：提供一个显示在表格外的表格标题。 对齐标题：指定表格标题相对于表格的显示位置。 摘要：给出表格的说明。该文本不会显示在用户的浏览器中。,3.2.2 表格的属性设置,1.边框、填充、间距 （1）边框 一个“一行一列”的表格，至少有两个边框，表格外边框和单元格边框。边框颜色只有当边框值设置为非零值时才能显示。当未指定单元格边框颜色时，Dreamweaver会以表格的外边框颜色作为单元格的边框颜色。,图3-2-3,（2）间距 表格边框和单元格边框之间的距离或单元格边框与单元格边框之间的距离称为间距。 （3）填充 单元格边框和单元格内容之

4、间的距离称为单元格填充，即单元格边距。 2表格的对齐方式 3单元格的操作 （选择、拆分、合并、行或列的插入与删除）,（1）选择 选中一个单元格 选中一行 选中一列 选中不相邻的单元格 （2）拆分,（3）合并 和拆分相对，当我们插入的内容需要跨越多个单元格时，我们需要把这些单元格合并起来。 （4）行、列的插入与删除 插入行、列 删除行、列 4表格、单元格的大小调整 （1）设置表格大小 （2）设置单元格大小,5表格的嵌套 （1）拆分单元格 （2）插入左表格 （3）插入右表格 （4）设置表格的对齐方式 6表格的背景图片和背景颜色 （1）设置页脚表格属性 （2）插入背景图片 （3）输入内容 （4）设置

5、背景颜色,3.2 利用表格布局,3.2.3 利用“布局表格”布局网页 在Dreamweaver MX 2004中，默认的视图为标准视图。在插入面板中选择“布局”标签，点击“布局视图”按钮就可以切换到布局视图模式。,1设置页面属性 2绘制布局表格、布局单元格 （1）绘制布局表格 （2）绘制布局单元格 （3）绘制嵌套表格 3布局表格和布局单元格的操作 （1）选择布局表格、布局单元格 （2）添加页面内容 （3）改变布局表格、布局单元格的大小 （4）移动布局表格、布局单元格,4设置布局表格和布局单元格的格式,选中需设置属性的布局表格（单元格），出现如图所示的属性面板。,布局表格的属性,布局单元格的属性

6、,自动伸展：布局表格或布局单元格的宽度会自动适应页面的宽度。 水平：页面内容在布局单元格内的水平对齐方式。 垂直：页面内容在布局单元格内的垂直对齐方式。 背景颜色：布局表格或布局单元格的背景颜色，可以选择颜色，或输入颜色的16进制值，或输入16种预定义颜色的名称，如“red”，“blue”，“black”，“yellow”，“gray”等。 不换行：勾选此复选框，在布局单元格中输入的内容不会换行；不勾选，单元格中输入的内容将自动换行。,注意：在属性面板中不能设置布局表格的对齐方式，只有回到标准视图才能设置。,3.3 特殊表格布局,1实例创意 该实例用横竖分隔线制作一个简约的诗词欣赏页面，名称是

7、“诗词欣赏”。通过大量的留白和简约的布局营造一种高雅的格调。实例效果所示。,横竖细分隔线效果图,2制作步骤 （1）启动Dreamweaver，定义站点根目录。 （2）插入表格 （3）设置表格属性 （4）制作横竖分隔线 （5）插入内容 3.3.2 实例2：细线表格的制作 3.3.3 实例3：立体表格的制作,3.4 用层进行布局,3.4.1 创建层 1创建独立的层 插入层的方法有2种，一种是通过菜单创建，一种是通过插入面板创建。 2创建嵌套层 在图层中可以放置网页中的任何元素，因此在层中可以包含其他层，称为层的嵌套。嵌套的层成为父层，被嵌套的层成为子层。在“层”浮动面板中可以清晰查看层与层之间的嵌

8、套关系。,3.4.2 操作层,1选中层 2缩放层 当层的尺寸大于层中的页面内容尺寸时，我们可以缩放层的大小以使二者匹配。 3移动层 层最大的特点就是可以自由移动，因此我们可以移动层的位置来布局层中的内容。 由于层在页面中是可以自由放置的，因此在移动时层是可以相互堆叠和遮挡的。有时在进行页面布局时需要将页面内容完整显示出来，这时需要使层禁止重叠。,3.4.3层的属性设置,层的属性面板,层编号：设置层的名称，该名称只能以字母开始，可以包含字母和数字。该名称必须唯一，在对层添加行为时用到。 左、上：层的边框和页面窗口左边缘和上边缘的距离。如果是嵌套层，指子层边框与父层边框的左边缘和上边缘的距离。“右

9、”和“下”的意思类似。 Z-index：层的层叠顺序，Z值越大，层的位置越靠前。,高、宽：设置层的高度和宽度，单位为像素。 背景图像：设置层的背景图像，单击右边的文件夹图标可以选择图片的来源。 背景颜色：设置层的背景颜色。 显示：指定层最初是否可见，共有4种模式可以设置。 Default（默认）：大多数浏览器都默认为“inherit”属性。 Inherit（继承）：使用该层的父层的可见性属性。 Visible（可见）：总是显示层的内容。 Hidden（隐藏）：隐藏层中的内容。 溢出：当层所包含的内容尺寸大于层本身的尺寸时，多余的部分在浏览器中怎么显示。 剪辑：设置层的可见区域的大小。,3.4.

10、4层和表格的转换,1层转换为表格 在页面中选中所有的层（CTRLA），选择“【修改】【转换】【层到表格】”菜单命令，打开如图所示的“转换层为表格”对话框。,转换层为表格”对话框,最精确：选择此项，为每一个层创建一个单元格，并保留层之间的空隙所必需的任何单元格。 最小：如果层之间的距离在指定数目的像素范围内，层会自动对齐。即转换成表格后，保留层之间的间隙所需的空白单元格将被合并掉，因此可能不与您的布局精确匹配。 使用透明GIF：用透明的GIF图像填充表的最后一行。这将确保该表在所有浏览器中都以相同的列宽显示。 置于页面中央：将转换的表格放在页面的中央。,2表格转换为层 选中需要转换成层的表格，选

11、择“【修改】【转换】【表格到层】”菜单命令，打开如图所示的“转换表格为层”对话框。,“转换表格为层”对话框,防止层重叠。选择此项，可以在建立，移动和调整层大小时防止层互相重叠。 显示层面板。选择此项，转换后将显示层面板。 显示网格，靠齐到网格。选择此项，转换后页面将显示网格，并启用吸附功能，使层对齐到网格。,3.5 用框架进行布局,在网上经常看到一些网页，它的整个页面被分割成了几部分，部分区域（如网页的标题或导航栏）的内容不变，其他区域的内容不断更新。比如Flash MX自带的联机帮助系统就是具有这种效果的典型的目录式结构，如图所示。,典型的框架结构,3.5.1创建框架,1框架的组成 框架主要

12、由2部分组成，框架集和单个框架页。 框架集是在一个文档内定义一组框架结构的HTML网页。框架集定义了一页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等。 单个框架页是指在框架定义的某一区域中显示的网页文件。 因此，一个划分为2个区域的框架网页，实际上包含3个独立的文件：一个框架集文件和2个框架页。 2框架的建立 （1）预设框架样式 （2）手动创建框架结构,3.5.2框架的基本操作,1框架与框架集的选择 2向框架中添加内容 每一个框架区域代表一个网页文件，所以在对框架页添加内容时，可以把它当作是一个独立的页面看待。 （1）顶部框架区域 （2）左边框架区域 （3）右边框架区域 （4

13、）底部框架区域,框架最终效果图,3框架与框架集的保存 在浏览器中预览框架效果前，必须先保存框架集文件。一个框架集包含多个框架，每个框架区域包含一个独立的网页文档，因此，在保存框架网页时，必须将所有文档都保存下来。 选择“【文件】【保存全部】”菜单命令，如果整个框架网页从未保存过，将弹出【保存为】对话框，并在文档窗口中框架集的四周都显示粗边框，表明首先保存的是框架集文件。然后每保存一个框架文件，都会在该框架区域的四周显示粗边框。,保存框架集示意图,3.5.3 设置框架属性,1框架集的属性设置,框架集属性,边框：设置框架页面的边框是否显示。有3个选项，显示、不显示和默认。默认效果即不显示（否）。此

14、属性和后面两个结合起来使用。 边框颜色：设置框架集的边框颜色 边框宽度：设置框架集的边框宽度。 值：设置选中的行或者列的尺寸。选中哪一行或哪一列可以通过右边的灰色区域来识别。可以通过鼠标在不同区域点击来选择某个框架，以设置某个框架的尺寸大小。 单位：设置行、列尺寸的单位。可以是像素、百分比和相对。使用“像素”单位时，框架的尺寸大小是保持不变的，选择“百分比”、“相对”时，框架的尺寸大小随着浏览器窗口的改变而发生改变。,2框架的属性设置,框架属性,框架名称：设置选中的框架区域的名称。 源文件：设置框架中显示的初始网页的路径。 滚动：设置该框架中是否显示滚动条。,不能调整大小：如果此项为选中状态，

15、表示在浏览网页时，不能对框架边框进行调整。此属性值和框架集属性中的行、列尺寸值直接相关。如果前面设置了某框架的行或者列的值为固定大小（像素），则此选项为选中状态。 边框：在浏览器中显示网页时，显示或隐藏当前框架的边框。 边框颜色：设置框架的边框颜色，此颜色值应用于和框架接触的所有边框，并且重写框架集属性中指定的边框颜色。 边界宽度、高度：以像素为单位设置框架中网页距离框架边框的高度值或宽度值。,设置框架名称,3超链接目标框架的设置 在没有框架的网页中，按照打开链接目标网页的窗口不同，链接目标可以分为四种：“_blank”、“_self”、“_parent”和“_top”。在使用框架的网页中，以示范网页为例，又增加了4个链接目标，如图所示。多出的4个选项就是前面我们提到的框架名称。,链接目标,本章小结,网页布局是网站建设的初始工作，是按照设计的原则和方法，安排页面元素，并通过色彩调和出不同的网站基调，使网页内容形成一个有机的整体，充分表达网站主题的过程。 网页布局的方法很多，大致分为表格布局（包括布局表格），层布局，框架布局。其中表格布局是最基本的布局方式。“布局表格”布局、层布局最终都转换成普通表格来实现页面布局。框架布局是把浏览器窗口划分成几个不同的区域，在同一个浏览器窗口中显示多个框架页面的技术。,