湖北职晚计算机科学与技术理论课教案一《网页设计》 教学项目十HTML图片与声音标志的使用 【教学内容】 讲解HIML标准中的图片及声音标志 【教学目的】 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与 图片 【教学重点】 1.IMG标志的使用 2. embed标志的使用 【教学难点】 理解ing标志和 embed标志中属性的意义 【教学方式】 案例分析式、练习式相结合 【教学参考】 1.<< JavaScript入门与提高〉〉杨浩著 清华大学出版社 2.< Internet网页工场> Wittime工作室重庆出版社 3.< JavaScript从入门到精通>〉 电脑报社出版 【新课】 图片标志的使用 1.语法 < lmg src=图片文件路径及名称〉 与ing配合使用的属性 src:指定图片所在位置及文件名 align:设置文字与图片的对齐方式
湖北职院计算机科学与技术系理论课教案—《网页设计》 教学项目十 HTML 图片与声音标志的使用 【教学内容】 讲解 HTML 标准中的图片及声音标志 【教学目的】 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与 图片 【教学重点】 1. IMG 标志的使用 2. embed 标志的使用 【教学难点】 理解 img 标志和 embed 标志中属性的意义 【教学方式】 案例分析式、练习式相结合 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<Internet 网页工场>> Wittime 工作室 重庆出版社 3．<<JavaScript 从入门到精通>> 电脑报社出版 【新课】 一、图片标志的使用 1． 语法 <img src=图片文件路径及名称> 与 img 配合使用的属性： src: 指定图片所在位置及文件名 align: 设置文字与图片的对齐方式
湖北职晚计算机科学与技术亲理论课教案一《网页设计》 border:设定图片外框 vspace:设定图片与文字垂直方向间隔 hspace:设定图片与文字水平方向音隔 width:调整图片宽度 height:调整图片高度 alt:浏览器无法正常显示图片时,显示alt指定的文字 例1 插入图片,宽度400,高度280,垂直居中对齐 <html> Head> < title>图片插入例子</ title </head> p>这是使用img插入的图片</p <hr color=green SI Kimg src=0374 jpg width=800 height=240 align=middle> <br> </body> </htmI>
湖北职院计算机科学与技术系理论课教案—《网页设计》 border:设定图片外框 vspace:设定图片与文字垂直方向间隔 hspace:设定图片与文字水平方向音隔 width: 调整图片宽度 height:调整图片高度 alt: 浏览器无法正常显示图片时，显示 alt 指定的文字 例 1： 插入图片，宽度 400，高度 280，垂直居中对齐 <html> <head> <title>图片插入例子</title> </head> <body> <p> 这是使用 img 插入的图片</p> <hr color=green size=4> <img src=0374.jpg width=800 height=240 align=middle> <br> </body> </html>
湖北职晚计算机科学与技术理论课教案一《网页设计》 文件望)①)查着D)收前)工只①和助a 后退·国日户搜收夹的媒③,学圈·□“ 地址①)包GFxn4 te\sanp79htm 转到链接 这是使用mg插入的图片 文件①)编辑Q)格式①)查看①帮助Q tit1e>图片插入例子</tite m jpg width-800 height-240 align-niddie> 完中 我的电焰 例2.将图片设置为背景 文件⑦)①)着 工具辽 后E 回回的抛收可的,,□当 址①)单)G: FrontPage\sanp12了2,htm ②特到特” 爱情是什么 流满面 自己的唢和鼻涕 <html> Head> < title>图片背景的使用</ title〉 </head> <body background=ll. gif bgproperities=fixed> p>< center〉< font size=6face=隶书 colora= green>爱情是什么</font></ center></p
湖北职院计算机科学与技术系理论课教案—《网页设计》 例 2.将图片设置为背景 <html> <head> <title>图片背景的使用</title> </head> <body background=11.gif bgproperities=fixed> <p><center><font size=6 face=隶书 color=green>爱情是什么</font></center></p>
湖北职院计算机科学与技术糸理论课教案一《网页设计》 <br>br> p>老妈说:爱情是颗洋葱头,一片片剥下去,总有一片让你泪流满面 <br>老爸说:爱情是感冒,既瞒不了自己,也瞒不了别人,因为你抑制不住 自己的喷嚏和鼻涕;<br>朋友说:爱情是只啁啾的鸟,总想往高处飞,但又 总要找个栖息的角落;<br>而嗜饮咖啡的我更愿意说:爱情是一杯香浓的咖啡。 </body </html> 例3.视频的插入 在标志img中使用属性 dynac,可以在网页在加入视频 文件①)编描()查看QD)收④)工具①)帮助00 0后:国图的搜☆收藏买的媒的,品·当 地址)G: FrontPage\sanp1e23lt M转到接” 向左走向合走 3-记事本 回区 文件()编辑)格式@)查看0帮助0 <center><ing dynsrc-1umu width-490 height-260 loop-2> 韵完毕 我的电脑 开始「N,·精品牌的am5记事3m日? 程序代码如下 <htmI>
湖北职院计算机科学与技术系理论课教案—《网页设计》 <br><br> <p> 老妈说：爱情是颗洋葱头，一片片剥下去，总有一片让你泪流满面； <br>老爸说：爱情是感冒，既瞒不了自己，也瞒不了别人，因为你抑制不住 自己的喷嚏和鼻涕；<br>朋友说：爱情是只啁啾的鸟，总想往高处飞，但又 总要找个栖息的角落；<br>而嗜饮咖啡的我更愿意说：爱情是一杯香浓的咖啡。 </body> </html> 例 3.视频的插入 在标志 img 中使用属性 dynsrc,可以在网页在加入视频 程序代码如下: <html>
湖北职晚计算机科学与技术理论课教案一《网页设计》 <body> center >img dynsrc=l. wmv width=400 height=260 loop=2> </body>) </htmI> 二.标志 embed的使用 使用标志 embed可以实现在网页中插入声音,视频,动画等效果 语法 < embed src=文件名 width=窗口宽度 heigh=窗口高度〉 例4:在网页中插入音频 件 售址①)中)G:\FPP14,hta 转到腰 html> <center>embed src=l rm width=400 height=180> </body < /html> 例5网页中 FLASH动画的插入
湖北职院计算机科学与技术系理论课教案—《网页设计》 <body> <center><img dynsrc=1.wmv width=400 height=260 loop=2> </body> </html> 二.标志 embed 的使用 使用标志 embed 可以实现在网页中插入声音,视频,动画等效果. 语法: <embed src=文件名 width=窗口宽度 height=窗口高度> 例 4:在网页中插入音频 <html> <body> <center><embed src=1.rm width=400 height=180> </body> </html> 例 5.网页中 FLASH 动画的插入