中考化学总复习第一轮复习系统梳理夯基固本第15讲金属活动性顺序的实验探究及应用练习课件20190116111_第1页
中考化学总复习第一轮复习系统梳理夯基固本第15讲金属活动性顺序的实验探究及应用练习课件20190116111_第2页
中考化学总复习第一轮复习系统梳理夯基固本第15讲金属活动性顺序的实验探究及应用练习课件20190116111_第3页
中考化学总复习第一轮复习系统梳理夯基固本第15讲金属活动性顺序的实验探究及应用练习课件20190116111_第4页
中考化学总复习第一轮复习系统梳理夯基固本第15讲金属活动性顺序的实验探究及应用练习课件20190116111_第5页
已阅读5页,还剩25页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

第11讲创建网页特效2016年河南大学环境与规划学院第11讲创建网页特效2016年河南大学环境与规划学院1

在制作网页中,为了丰富网页内容,使网页新颖有风格,需要为网页添加特殊效果。制作网页特效主要使用Dreamweaver8中自带的行为以及在网页中添加JavaScript代码完成。创建网页特效在制作网页中,为了丰富网页内容,使网页新颖有风格,需2

行为:指的是网页中进行的一系列动作,通过这些动作,可以实现用户同网页的交互,也可以通过动作使某个任务被执行,比如用户在浏览网页时单击按钮弹出一个提示对话框,这就是一个完整的行为。创建网页特效行为:指的是网页中进行的一系列动作,通过这些动作,可以实3通常一个行为由一个行为和一个动作构成,通过一个事件能够激活一个动作,完成用户和页面的交互,比如,当将鼠标移动到一副图片时,可以引发OnMouseOver事件,用户设置某一个动作,比如一副大图片的显示,这一事件就会激发这个动作,实现用户和页面的交互。DW中通常动作是一段预先写好的Javascript代码,利用这些代码可以完成相应的任务。创建网页特效通常一个行为由一个行为和一个动作构成,通过一个事件能够激活一4创建网页特效弹出消息、广告页面特效滚动字体特效、显示隐藏层特效创建网页特效弹出消息、广告页面特效滚动字体特效、显示隐藏层特5创建网页特效例11.1创建如下的网站,学习滚动字体特效和显示隐藏层特效的实现创建网页特效例11.1创建如下的网站,学习滚动字体特效和显示6要求:页面底部的“云台山欢迎你”呈现从左向右的滚动状态显示,点击右侧的小图片,在页面中间出现较大的图片创建网页特效要求:页面底部的“云台山欢迎你”呈现从左向右的滚动状7主要步骤:首先在MyWeb文件夹下新建yuntaishan站点,打开Dreamweaver管理该站点,右单击站点-新建文件,新建index.html,打开index.html然后,进行如下的操作:1、进行整体布局:插入5行2列的表格,表格宽为850px,居中排列,高为550px,合并第1列,设置第1列宽620;创建网页特效主要步骤:1、进行整体布局:插入5行2列的表格,表格宽为8582、输入表格内容:左侧1列输入:云台山,换行并插入-HTML-水平线,换行输入内容“云台山位于河南省焦作市修武县境内,景区面积240平方公里,含百家岩、红石峡、子房湖、潭瀑峡、猕猴谷、茱萸峰、峰林峡、青龙峡等主要景点。区地形复杂,气候随海拔与山势山形变化各异、差异明显,原始次生林覆盖了整个山峦,各种树木和奇花异草种类达五百多种。云台山主峰茱萸峰海拔1314米,有落差314米的云台天瀑,在景区泉瀑峡的尽端,是中国发现的落差最大的瀑布之一。园区内地质遗迹丰富,30亿年来,形成了太古宇、元古宇、古生界和新生界地层;多次的构造运动,尤其是2300万年以来,新构造运动的强烈抬升和水蚀作用的深度下切,造就了云台山双崖对峙的峡谷群和各种动态的瀑、泉、溪、潭,共同构成了旷奥兼具的“云台地貌”景观。云台山上溯夏商,下至明清,文人墨客不绝于此,竹林七贤隐居山中,对中国园林从宫廷走向大自然起到了承前启后的作用。2004年2月13日,云台山被联合国教科文组织评选为全球首批世界地质公园。2014年1月,云台山景区被列入资源型城市重点旅游区自然风光旅游项目。”创建网页特效2、输入表格内容:左侧1列输入:云台山,创建网页特效93、右侧5行分别插入图像占位符4、设置表格内容的CSS样式:1)选中右侧1列,右单击选中CSS样式-新建,新建类选择符,命名为.left_td,链接为外部样式表,在右侧CSS面板选择.left_td,设置字体为隶书,大小为18px,行高为18px,背景为images/bg_2.jpg,不重复,方框宽为550px,高为500px,填充全部相同为15px,边框为两个宽度的虚线,颜色为#006699;2)选中云台山三个字,右单击选中CSS样式-新建,新建ID选择符为.left_td#yuntaishan,设置样式为字体为隶书、大小为30,粗细为粗体、颜色为红色,设置链接为http:///,鼠标点击显带下划线的蓝色创建网页特效3、右侧5行分别插入图像占位符创建网页特效103)右单击右侧的图像占位符,选择CSS样式-新建,新建名为pic的类选择符.pic,设置.pic样式为:方框宽180,高100px,从images中分别为每个图像占位符选择图片5、设置页面底部红色的滚动字体“云台山欢迎你”:首先选择布局选择卡的绘制层命令,在页面底部绘制一层,输入“你迎欢山台云”,其id为layer1;其次,设置layer1的样式为字体为华为新魏,大小为50,粗体,斜体,颜色为红色,文本居中,方框宽为700,高为50,定位类型为绝对,宽为700,高为50,植入,上侧为501,左侧为280;创建网页特效3)右单击右侧的图像占位符,选择CSS样式-新建,新建名为p11最后,设置字体的滚动效果,在代码位置<divid=layer1>和</div>增加<marqueedirection=right></marquee>注意:<marquee></marquee>是设置页面元素的移动效果,常用的属性包含1)移动方向<direction=#>(#=left,right,up,down),移动方式<behavior=#>(#=scroll(重复滚动),slide(不重复滚动),alternate(来回滚动)),循环<loop=#>(

