【网页设计教案】HTML中表单网页设计一.docVIP

教学项目十五 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 brbrbr centermarquee loop=3 direction=right behavior=alternate bgcolor=yellow width=400 欢迎光临我的个人网站/marquee/center /body /html 例二、在网页中设定图片的垂直方向滚动效果 html Head title我的个人网页/title /head body bgcolor=#00ff11 brbrbr centermarquee loop=-1 direction=down behavior=scroll width=180 height=600 img src=64.gif/marquee/center /body /html 例三．在网页中同时设定文字与图片的滚动效果。 html head title1234/title /head body background=8.jpg centermarquee direction=right behavior=scroll width=500 height=50 bgcolor=yellow font face=隶书 size=5Hi，欢迎登录我们的家园：，惊喜多多.../font/marquee/center brbr 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 centerfont face=隶书 size=6客户调查表/font/center form method=post table align=center tr td职业 tdinput type=text name=zy size=12 maxlenth=