《网页设计与制作教程HTML+CSS+Bootstrap）》课件 项目六 创建网站“美食交流”.pptxVIP

项目六创建美食交流网;项目简介

网页除了能提供给用户各种类型的信息资源外，还承担着一项重要的功能，就是收集用户的信息，并根据用户的信息提供反馈。这种收集信息和反馈信息的过程就是网页的交互过程。

本章将详细介绍网页中的各种表单元素，以及Spry表单验证的方法等相关知识，实现简单的人与网页之间的交互。;项目目标

本项目以《美食交流》网站开发为例，介绍表单网页中的综合应用。要求熟悉各种表单元素，掌握在网页中插入表单、表单元素的方法，掌握在网页中验证表单的方法。;工作任务

根据《美食交流》网站设计与制作的要求，基于工作过程，以任务驱动的方式，应用表单组建实现用户与网页的交互功能。

（1）创建表单

（2）验证表单;任务一构建表单

通过以下三个步骤的操作实践来掌握在网页中创建表单的方法，初步完成《美食交流》网站首页的制作，网页效果如图所示：

1、布局网页；

2、插入表单；

3、编辑表单；

;任务目标

按照网站需求分析，建立站点文件夹，并在Dreamweaver2021中建立站点，设计制作首页文件，以及掌握在首页中设置表单区域、插入表单元素、设置表单元素的方法。;知识准备

知识准备一表单;知识准备二表单控件;任务实施

步骤一布局网页;任务实施

步骤二插入表单;任务实施

步骤三编辑表单;任务二验证表单

通过以下两个步骤的操作实践掌握JavaScript在表单验证中的应用，完善《美食交流》网站“首页”页面的制作，完成“提交”页面的制作。提交页面效果如图所示：

1、新建“提交”页面；

2、验证“首页”表单；

;任务目标

按照美食交流网站的需求分析，设计制作提交网页，在首页中对表单的表单域值进行验证，以实现表单域值的准确性。初步掌握对表单域值进行验证的方法。;知识准备

知识准备一JavaScript常用全局对象

1、isFinite()函数，用于检查其参数是否是无穷大。

2、isNaN()函数，用于检查其参数是否是非数字值。;知识准备二Windows常用对象方法

1、alert()方法，用于显示带有一条指定消息和一个OK按钮的警告框。

2、close()方法，用于关闭浏览器窗口。

3??open()方法，用于打开一个新的浏览器窗口或查找一个已命名的窗口

;知识准备三JavaScript表单验证典型案例

长度限制

两次密码输入是否相同

表单项内容不能为空

表单项内容只能为数字

验证邮箱格式;任务实施

步骤一新建“提交”页面

步骤二验证“首页”表单