网页制作三合一教程(第四章)

4.1 “计算机设计竞赛参赛 人员登记表”网页
4．单选按钮组属性的设置 图4-1-6 “单选按钮组”对话框 单选按钮组也叫单选项组。单击“插入”（表单）栏中的“单选按钮组”按 钮，弹出“单选按钮组”对话框，如图4-1-6所示。利用该对话框可以设置 单选按钮组中单选按钮的个数、名称和初始值。如果要增加选项，可单击按 钮；如果要删除选项，可单击选中要删除的选项，再单击按钮。如果要调整 选项的显示次序，可选中要移动的选项，再单击或按钮。它的“属性”栏如 图4-1-5所示。
4.1 “计算机设计竞赛参赛 人员登记表”网页
图4-1-10 在页面内的跳转菜单 （7）单击“确定”按钮，可退出该对话框，页面会显示一个跳转菜单。按 照如图4-1-9所示进行设置后，浏览器中显示的跳转菜单如图4-1-10所示。 （8）单击选中创建的跳转菜单后，其“属性”栏与图4-1-8基本一样。
4.2 使用样式表网页
4.1 “计算机设计竞赛参赛 人员登记表”网页
①“默认”：采用浏览器的默认值。 ②“关”：当输入的文字超过文本框的宽度时，不换行，会出现滚动条。 ③“虚拟”：当输入文字超过文本框宽度时会自动换行，向服务器传输数据 时无回车符。 ④“实体”：当输入的文字超过文本框的宽度时，会自动加入回车符，换行。 2．复选框属性的设置 复选框有选中和未选中两种状态，多个复选框允许多选。它的“属性”栏如 图4-1-4所示，各选项的作用如下。 （1）“选定值”文本框：用来输入复选框选中时的数值，通常为1或0。 （2）“初始状态”栏：它有两个单选钮，用来设置复选框的初始状态。
4.2 使用样式表网页
4.2.1 创建CSS样式表
1．CSS样式表编辑器 CSS样式表可以对页面布局、背景、字体大小、颜色和表格等属性进行统一 的设置，然后再应用于页面各个相应的对象。单击“窗口”→“CSS样式” 菜单命令，弹出“CSS样式”面板（也叫CSS样式表编辑器），如图4-2-1所 示。其中各选项的作用如下。 （1）显示窗口：显示所有样式表的名称，“（未定义样式）”表示没有样 式。 （2）“附加样式表”按钮：单击它，可以弹出“链接外部样式表”对话框， 如图4-2-2所示。再单击“浏览”按钮，可弹出“选择样式表文件”对话框， 用来导入外部的样式表（文件的扩展名为.CSS）。
4.1 “计算机设计竞赛参赛 人员登记表”网页
3．插入表单对象的方法 （1）将光标移到要插入表单对象的表单中，再插入表单对象。插入表单对 象的方法与插入表单的方法一样。 （2）将光标移到要插入表单对象的位置，然后单击“插入”（表单）栏中 的相应按钮，即可在光标处插入一个相应的表单对象。另外，单击“插 入”→“表单”菜单命令，弹出它的下一级菜单。根据要插入的表单对象类 别，单击菜单内的菜单命令也可插入表单对象。 表单对象的“属性”栏中都有一个名称文本框，用来输入表单对象的名称， 该名称可在程序中使用，以指定表单对象。
4.2 使用样式表网页
图4-2-1 “CSS样式”面板
图4-2-2 “链接外部样式表”对话框
4.2 使用样式表网页
（3）“新建CSS样式”按钮：单击它，可以弹出“新建CSS样式”对话框， 如图4-2-3所示。利用它可以建立新的样式。 （4）“编辑样式”按钮：在“CSS样式”面板中选中一种样式后，它才有 效。单击它，可弹出能进行样式表编辑的对话框（例如，“.style1的CSS样 式定义”对话框，如图4-2-4所示），利用该对话框可以对.st算机设计竞赛参赛 人员登记表”网页
图4-1-8 列表/菜单的“属性”栏
4.1 “计算机设计竞赛参赛 人员登记表”网页
（1）“类型”栏：它有“菜单”和“列表”两个单选钮。选择“菜单”单 选钮就是下拉列表框；选择“列表”单选钮后，其右边的各选项会变为可选 项，此时的列表框右边会产生滚动条。 （2）“高度”文本框：用来输入列表的高度值，即可以显示的行数。 （3）“选定范围”复选框：选中它后，表示列表中的各选项可以同时选择 多项。 （4）“初始化时选定”列表框：用来设置第一次调出该菜单时，菜单中默 认的选中项。 （5）“列表值”按钮：单击该按钮，弹出“列表值”对话框，与图4-1-6相 似，使用方法基本相同。利用该对话框可以输入菜单或列表内显示的选项内 容（在“标签”栏内），以及输入此选项提交后的返回值（在“值”栏内）。 7．跳转菜单属性的设置
本节要完成的项目是制作多处使用了CSS样式的网页。通过该网页的制作， 可以掌握创建、定义CSS样式表和应用CSS样式的方法等。 在以前各章节中，对页面对象的各种属性都是一个个独立设置的。如果网页 中有多处的对象都采用同样的属性，那么每个对象都需要进行相同的属性设 置，这无疑会给网页制作和更新带来重复性的工作，会使网页字节数过大。 样式表正是针对上述问题提出的。利用样式表，可以对页面中经常出现的相 同或相近属性的对象进行整体属性设置，即建立样式表。
4.1 “计算机设计竞赛参赛 人员登记表”网页
图4-1-4 复选框的“属性”栏
4.1 “计算机设计竞赛参赛 人员登记表”网页
3．单选按钮属性的设置 单选按钮也叫单选钮，一组单选按钮中只允许选中一个。它的“属性”栏如 图4-1-5所示。该“属性”栏内的选项与复选框“属性”栏相应选项的作用 一样。
图4-1-5 单选按钮的“属性”栏
4.1 “计算机设计竞赛参赛 人员登记表”网页
图4-1-6 “单选按钮组”对话框
4.1 “计算机设计竞赛参赛 人员登记表”网页
5．按钮属性的设置 按钮用来制作“提交”和“重置”按钮，还可以调用函数。它的“属性”栏 如图4-1-7所示，各选项的作用如下。
图4-1-7 按钮的“属性”栏
4.1 “计算机设计竞赛参赛 人员登记表”网页
4.1 “计算机设计竞赛参赛 人员登记表”网页
图4-1-2 表单域“属性”栏
4.1 “计算机设计竞赛参赛 人员登记表”网页
（1）“表单名称”文本框：在该文本框内输入表单域的名字。表单域的名 字可用于JavaScript和VBScript等脚本语言中，这些脚本语言可控制表单域的 属性。 （2）“动作”文本框和按钮：利用它们可以输入脚本程序或含有脚本程序 的HTML文件。 （3）“方法”下拉列表框：用来选择客户端与服务器之间传送数据采用的 方式。3个选项是：“默认”、“GET”（获得，即追加表单值到URL，并发 送服务器GET请求）和“POST”（传递，在消息正文中发送表单的值，并发 送服务器POST请求）。 （4）“类”下拉列表框：其中有“重命名”、“管理样式”和创建的CSS 样式名称等多个选项，可以用来选择CSS样式、给CSS样式更名和创建新的 CSS样式等。
（1）“字符宽度”文本框：文本域的宽度，即可显示字符的最多个数。 （2）“类型”栏：该栏有3个单选钮，用来选择“单行”、“多行”或“密 码”文本域。密码文本域的特点是：当用户输入文字时，密码文本域内显示 的不是这些文字，而是一行“*”。选择“多行”单选钮时，其“属性”栏 会发生变化：“初始值”文本框变为带滚动条的多行文本框，同时“换行” 下拉列表框变为有效，“字符宽度”文本框变为“行数”文本框，用来输入 文本框的行数。 （3）“最多字符数”文本框：允许输入的字符个数，可以比文本框宽度大。 （4）“初始值”列表框：用来输入文本框的初始内容。 （5）“换行”下拉列表框：只有在选择了“多行”单选钮后它才有效。 “换行”下拉列表框内有4个选项，它们的含义如下。
第4章表单和样式表 本章要点
4.1 “计算机设计竞赛参赛人员登记表”网页 4.2 使用样式表网页

