网页表格表单设计

网页设计上机实验报告

学院名称管理学院

专业（班级）

姓名（学号）

指导教师倪丽萍

实验一

1.实验要求：设计一张表格，并在表格当中填充文本，要求样式如下图所示：

2.设计方法及思路：利用Dreamweaver cc2014软件进行代码的设计。在主体中添加表格代码，用

标记表格，设定表格边框线厚度border 为1，表格内字体距单元格边框cellpadding 为20，单元格之间的间隔为0。开始先设计一个三行三列的表格，用标记表格的行，用标记表格的列。然后用colspan 合并第一行的第一、第二个单元格，并删除一行列标记代码。得到一个合并单元格，如上图所示的第1个单元格，用rowspan 合并第一行的第二个单元格和第二行的第三个单元格，删除一行列标记。得到一个合并的单元格，如上图所示的第2个单元格。再用colspan 合并第三行的第二个和第三个单元格，删除一行列标记，得到如图所示的第6个单元格。再根据属性要求，设置字体（font face 标记），字体大小（font size 标记），字体颜色（font color ），对其方式（align ）。这样的话就可以得到一个经过处理后的表格。

第1个单元格

第2个单元格

第3个单

元格

第4个单元格第5个单

元格

第6个单元格

附实验一代码：

表格设计

第一个单元格		第二个单元格
第三个单元格	第四个单元格
第五个单元格	第六个单元格

实验结果截图：

实验二

1.实验要求：设计一个会员注册表单，如下图所示：

2.实验思路：一开始设计的时候，仅仅只是一行一行的设计下来，这样会导致“用户名”、“密码”这些文本，没有如上图所示的对齐，一开始设计的思路是在这些文本前面加，空格标记来使这些文本对齐，但是不方便，而且不美观，因此后来采用表格的设计思路，设计一个8行2列的表格，然后将需要填充的文本或者输入域放置到单元格中，再在单元格中设计对齐方式，这样的可以很方便的设计对齐方式。

3.设计步骤：在body中添加一个

表单标记，目的是将表单中的内容看做一个整体。然后设置一下背景颜色，我加了一条长度为800的水平分割线，用

标记。再添加一个表格标记，设置表格的总体属性width="680" height="302" border="1" cellspacing="0" align="center" 。接下来就在单元格中添加需要的文本，或者输入域即可，本实验中需要的输入域有文本域，文本框，密码域，单选域，复选框，以及提交与确认按钮。设置第一列1~6行为右对齐，即可得到上图的效果。在第二列中添加输入域，添加输入域的方法，可以在插入-表单选项中选择相应的输入域，或者直接输入代码。设置输入域的属性，比如输入域的名字，值，以及初始的值。

附实验二代码：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.360docs.net/doc/cc16670701.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">

我的网页

填写注册信息

实验结果截图：

实验三

1.实验要求：对实验二的表单进行美化处理，得到如下图的对比效果：

2.实验思路：用css样式表对字体以及页面进行美化设计，用javastript语言对填写格式进行检测。

3.实验步骤：用css样式表设计的时候，分别使用class以及id类对大标题字体以及表格中的说明字体美化。我用id="information"标记了“填写注册信息”，用class="span"标记说明字体。用javastript语言检测用户输入时候符合会员注册表的要求，只有所有要求否符合的时候，才能提交，然后进入到表单标记中的action=“”所给出的目的地址中。

附实验三代码：

登录信息表

实验结果截图：

优化页面截图：

输入错误或者不完整时截图：

实验总结

通过三次上机实验，学到了很多关于网页设计方面的知识，当然这仅仅一点点皮毛，我觉得网页设计很有趣，我想我应该去找一些详细的，完整网页设计介绍书去充实自己关于网页设计方面的知识。另外，我觉得像c++、c、java以及网页设计这些需要动手编程的语言，一定要去动手上机实践，才能发现自己错在哪里，也能将这些错误记得更牢，这些知识点也能印象深刻。“绝知此事要躬行”用在这些编程设计里面，我觉得是再合适不过了。如果仅仅凭着理论知识，而不去实践，是很难发现实验过程中出现的错误的。总之，这个学期的网页设计课，让我受益匪浅！

HTML网页设计(表单元素)

HTML网页设计（表单元素） 1.什么是表单表单(form)是由一个或多个文本输入框、可单击的按钮、多选框、下拉菜单和图像按钮等组成，所有这些都放在

结束标签之间。

2.表单元素在

