Dreamweaver中层(AP DIV)错位问题的解决方法

关于学生使用Dreamweaver时常见问题的分析重庆建华职业学校熊海林各位老师都知道Dreamweaver对于细节和规范的要求很高，而学生常常比较粗心，制作也比较随意，经常会产生一些意想不到的错误，让我们无从下手调试解决错误。

今天我们就一起来讨论一下Dreamweaver纠错的问题。

要想让学生少犯错误，首先要提前强调经常出错的关键点，并要求学生记在笔记本上。

当然，这不会彻底杜绝学生犯错，但至少能大大减少学生出错的概率，哪些是学生常犯的错误呢，我在这里列举一下，供各位老师参考：一，站点文件：建立一个规范整洁的站点文件夹是一个网站以后能够顺利运行的根本，也是减少出错的基础。

而学生往往忽略这一点，对站点及文件命名归类并不重视。

学生常见的错误主要有：中文命名文件；站点根目录内没有用images和flash等文件夹归类，图片、代码文件混在一起；首页没有用index 命名，其他文件起名随意，如AAA,B1等，不易查找；部分网站内容没有放置在站点根目录内。

如果站点本身就有问题，那么后面出错的机会就会非常大，所以一定要要求学生规范建立站点，养成好习惯。

二，路径错误：路径是网页与相关元素的桥梁，一旦出现错误，精心设计的页面也就惨不忍睹了。

比较常见的是图片链接的错误，我们经常会发现页面上的图片无法显示了，到底什么原因呢？有可能是以下问题：如果是一个小红叉的图片提示，那么多半是路径错误，你需要查看一下图片的路径，如果设置的是“../images/good.jpg”这样的相对路径，代表在父级目录的images文件夹下的good.jpg图片文件，这是正确的，那么如果设置的是“file:///C|/Documents/good.jpg”，这是一个本机绝对路径，代表在C 盘我的文档下的good.jpg图片文件，那么就说明很可能是路径的问题，这个图片没有在你的站点文件夹内，因此未找到该图片。

图片无法显示还有另外一种情况，就是一片空白，没有任何提示，那你看一下图片的名称，不是中文命名，就是格式错误，把PSD文件当成JPG文件插入进网页中来了。

第11讲布局技术-层AP Div1.1教学目标：◆知识目标1.理解层的作用2.掌握层的各种基本操作◆技能目标能运用层进行布局，能设置层的重叠与嵌套，能合理操作层◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握层的各种基本操作1.3 教学难点理解层的作用和操作。

1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：一、激趣导入，揭示课题层是一种HTML页面元素，可以将其定位在页面上的任意位置。

层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。

通过Dreamweaver MX 2004，可以使用层来设置页面的布局。

可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。

还可以在一个层中放置背景图像，然后在该层的前面放置第二个层，利用层不仅可以非常灵活地放置内容，还可以根据不同的设置，实现相应的动态效果。

二、层的操作层可以理解为浮动在网页上的一个页面，它可以准确地定位在页面上的任意位置，并可以规定它的大小。

通过层可以对网页进行精确定位。

不仅如此，通过对层与行为的综合使用，还可以创作出赏心悦目的动作效果。

层可以包含文本、图像或其它任何可在网页中放置的内容。

层可以重叠，并且可以改变重叠次序，因此可以在网页上实现内容的重叠效果；可以动态地设定层的显示或隐藏，实现层内容的动态交替显示等特殊的显示效果；层可以嵌套，子层会遗传父层的特征，例如可见性，位置移动等。

0.1新建层用Dreamweaver可以方便地在页面上创建层并精确地将层定位。

建立新层的步骤：●在编辑窗口的“插入”栏的“布局”选项卡中，选取“描绘层”按钮，如图2-95所示。

或者执行“插入/布局对象/层”命令。

div被iframe遮住的几种情况及解决方法当一个div被一个iframe遮住时，通常是由于以下几种情况：1. iframe的层级高于div：在HTML中，元素可以通过z-index属性来指定其层级。

如果iframe的z-index值比div的z-index值高，则iframe将会在div的上方显示，从而遮住div。

解决方法是使用CSS将div的z-index值设置为比iframe更高的值，确保div位于iframe的上方。

2. iframe的宽度和高度过大：如果iframe的宽度和/或高度超过了div，那么iframe将会遮住div的内容。

解决方法是通过调整iframe的宽度和高度，确保它不会超过div的大小。

3. iframe的position属性为fixed或absolute：当iframe的position属性值为fixed或absolute时，它将脱离正常文档流，并且可以覆盖其他元素，包括div。

解决方法是将iframe的position属性值设置为static或relative，使其保持在正常文档流中，从而不会遮住div。

4. iframe位于div之上方：如果div和iframe同时位于页面上，但是div在iframe之后被创建或者移动到iframe之后，那么iframe将会遮住div。

