教学项目十五 HTML中表单网页设计(一) 【教学内容】 讲解HTML中跑马灯效果的设计与简单表单制作 【教学目的】 使学生掌握跑马灯动态网页效果设计和制作简单表单网页 【教学重点】 HTML中表单元素标志与属性 【教学难点】 理解marquee标志中各属性的意义 【教学方式】 案例分析式、项目教学 【教学参考】 1．<<JavaScript 入门与提高>> 杨浩著 清华大学出版社 2．<<JavaScript从入门到精通>> 电脑报社出版 3．hTML网页制作教程 材义语编著 铁道出版社 4．HTML基础与实例 程耀编著 电子工业出版社 【新课】 网页中跑马灯效果的制作 1.格式: <marquee>滚动内容</marquee> 说明: 滚动内容可以是文本和图片 2.marquee标志配合使用的属性 loop: 设定滚动次数 direction: 设定滚动方向 direction=left 从右向左滚动 direction=right 从左向右滚动 direction=up 从下向上滚动 direction=down 从上向下滚动 behavior:设定滚动方式 behavior=scroll 按指定方向滚动到尽头,重新开始 behavior=slide 不指定滚动次数时,滚动一次后停止 behavior=alternate 按指定方向来回滚动 width: 设定滚动区宽度 height: 设定滚动区高度 bgcolor: 设定滚动区背景颜色 例一: 在网页中设定文字的水平来回滚动效果  <HTML> <Head> <title>我的个人网页</title> </head> <body background=03.jpg> <br><br><br> <center><marquee loop=3 direction=right behavior=alternate bgcolor=yellow width=400> 欢迎光临我的个人网站</marquee></center> </body> </html> 例二、在网页中设定图片的垂直方向滚动效果  <html> <Head> <title>我的个人网页</title> </head> <body bgcolor=#00ff11> <br><br><br> <center><marquee loop=-1 direction=down behavior=scroll width=180 height=600> <img src=64.gif></marquee></center> </body> </html> 例三．在网页中同时设定文字与图片的滚动效果。  <html> <head> <title>1234</title> </head> <body background=8.jpg> <center><marquee direction=right behavior=scroll width=500 height=50 bgcolor=yellow> <font face=隶书 size=5>Hi，欢迎登录我们的家园：www.xg000.com，惊喜多多...</font></marquee></center> <br><br> <marquee behavior=alternate direction=up width=180 height=400> <img src=62.gif></marquee> <body> </html> 表单网页的设计 1．表单标志 <form>,/form> 定义表单的开始与结束，常用的属性有： action: 指定处理表单中提交数据的网页文件 method: 指定表单中数据的传输方式 2． 单行文本框 格式： <input type=text size=显示字符个数 name=字段名 value=默认值 maxlength=最大字符个数> 3.密码域 格式： <input type=password size=显示字符个数 name=字段名 maxlength=最大字符个数> 4.单选按钮 格式： <input type=radio name=字段名 value=默认值 checked> 5．提交按钮与取消按钮 格式： <input type=submit value=按钮文字> <input type=reset value=按钮文字> 例：设计如下表单：  <HTML> <Head> <title>我的个人网页</title> </head> <body background=2.gif> <center><font face=隶书 size=6>客户调查表</font></center> <form method=post> <table align=center> <tr> <td>职业 <td><input type=text name=zy size=12 maxlenth=16 value=IT行业> </tr> <tr> <td>QQ号 <td><input type=password name=qq size=12 maxlenth=12> </tr> <tr> <td colspan=2>你对本站点提供的服务:</td> </tr> <tr> <td colspan=2> <input type=radio name=fw value=bad>不满意 <input type=radio name=fw value=common checked>比较满意 <input type=radio name=fw value=good>很满意 </td></tr> <tr> <td><input type=submit value=提交></td> <td><input type=reset value=重填></td> </tr> </table> </form> </body> </html> 【课后小结】 跑马灯效果是一种常用动态效果，要记住marquee标志中相应属性及意义。HTML中制作的表单是一种静态形式，要处理表单数据并返回表单处理信息，必须与站点服务器端程序配合使用。