第5章Web表单程式设计模型
第五章表单程序设计概论
第五章表单程序设计§1 面向对象程序设计一、对象在面向对象程序设计中，对象是将数据和操作结合在一起的数据结构，是程序设计的基本单元。
•属性：描述对象的状态和特征的值。
•方法：描述对象行为的操作。
•事件：对象能够识别的动作。
事件发生后，对象自动执行处理事件的操作（事件过程）。
二、类类是对具有共同特征和行为的对象的抽象描述。
•封装：隐藏对象的内部数据或操作细节。
•继承：基于现有的类（父类）创建新类（子类），子类保持了父类的属性和行为，但增加了新的功能。
•多态：不同对象对同一消息具有不同的反应能力。
§2 对象的操作一、对象的引用在Visual FoxPro中，引用和操作对象必须标识出对象和与之关联的容器层次。
Form1Command1 Optiongroup1 Option1Option2Grid1 Column1Text1Header1Column2Text1Header1Myform1.scx1. 绝对引用从容器的最高层开始，提供完整容器层次来引用对象。
[e.g. 5-1]在表单Myform1.scx中绝对引用按钮Command1。
mand12. 相对引用从容器层次中的某个对象开始，提供完整容器层次来引用对象。
引用关键字说明This当前对象Thisform包含当前对象的表单Thisformset包含当前对象的表单集Parent对象的上一层容器对象[e.g. 5-2]在表单Myform1.scx中相对引用对象。
Form1Command1 Optiongroup1 Option1Option2Grid1 Column1Text1Header1Column2Text1Header1mand1 Thisfrom.Optiongroup1.Option1 Thisfrom.Grid1.Column1.Text1二、设置属性对象的属性既可以在设计时使用属性窗口设置，也可以在程序运行时使用赋值命令设置。
web前端开发表单课程设计
web前端开发表单课程设计一、课程目标知识目标：1. 学生能理解表单在Web前端开发中的重要性，掌握表单的基本结构。
2. 学生能掌握常用的表单元素及其属性，并了解其在不同浏览器中的兼容性。
3. 学生能学会使用HTML和CSS对表单进行布局和美化，提高用户填写体验。
技能目标：1. 学生能独立完成一个完整、功能齐全的表单页面编写，包括表单元素、布局和样式。
2. 学生能通过运用JavaScript和jQuery等前端框架，实现表单的验证和数据处理。
3. 学生能掌握基本的表单提交方式，了解前后端数据交互的基本原理。
情感态度价值观目标：1. 学生通过学习表单制作，培养细心、严谨的编程习惯。
2. 学生在学习过程中，学会合作、分享，提高团队协作能力。
3. 学生能认识到Web前端开发在互联网行业中的广泛应用，激发学习兴趣，树立职业规划意识。
课程性质分析：本课程为Web前端开发基础课程，重点在于培养学生的实际动手能力和解决问题的能力。
通过学习表单制作，使学生掌握Web前端开发的基本技能，为后续学习打下坚实基础。
学生特点分析：学生为初中或高中年级，具备一定的计算机操作能力和逻辑思维能力。
学生对新鲜事物充满好奇，但注意力容易分散，需要通过实际案例和互动教学激发学习兴趣。
教学要求：1. 教学内容要紧密结合实际，以案例为主线，引导学生掌握表单制作的各项技能。
2. 教学过程中注重启发式教学，培养学生的创新意识和解决问题的能力。
3. 强化实践教学，让学生在实践中掌握知识，提高技能。
二、教学内容1. 表单基础概念：介绍表单的定义、作用及其在Web页面中的应用场景。
- 理解表单的结构与组成- 掌握表单的常用属性和方法2. 表单元素：学习各种表单控件，如输入框、单选框、复选框、下拉菜单等。
- 熟悉各元素的使用方法及其属性设置- 了解不同表单元素的默认行为和样式3. 表单布局与美化：运用HTML和CSS进行表单布局设计，实现美观的表单界面。
web程序设计第5章
网页布局和框架
设置列宽度
在“布局”模式中，可以为表格的列指定一个特定的宽度，或者 让其自动伸展以填充浏览器窗口尽量大的部分。也可以使用间隔图像 为列指定一个最小宽度。
1.使用间隔图像
若要将列的最小宽度限制到某一特定值，可在该列中插入一个间 隔图像。具体执行步骤如下： （1）单击列标题菜单，选择“添加间隔图像”命令 （2）如果尚未给站点设置间隔图像，将打开“选择占位图像”对话 框。 （3）如果选择“创建占位图像文件”单选按钮，将打开“保存间隔 图像文件为”对话框，指定间隔图像文件名和存储该文件的文件夹， 完成后单击“保存”按钮。 （4）间隔图像插入到列中，该图像是不可见的，列的底部会显示双 横线以表明它包含一个间隔图像 。
网页布局和框架
4. 改变带框架的文档 改变带框架的文档就是改变在框架中显示的 文档，用户可以将新内容插入框架的文档中，或 者在框架中显示新的文档。 操作步骤如下： （1）将光标放置在右框架中。 （2）选择“文件”菜单中的“在框架中打开”命 令，打开“选择HTML文件”对话框。 （3）选择要在右框架中显示的文档，然后单击 “确定”按钮，该文档随即显示在框架中。 （4）如果要使该文档成为在浏览器中打开框架集 时在框架中显示的默认文档，保存该框架集。
网页布局和框架
3. 列设置为固定宽度
若要将列设置为固定宽度，执行以下步骤： （1）选择列中的一个单元格，打开“属性”面 板。 （2）选择“固定”单选按钮，在后面的文本框 中输入单元格（列）的宽度。
网页布局和框架
5.5 设置布局模式的首选参数
选择“编辑”菜单中的“首选参数”命令，打开“首选参数” 对话框，在“分类”列表中选择“布局模式”选项：
（2）将光标放在页面中要绘制布局表格的位置， 按下鼠标左键并拖动，在页面上绘制出布局表 格。
140701第5章 HTML5网页表单设计(定稿)
网页设计技术实用教程--从基础到前沿第5章HTML5网页表单设计（字数3万）参考文献：我chp6；陆chp4；格式类似我P73；目录5.1表单简介及应用案例5.2 表单主体设计---form 标记5.2表单主体设计（form）包括新增元素5.3表单输入域设计---input标记5.3 表单设计的相关属性包括新增属性input元素type属性的新增类型：电子邮件类型；搜索类型；URL类型；电话号码类型；数字类型；范围类型；日期类型；周类型；月份类型；时间类型；日期与时间类型；本地日期与时间类型；颜色类型；新增属性：form属性；formaction；formmethod；placeholder；autofocus；list；autocomplete；5.4 文本区与列表选择框设计--- textarea、select标记5.5标签与按钮设计---label、button标记5.6表单控件分组设计--- fieldset、legend标记5.7 HTML5表单设计前沿内容知识技术5.7.1 新增与改进的表单元素；HTML5表单新增与改进的元素5.7.2 新增与改进的表单属性；HTML5表单新增与改进的属性5.7.3 input域控件的type属性的新增与改进5.4 表单设计示例如果例子多，需要单独成节，可增加该节例子（见陆p46-59）按功能划分：input元素使用示例；form等属性示例；表单验证示例……5.8 使用DWCS5进行网页表单设计实例（薛凯7.3.5；对5.1节的案例用工具制作、设计）5.9本章小结5.10进阶学习5.11 思考与实践第5章HTML5表单设计本章导读：上一章我们学习了、了解了……网页中链接的设计。
而在网站注册或购物时不可或缺的元素就是表单，本章就引导大家读者学习表单的设计。
首先，通过一个案例的介绍，让大家领略了解表单在网站中的重要魅力作用，同时在读者建立起了对表单有了大概的初步感性认识印象后；接着通过理论与示例结合的方式，、详细具体讲解介绍表单主体及其内部各种标记和属性的知识；同时，紧跟技术的发展，讲述介绍HTML5表单设计前沿内容；如果有该节则加入此句有了在掌握了表单设计的基本知识、技术的理论储备准备之后，我们通过几个综合示例讲解表单设计中各种元素的实用方法，完成理论向实践的转变。
web程序设计设计表格
web程序设计设计表格
在web程序设计中，设计表格是一个常见的任务。
表格通常用
于展示和组织数据，使用户能够轻松地查看和比较信息。
在设计表
格时，有几个关键方面需要考虑：
1. 数据结构，首先，你需要确定你要在表格中显示的数据的结构。
这包括确定每列需要显示的数据类型（文本、数字、日期等）
以及数据之间的关系。
2. 表格布局，考虑表格的布局是很重要的。
你需要决定表格有
多少列和行，以及是否需要合并单元格或者添加分组等特殊布局。
3. 样式和格式，表格的样式和格式对用户体验至关重要。
你需
要考虑表格的颜色、字体、边框等外观属性，以确保表格清晰易读。
4. 响应式设计，在web程序设计中，响应式设计是必不可少的。
你需要确保你的表格能够在不同设备上（如电脑、平板和手机）上
显示良好，并且能够适应不同的屏幕尺寸。
5. 用户交互，最后，考虑用户与表格的交互。
你可能需要添加
排序、过滤和搜索功能，以便用户能够方便地浏览和操作表格中的数据。
总之，在设计web程序中的表格时，需要综合考虑数据结构、布局、样式、响应式设计和用户交互等多个方面，以确保最终的表格能够满足用户的需求并提供良好的用户体验。
第5章Web表单和Request对象-31页PPT精选文档
5.2.3 密码框
密码框的工作原理与文本框类似，只是当输 入数据时不明确显示，而是用*来代替。这样 一来，在一定程度上防止了密码外泄。密码 框主要运用在用户注册和登录界面中。
5.2.4 滚动文本框
普通文本框只能在一行上输入数据，输入的 数据比较有限。滚动文本框弥补普通文本框 的缺陷，它可以输入更多的数据，且可以换 行输入。在FrontPage中要插入滚动文本框可 以选择菜单【插入】→【表单】→【滚动文 本框】选项。如果需要设置滚动文本框的属 性，则可在插入的滚动文本框上单击鼠标右 键，选择“表单域属性”，出现“滚动支本 框属性”窗口。
使用滚动文本框要注意以下几点
⑴ 由于滚动文本框可输入的数据较多，当某一表单要使用滚 动文本框时，最好将Method属性设置为Post，若设置成Get， 则会受到传输数据量的限制，造成文字传输不完整。
⑵ 如果要在ASP程序中使用Response.Write方法显示滚动 文本框的内容（这儿所指的不是显示在滚动文本框上），特 别需要注意换行符。滚动文本框的换行符在VbScript脚本中 可使用常量VbCrlf（等于Chr(13)+Chr(10)）表示，只是它在 浏览窗口显示时并不体现换行。所以应该先将其转换成 HTML语言中的换行标记<P>或者<BR>。而如果是显示在滚 动文本框上，则不需要转换。
5.2.1 文本框
5.size属性 该属性控制文本框的宽度，使用时可根据需
要以字符数来指定size属性的值。 6.maxlength属性 该属性限制文本框输入字符的个数。例如，
想让用户输入6个数字的邮政编码，也就是不 让用户输入超过6个字符，这就要靠 maxlength来实现。
5.2.2 按钮
web表单设计技巧
web表单设计技巧在互联网时代，web表单已成为用户与网站交互的重要途径。
一个设计合理的web表单不仅能提高用户体验，还能有效提高网站转化率。
本文将为您详细介绍一些实用的web表单设计技巧。
一、明确表单目的在设计web表单之前，首先要明确表单的目的。
是为了收集用户信息、让用户注册、还是让用户提交反馈？明确目的后，可以有针对性地设计表单，去除不必要的字段，简化用户操作。
二、简化表单布局1.一列布局：将所有表单元素排列在一列中，适用于简单、短小的表单。
2.多列布局：将表单元素分为多列，适用于复杂、冗长的表单。
注意保持列数适中，避免过多列数导致页面杂乱。
3.步骤式表单：将复杂表单分为多个步骤，每个步骤只展示部分表单元素，降低用户填写难度。
三、优化表单元素1.标签：使用简洁明了的标签，让用户一眼就能看出表单项的含义。
2.输入框：根据输入内容类型，为输入框设置合适的宽度、高度和提示文字。
3.下拉菜单：尽量减少下拉菜单的选项数量，过长的下拉菜单会让用户感到困扰。
4.复选框和单选框：将复选框和单选框分组，并使用清晰的描述，便于用户理解。
四、提高表单可用性1.实时反馈：在用户填写表单时，对输入内容进行实时验证和反馈，如输入错误、格式错误等。
2.自动补全：对于常见的信息，如手机号、邮箱等，提供自动补全功能，减少用户输入负担。
3.保存草稿：对于复杂表单，提供草稿保存功能，让用户可以随时暂停填写，避免数据丢失。
4.进度提示：在表单提交过程中，显示进度提示，让用户了解当前进度，减少焦虑感。
五、视觉设计1.颜色：使用对比明显的颜色，突出重要表单元素。
2.字体：使用清晰易读的字体，避免使用过于花哨的字体。
3.空间：合理分配表单元素之间的间距，保持页面整洁。
4.动效：适当使用动效，如输入框获取焦点时的动画效果，提高用户体验。
总结：web表单设计是提高用户体验和网站转化率的关键环节。
通过以上技巧，相信您已经掌握了如何设计出既美观又实用的web表单。
web表单设计
通过流程提示或 者摘要菜单，帮 助用户产生对表 单的控制感
设计用户 确实知道 该怎么回 答的问题
尊重用户付出 的努力，恰当 使用错误消息
12 34
56
7
尽量少涉及敏 感或私人信息
确保表单简短好填 使用习惯用语
假如用户确实输错 了，尽量保存已填 内容，并在要求用 户输入最少的基础 上纠正问题。
2 怎么问 礼貌提问，降低社交损失
1 动作 降低出错频率的可用性测试
E方案表现不佳： 26%的人错误的点了 取消 更多的人犹豫不决
1 动作 好动作的标准
1、清晰的完成路径 2、主次动作有明显的视觉差异区分 3、防止用户重复操作
五大 元素
标签 输入框 动作
帮助文字
输入反馈
1 帮助文字 静态帮助
帮助文字的意义 静态帮助的几种方式、优点、缺点
3 设计细节 我们能做的就不要麻烦用户了
自动 判断 国家
灰色字提醒 自动判断区号
输入框
动作 帮助文字 输入反馈
1 输入框 输入框的类型
文本框
单选框
1 输入框 输入框的类型
复选框
下拉菜单
1 输入框 输入框的类型
文本区域
时间选择和其他控件
1 输入框 选择合适的输入框
1 输入框 输入框的长度
暗示
1 输入框 输入框的长度
1 输入框 输入组
1 输入框 弹性输入框
让人们能以希望的方式回答问题
设计 表单
问什么
怎么问
视觉呈现
2 怎么问 选问题的策略
卡洛琳.加勒特
Effortmark 公司可用性顾问 《好用的表单》、《用户界面设计与评估》合著者
2 怎么问 适时提问
web表单设计及代码
web表单设计及代码Web表单设计及代码Web表单设计是网站设计中非常重要的一个环节，好的Web表单设计可以提高网站的用户体验和交互性。
在设计Web表单时需要考虑用户的操作习惯和需求，同时也需要遵循一些设计规范和最佳实践。
下面介绍Web表单设计的一些要点和相关的代码实现。
1. 表单元素组合要合理在设计Web表单时，需要考虑表单元素的组合是否合理。
比如，将输入框和下拉列表组合在一起，可以有效地减少用户的输入时间和出错率；将单选按钮和复选框适当地组合，可以让用户更好地选择选项。
此外，还需要考虑表单的排版和布局，保证整个表单的美观和易于使用。
2. 表单验证要严格为了防止用户因填写错误或缺少必填项等原因提交无效数据，需要对表单进行验证。
在表单验证时，需要考虑到各种不同的情况，比如输入格式、数据类型、数据范围等等。
Web开发人员可以采用JavaScript来实现表单验证，其中采用正则表达式是比较常见和有效的方法。
下面是一个简单的表单验证代码示例：```<form><input type="text" id="name" required><input type="email" id="email" required><input type="submit" value="提交"onclick="validateForm(event)"></form><script>function validateForm(event) {event.preventDefault();var name = document.getElementById("name").value;var email = document.getElementById("email").value;var namePattern = /^[\u4e00-\u9fa5a-zA-Z]+$/;// 正则表达式用于验证中文或英文名称if (!namePattern.test(name)) {alert("姓名不合法！");return false;}if (!email.includes("@")) {alert("邮箱格式不正确！");return false;}alert("提交成功！");return true;}</script>```这个代码示例实现了对姓名和邮箱的输入格式验证，并在验证不通过时提示用户相应的错误信息。
Web程序设计(第4版)-第5章
5.1 脚本语言JavaScript
5.1.2 JavaScript语言概述
• JavaScript是一种嵌入在HTML文件中的脚本语言，它 是基于对象和事件驱动的，能对诸如鼠标单击、表单输入、 页面浏览等用户事件做出反应并进行处理。 • JavaScript特点：
var str;
/*声明变量str*/
num1=10;
/*说明num1为整型，并将其值赋为10*/
num2=3.02e10;
str1="欢迎您";
《Web程序设计》(第4版)，电子工业出版社，2015，ISBN：9787121260360
5.1 脚本语言JavaScript
5.1.3 JavaScript编程基础
5.1 脚本语言JavaScript
5.1.3 JavaScript编程基础
4．运算符和表达式
• 算术运算符。算术运算符的操作数和结果都是数值型值。算术运算符 及位运算符可与赋值运算符结合形成简记形式
赋值运算符简记形式表
运算符 操 作
+
加法
*
乘法
%
取模
--
递减
运算符 -（双目） / ++ -（单目）
• 传统脚本语言常用来编写执行一次性任务，通常以文本(如 ASCII)保存，只在被调用时进行解释或编译。
• 而现在脚本和传统编程语言之间的界限越来越模糊。在一些 脚本语言中，有经验的程序员可以进行大量优化工作。
• 本章所讨论的脚本语言是指用于Web页面及程序设计的脚本 语言，它们通常是嵌入式（嵌入到HTML文件中）的、具有解 释执行的特征。
web课程设计模版
web课程设计模版一、教学目标本课程的教学目标是让学生掌握Web编程的基础知识，包括HTML、CSS和JavaScript。
在知识目标上，学生需要了解Web页面结构、样式设计和交互逻辑。
在技能目标上，学生能够独立编写简单的Web页面，并实现基本的交互功能。
在情感态度价值观目标上，培养学生对计算机科学的兴趣，提高他们解决实际问题的能力。
二、教学内容根据课程目标，本课程的教学内容主要包括HTML、CSS和JavaScript三个方面。
教学大纲如下：1.HTML：介绍Web页面的基本结构，包括标题、段落、列表、链接等元素的使用和属性设置。
2.CSS：讲解样式表的语法和使用方法，包括选择器、属性和值、盒模型等概念，以及如何为Web页面添加样式。
3.JavaScript：介绍JavaScript的基本语法和常用函数，如字符串操作、数学计算、条件判断、循环结构等，以及如何通过JavaScript实现Web页面的交互功能。
三、教学方法为了达到课程目标，本课程将采用以下教学方法：1.讲授法：教师讲解基本概念和知识点，引导学生理解Web编程的基本原理。
2.案例分析法：分析实际案例，让学生了解和掌握Web编程在实际应用中的使用方法。
3.实验法：学生动手编写代码，进行实验操作，培养实际操作能力和解决问题的能力。
四、教学资源为了支持教学内容和教学方法的实施，我们将准备以下教学资源：1.教材：选用权威、实用的Web编程教材，为学生提供系统、全面的学习资料。
2.多媒体资料：制作PPT、视频等多媒体资料，生动形象地展示课程内容，提高学生的学习兴趣。
3.实验设备：提供计算机实验室，让学生进行实际操作，锻炼编程能力。
五、教学评估本课程的评估方式包括平时表现、作业和考试三个部分。
平时表现主要评估学生的课堂参与度和团队合作能力，占总评的30%。
作业分为课后练习和项目实践，占总评的40%。
考试分为期中和期末两次，占总评的30%。
评估方式客观、公正，能够全面反映学生的学习成果。
Web程序设计(第三版)_第5章
5. 2 DHTML简介
【例5-1】一个DHTML简例。
<html><head><title>DHTML简例</title></head> <body> <span id=s1 onMouseOver="s1.style.color='red'" onMouseOut = “s1.style.color=‘black’”>这是使用了 DHTML的一个简例。 </span> </body> </html>
《Web程序设计》(第3版)，电子工业出版社，2011，ISBN:9787121131509
5. 2 DHTML简介
• “动态”的含义不仅指页面中加入了动画、影像或声 音，更重要的是指页面应具有交互性，可以控制页面内 容的变化。DHTML是一种通过各种技术的综合而得以 实现的概念。 • 客户端的页面动态特性主要是通过层叠样式表 （CSS）、脚本程序和HTML 4.0来实现的，这三者构 成了动态HTML（Dynamic HTML，DHTML）。 • 实际上，DHTML基于HTML语言，利用CSS扩展样式 进行编排，借助浏览器对象模型概念，用脚本程序对网 页进行动态控制。
《Web程序设计》(第3版)，电子工业出版社，2011，ISBN:9787121131509
第 5 章 页面设计
5.1 页面设计概述 5.2 DHTML简介 5.3 层叠样式表CSS 5.4 浏览器对象模型及应用 5.5 HTML DOM
《Web程序设计》(第3版)，电子工业出版社，2011，ISBN:9787121131509
Web标准网页设计教程-网页中表格和表单的运用
6.<tr>…</tr>用来定义____；<td>…</td>用来定义____；
<th>…</th>是用来定义____。
动动手
7.单元格垂直合并所用的属性是____；单元格横向 合并所用的属性是____。
8._____用于指出浏览者输入值的类型。 二、简答题 1.简述表单的作用。 2.简述表单method属性值get和post的区别。
1.多行文本输 入框
2.下拉列表选 择框
5.按钮
3.表单元素分组 4.标签
5.3.3 其他表单元素
2.下拉列 表选择框
1）<select>标记元素的主要属性 2）<option>标记元素的主要属性 3）<optgroup>标记元素的主要属性 4）实例代码
任务拓展——注册页面设计
使用表单元素完成班级网站中用户的注册页面设计，注册后用户才 可以在网站浏览相关网页，发表个人评论或进行留言。进行注册页面 设计前，首先要规划好注册页面所包含的信息内容。例如，在班级网 站中要求用户注册的表单包含昵称、登录密码、确认密码、性别、籍 贯、班级、爱好、头像、邮箱、个人简介等信息。然后进行整体布局 设计，要充分考虑到用户完成表单填写的时间应当尽可能短，标签、 输入框均垂直对齐是很好的布局方式，因为一致的对齐减少了眼睛移 动和处理的时间。整个注册页面要美观大方，便于用户使用。
动动手
三、练习题 1.制作网页，完成后的效果如图5-17所示。
动动手
2.制作网页，完成后的效果如图5-18所示。
<tr>
bgcolor等属性进行设置。
5.1.2 表格的创建设置实例
《Web程序设计(第二版)
特点
安全性好、可靠性高、计算能力和数据存储能力强以及系统维护和管理 的费用较低等优点 大型机的初始投资较大、可移植性差、资源利用率低以及网络负载大等 缺点
构件对象模型:COM
单机环境下的程序开发过程
源程序，编程人员利用开发工具（如C，Fortran）来编 写程序。 编译 连接
客户/服务器（C/S）计算模式
优点
不足
构件对象模型:COM
Web的工作原理
（1）在浏览器地址栏中，用户输入要访问的网页网址URL （2）Web服务器根据URL中指定的网址、路径和网页文件， 调出相应的HTML、XML文档或Jsp、Asp文件 （3）根据文档类型，Web服务器决定是否执行文档中的服务 器脚本程序，还是直接将网页文件传送到客户端。
JDK2.0（JDK1.2）
JDK3.0（JDK1.3) 2000年
JDK4.0（JDK1.4) 2002年
JDK5.0（JDK1.5) 2004年 JDK6.0（JDK1.6) 2006年
构件对象模型:COM
XML技术
当今世界，XML技术可谓炙手可热
可扩展标记语言XML（eXtensible Markup Language，可扩展标 记语言）是Internet上最具权威的数据表示和数据交换标准 。 XML和HTML的不同
网址 端口号 文件路径 文件名 参数表
概念及术语（Cont4.）
端口（port）
端口的分类
按协议类型划分，端口可以分为TCP、UDP、IP和ICMP（Internet控制消息 协议）等。其中TCP端口和UDP端口是最常见端口类型。 按照端口号分布划分，端口分为知名端口（Well-Known Ports）和动态端口 （Dynamic Ports）两部分。 范围从0到1023，这些端口号一般固定分配给一些知名的公共服务。 21端口--FTP服务 25端口--SMTP服务 80端口--HTTP服务 135端口-RPC（远程过程调用）服务等 范围从1024到65535
web表单设计
错误信息的设计
• 14%的表单仍旧使用Javascript错误窗口来传达问题
错误信息的设计
• • • • 通常设计师试图报告错误的使用方法。 a、在点击提交按钮之后显示错误信息； b、在视觉上高光“不正确”的输入框； c、在输入框右侧即时显示错误信息。
错误信息的设计
• 有时候设计师合并两种技术并且利用输入区域高光错误信息的方法。
注册完成后的提示
• 通常，红色被用于标示错误。当表单完成时，和使用黄色来表示遇到的问题。
注册完成后的提示
• 如果有任意一种色彩来表示注册成功的话，它应该就是绿色，97%的网站表 示成功的视觉就是用绿色的。
国内网站注册表单国内网站注册表单分析
国内网站注册表单分析
表单按钮的使用
• 一个表单的主要操作（通常是“提交”或“保存”）需要一个比较强的视觉 比重（在上面的例子里用了亮色调、粗字体、背景色等等）。这相当于给用 户一个提示：您已/即将完成填写表单。 当一个表单有多个操作，比如“取消”和“返回”，那有必要减轻次要操作 的视觉重量。这可以最小化用户潜在的操作错误的风险。
• •
目录
• • • • • • • • 表单的用途 表单的布局 标签对齐 帮助，支持，操作提示的位置 错误信息的设计 表单按钮的使用 注册完成后的提示 总结
表单的用途与要素
• • 总体来说，Web表单主宰着结算、注册和数据输入 表单三要素：标题、数据、动作。它们是组成表单的基本元素
表单布局
• 表单的页面设计应尽可能的简洁。去掉不必要的因素，减少对用户的干扰。 使用“最小化”的布局来构建注册表单。根据调查，61%的web表单和普遍 的页面相比更简单
标签对齐
• 借助可视化元素
第5章 表格——(网页设计与制作共11章)
图5-6 行、列或单元格对应的“属性”面板
“属性”面板中各选项含义如下： ：合并所有单元格按钮。将所选的单元格、行或列合并为 一个单元格。只有当单元格形成矩形或直线的块时才可以合 并这些单元格。 ：拆分单元格为行或列。将一个单元格分成两个或更多个 单元格。一次只能拆分一个单元格；如果选择的单元格多于 一个，则此按钮将被禁用。 水平：指定单元格、行或列内容的水平对齐方式。可将内容 对齐到单元格的左侧、右侧或使之居中对齐，也可以指示浏 览器使用其默认的对齐方式（通常常规单元格为左对齐，标 题单元格为居中对齐）。
第5章 表格
5.1 5.2 5.3 5.4 案例1 制作个人履历表 表格标签及标签检查器 案例2 使用表格设计网页 实训——使用表格设计“礼品店”主页
5.1 案例1 制作个人履历表
5.1.1 在页面中创建表格 5.1.2 表格的基本操作 5.1.3 设置表格属性
5.1.1 在页面中创建表格
表格由三个基本组件构成：行、列、单元格。表格横向叫行， 纵向叫列，行列交叉的区域为单元格，如图5-2所示。一般 以单元格为单位来插入网页元素，以行和列为单位来修改性 质相同的单元格。 首先创建“个人履历表”，操作步骤如下： 1）在本地站点新建网页或打开指定的网页。 2）将网页标题设置为“表格的应用”。 3）确定表格插入点的位置，进行下列操作之一，弹出“表 格”对话框，如图5-3所示。 选择“插入→表格”菜单命令。
提示：删除行操作与删除列操作的方法相似。但是，删除行操作使用 的是〈Ctrl+Shift+M〉组合键。
3）合并、拆分单元格。选中需要合并的多个单元格，选择 “修改→表格→合并单元格”命令将选中的多个单元格合并 为一个单元格。选中需要拆分的单元格，选择“修改→表格 →拆分单元格”命令，打开“拆分单元格”对话框。选择把 单元格拆分为行还是列，并输入拆分的行数或列数，然后单 击【确定】按钮。 4）调整列的宽度。执行以下操作之一调整列宽。 将鼠标指针移到要调整列的右边框，当鼠标指针变为双向箭 头时，向左右拖动边框线，可使列的宽度缩小或增大。 选中要调整的列，在“属性”面板的“宽”文本框输入选中 列的宽度。 编辑后的“个人履历表”如图5-输入与设置效果
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
5-2 的Page物件-說明
的Web表單程式設計模型屬於事 件驅動程式設計（類似VB或）， 我們建立的每一頁程式，在編譯 後就是建立一個System.Web.UI.Page物 件，即Page物件。
事實上，程式除了Web表單控制 項產生的事件外，當使用者請求 程式，在載入和執行時，也會觸 發一系列Page物件的事件。
<form Runat="server">
………
</form>
Web表單和HTML表單差異只在Runat屬性， 此屬性將HTML表單轉換成的 Web表單。
5-1-1 Web表單程式設計模型-伺服
端控制項
Web表單是由伺服端控制項（Server Controls） 組成，它是一種伺服端可程式化物件，用來建立 程式的使用介面。
簡單的說，隱藏程式碼模型的程 式是將第5-1-1節程式架構的兩大部分都獨 立成檔案。
5-1-2 隱藏程式碼模型程 式
在程式本身只包含伺服端控制項 的Web表單，Page指引指令可以指定事件 處理程式所在的類別檔案，如下所示：
<%@ Page Language="VB" CodeFile="Ch5_1_2.vb" Inherits="Ch5_1_2" %>
• Web控制項：對應System.Web.UI.WebControls名 稱空間的控制項物件，它是使用asp字頭的XML標籤， 例如：Button、TextBox或RadioButton等。
5-1-1 Web表單程式設計模型-處理 伺服端控制項的事件
Web表單是一種事件基礎的設計模型，當 使用者按下或選擇控制項等操作時，就會 造成控制項的狀態改變，進而觸發事件； 當事件產生時，就可以建立事件處理程序 來處理此事件，如下所示：
Sub Command_Click(Sender As Object, _ CE As CommandEventArgs)
show.Text = "按下Button控制項: " & _ mandName & "/" & _ mandArgument
End Sub
5-3-2 LinkButton控制項
OnCommand
說明 檢查在按下 Button 控制項時，是否執行驗證，預設值
True 為是，False 為否 Command 事件傳遞的命令名稱 Command 事件傳遞的命令參數
按鈕控制項顯示的標題名稱 當按鈕按下時，觸發 Click 事件，可以指定事件處理程
序的名稱 當按鈕按下時，觸發 Command 事件，可以指定事件處
Button控制項是一個顯示按鈕外觀的控制項，它 是最常用來執行Script程序或函數的控制項，按 一下可以產生Click或Command事件，如下所示：
<asp:Button Id="button1" Text="Command按鈕" CommandName="排序" CommandArgument="由小到大" OnCommand="Command_Click" Runat="server"/>
單
5-1 Web表單程式設計模型
5-1-1 Web表單程式設計模型 5-1-2 隱藏程式碼模型
5-1-1 Web表單程式設計模型-說明
的Web表單可以建立跨平台和跨瀏覽程 式Web應用程式的輸入介面，其使用的技術如同 在VB、JBuilder等視覺化開發工具建立 Windows應用程式的「GUI」（Graphics UserInterface）介面。
伺服端控制項的語法類似HTML標籤， 可以設定控制項的屬性，主要分為兩種，如下所 示：
• HTML控制項：對應System.間的物件，這些控制項直接對應HTML標籤，只 是新增Id和Runat屬性，例如：前述的<head>和 <form>標籤。
Inherits System.Web.UI.Page Protected Sub button1_Click(ByVal Sender _ As Object, ByVal E As System.EventArgs)
……… End Sub End Class 類別檔案宣告Partial類別Ch5_1_2，它是繼承自Page類 別，內含控制項的事件處理程序button1_Click()。
<asp:Button Id="button2" Text="Button按鈕" OnClick="button2_Click" Runat="server"/>
5-3-1 Button按鈕控制項-屬性
屬性 CausesValidation
CommandName CommandArgument
Text OnClick
LinkButton控制項提供Button控制項的功 能，只是顯示外觀是一個超連結文字，如 下所示：
<asp:LinkButton Id="button0" Text="LinkButton控制項“ OnClick="button0_Click“ Runat="server"/>
標籤建立名為button0的LinkButton控制 項，其相關屬性與事件處理程序和Button 控制項相同。
Page.Header.Title = "Ch5-1-1Head.aspx"
程式碼使用Title屬性指定頁面的標題文字。
5-1-1 Web表單程式設計模型-Form 表單標籤
Web表單的伺服端控制項是置於<form Runat="server">的HTML控制項之間， 它就是HtmlForm控制項物件，如下所示：
理程序的名稱
5-3-1 Button按鈕控制項-事件
當按下Button控制項button1時，可以產生 Command事件，它是傳遞命令名稱和參數到事 件處理程序。
Web表單可以建立多個Button控制項，但只使用 一個事件處理程序，程序使用命令名稱和參數來 分辨出是按下哪一個按鈕，如下所示：
5-3-3 ImageButton控制項-標籤
ImageButton控制項的功能也和Button控 制項相同，只是改為圖片來顯示按鈕，如 下所示：
<asp:ImageButton Id="button0" ImageUrl="back.gif" OnClick="button0_Click“ Runat="server"/>
Page指引指令Inherits屬性指定Partial類 別名稱，CodeFile屬性指定類別檔案是在 Ch5_1_2.vb。
5-1-2 隱藏程式碼模型-Partial類別
Ch5_1_2.vb類別架構如下所示： Imports Microsoft.VisualBasic Partial Class Ch5_1_2
5-2 的Page物件-事件
Page物件的常用事件，如下表所示：
事件名稱 PreInit Load
PreRender Unload
說明 當伺服器準備從資料夾載入 時，產生此事件，2.0 版
可以用來取得第 14 章的 Profile 物件 當 程式已經載入記憶體時，產生此事件，可以在此事 件初始控制項屬性，和執行表單處理，詳細的說明，請參閱第
6章 在建立控制項前，產生此事件執行最後的控制項更新
當 程式完全執行之後，產生此事件
5-3 執行Script的控制項
5-3-1 Button按鈕控制項 5-3-2 LinkButton控制項 5-3-3 ImageButton控制項
5-3-1 Button按鈕控制項-標籤
程式是第1章Visual Web Developer的 Web Form範本程式架構，架構主要分成 兩個部分，如下所示：
• 第一部分：<script>標籤的事件處理程序或函 數。
• 第二部分：<form Runat="server">標籤建 立Web表單，內含Form表單標籤和伺服端控 制項（Server Controls）。
Web表單程式設計模型是一種事件驅動程式設計 模型（Event-driven Programming Model）， 使用伺服端控制項建立Web表單的使用介面。當 產生事件時，程式可以建立對應的事件 處理程序來處理事件。
5-1-1 Web表單程式設計模型-架構
<%@ Page Language=“VB” %> <!– 前置指令區 <!-- 事件處理程序區--> <script Runat="server"> Sub button1_Click(Sender As Object, E As Eventargs)
標籤建立名為button0的ImageButton控 制項。