- 1、本文档共26页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
网页设计与制作;6.1APDiv简介
6.2APDiv和表格的转换
6.3使用Spry布局对象
6.4使用CSS和Div布局页面;APDiv是一种网页元素定位技术,使用APDiv可以以像素为单位精确定位页面元素,并且可以将其放置在页面的任意位置。
6.1APDiv简介
(1)利用APDiv技术,可以将许多元素置于Div中,因为Div可以重叠,可以产生许多重叠效果。
(2)可以利用Div来精确定位网页元素。它可以包含文本、图像、甚至其它Div,凡是HTML文件可包含的元素均可包含在Div中。
(3)Div可以转换成表格,为不支持Div的浏览器提供了解决方法。
(4)Div可以显示和隐藏,利用这一功能可以实现网站导航中下拉菜单的制作。;6.1APDiv简介
6.1.1设置APDiv的属性
在Dreamweaver中插入APDiv的方法有两种:选择“插入”→“布局对象”→“APDiv”命令或“布局”面板插入栏中单击按钮即可插入APDiv。
APDiv属性面板
(1)CSS-P元素:用于设置APDiv的名称,以便在AP元素面板和JavaScript代码中标识该APDiv。
(2)左:用于设置APDiv的左边界距离测览器窗口左边界的距离。
(3)上:用于设置APDiv的上边界距离测览器窗口上边界的距离。
(4)宽::用于设置APDiv的宽。;6.1APDiv简介
6.1.1设置APDiv的属性
(5)高:用于设置APDiv的高。
(6)Z轴:设置APDiv在AP元素面板Z轴的顺序,即设置APDiv的层叠顺序。
(7)可见性:用于设置APDiv的显示状态,包括default(默认值)、inherit(继承)、visible(显示)和hidden(隐藏)4个选项。其中:
●default(默认):表示不指定可见性属性,当未指定可见性时,多数测览器都会默认为继承。
●inherit(继承):表示使用该APDiv父级的可见性属性。
●visible(显示):表示显示该APDiv的内容,而不管父APDiv的可见性属性。
●hidden(隐藏):表示隐藏APDiv的内容,而不管父APDiv的可见性属性。;6.1APDiv简介
6.1.1设置APDiv的属性
(8)背景图像:用于设置APDiv的背景图像。
(9)背景颜色:用于设置APDiv的背景颜色。
(10)溢出:用于控制当APDiv的内容超过APDiv大小时如何在测览器中显示APDiv。包括visible(可见)、hidden(隐藏)、scroll(滚动条)和auto(自动)4个???项。其中:
●visible(可见):APDiv将自动适应APDiv中内容的宽度与高度;
●hidden(隐藏):超出APDiv范围的内容不会显示;
●scroll(滚动条):在APDiv中将出现滚动条,而不管APDiv中是否需要滚动条;
●auto(自动):当APDiv中的内容超出APDiv范围时将显示滚动条。
(11)剪辑:用于设置APDiv的可见区域的大小。在其左、上、右和下文本框中直接输入数值即可。;6.1APDiv简介
6.1.2AP元素面板的使用
AP元素的面板可以方便地处理Div的操作、
设置层的属性。APDiv名称按创建的顺序依
次命名为apDiv1、apDiv2。并且Z-index值
也是从1开始逐渐变大。在AP元素面板中单击
APDiv名称,就可以随意选择当前文档中的任何APDiv。在文档窗口中选择APDiv,就会在APDiv周围出现8个黑色的正方形尺寸调节点。拖动该尺寸的调节点,就可以扩大或缩小APDiv的宽度或高度。调节APDiv四角处的尺寸调节点,就可以同时调节上下左右的大小。
在AP元素面板的左边是眼睛标记,用鼠标点击左侧的眼睛标记,可以显示或隐藏所选的Div。;6.1APDiv简介
6.1.3实践技能训练-使用APDiv布局网页
使用布局对象APDiv布局页面,具体操作如下:
(1)新建一个HTML文档,执行“插入”→“布局对象”→“APDiv”命令,在“属性”面板中设置“宽”为782像素,“高”为200像素,并将名称设置为Div1;
(2)将插入点置于Div1内,执行“插入”→“图像”命令,再弹出的对话框中选择wysjsc06\
0601中的top.jpg文件,单击“确定”按钮,插入后的效果如图6-5所示。
(3)执行“插入”→“布局对象”→“APDiv”命令,插入一个Div,在“属性”面板中设置名称为Div2,“宽”为182px,“上”为200px
您可能关注的文档
- 第4章 虚拟现实中的界面系统.pptx
- 第4章课后习题解答.pdf
- 第4章数据库查询.pptx
- 第05章 SQL Server程序设计基础.pptx
- 第5单元 演示文稿制作与播放技巧.pptx
- 第5章 使用CSS样式表修饰页面.pptx
- 第5章 图像分类.pptx
- 第5章 电子表格软件Excel 2016.pptx
- 第5章 嘉立创EDA(专业版)的环境参数及设置方法 -新板式夏天.pptx
- 第5章 排列与组合.pptx
- 2024年江西省寻乌县九上数学开学复习检测模拟试题【含答案】.doc
- 2024年江西省省宜春市袁州区数学九上开学学业水平测试模拟试题【含答案】.doc
- 《GB/T 44275.2-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第2部分:术语》.pdf
- 中国国家标准 GB/T 44275.2-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第2部分:术语.pdf
- GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构.pdf
- 《GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构》.pdf
- 中国国家标准 GB/T 44285.1-2024卡及身份识别安全设备 通过移动设备进行身份管理的构件 第1部分:移动电子身份系统的通用系统架构.pdf
- GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南.pdf
- 中国国家标准 GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南.pdf
- 《GB/T 44275.11-2024工业自动化系统与集成 开放技术字典及其在主数据中的应用 第11部分:术语制定指南》.pdf
文档评论(0)