在网页中创建表单和样式.docx
- 文档编号：7842884
- 上传时间：2023-01-26
- 格式：DOCX
- 页数：37
- 大小：1.34MB
在网页中创建表单和样式.docx
《在网页中创建表单和样式.docx》由会员分享，可在线阅读，更多相关《在网页中创建表单和样式.docx（37页珍藏版）》请在冰豆网上搜索。
在网页中创建表单和样式
第3章在网页中创建表单和样式
教学提示：
在Internet上使用表单主要是为了实现浏览者同Internet服务器之间的交互。
通过表单，可以将浏览者的信息发送到Internet服务器上，以供处理。
表单也可以使用户与站点的浏览者交互。
例如，用户可以询问浏览者的用户名称和电子邮件地址，或者对浏览者做一个调查，签一下访客簿，或者提供关于用户的站点信息反馈。
在Dreamweaver中，用户还可以快速地设置CSS样式，这更突出了使用Dreamweaver来格式化文本的功能。
CSS是网页设计中众多样式的集成，使用CSS可以使页面风格统一化和标准化。
CSS提供的链接功能可以让所有的网页使用同一种样式，需要改变页面的风格时，只需要改变CSS文件中对样式进行注释的内容就可以了。
本章将介绍利用Dreamweaver在页面中创建、设置表单和怎样在Dreamweaver中快速地设置CSS样式制作网页。
教学目标：
通过本章的学习，要求用户掌握创建和设置表单的方法，了解CSS样式的基本知识，掌握使用CSS样式制作网页的方法。
3.1使用表单制作动态网页
表单是网页设计者与网页的访问者进行交流的工具，其作用就是从访问Web站点的用户那里获得信息。
作为一个优秀的网页设计工具，DreamweaverMX2004为用户提供了简单快捷的表单建立方法。
表单中包括：
单选按钮、复选框、列表、菜单、文本域（单行、多行、密码）及按钮等元素。
部分元素的显示状态如图3.1所示。
列表
按钮
文本域（单行）
单选按钮
图3.1表单部分组成元素
3.1.1创建表单域
当访问者在网页的表单对象内输入信息后，这些信息将被程序处理，或者发到规定的邮箱里，于是需要给出网页一个范围。
只有在该范围内的表单对象中的信息才会被发送，这个范围就叫做表单域。
要创建表单，可执行如下操作：
（1）鼠标单击要插入表单的位置。
（2）选择【插入】|【表单】|【表单】命令，或单击【插入】面板上的【表单】选项卡中的【表单】按钮，此时在编辑区里可看到一个红色虚线的矩形区域，这个方框就是表单域，如图3.2所示。
图3.2表单域
通过表单收集到的用户反馈信息，通常是一些用分隔符（如逗号、分号等）分隔的文字资料。
这些资料可以导入到数据库或电子表格中进行统计、分析，成为具有重要参考价值的信息。
使用Dreamweaver可以创建表单，可以在表单中添加对象，还可以通过使用行为来验证用户输入信息的正确性。
此时，用户需使用文本编辑器自行编写脚本或应用程序以处理表单数据。
最常用的表单处理脚本语言是ASP，其他可选的语言还有C，Java以及JavaScript等。
3.1.2文本字段/文本区域
除了让浏览者就设计者给出的选项进行选择之外，表单还可以让浏览者自己输入文字信息，这对那些不能明确定义选项的情况十分适用。
创建文本域有两种方法：
●选择【插入】|【表单】|【文本区域】命令，创建文本域。
●在【插入】面板上单击【表单】中的【文本区域】按钮。
用户还可以利用【属性】面板对文本域进行设置。
打开【属性】面板，选取文本域，【属性】面板变成如图3.3所示状态。
图3.3文本域【属性】面板
其中：
●【文本域】：
设置当前文本域的名字。
●【字符宽度】：
设置文本域在网页中的长度。
注意，不是以像素而是以字数来定义的。
●【行数】：
设置允许用户输入的行数。
●【类型】：
其中的三个单选按钮用于设置文本域的类型，分别是单行、多行、密码，默认为多行。
单行方式适用于输入姓名、证件号码等信息，多行方式常用于输入留言，而密码方式多用于输入密码。
如果用户选择了【密码】单选框，那么这个文本域的内容就成为密码类型，它将以“*”形式显示。
●【换行】：
变成可选时，可输入换行设置（默认值为“Off”），即显示横向坐标。
注意：
【字符宽度】的数值决定文本域的可见宽度，而【行数】决定的是可输入的最大行数，两者的区别在脚本编辑时非常明显。
图3.4是文本域的例子，其中包括密码类型的显示。
图3.4一般文本域应用的例子
3.1.3列表/菜单
列表/菜单是一种非常有用的表单组件。
利用它，设计者可以提供一系列的选项，让用户从中选择一项或多项，如职业、年龄等。
两者的区别在于，列表是可滚动选项清单，且允许访问者选择多项；而菜单是弹出菜单，这种菜单仅在用户单击时才显示出来，且只能从中选择一项。
要创建菜单，可执行如下操作：
（1）选择【插入】|【表单】|【列表/菜单】命令，或单击【插入】面板表单选项卡中的【列表/菜单】按钮
。
成功创建后，在光标所在位置就会出现一个列表/菜单元素。
（2）列表/菜单的大小按照设计者给定的选项的长短而变化，因此不需要修改它的长度。
选择一个列表/菜单，其【属性】面板如图3.5所示。
（3）在【列表/菜单】文本框中输入“bm”，作为菜单的名称。
（4）在【类型】选项组中选取【菜单】单选按钮。
图3.5【属性】面板
（5）单击【列表值】按钮，弹出如图3.6所示的【列表值】对话框。
（6）在【项目标签】栏中输入项目名称，在【值】栏中输入项目的值，按“Tab”键可以方便地在名称和值之间切换。
输入项目的对话框如图3.7所示。
图3.6【列表值】对话框图3.7输入项目的【列表值】对话框
（7）可以在菜单中设置默认值。
如果用户没有在菜单中做出选择而直接提交表单，浏览器将发送默认值。
打开【属性】面板的扩展栏，在【初始化时选定】列表区中选择一个项目，将其作为默认值。
如图3.8所示，选中了“-----”选项。
图3.8设置默认值
创建列表与创建菜单十分类似，只不过在【类型】选项区中选取【列表】单选按钮，同时在【高度】文本框中设置控制列表的显示行数，在【选定范围】选项组中选中【允许多选】复选框中设置是否允许访问者作多项选择。
图3.9所示为插入了【地区】列表后的页面，下部的【属性】面板上显示了此列表的属性。
图3.9地区列表
3.1.4单选按钮与复选框
在网页中，圆形的单选按钮和方形的复选框也是很常见的元素。
设计者可以通过这两个组件给浏览者提供一系列选项。
如果允许浏览者选择一个或多个设计者提供的选项时，则需要用复选框来实现，例如考试题中的多项选择等。
1.单选按钮
对于只能允许浏览者在多个选择中选取一个选项时，设计者应该使用单选按钮。
这种按钮只允许浏览者在一组选项中做出惟一的选择，如在通常的问卷调查中，性别选项中的“男”或“女”；在确认选项中的“是”或“否”等。
如果选择之后需作调整，可选择另外一个而取消前面的选择。
插入单选按钮的方法如下：
（1）单击要插入按钮的位置。
（2）在【插入】面板的【表单】选项卡上单击【单选按钮】按钮,也可选择【插入】|【表单】|【单选按钮】命令，光标所在位置将出现一个单选按钮元素
。
（3）如需修改单选按钮属性，选取单选按钮，打开如图3.10所示的【属性】面板。
图3.10设置单选按钮属性
其中：
●【单选按钮】：
设置单选按钮组的名字。
●【选定值】：
设置选中单选按钮时的值。
●【初始状态】：
设置单选按钮的初始状态。
注意：
如果希望单选按钮组实现单选功能，应指定单选按钮组内的每个单选按钮相同的组名，否则网页将会把它们当成不同的组处理，而每个组都可以作一个选择。
图3.11中即显示了插入了【性别】单选按钮后的页面。
下面的【属性】面板上显示了文字“男”前面的单选按钮的属性。
图3.11插入单选按钮
2.插入复选框
插入复选框的方法与插入单选按钮的方法相似：
选择【插入】|【表单】|【复选框】命令，或者在【插入】面板的【表单】组上单击【复选框】按钮，光标所在位置出现一个复选框元素
。
在【属性】面板中可以设置复选框的属性，如图3.12所示。
图3.12设置复选框属性
插入复选框后，在它的旁边添加一些解释是非常必要的，图3.13中即显示了作为“娱乐”组的多个复选框。
图3.13插入复选框
注意：
复选框默认的起始状态是未选中状态，但用户也可以重新设置其状态。
3.1.5按钮
按钮对于表单来说，是必不可少的组件。
当设计好表单后，还需为用户考虑发送已填写完的表单信息或重新填写表单信息的情况。
这时就需要为用户提供一个使表单发送、复位的命令按钮。
如果浏览者不单击【提交】按钮，在服务器端就不会产生交互的作用。
当然，网页中的按钮除了上面两种作用之外，还可以触发一些其他的操作。
网页中的按钮也被分成三种不同的功能，以供设计者选择：
●提交表单：
将表单域内已填写的信息发送到指定的服务器地址或邮件地址。
●重设表单：
清除表单域内已填写的信息及恢复表单域内的初始设置信息。
●自定义按钮：
允许网页设计者定义的功能在脚本语言中实现。
下面介绍如何设置按钮触发命令。
1.插入一般按钮
（1）将光标定位在表单域中要插入按钮的地方。
（2）在【插入】面板上单击【表单】组中的【按钮】按钮
，或选择【插入】|【表单】|【按钮】命令，即在表单域内插入提交按钮
，并打开如图3.14所示的【属性】面板。
图3.14插入按钮
（3）在【按钮名称】文本框内输入按钮的名称。
（4）在【动作】选项区选择按钮类型,即设置按钮触发的动作。
系统默认选定【提交表单】动作类型。
在【标签】文本框更改“提交”为“同意”，表示同意提交表单。
（5）再次插入一个按钮，设置其“动作”为“重设表单”，标签为【不同意】。
表示当对表单中填写的内容不满意时，重新填写表单。
插入两个按钮后的页面如图3.15所示。
图3.15插入按钮后的页面
这样就完成了一般按钮的创建和设置工作。
2.插入图像按钮
如果觉得按钮的外形太过呆板，与自己的网页风格不匹配，DreamweaverMX2004还可以添加图像按钮，其方法是：
（1）在【插入】面板上单击【表单】组中的【图像域】按钮
，或选择【插入】|【表单】|【图像域】命令，弹出如图3.16所示的对话框。
图3.16【选择图像源文件】对话框
（2）选择所需要的按钮图片，插入图片并打开【属性】面板，如图3.17所示。
（3）设置图像按钮的属性。
图片按钮的具体设置与普通按钮一样，这里不再赘述。
要注意的是，当使用者单击用户已指定为提交按钮的图片时，表单同样被提交。
3.制作实例
综合上面介绍的各种组件，制作一个如图3.18所示的例子。
操作步骤如下：
（1）创建空白的表单域。
（2）在表单域中输入“密码”、“确认密码”、“性别”和“生日”等文字。
（3）按3.1.2节文本域的创建方法，创建“姓名”、“密码”和“确认密码”的文本域。
图3.17设置图像按钮的属性
图3.18一个简单的例子
（4）分别在“性别”的两个选项前插入一个单选按钮，然后打开【属性】面板，在【单选按钮】下方的文本框中输入“sex”，在【选定值】的文本框中输入“male”或“female”。
（5）添加上“提交”与“重设”两个按钮，具体设置参照3.1.4节。
这样就完成了一个简单的表单页面。
灵活运用表单组件，就可以制作出美观且合理的表单页面。
3.1.6隐藏区域
当信息从表单发送到脚本程序中时，设计者往往要发送一些不想让用户看见的内容，这就要用到隐藏框。
隐藏框就是用来提供不可见元素的传输渠道。
要在编辑器中观察到隐藏区域，可在【插入】面板上单击【表单】选项卡中的【隐藏域】按钮，或在【查看】菜单中选取【可视化助理】|【不可见元素】命令。
插入隐藏区域后，文档窗口中以
图标表示隐藏域。
可在【属性】面板的【隐藏区域】文本框中输入隐藏区域的名称，在【值】中输入值，其HTML语句如下：
插入隐藏区域后的窗口如图3.19所示。
注意：
访问者浏览时也不能看见隐藏区域，但是提交表单时，表单将会连同隐藏区域内的数值一起发送。
图3.19插入隐藏区域
3.1.7文件域
文件域能将任意存储的计算机文件附加到表单上，并与其他数据一起发送。
与单行的文本域相比，文件域多了一个【浏览】按钮，其添加方法与前面所介绍的其他表单操作相似。
3.1.8跳转菜单
在网站上不可能使用一系列按钮作为主要的导航工具，解决的办法是使用跳转菜单。
跳转菜单是一种特别的菜单形式，它利用表单元素形成各种选项的列表。
当浏览者在其中选择了一个选项时，该窗口就会跳转到指定的页面。
创建跳转菜单的步骤如下：
（1）选择【插入】|【表单】|【跳转菜单】命令，或在【插入】面板上单击【表单】选项卡中的【跳转菜单】按钮
，弹出【插入跳转菜单】对话框，如图3.20所示。
图3.20【插入跳转菜单】对话框
（2）在【文本】文本框中输入第一条项目的标签，按下Tab键，Dreamweaver会自动更新列表。
当在【文本】文本框中输入homepage时，【菜单项】中的列表也变为homepage。
（3）在【选择时，转到URL】文本框中输入目标页面路径和文件名（可以通过浏览按钮选择），本例中输入“index.htm”。
然后在【打开URL于】下拉列表框中设置页面的目标地址。
（4）要添加或删除一个选项，可分别使用
、
按钮；要调整跳转菜单中各选项的位置，单击
或者
按钮。
（5）在【菜单名称】中设置菜单的名称。
（6）在【选项】选项区中，如果选中【菜单之后插入前往按钮】复选框，则在菜单后面增加触发跳转的按钮；如果选中【更改URL后选择第一个项目】复选框，在跳转后把菜单第一个选项设为默认选项。
（7）单击【确定】按钮，就可在指定的位置看到跳转菜单。
（8）插入了跳转菜单后的网页如图3.21所示。
图3.21插入跳转菜单后的网页
3.1.9表单属性
表单属性用于修饰所创建的表单，使它更加美观、醒目，也就是告诉计算机如何按照用户的意愿处理所创建的表单。
利用插入面板中的表单面板，可以给表单添加文本域、按钮、复选框、单选按钮、弹出菜单、列表、文件域、图像域、隐藏域和跳转菜单等对象。
设置表单属性的方法如下：
（1）选取整个表单，显示如图3.22所示的属性栏。
图3.22表单属性栏
（2）在【表单名称】文本框中输入表单的名称，例如“personal”。
（3）在【方法】下拉列表中设置递交的方式，有GET，POST和默认三种方式。
图3.22为POST方式。
注意，GET方式主要用于URL参数的传递，而POST方式主要用于表单的传输。
（4）在【动作】文本框中输入表单提交的服务器文件地址“PersonalReg.asp”。
注意：
用户在插入表单组件时，要注意将该组件插入到表单域内，否则，该表单组件中的内容是不能发送出去的。
当然一个页面可以有不只一个表单域。
制作完所有的表单元素后，可以在浏览器中预览表单效果。
填写完所需的内容后，即可单击【同意】按钮提交表单，或者单击【不同意】重新填写。
3.2使用CSS样式制作动态网页
随着网页技术的日趋成熟和网络的进一步普及，人们对网页的要求已经不仅仅满足于在网络上发布信息。
人们开始对网页的排版、格式和设计有了越来越高的要求，网页已经一步步地接近了一种全新的艺术表现形式。
1996年底诞生了一种称为样式表（StyleSheets）的技术，全称为层叠样式表（CascadingStyleSheets，简称CSS）。
样式为控制文本或文本区外观的一组格式属性，样式表则包括文档中的所有格式，而外部样式表则可同时控制若干文档的格式。
样式表可以定义HTML的标签格式，也可定义由class属性标识的文本区域以及符合CSS规则的文本等。
但是，级联样式表的某些属性在不同浏览器中所显示的外观是不一样的。
作为HTML的扩充，CSS具有与HTML不同的语法，它可以嵌套在HTML里为其所引用，从而对HTML中的各个元素的样式进行更加精确、更加全面的定义。
3.2.1CSS基础
在建立样式表之前，必须了解一些HTML的基础知识。
HTML语言由标志和属性构成，CSS也是如此。
样式表基本语法：
HTML标志{标志属性：
属性值；标志属性：
属性值；标志属性：
属性值；……}
放置样式表有页面内放置、外部引用和外部导入三种不同的方法。
现在首先讨论在HTML页面内放置样式表的方法。
这个方法必须把样式表信息包括在标记中，为了使样式表在整个页面中产生作用，应把该组标记及其内容放到
和中去。例如要设置HTML页面中所有P标题字显示为蓝色，其代码如下：
--
P{color:
blue}
-->
…页面内容…
注意：
一个文学网站
组稿俱乐部个人工作室社区论坛文学频道