网页设计与制作项目案例教程教学课件（共10章）项目8 网页表单设计与制作.pptx

  网页设计与制作项目案例教程教学课件（共10章）项目8 网页表单设计与制作.pptx

  ;;;1．掌握表单的交互作用与表单在网页中的使用方法。 2．掌握在网页中插入表单的一般操作应用。 3．掌握正确设置表单信息的方式。 4．掌握表单的合理性设计原则。 5．掌握表单数据的收集与设置方法。;1．能正确控制表单的参数设置。 2．能了解各个表单项的概念与意义。 3．能掌握文本框、密码框、单选框、复选按钮与提交按钮等表单项在Dreamweaver CS6中添加的方法与运用。 4．能通过学习网页表单的设计，学会表单页面整体的设计与制作流程。 5．能懂得正确收集与反馈表单项的需求和意见。;1．培养规范的编码习惯。 2．培养团队沟通、交流和协作能力。 3．培育学生精益求精的工匠精神;;1．表单标签 form/form 2．功能 表单标签用于声明表单，定义采集数据的范围，也就是form和/form标签中包含的数据将被提交到服务器或电子邮件中。 3．语法 form action=URL method=getpost enctype=mime target=……/form ;属性解释： action=url：用来指定处理提交表单的格式，它的值可以是一个URL（提交给程序）或一个电子邮件地址。 method=getpost：用来指明提交表单的HTTP方法，可能的值为：post和get。其中，post方法在表单的主干包含名称/值对，并且无须包含于action属性的URL中；get方法把名称/值对加在action属性的URL后面，并且将新的URL送至服务器，这是往前兼容的默认值，但是由于国际化的原因不赞成使用这个值。 enctype=mime：用来指明将表单提交给服务器时（当method的值为post时）的互联网媒体形式，这个属性的默认值是application/x-。 target=...：用来指定提交的结果文档显示的位置，可能的值为_blank、_self、_parent和_top。其中，_blank表示在一个新的、无名浏览器窗口调入指定的文档；_self表示在指向这个目标的元素的相同的框架中调入文档；_parent表示把文档调入当前框架的父框架中，这个值在当前框架没有父框架时等价于_self；_top表示把文档调入原来的顶部的浏览器窗口中（因此取消所有其他框架）；这个值在当前框架没有父框架时等价于_self.;常见的表单标签如表8.2.1-1所示。;网页设计原则 1）文本框 2）多行文本框 3）密码框 4）隐藏域 5）复选框 6）单选框 7）文件上传框 8）下拉选择框;文本框 文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或简短的回答，如姓名、地址等。代码格式如下： input type=text name=… size=… maxlength=… value=… 属性解释如下： type=text：定义单行文本输入框。 name：定义文本框的名称，如果想要保证数据的准确采集，则必须定义一个独一无二的名称。 size：定义文本框的宽度，单位是单个字符宽度。 maxlength：定义最多输入的字符数。 value：定义文本框的初始值。 示例代码如下： input type=text name=example1 size=20 maxlength=15 /;多行文本框 多行文本框也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。代码格式如下： textarea name=… cols=… rows=… wrap=virtual/textarea 属性解释如下： name：定义多行文本框的名称，如果想要保证数据的准确采集，则必须定义一个独一无二的名称。 cols：定义多行文本框的宽度，单位是单个字符宽度。 rows：定义多行文本框的高度，单位是单个字符宽度。 wrap：定义输入内容大于文本域时的显示方式，可选值如下： 默认值是文本自动换行，当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现。 off：用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行。 virtual：允许文本自动换行，当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现。 physical：让文本换行，当数据被提交处理时换行符也将被一起提交处理。 示例代码如下： textarea name=example2 cols=20 rows=2 wrap=physical/textarea;密码框 密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。代码格式如下： input type=password name=… size=… maxlength=… 属性解释如下： type=password：定义密码框。 name：定义密码框的名称，要保证数据的准确采集，必须定义一个独一无二的名称。 size：定义密码框的宽度，单位是单个字符宽度。 maxlength：定义最多输入的字符数。 示例代码如下： input type=password name=example3 size=20 maxlength=15 ;隐藏域 隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会使用设置时定义的名称和值将信息发送到服务器上。代码格式如下： input type=hidden name=… value=… 属性解释如下： type=hidden：定义隐藏域。 name：定义隐藏域的名称，如果想要保证数据的准确采集，必须定义一个独一无二的名称。 value：定义隐藏域的值。 示例代码如下： input type=hidden name=expws value=dd;隐藏域 隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会使用设置时定义的名称和值将信息发送到服务器上。代码格式如下： input type=hidden name=… value=… 属性解释如下： type=hidden：定义隐藏域。 name：定义隐藏域的名称，如果想要保证数据的准确采集，必须定义一个独一无二的名称。 value：定义隐藏域的值。 示例代码如下： input type=hidden name=expws value=dd;复选框 复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。代码格式如下： input type=checkbox name=… value=… 属性解释如下： type=checkbox：定义复选框。 name：定义复选框的名称，如果想要保证数据的准确采集，则必须定义一个独一无二的名称。 value：定义复选框的值。 示例代码如下： input type=checkbox name=yesky value=09xxxcom input type=checkbox name=chinaByte value=08;单选框 当需要访问者在待选项中选择唯一的答案时，就要使用到单选框了。代码格式如下： input type=radio name=… value=… 属性解释如下： type=radio：定义单选框。 name：定义单选框的名称，由于单选框都是以组为单位使用的，因此如果想要保证数据的准确采集，则在同一组中的单选项都一定要使用同一个名称。 value：定义单选框的值，在同一组中，它们的域值必须是不同的。 示例代码如下： input type=radio name=myFavor value=1 input type=radio name=myFavor value=2;文件上传框 文件上传框也叫文件域。有时候，用户要上传自己的文件。文件上传框看上去和其它文本框差不多，只是它还包含了一个浏览按钮。访问者能够最终靠输入需要上传的文件的路径或单击浏览按钮选择需要上传的文件。 注意：在使用文件域之前，请先确定自己的服务器是否允许匿名上传文件。表单标签中必须设置enctype=multipart/form-data来确保文件被正确编码。另外，表单的传送方式必须设置成post。 代码格式如下： input type=file name=… size=15 maxlength=100 属性解释如下： type=file：定义文件上传框。 name：定义文件上传框的名称，如果想要保证数据的准确采集，则必须定义一个独一无二的名称。 size：定义文件上传框的宽度，单位是单个字符宽度。 maxlength：定义最多输入的字符数。 示例代码如下： input type=file name=myFile size=15 maxlength=100;下拉选择框 下拉选择框允许在一个有限的空间设置多种选项。 代码格式如下： select name=… size=… multiple option value=… selected…/option…/select 属性解释如下： size：定义下拉选择框的行数。 name：定义下拉选择框的名称。 multiple：表示可以多选，如果不设置该属性，那么只能单选。 value：定义选择项的值。 selected：表示默认已经选择本选项。 ;示例代码如下： select name=mySel size=1 option value=1 selected/option option value=d2/option /select 按住Ctrl键可以多选。 示例代码如下： select name=mySelt size=3 multiple option value=1 selected/option option value=d2/option option value=3/option /select;1．提交按钮 提交按钮用来将输入的信息提交到服务器。代码格式如下： input type=submit name=… value=… 属性解释如下： type=submit：定义提交按钮。 name：定义提交按钮的名称。 value：定义提交按钮的显示文字。 示例代码如下： input type=submit name=mySent value=发送 ;2．重置按钮 重置按钮用来重置表单。代码格式如下： input type=reset name=… value=… 属性解释如下： type=reset：定义重置按钮。 name：定义重置按钮的名称。 value：定义重置按钮的显示文字。 示例代码如下： input type=reset name=myCancle value=取消;3．一般按钮 一般按钮用来控制其他定义了处理脚本的处理工作。代码格式如下： input type=button name=… value=… onClick=… 属性解释如下： type=button：定义一般按钮。 name：定义一般按钮的名称。 value：定义一般按钮的显示文字。 onClick：也可以是其他的事件，通过指定脚本函数来定义一般按钮的行为。 示例代码如下： input type=button name=myButton value=保存 onClick=JavaScript:alert(it is a button);Button Objx：它是非常全面的类似按钮的控件，不但可以取代Windows按钮控件来创建强大的按钮，也可以创建完全自定义的活动按钮和工具栏，以及自定义形状的容器。还可以动态地更改图像和形状，以及在自定义形状的区域中添加多个聚焦点，或使用它提供的各种特性完全自定义用户界面。此外还包括Balloon控件，它是使用格外的简单和十分普遍的控件，利用标准或定制形状来添加可自定义的帮助气球（工具提示）到应用程序中。 Input Pro：能轻松地创建专家级的数据录入界面。该软件具有六种格式化编辑控件，不但可以方便、快速地验证数据，还能够正常的使用布尔控件来显示用户外观的真/假/灰度值，或者使用备忘录控件来显示大量的文本信息。 Component One:行业认可最佳Visual Studio控件集[1]，不仅全部支持WinForms、WPF、Silverlight和ActiveX，还支持iPhone和Windows Mobile等移动电子设备平台。它包含数百个控件，如Grids、Charts、Reports、Schedules、Menus、Toolbars、Ribbon和PDF等，能轻松地创建类似微软Office显示风格的用户界面。例如，使用C1Ribbon8.能轻松实现Office 2010?的菜单和工具条风格；使用C1 SplitterContainer能够直接进行应用程序工作区分割；使用C1NavBar能轻松实现导航栏；使用C1Calendar能轻松实现具有强大日程安排功能的日历等。; 在本项目的学习中，我们将通过重庆愉快网注册表单页面来详细讲解表单的设计与制作。在任务实施之前，我们也将了解什么是注册。所谓的注册有两种解释：一是把名字记入簿册，多指取得某种资格；二就是由主管部门办理手续、记入籍册，便于管理查考。而一般的网页注册也是基于这两种解释来完成整体的网站结构流程的，只是有一定的指定人群。比如，解释一是针对于用户，取得某种资格；解释二则是针对于管理员，便于管理查考。 注册页就是把所有的相关信息统一整合到一个网页页面中供用户填写的页面。一般的注册页包含的注册项有账号、密码、确认密码、注册邮箱、真实姓名、身份证、验证码、同意用户协议等。 本项目中的重庆愉快网注册表单页面的实例，就是指通过注册操作来获取愉快网个人账号的资格，从而方便用户在愉快网上进行一定的个人需求操作。其中，“您的邮箱”选项对应的是表单中的文本框；“输入密码”与“重复密码”选项对应的是表单中的密码框；“我已阅读与同意”选项对应的是表单中的复选框；“提交注册”选项对应的是表单中的提交按钮。如图8.3-1所示。;图8.3-1 重庆愉快网注册表单页面; 在上述任务陈述中，我们大体地了解了这个任务的性质与所要注意的知识点，能得出对重庆愉快网表注册单页面的一个具体分析。 （1）网站主题：电子商务网站——重庆愉快网注册页。 （2）网页结构：上—左右—下。 （3）色彩分析：本案例以白色为主，辅以红色和橙黄色。跳跃的红色充满了许多活力，富有激情和现代节奏；而大面积的留白则给我们视线留出休息的空间，从而聚焦网页的主体表单部分的信息，突出商业功能和产品营销售卖。 （4）网站特点：本案例主要做重庆愉快网注册表单页面，浏览者能注册成为网站会员，进行B2C在线）设计思想：要突出本页面的表单功能和条理性，让浏览者清晰地了解整个注册的流程，使用户都能够快速地完成注册。 （6）初步认识：了解表单的基本概况，如图8.3-2所示。; 在分析完重庆愉快网注册表单页面后，可以确定几个实施的关键任务，结合绘制重庆愉快网注册表单页面线框结构图的分析理解，我们可以很直观地了解到设计与制作重庆愉快网注册表单页面的流程的任务划分： （1）新建站点，使所有文件、图片等元素保证正确的链接路径。 （2）插入表格或DIV层，完成页面的整体布局。 （3）插入表单项，设计与制作完成整个重庆愉快网注册表单页面。 ;重庆愉快网注册表单页面线所示。;;请参照学习项目1中的内容，这里不再赘述。;步骤一 创建新页面 在菜单栏中选择“文件”下拉菜单中的“新建”命令，将会弹出一个“新建文档”对话框，在对话框中选择“空白页”标签，然后在“页面类型”列表框中选择“HTML”选项，单击“创建”按钮，即可。创建一个新页面，如图8.3-4所示。 图8.3-4 “新建文档”对话框;步骤二 命名标题 进入Dreamweaver CS6工作界面，如图8.3-5所示。 图8.3-5 Dreamweaver CS6工作界面 ;在“标题”文本框中将标题名称改为yukuaiwang， 如图8.3-6所示。 ;步骤三 保存页面 选择“文件”下拉菜单中的“保存”命令对文件进行存储。先进行保存的好处在于可以设置网页HTML文档的位置，明确文件素材的路径，这样能有效避免由路径错误所导致的图像无法正常显示的问题。 初次保存会对文件进行命名。在“文件名”文本框中输入form.html并单击“保存”按钮，这样就完成了一个新的注册网页的创建，如图8.3-7所示。;图8.3-7 保存页面;步骤二 插入表单 在插入栏中选择“表单”选项卡，将工具栏切换为表单栏目，如图8.3-10所示。;图8.3-10 表单栏目;步骤一 设置页面属性 在底部“属性”面板里选中单击“页面属性”按钮，在弹出的“页面属性”对话框中进行页面整体风格的设置，如图8.3-8所示。 设置页面字体大小为12px，左、右、上、下边距均为0px，然后单击“确定”按钮完成页面属性的设置，如图8.3-9所示。;图8.3-9 “页面属性”对话框;步骤二 插入表单 在插入栏中选择“表单”选项卡，将工具栏切换为表单栏目，如图8.3-10所示。;然后单击图标，确定添加一个表单，如图8.3-11所示;步骤三 插入表格 在插入栏中选择“常用”选项卡，将工具栏切换为常用栏目，如图8.3-12所示。;单击“常用”选项卡中的“表格”图标，插入一个6行3列的表格，并将表格宽度设置为490像素，边框粗细、单元格边距和单元格间距全部设置为0，如图8.3-13所示。;在操作执行后，设计视图中将会出现一个6行3列的虚线框作为页面内容完整布局的框架，如图8.3-14所示。;步骤四 插入文本框 文本框是指可以输入简要文本（如名称、地址或任何其他类型的简要文本）的表单元素，文本可以是字符、数字等，它主要提供给用户输入单行文本信息。 可以通过以下两种方法来添加文本框。 方法一：在菜单栏中选择“插入”→“表单”→“文本域”命令。 方法二：单击插入栏的“表单”选项卡中的“文本字段”图标。 这里，我们主要讲解方法二。在新插入的表格第一行中，输入“您的手机号：”，然后在第一列每个单元格中逐一输入相应的文字，效果如图8.3-15所示。;图8.3-15 完成文本输入后的效果;选择“表单”选项卡，将工具栏切换为表单栏目。在第二列第一行中，单击图标，确定添加一个文本框，然后依次在每个单元格中逐一插入相应的文本框，效果如图8.3-16所示。; 表单是由窗体和控件组成的，一个表单一般包含用户填写信息的输入框和提交按钮等，这些输入框和按钮叫作控件。表单是使用form/form标签创建的，在form/form标签之间的部分都属于表单的内容。form标签具有action、method和target属性。 文本框类型是指在表单页面中插入的文本框不同的类型选择。例如，在重庆愉快网的注册页面中，“输入密码”和“重复密码”两个文本框的类型为密码框，输入密码后显现的效果是圆点，而并不显现具体的输入内容。这时，我们就需要单击相应的文本框来选择修改它们的类型，如图8.3-17所示。;图8.3-17 文本框“属性”面板; 同样地，当我们选择文本框类型为“多行”时，文本框中输入文字的显示就为多行显示了。这时，单纯的文本框就变成了文本域，一般又称文本区，即有滚动条的多行文本输入控件，通常在留言本中出现。具体在单独设计与制作时，如图8.3-19所示。;单击“表单”选项卡中的“表单”图标，即可完成文本域的插入。 与单行文本框text控件不同，文本域不能通过maxlength属性来限制字数，因此必须寻求其他方法来加以限制以达到预设的需求。我们一般都在“属性”面板中来设置一个文本域的尺寸，如图8.3-20所示。;在设置字符宽度和行数后就可以来完成文本域的制作了。 多行文本域的基本结构如下： textarea name=” ” rows=” ” cols=” ” wrap=” ”…/textarea name:指定多行文本框的名称。 cols：指定多行文本框的宽度。 rows：指定多行文本框的高度。 wrap：指定换行方式。 off：输入文字超过栏宽时，不换行。 virtual：换行。 这样我们就能总结出文本域的一些概念： 文本域：用来指定多行文本框的名字。 字符宽度：用来指定多行文本框的宽度是多少个字符。 行数：用来指定多行文本框的高度是多少个字符。 类型：用来指定是文本框，还是多行文本框，还是密码框。 初始值：用来在首次加载网页时，设置多行文本框中显示的初始文本内容;步骤五 插入复选框 复选框用于从一组选项中选择多个选项。复选框允许用户选中多个选项。在想要了解网站访问者对各种产品的爱好时，复选框将十分有用。 可以通过以下两种方法来添加复选框。 方法一：在菜单栏中选择“插入”→“表单”→“复选框”命令。 方法二：单击插入栏的“表单”选项卡中的“复选框”图标。 这里我们主要讲解方法二。在插入栏中选择“表单”选项卡，将工具栏切换为表单栏目，如图8.3-21所示。;然后单图标，在第二列、第五行的单元格中确定添加一个复选框同时输入相应的文字叙述，其中“《愉快网服务协议》”设置为超链接，如图8.3-22所示。;步骤六 插入提交按钮 提交按钮和重置按钮通常出现在表单的尾部，用来提交或清除表单中已以填定的信息。这里主要介绍提交按钮的使用。 在插入栏中选择“表单”选项卡，将工具栏切换为表单栏目，如图8.3-23所示。;然后单击图标，在第二列第六行的单元格中确定添加一个提交按钮，如图?8.3-24所示。;再单击提交按钮，将“属性”面板中“值”文本框中的文字修改为“提交注册”，如图?8.3-25所示。;采用同样的制作方式，在第三列第一行的单元格中插入一个提交按钮，然后将“值”文本框中的文字修改为“免费发送验证码”，如图8.3-26所示。; 表单按钮分为一般按钮（button）、提交按钮（submit）和重置按钮（reset）3种。一般按钮主要用来响应用户的各种操作，如单击、鼠标滑过等；提交按钮一般用来向后台提交信息，进行信息交流；重置按钮用来清除表单已填信息。使用属性检查器可以为按钮添加一个自定义的名称。 按钮动作是指在表单页面中插入的按钮的不同的动作指向。例如，在重庆愉快网的注册页面中，有“提交注册”这样的一个提交按钮，而在“动作”选区中还有一个“重置表单”的选项，并将“属性”面板中“值”文本框中的文字修改为“重置”，当我们单击选中“重设表单”单选框后，在预览时，我们单击按钮呈现的效果为当前所有的文本框中的输入内容完全清空，需要重新填写一次，如下图8.3-27所示。;图8.3-27 按钮“属性”面板;步骤一 用CSS样式美化修饰页面 在表单设计完成后，需要CSS样式的修饰。首先，让表单在页面中居中对齐。将CSS样式写入头部的style type=text/css/style中，代码如下： style type=text/css /*public*/ body,td,th { font-size: 12px; } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } /*form*/ form { width:490px; margin: 0 auto;} /style/head ;页面效果如图8.3-28所示。;设置每个单元格的高度为50px，只需要对第一列的每个单元格设置高度就可以了，其他列的同一行单元格将会自动撑开高度为50px，如图8.3-29所示。;接下来，设置第二列中文本框与密码框的大小。textfield、textfield2和textfield3的大小均为width：255px，height：35px；textfield1的大小为width：125px，height：35px。代码如下： #textfield,#textfield2,#texfield3{ width:255px; height:35px;} #textfied1{ width:125px; height:35px;} 然后，对按钮进行CSS样式的修饰。我们可以观察到两个按钮的样式不一样，所以需要对每个按钮都进行命名。将发送按钮命名为button，提交按钮命名为button2。 代码如下： input type=submit name=button2 id=button2 value=免费发送验证码/ input type=submit name=button id=button value=提交注册/ 接下来，设置不同按钮的CSS样式。设置高度、宽度和按钮的边框，并设置字体的颜色、背景的颜色，代码如下： #button2{ width:116px; height:28px; } #button{ width:120px; height:35px; background: url( images/00001_15.gif); border:0; color:#FFF;};步骤二 用CSS样式美化文本效果 CSS样式的修饰已经基本完成，但是还有一点我们经常会忽视，那就是文本域的文字垂直方向的对齐方式。我们通常看到的都是垂直居中对齐，那么我们就要对其进行样式的修饰，在文本域的样式中添加与它的高度相同大小的行高，代码如下： #textfield, #textfield2, #textfield3{ width:255px; height:35px; line-height:35px;} #textfield1{ width:125px; height:35px; line-height:35px;} 这样，注册表单页面就设计与制作完成了。;最终页面效果如图8.3-30所示;;通过前文的学习，我们都了解到了表单的一些知识点，从中可以归纳出表单的几个基本组成部分： ① 表单标签：表单标签包含了处理表单数据所用CGI程序的URL及将数据提交到服务器中的方法。 ② 表单域：表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框、文件上传框和下拉选择框等。 ③ 表单按钮：表单按钮包含了提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本中或取消输入，还可以使用表单按钮来控制其他定义了处理脚本的处理工作。;在设计与制作表单页面时，通常需要根据页面的设计要求来完成一些美化效果。这时，我们可以结合项目3中的CSS层叠样式来完成，这样就可以设计与制作出效果美观的表单页面了。有兴趣的同学请参照学习项目3，这里就不再赘述。;1）复选框 在本案例中，“我已阅读并同意协议”前面，我们采用的是复选框的表单项，其目的是配合整个注册页面的美观性。在文本框和密码框都是矩形的情况下，采用同是矩形风格的复选框表单项可以使整个页面整体更加的协调。但是在本案例中复选框表单项只是起到了一个单选框的功能。 复选框表单项的交互作用在于可以同时勾选几个相同类型的选项，如图8.4-1所示;图8.4-1所示为重庆愉快网宴席场地的筛选版块，用户可以根据自身的要求来有条件的进行选择场地特色。该版块使用户可以同时进行几种场地特色的选择，然后提交任务、完成筛选，充分体现了复选框表单项的交互功能。在这个版块的设计与制作中，我们可以采用上述的步骤来一一实现。 复选框常用属性有复选框名称、选定值和初始状态，如图8.4-2所示。 复选框的名称在“复选框名称”文本框中指定，输入的名称最好是唯一的；在“选定值”文本框中输入复选框的值；初始状态用来在首次加载网页时，设置复选框是否被勾选。;2）单选框 在了解了复选框的交互功能与意义后，我们还注意到一个与复选框相对应的表单项，即单选框表单项。与复选框在形状上的区别是单选框表单项是圆形的，如图8.4-3所示。;图8.4-3中的右边版块是重庆愉快网宴席首页中的宴席场地筛选版块。“简单3部”的区域中都是由单选框表单项组合构成的，其目的也是让用户可以根据自身的条件来进行一些选择从而完成筛选。只是单选框表单项的目的性更强，不需要同时进行几个同类型的条件选择，就能够迅速地找到自己想要的资讯。在Dreamweaver中设计与制作单选框，如图8.4-4所示。;单击图标，即可完成单选框表单项的设计与制作了。 单选框常用属性有单选框的名称、选定值和初始状态，如图8.4-5所示。 同时，为了保持互斥选择，多个单选框的名称应该保持一致；在“选定值”文本框中，输入在访问者选中此单??框时发送给服务器端进行处理的值；初始状态用来在首次加载网页时，设置单选框是否被选中。;3）选择按钮组 在设计与制作选择按钮表单项时会发现经常出现几个同类型的选择按钮需要排布的情况，这时我们一个一个地去插入和设置就会感觉比较乏味。所以，我们大家可以采用一个更为简单、快捷的方式来完成选择按钮表单项的设计与制作，即运用选择按钮组来完成，如图?8.4-6所示。 单击图标，???可完成插入选择按钮组表单项的设计与制作了。然后，根据页面的需求来设置相应的信息咨询，完成最后的页面效果。;8.5 能力与知识拓展;在设计表单时需要注意细节问题的处理，如表单的命名、起始页、清晰的浏览线、注意力分散最少、进程指示、Tab键跳转等。其实还有一点，就是让用户知道完成表单的路径。 确保表单名称符合人们的期望，并简洁解释每个表单的用途。如果表单需要时间或查询信息才能填写，则能够使用起始页来设定人们的期望。由始至终采用清晰浏览线和有效视觉步伐来引导人们，确保说明清晰的填写完成路径。 对于关键任务表单，如结算表单或注册表单，应当去除会分散注意力的部分、任何导致人们放弃填写的链接或内容。如果表单分为多个已知的有序网页，则能够使用进程指示来传达范围、状态和位置等信息。同时如果表单没有清晰的有序网页，则不要采用进程指示，应当采用更笼统的进程指示，而不要设置错误期望。 在设计表单布局

  网页设计与制作项目案例教程教学课件（共10章）项目1 网页设计与制作概述.pptx

  网页设计与制作项目案例教程教学课件（共10章）项目2 HTML5页面元素及属性.pptx

  网页设计与制作项目案例教程教学课件（共10章）项目3 CSS美化HTML网页.pptx

  网页设计与制作项目案例教程教学课件（共10章）项目4 网页Div+CSS布局设计与制作.pptx

  网页设计与制作项目案例教程教学课件（共10章）项目5 网页表格布局设计与制作.pptx

  网页设计与制作项目案例教程教学课件（共10章）项目6 网页框架设计与制作.pptx

  网页设计与制作项目案例教程教学课件（共10章）项目7 网页模板与制作.pptx

  网页设计与制作项目案例教程教学课件（共10章）项目9 网页简单特效设计与制作.pptx

  网页设计与制作项目案例教程教学课件（共10章）项目10 网页多媒体设计与制作.pptx

  原创力文档创建于2008年，本站为文档C2C交易模式，即用户上传的文档直接分享给其他用户（可下载、阅读），本站只是中间服务平台，本站所有文档下载所得的收益归上传人所有。原创力文档是网络服务平台方，若您的权利被侵害，请发链接和相关诉求至 电线) ，上传者