第7讲使用APdiv和框架
第6章 AP元素
6.4.2激活层
要在层中插入文字、图像等，首先要激活层。
注意：默认情况下，当在一个层中插入比层的尺寸还大的 图片时，会将层自动撑大。而如果选中层，将图片设置为 层的背景图像，则不会影响层的大小。 注意“激活层”不等于选择层，无法设置层的属性。
6.4.3 选择层
要对层进行移动、调整大小等操作，首先要选择层。
第6章 AP元素
在Dreamweaver中，可以使用AP元素来设计页面的布局。 利用AP元素可以灵活准确地在页面中放置内容，无论将其放 置到文档中的哪一个位置，都可以随意移动和设置大小。 AP 元素（绝对定位元素）是分配有绝对位置的 HTML 页面元 素，具体地说，就是 div 标签或其它任何标签。AP 元素可 以包含文本、图像或其它任何可放置到 HTML 文档正文中的 内容。
6.1 AP元素简介
在Dreamweaver CS3中，层被称为AP元素。Dreamweaver使用div标签创建AP元素。 AP元素可以包含文本、图像，或其它任何可放置到网页中的内容。 当创建AP元素时，Dreamweaver在网页中插入一个div标签，并为该div指定一个ID值（默认情况下 第一个div指定为apDiv1，第二个div指定为apDiv2，依此类推）。Dreamweaver使用文档头中的嵌入式 CSS代码来定位AP Div以及设置AP Div大小。
6.4.4移动层
1. 在层属性检查器里精确设置“左”“上”的数值（像 2. 3.
素）。坐标系以页面或父层的左上角为标准起点（ 0， 0） 。 拖曳层。此方法不精确。 方向键，每次微移一个像素。 Shift+方向键,则是吸附 到网格。
吸附到网格：“查看-网格设置”
6.4.5 对齐层
第9章 利用AP Div技术制作网页
END
9.2.6 调整AP Div的大小 1．调整单个AP Div的大小
要调整一个AP Div的大小，可执行如下操作之一： （1）拖曳法：选择层，拖曳AP Div的调控点。上/下 调控点只能调整层的高度，左/右调控点只能调整层 的宽度，四角的调控点能同时调整层的高度和宽度。
（2）在层属性面板中设置“宽”和“高”的数值。
创建完AP Div之后，在页面中会出现一个层的标 志，并且有一个矩形的层出现。 单击层标志，其属性面板显示如图所示，在属性 面板上可以设定层的属性。
2．创建嵌套AP Div
AP Div嵌套指的是在一个AP Div的内部创建另一个 AP Div，可以用嵌套的方法将多个AP Div组合在一起。 使用嵌套层的目的通常是为了将多个AP Div组成群组， 这样一来，只要移动父层，其中的子层也会一起移动， 而且子层还会继承父层的显示隐藏状态，其可见性与
（3）利用键盘来调整AP Div的大小：选择要调整的 AP Div，按Ctrl+方向键，每次调整一个像素单位。 按Ctrl+Shift+方向键，每次调整一个网Div的大小，可执行如下 操作之一： （1）在设计视图中按Shift键选择多个AP Div，单击 “修改”→“排列顺序”→“设成宽度相同”或 “设成高度相同”命令。 （2）选择要调整的AP Div，打开其属性面板。在属
9.3.3 改变AP Div的叠放次序 1．利用AP Div面板来调整AP Div的叠放次序
利用“AP 元素”面板来调整AP Div的叠放次序的
操作步骤是：
打开“AP 元素”面板，双击要更改其z值的大小。 键入一个较大的数字可将 AP 元素在堆叠顺序中上移， 反之将下移AP 元素。
2．利用层属性面板来调整AP Div的叠放次序
第7章 利用框架布局页面
3
7.2
创建框架
1.自定义框架
2.直接插入预定义框架
4
7.3
框架集的基本操作
1.框架集和框架的选择 2.框架的删除 3.框架和框架集的保存
5
7.4
设置框架集与框架的属性
1.设置框架属性 2.设置框架集属性
6
7.5
在框架中使用链接
在“目标”下拉列表中选择一个目标框架名完成链接。标 签的各项功能含义如下： _blank：在新的浏览器窗口中打开链接的文档，同时保持 当前窗口不变。 _parent：在显示链接框架的父框架集中打开链接的文档， 同时替换整个框架集。 _self：在当前框架中打开链接，同时替换该框架的内容。 _top：在当前浏览器的窗口中打开该链接的文档，同时 替换掉整个框架集。
网页设计
1
第7章
7.1 7.2 7.3 7.4 7.5 7.6
利用框架布局页面
框架与框架集的概念 创建框架 框架集的基本操作 设置框架集与框架的属性 在框架中使用链接 实践技能训练----制作“网上书店”的主页
2
7.1
框架与框架集的概念Fra bibliotek框架集是HTML文件，它定义一组框架的布局和属性，包括 框架的数目、框架的大小和位置以及每个框架中初始显示的 页面地址。 框架集文件只是向浏览器提供如何显示一组框架以及这些 框架中应该显示哪些文档的有关信息。
7
7.5
在框架中使用链接
mainFrame 在框架集的主框架中打开链接的文档，同时 替换掉主框架中原来所显示的文档。 leftFrame：在框架集的左框架中打开链接的文档，同时 替换掉左框架中原来显示的内容。 topFrame：在框架集的上框架中打开链接的文档，同时 替换掉上框架中原来显示的文档。 如果在框架集中还定义了其它的框架，那么在此还会显示 出其它框架的名称。
第10讲 网页的布局元素：Ap DIV
调整二级菜单的位置使其和一级菜单有所重叠
为二级菜单添加显示/隐藏的行为 完成所有内容添加后，再设置父层居中对齐
本讲实践任务5： 要求： 利用AP DIV元素布局网页，要求网页能随分辨率
的变化居中显示，具有下拉菜单
知识点：AP DIV的嵌套和居中、显示-隐藏行为 提交时间：本次课
**
AP DIV元素的删除
**
• 选中需删除的AP DIV • 采用如下操作之一 按【Delete】键 选择菜单：“编辑/清除”命令
二、编辑AP DIV元素 1、AP DIV元素的选取 • 选取一个AP DIV元素 在文档编辑区中单击AP DIV元素边框或单击AP DIV元素的选择柄。 • 选取多个AP DIV元素 按住【Shift】键，在需要选择的多个AP DIV元 素中单击。 2、AP DIV元素的移动 选中后AP DIV元素 直接拖动AP DIV元素的选择柄
素代码的内部。
嵌套在内的为子层，嵌套层外部的层称为父层。
AP层对象元素的嵌套方法
第一步：将光标定位在要插入嵌套AP元素的父层内。
第二步：拖动布局选项卡中的“绘制AP Div”到AP父层内。
三、AP DIV元素的嵌套 嵌套的重要特点 子层可浮动于文本编辑窗口的任何位置 子层的大小可大于父层
在下中输入：高-要剪辑的像素值
3、AP DIV元素的属性设置 设定 AP 元素水平居中
第7章 使用框架布局网页
7.1 认识框架
框架是一种能够使多个网页通过区域划分最终显示在一个浏览器窗口的 网页结构。框架由两部分组成：框架集和多个框架。 • 框架（Frame）：是浏览器窗口中的一个区域，它可以显示与浏览器 窗口其它区域中所显示内容无关的网页文件。 • 框架集（Frameset）：是一个网页文件，它将一个窗口通过行和列 的方式分割成多个框架，框架的多少根据具体有多少网页来决定， 每个框架中要显示的就是不同的网页文件。 框架集把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的 网页。使用框架集可以方便地设计类似导航结构，且各框架之间互不干 扰，同时使网站的结构更加清晰，保证网站风格统一。
<frameset rows="30%,*" frameborder="no" border="0" framespacing="0"> <frame src=" UntitledFrame-13" scrolling="No" id="topFrame" title="topFrame" /> <frameset cols="254,556"> <frame src=" UntitledFrame-16"> <frame src=" UntitledFrame-17" /> </frameset> </frameset>
7.2 创建框架
选择【插入】|【HTML】|【框架】命令，在【框架】子菜单中选择预 定义的框架集。
AP Div基础
AP Div基础
Div是块级元素，定义文档中的分区或节（division/section）， 可以把文档分割为独立的、不同的部分。
AP Div和Div的作用基本一样，唯一的区别就是AP Div是带有绝 对位置的Div。
AP Div元素可以包含文本、图像或其它任何可放置到HTML文 档正文中的内容。
（3）勾选“防止重叠”复选框，可以禁止AP Div重叠。
（4）单击AP Div显示按钮 ，可以选择显示或隐藏AP Div。
（5）单击AP Div名称可以选定AP Div，按住键盘键Shift不放，一 次单击AP Div名称，可以同时选中多个AP Div。
（6）按住键盘键Ctrl不放，将某个AP Div拖到另一个AP Div上， 可以形成嵌套的AP Div。
（3）单击“插入”工 具栏中“布局”选项卡下 的“绘制AP Div”按钮 后， 将鼠标移至文档窗口，当
光标变为“＋”形状时， 在现有AP Div中拖拽鼠标， 则绘制的AP Div就嵌套在 现有的AP Div中。如图所 示。
1.2 创建AP Div
AP Div基础
在Dreamweaver CS4中，插入嵌套AP Div的步骤如下： （1）将鼠标光标定位到需要插入嵌套AP元素的父AP Div中。 （2）选择菜单命令“插入”→“布局对象”→“AP Div”，即 可插入一个嵌套的子AP Div。 在Dreamweaver CS4中，还可以利用“AP元素”面板，将已 存在的AP Div制作成嵌套的AP Div，其基本步骤如下： 在“AP元素”面板中，单击需要被嵌套的子AP Div，按下键 盘键 Ctrl不放，将其拖动到另一个AP Div上面，然后放开鼠标， 即可形成嵌套的AP Div。
JavaScript程序设计课件：第七章 窗口和框架
在JavaScript中，可以使用new关键字创建image对象，这种方法 创建的image对象常用于缓存图像：
window对象代表了浏览器窗口或者框架，而document对象则代表 了窗口或者框架中的文档。
每 一 个 window 对 象 都 有 一 个 document 属 性 ， window 对 象 的 document属性引用的就是代表该窗口中所显示文档的document对 象。
文档对象的命名规则 ➢ Form //使用表单名称访问 ➢ document.forms[0] //使用该表单在document对象 forms[]属性中的位置访问
高等学校计算机应用人才培养系列教材
7.4
document对象
document对象的数组属性
anchors[]：包含了对当前文档中所有anchor对象的引用，每一个 数组元素对应一个<a>标记。
applets[]：包含了对当前文档中所有applet对象的引用，每一个数 组元素对应一个<applet>标记。
close()：该方法将显示出所有已经写入文档但还没有显示出来的 内容，然后关闭文档的输出流。
open([mimetype])：该方法打开一个可供写入文档内容的流，以便 接下来调用write()方法将数据添加到文档中。
write(value,…)：该方法会将它的所有参数按照出现顺序写入文档 中，不是字符串的参数在写入过程中将被转换成字符串。
wirteln(value,…)：该方法与write()方法类似，只不过在写入所有 参数之后，会自动加上一个换行符。
高等学校计算机应用人才培养系列教材
7.6
高等学校计算机应用人才培养系列教材
7.7
10.1.3 插入嵌套AP Div_Dreamweaver CS4中文版基础教程_[共2页]
第10章 应用AP Div ──设计“自然写真”网页 185面板中“布局”类别中的按钮绘制AP Div 。
下面将介绍使用菜单命令插入AP Div 的操作方法。
1. 将光标定位在要插入AP Div 的位置，如图10-4所示。
2. 执行菜单命令【插入】/【布局对象】/【AP Div 】，即可创建一个默认大小（200px ×200px ）的AP Div ，如图10-5所示。
图10-4 放置光标位置 图10-5 插入AP Div在向文档中插入AP Div时，Dreamweaver CS4会自动依次为其命名为“apDiv1”、“apDiv2”。
此时的AP Div 名称即为“apDiv1”。
10.1.3 插入嵌套AP Div嵌套AP Div 是指创建在其他AP Div 中的AP Div 。
嵌套AP Div 可以与被嵌套AP Div 一起移动，并且可继承被嵌套AP Div 的可见性。
下面将介绍插入嵌套AP Div 的操作方法。
1. 将光标置于“apDiv1”AP Div 内，执行菜单命令【插入】/【布局对象】/【Div 标签】，打开【插入Div 标签】对话框，然后在【插入】下拉列表中选择【在插入点】选项，在【ID 】下拉列表中输入“Header ”，如图10-6所示。
图10-6 【插入Div 标签】对话框id=“apDiv1”指的是名为“apDiv1”的AP Div ，即上一操作创建的AP Div 。
在【ID 】下拉列表中输入“Header ”即此时创建的AP Div 的名称。
2.单击按钮，打开【新建CSS 规则】对话框，如图10-7所示。
3. 保持默认参数，然后单击按钮，打开【#Header 的CSS 规则定义】对话框，选择“定位”类型，设置【Position 】为“absolute ”、【Width 】为“100”、【Height 】为“100”，如图10-8所示。
AP Div光标位置。
第10章 使用AP元素和时间轴
10.2 创建AP Div
创建AP Div 选定AP Div AP Div属性 AP Div的默认设置
10.2.1 创建AP Div
将鼠标光标置于文档窗口中欲插入AP Div的位置，选 择【插入记录】/【布局对象】/【AP Div】命令，插 入一个默认的AP Div。 将【插入】/【布局】面板上的 （绘制AP Div）按 钮拖曳到文档窗口中，插入一个默认的AP Div。
一绘制嵌套apdiv首先选择编辑首选参数命令打开首选参数对话框选择分类列表中的ap元素分类勾选右侧面板中的在apdiv中创建以后嵌套复选框然后在插入布局工具栏上单击按钮在现有apdiv中拖曳则绘制的apdiv就嵌套在现有apdiv中了
第10章 使用AP元素和时间轴
AP元素是分配有绝对位置的HTML页面元 素，时间轴是Dreamweaver实现动画的关键功 能。本章将介绍AP元素和时间轴的基本知识 以及使用它们创建动画的基本方法。
10.3.3 对齐AP Div
对齐功能可以使两个或两个以上的AP Div按照某一边 界对齐。对齐AP Div的方法是，首先将所有AP Div选定， 然后选择【修改】/【排列顺序】中的相应命令，如选择 【对齐下缘】命令，将使所有被选中的AP Div的底边按照 最后选定的AP Div的底边对齐，即所有AP Div的底边都排 列在一条水平线上。 在【修改】/【排列顺序】菜单中，共有以下4种对齐方式。 【左对齐】：以最后选定的AP Div的左边线为标准，对 齐排列AP Div。 【右对齐】：以最后选定的AP Div的右边线为标准，对 齐排列AP Div。 【对齐上缘】：以最后选定的AP Div的顶边为标准，对 齐排列AP Div。 【对齐下缘】：以最后选定的AP Div的底边为标准，对 齐排列AP Div。
Dreamweaver第 10 讲 AP层对象和 DIV 标记
第十讲AP层对象和DIV 标记主要内容如下AP 层对象的含义AP 层对象的创建和编辑使用AP 层对象的HTML标记语言AP 层对象的网页布局技术DIV 标签的含义重点及难点：AP 层对象的创建和编辑使用AP 层对象的网页布局技术一、AP 层对象Absolutely Positioned Elements 的缩写，也即“绝对定位元素”，一般称为“层”。
在CS3中，系统使用DIV 标记和CSS技术来实现AP层对象的效果，所以也称绝对定位的DIV标记。
AP层对象可以重叠、任意移动、可以设置为隐藏，得到比表格更多的效果。
二、创建AP层对象元素1.几种创建方式。
2.嵌套AP层对象。
嵌套的含义：嵌套并不表示一个在另外一个里面显示，而是指一个AP元素的代码在另一个AP元素代码的内部。
嵌套的AP 元素会随着父AP元素的移动而移动，继承父AP元素的可见性。
AP层对象元素的嵌套，有四种方式：1>.将光标置于AP元素内，然后菜单操作。
2>.首选参数-分类-AP.Div 选中“在AP元素中创建以后嵌套”。
3>.工具栏中，插入-布局-拖动“绘制AP Div”到AP元素内。
4>.使用AP元素面板。
3. A P层对象的属性AP元素的属性栏：可见性：Default（默认）：不指定可见性的属性。
Inherit（继承）：继承父对象的可见性。
Visible（可见）：显示AP元素。
Hidden（隐藏）：不显示AP元素。
背景颜色：设定AP元素的背景色。
如果空白的话，可以指定透明的背景。
类：用来指定控制AP元素的CSS类样式表。
溢出：当AP元素的内容超过AP元素指定大小时。
共4个选项。
注意：AP层元素也可以由layer标记来创建，则，属性栏会有所不同。
两种代码如下：<div id="apDiv3"></div><layer id="apDiv1"></layer>三、AP层元素和表格的转换注意：要求“AP 元素”面板中的“防止重叠”处于选中状态。