收藏本站
 
设为主页
     您的位置:首页在线课堂高二级2017-2018学年度第二学期 》第七课
==※ 高二级 ※==
2017-2018学年第二学期






==※ 相关资源 ※==
 
太平洋电脑网
天极网
eNet网络学院
 
==※ 自由论坛  ※==
   
用户名:
密码:
 
忘记密码
游客请进
 
第七课 网页中的多媒体元素
 
学习目的:掌握在网页中插入各种多媒体文件的方法。
学习重难点掌握在网页中插入各种多媒体文件的方法。
教学方式:老师讲解、演示;学生自主探究、动手实践。

学习内容:

一、网页中的多媒体元素
  为了更好的表达网站的主题,为网页添加活力和吸引力,我们可以在网页中充分的利用各种多媒体元素,如图像、声音、动画、视频等,以获得更好的效果。
  前面的学习中我们已经了解了网页中插入图形图像的方法,这节课我们来学习其他媒体的插入方法。
  成品展示:珍贵的回忆
本课练习素材下载

1、新建站点,设置页面属性,插入表格
  (1)下载上面的练习素材,解压缩出“memory”文件夹;
  (2)新建站点,命名为“memory”,并将刚才的memory文件夹设为根目录;
  (3)新建网页“index.html”;
  (4)设置页面属性,背景图像为bg.png,网页标题为“珍贵的回忆”;
  (5)插入表格(姑且称为表格a):4行1列,宽度720像素,边框0。
  新建CSS类,命名为“table1”,设背景色为“#414141”。
  选中表格,在属性面板中将表格设为水平居中,并使用table1样式。
  

2、制作标题栏
  (1)新建CSS类,命名为“td1”,设背景图像为banner.jpg;
  (2)选中表格第1行,设高度为120,并使用td1样式;
  
  (3)在表格第1行中插入flash3045.swf;
  
  (4)选中flash3045.swf,在属性面板设置如下:
  
  
3、制作菜单栏
  (1)选中表格a的第2行,插入新表格(姑且称为表格b):1行3列,宽度720像素,单元格间距5;
  (2)选中表格b的3列,设其宽度为240,高度为40,并分别输入文字“Flash”、“Video”、“Music”;
  (3)新建CSS类,命名为“text1”,并应用到表格b的三个单元格上。
  text1样式的参数设置如下:
  
  
  
4、插入多媒体元素
  (1)在表格a的第三行插入新表格(姑且称为表格c):6行1列,宽度720像素,边距5,间距5;
  (2)选中内层表格c第1、3、5行,应用样式text1,并键入文字如下:
  
  (3)选中表格第2行,插入“出租车惊魂.swf”:
  
  (4)选中表格第4行,插入“没事,只是被自己帅到了.flv”,并让该视频在单元格居中显示:
  
  
  (5)选中表格第6行,插入“One Direction - One Thing.mp3”:
  
  插件宽度和高度调整如下,并让插件占位符在单元格居中显示:
  
  

5、完善网页
  (1)为菜单项制作锚链接,三个菜单项分别链接到“#Flash”、“#Video”和“#Music”,并修改页面属性:
  
  
  (2)在表格a的第4行添加版本信息。

* 友情提示:本文档只供本校师生上课时辅助使用,不是正规的教学设计或教案。


 

 

Copyright © 东莞中学信息技术科 All Rights Reserved
IE4.0 or later / 800*600  For The Best View