第八章 使用层和多媒体.pptVIP

* * * 使用层和多媒体 第八章 Version 1.0 * 回顾 DHTML主要是指 HTML、样式表和脚本等技术的组合，用于为网页增添交互性。 样式表是一种将样式（如字体、颜色、间距）添加到网页中的简单机制。 “行内样式”是分配给某一特定元素的样式。 类选择器使用 HTML 元素的 CLASS 属性。 ID 选择器使用 HTML 元素的 ID 属性。 STYLE 属性用于对单个元素应用样式。 使用层 在HTML文档中插入多媒体 * 目标 层简介 * 需要用不同颜色的纸制作一个微笑的人脸 颜色纸 层 层示例 * 层可以 – 包含内容 按需要定位 层的特征 * 可以使用HTML的＜DIV和SPAN标记创建层 层 可通过脚本控制 使页面具有交互性和动态效果 降低文件大小 可以使用样式表设置层的属性 使用层3-1 * HTML HEAD TITLE创建层/TITLE BODY DIV ID=layer1 STYLE=position:absolute; left:5px;top:10px; width:300px;height:200px; z-index:1;background-color:yellow PFONT COLOR=red SIZE=4 /B这是使用DIV标记创建的层/B/FONT /P pFONT SIZE=3层是使用ID属性命名的/FONT/P PFONT SIZE=3z-index属性确定层的堆叠顺序/FONT/P /DIV /BODY /HTML 使用层3-2 * HTML HEAD TITLE使用层/TITLE STYLE TYPE=text/css !-- #layer1 { position:absolute; left:25px; top:27px; width:300px; height:18px; z-index:1; } -- /STYLE /HEAD BODY H1FONT COLOR=hotpink SIZE=7使用层/FONT/H1 DIV ID=layer1 FONT COLOR=limegreen SIZE=4B第一层/B/FONT /DIV P层是一种可以添加到网页上的元素/P /BODY /HTML 使用层3-3 * HTML HEAD TITLE使用多个层/TITLE STYLE TYPE=text/css !-- #layer1 { position:absolute; left:100px; top:100px; width:200px; height:40px; background-color:yellow; } #layer2 { position:absolute; left:100px; top:150px; width:200px; height:100px; background-color:blue; } -- /STYLE /HEAD BODY DIV ID=layer1 PFONT COLOR=red SIZE=6B2004年欧锦赛/B/FONT/P /DIV DIV ID=layer2 FONT COLOR=white PB参赛球队/B/P 　　 UL 　　　 LI英国/LI 　　　 LI巴西/LI 　　　 LI法国/LI 　　 /UL /FONT /DIV /BODY /HTML * 在 HTML 文档中插入多媒体 * 在 HTML 文档中插入 GIF 动画文件 GIF 图象 HTML HEAD TITLE插入 .GIF 动画文件/TITLE /HEAD BODY H1FONT SIZE=3　COLOR=forestgreen B插入图像/B/FONT /H1 HR IMG SRC=ball.gif ALT=Basket /BODY /HTML * 在 HTML 文档中插入声音 HTML HEAD TITLE插入声音/TITLE /HEAD BODY H1FONT SIZE=3 COLOR=forestgreenB插入声音 /B/FONT/H1 HR BGSOUND SRC=WindowsLogonSound.wav LOOP=infinite AUTOSTART=true IMG SRC=basket.gif /BODY /HTML 文件名 次数 自动播放声音文件 * 在 HTML 文档中插入视频 HTML HEAD TITLE插入视频文件/TITLE /HEAD BODY H1FONT SIZE=3 COLOR=FORESTGR