下载文档原格式
第11讲布局技术-层AP Div1.1教学目标：◆知识目标1.理解层的作用2.掌握层的各种基本操作◆技能目标能运用层进行布局，能设置层的重叠与嵌套，能合理操作层◆品质目标培养学生认真细致、踏实进取的精神1.2教学重点：1.掌握层的各种基本操作1.3 教学难点理解层的作用和操作。
1.4教学方法：讲练结合，任务驱动、分子任务操练1.5课时安排：2课时1.6教学对象分析：这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。
1.7教学过程：一、激趣导入，揭示课题层是一种HTML页面元素，可以将其定位在页面上的任意位置。
层可以包含文本、图像或其他任何可在HTML文档正文中放入的内容。
通过Dreamweaver MX 2004，可以使用层来设置页面的布局。
可以将层前后放置，隐藏某些层而显示其他层，以及在屏幕上移动层。
还可以在一个层中放置背景图像，然后在该层的前面放置第二个层，利用层不仅可以非常灵活地放置内容，还可以根据不同的设置，实现相应的动态效果。
二、层的操作层可以理解为浮动在网页上的一个页面，它可以准确地定位在页面上的任意位置，并可以规定它的大小。
通过层可以对网页进行精确定位。
不仅如此，通过对层与行为的综合使用，还可以创作出赏心悦目的动作效果。
层可以包含文本、图像或其它任何可在网页中放置的内容。
层可以重叠，并且可以改变重叠次序，因此可以在网页上实现内容的重叠效果；可以动态地设定层的显示或隐藏，实现层内容的动态交替显示等特殊的显示效果；层可以嵌套，子层会遗传父层的特征，例如可见性，位置移动等。
0.1新建层用Dreamweaver可以方便地在页面上创建层并精确地将层定位。
建立新层的步骤：●在编辑窗口的“插入”栏的“布局”选项卡中，选取“描绘层”按钮，如图2-95所示。
或者执行“插入/布局对象/层”命令。
名词解释ap元素
Ap元素（AP element）是指在网页中使用的一种HTML元素，全称是“附加属性”（Additional Properties），通过Ap元素可以给网页的元素添加一些额外的属性和行为。
例句：
1. This webpage uses the Ap element to add a hover effect to the links.
这个网页使用Ap元素为链接添加了一个悬停效果。
2. The Ap element allows you to add custom styles to your website's elements.
Ap元素允许您向网站元素添加自定义样式。
3. By using the Ap element, you can create interactive and dynamic webpages.
使用Ap元素，您可以创建交互式和动态的网页。
4. The Ap element provides web developers with greater flexibility and control over their designs.
Ap元素为Web开发者提供了更大的灵活性和对设计的控制。
5. With the Ap element, you can easily add animations and other effects to your website's content.
使用Ap元素，您可以轻松地向网站内容添加动画和其他效果。
网页设计与制作中AP Div元素的应用》课例上海市城市科技学校金卫萍一、本节课的目的《网页设计与制作》课程中AP Div元素是一种网页元素的定位技术，使用AP Div元素可以以像素为单位精确定位页面元素，AP Div元素可以放置在页面的任意位置，使用户对页面操作的布局更加轻松。
本节课主要让学生掌握AP Div元素的定位方法，多个元素的重叠，显示或隐藏，与时间轴配合使用的动画效果等。
本节课以任务为引领，结合引导发现法和探究研讨法进行教学，让学生自主参与知识的产生、发展与形成的过程，培养学生自主学习的习惯。
二、作为支撑的课题研究主要内容本节课作为区级课题《新课标背景下信息类课程教师主导教学行为行动研究》一次行动研究，主要探究教师在课堂上的主导行为对教学实效的作用。
并且进行同课异构教学研讨。
在新课标理念引领下，通过本课题的实践研究，目的在于证明信息类专业教师课堂主导教学行为的重要性以及艰巨性。
树立学生主体的教育理念，找出信息类课程学生主体与教师主导的平衡点。
针对中职学生的学习基础及情感态度，探索教师主导行为的常规方法和创新手段，通过交流反馈，在教学中推广实践。
重视学生操作实践，在学生的实践中抓住教师主导行为这一主旋律，展示新课标背景下中职信息类专业教师的风采。
三、教学方法本次课是在前面两位同学科教师同课异构教学研讨基础上的进一步教学提升。
从应用出发设立情景，通过任务引领和互动教学体现教师主导学生主体，增强学生对所学技能的认识。
以学生为中心来组织教学，要求学生由被动的听讲变为主动的思考。
本着这样的主导思想，本节课由5个主要教学环节组成：观察、实践、归纳、验证、应用。
目的是让学生自主参与知识的产生、发展与形成的过程。
通过不断的提问，激发学生积极思考问题，让学生主动提出疑问，主动回答老师的问题，调动学生的积极性。
可以总结为6句话：牵住学生不放手，师生互动齐步走；发现厌烦换一招，设置陷阱有成效；循序渐进有繁简，综合问题最后练。
![[精品]DWAP元素的创建和使用](https://uimg.taocdn.com/c2b594afd4d8d15abe234ee3.webp)
专题1 网页设计基础知识1.1 认识网站、网页与主页1.1.1什么是网页网页（Web页）实际上就是HTML文件，是一种可以在WWW网上传输，并能被浏览器认识和翻译成页面的文件。
HTML是“HyperText Markup Language”的缩写，意为“超文本标记语言”，它是一种规范，一种标准。
它是纯文本格式的，用任何文本编辑器都可以打开编辑。
网页包括的主要元素有：文本、图像、动画、声音、视频、超链接、表格、表单等。
由于多数网页一般均有文字、图像、图形、动画、音频、视频等多媒体信息，具有超链接、并可与网络链接，因此这就使人们登上站点以后，便可以看到五彩缤纷的界面。
那么，这些五彩缤纷和千姿百态的Web网页是如何制作出来的？制作好网页以后又如何将它发布到Internet上？这些问题正是本课程所要阐述的主题。
1.1.2什么是网站多个相互之间具有一定联系的网页就构成了一个网站。
网站用于存储提供给用户浏览的网页文件。
它也是一种文档的磁盘组织形式，由文档和若干文件夹组成，文档经过组织分类分别放在不同的文件夹中。
网站存储在服务器或服务器的虚拟主机上，接受访问者通过WWW域名的访问。
网站是具有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其它文件，一个网站不一定要有很多网页，主要是有独立域名、独立存放空间，即使只有一个页面，也叫网站。
网站按照其内容可以分为以下几类：1、企业网站：围绕企业、产品及服务信息进行网络宣传，通过网站树立企业网络形象。
2、个人网站：个人为了兴趣爱好或为了展示个人等目的而建的网站，具有较强的个性化特色。
3、门户网站：提供综合性互联网资源的网站。
国内著名三大门户网站：网易、搜狐、新浪。
4、机构网站：政府机关、相关社团组织或事业单位建立的网站。
以机构或社团形象宣传和政府服务为主。
5、娱乐网站：提供娱乐信息、流行音乐、视频等娱乐内容为主的网站。
6、电子商务网站：依靠因特网来完成商业活动的各个环节的网站，如卓越、当当、淘宝、易趣、拍拍等。
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
第8课：AP DIV元素
一、创建AP DIV元素
什么是ApDiv？
AP元素（绝对定位元素）, 是一种HTML网页元素，一般称为“层”。
即网页内容的容器，包含文本，图像或其他任何可以在HTML文档正文中放入的内容。
且可以精确定位在网页中的任何地方。
特点：
1、作为容器，可以放置其他网页元素。
2、灵活定位。
在CS5中，系统使用DIV 标记和CSS技术来实现AP层对象的效果，所以也称绝对定位的DIV标记。
二、编辑AP DIV元素
1、调整层的大小
2、层的层次关系
3、层的首选设置
4、层的对齐
实例：课程预览
三、层的可见性设置
1.AP面板的使用（选择、命名、隐藏、次序）
2.层的可见性
3.简单的层特效
实例：点击控制图片的显示
四、层的溢出与裁切
1．溢出可见性
2．裁切显示
五、层的嵌套
嵌套的含义：嵌套并不表示一个在另外一个里面显示，而是指一个AP元素的代码在另一个AP元素代码的内部。
嵌套的AP 元素会随着父AP元素的移动而移动，继承父AP元素的可见性。
1、AP层对象元素的嵌套方法：
1）.将光标置于AP元素内。
2）.工具栏中，插入-布局-拖动“绘制AP Div”到AP元素内。
2、标尺、辅助线的使用
六、AP DIV与表格的转换
1、不重叠性
2、网格的使用
3、表格与AP DIV的转换。
网页设计和制作中AP Div元素的使用》课例上海市城市科技学校金卫萍一、本节课的目的《网页设计和制作》课程中AP Div元素是一种网页元素的定位技术，使用AP Div元素可以以像素为单位精确定位页面元素，AP Div元素可以放置在页面的任意位置，使用户对页面操作的布局更加轻松。
本节课主要让学生掌握AP Div元素的定位方法，多个元素的重叠，显示或隐藏，和时间轴配合使用的动画效果等。
本节课以任务为引领，结合引导发现法和探究研讨法进行教学，让学生自主参和知识的产生、发展和形成的过程，培养学生自主学习的习惯。
二、作为支撑的课题研究主要内容本节课作为区级课题《新课标背景下信息类课程教师主导教学行为行动研究》一次行动研究，主要探究教师在课堂上的主导行为对教学实效的作用。
并且进行同课异构教学研讨。
在新课标理念引领下，通过本课题的实践研究，目的在于证明信息类专业教师课堂主导教学行为的重要性以及艰巨性。
树立学生主体的教育理念，找出信息类课程学生主体和教师主导的平衡点。
针对中职学生的学习基础及情感态度，探索教师主导行为的常规方法和创新手段，通过交流反馈，在教学中推广实践。
重视学生操作实践，在学生的实践中抓住教师主导行为这一主旋律，展示新课标背景下中职信息类专业教师的风采。
三、教学方法本次课是在前面两位同学科教师同课异构教学研讨基础上的进一步教学提升。
从使用出发设立情景，通过任务引领和互动教学体现教师主导学生主体，增强学生对所学技能的认识。
以学生为中心来组织教学，要求学生由被动的听讲变为主动的思考。
本着这样的主导思想，本节课由5个主要教学环节组成：观察、实践、归纳、验证、使用。
目的是让学生自主参和知识的产生、发展和形成的过程。
通过不断的提问，激发学生积极思考问题，让学生主动提出疑问，主动回答老师的问题，调动学生的积极性。
可以总结为6句话：牵住学生不放手，师生互动齐步走；发现厌烦换一招，设置陷阱有成效；循序渐进有繁简，综合问题最后练。
将“示范操作”和“学生实训”两个环节交叉，分段进行，以便增强师生互动。
老师在学生操作期间，注意巡视，对不同学生进行个性辅导，体现分层教学思想，并发现个性问题，做到既解决共性问题，又不忽略个别学生，而且能够妥善将个性问题引申到共性知识上，做到循序渐进，同步教学。
四、学情分析本次教学对象为30941电子信息技术专业二年级学生，经过大半年的教学接触，培养了良好的师生情感，对于专业问题的解决已经具备一定的分析能力，已经具有较好的概括能力，该班级学风整体相对较好。
但是，学生平时代码接触不多，因此创设情景，激发学生兴趣，消除他们对代码的“恐惧”心理，调动他们学习和探究的主动性、积极性，显得尤其重要。
五、教学目标根据本节的教学内容、教学大纲要求能掌握AP Div元素的用途、创建、属性设置；使用行为实现层的动态效果，结合学生现有的知识水平和理解能力，确定本节教学目标如下：1、知识和技能目标（1）了解AP Div的网页布局方法及优点。
（2）在AP Div中加入文本，图像，表单等元素。
（3）用AP Div元素和行为结合实现显示或隐藏等效果(如小图片的预览效果)。
（4）和时间轴结合实现动画效果。
2、德育目标1、培养学生认真观察，勤于思考的学习态度；2、加强学生对世博的内在情感，达到德育教育时效。
六、教学重点、难点针对教材内容以及学生的实际情况，确立：六、教学重难点教学重点：1、AP Div的布局功能2、AP Div的坐标，Z轴，溢出等属性参数的设置。
3、和行为结合，实现显示或隐藏内容的功能。
4、和时间轴结合，实现动画效果。
教学难点：1、理解AP Div元素Z轴属性的原理。
2、和行为结合，实现AP Div元素的显示或隐藏。
七、教学设计教学过程教师活动预设（教学知识点）学生活动预设设计意图课题引入由世博会马上在上海开幕，引出给世博会做场馆介绍的任务，展示本节课的任务。
观看并感受作品魅力，思考如何做。
热点时事作为项目背景，调动学生的积极性，引发兴趣。
任务分析网页上有交互和动画效果，可以分解为三个子任务：子任务一：利用AP Div元素页面布局；听讲，对完成任务有个大概思路。
分解任务有利于学生理解任务步骤。
子任务三：和时间轴结合的动画效果；子任务二：和行为结合的动态效果。
子任务1 实例演示和讲解，用AP Div元素加入文字和图片并排版；巡视指导学生任务的完成情况；先完成的学生思考多元素对齐的方法。
观察，实训，并思考AP Div元素排版的特点。
AP Div元素的概念，属性及布局网页优点。
子任务2 提问：Flash中此动画的实现方法？AP Div元素和时间轴结合实现动画效果；巡视并个别辅导学生；典型错误分析，巩固知识点。
同学展示成果，欣赏评价，并提出改进意见，对优秀作品鼓励。
培养学生归纳总结能力，培养学生取长补短的良好品质。
子任务3 在子任务1的基础上，引出下面任务；让学生先尝试放入四个大图片；讲解并演示：和行为结合实现交互效果；反馈交流，现场解决问题，有立竿见影的效果。
学生先摸索两层元素的叠加的方法。
学生操作和老师讲授结合突破难点。
小结作品评价小结。
作业布置拼图游戏。
八、教学内容（一）、课题引入展示本节课的内容，交互图片和动画效果，吸引住同学的注意力，并让同学思考用传统方法可以解决吗？引出本节课的内容。
（二）、任务分析网页上有交互和动画效果，可以分解为三个子任务：子任务一：利用AP Div元素页面布局；子任务二：和行为结合的动态效果；子任务三：和时间轴结合的动画效果。
（三）：子任务一：利用AP Div元素页面布局1、知识铺垫：AP Div的定义及特性a)所谓AP Div，是指存放文本、图像、表单和插件等网页内容的容器，可以想象成是一张一张叠加起来的透明胶片，每张透明胶片上都有不同的画面，它用来控制浏览器窗口中网页内容的位置、层次。
b)特性：AP Div最主要的特性就是它是浮动在网页内容之上的；也就是说，可以在（不影响其他网页元素情况下）网页上任意改变其位置，实现对AP Div的准确定位；把页面元素放入AP Div中可以使用户对页面操作的布局更加轻松。
c)AP Div元素还有一些其他的重要特性。
AP Div元素可以重叠，所以在网页中可以实现网页内容的重叠效果（如立体字）；AP Div元素还可以被显示或隐藏，可以实现网页导航中的下拉菜单，图片的可控显示或隐藏；还可以通过使用时间轴使其移动和变换，这样在层中旋转一些图片或文本，就能够实现动画效果。
2、技术分析：掌握创建AP Div元素，在AP Div元素中插入其他元素及修饰AP Div元素的方法。
3、步骤提示：（1）将光标放在文档插入点，在“布局”面板中单击“绘制AP Div”按钮。
（2）在文档窗口中拖动画出AP Div元素，按住Ctrl可画多个AP Div元素。
（3）每个AP Div元素中添加相应的文字和图片。
（4）为元素命名并调整好各元素的位置，可以通过菜单“修改”—“排列顺序”命名操作。
有情提示：可以通过复制、粘贴，快速制作出多个类似的AP Div元素。
（四）：子任务二：请出海宝，和时间轴结合的动画效果1、技术分析：AP Div元素和时间轴结合实现动画效果。
2、步骤提示：（1）添加AP Div元素“haibao”，并加入海宝图片。
（2）通过“窗口”菜单，调出时间轴。
（3）把“haibao”元素拖动到时间轴上。
（4）右击时间轴，选择“记录AP元素的路径”命令，拖动海宝在屏幕中移动。
（5）选中时间轴上的“自动播放”和“循环”按钮。
（五）：子任务三：和行为结合的交互效果1、技术分析：AP Div元素属性的一个重要功能就是显示/隐藏功能，和“行为”中显示/隐藏元素结合并利用光标的OnMouseOver和OnMouseOut事件制作出交互效果。
2、步骤提示：（1）插入四个AP Div元素并命名，在其中加入对应的四张大图片。
（2）同时选中新加入的四元素和“kuang”元素，通过修改菜单调整它们的位置相同。
（3）在AP元素面板中把“kuang”元素拖到四元素的上面，达到挡板的作用。
（4）设置AP Div元素的可见性让四个大图片先隐藏。
（5）通过菜单“窗口”—“行为”调出行为面板，选中“zgt”，单击+，显示/隐藏元素，选中“zgd“元素单击显示，确定；并把行为的触发条件改为“onMouseOver”；实现效果光标放在中国馆的小图像上，在框内出现中国馆的大图片。
（6）通过菜单“窗口”调出行为面板，选中“zgt”，单击+，显示/隐藏元素，选中“zgd“单击隐藏，确定；并把行为的触发条件改为“onMouseOut”。
实现光标离开中国馆的小图像上，在框内中国馆的大图片消失的效果。
同样方法：做出其他展馆。
（六）、思考题：海宝拼图游戏。
九、教学反思：一个人的公开课（一）、行动起源作为本人课堂研究室信息专业团队本学期的一个展示活动，我所带的专业团队朱广跃和胡淮宁两位老师于4月28日上午进行了“同课异构”区级教学研讨展示课，并于课后进行“同课异构”校本研讨交流。
两位任课老师是我专业教学的互助同伴，也同步参和了正在进行的共同体研修课题《职教“做学一体”模式下有效教学行动研究》。
同样的教学内容，相似的教学目标，共同的教学理念（任务引领，做学一体），不同的教学任务，不同的教学引入，不同的教学环节，当然也会产生不一样的教学实效。
那么作为这个团队的引领者，作为这门课程的任课者，作为有效教学的课题研究者，在完成“同课异构”的研讨后，我有一个强烈的冲动，那就是在课例研讨的基础上，再一次进行本课题的“同课异构”。
带着这份冲动，我在4月29日上午的教学中进行了一次一个人（无听课老师）的公开课之旅。
（二）、行动之旅1、教学任务之选：在上海世博即将开幕的4月29日，我毫无理由地选择朱广跃老师的“跟着海宝看世博——使用AP Div元素制作世博宣传网页”这个主题，因为我相信学生的心情一定和我一样，对世博充满了期待和幻想。
2、课堂导入之法：“转轴拨弦三两声，未成曲调先有情。
”一个好的开头是师生间建立感情的第一座桥梁，它既能引起学生的兴趣，又能激发学生的求知欲，为整节课的学习打下良好的开头。
两位同伴在教学中分别采用情景导入和案例对比导入。
对于“跟着海宝看世博——使用AP Div元素制作世博宣传网页”这个主题，简单扼要、充满激情的情景引入是我对本课教学的首要环节设计，避免因情景而过分情景的现象，一锤到位，既突出时政，又及时引出教学任务。
3、任务分析之调。
任务分析是整个任务驱动过程中最富理性的关键环节，应该把现实中的任务分解为具有专业技术成分的训练要求。
经过分析，任务将变成具体的要求：从任务中提炼出在教学目标中定位的主要知识和技能，并明确哪些是重点，哪些是难点。
然后通过一步步的教学，分析出解决这些难点的技术。
