《第4Div和布局对象的使用.ppt》由会员分享，可在线阅读，更多相关《第4Div和布局对象的使用.ppt（18页珍藏版）》请在三一文库上搜索。
1、第4章Div和布局对象的使用,教学内容：AP Div是一种网页元素定位技术，使用AP Div可以以像素为单位精确定位页面元素，并且可以将其放置在页面的任意位置。使用框架可以将浏览器窗口分成包含单独网页的区域，这样可以使网页布局更合理，同时也能对网站或网页起到导航的作用。,学习目标 掌握AP Div在网页中的使用 掌握AP Div的基本操作 掌握AP Div和表格的转换 掌握使用Spry布局对象,教学目标和基本要求 _ _ _ 教学时间：本章共分_课时 教学方法 案例教学 多媒体教学 理论面授 教学素材 课程范例文件：sample第4章 练习文件：exercise第4章,4.1 在网页中使用AP
2、Div,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并设置其属性 在Dreamwea
3、ver 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键的同时再按方向键，可以在相应的方向上每次增加一个像素。
4、选中AP Div，按住CtrlShift组合键的同时再按方向键，可以在相应的方向上每次增加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转换为表格，以使该网页能够在Microsof
5、t 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代码），然后设置构件的样式。框架行为包括允许用户执行
6、下列操作的功能：显示或隐藏页面上的内容、更改页面的外观（如颜色）、与菜单项交互等 。,4.3.1 小案例使用【Spry】菜单栏 菜单栏构件是一组可导航的菜单按钮，当站点访问者将鼠标悬停在其中的某个按钮上时，将显示相应的子菜单。使用菜单栏构件可在紧凑的空间中显示大量可导航信息，并使站点访问者无需深入浏览站点即可了解站点上提供的内容 。,4.3.2小案例使用Spry选项卡式面板 选项卡式面板构件是一组面板，用来将内容存储到紧凑空间中。站点访问者可通过单击他们要访问的面板上的选项卡来隐藏或显示存储在选项卡式面板中的内容。当访问者单击不同的选项卡时，构件的面板会相应地打开。在给定时间内，选项卡式面板构
7、件中只有一个内容面板处于打开状态 。,4.3.3小案例使用Spry折叠式面板 折叠构件是一组可折叠的面板，可以将大量内容存储在一个紧凑的空间中。站点访问者可通过单击该面板上的选项卡来隐藏或显示存储在折叠构件中的内容。当访问者单击不同的选项卡时，折叠构件的面板会相应地展开或收缩。在折叠构件中，每次只能有一个内容面板处于打开且可见的状态 。,4.3.4小案例使用Spry可折叠面板 可折叠面板构件是一个面板，可将内容存储到紧凑的空间中。用户单击构件的选项卡即可隐藏或显示存储在可折叠面板中的内容。,4.4 综合案例使用AP Div制作下拉菜单实例,下拉菜单是网上最常见效果之一，下拉菜单不仅节省了网页排版上的空间，使网页布局简洁有序，而且一个新颖美观的下拉菜单为网页增色不少。Div拥有很多表格所不具备的特点，如可以重叠、便于移动、可设为隐藏等。这些特点有助于我们的设计思维不受局限，从而发挥更多的想象力 。,本 章 小 结,本章中主要了Dreamweaver中的另一个排版工具DIV。通过本章的学习，读者不仅应该掌握DIV的各种使用方法和技巧，还应当更深层次地对其进行理解。 DIV拥有很多表格所不具备的特点，比如可以重叠、便于移动、可设为隐藏等。这些特点有助于我们的设计思维不受局限，从而发挥更多的想象力。,