4使用多媒体文件、表单、段 （课件）-《网页设计与制作》同步教学（南开大学出版社）

第 四 章 使用多媒体文件、表单、段 使用多媒体文件 多媒体文件的链接 多媒体文件的链接: 多媒体文件的链接 <html> <head> <title>多媒体文件的链接</title> </head> <body bgcolor="#CCFFFF"> <center> 单击<a href="中国人民解放军进行曲.mp3">中国人民解放军进行曲</a>播放音乐 <p> 单击<a href="clock.avi">clock</a>播放影视 <p> </center> </body> </html> 使用多媒体文件 多媒体文件的嵌入 音乐文件的嵌入： 音乐文件的嵌入 <html> <head> <title>音乐文件的嵌入</title> </head> <body bgcolor="#CCFFFF"> <center> <embed src="中国人民解放军进行曲.mp3" width="294" height="110" autostart="true" loop="true"> </center> </body> </html> 使用多媒体文件 多媒体文件的嵌入 影视文件的嵌入： 影视文件的嵌入 <html> <head> <title>影视文件的嵌入</title> </head> <body bgcolor="#CCFF00"> <center> <embed src="clock.avi" width="300" height="300" autostart="true" loop="true"> </center> </body> </html> 使用多媒体文件 加入背景音乐 加入背景音乐： 有背景音乐的网页 <html> <head> <title>有背景音乐的网页</title> </head> <body bgcolor="#CCFFFF"> <center> 这是网页的背景音乐 <bgsound src="中国人民解放军进行曲.mp3" loop="-1"> </center> </body> </html> 使用多媒体文件 加入Flash动画 Flash动画的加入： 使用多媒体文件 加入Flash动画 Flash动画的加入： 使用多媒体文件 加入Flash动画 Flash动画的加入： Flash动画的加入 <html> <head> <title>加入Flash动画</title> </head> <body> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs /flash/swflash.cab#version=9,0,28,0" width="513" height="200"> <param name="movie" value="Flash.swf" /> <param name="quality" value="high" /> Flash动画的加入 <embed src="Flash.swf" quality="high" pluginspage= "http://www.adobe.com/shockwave /download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="513" height="200"> </embed> </object> </body> </html> 使用表单 表单简介 表单是通过“<form></form>”标记来进行定义的。“<form></form>”标记类似于一个容器标记，其它表单元素标记需要在它的包围中才有效。 “<form></form>”标记有3个属性，分别是“action”、“method”、“name”。 action属性：用以指明服务器位置和服务器端脚本的名称，可以是文件名甚至邮件地址。 method属性：用于设置传送资料的方式，取值有2个，分别为“post”和“get”。前者用于传送大量资料，而后者传送资料的限制是1kb。 name属性：给表单命名。 使用表单 表单元素 单行文本框、密码文本框： 单行文本框 <html> <head> <title>单行文本框</title> </head> <body> <form> <table width="279" height="79"> <tr> <td height="44" colspan="2"> <img src="images/zxly.jpg"></td> </tr> <tr height="34"> <td width="93" align="center">您的帐号：</td> <td width="175" align="right" ><input type="text"/></td> </tr> </table> </form> </body> </html> 使用表单 表单元素 单行文本框、密码文本框： 密码文本框 <html> <head> <title>密码文本框</title> </head> <body> <form> <table width="285" border="0" > <tr> <td colspan="2"><img src="images/zxly.jpg" ></td> </tr> <tr> 密码文本框 <td width="116" height="38" >您的帐号：</td> <td width="203"><input type="text" value="" size="23" name=”zhanghao”/></td> </tr> <tr> <td height="38" >您的密码：</td> <td><input type="password" value="12345678" size="25" name=”pswd”/></td> </tr> </table> </form> </body> </html> 使用表单 表单元素 多行文本框： 多行文本框 <html> <head> <title>多行文本框</title> </head> <body> <form> <table width="278" border="0" > <tr> <td colspan="2"><img src="images/zxly.jpg" ></td> </tr> <tr> <td width="85" height="25">留言主题：</td> <td width="184"><input type="text" size="25"/></td> 多行文本框 </tr> <tr> <td height="101">留言内容：</td> <td><textarea name="textarea" cols="20" rows="5"></textarea></td> </tr> </table> </form> </body> </html> 使用表单 表单元素 单选框： <html> <head> <title>单选框</title> </head> <body> <form> <table width="200" border="0"> <tr> <td><img src="images/wsdc.JPG"></td> </tr> <tr> <td align="center">您对本站的评价是：</td> </tr> <tr> <td align="center">非常好： <input type="radio" name="dc" value=“very_good” checked/></td> </tr> <tr> <td align="center">不好：&nbsp;&nbsp; <input type="radio" name="dc"/></td> </tr> <tr> <td align="center">无所谓： <input type="radio" name="dc"/></td> </tr> </table> </form> </body> </html> 使用表单 表单元素 复选框： <html> <head> <title>复选框</title> </head> <body> <form> <table width="294" border="0"> <tr> <td><img src="images/wsdc.JPG" width="288" height="32"></td> </tr> <tr> <td align="center">爱好： <input type="checkbox" name="research1" value="read" checked />看书 <input type="checkbox" name="research2" value="sport"/>运动 <input type="checkbox" name="research3" value="sing"/>唱歌 </td> </tr> </table> </form> </body> </html> 使用表单 表单元素 提交按钮、重置按钮： 提交于重置按钮 <html> <head> <title>提交与重置按钮</title> </head> <body> <form action="dd" method="post"> <input type="text" size="22"><br> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> </body> </html> 使用表单 表单元素 图片按钮： 图片按钮 <html> <head> <title>图片按钮</title> </head> <body> <form> <center> <input type="text" size="17"><br> <input type="image" name="add" src="images/badd.gif"> <input type="image" name="alter" src="images/bedit.gif"> </center> </form> </body> </html> 使用表单 表单元素 按钮： 按钮 <html> <head> <title>按钮</title> </head> <body> <form> <input type="text" size="17"><br> <input type="button" name=" button1" value="按钮一"> <input type="button" name=" button2" value="按钮二"> </form> </body> </html> 使用表单 表单元素 Hidden的用法： <html> <head> <title>hidden用法</title> </head> <body> <script> function show() { with(document.form1) tt.value = hh.value; } </script> <form name="form1"> Hidden的内容是"天津迅腾滨海科技有限公司"<br><br> <input type="hidden" name="hh" value="天津迅腾滨海科技有限公司"/> <input name="tt" size="30" value="" type=”text” /> <!-- &#160是&nbsp;不间断空格 --> &#160; <input type="button" value="显示" onClick="show()"> </form> </body> </html> 使用表单 表单元素 下拉列表框： 下拉列表框 <html> <head> <title>下拉列表框</title> </head> <body> <form> <select name="set"> <option value="sh"> 上海 </option> <option value="bj" selected> 北京 </option> <option value="tj"> 天津 </option> <option value="cq"> 重庆 </option> <option value="ly"> 洛阳 </option> </select> </form> </body> </html> 段 span Span的用法 <html> <head> <title>span的用法</title> </head> <body> <span style="font-size:24px">迅腾滨海科技有限公司</span>（<span style="color:blue"> (蓝色)简称：</span>迅腾科技，英文：Tianjin Binhai Xun Teng Technology Co., Ltd.）是天津滨海迅腾科技集团旗下一家以软件研发、软件外包为主导的科技型企业。 </body> </html> 总结 回顾 多媒体文件的链接、嵌入 加入背景音乐、Flash动画 表单，表单元素 段 重点：1、3 $$