1 / 19

第 6 章 网页布局

第 6 章 网页布局. 内容简介. 表格基本操作 利用表格对页面进行布局 用 AP Div 布局网页 利用框架布局网页 嵌入式框架及其应用. 6.1 表格基本操作. 6.1.1 插入表格 6.1.2 选取表格和单元格 1 ．选择整个表格 2 ．选择单个或多个行或列 3 ．选择单个单元格 4 ．选择一行或矩形的单元格块 5 ．选择不相邻的单元格. 6.1 表格基本操作. 6.1.3 设置表格和单元格的属性 1 ．设置表格的属性 2 ．设置单元格的属性 6.1.4 表格的编辑 1 ．拆分和合并单元格 2 ．添加、删除行和列

violet-mueller
Download Presentation

第 6 章 网页布局

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第6章 网页布局

  2. 内容简介 • 表格基本操作 • 利用表格对页面进行布局 • 用AP Div布局网页 • 利用框架布局网页 • 嵌入式框架及其应用

  3. 6.1 表格基本操作 • 6.1.1插入表格 • 6.1.2选取表格和单元格 1．选择整个表格 2．选择单个或多个行或列 3．选择单个单元格 4．选择一行或矩形的单元格块 5．选择不相邻的单元格

  4. 6.1 表格基本操作 • 6.1.3设置表格和单元格的属性 1．设置表格的属性 2．设置单元格的属性 6.1.4表格的编辑 1．拆分和合并单元格 2．添加、删除行和列 3．调整表格、列和行的大小

  5. 6.1 表格基本操作 • 6.1.4表格的嵌套 1．单击现有表格中的一个单元格。 2．选择【插入】|【表格】，设置“表格”选项，然后单击【确定】。 • 6.1.5扩展表格模式 1．切换到扩展表格模式 2．切换出扩展表格模式

  6. 6.2 利用表格对页面进行布局 • 6.2.1 关于布局模式 创建页布局的一种常用的方法是使用HTML表格对元素进行定位。最初创建表格是为了显示表格式数据，而不是用于对网页进行布局；为了简化使用表格进行页面布局的过程，Dreamweaver提供了“布局”模式。在“布局”模式中，可以在添加内容前使用布局单元格和表格来对页面进行布局。可以在一个布局表格中使用多个布局单元格对页进行布局，这是进行网页布局最常用的方法，您也可以使用多个单独的布局表格进行更复杂的布局。还可以通过将一个新的布局表格放置在现有的布局表格中进行布局表格嵌套。

  7. 6.2 利用表格对页面进行布局 • 6.2.2从标准模式切换到布局模式 1．切换到布局模式 2．切换出布局模式 • 6.2.3绘制布局表格和布局单元格 1．创建布局单元格 2．绘制布局表格

  8. 6.2 利用表格对页面进行布局 • 6.2.4将内容添加到布局单元格中 1．将文本添加到布局单元格 2．将图像添加到布局单元格 • 6.2.5设置布局单元格和表格的格式 1．设置布局单元格的格式 2．设置布局表格属性

  9. 6.3 用AP Div布局网页 • 6.3.1关于AP元素及AP元素面板 1．关于AP元素 AP元素（绝对定位元素）是分配有绝对位置的HTML页面元素，具体地说，就是div标签或其它任何标签。所有AP元素都将在“AP元素”面板中显示。AP元素可以包含文本、图像或其它任何可放置到HTML文档正文中的内容。 可以使用 AP 元素来设计页面的布局。可以将AP元素放置到其它AP元素的前后，隐藏某些AP元素而显示其它AP元素，或者在屏幕上移动AP元素。 2．AP元素面板

  10. 6.3 用AP Div布局网页 • 6.3.2 AP Div的创建 1．创建AP Div 2． 创建嵌套AP Div 创建嵌套AP Div的方法如下： （1）绘制嵌套的AP Div （2）插入嵌套的AP Div （3）使用AP元素面板将现有AP元素嵌套在另一个AP元素中

  11. 6.3 用AP Div布局网页 • 6.3.3 AP Div的编辑 1．选择AP元素 （1）在AP元素面板中选择AP元素 （2）在文档窗口中选择AP元素 （3）选择多个AP元素 2．移动AP元素 3．修改可见性 （1）单击【窗口】|【AP元素】，打开“AP元素”面板。 （2）在AP元素的眼形图标列内单击可以更改其可见性。 （3）如果要一次改变所有AP元素的可见性，可以单击眼睛列上端的眼睛图标。 4．修改堆叠顺序 5。插入对象

  12. 6.3 用AP Div布局网页 • 6.3.4 AP元素属性设置 • 当选择一个AP元素时，属性检查器将显示AP元素的属性。 • CSS-P元素：为选定的AP元素指定一个ID。每个AP元素都必须有各自的唯一ID，此ID用于在“AP 元素”面板和JavaScript 代码中标识AP元素。 • 左和上：指定AP元素的左上角相对于页面左上角的位置。如果嵌套，则指定AP元素的左上角相对于父AP元素左上角的位置。默认单位为“像素”。 • 宽和高：指定 AP 元素的宽度和高度。默认单位为“像素”。 • Z轴：确定AP元素的Z轴或堆叠顺序。在浏览器中，编号较大的AP元素出现在编号较小的AP元素的前面。值可以为正，也可以为负。 • 可见性：指定AP元素最初是否是可见的。包括以下几个选项： • “默认”：不指定可见性属性。默认为“继承”。 • “继承”：将使用AP元素的父级的可见性属性。 • “可见”：将显示AP元素的内容，而与父级的值无关。 • “隐藏”：将隐藏AP元素的内容，而与父级的值无关。

  13. 6.3 用AP Div布局网页 • 背景图像：指定AP元素的背景图像。 • 背景颜色：指定AP元素的背景颜色。 • 类：指定用于设置AP元素的样式的CSS类。 • 溢出：控制当AP元素的内容超过AP元素的指定大小时如何在浏览器中显示AP元素。 • “可见”：AP元素会通过延伸来容纳额外的内容。 • “隐藏”：指定在浏览器中不显示额外的内容。 • “滚动”：指定浏览器应在AP元素上添加滚动条，而不管是否需要滚动条。 • “自动”：当AP元素的内容超过其边界时才显示滚动条。 • 剪辑：定义AP元素的可见区域。指定左、上、右和下坐标以在AP元素的坐标空间中定义一个矩形，单位为“像素”。AP元素将经过“裁剪”以使得只有指定的矩形区域才是可见的。

  14. 6.3 用AP Div布局网页 • 6.3.5将AP元素与表格相互转换 1．将AP元素转换为表格 2．将表格转换为AP Div

  15. 6.4 利用框架布局网页 • 6.4.1插入框架集 方法1：在Dreamwaver CS3中，选择【文件】|【新建】命令，弹出“新建文档”对话框，在“常规”选项卡内选择“框架集”选项，在右侧的“框架集”列表框内选择其中的一种。单击“创建”按钮，便可以新建一个框架页。 方法2：新建一个基本页，选择“插入”面板中的“布局”选项，单击之后的箭头，在弹出的菜单中可以看到预定义的框架集，选择其中一种，便可创建一个框架集网页。

  16. 6.4 利用框架布局网页 • 6.4.2框架集操作 1．拆分框架 2．删除框架 3．调整框架大小 4．选择框架或框架集 5．保存框架

  17. 6.4 利用框架布局网页 • 6.4.3框架集设置 • 6.4.4框架设置 1．网页设置 2．目标框架设置

  18. 6.6 嵌入式框架及其应用 • 6.6.1 嵌入式框架基本操作 • 6.6.2 嵌入式框架应用实例

  19. 本章小结 • 本章首先介绍了表格、层和框架的基本知识和基础操作，并详细讲解了对表格、层和框架进行设置的方法；通过实例讲解了表格、层、框架以及嵌入式框架布局页面的方法。相信大家通过框架和表格的应用，一定能设计制作出结构合理、用户使用方便的网页。

More Related