07第7章制作表单网页.

可以使用标签中的name属性来为字段命名（表单提交到处理过程中使用的字段，这种字段的说明可以参阅前面介绍）。从技术角度上讲，name属性的值是任意的一个字符串，但是我们建议最好采用没有嵌入空格或标点的字符串。标签中必须的type属性可以用来选择控件的类型，其属性值如下表所示。 最有用也是最常见的表单输入元素时文字域，在浏览器窗口中显示为一行的空框，它接收用输入的一行信息，当你用户将表单提交给服务器时，这些信息就变成了元素值。 范例代码：

密码域 将type属性值设置为password，就可以创建一个密码域。传统文本域的其他属性和语义也可以应用于密码域。应用呢密码域时必须制定一个字段的名称，这样就可以为该段字段设置size和maxlength属性，并可以设置一个初见时的vlaue。 范例代码： 文件域（file） 复选框（checked） 单选框（ridio） 普通按钮（button） 设置普通按钮（button）代码： 重置按钮（Reset） Textarea标签 作为表单的一部分，标签可在用户浏览器中创建一个多行文字域，在此文本输入区内，用户几乎可以输入无线文字。提交表单之后后，浏览器将所有行中的文字都收集起来，行间距用回车/换行符分隔，并将它们作为表单元素的值发送给服务器，这个值需要使用</p><h2>dreamweaver网页制作 第7章 表单</h2><p>第7章表单 在制作动态网页时，要实现信息交互，常常用到表单。常见的表单有搜索表单、用户登录注册表单、调查表单、留言簿表单等。本章节将和大家一起探讨在表单的基本概念和各个元素，以及在Dreamweaver CS4中如何创建表单，并通过实例掌握表单制作的方法。 【学习目标】 ●了解Web服务器的作用。 ●掌握IIS的安装和设置方法。 ●掌握更改站点设置的方法。 ●知道表单域的含义；熟练掌握各种表单栏目的插入与设置。 ●能够综合使用各种表单栏目制作留言簿。 ●知道发送表单结果的多种方法。 ●掌握验证表单的方法。 7.1 关于表单 表单是用来收集站点访问者信息的域集，可实现网页与浏览者间的交互，达到收集浏览者输入信息的目的。 表单是浏览网页的用户与网站管理者进行交互的主要窗口，Web管理者和用户之间可以通过表单进行信息交流。表单内有多种可以与用户进行交互的表单元素，如文本框、单选框、复选框、提交按钮等元素。在服务器端，信息处理由CGI （Common Gete Way Interface）、JSP （Javaserver Page）或ASP （Active Server Page）等应用程序处理。 下面是几个表单应用的例子，邮箱用户注册表单如图14.1所示，搜索引擎表单如图14.2所示，在线测试表单如图14.3所示。 7.2 表单元素 表单域</p><p>简单地说，表单就是用户可以在网页中填写信息的表格，其作用是接收用户信息并将其提交给Web服务器上特定的程序进行处理。 表单域，也称表单控件，是表单上的基本组成元素，用户通过表单中的表单域输入信息或选择项目。 在建立表单网页之前，首先就要建立一个表单域。 在7.1节中详细介绍了表单的基本概念，使用Dreamweaver CS4可以创建各种表单元素，如文本框、滚动文本框、单选框、复选框、按钮、下拉菜单等。在“插入”工具栏的“表单”类别中列出了所有表单元素，如图14.4所示 7.2.1 插入表单 （1）将光标放在“编辑区”中要插入表单的位置；然后在“插入”工具栏的“表单”类别中，单击“表单”按钮；此时一个红色的虚线框出现在页面中，表示一个空表单，如图14.5所示 （2）单击红色虚线，选中表单；在“属性检查器”中，“表单名称”文本框中输入表单名称，以便脚本语言Javascript通过名称对表单进行控制；在“方法”下拉列表框中，选择处理表单数据的传输方法，“Post”方法是在信息正文中发送表单数据，“Get”方法是将值附加到请求该页面的URL中；在“目标”下拉列表框选择服务器返回反馈数据的显示方式，这里选择“_blank”，即在新窗口打开；“MIME类型”下拉列表框指定提交服务器处理数据所使用MIME编码类型。默认设置“application/x-www-form-urlencode”与POST方法一起使用，如图14.6所示 7.2.2 插入文本字段 本小节来学习在表单中插入文本字段。文本字段是表单中常用的元素之一，主要包括单行文本字段、密码文本字段、多行文本区域三种。 (1)．单行文本字段与密码文本字段</p><h2>html设置表格和页面一样大</h2><p>竭诚为您提供优质文档/双击可除html设置表格和页面一样大 篇一：html表格的设置 宜宾学院教案 _网页设计与制作_课程 -1– -2– -3– 篇二：html创建网页表格的基本原则和方法 html创建网页表格的基本原则和方法 将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。html具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的修饰，从而使网页更加生动活泼。html表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。表格在网页设计中的地位非常重要，可以说如果您表格用不好的话，就不可能设计出出色的网页。大多数</p><p>初学者一开始就接触表格，对表格都有一定的了解，但是要实现真正细致甚至强大的功能，仔细理解table的代码结构至关重要！我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题，了解和掌握了这些内容，你将发现，table原来是这样的亲切易用! 一、创建基本的表格 一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th＞和＜td＞定义。＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th＞说明表的列数和相应栏目的名称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜t h＞组成的表格。表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。 在讲解之前，我们先来看看表格的基本构造。下图是一个3行3列的表格。 这里面有两个概念要弄明白：表格与单元格。他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。前面已经说过表格的最基本标记为＜table＞、＜</p><h2>实例Dreamweaver_制作表单页</h2><p>图12-1 保存文件名为from 保存图12-2 在页面中插入表单域 说明表单域就是表单的范围,在网页中以红色虚线表示,也是插入表单元素的前提条件.代码中以<form> </form>格式表示.其作用就是把页面中输入的数据以电子邮件形式发送到邮箱中或直接传送到数据库中 4. 将光标停放到表单域中,选择常用面板上的</p><p>图12-3 在页面中插入表格和文本 在第2行第1 个单元格中输入文字"用户名:",然后单击表单面板中"文本字段插入文本框. 选中插入的文本框,打开属性面板,在"文本域"下面的文本框中输入"name", 在"字符宽度"文本框中输入"25";"类型"选择"单行"单选按钮;"最多字符数</p><p>图12-6 单选按钮属性设置 说明初始状态有两个选择，“已勾选”和“未选取中”。单选按钮是在众多选 16. 按钮，在“省份：”旁边插入“列表 菜单”框，单击属性能面板上的按钮，打开“列表值” 黑龙江等，单击按钮可增加项目，单击按钮可删除项目，右边的两个按钮，可用来调整项目的上下位置。如</p><p>图12-7 “单选按钮组”对话框图12-8 “列表/菜单”列表值设置 18. 单击“确定”按钮，返回属性面板，在“初始化时选取定”文本框中出现了刚才设置的项目标签。然后在“列表/菜单”下面的文本框中输入“ 图12-9 “列表/菜单”属性设置 图12-10 文件域属性设置 文件域是用来选择本地硬盘上文件夹目录地址，其后面跟着按</p><p>着单击表单面板上的“复选框”按钮，分别在各选取项前面插入复选取框。 钮，使表格中的内容都靠左对齐。如图 行，然后单击表单面板上的“文本区域”按钮，插入文本域。 图12-11 选中表格单击“左对齐”按钮 26. 选中文本域，打开属性面板，在“文本域”下输入名称content，在“字符宽度”文本框中输入40，在“行数”中输入5，在“类型”选项中选择“多行”单选取按钮。参数设置如图12-12所示。 图12-12 “文本域”属性设置</p><h2>140701第5章 HTML5网页表单设计(定稿)</h2><p>网页设计技术实用教程--从基础到前沿 第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表单设计前沿内容；如果有该节则加入此句有了在掌握了表单设计的基本知识、技术的理论储备准备之后，我们通过几个综合示例讲解表单设计中各种元素的实用方法，完成理论向实践的转变。工欲善其事，必先利其器，网页设计离不开好的工具支持，最后，指导大家使用网页设计工具DWCS5工具实现一个复杂表单页面的设计，至此从而完成本章的讲解学习之旅。</p><h2>制作表单网页</h2><p>制作表单网页说课稿 尊敬的各位评委、专家： 大家好！今天我说课的内容是《制作表单网页》。 一、说教材 网页设计是我校计算机应用技术专业的一门选修课，使用教材是航空工业出版社的《网页设计案例教程》。今天我说课的内容是第7章表单在网页中的应用，讲述了表单元素在网页中的操作与应用。 表单用来收集用户信息，使网页具有交互功能，因此广泛使用。由于表单元素比较多，用法各不相同，有一定难度。因此，我把课本的知识进行了分解与重组，由易到难，设计成三个任务，各有侧重点。 二、说教学重点与难点 教学重点：1.创建表单。 2.掌握各表单元素 教学难点：熟练应用各表单元素 关键点：表单元素属性的设置 三、说教学目标 (一)知识目标 掌握表单的基本构成要素，了解表单设计及制作流程，理解、掌握并熟练运用表单各知识点。</p><p>(二)技能目标 1.根据场合灵活制作表单。 2.培养学生使用Dreamweaver 软件的综合能力，提高应用水平。 (三)情感目标 1. 培养学生的自主学习能力、自我探究能力； 2. 增强学生的审美意识、组织能力和团结协作的精神； 四、说学情 我所教授的对象是大专二年级计算机专业的学生。他们学习能力参差不齐，学习不主动。但他们具备了一定的分析能力和探究意识，同时会带着问题投入到课程学习当中，具有强烈的好奇心和求知欲。 五、说教法 根据对教材、学生情况、教学目标的认真分析，我确定使用以案例教学法、小组合作法、任务驱动法为主并辅以演示、辅导等其他教学方法。 1．任务驱动下的案例教学法：从生活中常见的表单网页例子，比如常用的淘宝注册页面，游戏注册界面等，引入本节课的学习，吸引学生的好奇心。 2．演示法：通过多媒体演示关键的知识点和关键步骤，或使用课件演示。这种方法比较直观，还可活跃课堂气氛。激起学生学习兴趣，</p><h2>实验七 制作表单</h2><p>实验七制作表单 【实验目的】 1．熟练掌握网页中表单的制作方法。 2．熟练掌握Dreamweaver CS6用户注册表单网页的制作。 3．熟练掌握添加行为检查表单。 【实验环境】 1.工具软件：Dreamweaver CS6 2．制作如图7-1所示的“用户注册”表单网页。 图7-1 【实验内容】 1．练习表单的制作。 2．制作如图所示的“用户注册”表单网页。</p><p>3. 练习检查表单操作。 【实验步骤】 1．创建本地站点。 2.1 创建表单 （1）新建一个网页，将光标定位在希望表单出现的位置上。 （2）执行【插入】->【表单】->【表单】命令，或选择“插入”栏上的“表单”类别，然后单击“表单”按钮。 （3）这时文档中将插入一个空的表单，如图7-2所示。在“设计”视图中，红色的虚轮廓线表示表单。 注意：如果没有看到红色的虚轮廓线，请检查是否选中了【查看】->【可视化助理】->【不可见元素】选项。 图7-2 红色的虚轮廓线表示表单 （4）选定上面的表单，显示表单属性面板，如图7-3所示。 图7-3表单属性面板 表单属性： ?表单名称：标识该表单的惟一名称。命名表单后，就可以使用脚本语言（如JavaScript 或VBScript）引用或控制该表单。 ?动作：指定处理该表单的动态网页或脚本的路径（如asp/https://www.sodocs.net/doc/7010560205.html,、php、jsp等）。 可以在“动作”文本框中键入完整路径，也可以单击文件夹图标以选择一个动态网页或脚本。 ?方法：选择将表单数据传输到服务器的方法，POST方法将在HTTP请求中嵌入表单数据；GET方法是将值附加到请求该页面的URL中；默认方法是使用浏览器的默认设置将表单数据发送到服务器。 ?MIME类型：指定对提交给服务器进行处理的数据使用MIME编码类型，默认设置为“application/x-www-form-urlencode”通常与POST方法协调使用。如果要创建文件上传域，需指定“multipart/form-data MIME”类型。 ?目标：设置提交表单后的目标浏览器。 2.2 插入文本字段</p><h2>网页表单设计实例技巧五则</h2><p>1、表单文本输入的移动选择：在文本输入栏中，如果加入了提示，来访者往往要用鼠标选取后删除，再输入有用的信息。其实只要加入onMouseOver="this.focus()" onFocus="this.select()" 代码到<textarea> 中，一切就会变得简单多了，如：以下为引用的内容： <textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">请填入你的姓名</textarea> 类似的，可以加入代码到<input>。 2、表单输入单元点击删除：本列同上则作用类似，只是使用鼠标上略有变化，需要点击而不像上则的只要鼠标覆盖。如： 以下为引用的内容： <input type=text name="address" size=19 value="请填入你的邮箱"onFocus="this.value=''"> 点击输入单元后，提示信息会删除，是不是很方便。 3、表单输入单元的边框设置：更改传统的表单单元边框，会让你的主页生色不少。如： 以下为引用的内容： <input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8"> 其中"style=***"为左右上下和背景色设置，适用于其它单元。 4、表单输入单元的文字设置：表单中单元的字体是可以修改的，如： 以下为引用的内容： <input type=text name="address" size=19 value="请填入你的姓名" style=font-family:"verdana";font-size:10px > 其中"style=***"为字体和字大小设置。 5、修改表单属性为弹出窗口：大多数表单激活后，会在当前页面中打开，影响正常浏览。不如修改一下，如： 以下为引用的内容： <form method=POST action=url target=_blank> 其中"target=_blank"为控制在弹出窗口打开。</p><h2>网页表单实验报告</h2><p>信息科学与技术学院实验报告 一、实验综述 1、实验目的及要求 1．掌握表单技术基础，学会插入文本域。 2．掌握表单及表单元素的创建与修改。 3．通过表单技术，了解网页的制作。 2、实验仪器、设备或软件 PHOTOSHOP软件 Dreamweaver CS4软件 二、实验过程（实验步骤、数据记录） 1.将光标置于表单内，然后在【插入】面板中单击【文本字段】按钮，打开【输入标签辅助功能属性】对话框，设置文本字段的属性，在【输入标签辅助功能属性】对话框中，用户可以为文本字段的表单对象添加标签文本，同时设置标签文本显示的位置。在完成【输入标签辅助功能属性】的设置后，单击【确定】按钮，插入文本字段。然后，即可在【属性】检查器中定义文本字段的各种属性。 2.创建文本区域有两种方法。一种是先为表单插入一个文本字段的对象，然后在【属性】检查器中设置【类型】为多行；除此之外，也可以单击【插入】面板中的【文本区域】按钮，在设置【输入标签辅助功能属性】对话框中的各种属性后，同样也可以插入一个文本区域对象。 3.先将光标置于表单的容器中，在【插入】面板中单击【字段集】按钮，在弹出的字段集对话框中输入字段集的名称，然后单击【确定按钮，将字段集添加到网页文档中。然后，将光标置于字段集之后，在【插入】面板中单击【复选框】按钮，在弹出的【输入标签辅助功能属性】对话框中设置复选框的属性后，即可将其添加到网页中。</p><p>日志页面 第一篇日志</p><p>第二篇日志 三、结论 1、实验结果 本实验主要通过整个表格和单元格颜色的差异来衬托出实验效果，间距的作用主要在于表现这种颜色差异。要充分地理解这两种单位表示的意义才能正确地进行选择，否则就不能达到自己想要的效果，设置错误就会严重影响实验效果。 2、分析讨论 实验结束后我们可以看到页面的背景变成了我们插入的图像，并且要鼠标经过的时候会变成另一个图像，这就是鼠标经过图像的效果。 在插入复选框时应注意，复选框的名称只允许使用字母下划线和数字。其中，只允许以字母和下划线作为开头。 四、指导教师评语及成绩： 评语：</p><h2>网页设计好看的表单代码</h2><p>1、只有下划线的文本框： <input style="border:0;border-bottom:1 solid black;background:;"> 2、软件序列号式的输入框： <script for="T" event="onkeyup"> if(value.length==3)document.all[event.srcElement.sourceIndex+1].select(); </script> <input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T7" size="5" maxlength="3"> 3、软件序列号式的输入框(完整版)： <script for="T" event="onkeyup">if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].fo cus();</script> <script for="T" event="onfocus">select();</script> <script for="Submit" event="onclick"> var sn=new Array(); for(i=0;i<T.length;i++) sn=T.value; alert(sn.join("—")); </script> <input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3">—<input name="T" size="5" maxlength="3"> <input type="submit" name="Submit"> 4、输入框景背景透明： <input style="background:transparent;border:1px solid #ffffff"> 5、鼠标划过输入框，输入框背景色变色： <INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'" style="width: 106; height: 21" onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black"> 6、输入字时输入框边框闪烁(边框为小方型)： <Script Language="JavaScript"> function borderColor(){ if(self['oText'].style.borderColor=='red'){ self['oText'].style.borderColor = 'yellow'; }else{ self['oText'].style.borderColor = 'red';</p><h2>07第7章制作表单网页.</h2><p>第7章制作表单网页 通常，一个表单中包含多个对象，有时也称为控件或表单元素，例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。 【教学导航】 7.1课前准备 7.1.1新建一个站点 （1）在本地硬盘创建文件夹 （2）启动Dreamweaver CS3 （3）创建名称为“E游调查”的本地站点 7.1.2新建一个网页文档index0701.html</p><p>第7章制作表单网页（1）新建一个网页文档 （2）设置网页标题 （3）保存该网页。 7.1.3在网页中插入表格 1、在网页index0701.html中插入表格1 2、在网页index0701.html中插入表格2 3、在网页index0701.html中插入表格3 4、在表格3中插入表格3-1 （1）插入4行1列表格3-1 （2）在表格3-1第1行的单元格中插入表格3-1-1 （3）在表格3-1第3行的单元格中插入表格3-1-3 （4）在表格3第2行的单元格中插入表格3-1-2 （5）在表格3第4行的单元格中插入表格3-1-4 7.2课堂引导训练及评价 【课堂引导训练任务描述】 1、网页制作任务卡 网页制作任务卡如表7-5所示。 表7-5网页制作任务卡 177</p><p>178 2、网页制作任务跟踪卡 网页制作任务跟踪卡如表7-6所示。 表7-6 网页制作任务跟踪卡 【网页效果展示】 网页“index0701.html ”的预览效果如图7-2所示。 图7-2 网页“index0701.html ”的预览效果 【任务完成过程】 7.2.1 插入表单域</p><p>第7章制作表单网页 【操作要求】 在表格3的单元格中插入一个表单域。 【实施过程】 （1）将光标置于表格3的单元格中。 （2）在Dreamweaver CS3主界面中，单击菜单【插入记录】→【表单】→【表单】，如图7-3所示，在表格3单元格中光标处插入一个表单域。 7.2.2设置表单域的属性 【操作要求】 设置表单域的“名称”、“动作”、“目标”和“方法”等属性。 【实施过程】 将光标置于表单域中，即可看到表单域的“属性”面板，在该属性面板中设置表单域的属性。 “属性”面板上各项属性的设置如下： （1）“表单名称”：用来设置表单的名称。这里设置为“Form1”。 （2）“动作”：用来设置处理该表单的动态网页或用来处理表单数据的程序路径，这里假设处理该表单的动态网页为“Register_Confirm.aspx”。 （3）“目标”：用来设置表单被处理后，反馈网页打开的方式。默认的打开方式是在原窗口中打开，这里设置“目标”为“_blank”，有利于提高浏览速度。 （4）“方法”：用来设置表单数据发送到服务器的方式。这里选择“POST”方式 （5）“MIME类型”用来设置发送数据的MIME编码类型。如果表单中包含文件上传域，则应该选择“multipart/form-data”编码类型。 7.2.3插入表单控件 【操作要求】 （1）插入3个单行文本域。 （2）插入1个文本区域。 （3）插入2个单选按钮。 （4）插入3个单选按钮组。 （5）插入23个复选框。 （6）插入2个下拉式菜单。 （7）插入1个列表。 （8）插入1个跳转菜单。 （9）插入2个表单按钮。 （10）插入1个图像域。 【实施过程】 1、插入单行文本域 在表单的文本域中，可以输入文本、数字或字母。输入的内容可以单行显示，也可以是多行显示，还可以将密码以星号形式显示。 插入文本域的过程如下： （1）将光标置于“您的姓名：”一行（表格3-1-2的第1行）的第2列的单元格中。 179</p><h2>网页制作技术形成性考核作业</h2><p>网页制作技术形成性考核作业 成绩： 一、填空题 1．Dreamweaver MX有____两__种工作界面。 2．在站点中建立新的网页文件，其默认的文件扩展名为__htm______。 3．打开站点面板时，可执行____窗口______菜单中的“站点”命令。 4．如果不想在段落间留有空行，可以按_shift+Enter_________组合键。 5．为了让浏览者快速了解图像的概况，在Dreamweaver MX提供了设置__________的功能。6．单元格内间距是指单元格内的对象与单元格___边框_______之间的距离。 7．单元格间距是指单元格与___单元格_______之间的距离。 8．为了使所设计的表格在浏览网页时，不显示表格的边框，应把表格的边框宽度设为_____0__。 9．在表格的___单元格_______中可以插入另一个表格，这称为表格的嵌套。 10．表格的嵌套是指在一个表格中插入另一个表格，表格的平铺是指将不同的表格放置在网页的______同一行中______。 11．为了加快下载速度，尽量_不要将______整个网页的内容放在一个大的表格中。12．在_____布局____视图中，可以使用拖动鼠标的方法在页面中绘制布局单元格。13．在_________视图中，可以使用拖动鼠标的方法移动单元格的位置。 14．在Dreamweaver MX中，可以插入文本框的类型有单行文本框、多行文本框和__________。 15．在网页种插入文本框、单选框、多选框或跳转菜单时，要先插入空白的___表单域______。16．在表单中可以插入的按钮包括提交按钮、重置按钮和___________。 17．在包含框架的页面中，每个框架都显示一个________。 18．保存包含框架的页面时，如果页面中包含四个框架，要保存全部页面信息，共需要保存______个文件。每个文件的扩展名都为htm。 19．在保存框架文件时，框架的文件名必须以字母开头且________大小写。 20．浏览器在第一次装载文框架网页时，如果需要指定该框架所显示的网页文件，则要设置该框架的______________属性。 21．如果链接的目标文件在本地站点中，可以使用绝对URL或相对URL，如果要链接站点</p><h2>html网页表单制作</h2><p>1.表单标签＜form＞……＜/form＞ 语法：＜FORM name=“form_name” ACTION=“URL”METHOD=“GET|POST”＞…＜/FORM＞ Name ：定义表单的名称 Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；Action ：用来指定表单处理程序的位置(asp 等服务器端脚本处理程序） 2.文本框文本框 是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。 代码格式：＜input type=“text” name=“...” size=“...” maxlength=“...” value=“...”＞ type=“text”定义单行文本输入框； name 属性定义文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称； size 属性定义文本框的宽度，单位是单个字符宽度； maxlength 属性定义最多输入的字符数。 value 属性定义文本框的初始值 3.密码框 密码框是一种特殊的文本框，它的不同之处是当输入内容时，均以*表示，以保证密码的安全性。 格式：<input type=“password” name=“...” size=“...” maxlength=“...” > 4. 按钮 类型：普通按钮、提交按钮、重置按钮。 1)普通按钮 当type 的类型为button 时，表示该输入项输入的是普通按钮。 语法格式： <input type="button" value="…“ name=“…”> Value: 表示显示在按钮上面的文字。普通按钮经常和脚本一起使用。 2)提交按钮 通过提交(input type=submit)可以将表单(Form)里的信息提交给表单里action所指向的文件。例句： <input type="submit" value="提交"> 3)重置按钮 当type的类型为reset时，表示该输入项输入的是重置按钮，单击按钮后，浏览器可以清除表单中的输入信息而恢复到默认的表单内容设定。 语法格式： <input type=“reset" value=“…“ name=“…”> 5. 单选框和复选框 单选框 格式：<input type=“radio”name=“…” value=“…” checked> Checked: 表示此项默认选中 Value 表示选中后传送到服务器端的值。 Name 表示单选框的名称，如果是一组单选项，name 属性的值相同有互斥效果。 复选框 语法格式：<input type=checkbox name=“…” value=“…” checked ></p><h2>表单网页的制作方法</h2><p>表单网页的制作方法 教学目的： 1、理解表单的概念及作用； 2、熟悉表单字段的种类和功能； 3、掌握表单网页的制作方法。 教学重点： 1、表单作用的理解和表单网页的制作。 2、如何验证表单元素的正确性。 教学难点： 1、如何将表单具体应用，设计出精美网页。 2、如何验证表单元素的正确性。 新课内容： 一、表单的概念及作用 表单（Form）是一种结构化的文件，用于收集和发布信息。它是网站管理员与访问者进行交流的一种媒介，通过访问者填写表单中的选择题、填空题和问答题，网站管理员可以收集到来自世界各地的资料和意见。目前表单主要用来进行意见调查、在线查询、网上购物、在线申请等。在表单中经常出现的字段有：单行文本框、多行滚动文本框、单选框、复选框、下拉列表框和按钮。 二、HTML表单设计基础 表单在HTML页面中起着重要作用，它是与用户交互信息的主要手段。一个表单至少应该包括说明性文字、用户填写的表格、提交和重填按钮等内容。用户填写了所需的资料之后，按下“提交资料”按钮，这样所填资料就会通专门的CGI接口传到Web服务器上。网页的设计者随后就能在Web服务器上看到用户填写的资料，从而完成了从用户到作者之间的反馈和交流。对于免费个人网站，往往服务器不提供CGI功能，也可以电子邮件来接收用户的反馈信息。 表单中主要包括下列元素： button——普通按钮 radio ——单选按钮 checkbox——复选框 select ——下拉式菜单 text ——单行文本框 textarea——多行文本框</p><p>submit——提交按钮 reset——重填按钮 用HTML设计表单常用的标记是：<form>、<input>、<Option>、<Select>、<textarea>和<isindex>等标记。 1、<form>表单标记 该标记的主要作用是设定表单的起止位置，并指定处理表单数据程序的url地址。其基本语法结构如下： <form action＝url method=get|post name＝value onreset=function onsubmit＝function target=window> </form> 其中action：用于设定处理表单数据程序url的地址。这样的程序通常是CGI应用程序，采用电子邮件方式时，用action="mailto:你的邮件地址"。 method：指定数据传送到服务器的方式。有两种主要的方式，当method=get时，将输入数据加在action指定的地址后面传送到服务器；当method=post时则将输入数据按照HTTP传输协议中的post传输方式传送到服务器，用电子邮件接收用户信息采用这种方式。 name：用于设定表单的名称。onrest和onsubmit是主要针对“reset”按钮和“submit”按钮来说的，分别设定了在按下相应的按钮之后要执行的子程序。 target：指定输入数据结果显示在那个窗口，这需要与<frame>标记配合使用。 2、<input>表单输入标记 此标记在表单中使用频繁，大部分表单内容需要用到此标记。其语法如下： <inPut aligh=left|righ|top|middle|bottom name=value type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button value=value src=url checked maxlength=n size=n onclick=function onselect=function> align：是用于设定表单的位置是靠左（left）、靠右（right）、居中（middle）、靠上top）还</p><h2>制作包含表单的网页</h2><p>江西工业职业技术学院教案</p><p>具体内容 7.1 表单在网页用中的作用及其组成元素 最早的时候，人们将Web设计为全球共享和浏览静态信息的媒体，现在它已经发展为一种交互式媒体，而最普通的交互方式就是数据输入表单。表单可以是单一的搜索对话框，也可以是多页面的调查问卷保单形式。如图6-1所示。 图7-1 旅游调查表 一个表单有三个基本组成部分：表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。</p><p>7.2 制作包含表单的网页 表7-1 模仿型任务卡</p><p>7.2.1 创建并规划站点“旅游调查” 1、创建站点 在本地磁盘的文件夹“旅游指南”的根目录下创建子文件夹“旅游调查”，然后通过“站点定义”对话框中的“高级”选项卡创建一个名为“旅游调查”的网站，该网站的存储目录指向文件夹“旅游调查”。如图6-2所示。 图7-2 创建站点“旅游调查” 2、规划站点 在“文件”面板中的“旅游调查”站点根目录下创建“webpages”、“images”、“flash”三个子目录，并将文件夹“images”设置为站点的“默认图像文件夹”， ，如图5-3所示。</p><p>图7-3 站点“旅游调查”文件面板 7.2.2 创建网页文档index07.html 1、创建网页文档 在“旅游调查”站点的根目录下创建网页文档“index07.html”，并在“文档”工具栏的“标题”文本框中输入网页标题“旅游调查”，然后保存网页。如图6-4所示。 图7-4 设置网页标题 2、设置网页属性 单击页面“属性”面板中的“页面属性”按钮，打开页面属性对话框，选中分类列表框中的“外观”，将页面字体设置为“宋体”，大小为“14像素”，然后保存网页。 7.2.3 插入表单域并设置其属性 1、在网页中插入表单域 表单是由表单域和表单项共同组成，且所有的表单项必须要放在表单域里面才会将它们采集到的信息随表单一起提交给服务器，所以，制作表单页面的第一项工作就是在网页中插入表单域。 在Adobe Dreamweaver CS3主界面中，单击【插入记录】→【表单】→【表单】命令，如图7-5所示，或单击“插入”工具栏“表单”选项卡中的表单域按钮，在网页的光标处插入一个表单域。</p><h2>利用表格制作网页的详细步骤</h2><p>利用表格制作网页的详细步骤 将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。HTML 具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的修饰，从而使网页更加生动活泼。HTML 表格模型使用户可以将各种数据(包括文本、预格式化文本、图像、链接、表单、表单域以及其他表格等)排成行和列，从而获得特定的表格效果。 表格在网页设计中的地位非常重要，可以说如果您表格用不好的话，就不可能设计出出色的网页。大多数初学者一开始就接触表格，对表格都有一定的了解，但是要实现真正细致甚至强大的功能，仔细理解table的代码结构至关重要！我们将在这里详细介绍表格各种常用的标记、技巧以及表格使用中的问题，了解和掌握了这些内容，你将发现，table原来是这样的亲切易用! 一、创建基本的表格 一个表由＜table＞开始，＜/table＞结束，表的内容由＜tr＞,＜th ＞和＜td＞定义。＜tr＞说明表的一个行，表有多少行就有多少个＜tr＞；＜th ＞说明表的列数和相应栏目的名称，有多少个栏就有多少个＜th＞；＜td＞则填充由＜tr＞和＜th＞组成的表格。 表格重要的基本标记不多，但每个标记都有很多的属性，考虑到一下子把这些属性都列出来，可能让初学者感到无从下手，所以我们还是从表格的外观(即浏览器中显示的表格的样式)来了解最基本的属性。 在讲解之前，我们先来看看表格的基本构造。下图是一个3行3列的表格。 这里面有两个概念要弄明白：表格与单元格。他们的关系是整体与局部的关系，如同砌墙的砖和砌好的墙一样。在上面3行3列的表格中一共有9个单元格。由于我们后面将提到的表格属性和单元格属性有很多是相同的，所以一定要分清楚。前面已经说过表格的最基本标记为＜table＞、＜tr＞、＜td＞，可以先树立这样一个概念：描述整个表格的属性标记放在＜table＞里，描述单元格的属性标记放在＜tr＞、＜td＞里。有这样一个概念后，我们学习起来就可能简单些。 1、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色</p><h2>网页表格表单设计</h2><p>网页设计上机实验报告 学院名称管理学院 专业（班级） 姓名（学号） 指导教师倪丽萍</p><p>实验一 1.实验要求：设计一张表格，并在表格当中填充文本，要求样式如下图所示： 2.设计方法及思路：利用Dreamweaver cc2014软件进行代码的设计。在<body></body>主体中添加表格代码，用<table></table>标记表格，设定表格边框线厚度border 为1，表格内字体距单元格边框cellpadding 为20，单元格之间的间隔为0。开始先设计一个三行三列的表格，用<tr></tr>标记表格的行，用<td></td>标记表格的列。然后用colspan 合并第一行的第一、第二个单元格，并删除一行列标记代码。得到一个合并单元格，如上图所示的第1个单元格，用rowspan 合并第一行的第二个单元格和第二行的第三个单元格，删除一行列标记。得到一个合并的单元格，如上图所示的第2个单元格。再用colspan 合并第三行的第二个和第三个单元格，删除一行列标记，得到如图所示的第6个单元格。再根据属性要求，设置字体（font face 标记），字体大小（font size 标记），字体颜色（font color ），对其方式（align ）。这样的话就可以得到一个经过处理后的表格。 第1个单元格 第2个单元格 第3个单 元格 第4个单元格 第5个单 元格 第6个单元格</p><p>附实验一代码： <!doctype html> <html> <head> <meta charset="utf-8"> <title>表格设计</title> </head> <body> <table border="1" width="800" cellpadding="20" cellspacing="0" > <tr> <td colspan="2" align="center">第一个单元格</td> <td rowspan="2" align="center">第二个单元格</td> </tr> <tr> <td align="center">第三个单元格</td> <td align="center">第四个单元格</td> </tr> <tr> <td align="center">第五个单元格</td> <td colspan="2" align="center">第六个单元格</td> </tr> </table> </body> </html> 实验结果截图：</p> <div> <div>相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="8504806"><a href="/topic/8504806/" target="_blank">制作表单网页</a></li> <li id="1535361"><a href="/topic/1535361/" target="_blank">网页表单制作</a></li> <li id="10088823"><a href="/topic/10088823/" target="_blank">07单元7制作表单网页</a></li> <li id="11477841"><a href="/topic/11477841/" target="_blank">表单网页制作</a></li> <li id="7635081"><a href="/topic/7635081/" target="_blank">创建表单网页</a></li> <li id="17833493"><a href="/topic/17833493/" target="_blank">html网页表单制作</a></li> </ul> </div> </div> </div> </div> <div class="category"> <h2 class="navname">相关文档</h2> <ul class="lista"> <li><a href="/doc/9e5527830.html" target="_blank">使用表单制作交互式网页</a></li> <li><a href="/doc/cf16670701.html" target="_blank">网页表格表单设计</a></li> <li><a href="/doc/258636520.html" target="_blank">网页设计基础-表格与表单</a></li> <li><a href="/doc/757426610.html" target="_blank">网页设计好看的表单代码</a></li> <li><a href="/doc/ad11185869.html" target="_blank">表单网页的制作方法</a></li> <li><a href="/doc/e79151890.html" target="_blank">制作表单网页教学设计</a></li> <li><a href="/doc/4318431587.html" target="_blank">制作表单网页</a></li> <li><a href="/doc/8317660169.html" target="_blank">Dreamweaver网页设计制作表单页面.ppt</a></li> <li><a href="/doc/c311777338.html" target="_blank">网页设计表单</a></li> <li><a href="/doc/f318066099.html" target="_blank">网页制作插入表单</a></li> <li><a href="/doc/1916458381.html" target="_blank">教你如何制作网页表格(ppt 86页)</a></li> <li><a href="/doc/6917683573.html" target="_blank">网页表单设计实例技巧五则</a></li> <li><a href="/doc/9b9220956.html" target="_blank">html网页表单制作</a></li> <li><a href="/doc/d48351339.html" target="_blank">Dreamweaver表单制作</a></li> <li><a href="/doc/461187618.html" target="_blank">HTML制作表单</a></li> <li><a href="/doc/8d16480854.html" target="_blank">表单制作教学设计</a></li> <li><a href="/doc/c24983909.html" target="_blank">制作表单网页 教案</a></li> <li><a href="/doc/f316628753.html" target="_blank">初中信息技术《制作表单网页》教案</a></li> <li><a href="/doc/5519154591.html" target="_blank">网页设计-表格、表单及框架</a></li> <li><a href="/doc/9e6811394.html" target="_blank">Frontpage中的表单制作</a></li> </ul> <h2 class="navname">最新文档</h2> <ul class="lista"> <li><a href="/doc/0919509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0d19509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9419184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3c19258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d619211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a219240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9e19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8f19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8619195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7819336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7b19336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6a19035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4b19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3d19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2919396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2819396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1219338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/e819066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/b819159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "78bdfbf0294ac850ad02de80d4d8d15abe23009d"; </script> <div class="footer"> <p>© 2013-2022 www.sodocs.net  <a href="/sitemap.html">站点地图</a> | <a href="/tousu.html" target="_blank">侵权投诉</a></p> <p><a href="https://beian.miit.gov.cn/">闽ICP备11023808号-8</a>  本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈<script type="text/javascript">tj();</script></p> </div> </div> </body> </html>