标签中，可以包含以下5个标签。 Input标签对于大量通常的表单内元素，可以使用标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。虽然标签中有许多属性，但对每个元素来说，只有type和name属性是必须的。当然，根据指定的比哦啊单元素类型，也可以设置一些其

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

密码域将type属性值设置为password，就可以创建一个密码域。传统文本域的其他属性和语义也可以应用于密码域。应用呢密码域时必须制定一个字段的名称，这样就可以为该段字段设置size和maxlength属性，并可以设置一个初见时的vlaue。范例代码：文件域（file）复选框（checked）单选框（ridio）普通按钮（button）设置普通按钮（button）代码：重置按钮（Reset） Textarea标签作为表单的一部分，标签可在用户浏览器中创建一个多行文字域，在此文本输入区内，用户几乎可以输入无线文字。提交表单之后后，浏览器将所有行中的文字都收集起来，行间距用回车/换行符分隔，并将它们作为表单元素的值发送给服务器，这个值需要使用</p><h2>网页设计基础试卷5</h2><p>网页设计基础试卷5</p><p>《网页设计基础》试卷 5 一、单项选择题 (本大题共 40小题,每小题 2分,共 80分 (1DremweaverMX表单中的 " 跳转菜单 " 和 " 列表 /菜单 " ,下列说法中错误的是 __D___ A. 实质都是列表框 B. 类型都包括 " 菜单 " 和 " 列表 " 两种类型 C. 当设置为 " 列表 " 类型时,都可以设置其为多选 D. 二者在设置过程中,都可通过选择复选项,在其后加上 " 前往 " 等按钮 (2DreaeaverMX设计表单时,插入第一个 " 列表 /菜单 " 时,它的默认名称是_D__ A.menul B.menu C.select1 D.select (3获取网站空间的主要万法有三种,下列哪一种不是 _C____ A. 申请免费主页空间 B.申请付费空间 C. 申请虚拟主机 D.自己架设服务器 (4申请付费空间的形式较多,下列哪一种不是 __B_ 。 A. 主机托管 B.自己架设服务器 C. 虚拟主机 D.主机租用 (5关于虚拟主机,下列说法中不正确的是 ___A__。 A. 每一台虚拟主机不具有完整 Intemmet 服务器功能 B. 虚拟主机费用低廉 C. 虚拟主机管理方便</p><p>D. 多台虚拟主机共享一台真实主机的资源 (6下列是自己架设服务器应注意的问题,哪一项是错误的 __C__。 A. 应该有足够的带宽 B.应该申请固定的 IP 地址 C. 隔一段时间主机应关机进行维护 D.服务器上安装动态域名系统 (7申请免费网页空间,填写资料时,下列说法中错误的是 __B_ 。 A. 两次密码必须一致 B.所有项目都必须填写 , 少一项都不能通过 C. 只需填写必填项目 D.用户名等信息必须遵守相应的规范要求 (8关于域名,下列说法中不正确的是 ___A___ A. 一个 IP 地址可以对应几个域名 B. 域名已被誉为 " 企业的网上商标 " C. 便于记忆、便于访问,推出域名服务 D. 名是一种 Intemet 用于解决地址对应问题的方法 (9有关域名说法中正确的是 __B__ 。 A. 级域名只能是国家或地区的代码 https://www.360docs.net/doc/cc16670701.html, 是当前最流行顶级的域名 C. 级域名的国家代码可以在 https://www.360docs.net/doc/cc16670701.html, 上查找。 D. 要支付一定的域名注册费,就可随意获得一个域名,不论域名是否被别人注册(10关于免费域名的申请,以及网页空间的获得,下列说法中正确的是 C 。 A. 要申请了免费域名,就获得了相应的网页空间 B. 费域名其实就是免费网页空间</p><h2>制作表单网页</h2><p>制作表单网页说课稿尊敬的各位评委、专家：大家好！今天我说课的内容是《制作表单网页》。一、说教材网页设计是我校计算机应用技术专业的一门选修课，使用教材是航空工业出版社的《网页设计案例教程》。今天我说课的内容是第7章表单在网页中的应用，讲述了表单元素在网页中的操作与应用。表单用来收集用户信息，使网页具有交互功能，因此广泛使用。由于表单元素比较多，用法各不相同，有一定难度。因此，我把课本的知识进行了分解与重组，由易到难，设计成三个任务，各有侧重点。二、说教学重点与难点教学重点：1.创建表单。 2.掌握各表单元素教学难点：熟练应用各表单元素关键点：表单元素属性的设置三、说教学目标 (一)知识目标掌握表单的基本构成要素，了解表单设计及制作流程，理解、掌握并熟练运用表单各知识点。</p><p>(二)技能目标 1.根据场合灵活制作表单。 2.培养学生使用Dreamweaver 软件的综合能力，提高应用水平。 (三)情感目标 1. 培养学生的自主学习能力、自我探究能力； 2. 增强学生的审美意识、组织能力和团结协作的精神；四、说学情我所教授的对象是大专二年级计算机专业的学生。他们学习能力参差不齐，学习不主动。但他们具备了一定的分析能力和探究意识，同时会带着问题投入到课程学习当中，具有强烈的好奇心和求知欲。五、说教法根据对教材、学生情况、教学目标的认真分析，我确定使用以案例教学法、小组合作法、任务驱动法为主并辅以演示、辅导等其他教学方法。 1．任务驱动下的案例教学法：从生活中常见的表单网页例子，比如常用的淘宝注册页面，游戏注册界面等，引入本节课的学习，吸引学生的好奇心。 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>《网页中的表格》教学设计一、教学设计部分本课的主要内容与地位网页中，常用表格来对网页中其它元素定位，将复杂的元素有条理的分布到网页各个位置──网页布局。另外，当我们把表格的宽度定为固定像素值后，还能保证网页布局不会随浏览器窗口的大小变化而变化，当我们在网页中输入文字的时候，就可以让文字顶满格后自动换行，方便我们对文字的编辑。由此可见，网页中只有利用表格进行布局，才能称得上真正意义上的网页设计。本课与前后内容的关系利用表格布局网页，将上一节设计的网站首页中的各种素材进行合理的分布，是对学生进行网页设计技能上的提升；利用表格布局网页也是整个网站设计中一个非常重要技术手段，应用非常广泛。知识目标/技能目标知识目标理解表格在网页设计中的重要作用。技能目标 ⑴掌握使用表格布局网页。 ⑵灵活掌握表格调整的方法。过程与方法目标能够合理利用表格对网页进行布局和规划。情感态度与价值观目标了解学校概貌，发现校园之美，理解规矩与方圆的关系，养成良好的生活和学习习惯。</p><p>本课的重难点重点和难点：掌握利用表格对网页进行布局的方法本课的课时分配建议一课时教法建议由于关于表格的基本操作（插入表格、调整表格：调整行高或列宽、合并或拆分单元格、插入或删除行或列、平均分布行或列）在Word中已经有较详细的操作方法。在本课教学过程中，教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用──如何利用表格布局网页，让网页中的素材合理的在网页上分布。另外，网页模板是提高建站效率的有效手段，教师要注意引导学生对网页模板的使用。学法建议注意观察和借鉴样板网站中表格的运用情况，刚开始使用表格设计网页时可将其边框粗细的值设为1，以观察调整表格的过程，从而掌握表格调整的技巧。本课教学资源索引 1．第二课的半成品网页：Index．htm、Parents．htm 自评、互评、师评要注意的问题学生制作的网页是否通过表格的布局达到美化、整齐和排列有序的目的。</p><h2>网页设计：如何设计细线条的表格</h2><p>网页设计：如何设计细线条的表格 2009-04-09 23:54 如果仅仅是定义表格的边框为1(border="1")和边框颜色值(如 borderColor="#000000")，表格线其实是2px的，要做细线表格，有三种方法： 1.在Dreamweaver中按Ctrl+Alt+T，弹出插入表格的对话框，参数设置如图(带红框项为固定值，否则无效果)：选中表格，在属性面板中设置表格的背景颜色：</p><p>光标定位到第一个单元格里，按住Shift键单击最后一个单元格，全选所有单元格，然后在属性面板中设置所有单元格的颜色：完成后效果如图：评价：优点：简单缺点：在单元格内容为空的时候会缺乏美观：</p><p>2.利用表格的暗边框(bordercolordark)和亮边框(bordercolorlight)属性做的细线表格：还是按Ctrl+Alt+T插入表格，在对话框中设置如图(带红框项为固定植，否则无效果) 选中表格后按F9，展开"Tag Inspector"面板组，在"Attributes"面板中设置如图：</p><p>完成后如图：评价：优点：不会出现在单元格内容为空时“掉线”的问题，可以使用cellspadding 缺点：不能利用cellspacing做其他事，通常情况下必须先指定<table bgcolor="your color">，后限定<td bgcolor=#ffffff></td> 3.设置表格的CSS属性border-collapse为collapse：按Ctrl+Alt+T插入表格，对话框的设置同法2。选中表格，在属性面板中设置表格的边框颜色：</p><h2>制作表格网页中动态效果的制作</h2><p>第二节制作表格——网页中动态效果的制作（第5课时）教学目标： 1．知识目标 (1）理解动态网页与网页动态效果的区别。 (2）掌握网页动态效果的制作。 2．技能目标掌握“插入”菜单中“组件”命令的使用，使得网页增添动态效果。 3．情感目标通过学生自主学习网页动态效果的制作，形成积极、主动的学习气氛，激发学生的学习兴趣，培养学生的探究意识和创新能力。教学重、难点： 1．重点：滚动字幕、交互式按钮等动态效果的制作与Flash的插入。 2．难点：各种效果对象的属性设置。 3．关键：动态效果制作中应图文并茂、色彩和谐、动静适宜。教学方法：自主探究式学习、任务驱动式教学。教学准备：具有动态效果的网页，包括滚动字幕、交互式按钮和FLASH的插入教学过程： 1．引入老师打开静态网页和加有动态效果的网页，请学生感受它们的不同。学生观察、比较两张网页，指出它们的不同点。师生共同分析网页，引入新课的学习。 2．新授任务1 滚动字幕的制作教师巡视，个别给予指导。学生完成任务后，展示作品，并演示操作。小结设置滚动字幕的关键点：文本的大小、字体、颜色等。表现方式。运动方向。背景色的设置。任务2 交互式按钮的制作教师巡视，个别给予指导。学生展示作品，演示操作，小结制作交互式按钮的关键点：按钮文本的设置。按钮的颜色、背景色以及效果等。图片按钮。任务3 网页中插入一个Flash动画教师巡视，个别给予指导。学生展示作品，演示操作，小结插入Flash动画的关键点： Flash显示窗口的大小调整。预览模式下才能看到Flash效果。插入Flash后的网页保存。学生参照教材内容完成网页动态效果制作，并比较分析其他同学的作品，对照自己的作品加以完善。</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>网页设计table表格知识</h2><p>利用表格制作网页详细介绍 https://www.360docs.net/doc/cc16670701.html, 更新日期：2005-03-09 09:46 出处：网页教学网作者：将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。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＞里。有这样一个概念后，我</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>利用表格制作网页的详细步骤将一定的内容按特定的行、列规则进行排列就构成了表格。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。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><h2>网页设计——HTML表格、表单与框架标志</h2><p>第四讲 HTML表格、表单与框架标志使学生掌握简单表格、表单与框架的制作。【教学内容】讲解HTML中制作表格、表单与框架的标志。【教学重点】 * 表格中单元格的合并以及表格嵌套和叠加操作。 * 框架的嵌套使用。 * 表单元素标志与属性。【教学难点】 * 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。 * 理解表单中相应元素对应标志及属性的含义。【教学方式】案例分析式、项目教学【教学参考】 1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。 2、《WEB网站设计》Joel Sklar著高等教育出版社。 3、《HTML网页制作教程》材义语编著铁道出版社。【新课内容】 2.5 插入表格 2.5.1 在网页中插入表格表格的基本构成元素：表头，单元格，列，行 <TABLE> <TR></p><p><TD>第一行第一列</TD> <TD>第一行第二列</TD> </TR> <TR> <TD>第二行第一列</TD> <TD>第二行第二列</TD> </TR> </TABLE> 2.5.2嵌套的表格 2.5.3 表格的属性设置 2.5.4单元格属性设置 2.6 表单的应用表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。 2.6.1 创建表单 2.6.2 用<INPUT>定义用户交互（1）单行文本输入区（2）密码输入区（3）单选框（4）复选框（5）隐藏区域（6）按钮 2.6.3 定义下拉式菜单 <P>你选修的课程： <SELECT Size="1" Name="D1"> <OPTION Value="jsj">计算机</OPTION> <OPTION Value="ey">英语</OPTION> <OPTION Value="ljx">逻辑学</OPTION> <OPTION Selected value="xlx">心理学</OPTION> </SELECT> </P> 2.6.4 定义多行文字输入区域</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、表格、单元格的大小,表格边框的宽度、颜色,单元格边框的颜色表格以及单元格的大小是用“width=#”和“height=#”属性说明，“width=#”表示宽，“height=#”表示高，，#是以象素或者百分比为单位的数字。表格边框的宽度是用“border=#”属性说明，，#为宽度值，单位是象素，表格边框的颜色是用“bordercolor="#"</p><h2>制作交互功能的网页—表单网页的制作</h2><p>教学课题：制作交互功能的网页——表单网页的制作教学背景：在此之前，学生已经对制作网页的基本方法有了清楚地认识，并基本完成了自己的站点，此内容是网页制作部分的进一步提升，让学生对网页制作进行更加深入的探究和制作，通过学习制作具有交互功能的网页，进一步感受网页制作的乐趣，激发更大的创造热情，培养学习兴趣。教材分析：本节课是苏教版初中信息技术（下册）第十章“主题网站设计”的第2节“制作网站”中的第5小节，在本章节中起着承上启下的作用。在前面几小节，已经介绍了如何规划网站、如何建立站点及基本网页的制作，这节课通过学习表单网页的设计，学会与人交流，正确收集反馈意见。在后续的课程中继续对网页制作进行深化，本节课又为后续课程奠定了基础。学生分析：学生在学习本节内容之前，已经学习过因特网的相关知识、会上网，并且已经掌握常用网络工具软件的使用，如QQ、E-mail等等，并且有着浓厚的兴趣。大部分学生只停留在利用QQ聊天、进行网络游戏、收发E-mail等阶段，对申请QQ号码和E-mail时的网页结构形式知之甚少。在设计之前应让学生看或简单完成几个平时他们并不陌生的这类网页，并告诉他们很快他们自己也能成为这类设计的幕后策划者，使得同学们对本课的学习充满期待，绝大多数学生都有亲自动手一试的欲望。教学目标： 1.知识与技能：了解交互网页概念，学会表单的功能及表单元件的使用方法；掌握表单元件的功能及使用方法，掌握表单各组件属性设置方法。 2.过程与方法：通过学习与创作，使学生感受表单在网页中的作用，体验网页的交互功能。 3.情感态度与价值观：通过“动物保护知多少”表单网页设计，让学生在运用、学习、制作的过程中感受表单给网页带来的交互作用，逐步提升环保意识。 4.行为与创新：网页的设计模式不是单一的，可以让学生自己有所发挥，培养学生的信息素养和用信息技术解决问题的能力。教学策略：在教学中有效利用互联网，鼓励学生利用互联网进行自主探究，帮助学生丰富知识体系，多引导，多交流，在平等和谐的环境中逐步击破各个知识要点，理解表单网页的作用及制作方法。为培养学生自主学习的习惯与能力，尽量少讲，更多的让学生自己学习教师提供的学件。课前收集本交互网页制作过程中所需要的各种素材，给予学生充分自主选择的机会；提供制作网页的操作指南及录像帮助，使学生在平等愉快的气氛中自主的学习，真正成为课堂的主人，从而更好的完成教学目标。教学重点： 1、表单元件的正确插入 2、表单数据的搜集</p></div> <div class="rtopicdocs"> <div class="coltitle">相关主题</div> <div class="relatedtopic"> <div id="tabs-section" class="tabs"> <ul class="tab-head"> <li id="23173281"><a href="/topic/23173281/" target="_blank">网页设计表单</a></li> <li id="12056511"><a href="/topic/12056511/" target="_blank">网页设计表格</a></li> </ul> </div> </div> </div> </div> <div id="rightcol" class="viewcol"> <div class="coltitle">相关文档</div> <ul class="lista"> <li><a href="/doc/298636520.html" target="_blank">网页设计基础-表格与表单</a></li> <li><a href="/doc/5e19154591.html" target="_blank">网页设计-表格、表单及框架</a></li> <li><a href="/doc/8714425854.html" target="_blank">网页设计表格和布局</a></li> <li><a href="/doc/e917670016.html" target="_blank">网页界面设计要点-4-表单与表格</a></li> <li><a href="/doc/0a10920168.html" target="_blank">HTML网页设计(表单元素)</a></li> <li><a href="/doc/3f17642277.html" target="_blank">动态网页设计-网页表单的使用</a></li> <li><a href="/doc/7b1438485.html" target="_blank">网页设计表单(精选)</a></li> <li><a href="/doc/a811185869.html" target="_blank">表单网页的制作方法</a></li> <li><a href="/doc/fd18066099.html" target="_blank">网页制作插入表单</a></li> <li><a href="/doc/232175795.html" target="_blank">网页设计HTML表格基础与布局</a></li> <li><a href="/doc/5518649622.html" target="_blank">网站设计表单</a></li> <li><a href="/doc/717426610.html" target="_blank">网页设计好看的表单代码</a></li> <li><a href="/doc/e71817231.html" target="_blank">网页设计——HTML表格、表单与框架标志</a></li> <li><a href="/doc/372167876.html" target="_blank">《网页设计与制作》第三章：插入网页基本元素[1]</a></li> <li><a href="/doc/6817683573.html" target="_blank">网页表单设计实例技巧五则</a></li> <li><a href="/doc/986979144.html" target="_blank">网页设计————表单和框架的使用</a></li> <li><a href="/doc/fa13477186.html" target="_blank">Dreamweaver_网页设计制作表单页面</a></li> <li><a href="/doc/1111049060.html" target="_blank">教学项目十六 HTML中表单网页设计(二) </a></li> <li><a href="/doc/5316995.html" target="_blank">网页制作中的表单技术</a></li> <li><a href="/doc/7d6515086.html" target="_blank">网页设计_表格、表单和框架</a></li> </ul> <div class="coltitle">最新文档</div> <ul class="lista"> <li><a href="/doc/0f19509601.html" target="_blank">幼儿园小班科学《小动物过冬》PPT课件教案</a></li> <li><a href="/doc/0119509602.html" target="_blank">2021年春新青岛版(五四制)科学四年级下册 20.《露和霜》教学课件</a></li> <li><a href="/doc/9b19184372.html" target="_blank">自然教育课件</a></li> <li><a href="/doc/3019258759.html" target="_blank">小学语文优质课火烧云教材分析及课件</a></li> <li><a href="/doc/d819211938.html" target="_blank">(超详)高中语文知识点归纳汇总</a></li> <li><a href="/doc/a419240639.html" target="_blank">高中语文基础知识点总结(5篇)</a></li> <li><a href="/doc/9d19184371.html" target="_blank">高中语文基础知识点总结(最新)</a></li> <li><a href="/doc/8a19195909.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/8519195910.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/7f19336998.html" target="_blank">高中语文基础知识点总结大全</a></li> <li><a href="/doc/7119336999.html" target="_blank">超详细的高中语文知识点归纳</a></li> <li><a href="/doc/6619035160.html" target="_blank">高考语文知识点总结高中</a></li> <li><a href="/doc/6719035161.html" target="_blank">高中语文知识点总结归纳</a></li> <li><a href="/doc/4a19232289.html" target="_blank">高中语文知识点整理总结</a></li> <li><a href="/doc/3b19258758.html" target="_blank">高中语文知识点归纳</a></li> <li><a href="/doc/2619396978.html" target="_blank">高中语文知识点归纳(大全)</a></li> <li><a href="/doc/2b19396979.html" target="_blank">高中语文知识点总结归纳(汇总8篇)</a></li> <li><a href="/doc/1419338136.html" target="_blank">高中语文基础知识点整理</a></li> <li><a href="/doc/ed19066069.html" target="_blank">化工厂应急预案</a></li> <li><a href="/doc/bd19159069.html" target="_blank">化工消防应急预案(精选8篇)</a></li> </ul> </div> </div> <script> var sdocid = "ce0325cfa9956bec0975f46527d3240c8547a1d9"; </script> <div class="clearfloat"></div> <div id="footer"> <div class="ft_info"> <a href="https://beian.miit.gov.cn">闽ICP备16038512号-3</a> <a href="/tousu.html" target="_blank">侵权投诉</a> ©2013-2023 360文档中心,www.360docs.net | <a target="_blank" href="/sitemap.html">站点地图</a><br /> 本站资源均为网友上传分享，本站仅负责收集和整理，有任何问题请在对应网页下方投诉通道反馈 </div> <script type="text/javascript">foot()</script> </div> </body> </html>

用户名：	*用户名由字母开头，后跟字母，数字或者下划线
密码：	*设置登陆密码，最少六位！
确认密码：	*请再输入你的密码
性别：	*男女请选择你的性别
邮箱地址：	*请输入你的常用邮箱，可以用此用邮箱找回密码!
基本情况:

	我已仔细阅读并同意接受用户使用协议

用户名：*	用户名由字母开头，后跟字母，数字或者下划线
密码：*	设置登陆密码，最少六位！
确认密码：*	请再输入你的密码
性别：*	男女请选择你的性别
邮箱地址：*	请输入你的常用邮箱，可以用此用邮箱找回密码!
基本情况：*
	我已仔细阅读并同意接受用户使用协议