模块6-利用AP-Div布局网页4

主讲教师：谭荣华网页设计与制作——学习情境6：利用APDiv布局网页布置习题学习目标知识讲解课堂实践教学总结利用APDiv布局网页学习情境6课程引导AP（Absolutepositioning），绝对定位的意思。APDiv与时间轴是Dreamweaver中两种比较重要的功能。其中，APDiv相当于一个容器，可以包含所有在HTML文件中出现的元素，如文本、图像和Flash等，可以随意将APDiv拖到页面的任意位置，从而简单又精确地定位页面对象。而使用时间轴可以在网页中创建动画，它是以帧为最基本的概念来运作的概述我听别人说现在都流行div+css，表格布局已经过时了，然后学了一下div+css，就去了一家做网站的公司上班，老板每天给我一个网站的源码供我学习，可是里面网站的布局全都是表格布局，一开始看的是简单的网站，我不习惯表格布局，就把网站源码很轻松的改成了div+css布局的，可是今天看的这个网站表格布局的很复杂，下拉菜单用表格布局+javascript,我看了一天没整明白，但是我看div+css+javascript实现下拉菜单的代码就很轻松的看懂。我问老板说用表格做还是div+css,表格是不是已经被淘汰了？老板说div+css虽然好，可是在不同的浏览器中显示结果不同，所以他还是习惯用表格做，div+css他不是很熟悉。我该怎么办呢？继续向更高处钻研div+css，自创一路（因为我估计公司库里的网站全都是表格布局的）还是懒点？做网站时候套用公司库的表格模板？我的感觉是每个模块都要放div里，不然我真不知道怎么调整它的位置，做网站的时候我该在设计视图中画表格还是直接写代码？我现在的习惯是写代码。希望大侠们多多提意见，感激不尽!表格布局的优势与劣势1、表格操作简单直观，只要会一点word操作的人员，就差不多可以使用frontpage设计网页了，如果专业一点可以使用Dreamweaver对网页进行编辑。2、网页设计速度快，如果你要编辑的网页不是很多的话，使用表格排版速度快3、可视化操作强，所有网页在网页编辑软件中编辑，可以视化操作，直观，你所看到的内容，和在浏览器中显示的内容基本上是一样的。4、在网页设计时是可重复性操作不强，如一个网页的布局和另一个如果页面相同的布局的话，得重新设计一个。5、网页如果要修改的话、可以每个独立的修改，如果很多风格一样的页面，不能同时操作。6、网页设计时文件内容很多及的话，文件会变得非常之大。DIV+CSS网页布局优势与劣势1、要做DIV+CSS的网页设计师必须要会手写HTML语言的能力，所以对设计师来说相对要求高一点。2、同时得会手写CSS语言的能力。3、可视化操作性不强，在很多可视化操作软件中看不出效果。4、网页表现与结构分离，对CSS修改可以对网页文件布局修改，如果有多个网页相同布局的话，可以调用同一个CSS文件实现布局功能。5、网页打开速度快，因为它可以先打开内容，再调用CSS文件。建议（一个网页设计师在回答先前提问的原话）：Table布局相对一目了然，配上CSS，效果也不差，以我的经验来说，Table不容易变形。嗯……我是指在各种开发工具里面，但是想要改版就有些麻烦，例如说一个板块希望跟另一个板块换位置，同时想做精细一些的边框也稍显复杂。CSS+DIV貌似现在比较主流，各大网站多是这样布局。效果比Table布局更为精致。这种布局自然是不差，但要求页面设计者对CSS了解比较透彻。如果没有详细的说明文档，又不是开发者本人的话，重用就有些头痛了，有时候会出一些莫名其妙的问题。(好吧，我承认我经常“移植”各大网站的布局)我个人建议是：如果针对用户群有限或对界面要求不高，如OA或企业内部网站，用Table布局好如果是外网，针对大量用户或希望页面美观，DIV+CSS是不二的选择。布置习题知识讲解课堂实践教学总结课程引导利用APDiv布局网页学习情境6学习目标1.掌握利用APDiv布局对象有效控制页面对象和利用时间轴制作动画的方法学习目标专业能力目标专业知识目标专业素质目标布置习题知识讲解课堂实践教学总结课程引导利用APDiv布局网页学习情境6学习目标1.使用DreamweaverCS3中APDiv容器和时间轴基本操作的能力2.利用DreamweaverCS3中APDiv容器和时间轴控制网页中对象的能力专业能力目标布置习题知识讲解课堂实践教学总结课程引导利用APDiv布局网页学习情境6学习目标1.创建普通APDiv、选择APDiv、APDiv的属性设置2.移动APDiv、改变APDiv的大小、对齐APDiv、AP元素面板的使用、时间轴、创建时间轴动画3.使用Spry菜单栏、使用Spry选项卡式面板、使用Spry折叠式、使用Spry可折叠面板专业知识目标布置习题知识讲解课堂实践教学总结课程引导利用APDiv布局网页学习情境6学习目标1.自主学习能力2.获取知识能力3.创新能力4.知识应用能力5.结构布局能力专业素质目标课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解教学案例案例01–利用APDiv布局网页版面案例02–使用APDiv和时间轴制作动画案例03–在网页添加下拉菜单效果综合案例实训-制作“某网络技术服务公司”首页页面课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解案例操作过程相关知识点案例01–利用APDiv布局网页版面课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点“插入记录布局对象APDiv“布局”插入栏”绘制APDiv”绘制多个APDiv①创建普通APDiv课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点标签选择器选择面板选择快捷键选择选择多个APDiv②选择APDiv课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点③标记与属性课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解案例02–使用APDiv和时间轴制作动画案例操作过程相关知识点课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点鼠标拖动每次移动1个像素(方向键)每次移动10个像素(Shift键+方向键)①移动APDiv课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点拖动边框拖动对角线“属性”面板中修改宽度和高度值②改变APDiv的大小课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点“修改排列顺序”③对齐APDiv注意：对齐时是以最后一个选定的APDiv的边框来进行的课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点④AP元素面板的使用课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点“时间轴”面板用于显示APDiv与图像随时间变化的属性。选择“窗口时间轴”命令即可打开“时间轴”面板⑤时间轴课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点帧——是进行动画制作的最基本的单位，每一个精彩的动画都是由很多个精心雕琢的帧构成的，在时间轴上的每一帧都可以包含需要显示的所有内容，包括图形、声音、各种素材和其他多种对象关键帧——顾名思义，有关键内容的帧。用来定义动画变化、更改状态的帧，即编辑舞台上存在实例对象并可对其进行编辑的帧⑥创建时间轴动画课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解案例03–在网页中添加下拉菜单效果案例操作过程相关知识点课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点“插入记录布局对象Spry菜单栏”“插入布局”的Spry菜单栏按钮①使用Spry菜单栏课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点选项卡式面板（创建Tab菜单的工具），也就是卡片式的存放内容于紧凑空间的一种Spry效果。浏览者可以单击不同的选项卡（标签）来显示或隐藏其中的内容，同一时刻只有一个内容面板处于打开状态创建的方法和Spry菜单栏一样，两种方法：菜单命令法工具栏按钮插入法②使用Spry选项卡式面板课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点可以创建一组可折叠的面板。创建方法与前面两种类似③使用Spry折叠式课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解相关知识点可以创建一组可折叠的面板。创建方法与Spry折叠式类似区别在于Spry折叠式同一时刻只能一个面板的内容显示，显示一个其他面板会自动折叠起来。而Spry可折叠面板在同一时刻可以显示多个面板的内容，显示其中某个面板内容时其他面板的内容不会隐藏起来④使用Spry可折叠面板课堂实践布置习题学习目标教学总结课程引导利用APDiv布局网页学习情境6知识讲解页面效果图综合案例实训–制作“某网络技术服务公司”首页页面布置习题学习目标知识讲解教学总结课程引导利用APDiv布局网页学习情境6课堂实践课堂实践：同步模仿操作----案例01-03综合案例实训：制作“某网络技术服务公司”首页页面布置习题学习目标知识讲解课堂实践课程引导利用APDiv布局网页学习情境6教学总结一．疑难解析①如何嵌套APDiv？②如何解决不同分辨率APDiv的定位问题？③做主页用表格好还是APDiv好？④Div标签与Span标签有什么区别？布置习题学习目标知识讲解课堂实践课程引导利用APDiv布局网页学习情境6教学总结学习情境6主要学习了如何使用APDiv来定位元素，以及时间轴相关编辑的操作。APDiv与表格相似，都可以对网页进行布局，所不同的是，利用APDiv布局的网页更加灵活，因为APDiv可以重叠使用。结合时间轴与系统行为的应用，可以实现一些网页的动态效果。二．课堂小结学习目标知识讲解课堂实践教学总结课程引导利用APDiv布局网页学习情境6布置习题1.上网搜索表格布局与DIV+CSS布局二者比较的相关知识，了解网页布局技术的发展情况2.Spry选项卡、折叠式、可折叠式面板最大的作用是什么？3.思考：本情境所学内容是否就是DIV+CSS布局技术？