4.1 “计算机设计竞赛参赛 人员登记表”网页
本节要完成的项目是制作一个以表单为主的网页。通过该网页的制作，可以 掌握创建和编辑表单的方法等。表单是用户利用浏览器对Web站点网络数据 库进行查询的一种界面，用户利用表单可以输入信息或选择选项等，然后将 这些信息提交给服务器进行处理。这些表单对象包括文本域、下拉列表框、 复选框和单选钮等。 表单域是放置表单对象的区域，只有表单域内的表单才可以将它的信息传送 出去，才可以接收外来的信息。既然表单的操作是用户与服务器交互的操作， 这就涉及到服务器方面的操作，而服务器方面的操作是通过服务器的程序来 实现的。
4.1 “计算机设计竞赛参赛 人员登记表”网页
4.1.1 表单域和插入表单对象的方法
1．创建与删除表单域 （1）创建表单域。将光标移到要插入表单域的位置。单击“插入”（表单） 栏内的“表单”按钮，即可在网页编辑窗口内创建一个表单域，如图4-1-1 所示。
图4-1-1 创建的表单域
4.1 “计算机设计竞赛参赛 人员登记表”网页
4.1 “计算机设计竞赛参赛 人员登记表”网页
4.1.2 表单对象
1．文本域属性的设置 文本域也叫文本字段。表单中经常使用文本域。它可以是单行，也可以是多 行，它用于接收文本、数字和字符。文本域的“属性”栏如图4-1-3所示， 各选项的作用如下。
图4-1-3 文本域的“属性”栏
4.1 “计算机设计竞赛参赛 人员登记表”网页
（1）“标签”文本框：用来输入按钮上的文字。 （2）“动作”栏：它有3个单选钮，用来选择单击该选项后引起的动作类型。 ①“提交表单”单选钮：选中它后，可以向服务器提交整个表单。 ②“重设表单”单选钮：选中它后，可以取消前面的输入，复位表单。 ③“无”单选钮：选中它后，表示是一般按钮，可用来调用脚本程序。 6．列表/菜单属性的设置 列表/菜单的作用是将一些选项放在一个带滚动条的列表框内。它的“属性” 栏如图4-1-8所示，其中各选项的作用如下。
4.1 “计算机设计竞赛参赛 人员登记表”网页
图4-1-9 “插入跳转菜单”对话框
4.1 “计算机设计竞赛参赛 人员登记表”网页
（2）、、和按钮的作用与如图4-1-6所示按钮的作用一样。 （3）在“选择时，前往的URL”文本框内输入要跳转的文件路径与文件字。 也可以单击“浏览”按钮，弹出“选择文件”对话框，选择链接的文件。 （4）在“打开URL于”下拉列表框内选择在何处打开文件。 （5）在“菜单名称”文本框内输入跳转菜单的名称。 （6）“选项”栏有两个复选框。选中“菜单之后插入前往按钮”复选框后， 在菜单的右边会增加一个“前往”按钮。选中“更改URL后选择第一个项目” 复选框后，可设置跳转后重新定义菜单第一个选项为默认选项。