解决方法是通过CSS调整div和iframe的位置，确保div位于iframe之前。

除了上述情况，还可能存在一些特殊的情况。

下面是一些其他可能导致div被iframe遮住的情况以及对应的解决方法：5. CSS的overflow属性：如果div的overflow属性值为hidden或scroll，则它的内容可能会被截断，不能完全显示。

即使iframe在其之后创建，也可能会遮住截断的内容。

解决方法是通过调整div的overflow属性值为visible，以便完全显示其内容。

6. iframe的透明度：如果iframe的透明度设置为小于1的值，那么它将会遮住后面的内容，包括div。

第四章APDiv的基本操作第四章AP Div基本操作一、单项选择题1、在Dreamweaver cs3中，不能选中AP DIV的方法是（A）A、单击AP Div的边框B、双击Ap Div的任意位置C、单击AP元素面板中的Ap Div名称D、单击AP Div的控制面板2、在Dreamweaver cs3中，单击“插入记录-布局对象-AP Div”命令，插入的AP Div的默认值大大小是（D）A、200*100PXB、200*200C、215*100D、200*1153、在Dreamweaver cs3中，关于嵌套AP Div的说法正确的是（C）A、子AP Div必须包含在父AP Div内B、当父AP Div被定义为隐藏属性时，子AP Div也一定隐藏C、当父AP Div移动时，子AP Div也随之移动D、在“AP Div”面板中，直接拖拽一个AP Div的名称到另一个AP Div的名称上，可以创建嵌套AP Div4、关于AP Div的说法错误的是（D）A、在AP Div内再绘制一个AP Div一定可以创建嵌套AP DivB、利用AP Div可以非常方便的将页面元素放置到网页的任意位置C、AP Div可以喝表格相互转换D、利用AP Div可以制作网页特效5、在Dreamweaver cs3中，通过AP元素面板不能实现的是（C ）A、设置AP Div的可见性B、设置AP Div的大小C、改变AP Div的叠放顺序D、创建嵌套AP Div6、关于Z轴，以下说法错误的是（D）A、Z值越大，AP Div越靠上B、Z值必须是连续的C、Z值可以是负数，但不能是小数D、在AP元素面板中，拖动AP Div到一个新位置，其Z值也将发生变化7、要想设置AP Div的可见性区域大小，在AP Div属性面板上可以设置的属性是（A）A、溢出B、可见性C、剪辑D、Z轴8、选中AP Div后，要使其向左移动1个像素的位置，以下操作正确的是（C）A、直接按方向键→B、按下CTRL键的同时按→C、按下Shift键的同时按→D、按下Ctrl+Shift键的同时按→9、当AP Div的溢出属性设置为（C）时，一定会出现滚动条A、autoB、defaultC、hideenD、scroll10、要设置无论父AP Div是否可见，子AP Div均可见，子AP Div的“可见性”属性应该设置为（B）A、inheritB、defaultC、hiddenD、visible11、要精确设置AP Div在页面中的位置，在属性面板上可以使用的属性是（A）A、宽和高B、左和上C、Z轴D、剪辑12、当子Ap Div在显示属性设置为visible时，如果父Ap Div设置为hidden，则子AP Div呈现的状态是（B）A、显示B、隐藏C、不一定D、以上均不正确13、在Dreamweaver cs3中通过AP元素面板不能实现的是（）A、设置AP Div的可见性B、设置AP Div的溢出属性C、改变AP Div的叠放顺序D、防止AP Div重叠14、关于嵌套AP Div，以下说法正确的是（）A、父AP Div增大或减小，子AP Div也随之增大或减小B、在AP元素面板中左下方拖动子AP Div可使它与父AP Div的嵌套关系取消C、子AP Div的z值必须小于父AP Div的z值D、子AP Div的位置必须包含在父AP Div中，不能超出父AP Div的范围15、在“将表格转换为AP Div”的对话框中，不包括的布局工具是（B）A、显示网格B、靠齐到网格C、显示标尺D、显示AP元素面板二、填空题1、按住（Shift）键，同时使用方向键，以1个像素为单位精确调整AP Div的大小2、选中两个AP Div，选择“修改-排列顺序-左对齐”，可以使AP Div向（）个AP Div 左方对齐3、当子AP Div的可见性为（）时，其可见性与父AP Div相同4、将表格转换为AP Div时，表格的空白单元格（）产生AP Div5、AP Div的z值越大，AP Div越靠（）三、简答题1、在Dreamweaver cs3中，选中AP Div的方法有哪些？2、AP Div的溢出性有哪些？各有什么含义？3、在嵌套AP Div中，子AP Div与父AP Div有哪些关系？四、操作题1、在Dreamweaver cs3中，如何改变AP Div的叠放顺序2、在Dreamweaver cs3中，如何创建嵌套AP Div。

第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光标位置。