Dreamweaver中层(AP DIV)错位问题的解决方法
第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 对齐层
使用Dreamweaver时常见问题的分析

关于学生使用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 Div

第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所示。
或者执行“插入/布局对象/层”命令。
第7章使用AP Div布局网页 中文版Dreamweaver CS6网页制作课件

选择需更改堆叠顺序的AP Div后,选择【修 改】/【排列顺序】命令,在弹出的子菜单中 选择“移到最上层”或“移到最下层”命令 即可。
从入门到精通
清华大学出版社
15
中文版Dreamweaver CS6网页制作从入门到精通
7.2.7 改变AP Div的可见性
1
隐藏AP Div
从入门到精通
清华大学出版社
18
Dreamweaver CS6 从入门到精通
7.3 AP DIV的属性设置
7.3.1 单个AP Div的属性设置 7.3.2 多个AP Div的属性设置
中文版Dreamweaver CS6网页制作从入门到精通
7.3.1 单个AP Div的属性设置
选择要设置属性的单个AP Div,在“属性” 面板中进行设置即可。
清华大学出版社
17
中文版Dreamweaver CS6网页制作从入门到精通
2.显示AP Div
如果要显示隐藏的AP Div,则需要在“AP 元 素”面板中选择隐藏的AP Div,再在选中AP Div上单击鼠标右键,在弹出的快捷菜单中选 择“可视”命令即可,再在编辑窗口的空白 区域单击鼠标左键即可显示AP Div。
从入门到精通
清华大学出版社
20
中文版Dreamweaver CS6网页制作从入门到精通
从入门到精通
清华大学出版社
12
中文版Dreamweaver CS6网页制作从入门到精通
1.在“属性”面板中更改AP Div的堆叠顺序
选择需改变堆叠顺序的AP Div后,在“属性” 面板中的“Z轴”文本框中输入所需的数值, 大于原数字可将该AP Div在堆叠顺序中上移, 小于原数字可将该AP Div在堆叠顺序中下移, 完成输入后按“Enter”键确认即可。
使用层APDiv搭建页面

