第7讲使用APdiv和框架.ppt

Dreamweaver CS4中文版基础培中文版基础培训教程训教程主讲：XXX老师从零开始从零开始人民邮电出版社人民邮电出版社第7讲 使用AP Div和框架 v教学目标v7.1 使用AP Div™7.1.1 功能讲解™7.1.2 范例解析──插入和设置AP Div™7.1.3 课堂实训——使用AP Div制作特殊效果v7.2 使用框架™7.2.1 功能讲解™7.2.2 范例解析——插入和设置框架™7.2.3 课堂实训——使用框架布局“技术论坛”网页v7.3 综合案例──使用框架布局“网络管理系统”网页教学目标v掌握创建和编辑AP Div的方法v掌握设置AP Div属性的方法v掌握创建、编辑和保存框架的方法v掌握设置框架和框架集属性的方法v掌握创建嵌入式框架的方法返回目录7.1使用AP Div™7.1.1 功能讲解™7.1.2 范例解析──插入和设置AP Div™7.1.3 课堂实训——使用AP Div制作特殊效果返回目录7.1.1 功能讲解v认识AP Div和【AP元素】面板 v创建AP Div vAP Div属性 v创建嵌套AP Div v编辑AP Div vAP Div和 Div标签。

返回目录一、认识AP Div和【AP元素】面板 vAP Div是一种能够随意定位的页面元素，如同浮动在页面里的透明层，可以将AP Div放置在页面的任何位置由于AP Div中可以放置包含文本、图像或多媒体对象等其他内容，很多网页设计者都会使用AP Div定位一些特殊的网页内容v页面中所有的AP Div都会显示在【AP元素】面板中选择【窗口】/【AP元素】命令，可以打开【AP元素】面板如图所示是一个包含多个AP Div的【AP元素】面板 返回目录v在【AP元素】面板中可以实现以下功能™可以对AP Div进行重命名™可以修改AP Div的z轴顺序™可以禁止AP Div重叠™可以显示或隐藏AP Div™可以选定AP Div，如果按住Shift键不放，依次单击可以选中多个AP Div™按住Ctrl键不放，将某一个AP Div拖动到另一个AP Div上，形成嵌套的AP Div返回目录二、创建AP Div v在创建AP Div时，可以直接插入一个默认大小的AP Div，也可以直接绘制自定义大小的AP Div ™插入默认大小的AP Div™绘制自定义大小的AP Div 返回目录（1）插入默认大小的AP Div v将光标置于文档窗口中，选择【插入】/【布局对象】/【AP Div】命令将插入一个默认大小的AP Div，也可以将【插入】/【布局】面板上的 按钮拖曳到文档窗口，此时也将插入一个默认大小的AP Div。

v当向网页中插入AP Div时，AP Div属性是默认的，如AP Div的大小和背景颜色等如果希望按照自己预先定义的大小插入AP Div，可以选择【编辑】/【首选参数】命令，弹出【首选参数】对话框，在【分类】列表中选择【AP元素】分类，根据需要对其中的参数进行设置即可，如图所示 返回目录（2）绘制自定义大小的AP Div v在【插入】/【布局】面板上单击 按钮，然后将鼠标指针移至文档窗口中，当指针变为形状时，按住鼠标左键并拖曳，到适合位置释放鼠标左键，将绘制一个自定义大小的AP Div，如图所示如果想一次绘制多个AP Div，在单击 按钮后，按住Ctrl键不放，连续进行绘制即可 返回目录三、AP Div属性 v插入AP Div以后，在【属性】面板中可以查看和编辑AP Div的属性，如图所示 返回目录四、创建嵌套AP Div vAP Div的嵌套就是指在一个AP Div中创建另一个AP Div，且包含另一个AP Div制作嵌套的AP Div通常有两种方式：一种是在AP Div内部新建嵌套AP Div；另一种是将已经存在的AP Div添加到另外一个AP Div内，从而使其成为嵌套的AP Div。

™绘制嵌套AP Div ™插入嵌套AP Div™使用【AP元素】面板制作嵌套AP Div 返回目录（1）绘制嵌套AP Div v选择【编辑】/【首选参数】命令，弹出【首选参数】对话框，选择【分类】列表中的【AP元素】分类，勾选右侧面板中的【在AP Div中创建以后嵌套】复选框，如图所示，然后在【插入】/【布局】面板中单击 按钮，在现有AP Div中拖曳，则绘制的AP Div就嵌套在现有AP Div中了 返回目录（2）插入嵌套AP Div v将光标置于所要嵌套的AP Div中，然后选择【插入】/【布局对象】/【AP Div】命令，插入一个嵌套的AP Div，如图所示 返回目录（3）使用【AP元素】面板制作嵌套AP Div v在【AP元素】面板中选中一个AP Div，按住Ctrl键，将其拖曳到另一个AP Div上面，形成嵌套AP DivvAP Div的嵌套和重叠不一样嵌套的AP Div与父AP Div是有一定关系的，而重叠的AP Div除视觉上会有一些联系外，其他根本没有什么关系 返回目录五、编辑AP Div v在创建了AP Div以后，许多时候要根据实际需要对其进行编辑，包括选择AP Div、缩放AP Div、移动AP Div、对齐AP Div、AP Div的可见性和AP Div的Z轴顺序等。