#=次数;若未指定则循环不止)如:<marqueedirection=rightbehavior=scrollloop=3>设置从右向左走,重复滚动,循环三次</marquee>创建网页特效最后,设置字体的滚动效果,在代码位置<divid=l126、设置点击右侧小图片,在页面中部出现相应的大图片:1)绘制大图片所在的层并设置内容和样式:单击菜单【插入】→【布局对象】→【层】,或单单击“布局”插入工具栏中的“绘制层”按钮,在文档窗口中绘制一个层,其id为layer2,设置该层的样式为绝对定位,置入上150px,左300px,层中放置一个图像占位符,右单击该图像占位符,选择【CSS样式】-【新建】,新建类选择符.pic2,设置宽为500,高为400;点击图像占位符,选择图片1;创建网页特效6、设置点击右侧小图片,在页面中部出现相应的大图片:创建网页132)设置鼠标移入小图片的行为:点击选择右侧图片1,打开行为面板窗口,点击选择显示-隐藏层命令,打开显示-隐藏层对话框,在该对话框选择该层后设置行为为显示,确定后在行为面板设置事件为onMouseOver;创建网页特效2)设置鼠标移入小图片的行为:点击选择右侧图片1,打开行为面143)设置鼠标移出小图片的行为:点击选择右侧图片1,点击行为面板按钮,从弹出快捷菜单选择选择显示-隐藏层命令,打开“显示-隐藏层”对话框,在该对话框选择该层后设置行为隐藏,确定后在行为面板设置事件为onMouseOut;创建网页特效3)设置鼠标移出小图片的行为:点击选择右侧图片1,点击行为面154)设置鼠标移动至其他图片的行为和事件:在layer2位置添加层layer3(layer4、layer5、layer6),设置layer3(layer4、layer5、layer6)的样式的样式为绝对定位,置入上150px,左300px,重复以上3步,设置鼠标移动至其他图片的行为和事件;5)设置layer2、layer3、layer4、layer5、layer6在页面加载时隐藏:单击选中文档编辑窗口左下角的<body>标签,行为面板点击添加行为按钮,选择显示-隐藏层命令,点击这些层,设置隐藏,行为面板选择onLoad事件。创建网页特效4)设置鼠标移动至其他图片的行为和事件:在layer2位置添167、打开页面播放背景音乐“天空之城”:点击添加行为按钮(+标记),选择播放声音命令,在如下的对话框,点击浏览按钮,选择音乐文件,单击确定,网页出现背景音乐图标

