中职高教版高二《网页设计与制作》任务2.2 制作网页登录页面课件

项目2 制作网站注册登录模块 ——任务2.2 制作网页登录页面 任务2.2 制作网页登录页面 目录 01 活动1 实现登录页面布局 02 活动2 实现登录页面功能 01 活动1 实现登录页面布局 任务2.2 制作网页登录页面 活动1 实现登录页面布局 账号输入框:用于采集用户账号信息。 密码输入框：用于采集用户的密码信息。 登录按钮：用于将账号和密码信息提交到服务器。 其他登录方式：用户登录网站的其他选择。 忘记密码：用户用于获取密码的途径。 立即注册：新用户注册会员的途径。 电商网站登录页面 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动1 实现登录页面布局 【登录页面的主要元素】 （1）创建站点并新建文件。 （2）插入表格。 （3）插入图像。 （4）网页预览。 【作业步骤】 活动1 实现登录页面布局 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动1 实现登录页面布局 【作业步骤】 活动1 实现登录页面布局 效果图 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动1 实现登录页面布局 选中需要编辑的图像，可以在软件界面下方的属性面板中查看到该图像的相关属性，并进行修改。 【小助手】图像属性面板 活动1 实现登录页面布局 图像路径 裁剪、优化图像 图像属性面板 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动1 实现登录页面布局 登录模块设计与实现 功能：本模块主要用于对用户身份进行鉴别。用户通过表单提供用户名和密码信息，系统根据用户提供的登录信息对用户进行查询鉴别。 如果身份合法，则用户可进入商品页面。 输入操作：用户名、密码。 【知识链接】 活动1 实现登录页面布局 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动1 实现登录页面布局 登录模块设计与实现 对应处理： 1.输入用户的登录信息：在页面提供的表单处输入用户的用户名和密码信息，点击“登录”按钮提交表单数据信息。 也可点击“注册”按钮，注册新用户。 2.用户身份进行验证：连接数据库，打开user集合，检验用户登录信息。以输入的“用户名”数据为查询条件来查看用户是否存在，如果存在，继续检验其输入密码是否正确，密码和用户名都正确，则进入商品展示页面；如果用户名不存在或密码不正确，则给出相应的提示。 【知识链接】 活动1 实现登录页面布局 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动1 实现登录页面布局 02 活动2 实现登录页面功能 任务2.2 制作网页登录页面 表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息。 当访问者在 Web 浏览器中显示的 Web 表单中输入信息，然后单击提交按钮时，这些信息将被发送到服务器，服务器中的服务器端脚本或应用程序会对这些信息进行处理。服务器向用户（或客户端）发回所处理的信息或基于该表单内容执行某些其他操作，以此进行响应。 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动2 实现登录页面功能 【表单】 活动2 实现登录页面功能 表单处理流程 活动2 实现登录页面功能 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动2 实现登录页面功能 （1）认识表单对象。 （2）创建站点，新建文件。 （3）插入表格。 （4）插入表单域。 （5）嵌套表格。 （6）插入表头图像。 （7）插入文本域。 （8）插入图像域。 （9）插入按钮。 （10）网页预览。 【作业步骤】 活动2 实现登录页面功能 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动2 实现登录页面功能 【作业步骤】 活动2 实现登录页面功能 效果图 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动2 实现登录页面功能 1.文本域。 文本域有两种，一种是文本字段，二是文本区域。文本字段是在表单域中插入一个可以输入一行文本的文本域；文本区域是在表单域中插入一个可以输入多行文本的文本域。 【小助手】登录页面中出现的表单对象及其作用 文本域的插入方法 活动2 实现登录页面功能 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/活动2 实现登录页面功能 1.文本域 单击文本域，可以在属性面板中设置字符宽度、最多字符数、类型等。字符宽度可用来控制文本域的宽度，最多字符数限制了文本域中输入字符的数量，类型可以实现文本域及文本区域的切换，若类型设置为“密码”，可以使文本域中的文本隐藏，以“●”的形式出现。 【小助手】登录页面中出现的表单对象及其作用 文本域的插入方法 活动2 实现登录页面功能 项目2 制作网站注册登录模块/任务2.2 制作网页登录页面/