Dreamweaver-CS5自学教程-第八课：AP-DIV元素

第八课：APDIV元素8-1创建APDIV元素一、创建APDIV元素什么是ApDiv？AP元素（绝对定位元素）,是一种HTML网页元素，一般称为“层”。即网页内容的容器，包含文本，图像或其他任何可以在HTML文档正文中放入的内容。且可以精确定位在网页中的任何地方。特点：1、作为容器，可以放置其他网页元素。2、灵活定位。在CS5中，系统使用DIV标记和CSS技术来实现AP层对象的效果，所以也称绝对定位的DIV标记。1、插入APDIV拖动创建APDIV层2、APDIV层的属性设置选中APDIV层APDIV层的属性在下方的属性面板设置（自身宽高，距离边框的距离等）3、光标定位在APDIV层内，即可输入文字文本；也可加入图像注：几乎所有的网页元素都可以加入APDIV层内4、APDIV层在网页内的定位可以直接拖动，也可以输入“左或上”来精确定位5、APDIV层的代码6、APDIV层与DIV标签的区别点击DIV标签，下方不显示属性面板8-2编辑APDIV元素二、编辑APDIV元素1、调整层的大小2、层的层次关系3、层的首选设置4、层的对齐实例：课程预览1、新建HTML，插入APDIV层，修改层的属性修改加入的图片大小想让后添加的APDIV层与设置好的APDIV层大小相同，只需要按住Shift键先选中需要调整的APDIV层，在点击设置好的APDIV层，然后点击“修改—排列顺序—设置相同宽度（高度）”Z轴的值决定APDIV层的上下排序关系2、直接拉动上方的APDIV层图标可以创建一个大小一致的层创建的层的默认大小值可以在“首选参数—AP元素”中修改APDIV层的对齐：先选需要移动的层，再选对齐参考目标层8-3层的可见性设置1.AP面板的使用（选择、命名、隐藏、次序）2.层的可见性3.简单的层特效1、层的属性设置：属性面板中可以设置每个层的显示状态也可以在“AP元素”中设置每个层的可见性，名称和显示顺序。2、添加层可见性的控制：点击“窗口—行为”，使行为窗口可见选中控制层显示的目标，在行为面板中选择“显示-隐藏元素”选中需要控制的对象，点击“显示-确定”选择显示的动作“onclick点击”选中控制层隐藏的目标，同样的方式添加隐藏行为，选择隐藏的动作“onclick点击”如果想让鼠标在点击显示或隐藏行为的时候出现“小手”效果，可添加一个空链接8-4层的溢出与裁切在层内添加文字内容时，文字太多会使可视面积大于层面积，出现溢出。1、溢出设置在下方的属性面板中进行显示，隐藏，滚动条或自动等设置。一般设置滚动条自动显示“auto”2、左和上剪辑输入剪掉的宽度，右和下剪辑输入（层的总宽度减需要剪掉的宽度）8-5层的嵌套嵌套的含义：嵌套并不表示一个在另外一个里面显示，而是指一个AP元素的代码在另一个AP元素代码的内部。嵌套的AP元素会随着父AP元素的移动而移动，继承父AP元素的可见性。1、AP层对象元素的嵌套方法：1）.将光标置于AP元素内。2）.工具栏中，插入-布局-拖动“绘制APDiv”到AP元素内。2、标尺、辅助线的使用1、层的从属关系AP层的嵌套：一个AP层的代码在另一个AP层代码的内部2、建立嵌套面板将鼠标光标定位在要添加嵌套的AP层内单击，点击上方面板中的“绘制APDvi”按住鼠标拖动到需要添加嵌套的位置，松开鼠标3、嵌套关系的特点移动时同时移动隐藏设置时嵌套同时隐藏4、辅助线的使用：为了精确定位可以显示标尺，利用辅助线对齐把鼠标发在两条辅助线之间，按住Ctrl键可以显示两条辅助线之间的距离。点击嵌套，下方的属性面板中显示的左距离是与父层的边距嵌套内部可以继续添加嵌套8-6APDIV与表格的转换1、不重叠性2、网格的使用3、表格与APDIV的转换1、进行网格设置，以方便APdiv图层的绘制2、绘制APDiv图层APDiv的图层属性可以在下方的属性面板设置如果不想绘制的图层出现重叠，可以在“AP”设置APDiv的图层代码3、表格与APDIV的转换