div和布局对象的使用

《div和布局对象的使用》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第4章Div和布局对象的使用教学内容：APDiv是一种网页元素定位技术，使用APDiv可以以像素为单位精确定位页面元素，并且可以将其放置在页面的任意位置。使用框架可以将浏览器窗口分成包含单独网页的区域，这样可以使网页布局更合理，同时也能对网站或网页起到导航的作用。学习目标掌握APDiv在网页中的使用掌握APDiv的基本操作掌握APDiv和表格的转换掌握使用Spry布局对象教学目标和基本要求_______________________________________________________________

2、__________________________________________教学时间：本章共分_______课时教学方法案例教学多媒体教学理论面授教学素材课程范例文件：sample第4章练习文件：exercise第4章4.1在网页中使用APDivAPDiv是CSS中的定位技术，在Dreamweaver中将其进行了可视化操作。文本、图像和表格等元素只能固定其位置，不能互相叠加在一起，使用APDiv功能，可以将其放置在网页中的任何一个位置，还可以按顺序排放网页文档中的其他构成元素。APDiv体现了网页

3、技术从二维空间向三维空间的一种延伸。APDiv和行为的综合使用，还可以创作出动画效果，而不使用任何的JavaScript或HTML编码。4.1.1关于AP元素面板在网页中创建了APDiv元素后，在面板中可以方便地处理APDiv的操作、设置AP元素的属性。4.1.2小案例——插入APDiv并设置其属性在DreamweaverCS6中有两种插入APDiv的方法，一种是通过菜单创建，一种是通过插入栏创建。4.1.3选择APDiv选择APDiv有以下几种方法。单击APDiv的边框，可以选中APDiv。在【AP元素】面板中

4、单击APDiv的名称，也可以选中APDiv。4.1.4调整APDiv的大小在文档窗口中插入APDiv后，在操作过程中，常常会根据需要对APDiv的大小进行适当地调整。调整APDiv的大小有以下几种方法。选中APDiv，拖曳APDiv上的控制点来改变APDiv的大小。选中APDiv，按住Ctrl键的同时再按方向键，可以在相应的方向上每次增加一个像素。选中APDiv，按住Ctrl＋Shift组合键的同时再按方向键，可以在相应的方向上每次增加10个像素。选中APDiv，在【属性】面板中的【左】、【上】、【宽】和【高】文

5、本框中输入数值，可以精确地控制APDiv的大小。4.2APDiv和表格的转换与表格相比APDiv更方便，因此在设计网页的时候应先考虑使用APDiv。但是浏览器版本对APDiv有一定的限制，因此不是所有的浏览器都支持APDiv的应用。相对来说使用表格能获得多个浏览器支持。4.2.1小案例——将APDiv转换为表格可以使用APDiv来排版网页，然后将APDiv转换为表格，以使该网页能够在MicrosoftInternetExplorer4.0和NetscapeNavigator4.0之前的版本中正确地显示。一般使用A

6、PDiv将元素精确定位，然后将APDiv转换为表格。4.2.2小案例—将表格转换为APDiv在设计网页时经常需要不断地调整页面的布局。如果要调整的网页布局是表格形式，调整起来就会比较费劲，此时用户可以将表格布局转换为APDiv布局进行调整。4.3使用Spry布局对象Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用构件。可以方便地插入这些构件（采用最简单的HTML和CSS代码），然后设置构件的样式。框架行为包括允许用户执行下列操作的功能：显示或隐藏页面上的内容、更改页面的外观（如颜色）、

7、与菜单项交互等。4.3.1小案例—使用【Spry】菜单栏菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏构件可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容。4.3.2小案例—使用Spry选项卡式面板选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。站点访问者可通过单击他们要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式

8、面板构件中只有一个内容面板处于打开状态。4.3.3小案例—使用Spry折叠式面板折叠构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点访问者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当访问者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠构件中，每次只能有一个内容面板处于打开且可见的状态。4.3.4小案例—使用Spry可折叠