《网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源3HTML高级应用电子课件》由会员分享，可在线阅读，更多相关《网页设计与制作教学课件作者HTML+CSS+JavaScript张洪斌教学资源3HTML高级应用电子课件（81页珍藏版）》请在金锄头文库上搜索。
1、,网页设计与制作课程开发组制作,主讲人：阚宝朋 管曙亮,本章要点,单元1 HTML高级应用,任务1 表单设计 任务2 窗口框架的使用 任务3 多媒体页面设计,引例描述,学习计划： 第一步：通过表单技术完成订单信息、作品评价交互页面。 第二步：使用框架技术制作一套新的网页布局方案。 第三步；同时添加一些动感的多媒体元素，制作动感的多媒体页面。,任务1：表单设计,【任务陈述】 为了加强与客户的沟通，本任务将通过HTML单信息页面、作品评价页面的设计。,任务1：表单设计,【知识准备】 3.1 表单的基本概念,一、表单简介 表单可以提供输入的界面，供浏览者输入数据，常见的应用如下：,（1）Web搜索
2、（2）问卷调查 （3）注册用户 （4）在线订购,任务1：表单设计,3.1 表单的基本概念,一、表单简介 表单建立步骤：,第一：决定要搜集的数据，即决定了表单需要搜集用户的那些数据。 第二：建立表单，根据第一步的要求选择合适的控件创建表单。 第三：设计表单处理程序：用于接受浏览者通过表单所输入的数据并将数据进行进一步处理。,任务1：表单设计,3.1 表单的基本概念,二、表单的定义 表单是页面上的一块特定区域，这块区域有一对标签定义 限定表单的范围 携带表单的相关信息,定义方法如下： 表单标签 该标签的主要作用是设定表单的起始位置，并指定处理表单数据程序的URL地址，表单所包含的控件就在与之间定义
3、。 基本语法： ,任务1：表单设计,3.1 表单的基本概念,二、表单的定义,处理程序-action 语法： 真正处理表单的数据脚本或程序在action属性里，这个值可以是程序或脚本的一个完整URL。 在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址形式例如发送E-mail等。,实例,任务1：表单设计,3.1 表单的基本概念,二、表单的定义,表单的名称-name 语法： 名称属性name用于给表单命名。这一属性不是表单的必需属性，但是为了防止表单信 息在提交到后台处理程序时出现混乱，一般
4、要设置一个与表单功能符合的名称，例如注册页面的表单可以命名为register。不同的表单尽量不用相同的名称，以避免混乱。 表单名称中不能包含特殊符号和空格。,实例,任务1：表单设计,3.1 表单的基本概念,二、表单的定义,传送方法-method 语法： 表单的method属性用来定义处理程序从表单中获得信息的方式，可取值为get或post， 它决定了表单中己收集的数据是用什么方法发送到服务器的。 method=get：使用这个设置时，表单数据会被视为CGI或ASP的参数发送，来访者输入的数据会附加在URL之后，由用户端直接发送至服务器，速度上会比post快，缺点是数据长度不能够太长。 meth
5、od=post：使用这种设置时，表单数据是与URL分开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度上会比get慢。 在没有指定method的情形下，一般都会视get为默认值。,实例,任务1：表单设计,3.1 表单的基本概念,二、表单的定义,目标显示-target 语法： target属性用来指定目标窗口的打开方式。表单的目标窗口往往用来显示表单的返回信息，例如是否成功提交了表单的内容、是否出错等。 目标窗口的打开方式包含4个取值：_blank、_parent、 _self和_top。其中_ blank是指将返回的信息显示在新打开的窗口中；_parent
6、是指将返回信息显示在父级的浏览 器窗口中；_self则表示将返息显示在当前浏览器窗口；_top表示将返回信息显示在顶级浏览 器窗口中。,实例,任务1：表单设计,3.1 表单的基本概念,二、表单的定义,编码方式-enctype 语法： 表单中的enctype参数用于设置表单信息提交的编码方式。 编码方式的取值见下表。,实例,任务1：表单设计,3.2 表单元素,一、添加表单控件,按照控件的填写方式可以分为输入类和菜单列表类。输入类的控件一般以input标记开始，说明这一控件需要用户的输入； 菜单列表类则以select开始，表示用户需要选择。 按照控件的表现形式则可以将控件分为文本类、选项按钮、菜单
7、等几种。 在HTML表单中，input参数是最常用的控件标记，包括最常见的文本域、按钮都是采 用这个标记。 这个标记的基本语法是： ,实例,任务1：表单设计,3.2 表单元素,一、添加表单控件,在这里，“控件名称”是为了便于程序对不同控件的区分，而“type”参数则是确定了这一个控件域的类型。,任务1：表单设计,3.2 表单元素,一、添加表单控件,基本语法： 常用属性： name：控件名称 type：控件的类型，如radio、text等 align：指定对齐方式，可取top、bottom、middle size：指定控件的宽度 value：用于设定输入默认值 maxlength：在单行文本的时
8、候允许输入的最大字符数 src：插入图像的地址,任务1：表单设计,3.2 表单元素,二、输入类表单控件,（1）单行文本输入框（input type=“text”） 基本语法： ,实例,单行文本输入框属性,任务1：表单设计,3.2 表单元素,二、输入类表单控件,（2）密码输入框（input type=“password”） 语法： 在网页中有一种特殊的文本字段，它在页面中的效果和文本字段相同，但是当用户输 入文字时，这些文字只显示“*”，这种控件称为密码域。,实例,任务1：表单设计,3.2 表单元素,二、输入类表单控件,（3）单选按钮（input type=“radio”） 语法： 单选按钮用来
9、让浏览者进行单一选择，页面中以圆框表示。在单选按钮 控件中必须设置参数value的值。而对于一个选择中的所有单选按钮来说，往往要设定同样 的一个名称，这样在传递时才能更好地对某一个选择内容的取值进行判断。 在该语法中，checked属性表示这一单选按钮默认被选中，而在一个单选按钮组中只能有一项单选按钮控件设置为checked。value则用来设置用户选中该项目后，传送到处理程序中的值。,实例,任务1：表单设计,3.2 表单元素,二、输入类表单控件,（4）复选框（input type=“checkbox“） 语法： 在网页设计中，有一些内容需要让浏览者以选择的形式填写，而选择的内容可以是一 个，
10、也可以是多个，这时就需要使用复选框控件checkbox。复选框在页面中以一个方框来表示。 在该语法中，checked参数表示该选项在默认情况下已经被选中，一组选择中可以有多个复选框被选中。,实例,任务1：表单设计,3.2 表单元素,二、输入类表单控件,（5）普通按钮 语法： 在网页中按钮也很常见，在提交页面、恢复选项时常常用到。普通按钮一般情况下要配合脚本来进行表单处理。 value的取值就是显示在按钮上面的文字，而在button中可以通过添加onclick参数来实现一些特殊的功能，onclick参数是设置当鼠标按下按钮时所进行的处理。,实例,任务1：表单设计,3.2 表单元素,二、输入类表单
11、控件,（6）提交按钮 语法： 提交按钮是一种特殊的按钮，不需要设置onclick参数，在单击该类按钮时可以实现表单内容的提交。 value同样用来设置按钮上显示的文字。,实例,任务1：表单设计,3.2 表单元素,二、输入类表单控件,（7）重置按钮（input type=“reset“） 语法： 在页面中还有一种特殊的按钮，称为重置按钮。这类按钮可以用来清除用户在页面中 输入的信息。 value同样用来设置按钮上显示的文字。,实例,任务1：表单设计,3.2 表单元素,二、输入类表单控件,（8）图片式提交按钮（input type=“image”） 语法： type=“image“相当于input
12、 type=“submit“，不同的是，input type=“images“”以一个图片作为表单的按钮；src属性表示图片的路径；alt属性表示鼠标在图片上悬停时显示的说明文字；name为按钮名称。,实例,任务1：表单设计,3.2 表单元素,二、输入类表单控件,（9）隐藏域（input type=“hidden“） 语法： input type=“hidden“ name=“隐藏域名称“ value=“提交的值“ 表单中的隐藏域主要用来传递一些参数，而这些参数不需要在页面中显示。当浏览者提交表单时，隐藏域的内容会一起提交给处理程序。,实例,任务1：表单设计,3.2 表单元素,二、输入类表单控
13、件,（10）文件域（input type=“image”） 语法： 文件域在上传文件时常常用到，它用于查找硬盘中的文件路径，然后通过表单将选中的文件上传。 在设置电子邮件的附件、上传头像、发送文件时常常会看到这一控件。,实例,任务1：表单设计,3.2 表单元素,三、菜单列表类表单控件,列表项 基本语法： 选项1 选项2 通过和标签可以设计页面中的下拉列表框和列表框效果。,任务1：表单设计,3.2 表单元素,三、菜单列表类表单控件,下拉菜单 基本语法： 选项显示内容 选项显示内容 选项值是提交表单时的值，而选项显示的内容才是真正在页面中显示的选项。selected表示该选项默认情况下是选中的，一
14、个下拉菜单中只有一项默认被选中。,实例,任务1：表单设计,3.2 表单元素,三、菜单列表类表单控件,列表框标签属性,实例,任务1：表单设计,3.2 表单元素,四、文本域标签,文本域标记-textarea 基本语法： 可以添加多行文字，从而可以输入更多的文本。 在该语法中，rows是指文本域的行数，也就是高度值，当文本内容超出这一范围时会出现滚动条；cols设置文本域的列数，也就是其宽度。,实例,任务1：表单设计,【任务实施】 一、订单信息表单设计HTML代码编写,实例,任务1：表单设计,二、作品评价表单设计HTML代码编写,实例,任务1：表单设计,【任务拓展】 一、表单边框,实例,基本语法：
15、说明文字 可以使用标签将指定的表单字段框起来，还可以使用 标签在方框的左上角填写说明文字。,任务1：表单设计,二、使用Dreamweaver进行留言表单设计,留言页面表单设计效果图,任务2：窗口框架的使用,【任务陈述】 重复出现的内容被固定下来，每次浏览者发出对页面的请求时，只下载发生变化的部分，其他子页面保持不变，必然能给浏览者带来方便，节省时间。 本任务，将仍以庄辉个人网站为例使用框架技术重新完成站点。,任务2：窗口框架的使用,【知识准备】,3.3 框架,一、框架的含义与基本构成 框架实际上有两部分组成，即框架集与框架。 框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同
16、的网页。 所有的框架标签要放在一个HTML文档中，HTML页面的标签被框架集标签所取代，然后通过的子窗口标签定义每一个子窗口和子窗口页面属性。 最常见的框架结构就是网站的导航条作为一个单独的框架窗口，当用户查看具体的内容时，导航条窗口保持不变，这就为用户的浏览提供了方便。,任务2：窗口框架的使用,3.3 框架,一、框架的含义与基本构成,框架的基本结构 基本语法： . Frame子框架的src属性的每个URL值指定了一个HTML文件。,任务2：窗口框架的使用,3.3 框架,二、框架集 框架集就是用来定义这一HTML文件为框架模式，并设定视窗如何分割的文件。 通俗一点地说，框架集就是存放框架结构的文件，也是访问框架文件的入口文件。 框架集基本属性：,任务2：窗口框架的使用,3.3 框架,二、框架集,（1）左右分割窗口属性cols 语法： 将窗口分为40%，40%，20% 将300像素意外的两个窗口平均分配 将窗口分为三等
