第10讲 网页布局元素：Ap DIV_第1页
第10讲 网页布局元素：Ap DIV_第2页
第10讲 网页布局元素：Ap DIV_第3页
第10讲 网页布局元素：Ap DIV_第4页
第10讲 网页布局元素：Ap DIV_第5页
已阅读5页，还剩31页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页的布局使用表格布局网页使用框架布局网页上一讲回顾本讲主要内容使用表格+框架布局网页APDiv元素的应用使用嵌入式框架布局页面使用表格布局优点：居中对齐，控制页面尺寸缺点：网页中的内容过多无法显示完整使用框架：优点：扩大显示区域缺点：居中对齐可能出现错位情况解决途径：表格+嵌入式框架实例演示插入IFRAME12用法如下：<iframename="a"width="120"height="160"src="tx1.html"frameborder="0"scrolling="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：使用修改菜单插入多个APDIV元素设置好一个APDIV元素的大小按住shift键选择其它未设置大小的APDIV元素，最后选择设好尺寸的那个APDIV元素执行菜单：修改/排列顺序/设置高度相同修改/排列顺序/设置宽度相同小窍门批量设置多个APDIV元素具有相同的大小方法2：使用编辑菜单，首选参数设置将布局选项卡中的绘制APDIV图标拖拽到编辑窗口即可小窍门设置多个APDIV元素的对齐方式方法1：使用修改菜单设置好一个APDIV元素的具体位置按住shift键选择其它未设置位置的APDIV元素，最后选择设好位置的那个APDIV元素执行菜单：修改/排列顺序/左对齐（右对齐）小窍门设置多个APDIV元素的对齐方式方法2：借助标尺和辅助线执行菜单：查看/标尺/显示（单位为：像素）按住鼠标左键拖动编辑窗口左边缘添加垂直辅助线按住鼠标左键拖动编辑窗口上边缘添加水平辅助线借助辅助线对齐多个APDIV元素按住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的嵌套完成布局添加一级菜单添加二级菜单（子层）为一级菜单添加显示/隐藏二级菜单的行为

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论