静态网页设计与制作 教学课件 作者 胡汉辉 模块六.pptVIP

6.4.2 利用表单制作“我的分享”板块 图6-124 进行字符长度检查 5)输入如图6-125所示代码，对“邮箱”验证是否包含@符号。 图6-125 进行“@”字符的检查 6)输入如图6-126所示代码，对“内容”进行字符长度验证。 6.4.2 利用表单制作“我的分享”板块 图6-126 进行字符长度检查 6.5拓展训练 为“我的个人网站”增加会员登录、会员注册和会员留言页面 设计要求设计思路参考效果 设计要求  设计思路  参考效果 图6-127 会员注册页面 参考效果 图6-128 会员留言页面 6.3.2 利用CSS样式美化页面 正文_Embed_343.png 6.3.2 利用CSS样式美化页面 正文_Embed_344.png 图6-92 “方框”样式属性 图6-93 应用“mid”样式5)新建“title”样式。 6.3.2 利用CSS样式美化页面 正文_Embed_345.png 6.3.2 利用CSS样式美化页面 正文_Embed_346.png 图6-94 title的“类型”样式属性 图6-95 title的“背景”样式属性 6.3.2 利用CSS样式美化页面 正文_Embed_347.png 6.3.2 利用CSS样式美化页面 正文_Embed_348.png 图6-96 title的“方框”样式属性 图6-97 效果比较1)新建文本字段的CSS样式。 6.3.2 利用CSS样式美化页面 正文_Embed_349.png 6.3.2 利用CSS样式美化页面 正文_Embed_350.png 图6-98 textfield的“类型”样式属性 图6-99 textfield的“方框”样式属性 6.3.2 利用CSS样式美化页面 正文_Embed_351.png 图6-100 textfield的“边框”样式属性2)新建列表/菜单的CSS样式。 6.3.2 利用CSS样式美化页面 正文_Embed_352.png 图6-101 menu的“类型”样式属性 6.3.2 利用CSS样式美化页面 正文_Embed_353.png 6.3.2 利用CSS样式美化页面 正文_Embed_354.png 图6-102 menu的“背景”样式属性 图6-103 menu的“方框”样式属性3)新建按钮的CSS样式。 6.3.2 利用CSS样式美化页面 正文_Embed_355.png 正文_Embed_356.png 图6-104 button的“背景”样式属性 图6-105 button的“方框”样式属性 6.3.2 利用CSS样式美化页面 正文_Embed_357.png 图6-106 button的“边框”样式属性 6.4任务四 校验表单内容—— 创建“驴友留言”页面 任务分析相关知识任务实施6.4.1 制作“驴友留言”板块6.4.2 利用表单制作“我的分享”板块 任务分析 图6-107 “驴友留言”页面效果 相关知识 1.文本区域(Textarea)文本区域是可以进行多行输入的表单要素，是网页文件中插入较长文本时使用的表单形式。使用文本区域就可以在网页文件中先显示其中的一部分内容来节省空间，同时用户想要看未显示部分的内容时可以通过滚动条来完成。网页中最常见的则是加入会员时显示的“服务条款”。 图6-108 文本区域的“属性”面板 2.文件域(Filefield) 相关知识 利用文件域可以在表单文档中制作文件附加项目。选择系统内的文件进行添加后，单击【提交】按钮时就会和表单内容一起提交。文件域主要使用在公告栏中添加文件或者图像一起上传的时候。3.表单校验 相关知识 在一个成熟的Web应用系统中，经常会使用表单来获取用户的一些信息，如注册信息、在线调查、意见反馈等。为了防止垃圾信息，甚至是空信息条目被收集，对于有些信息项目，需要开发人员按照实际要求进行检验和过滤，如果填写不正确就需要提醒用户进行再次填写，包括字符非空检查、字符长度检查、密码一致检查、邮箱填写格式检查等，这些都是通过表单校验完成。文本字段、文本域是利用校验最多的表单元素。 正文_Embed_360.png 图6-109 JavaScript一般语法形式 相关知识 图6-110 添加“检查表单”行为 相关知识 正文_Embed_362.png 相关知识 正文_Embed_363.png 图6-111 “检查表单”对话框 图6-112 完成检查表单行为 任务实