模块6利用APDiv布局网页.pptVIP

主讲教师：谭荣华 网页设计与制作　　　　——学习情境6：利用AP Div布局网页 布置习题 学习目标 知识讲解 课堂实践 教学总结 利用AP Div布局网页 学习情境6 课程引导 AP （Absolute positioning ），绝对定位的意思。 AP Div与时间轴是Dreamweaver中两种比较重要的功能。其中，AP Div相当于一个容器，可以包含所有在HTML文件中出现的元素，如文本、图像和Flash等，可以随意将AP Div拖到页面的任意位置，从而简单又精确地定位页面对象。而使用时间轴可以在网页中创建动画，它是以帧为最基本的概念来运作的 概述 我听别人说现在都流行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是不二的选择。 布置习题 知识讲解 课堂实践 教学总结 课程引导 利用AP Div布局网页 学习情境6 学习目标 掌握利用AP Div布局对象有效控制页面对象和利用时间轴制作动画的方法 学习目标 专业能力目标 专业知识目标 专业素质目标 布置习题 知识讲解 课堂实践 教学总结 课程引导 利用AP Div布局网页 学习情境6 学习目标 使用Dreamweaver CS3中AP Div容器和时间轴基本操作的能力 利用Dreamweaver CS3中AP Div容器和时间轴控制网页中对象的能力 专 业 能 力 目 标 布置习题 知识讲解 课堂实践 教学总结 课程引导 利用AP Div布局网页 学习情境6 学习目标 创建普通AP Div、选择AP Div、AP Div的属性设置 移动AP Div、改变AP Div的大小、对齐AP