湖北职晚计算机科学与技术理论课教案一《网页设计》 教学项目十HTML图片与声音标志的使用 【教学内容】 讲解HIML标准中的图片及声音标志 【教学目的】 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与 图片 【教学重点】 1.IMG标志的使用 2. embed标志的使用 【教学难点】 理解ing标志和 embed标志中属性的意义 【教学方式】 案例分析式、练习式相结合 【教学参考】 1. Wittime工作室重庆出版社 3.〉 电脑报社出版 【新课】 图片标志的使用 1.语法 < lmg src=图片文件路径及名称〉 与ing配合使用的属性 src:指定图片所在位置及文件名 align:设置文字与图片的对齐方式
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目十 HTML 图片与声音标志的使用 【教学内容】 讲解 HTML 标准中的图片及声音标志 【教学目的】 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与 图片 【教学重点】 1. IMG 标志的使用 2. embed 标志的使用 【教学难点】 理解 img 标志和 embed 标志中属性的意义 【教学方式】 案例分析式、练习式相结合 【教学参考】 1．> 杨浩著 清华大学出版社 2．> Wittime 工作室 重庆出版社 3．> 电脑报社出版 【新课】 一、图片标志的使用 1． 语法 与 img 配合使用的属性： src: 指定图片所在位置及文件名 align: 设置文字与图片的对齐方式
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 border:设定图片外框 vspace:设定图片与文字垂直方向间隔 hspace:设定图片与文字水平方向音隔 width:调整图片宽度 height:调整图片高度 alt:浏览器无法正常显示图片时,显示alt指定的文字 例1 插入图片,宽度400,高度280,垂直居中对齐 Head> 图片插入例子 p>这是使用img插入的图片
湖北职院计算机科学与技术系理论课教案—《网页设计》 border:设定图片外框 vspace:设定图片与文字垂直方向间隔 hspace:设定图片与文字水平方向音隔 width: 调整图片宽度 height:调整图片高度 alt: 浏览器无法正常显示图片时，显示 alt 指定的文字 例 1： 插入图片，宽度 400，高度 280，垂直居中对齐 图片插入例子 这是使用 img 插入的图片
湖北职晚计算机科学与技术理论课教案一《网页设计》 文件望)①)查着D)收前)工只①和助a 后退·国日户搜收夹的媒③,学圈·□“ 地址①)包GFxn4 te\sanp79htm 转到链接 这是使用mg插入的图片 文件①)编辑Q)格式①)查看①帮助Q tit1e>图片插入例子 完中 我的电焰 例2.将图片设置为背景 文件⑦)①)着 工具辽 后E 回回的抛收可的,,□当 址①)单)G: FrontPage\sanp12了2,htm ②特到特” 爱情是什么 流满面 自己的唢和鼻涕 Head> 图片背景的使用 p>爱情是什么</p
湖北职院计算机科学与技术系理论课教案—《网页设计》 例 2.将图片设置为背景 图片背景的使用 爱情是什么
湖北职院计算机科学与技术糸理论课教案一《网页设计》 br> p>老妈说:爱情是颗洋葱头,一片片剥下去,总有一片让你泪流满面 老爸说:爱情是感冒,既瞒不了自己,也瞒不了别人,因为你抑制不住 自己的喷嚏和鼻涕;朋友说:爱情是只啁啾的鸟,总想往高处飞,但又 总要找个栖息的角落;而嗜饮咖啡的我更愿意说:爱情是一杯香浓的咖啡。 例3.视频的插入 在标志img中使用属性 dynac,可以在网页在加入视频 文件①)编描()查看QD)收④)工具①)帮助00 0后:国图的搜☆收藏买的媒的,品·当 地址)G: FrontPage\sanp1e23lt M转到接” 向左走向合走 3-记事本 回区 文件()编辑)格式@)查看0帮助0 韵完毕 我的电脑 开始「N,·精品牌的am5记事3m日? 程序代码如下
湖北职院计算机科学与技术系理论课教案—《网页设计》 老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让你泪流满面； 老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住 自己的喷嚏和鼻涕；朋友说：爱情是只啁啾的鸟，总想往高处飞，但又 总要找个栖息的角落；而嗜饮咖啡的我更愿意说：爱情是一杯香浓的咖啡。 例 3.视频的插入 在标志 img 中使用属性 dynsrc,可以在网页在加入视频 程序代码如下:
湖北职晚计算机科学与技术理论课教案一《网页设计》 center >img dynsrc=l. wmv width=400 height=260 loop=2> ) 二.标志 embed的使用 使用标志 embed可以实现在网页中插入声音,视频,动画等效果 语法 embed src=l rm width=400 height=180> 例5网页中 FLASH动画的插入
湖北职院计算机科学与技术系理论课教案—《网页设计》 二.标志 embed 的使用 使用标志 embed 可以实现在网页中插入声音,视频,动画等效果. 语法: 例 4:在网页中插入音频 例 5.网页中 FLASH 动画的插入
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 G:\FrontPage\eample22\55,ht groCott工 nternet xD⊥oxer ⊙⊙回必批次收微的体的,8·口当 出址)]G: Front.ge\sanp1255,hm 转到播 我的电脑 embed src=ll. swf width=480 height=320> 三.背景音乐的插入 语法 < bgsound src=声音文件loop=播放次数〉 例6.在网页中设置背景音乐,次数为无限次
湖北职院计算机科学与技术系理论课教案—《网页设计》 三.背景音乐的插入 语法: 例 6.在网页中设置背景音乐,次数为无限次
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 aG: \FrontPage\sample22\6.htm-licrosoft Internet Explorer 文件①)编①)查看0D收④工具()帮助0D 后退 国图的搜收来时媒体应,品·回当 地址①)G: ontPage\sanple2l6.htm M转 曾经有一份不真诚的爱情摆在我面前,我没有珍惜,等到失去的时候才庆幸莫及 的事情莫过于此。如果上天能给我一个机会再来一次的话,我会 对那个男孩说,我不爱你,如果非要给这个回答一个期限,我希望是,一百万年 回 文件②)縯辑)格式@)查看C帮助 团开始32。国。「D5记事36B:心501 bgsound src=223. mid loop=-1> & nbsp;曾经有—份不真诚的爱情摆在我面前,我没有珍惜,等到失去的时候才庆幸莫 及 尘世间最快乐的事情莫过于此。如果上天能给我一个机会再来一次的话,我会 对那个男孩说,我不爱你,如果非要给这个回答一个期限,我希望是,一百万年! 四、水平线的插入 标志:
湖北职院计算机科学与技术系理论课教案—《网页设计》 曾经有一份不真诚的爱情摆在我面前,我没有珍惜,等到失去的时候才庆幸莫 及, 尘世间最快乐的事情莫过于此。如果上天能给我一个机会再来一次的话，我会 对那个男孩说，我不爱你，如果非要给这个回答一个期限，我希望是，一百万年！ 四、水平线的插入 标志：
湖北职晚计算机科学与技术理论课教案一《网页设计》 常用属性 lign:水平线的对齐方式 width:水平线的长度 size:水平线的宽度 color:水平线的颜色 【课后小结】 本节介绍了在网页中加入图片,声音,视频,动画的标志与相应属性,熟练运用这些标 志是制作多媒体网页的基础
湖北职院计算机科学与技术系理论课教案—《网页设计》 常用属性： align:水平线的对齐方式 width:水平线的长度 size:水平线的宽度 color:水平线的颜色 【课后小结】 本节介绍了在网页中加入图片，声音，视频，动画的标志与相应属性，熟练运用这些标 志是制作多媒体网页的基础