《清华网制作4.ppt》由会员分享，可在线阅读，更多相关《清华网制作4.ppt（35页珍藏版）》请在三一文库上搜索。
1、网页制作,计算机文化基础课程电子讲稿 2008年11月 http:/,HTML,2,本次大课的内容提要,图层、时间线、行为及其应用,网页特效的应用,参考资料,动态Gif图像制作小结,网页作业注意事项,样式表应用,3,制作Gif动画,添加图像,改变画布大小,选定范围工具：魔术棒,自动创建,手动创建,4,制作横幅文字（1）,先创建一个空白的动画文档，然后在 “帧”菜单中选择 “添加横幅文本”,在文本标签中设置字体、字号、颜色、阴影等效果,5,制作横幅文字（2）,设置文字动画效果,设置帧画面的延迟时间,添加霓虹效果,最终效果,6,用视频片段制作 GIF 动画,1. 创建一个新的空白动画。 2. 单击
2、标准工具栏上的“添加视频”按钮。 3.选取影片文件，单击“区间”按钮。 4.打开“区间”对话框，利用“开始标记”和“结束标记”选取视频片段。 5. 单击“确定”按钮，关闭“区间”对话框，返回到“添加视频”对话框。单击“打开”按钮，所选择的帧就被加载到 GIF Animator 中。,示例,7,图层的使用,网页中的元素，如文本、图像，都可以放置到图层中，图层不仅具有表格的平面布局网页对象的功能，而且可以使网页中的对象在空间垂直方向（Z轴）上互相重叠，再配合时间轴（Timeline）的应用可以做出很多效果，使网页动感十足，还可以配合行为（Behaviors），使得网页在某种事件发生时显示隐藏的指定
3、图层等。,绘制图层按钮,用鼠标拖动的方法画出一个任意尺寸大小的图层。,参阅教材9.6.2节内容,8,图层的编辑,激活图层：单击图层中任一位置，图层只有被激活后 才可以插入对象。 选取图层：单击图层边框或单击文档窗口状态栏左侧 的层标记图标 ，或单击图层图标。 选中的图层四周出现8个黑色的小方块。,9,图层的编辑,移动图层 ：选中图层时，可用鼠标拖动图层的边框移动图层的位置，或者在“图层”属性面板中精确设置图层的新位置（左和上的值）。 改变图层尺寸 ：选中图层时，可用鼠标拖动图层四周的小方块调整图层的尺寸，或者在“图层”属性面板中精确设置图层的宽高尺寸（宽和高的值）。,10,时间轴,时间轴是一条
4、贯穿时间的轴线,时间轴动画是把动画对象放置在不同的图层中，通过改变图层的位置、大小、可见性和叠放顺序等属性来创建动画。,时间轴面板,11,制作时间轴动画,1.插入一个图层 2.在图层中插入对象 3. 使用“窗口”/“其它”/“时间轴”命令打开时间轴面板 4.将图层拖到时间轴的第1帧上 5.选中第1帧，将图层拖到动画开始位置 6.选中第15帧，将图层拖到动画结束位置 7.选中自动播放复选框,实现步骤:,结束位置,12,行为,行为是在网页中进行的一系列动作，通过这些动作实现用户与页面的交互，使用Dreamweaver内置的行为（实质是JavaScript代码），用户不需编写代码，就可以实现交互和控
5、制功能。 行为由事件和动作组成，事件是动作被触发的条件，动作是用于完成特定任务预先编好的JavaScript代码。,13,使用行为,步骤: 1.执行“窗口”/“行为”命令，打开行为面板 2.选中要添加行为的对象， 单击加号按钮 3.在弹出的动作菜单中选择某个动作 4.根据所选的动作，在参数窗口中设置参数 5.在事件菜单中为动作选择触发事件,14,利用图层实现下拉菜单（1）,图层默认为隐藏状态,步骤一： 分别为各个菜单项 创建对应的下拉菜 单图层。,具体操作参考上机指导第8章实验二任务2,15,利用图层实现下拉菜单（2）,指定行为动作： 当鼠标指向菜单项时， 隐藏的指定图层将被 显示，当鼠标移开
6、菜单 项时，显示的指定图层 重被隐藏。 同理应用于下拉菜单图层,步骤二： 分别为各个菜单项 和下拉菜单图层指 定行为动作,16,让图层中的对象沿路径动起来,“修改”/“时间轴”/ “录制层路径”命令,具体操作参考上机指导第8章实验二任务4,17,让图层中的内容动起来（1）,嵌套图层的创建： 创建图层，如layer7 选中该图层，按住 Alt键的同时，在其中创建其嵌套图层。,利用“剪辑”选项设置layer7图层的可见区域,具体操作参考上机指导第8章实验二任务3,18,让图层中的内容动起来（2）,选中图层Layer8，执行“修改”/“时间轴” / “录制层路径”命令，制作该图层从图层Layer7底
7、部移动到图层Layer7顶部的运动效果滚动看板。,19,调整多个图层的叠放顺序,选中图层Layer7，直接用鼠标将其拖拽到相应层次。,20,CSS样式,CSS（Cascading Style Sheet ）层叠式样式表，是国际组织W3C制定的扩展HTML功能的标准，CSS样式广泛适用于文本、图形等网页元素的格式化工作，方便网页的制作和维护，还能产生半透明图像等特殊效果。,“窗口/CSS样式”命令,21,CSS样式,嵌入式样式表：对某个具体的网页定义的样式，它的表现形式是直接将样式插入到网页的HTML代码中，不出现在样式表面板中，定义的样式自动应用到网页中。,外部样式表：将CSS样式保存为单独的
8、一个文件(.css)，网页中可以创建对某个现成样式表的链接，而且多个网页可以使用同一个样式表的样式.,局部应用样式表：也是对某个具体的网页定义的样式，定义的样式显示在样式表面板中，可以选择某段文本或图像使用所定义的样式。,22,去除超链接的下划线,选择新建CSS样式命令,嵌入式样式表,直接将样式插入到网页的HTML代码中,23,定义文字样式,局部应用样式表,选择“导出样式表”命令，导出为外部样式表，在其它的网页中可应用此样式表的样式,24,网页特效,所谓“特效”是指用某种编辑语言编写，或用特效软件编制的，实现某种网页特殊效果的一段编程代码。 JavaScript是一种扩展到HTML的脚本设计语
9、言，它使网页开发者可以更有效地控制页面，并能对用户触发事件作出即时响应，诸如单击鼠标、表单操作等，而且这些都不需要客户机与服务器的交互通信，既为用户提供了更快速的操作，又减小了服务器端的负担。JavaScript不能脱离HTML而独立存在，只有在支持JavaScript的浏览器中，它才能作为HTML页面的一部分起作用，但它增强了网页的表现力。,25,网页特效制作,许多网页的特殊效果都是用Javascript来装点的。不懂点编程知识人要想使用这些特效就有些困难了，因此国内共享软件作者便写了许多便于使用的Javascript模式程序，呼吸主页秀就属于这类软件。 呼吸主页秀包含了窗口、鼠标、文字、菜
10、单等九类共350种特效。,为了便于用户的使用，既可以先对已生成的代码进行效果预览，也可以直接修改代码。修改完成后复制到剪切板上，就可以插入到目标页面中了。,26,网页中插入特效代码,使用DreamWeaver：在编辑状态下按F10即 弹出源代码窗口，将特效代码粘贴进去即可。 使用FrontPage：点击编辑窗口左下角的“HTML”选项卡即出现源代码窗口，将特效代码粘贴进去即可。 直接使用“记事本”等编辑器：直接用这些编辑器打开网页文件，出现的就是源代码，将特效代码粘贴进去即可。,27,在什么地方插入代码?,通常在网页源代码的与之间的任何地方插入代码都可以，（除非特别指明，例如要求插入到与之间）
11、 。 插入代码之后，可以把代码中的文本文字替换成自己的内容。 注意：为避免出错， 尽量不改动文本文字之外的代码，否则程序可能会不能运行！,28,可动图片特效（1）,1.图片保存在网页文件所在的文件夹下 2.生成代码后就可以把代码复制到剪贴板中,29,可动图片特效（2）,3.把代码粘贴到网页的源代码中 4.把要替换的图片复制到网页所在文件夹下，在代码中替换原图片名,30,简单的Javascript样例1,31,简单的Javascript样例1,嵌入的javascript以开头，以结束。 符号用于使脚本跳过没有脚本处理能力的浏览器。 today=new Date() 创建日期对象 document
12、.write(“今天是) 输出“今天是” getDate()是Date对象的一种方法，其功能是获得当前的日期。,32,简单的Javascript样例2, function message() alert(“欢迎光临!“); ,33,简单的Javascript样例2,function 函数名(参数列表) 函数体 alert() 以对话框显示信息 Javascript的方法 onLoad 元素装载 javascript的事件,事件是浏览器响应用户操作的机制，如单击链接按钮时，便产生一个事件。浏览器总在等待事件发生，并在发生事件时，进行相应的处理。处理的过程称为事件处理，进行这种处理的代码称为事件处
13、理器。,34,网页作业补充,注意网站的文件管理，分门别类地放置在相应的文件夹 中，规范网页文件名和素材文件名。,利用“超链接”视图检查并修复网站中断开的超链接。,若提交来的网站中含有“某某.files”的素材文件夹，一律 视为不合格。,网页制作报告中须注明每位成员的班级、学号及联系方 式（电话和邮件）。成员分工决定最终成绩。,网页制作报告中须注明该网站备份存放的文件柜。,网页制作报告中特色制作说明为加分参考依据。,请仔细阅读作业要求,35,参考资料,参考教材,网站资源,网页制作栏目中的视频资源,第九章9.6、9.8、 9.9节,计算机文化基础上机指导第8章,优秀作业中的网页制作报告,网页制作的配套上机练习文件,计算机文化基础上机指导第9章,