SCITC 四川信息职业技术学院 开放课程 Webpage Design 网页设计与制作 C可川份毛和世我本手花 可思色 △合防 四川川信息职业技术学院精品开放共享课程
Information Technology College 四川信息职业技术学院开教共言话稻 中面设计与制作 单元3：多媒体元素的应用 授课教师：张俊辉
单元3：多媒体元素的应用 授课教师：张俊辉
S Sichuan Information Technology College 四川信息职业技术学院开教共喜移 中面设计与制作 教学重、难点 ●Dreamweaver中图片的应用 奶 ●Dreamweaver中动画的应用 ●标记的使用。 班 ●flash.及音视频标记
⚫Dreamweaver中图片的应用 ⚫Dreamweaver中动画的应用 ⚫标记的使用。 难点 ⚫flash及音视频标记 难点
SIT Sichuan Information Technology Colleg 四川信息职业技术学院开教共亨稻 中页设计与制作 简单个人网页分析 欢澳光指表的个人屑阳 问题1：该网页和上节课的网页有什么不同？ 问题2：网页中图像运用的格式是说明。 问题3：网页中图像的嵌入方式是什么？ 问题4：这些元素是如何应用到网页中的呢？
问题1：该网页和上节课的网页有什么不同？ 问题2：网页中图像运用的格式是说明。 问题3：网页中图像的嵌入方式是什么？ 问题4：这些元素是如何应用到网页中的呢？
Information Technology Colleg 四川信息职业技术学院开枚共言保程 化面设计与制作 二、网页中图像的应用 1.Dreamweaver中图像的应用 演示讲解Dreamweaver (1)插入图片 中应用图象 (2)设置图片属性 代码拆分+国 师：无 欢迎光临我的个人网站 湿M 自的拍是基属出通位耳的置 站 中自我介想 表 系方式 注意路径问题
1.Dreamweaver中图像的应用 （1）插入图片 （2）设置图片属性 注意路径问题 演示讲解Dreamweaver 中应用图象
S Sichuan Information Technology College 四川信息职业技术学院开枚共喜稻 中面设计与制作 二、网页中图像的应用 2.图像标记分析 (1)代码视图中对应的TML标记为： 〈img src="images,/Iqm.jpg"alt="我的个人照片" width="163"height="206"al ign="right"> (2)图片标记的基本语法结构如下：
2.图像标记分析 （1）代码视图中对应的HTML标记为： （2）图片标记的基本语法结构如下：
SIT Sichuan Information Technology College 四川信息职亚业技术学院开教共亨让福 中面设计与制作 二、网页中图像的应用 图像标记的属性及其取值范围如下表： 属性 属性名称 取值范围 对齐方 式 align top|middle|center|bottom |left right 指向 src url,图片所在地址 图片标 title 文本，鼠标放上的文字 文本 alt 文本，当图片不显示时显示的替代 文字 边框 border n 高 height ? 宽 width
• 图像标记的属性及其取值范围如下表： 属性 属性名称 取值范围 对齐方 式 align top|middle|center|bottom|left|right 指向 src url，图片所在地址 图片标 题 title 文本，鼠标放上的文字 文本 alt 文本，当图片不显示时显示的替代 文字 边框 border n 高 height n 宽 width n
hun Information Technology College 四川信息职业技术学院开枚共喜话移 化面设计与制作 三、网页中其他多媒体元素的应用 1.Dreamweaver中动画的应用 演示讲解Dreamweaver中 (1)插入动画 应用图象（详见动画演示） (2)设置动画属性 . 多个址1 C++ E C++T RV_ 9日背号酷份 无
1.Dreamweaver中动画的应用 （1）插入动画 （2）设置动画属性 演示讲解Dreamweaver中 应用图象（详见动画演示）
S Sichuan Information Technology College 四川信息职业技术学院开教共喜话程 中页设计与制作 三、网页中其他多媒体元素的应用 2.Flash:动画元素应用的HTML标记分析（了解） 3.音视频文件元素应用的HTML标记分析（了解）
2. Flash动画元素应用的HTML标记分析（了解） 3.音视频文件元素应用的HTML标记分析（了解）
SIT Sichuan Information Technology College 四川信息职业技术学院开教共亨话稻 中面设计与制作 课后小结 ·本讲主要介绍了： -Dreamweaver中图片的应用 -Dreamweaver中动画的应用 -〈img>标记的使用 -简单讲述了f lash.及音视频标记 模仿练习题： 模仿课堂中讲解的示例在个人网页的适当位置添加 图像、动画，切换到拆分（混合）视图模式，观察各代 码所表示的意义
• 本讲主要介绍了： – Dreamweaver中图片的应用 – Dreamweaver中动画的应用 – 标记的使用 – 简单讲述了flash及音视频标记 模仿练习题： 模仿课堂中讲解的示例在个人网页的适当位置添加 图像、动画,切换到拆分（混合）视图模式，观察各代 码所表示的意义