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