| 项目1 设计简易灯箱画廊 1.实验所需素材 在trees文件夹中提供一个MP3文件和18个JPG文件，设计页面时可以使用。 2.编程实现简易灯箱画廊，鼠标单击任一个图像超链接，在底部浮动框架中显示大图像，效果如图4-1所示的页面。
图4-1 简易灯箱画廊 1.编程设计支持音视、视频播放的网页，效果如图4-2所示的页面。
图4-2 多媒体及滚动字幕网页设计效果 2.歌词内容如下： 明月几时有？把酒问青天。 不知天上宫阙，今夕是何年。 我欲乘风归去，又恐琼楼玉宇，高处不胜寒，起舞弄清影，何似在人间。 转朱阁，抵绮户，照无眠。 不应有恨，何事偏向别时圆。 人有悲欢离合，月有阴晴圆缺，此事古难全。 但愿人长久，千里共婵娟。
|
| 项目1 <!-- prj_3_1.html --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易灯箱画廊设计 </title> <style type="text/css"> body { text-align: center; } .div1 { width: 900px; height: 500px; margin: 0 auto; text-align: center; background: #33cc99; } h3 { font-size: 24px; color: white; padding: 10px auto; } ul { margin: 0 auto; width: 800px; list-style-type: none; height: 120px; } li { float: left; width: 110px; height: 90px; margin: 5px; } img { border: 0; width: 100px; height: 80px; } a { color: #ffffff; text-decoration: none; } a:link, a:visited, a:active { color: #0033cc; } a:hover { border-bottom: 4px solid #FF0000; } </style> </head> <body> <embed src="trees/Sleep Away.mp3" autostart="true" loop="true" width="0" height="0"></embed> <div class="div1"> <h3>简易灯箱画廊设计</h3> <hr color="red" size="3"> <ul> <li><a href="trees/t1.jpg" target="iframe">T1<img src="trees/t1.jpg"></a></li> <li><a href="trees/t2.jpg" target="iframe">T2<img src="trees/t2.jpg"></a></li> <li><a href="trees/t3.jpg" target="iframe">T3<img src="trees/t3.jpg"></a></li> <li><a href="trees/t4.jpg" target="iframe">T4<img src="trees/t4.jpg"></a></li> <li><a href="trees/t5.jpg" target="iframe">T5<img src="trees/t5.jpg"></a></li> </ul> <iframe src="trees/t1.jpg" name="iframe" width="500px" height="300px" frameborder="0"<br> </iframe> </div> </body> </html> 项目2 <!DOCTYPE html> <html lang = "en"> <head> <meta charset="utf-8"> <meta name="keywords" content="Web前端开发，网页设计"> <title>多媒体</title> <style type = "text/css"> @font-face { font-family: 'MyNewFont'; src: url('font/1.TTF'); } body{ text-align: center; } .div1{ height: 500px; text-align: left; background-color: #99cc00; } ul{ list-style-type: none; } li{ float: left; margin: 20px; } marquee{ font-size: 16px; padding: 4px auto; background-color: blue } </style> </head> <body> <h2 align="center">明月几时有</h2> <hr size="3" color="blue"> <p > 明月几时有？把酒问青天。<br> 不知天上宫阙，今夕是何年。<br> 我欲乘风归去，又恐琼楼玉宇，<br> 高处不胜寒，起舞弄清影，何似在人间。<br> 转朱阁，抵绮户，照无眠。<br> 不应有恨，何事偏向别时圆。<br> 人有悲欢离合，月有阴晴圆缺，此事古难全。<br> 但愿人长久，千里共婵娟。<br> </p> <hr color="red" > <div class="div1" id=""> <ul> <li><embed src="embed/蔡琴明月几时有.mp3" loop="true" width="500" height="200"></embed></li> <li><embed src="embed/若只如初见.mp4" loop="true" width="500" height="200"></embed></li> <li><embed src="embed/王菲 - 但愿人长久.mp3" loop="true" width="500" height="200"></embed></li> </ul> </div> <marquee direction="left" behavior="alternate" onm ouseOver="this.stop()" onMouseOut="this.start()">欢迎来到我的多媒体世界！</marquee> </body> </html> |
|
项目2
|