返回目录（1）选择AP Div v单击文档中的 图标来选定AP Div，如果该图标没有显示，可在【首选参数】/【不可见元素】分类中勾选【AP 元素的锚点】复选框v将光标置于AP Div内，然后在文档窗口底边的标签条中选择相应的HTML标签，如图所示返回目录v单击AP Div的边框线v在【AP元素】面板中单击AP Div的名称，如图所示v如果要选定两个以上的AP Div，只要按住Shift键，在文档窗口中逐个单击AP Div手柄或在【AP元素】面板中逐个单击AP Div的名称即可返回目录（2）缩放AP Div v缩放AP Div仅改变AP Div的宽度和高度，不改变AP Div中的内容在文档窗口中可以缩放一个AP Div，也可同时缩放多个AP Div，使它们具有相同的尺寸缩放单个AP Div有以下几种方法™选定AP Div，然后拖曳缩放手柄（AP Div周围出现的小方块）来改变AP Div的尺寸拖曳上或下手柄改变AP Div的高度，拖曳左或右手柄改变AP Div的宽度，拖曳4个角的任意一个缩放点同时改变AP Div的宽度和高度™选定AP Div，然后按住Ctrl键，每按一次方向键，AP Div就被改变一个像素值。

™选定AP Div，然后同时按住Shift＋Ctrl组合键，每按一次方向键，AP Div就被改变10个像素值v如果同时对多个AP Div的大小进行统一调整，方法是，按住Shift键，将所有的AP Div逐一选定，然后在【属性】面板的【宽】文本框内输入数值，按Enter键确认此时文档窗口中所有AP Div的宽度全部变成了指定的宽度还可以选择【修改】/【排列顺序】/【设成宽度相同】命令来统一宽度，利用这种方法将以最后选定的AP Div的宽度为标准返回目录（3）移动AP Div v要想精确定位AP Div，许多时候要根据需要移动AP Div移动AP Div时，首先要确定AP Div是可以重叠的，也就是不勾选【AP元素】面板中的【防止重叠】复选框，这样AP Div可以不受限制地被移动移动AP Div的方法主要有以下几种™选定AP Div后，当鼠标指针靠近缩放手柄，变为 形状时，按住鼠标左键并拖曳，AP Div将跟着鼠标的移动而发生位移™选定AP Div，然后按4个方向键，向4个方向移动AP Div每按一次方向键，将使AP Div移动1个像素值的距离™选定AP Div，按住Shift键，然后按4个方向键，向4个方向移动AP Div。

每按一次方向键，将使AP Div移动10个像素值的距离返回目录（4）对齐AP Div v对齐功能可以使两个或两个以上的AP Div按照某一边界对齐对齐AP Div的方法是，首先将所有AP Div选定，然后选择【修改】/【排列顺序】中的相应命令（如【对齐下缘】），将使所有被选中的AP Div的底边按照最后选定AP Div的底边对齐，即所有AP Div的底边都排列在一条水平线上 返回目录（5）AP Div的可见性 vAP Div内可以包含所有的网页元素，通过改变AP Div的可见性，可以控制AP Div内元素的显示与隐藏改变AP Div的可见性可以通过【AP 元素】面板或AP Div【属性】面板进行™AP Div名称左边为 状态时，表示AP Div为可见，这时【属性】面板中的【可见性】选项为“visible”（可见)™AP Div名称左边为 状态时，表示AP Div为不可见，这时【属性】面板中的【可见性】选项为“hidden”（隐藏)™AP Div名称左边没有 或 时，表示可见性为默认，这时【属性】面板中的【可见性】选项为“default”（默认）。

v若需同时改变所有AP Div的可见性，则单击【AP元素】面板中 图标列最顶端的 图标，原来所有的AP Div均变为可见或不可见 返回目录返回目录（6）AP Div的Z轴顺序 vAP Div的z轴的含义是，除了屏幕的x、y坐标之外，逻辑上增加了一个垂直于屏幕的z轴，z轴顺序就好像AP Div在z轴上的坐标值这个坐标值可正可负，也可以是0，数值大的在上层，数值小的在下层改变AP Div的z轴顺序的方法很简单，只需打开【AP 元素】面板，用鼠标指针指向需要改变序号的AP Div，按住左键向上或向下拖曳鼠标，当拖曳到将要插入的两个AP Div之间时，会出现一条横线，此时释放鼠标左键，各个AP Div的z轴顺序会发生相应的改变 返回目录六、AP Div和 Div标签 v在HTML代码中，AP Div和 Div标签使用共同的