湖北职业技术学院：《网页设计》第十五讲 HTML中表单网页设计(一)

教学项目十五HTML中表单网页设计( 【教学内容】 讲解HTM中头部标志和简单表单制作 教学目的】 使学生了解头部标志功能和掌握简单表单网页制作 教学重点】 HTML中表单元素标志与属性 【教学难忘】 HTM中表单元素标志与属性 教学方式】 案例分析式、项目教学 【教学参考 1.杨浩著 清华大学出版社 2.〉 电脑报社出版 3.TML网页制作教程材义语编著铁道出版社 4.HTML基础与实例程耀编著电子工业出版社

教学项目十五 HTML中表单网页设计(一) 【教学内容】 讲解HTML中头部标志和简单表单制作 【教学目的】 使学生了解头部标志功能和掌握简单表单网页制作 【教学重点】 HTML中表单元素标志与属性 【教学难点】 HTML中表单元素标志与属性 【教学方式】 案例分析式、项目教学 【教学参考】 1．> 杨浩著 清华大学出版社 2．> 电脑报社出版 3．TML网页制作教程 材义语编著铁道出版社 4．HTML基础与实例 程耀编著电子工业出版社

【新课】 HTML头部标志 在网页对应的HTML代码中,在头部标志之 间可以插入部分标志,包含当前文档的有关信息 主要的标志: 设定标题 link>设定外部的样式表文件 设定CSS层叠样式表单 设定文档本身的信息

【新课】 一、HTML头部标志 在网页对应的HTML代码中，在头部标志 之 间可以插入部分标志，包含当前文档的有关信息。 主要的标志： 设定标题 设定外部的样式表文件 设定CSS层叠样式表单 设定文档本身的信息

Meta标志的功能是定义页面中的信息,提供文档的关键字 作者、描述等多种信息,这此信息不会在浏览器页面中显示。在 中可以包括任意数量的标志 标志的属性: http-equiv:生成一个HTTP标题域; Content:定义的相关描述项对应的取值; Name:相关描述项的名称

Meta标志的功能是定义页面中的信息，提供文档的关键字、 作者、描述等多种信息，这此信息不会在浏览器页面中显示。在 中可以包括任意数量的标志。 标志的属性： http-equiv: 生成一个HTTP标题域； Content: 定义的相关描述项对应的取值； Name:相关描述项的名称

例1:在 frontpage中查看网页的头部信息 Microsoft Front Page- D: \Front Page \html sample 文件(E)编辑()查看(Y)插入(I)格式@)工具(T)表格(△)框架(R)窗口(帮助(B 口··日助回舀國曲,-回恒他们② B/ 视图文件夹列表 index. hta 国D: Frontpage chtml> □ eleven 口 +口 fifteen meth=正FOy text/html: charset=gb2312"> 口 fourteen =rm:: +++ 国t 口 thirteen +口第十讲 超链接 a02.htm 03 自08ht 11.g 图2.gif a4.htm 364.gif 自7.htm 自a4.htm 管通入■L预览/1 14,列 K】三传输方式:28.8,时间:0钞 开始。精品课课件 s Microsoft Pow. CH画223:08

例1：在frontpage中查看网页的头部信息

分析: metahttp-equiv=content-type content=text/html; charset=gb2312"> 定义网页中显示的信息对应的字符集为简体中文 <meta name=generator"content="microsoft frontpage 4.0 定义网页默认的编辑工具为 frontpage软件

定义网页中显示的信息对应的字符集为简体中文; 定义网页默认的编辑工具为frontpage 软件. 分析:

例2设定自动刷新 aD: \Front Page html sample\index. htm- Microsoft Internet Explorer □回区 文件)螨()查着()收燕()工具(m)帮助( ⊙后:回搜索收夫的媒的总·品图·回当目甲③ 地址①)·4D:\ Front Page\htm1 sample\index. htm ∈输入中文,直接搜索y 本网页10秒钟自动刷新 包完毕 我的电脑 开始精品课件回ax0ot, K Microsoft F.,3D: FrontA., Macromedia cH□ 23:51

例2.设定自动刷新

例3设定自动跳转网页 aD: Front Page \html sample\exam2. htm- Microsoft Internet Explorer 文件(E)编锋(E)查看①Y數燕(4)工具(帮助(B ⊙后退··回经搜索次收失的媒体的③,口日9甲③ 地址①)·D:\ Front Page\htm12ap1\exam2htm ←输入中了,直接搜索 请等待,正在登录考试网论坛 完毕 精品课课件 M⊥ crosoft R Microsoft F f D: \FrontPag e Macromedia

例3.设定自动跳转网页

表单网页的设计 1.表单标志 与定义表单的开始与结束,常用的属性有: Name:表单的名称 action:指定处理表单中提交数据的网页文件 method:指定表单中数据的传输方式 method=get将表单数据附在URL后面,无保密性 Method=post将表单数据包含在表单的主体中,与表单一起传 送到服务器端处理程序

二、表单网页的设计 1．表单标志 格式： 与 定义表单的开始与结束，常用的属性有： Name:表单的名称 action: 指定处理表单中提交数据的网页文件 method: 指定表单中数据的传输方式 method=get 将表单数据附在URL后面，无保密性 Method=post 将表单数据包含在表单的主体中，与表单一起传 送到服务器端处理程序

2.单行文本框 格式: 3.密码域 格式: input type=password size=显示字符个数 name=字段名 maxlength=最大字符个数>

2． 单行文本框 格式： 3.密码域 格式：

4单选按钮 格式: 5.提交按钮与取消按钮 格式: input type= reset value=按钮文字

5．提交按钮与取消按钮 格式： 4.单选按钮 格式：