美化网页的表单元素

Author: 周辉腾 Date: 2001年 1期

    HTML页的按钮、下拉菜单、文本框、复选框等都属于表单（form）元素。在默认情况下，浏览器将使用操作系统默认的配色、字体等方案来显示这些元素，所以我们在访问大多数站点的时候看到的表单元素都是同样的、熟悉的老面孔。这样的千篇一律久而久之不仅会让访客感到没有新意，重要的是默认样式的表单元素将游离于你的创意之外，难以和一个有着统一的配色方案等风格样式的网页或者站点融为一体。相信你也曾经见过这样的站点，他们有只有一条下划线的文本输入框、看起来很新奇别致的按钮、有着独特样式的下拉菜单等，整个页面的所有元素非常协调，简直浑然一体。知道么，这便是层叠样式单（css）的功劳。使用FrontPage2000（以下简称FP2000）你只要按照以下的说明就可以不必懂得任何css知识而轻松地实现这些美妙的效果。
　　    在FP2000中单击“格式”菜单，在弹出的下拉菜单中选择“样式”命令，这时会弹出标题为“样式”的窗口（^01040705a^1）。在“样式”窗口的左下方的“列表”下拉菜单中选择“用户定义的样式”，然后单击“新建”按钮。在弹出的标题为“新建样式”的子窗口（^01040705b^2）中的“名称（选择器）”输入框里填入你给这种样式类（class）起的名字，如“.input”（注意：用户定义的样式类前面必须加“.”）。单击左下角的“格式”按钮，我们可以看到在弹出的菜单中有这么几项：字体（定义本样式类的字体种类、颜色、修饰效果、字符间距等）、段落（段落的对齐、间距、缩进等）、边框（边框与背景修饰）、编号方式和定位。
　　    为统一样式可以先修饰一下字体。单击图2中的“字体”命令，在字体属性窗口中可以以实时预览的方式来修饰字体（^01040705c^3）中字体的设置为：字体种类为宋体、大小为9pt、颜色为深蓝色，设置完成按“确定”关闭字体属性窗口。单击图2的“边框”，这时将弹出“边框与阴影”属性窗口（^01040705d^4）。如果想要本样式类的应用对象（如文本输入框）只有一条有特定颜色的下划线，那可以按照以下步骤来：
　　    1. 在“边框”属性的“设置”选择“自定义”（即第三种方案）、“样式”选择“实线”；
　　    2. 接着在“颜色”下拉菜单中选择你要使用的颜色，如深蓝色， “宽度”文本框中填入数字1，然后单击“预览”的下边框应用按钮（^01040705g1^），这样就将下边框设置为一条宽度为一个像素、深蓝色的实线；
　　    3. 接下来再把“颜色”下拉菜单重置为“自动”，“宽度”改为“0”，应用范围为上边框和左右边框（即^01040705g2^、^01040705g3^和^01040705g4^）；
　　    4. 再单击“阴影”标签，将“背景颜色”设置为所在的网页的背景色，这样做是为了和网页背景完全融合，加强效果。
　　    5. 做完前面这几步样式的定义之后最后要做的就是将样式应用到对象中，在FP2000的“普通”编辑状态选中要应用样式的一个文本框，按鼠标右键调出“文本框属性”窗口，单击“样式”按钮，在“类”输入框里填入刚才定义的样式类，这里是“input”（注意：不是“.input”）。按“确定”继续。
　　    保存之后预览（^01040705e^5），效果怎么样？有一点需要说明，如果想所有的文本输入都具有这样的样式，按照这种方法要对每个文本框都进行步骤5的操作。如果不想这么麻烦，也可以在刚才定义样式名的时候直接命名为“input”，这样每个“<input>”就会自动使用这个样式了，但因为按钮也是一种“input”，所以它也会影响按钮。
　　    上面讲的虽然只是将文本框的样式改为只有一条下划线，但是按照类似的步骤也可以定义按钮、下拉菜单和其它表单元素，下面（^01040705f1^和^01040705f2^6）是一些运用实例。
　　
　　