任务七 AP Div —知识拓展
AP元素与表格的转换 • 将表格转换为AP Div。将表格转换为AP
Div是为了便于网页布局的调整 。 • AP元素转换为表格。把AP元素转换为表格
是为了与低版本的浏览器兼容 。
项目三 布局技术
任务七 AP Div —知识拓展
注意: Dreamweaver CS3不会把重叠的AP 元素转换为表格,要防止AP元素重叠, 可在AP元素面板中启用“防止重叠”选 项。如果是在建立了重叠AP元素之后才 选择了此选项,此时只有通过移动AP元 素的方法把重叠的AP元素分开。
在使用“拖动AP元素”行为时,必须确保 触发该动作的事件发生在访问者试图拖动AP 元素之前。最佳的方法是使用onLoad事件, 将“拖动AP元素”附加到body对象上,操 作如下:
1. 插入一个AP元素,单击窗口状态栏左下角的 <body>标记,在行为面板中单击按钮添加行为, 从弹出列表中选择“拖动AP元素”命令,弹出 拖动AP元素对话框。
任务七 AP Div —问题探究
在Dreamweaver CS3以下版本AP Div被称为层。 AP Div又称绝对定位元素(AP元素),是分配有绝对 位置的,用来精确控制浏览器窗口对象位置的HTML 页面构成元素。AP Div可以通过层的重叠和次序的改 变,实现一组包含着文字或图像等元素的胶片变换效 果;可以通过动态设定层的显示或隐藏,实现层内容 的动态交替等特殊显示效果;通过层子层遗传父层的 嵌套特征,实现内容的可见及位置移动等。AP Div的 出现使网页技术从二维空间拓展到三维空间,使页面 元素能实现相互重叠,及更复杂的布局设计,成为网 页设计新的发展方向。
工作任务
层是网页制作时经常用到的对象,也是重要 的网页布局工具之一。由于层在页面布局方面具 有更大的随意性,通过拖动、方向键或指定坐标 位置的方式就可以放到网页的任何位置,不受网 页中其他元素的限制和干扰,就像浮在页面上方 一样。运用层的此特性创建布局更加合理、美观 的网页效果。
[精品]DWAP元素的创建和使用
![[精品]DWAP元素的创建和使用](https://img.taocdn.com/s3/m/c2b594afd4d8d15abe234ee3.png)
6、AP元素的缺点: • 目前只有4.0以上的高版本浏览器才支持AP元素。 • 难以制作一个适应不同分辨率的网页。(当一个页 面使用了多个AP元素后,页面的复杂程度增加而导 致编辑起来非常烦琐;编辑状态与浏览状态的实际 效果有相当明显的差别等。) 注意:考虑到兼容性和修改时的方便,一般可在编 辑或排版网页时采用AP元素布局或者部分页面采用 AP元素布局,而在发布网页时再将其转换为表格布 局。
本章作业: 1.简述如何选择一个、多个连续、多个不连续的AP元素? 2.说出AP元素的分类及其区别。 3.简述插入AP元素的两种方法。 4.课后习题
多个AP元素的属性: • 标签:制定所用的html标签。推荐使用span和div。
7.2.4AP元素的基本操作
1.激活AP元素:插入点放入AP元素内,向AP元素中添加内容。 通过在AP元素中单击激活AP元素。 2.选择AP元素:对AP元素设置属性;和激活AP元素的显示方式 与作用均不同 –单击AP元素边框选择一个AP元素、多个AP元素、连续AP 元素、不连续AP元素 –在AP元素面板中通过选择AP元素的名字,直接选取一个 (按shift选多个) –单击AP元素标记或标签 3.调整AP元素大小 一次可调整一个AP元素的大小也可同时调整几个AP元素的大小 具体操作是:拖动或在属性面板中输入AP元素的宽、高
7、AP元素面板 AP元素面板是一个可视化管理AP元素的工具。 执行【窗口】->【AP元素】命令,即可 打开AP元素面板, 如下图所示。 其中眼睛睁开和关闭表示AP元素的显示和隐藏。 AP元素还 有一个概念就是AP元素数,AP元素数决定了重叠时哪个AP 元素在上面哪个AP元素在下面。比如AP元素数为2的AP元 素在AP元素数为1的AP元素的上面。改变AP元素数就可以 改变AP元素的重叠顺序。 AP元素面板中可以实现的操作有:可选择显示、隐藏、防 止AP元素重叠。在Dreamweaver中使用AP元素面板使得对 AP元素的操作变得十分方便和简单。
应用Dreamweaver网页设计时常见问题的分析
时要将 图片 的对方 属性改 为绝 对居 中 ,然后再 控制 图片的左
右边 距 就 可 以 了 。
4 表 格混 乱
表格是一个 让人 又快捷 又难调试 的布局方 式 ,它简单方 便 ,很容 易上手 ,但 同时不 易掌控 ,经常错位 、混乱 ,让人 无所适从 。很多初 学者采用单 一表格来 给整个 页面 布局 ,这
会产 生一些 意想不 到的错误 ,使在调 试时很 难下 手。这里 就 常见 的路径 管理 、图文混排 、表格处 理 、各 类布局 、站 点文 件管理等问题进行讨论 。
3 图 文混排
图文混 排就是将 图片 和文字放 在一起 ,在混排 时经 常会 出现错位 ,无法对 齐等情况 。最常见 的是栏 目条上 一个小 图
L I U Xu - j a n
( J i a n g x i Y u z h o u S c i e n c e a n d T e c h n o l o g y I n s t i t u t e, J i a n g x i Xi n y u 3 3 8 0 2 9, C h i n a )
Ab s t r a c t :D r e a mwe a v e r i s a v e r y s i mp l e a n d e a s y t o u s e b u t p o w e r f u l w e b p a g e ma k i n g s o f t wa r e .Ho w e v e r ,i t i s a l s o a l o t o f v e y r c o n f u s e d s o f t wa r e .I n t h e u s e o f Dr e a mwe a v e r we b p a g e d e s i g n ,o n t h e p a t h ma n a g e me n t ,mi x e d ma p a n d t e x t ,f o r m p r o c e s s i n g ,v a i r o u s t y p e s o f l a y o u t ,s i t e i f l e ma n a g e me n t ,o t f e n ma k e e ro r s a r e a n ly a z e d ,a t t h e s a me t i me ,p u t f o r w a r d
div被iframe遮住的几种情况及解决方法
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的基本操作
第四章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.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光标位置。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
Dreamweaver中层(AP DIV)错位问题的解决方法
新手在使用Dreamweaver时,内容“错位”应该算是常见的问题。
这个错位问题,大概可以描述为这样:
用Dreamweaver绘制层(也叫AP DIV或者AP元素,以下均用“层”来表示)并调整位置之后,在浏览器正常显示,如果下图:
改变浏览器的大小之后(浏览器取消最大化,或者换一台电脑打开),网页的内容错位(以下只是错位的一个情况),显示样子如下:
下面先说一下解决方法:
一、找到相应错位的网页内容的标签(非层中的内容):
如果错位的内容是文字的话,可以在Dreamweave“设计”选中这些文字,之后切换到Dreamweaver的“代码”,这些文字外层的标签,就是要找的标签了;如果错位内容是图片的话,只要点击相应图片,之后再到“代码”里找外层标签就好了。
用上例内容,操作图如下:
步骤1:
步骤2:
二、给这个标签加“相对定位”:只要在代码里加上style="position:relative;”就行了,上例中,应该写成这样:<div id="div2" style="position:relative;">相当于网页的内容</div>
三、找到相应的层的代码:方法可以如上,或者在“设计”视图下,点击层左上那个小方框,点击之后,切换到“代码”视图下,整个层的内容都会选中,上例的效果图如下:
步骤1:点击层左上方小方框;
步骤2:找到相应代码;
四、直接把层的整个代码剪切到“相应错位的网页内容的标签(也就是刚刚改动过代码的那个标签)”里面,上例中操作如下图:
注意:如果找到的“相应错位的网页内容的标签”是
<td>网页内容</td>的话,那你要在<td></td>里面加上这个:
<div style="position:relative;"></div>
也就写成这样:<td>网页内容<div style="position:relative;"></div></td>
之后,再把相应的层的代码内容剪切到新加的这个DIV里,也就是剪切到<div style="position:relative;"></div>里;
到此,这个“错位”问题应该是解决了。
当然,还会有其它复杂情况是本文考虑不到的,那只能再寻其它妙法了。
声明:
这个是为使用dreamweaver的新手且不能看代码、不懂相关术语的朋友所写的,所以看上去有些不简捷扼要,特此小声明一下,水平有限,望业内朋友多多指点。
以下是关于标签定位的内容是给要求知道原理的朋友看的,不在多作解释啦:
Dreamweaver生成的层,是绝对定位(可查一个“绝对定位”的解释),而绝对定位的块级元素是以含有相对定位或绝对定位的父级标签作参照定位自己的位置的,如果没有这样的标签,它就会以<body>作为参照定位了。