第10讲网页的布局元素apdiv.pptVIP

嵌套的含义：嵌套并不表示一个AP DIV元素在另外一个AP DIV元素里面显示，而是指一个AP元素的代码在另一个AP元素代码的内部。 嵌套在内的为子层，嵌套层外部的层称为父层。 三、AP DIV元素的嵌套 AP层对象元素的嵌套方法 第一步：将光标定位在要插入嵌套AP元素的父层内。第二步：拖动布局选项卡中的“绘制AP Div”到AP父层内。 嵌套的重要特点 子层可浮动于文本编辑窗口的任何位置 子层的大小可大于父层 子层会随着父层的移动而移动 子层会继承父层元素的可见性 可根据实际需要嵌套多个子层 如果将嵌套层中的父层删除，则其下包含的所有子层也将同时被删除。 三、AP DIV元素的嵌套 要求： 为师大地图各重要建筑物添加图片，要求当鼠标指针滑过时会展示一张图片及建筑物信息，当鼠标移开时，提示信息和图片都消失 知识点：使用热点、AP DIV的嵌套和居中、显示-隐藏行为 建立第一个AP元素放置地图 建立第二个AP元素放置建筑物图片 建立第三个AP元素显示提示文字 提交时间：本次课 本讲实践任务4： 四、用AP DIV布局页面 预备知识：网格的使用 查看/网格设置 提示：选择AP面板中的防止重叠选项更利于布局 要求网页能随分辨率的变化居中显示 进阶与提高 利用AP DIV层的嵌套制作下拉菜单 制作思路 首先使用AP DIV的嵌套完成布局 添加一级菜单 添加二级菜单（子层） 为一级菜单添加显示/隐藏二级菜单的行为 存在的问题：无法选中二级菜单中的选项 解决方案： 调整二级菜单的位置使其和一级菜单有所重叠 为二级菜单添加显示/隐藏的行为 完成所有内容添加后，再设置父层居中对齐 要求： 利用AP DIV元素布局网页，要求网页能随分辨率的变化居中显示，具有下拉菜单 知识点：AP DIV的嵌套和居中、显示-隐藏行为 提交时间：本次课 本讲实践任务5： * 网页的布局 使用表格布局网页 使用框架布局网页 上一讲回顾 本讲主要内容 使用表格+框架布局网页 AP Div元素的应用 使用嵌入式框架布局页面 使用表格布局 优点：居中对齐，控制页面尺寸 缺点：网页中的内容过多无法显示完整 使用框架： 优点：扩大显示区域 缺点：居中对齐可能出现错位情况 解决途径： 表格+嵌入式框架 实例演示 插入 IFRAME 1 2 用法如下： iframe name=a width=120 height=160 src=tx1.html frameborder=0 scrolling=no /iframe 参数含义： Name 框架的名字 Src 链接的源文件 Frameborder 框架的边框设置 Scrolling 滚动条设置 要求： 利用嵌入式框架完成，以下网页效果 提交时间：本次课 本讲实践任务1： 返回 AP Div元素的应用 关于 AP Div 元素 编辑AP DIV元素 AP DIV元素的嵌套 用AP DIV布局页面 一、关于AP Div元素 AP Div元素（又称为绝对定位的DIV标记），像文字、图片、表格一样是一种HTML网页元素。 AP Div的特点： 1、灵活定位： AP Div不仅可以精确定位在网页中的任何地方；还可以独立于整个网页平面，彼此任意重迭而不受网页束缚。 2、可以作为网页内容的容器，放置文本，图像或其他任何可以在HTML文档正文中放入的网页元素。 3、可以被显示和隐藏，通过程序在网页中控制层的显示或隐藏，实现层上内容的动态交替显示，实现一些特殊的显示效果。 AP Div元素的 HTML 代码 div id=apDiv1 要在层中显示的内容 /div 当选按 绘制 AP Div 钮绘制 AP 元素时，Dreamweaver 会在文件中插入一个 AP Div 的外框，并自动指定 Div 和 id 数值 (根据预设，apDiv1 就是第一个绘制的 div，apDiv2 就是第二个绘制的 div，依此类推)。 AP Div元素的 HTML 代码 每一个AP Div元素都有对应的属性设置，其代码在head/head之间 #apDiv1 { position:absolute; left:108px; top:73px; width:465px; height:279px; z-index:1; } 选中需删除的AP DIV 采用如下操作之一 按【Delete】键 选择菜单：“编辑/清除”命令 ** AP DIV元素的删除 ** 1、AP DIV元素的选取 选取一个AP DIV元素 在文档编辑区中单击AP DIV元素边框或单击AP DIV元素的选择柄。 选取多个AP DIV元素 按住【Shift】键，在需要选择的多个AP DIV元素中单击。 二、编辑AP DIV元素 2、AP DIV元素的移动 选中后AP DIV元素 直接