1、项目三 主页的设计与制作子项目3-1：主页效果图设计（1）。,知识技能目标,1、会进行站点素材的查找与分类管理；,2、会使用Photoshop进行网站主页的版面设计；,3能将设计好的效果在Dreamweaver中进行预览。,工作任务列表,任务二：使用Photoshop作出规划好的主页效果图，并以class.psd为文件名存于C:ClassWeb文件夹下 任务三：将制作好的主页效果图保存为网页形式，并以文件名index.html存于C:ClassWeb文件夹下，同时在Dreamweaver中进行预览,任务一：准备工作(创建动态站点、设置主目录),完成步骤 （1）在C盘下创建ClassWeb文件夹
2、，并将其设为主目录。 （2）创建名为“MyClass”的动态站点。由于机房机器安装了还原卡，所以从这次课开始，每次下课后都要将ClassWeb文件夹打包上传到教师机，同时自己带走一份。以后在每次上课前需要做如下三项工作：将带走的压缩包拷贝到C盘上，解压；将C:ClassWeb文件夹设为主目录；创建名为“MyClass”的动态站点。,任务一 准备工作,具体要求 根据规划方案，在作业本上画出布局草图，使用Photoshop作出规划好的主页效果图，以class.psd为文件名存于C:ClassWeb文件夹下。 完成步骤 1、进入参考站点，从平面构成和色彩两方面对要借鉴的页面进行分析 ； 2、依据规划
3、及借鉴完成主页的版面布局，画出布局草图； 3、采用借鉴与创新相结合的方法进行网站主页效果图设计 ；,任务二 主页效果图制作,（1）启动PhotoshopCS，新建文档。 启动PhotoshopCS，执行“文件”“新建”命令，在弹出的“新建”对话框的名称框中输入：班级网站主页效果图，宽度：1003像素，高度：850像素，分辨率：72像素/英寸，颜色模式：RGB颜色，背景内容：白色，如图所示。（注意高度要视内容和版面而定，一般情况下不超过3屏为宜）,任务二 主页效果图制作,（2）设计网页Logo、Banner和整体效果图 。下图仅为参考：,任务二 主页效果图制作,任务二 主页效果图制作,大家可以参
4、考优秀网站的结构、版式设计、色彩搭配进行自己的主页设计。必须包含的部分：导航栏中必须包含班级新闻、班级相册、留言板三个部分；主页页面中必须包含公共栏、管理员登录、班级新闻、用于制作图片轮番滚动的图片部分以及用于制作图片无缝滚动效果的一组图片、网络导航、版权信息栏（上包含加入收藏和联系我们项），但形式不拘泥于一种，可自行发挥创造。,在对话框中图像格式选取GIF。,4、效果图制作完毕，进行文件保存及效果预览 （1）先将效果图以“class.psd”为文件名存于C:ClassWeb文件夹下； （2）再使用“文件”/“存储为web所用格式”命令，将弹出的 “存储为web所用格式”对话框，如图所示：,任
5、务二 主页效果图制作,（3）单击“存储”按钮，在弹出的“将优化结果存储为”对话框中进行各项的设置，存储位置为自己的站点文件夹，文件名取为index.html，“保存类型” 选“HTML和图像（*.html）”,选好后，单击“保存”按钮即可保存网页。,（4）在dreamweaver打开刚才存储的index.html，使用F12键检查网页效果是否满足需要，若不满足，再到class.psd文件中进行修改，直到满意为止。,任务二 主页效果图制作,班级网站的设计要求 （1）网站主页设计新颖别致，能够突出班级特征。 （2）内容丰富、健康充实，思想积极向上，能够反映班级风貌。 （3）不但要反映出班级整体风貌
6、，还要体现出班级中的每一位成员都是这个大家庭中不可缺少的一份子。 （4）色彩搭配和谐，网页布局合理。 （5）链接准确无误 （6）写出设计方案。 （7）最后要剔除网站中未使用的素材和未链接的网页,任务二 主页效果图制作,总结与作业,作业,总结,1、使用PS进行效果图的制作 2、主页效果图另存为网页形式,1、将自己规划的班级网站布局草图画于作业本上； 2、继续完成效果图的制作，并加以完善,项目三 主页的设计与制作子项目3-1：主页效果图设计（2）,知识技能目标,3、会将切片处理后的文件进行存储管理及网页效果的预览。,1、会使用Photoshop中的切片工具对效果图进行切片处理;,2、会进行切片的属
7、性设置;,工作任务列表,任务一：用实例图练习切片的使用及存储管理,任务二：将自己制作好的班级网站效果图进行切片处理,并进行效果预览,准备工作,1、将ClassWeb压缩包拷贝到C盘上，解压； 2、将ClassWeb设置为主目录； 3、建立名为MyClass的动态站点。,（一）利用Photoshop切割网页图片应遵循的原则,1、最好依靠参考线。切图时更要用好参考线。参考线能保证我们切出图在同一表格中的尺寸统一协调，有效避免“留白”和“爆边”。 2、 Logo和Banner必切。如果效果图中存在Logo和Banner,我们必须切片这部分，主要是为预先设计的Logo和Banner留下空间，在Drea
8、mWeaver整合时最好不用Logo和Banner的切片，而是直接用Logo和Banner原文档，这是提高Logo和Banner效果的需要。,完成工作任务所需知识点（P65）,3、虚线和转角形状必切。虚线和转角形状在DreamWeaver不能实现，只能使用Photoshop切片。 4、渐变必切。这也是DreamWeaver实现不了的。 5、大图必切。大的图像必须切分成均匀图，这样可以提高网页下载速度。 6、特殊文字效果必切。除黑体和宋体外，其他字体必须切片。DreamWeaver下最有效的字体只有宋体和黑体，其它字体浏览器也可能不兼容。,完成工作任务所需知识点（P65）,7、导航条必切。一般情
9、况下导航条都是特别设计的，其效果在Dream Weaver下不能实现，因此必须形成切片供后期使用。8、有效存储切片。存储切片的文件夹必须位于站点的根目录下，文件夹名必须是英文名字（站点文件夹名）。存储切片时用“文件存储为web所用格式”命令。切片存储格式要求一般存为Gif格式。Gif占用体积小。要求较高的图像存储为JPEG格式，JPG格式显示更多的图片细节。,完成工作任务所需知识点（P65）,（二）切片的种类1、切片的分类依据切片是否是自动生成而划分为如下两类：（1）用户切片：用户使用切片工具创建的切片（图标为蓝色）。 （2）自动切片：用户在创建切片时由软件自动形成的切片（图标为灰色）。2、两
10、种切片的区别（P66）,完成工作任务所需知识点（P65）,3、自动切片转换为用户切片 建议在进行效果图切片处理时，都切分成用户切片。也可以将自动切片转换成用户切片。方法有两种： 法一：选择这个切片，使用切片选项工具栏中【提升到用户切片】按钮，如图所示。法二：右击选择的自动切片，在弹出的快捷菜单中选择“提升到用户切片”命令。,完成工作任务所需知识点（P64）,利用Photoshop中的切片工具对下发的网页效果图进行切片处理将 C盘根目录下的exercise1.psd和exercise2.psd文件进行切片处理。 准备工作：在站点文件夹ClassWeb下新建文件夹exercises1和exerci
11、ses2（一） exercise1.psd进行切片处理的步骤 1、利用PhotoshopCS打开exercise1.psd文件; 2、选取左侧工具箱里的切片工具，如下图所示：,任务一 切片练习,3、 使用“切片工具”在标题部分的左右各切一刀，使用“切片选取工具”双击右侧部分（或右击这部分，在弹出的快捷菜单中选取“编辑切片选项”），在弹出的面板中设置切片类型为无图像。因为该部分是纯色，为了在网页中显示效果相同，在“切片选项”对话框的下侧“切片背景类型”下拉列表框中选取其他，用工具箱中的吸管工具吸取效果图中02切片的颜色，从而设置切片背景与效果图中切片颜色一致，这样该部分输出成网页后将由透明占位符
12、和同色背景色代替，如图所示（见下页）。,任务一 切片练习,注意这里选项的选取,任务一 切片练习,4、切割的导航条按钮：由于导航条上各按钮大小基本相同，选取切片工具选项工具栏中的“切片样式”为固定大小，设置宽度为“115px”，高度为“42px”，如图所示。注意将切片和被切对象对齐。切的时候要小心，可放大图像，避免切片之间重叠。,任务一 切片练习,提示：若切割的过程中发现切片错误，使用键盘上的【delete】 键删除当前选区。,5、设置切片选项工具栏中的样式为“正常”，切割方法同上，完成左侧图像的切割，形成切片16， 同样方法完成右侧的切割，完成切片17、18和19，其中切片18为单色，处理方法
13、同切片02，这样在输出成网页后将由透明占位符和同色背景色代替，加快网页速度。 6、将上方产生的一些自动切片提升为用户切片，并将为单色的切片进行处理，处理方法同切片02，这样在输出成网页后将由透明占位符和同色背景色代替，加快网页速度。,任务一 切片练习,7、切割图像左下角部分（牡丹所在部分），经观察发现，图层的大小正好与切片的大小一致，如果某个图层的范围正好是要切割的大小，则选中要切割的图层，执行“图层”“基于图层的切片”命令，从而完成切片的切割。 8、采用合适的方法完成“墨妙亭”、“弇山堂”和“版权所有”区域的切割。 提示：一定要使用“放大工具”检查各切片间是否有重叠现象。,任务一 切片练习,
14、9、完成导航栏中【休闲】按钮的超链接。 超链接的设置方法有多种，在完成切片的切割后，可以完成其超链接工作。 方法：选取工具栏中的“切片选取工具”，双击【休闲】按钮所在的切片，弹出“切片选项”对话框，并在对话框内完成参数的设置，由于“休闲”页面还未完成，这里我们设置空链接（#），目标为_blank，表示在新窗口中打开该链接 。,任务一 切片练习,10、切片输出。执行“文件”“存为Web所有格式”命令，此时将优化的文件以GIF格式进行存储，在“将优化结果存储为”对话框中，选取C:ClassWebexercises1文件夹，将优化后的结果存储在该文件夹中，各选项的设置为：文件名：exercises1
15、.html保存类型：HTML和图像（*.html）设置：默认设置切片：所有切片,任务一 切片练习,11、按下【保存】按钮后，即可在exercises1文件中产生一个网页文件exercieses1.html，及一个保存切片图片文件的文件夹images。打开images文件夹，不难发现各切片图片文件名有数字序号01、02等作为标记。 12、启动Dreamweaver，在Dreamweaver中打开exercise1.html，按下【F12】键进行效果图预览。,任务一 切片练习,1、将C盘根目录下的exercises2.psd文件进行切片处理，并将切片处理好的文件以exercises2.html为文
16、件名存于C:ClassWebexercises2文件夹下注意：切割时切片的编号 2、将自己制作好的班级网站主页效果图利用切片工具进行切割。并将切片处理好的文件以index.html为文件名存于C:ClassWeb文件夹下,课堂实践,总结与作业,作业,总结,使用Photoshop对效果图进行切片处理及存储,1、继续完善班级网站主页效果图，并对班级网站效果图进行切片 ，同时进行效果预览 2、P71同步训练二、习题,项目三 主页的设计与制作子项目3-2：主页制作（特殊效果的制作）,4、会使用Javascript代码完成图片轮番显示、无缝滚动效果的制作,知识技能目标,3、会利用AP元素、时间轴和行为技
17、术完成运动广告的制作 。,1、会使用行为技术完成主页中背景音乐的插入；,2、会使用Marquee标签制作滚动字幕；;,工作任务列表,任务一：为主页插入背景音乐,任务二：制作滚动公告栏,任务四：制作图片轮番显示效果,任务五：制作图片连续滚动效果,任务三：制作运动广告,效果展示,准备工作,1、将带走的ClassWeb压缩包解压,并设ClassWeb文件夹为主目录； 2、建立名为“Myclass”的动态站点； 3、在站点文件夹下新建media文件夹，并在media文件下新建music文件夹； 4、利用搜索引擎搜索自己喜欢的背景音乐（mid格式或wav格式，不要采用mp3格式），将搜索到的背景音乐以b
18、g.mid（或bg.wav）为文件名存于music文件夹下。,给网站主页插入背景音乐 步骤1、在DreamWeaver中打开存于站点文件夹ClassWeb下的index.html文件，进入“设计”视图方式，然后选择页面左下角的标签，以选中整个页面（表示将行为添加给整个文档body部分）； 步骤2、执行“窗口”/“行为”命令，在窗口的右侧打开行为面板。在行为面板中单击 按钮，在弹出的菜单中选择”建议不在使用”/“播放声音”命令，弹出“播放声音”对话框，如图所示。,工作任务一为主页插入背景音乐,步骤3、单击“播放声音”对话框中的“浏览”按钮，弹出“选择文件”对话框，在对话框中选择存放于music文
19、件夹中的bg.mid(或bg.wav) 文件，单击“确定”按钮。 步骤4、检查“行为”面板中的事件是否为“onLoad”（表示主页加载就播放声音），若不是，在事件下拉列表框中选取该事件。,工作任务一为主页插入背景音乐,步骤5、选择插入的声音文件（一般位于所插背景音乐的主页下方），在“属性”面板中单击“参数”按钮，打开参数窗口，设置其参数，后按“确定”按钮，如图所示。,工作任务一为主页插入背景音乐,各参数的含义： LOOP 音乐是否循环播放 AUTOSTART 音乐是否自动播放 MASTETSOUND 允许将多个标识组合起 来，作为一个进行控制 HIDDEN 是否完全隐藏媒体播放器，若没 有隐藏
20、，则会显示出系统默认的媒体播放插件,工作任务一为主页插入背景音乐,认识行为： 1、什么是行为？行为的特点是强大的网页交互功能。它是事件与动作的彼此结合。是基于JavaScript来实现动态网页和交互的。一个行为是由一个事件触发一个动作组成的，因此行为的基本元素有两个：事件和动作。 例如，插入背景音乐，此时的页面加载称为事件，播放音乐称为动作，一般的行为都是要由事件来激活动作。,完成工作任务一所需的知识,2、行为面板 ： 在Dreamwaever中，对行为的添加和控制主要通过“行为”面板来实现。选择“窗口”/“行为”命令，打开行为面板，如图所示。,显示设置事件,完成工作任务一所需的知识,3、添加
21、行为 ： 用户可以将行为添加给整个文档（body部分），也可以添加给链接、图像、表单等对象或任何其他HTML元素。每个事件可以指定多个动作。动作按顺序列表依次发生。各事件的含义如下表所示：,完成工作任务一所需的知识,常见行为事件及含义,注：NS表示Netscape Navigator, IE表示Internet Explorer, 表示选中项。,完成工作任务一所需的知识,4、编辑行为 ： 在添加了行为以后，可以改变触发动作的事件、添加或删除动作以及改变动作的参数等。 修改事件：只需在事件下拉列表框中进行选取即可 修改动作：在行为面板中右击（或双击）欲修改的动作，在弹出的快捷菜单中选取“编辑行为
22、”命令，在弹出的窗口中进行修改即可。,完成任务所需的知识,工作任务一课堂实践,为自己的班级网站主页添加弹出信息窗口，使之在主页面加载时即弹出信息，如下图所示。,制作滚动公告栏 步骤1、将需制作滚动通知处的原来切片删除，在删除之前记下其高度和宽度； 步骤2、选择“插入记录”/“标签”命令，在HTML标签下的页元素右侧选取marquee，单击“插入”按钮，如图所示。,工作任务二制作滚动公告栏,步骤3、切换到代码视图方式，将光标定位于标签之间，输入滚动的文字,当滚动的文字多行时，每一行文字后加html换行标识符； 步骤4、使用“窗口”/“标签检查器”命令，单击“属性”选项卡，单击“属性”中“未分类”
23、前的“+”，展开marquee标签的属性，进行属性设置，如图所示。 属性值各参数设置如下： behavior：alternate direction：right loop： -1 style： font:14px; color:red;,工作任务二制作滚动公告栏,direction 参数：表示滚动的方向，默认为left,工作任务二制作滚动公告栏,Behavior参数：表示滚动的方式,工作任务二制作滚动公告栏,loop 表示循环的次数，值是正整数，默认为无限循环，默认值为无限。“-1”也为无限,工作任务二制作滚动公告栏,scrollamount 表示运动速度，值是正整数，单位为像素，默认为6，即
24、每次移动6像素的距离,数值越小移动速度越慢。 Scrolldelay 用于设定两次滚动操作之间的间隔时间，单位为毫秒。如果要让滚动看起来流畅，数值应该尽量小。 height、width 表示运动区域（滚动字幕）的高度和宽度，值是正整数（单位是像素）或百分数，默认width=100% height为标签内元素的高度。 Style 设置字幕内容的样式。如设置字幕文字大小为12像素，则输入“font:12px;”。,工作任务二制作滚动公告栏,步骤5、设置鼠标放上去时字幕停止，移开时字幕流动的效果。各参数设置完毕，设置鼠标行为。 进入“行为”面板，单击“显示所 有事件”按钮，出现事件，选取 其中的on
25、MouseOver和 onMouseOut两个事件,onMouseOver事件设置鼠标移动到滚动字幕时的动作，常设置为停止滚动。设置为this.stop();onMouseOut事件设置鼠标离开滚动字幕时的动作，常设置为开始滚动。设置为this.start();,工作任务二制作滚动公告栏,制作运动广告(需用到AP元素和时间轴) 1、 制作简单路径的运动广告 步骤1、准备工作：自己制作或网上搜索二幅用来制作运动广告效果的图片，将其以move1和move2为文件主名存于站点根目录（ClassWeb）下的images文件夹中； 步骤2、打开需放置运动广告的网页文件：打开index.html网页文件；
26、 步骤3、插入AP元素：选择“插入对象”/“布局对象”/“AP Div”命令，在网页文件中插入AP元素；（插入AP元素的另一种方法：选择“窗口”/“插入”命令，在文档编辑窗口的上方将出现如下图所示的工具栏，选中其中的“布局”项，选取其中的“绘制AP Div”按钮）,工作任务三运动广告的制作,绘制AP元素按钮就是我,步骤4：向AP元素中插入图像：选中AP元素，使用“插入记录”/“图像”命令，在弹出的“图像标签辅助功能属性”对话框的“替换文件”框中输入文本（也可以不输），详细说明框中可根据需要进行输入或不输，这里我们在替换文本框中输入“班级文学”后按“确定”按钮。,工作任务三运动广告的制作,步骤5
27、：将图像移入AP元素中，调整AP元素的大小与图像的大小一致； 步骤6：选中AP元素及其内的图像，使用“修改”/“时间轴”/“添加对象到时间轴”命令（或选中AP元素及其内的图像，右击，在弹出的快捷菜单中选取“添加到时间轴”命令），此时将在窗口下方弹出“时间轴”属性对话框；,工作任务三运动广告的制作,步骤7：插入一个关键帧：将最后一帧拖长到50帧，将“播放头”拖到10帧处，右击动画条，在弹出的菜单中选“增加关键帧”命令（或按下Ctrl键，在动画条上单击，这时就在10帧处插入了一个关键帧）。同样的分别在20帧、30帧和40帧处增加关键帧。 步骤8：选中第10帧，将AP元素（包括图像）拖向合适位置；在
28、时间轴上选第20帧，将AP元素（包括图像）拖向另一合适位置；在时间轴上选第30帧，将AP元素（包括图像）拖向另一合适位置；在时间轴上选第40帧，将AP元素（包括图像）拖向另一合适位置；在时间轴上选第50帧，将AP元素（包括图像）拖回起始位置。 步骤9：若希望有更复杂的动画路径，可多定义一些关键帧及在画面中的位置。,工作任务三运动广告的制作,步骤12：按中时间轴中部的“ ”按钮，即可观察动画效果。,步骤13：按F12键预览效果 思考：我们发现广告图像运动的速度较快，如何改变运动的速度呢？,工作任务三运动广告的制作,步骤11：勾选时间轴属性中的自动播放和循环两个选项。,步骤15：给时间轴加入交互（
29、当鼠标放到图像上时，图像停止运动，当鼠标离开图像时，图像继续运动） （1）选中动画条，打开行为面板，单击行为面板中的添加行为按钮“ ”，在弹出的快捷菜单中选“播放时间轴”动作，从弹出的“播放时间轴”对话框中选择要播放的时间轴，单击“确定”按钮，如图所示：,工作任务三运动广告的制作,步骤14：改变广告运动的速度：将时间轴属性栏中的Fps(Frame per second)框中的值改小（默认值为15），即可改变运动速度。,（2）将默认的鼠标事件改变为onMouseOut事件（即鼠标离开时，图像运动）。 同样操作，再次选“停止时间轴”动作，改变onclick事件为onMouseOver事件。 （即鼠
30、标放到图像上时，图像停止运动）；这样就完成了当鼠标指针移到图像上时，图像停止，当鼠标移开图像时，图像运动，完成交互的效果。 步骤16：完成广告图片的交替变换效果 （1）选中要交替图像的AP元素及图像。 （2）在“行为”面板中单击“添加行为”按钮，在弹出的快捷菜单中选择“交换图像”命令。,工作任务三运动广告的制作,（3）在弹出的交换图像对话框中，单击“浏览”按钮，把当鼠标移上后替换的图像选中。勾选“预先载入图像”复选框，如图所示。,工作任务三运动广告的制作,要确保这项出现哟！,工作任务三运动广告的制作,（4） 再次单击“添加行为”按钮，在弹出的快捷菜单中选“恢复交换图像”，从而完成鼠标离开后又变
31、回原来的图章 像； 步骤17 为运动广告加入超链接，使之链接到对应的页面中。 （1）选中AP元素内的图像。（2）在图像“属性”面板的“链接”后的文本框中单击浏览按钮，选中所要链接的网页文件，若想链接到其他网站中，在文本框内输入网址即可，如要链接到新浪网，则在文本框中输入http:/即可。,2 制作复杂路径的动画 若按上述方法创建一个复杂路径的动画，创建一个个关键帧的方法比较麻烦，我们通过使用录制AP元素的时间轴运动路径的方法来完成： 步骤1 使用“插入记录”/“布局对象”/“AP元素”命令，插入一个新AP元素； 步骤2 选中刚插入的AP元素，使用“插入记录”/“图像”命令，依据图像的大小调整A
32、P元素的大小；(若是在同一页面上对不同的AP元素图像进行动画的设置，需新建时间轴：使用“修改”/“时间轴”/“添加时间轴”) 步骤3 保持AP元素处于被选择状态； 步骤4 使用“修改”/“时间轴”/“记录AP元素路径”选项；,工作任务三运动广告的制作,步骤5 在页面上拖动AP元素（包含图像在内的AP元素），创建想要的运动路径；这样Dreamweaver便自动添加一个动画条到时间轴中，同时也添加了适当数量的关键帧； 步骤6 在“时间轴”面板中，单击“回首帧”按钮，勾选“自支播放”和“循环”选项，即完成复杂路径动画的制作。,3 广告图片的交替变换 同前,工作任务三运动广告的制作,在网页中实现图片轮
33、番显示 法一：代码+flash 步骤1：进入http:/ 步骤2:将效果图中需设置图片轮番显示的切片删除，删除之前记下要删切片的高和宽； 步骤3:根据主页效果图中放置图片轮番显示处的位置的大小，把要轮番显示的几幅图片在photoshop中进行裁切，要求大小一样 ；,工作任务四图片轮番滚动,步骤4: 将裁切好的图片分别以01.jpg; 02.jpg等为文件名保存于站点文件夹ClassWeb下的images文件夹中； 步骤5:在站点文件夹ClassWebmedia文件夹下新建flash文件夹，把在网站中下载的flash文件（focus.swf）放置到该文件夹中。 步骤6:将网站中用于实现轮番显示的
34、代码复制到记事本中，并将代码中设置的图片的高度、宽度依据切片的高与宽进行设置，去除其中不需要的功能代码，并依据flash文件夹的放置位置对代码进行更改。 步骤7:光标置于删除切片的图片框中，切换到代码视图中，将记事本中修改好后的代码复制到光标所在位置处。,工作任务四图片轮番滚动,法二：单纯用flash制作,可参考网址 http:/ 步骤2：存盘后浏览，观察发现，在滚动的过程中有空隙，不是我们想要的效果。设置图片无缝滚动，单独用marquee标签无能为力，需使用代码完成。,使用代码的方法设置图片无缝滚动的方法步骤为： 步骤1:将效果图中需设置图片无缝滚动显示的切片删除，删除之前记下要删除的切片的
35、高度和宽度。 步骤2：使用搜索引擎搜索使得图片无缝滚动的代码，将代码复制下来，并根据需要将代码进行修改，图片的大小，存放位置等都需根据自己的情况进行修改。 垂直无缝滚动参考网址：http:/ 水平无缝滚动参考网址：http:/ 步骤4：存盘预览效果,工作任务四图片无缝滚动效果,完成工作任务三所需的知识点,AP元素 1、AP元素的概念：AP元素是一种 HTML 页面元素，是一种网页元素定位技术。可以将它定位在页面上的任意位置。可以在AP元素里放置文本、图像等对象甚至其他层。 AP元素可以使页面上元素进行重叠和复杂的布局。“AP元素”可以比作一张透明的纸，网页的元素可以画在这张纸上，当将多张这样的
36、纸重叠在一起，上层有元素的地方，就会遮住下层，下层的元素可以透过上层透明的地方显示出来。,2、AP元素的基本操作 （1）创建AP元素（插入AP元素）插入一个AP元素方法一：使用“插入对象”/“布局对象”/“AP Div”命令方法二：使用布局工具栏的“绘制AP Div”工具按钮。,完成工作任务三所需的知识点,连续绘制多个AP元素方法：单击布局工具栏的“绘制AP Div”工具按钮，然后按下ctrl键不放，在所需多个AP元素的页面上绘制即可,（2）选择AP元素：选择一个AP元素 法一：在文档窗口中单击AP元素的标志 （若AP元素标记不可见，执行“查看”/“可视化助理”/“不可见元素”命令，即可出现）
37、 法二：单击AP元素边界法三：在窗口右侧的“AP”面板中单击AP元素的名称,完成工作任务三所需的知识点,选择多个AP元素 法一：按住shift键在两个、多个AP元素内或边界上单击 法二：在窗口右侧的“AP元素”面板上按住shift键单击两个或多个AP元素的名称当多个AP元素被选择时，最后选择的AP元素的手柄以蓝色突出显示，其他AP元素的手柄以白色突出显示。,完成工作任务三所需的知识点,（3）改变AP元素的大小：通过过周围的黑色调整柄拖动控制AP元素的大小 （4）移动AP元素的位置：拖动AP元素左上角的选择柄可以移动AP元素的位置 （5）插入AP元素对象：光标移动AP元素内，就可以在AP元素内插
38、入对象（元素），如插入图像、AP元素、表单、文本或表格等其他元素 （6）对齐AP元素：页面上有多个AP元素时，我们要对齐这些AP元素选择要对齐的AP元素使用“修改”/“排列顺序”菜单中的对齐选项 对齐时以最后选定的那一个AP元素作为依据对齐,完成工作任务三所需的知识点,（7）AP元素面板的认识 执行菜单“窗口”/“AP元素”，显示出AP元素面板，左边（小眼睛）为控制AP元素的显示/隐藏，缺省为显示。“张开眼睛”图标为显示，“合上眼睛”为隐藏。单击左列可控制眼睛的开合，达到控制AP元素的显示/隐藏的目的。名称apDiv1、apDiv2为AP元素的名称，右边显示的是AP元素的Z值。通过数值的调整可
39、控制AP元素重叠的顺序。,完成工作任务三所需的知识点,（8）AP元素与表格的转换把AP元素转换成表格的目的是为了与3.0及其以下版本的浏览器兼容。对于高版本的浏览器无需将AP元素转换成表格。AP元素与表格是可以相互转换的，通过执行菜单“修改”/“转换”，可以选择“将表格转换为AP Div”也可以选择“将AP Div转换为表格”，可以实现表格与AP元素的相互转换。但AP元素转为表格时，必须清楚不存在有重叠、嵌套，否则转换将无法进行。,完成工作任务三所需的知识点,（9）设置AP元素的属性使用“窗口”/“属性”选项，打开属性面板，选中需设置属性的AP元素（选中一个AP元素或多个AP元素），“属性”面
40、板中随即显示出AP元素的常用属性。,剪辑 当AP元素内的对象（如图片）尺寸大于AP元素的大小时，使用剪辑设置其显示的区域。,完成工作任务三所需的知识点,Z轴 指定AP元素的索引（或堆叠顺序号），编号较大的AP元素出现在编号较小的AP元素的上面。编号可正可负，也可以是0 左和上 指AP元素的位置 宽和高指定AP元素的宽度和高度 可见性决定AP元素的初始显示状态。本属性有以下选项default（缺省） 不指定，由浏览器的默认值决定；inherit(继承) 子AP元素将继承父AP元素的属性；visible(可见) 显示AP元素的内容，将AP元素设为可见状态；hidden(隐藏) 隐藏AP元素的内容,
41、完成工作任务三所需的知识点,背景图像 指定AP元素的背景图像。单击浏览图标，可浏览并选择一个图像文件，或直接在文本框中输入图像文件的路径 背景颜色 指层的背景颜色，此选项为空时指定透明背景 溢出指定AP元素的内容超过了AP元素的大小将发生的事件如下scroll（滚动） 给AP元素添加滚动条，不管内容是否超过了层大小；auto(自动) 在AP元素的内容超过它的边界时自动显示滚动条；visible(可见) 增加AP元素的大小，以便层的所在内容可见。层向下或向右扩大；hidden(隐藏) 保持AP元素的大小，并剪掉与层大小不符的任何内容，不显示滚动条,完成工作任务三所需的知识点,完成工作任务三所需的
42、知识点,时间轴 1、时间轴的概念：时间轴通过随时间的变化改变AP元素的位置、大小、可见性和叠放顺序来创建动画。这就是动态HTML的表达方式，也是Dreamweaver强于其它网页编辑器的地方。时间轴只能移动AP元素，因此想让图象或文本对象移动，就须先创建AP元素，然后在AP元素中插入对象。,2、时间轴面板时间轴描述了层和图像的属性随时间变化的情况。选择“窗口”/“时间轴”选面，将打开时间轴面板。在时间轴面板中：“时间轴”下拉列表框：指定当前在“时间轴”面板中显示文档的哪些时间轴播放栏： 指示在网页中显示的是哪一帧。动画通道：显示动画层的地方。,完成工作任务三所需的知识点,关键帧：动画条中的小圆
43、圈是关键帧。自动播放：当网页载入到浏览器时使当前时间轴自动播放。循环：当网页载入到浏览器时使当前时间轴无限循环播放。Fps: 每秒帧数，可以通过设置帧的总数和Fps来控制动画的持续时间。每秒15帧是默认设置。,完成工作任务三所需的知识点,3、创建时间轴动画由于时间轴只能移动AP元素，因此如果要移动图像或文本，则要创建一个AP元素，然后在该AP元素中插入图像、文本或其它类型的内容。 步骤见前面的实例 4、使用多个时间轴在网页中用一个时间轴控制所有动作不如用多个时间轴分别控制网页的不同部分简单。要管理多个时间轴，请使用以下选项：要创建新的时间轴，选择“修改”/“时间轴”/“增加时间轴”。 要删除时
44、间轴，选择“修改”/“时间轴”/”删除时间轴”。 要为时间轴重新命名，选择“修改”/“时间轴”/“重新命名时间轴”。,完成工作任务三所需的知识点,总结与作业,作业,总结,Dreamweaver中行为、AP元素、时间轴的使用,1、在自己的班级网站主页上完成课堂中所讲的特殊效果 2、预习管理员登录部分内容,项目三 主页的设计与制作 子项目3-3：主页制作（管理员登录部分的设计与制作（1）,知识技能目标,1、了解表单的一般工作流程，会在网页中制作表单；,2、会使用JavaScript脚本代码完成客户端信息完整性的检查；,工作任务列表,任务一：建立登录表单，并将表单提交给logincheck.asp处
45、理。 任务二：使用JavaScript脚本代码完成客户端表单输入数据不能为空的检查,准备工作,1、将ClassWeb文件夹解压缩，并设其为主目录； 2、建立名为“MyClass”的动态站点； 3、启动Dreamweaver,在站点文件夹ClassWeb下新建文件夹login，并在login文件夹下新建文件login.asp 。,任务：建立登录表单，将表单提交给logincheck.asp进行处理。,工作任务一建立登录表单,实现步骤： 步骤1、双击login.asp文件，进入“设计”视图状态； 步骤2、创建表单表单，其作用就是把各对象作为一个整体进行处理，一个页面可以包含多个表单，在同一表单中的
46、对象是一个整体，与另一个表单中的对象一般是不相干的。创建表单，只需按以下步骤：,工作任务一建立登录表单,（1）在插入工具栏中选择“表单”，以显示出表单工具栏（若插入工具栏不出现，可以使用“窗口”/“插入”命令来调出）（2）单击“表单”控件，即可以在页面中出来一个红色虚线围住的区域，就是表单。若没有看到创建的表单，通过“查看”/“可视化助理”/“不可见元素”命令，来隐藏或显示表单。,工作任务一建立登录表单,步骤3、表单中插入表格 在表单中插入一个四行二列的表格，表格的大小根据主页效果图登录表单中切片的大小来确定。在表格属性面板中对表格进行参数设置，设置表格边框大小为0,工作任务一建立登录表单,表
47、格的背景色依据主页效果图中的效果来确定，在背景色或背景图像中进行设置,步骤4、在表格第一列中输入文字，在表格第二列中添加表单对象。在该任务中涉及到两类表单对象，各对象及其属性设置如下：（1）文本字段文本字段的作用是提供访问者输入文字，如图中的“用户名”、“密码”和“验证码”输入框。选中各文本字段，在属性面板中进行属性设置：文本域：即文本字段的名称（如图中的username），服务器端是根据该名称（变量）来获取输入的值的。,工作任务一建立登录表单,字符宽度：文本字段在页面占的位置宽度。 类型：分为单行、多行和密码。如选为密码，则访问者所输出字符均显示为“*” 初始值：文本字段的初始值。 （2）按
48、钮在表单中输入信息完毕，向服务器提交信息时使用，如图中的“登录”、“重置”，其属性面板如图所示。按钮名称：给按钮所取的名称 值：按钮的标题，如“提交”、“重置”等。,工作任务一建立登录表单,动作：提交表单、重置表单、无三个单选项。“提交表单”是将表单中所填入的内容提交给服务器处理；“重置表单”则是清空表单中填入的内容。选择“无”则既不提交也不重设，但可以执行给按钮指定的动作。,步骤5、设置表单提交时的处理文件为logincheck.asp单击“设计”视图下方标签选择器处的“form”，选中表单，在下方的属性中进行设置,工作任务一建立登录表单,一、表单 1、表单的作用 表单使网站管理者可以与Web站点的访问者进行交互，主要用于采集和提交用户输入的信息。表单是收集客户信息和进行网络调查的主要途径。例如，在网上常见的申请免费邮箱页面，就是一个表单，访问者填写如用户名、密码、性别、爱好等相关信息后，按下“提交”按钮，提交给服务器进行处理，服务器端程序自动检查填写是否符合规范或用户名是否有重名等，并将信息反馈。除此以外，表单的通常应用有调查表、填写注册、电子商务订单和信息搜索等。,
