第章Div和布局对象的使用.pptVIP

第4章Div和布局对象的使用 教学内容：AP Div是一种网页元素定位技术，使用AP Div可以以像素为单位精确定位页面元素，并且可以将其放置在页面的任意位置。使用框架可以将浏览器窗口分成包含单独网页的区域，这样可以使网页布局更合理，同时也能对网站或网页起到导航的作用。 学习目标 掌握AP Div在网页中的使用 掌握AP Div的基本操作 掌握AP Div和表格的转换 掌握使用Spry布局对象 教学目标和基本要求 ___________________________________ ___________________________________ ___________________________________ 教学时间：本章共分_______课时 教学方法 案例教学 多媒体教学 理论面授 教学素材 课程范例文件：sample\第4章\ 练习文件：exercise\第4章\ 4.1 在网页中使用APDiv AP Div是CSS中的定位技术，在Dreamweaver中将其进行了可视化操作。文本、图像和表格等元素只能固定其位置，不能互相叠加在一起，使用AP Div功能，可以将其放置在网页中的任何一个位置，还可以按顺序排放网页文档中的其他构成元素。AP Div体现了网页技术从二维空间向三维空间的一种延伸。AP Div和行为的综合使用，还可以创作出动画效果，而不使用任何的JavaScript或HTML编码。 4.1.1关于AP元素面板 在网页中创建了AP Div元素后，在面板中可以方便地处理AP Div的操作、设置AP元素的属性 。 4.1.2小案例——插入APDiv并设置其属性 在Dreamweaver CS6中有两种插入AP Div的方法，一种是通过菜单创建，一种是通过插入栏创建。 4.1.3选择AP Div 选择AP Div有以下几种方法。 单击AP Div的边框，可以选中AP Div。 在【AP元素】面板中单击AP Div的名称，也可以选中AP Div。 4.1.4调整AP Div的大小 在文档窗口中插入AP Div后，在操作过程中，常常会根据需要对AP Div的大小进行适当地调整。调整AP Div的大小有以下几种方法。 选中AP Div，拖曳AP Div上的控制点来改变AP Div的大小。 选中AP Div，按住Ctrl键的同时再按方向键，可以在相应的方向上每次增加一个像素。 选中AP Div，按住Ctrl＋Shift组合键的同时再按方向键，可以在相应的方向上每次增加10个像素。 选中AP Div，在【属性】面板中的【左】、【上】、【宽】和【高】文本框中输入数值，可以精确地控制AP Div的大小。 4.2 AP Div和表格的转换 与表格相比AP Div更方便，因此在设计网页的时候应先考虑使用AP Div。但是浏览器版本对AP Div有一定的限制，因此不是所有的浏览器都支持AP Div的应用。相对来说使用表格能获得多个浏览器支持 。 4.2.1小案例——将AP Div转换为表格 可以使用AP Div来排版网页，然后将AP Div转换为表格，以使该网页能够在Microsoft Internet Explorer 4.0和Netscape Navigator 4.0之前的版本中正确地显示。 一般使用AP Div将元素精确定位，然后将AP Div转换为表格。 4.2.2 小案例—将表格转换为AP Div 在设计网页时经常需要不断地调整页面的布局。如果要调整的网页布局是表格形式，调整起来就会比较费劲，此时用户可以将表格布局转换为AP Div布局进行调整 。 4.3 使用Spry布局对象 Spry框架支持一组用标准HTML、CSS和JavaScript编写的可重用构件。可以方便地插入这些构件（采用最简单的HTML和CSS代码），然后设置构件的样式。框架行为包括允许用户执行下列操作的功能：显示或隐藏页面上的内容、更改页面的外观（如颜色）、与菜单项交互等 。 4.3.1 小案例—使用【Spry】菜单栏 菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏构件可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容 。 4.3.2小案例—使用Spry选项卡式面板 选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。站点访问者可通过单击他们要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式面板构件中只有一个内容面板处于打开状态 。 4.3.3小案例—使用Spry折叠式面板 折叠构件是一组可折叠的面板，可以将大