第10讲 网页的布局元素：Ap DIV

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