;点击该图标,在属性面板选择参数,打开参数对话框,设置autostart为true(设置自动播放),Loop为true(自动循环播放),如此背景音乐就可以重复循环播放了。创建网页特效7、打开页面播放背景音乐“天空之城”:点击添加行为按钮(+17创建网页特效弹出消息、广告页面特效滚动字体特效、显示隐藏层特效创建网页特效弹出消息、广告页面特效滚动字体特效、显示隐藏层特18创建网页特效例11.2实现在打开例10.1页面弹出如下的广告页面,关闭页面弹出如下的消息页面创建网页特效例11.2实现在打开例10.1页面弹出如下的广19打开弹出广告页面实现步骤:1、单击选中文档编辑窗口左下角的<body>标签2、单击行为面板的按钮,从弹出快捷菜单选择“打开浏览器窗口”选项,打开“打开浏览器窗口”对话框,点击浏览按钮,选择“广告.jpg”,在窗口宽度设置为600,高度设置为400,窗口名称设为广告创建网页特效打开弹出广告页面实现步骤:创建网页特效203、单击确定按钮,完成行为的添加4、观察“行为”面板,检查该行为对应的触发事件是不是onload,若不是,重新选择5、保存,按F12观察效果创建网页特效3、单击确定按钮,完成行为的添加创建网页特效21打开关闭页面弹出消息实现步骤:1、单击选中文档编辑窗口左下角的<body>标签2、单击行为面板的按钮,从弹出快捷菜单选择“弹出消息”选项,打开“弹出消息”对话框3、在“消息文本框输入“谢谢你光临本网站!!!”如图所示创建网页特效打开关闭页面弹出消息实现步骤:创建网页特效224、单击确定按钮,完成弹出消息行为的添加5、观察“行为”面板,检查该行为对应的触发事件是不是onbeforeunload,若不是,重新选择6、保存,按F12观察效果创建网页特效4、单击确定按钮,完成弹出消息行为的添加创建网页特效23创建网页特效控制Flash播放特效弹出消息、广告页面特效滚动字体特效、显示隐藏层特效创建网页特效控制Flash播放特效弹出消息、广告页面特效滚动24例11.3,创建一个如下的网页,页面下方有播放和停止,分别控制控制的飞舞和停止。

创建网页特效例11.3,创建一个如下的网页,页面下方有播放和停止,分别控25实现步骤:1、在MyWeb文件夹下新建huacong站点,在dreamweaver8.0中加载该站点,并新建index.html2、打开index.html,将插入工具栏切换为布局选项卡,单击布局按钮,将文档窗口切换为布局模式下工作,在页面中间位置绘制一个单元格,在属性面板设置居中对齐,并在该单元格下方再分别绘制2个单元格创建网页特效实现步骤:创建网页特效26创建网页特效创建网页特效273、将鼠标置于单元格1中,执行插入-图像命令,插入图像huacong.jpg4、单击布局选项卡标准按钮,将文档窗口切换至标准模式,在该模式下选择绘制层命令,在huacong.jpg所在位置绘制一层5、执行插入-媒体-flash命令,弹出选择文件对话框,在对话框中选择所需要的flash影片,如图所示,单击确定,完成flash影片的插入创建网页特效3、将鼠标置于单元格1中,执行插入-图像命令,插入图像hua286、选中插入的Flash,在属性面板的名称位置定义名称为hudie,对齐方式为居中对齐,点击参数,进入参数设置对话框,设置参数为wmode,值为tran

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论