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

项目六

创建美食交流网项目简介网页除了能提供给用户各种类型的信息资源外，还承担着一项重要的功能，就是收集用户的信息，并根据用户的信息提供反馈。这种收集信息和反馈信息的过程就是网页的交互过程。本章将详细介绍网页中的各种表单元素，以及Spry表单验证的方法等相关知识，实现简单的人与网页之间的交互。项目目标本项目以《美食交流》网站开发为例，介绍表单网页中的综合应用。要求熟悉各种表单元素，掌握在网页中插入表单、表单元素的方法，掌握在网页中验证表单的方法。工作任务根据《美食交流》网站设计与制作的要求，基于工作过程，以任务驱动的方式，应用表单组建实现用户与网页的交互功能。（1）创建表单（2）验证表单任务一构建表单通过以下三个步骤的操作实践来掌握在网页中创建表单的方法，初步完成《美食交流》网站首页的制作，网页效果如图所示：1、布局网页；2、插入表单；3、编辑表单；

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

表单属性值功能描述actionurl规定当提交表单时向何处发送表单数据,它可以是一个URL地址或一个电子邮件地址。methodget或post指明提交表单的HTTP方法。post方法在表单的主干包含名称/值对并且无需包含于action特性的URL中；get方法把名称/值对加在action的URL后面并且把新的URL送至服务器。enctypecdata指明用来把表单提交给服务器时(当method值为"post")的互联网媒体形式。这个特性的缺省值是"application/x-www-form-urlencoded"。TARGET_blank_self_parent_topframename指定提交的结果文档显示的位置：

_blank表示在一个新的、无名浏览器窗口调入指定的文档；_self表示在指向这个目标的元素的相同的框架中调入文档；_parent表示把文档调入当前框的直接的父FRAMESET框中；这个值在当前框没有父框时等价于_self；_top表示把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架)；Framename表示在指定框架中调入文档。novalidatenovalidate如果使用该属性，则提交表单时不进行有效性验证。nameform_name用于设定表单的名称。accept-charsetcharset_list规定服务器可处理的表单数据字符集，这个属性的值是一个字符编码列表，使用空白或者逗号分割，目的是提示浏览器限制用户输入的数据，以免不能被服务器处理的数据被输入。知识准备二表单控件任务实施步骤一

布局网页任务实施步骤二

插入表单任务实施步骤三

编辑表单任务二

验证表单通过以下两个步骤的操作实践掌握JavaScript在表单验证中的应用，完善《美食交流》网站“首页”页面的制作，完成“提交”页面的制作。提交页面效果如图所示：1、新建“提交”页面；2、验证“首页”表单；任务目标按照美食交流网站的需求分析，设计制作提交网页，在首页中对表单的表单域值进行验证，以实现表单域值的准确性。初步掌握对表单域值进行验证的方法。知识准备知识准备一JavaScript常用全局对象1、isFinite()函数，用于检查其参数是否是无穷大。2、isNaN()函数，用于检查其参数是否是非数字值。知识准备二

Windows常用对象方法1、alert()方法，用于显示带有一条指定消息和一个OK按钮的警告框。2、close()方法，用于关闭浏览器窗口。3、open()方法，用于打开一个新的浏览器窗口或查找一个已命名的窗口知识准备三Java