第4章表单与CSS样式表.ppt

《第4章表单与CSS样式表.ppt》由会员分享，可在线阅读，更多相关《第4章表单与CSS样式表.ppt（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第4章表单与CSS样式表 Still waters run deep.流静水深流静水深,人静心深人静心深 Where there is life,there is hope。有生命必有希望。有生命必有希望 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面，用户利用表单可以输入信息或选择选项等，然后将这些信息提交给服务器进行处理。这种查询方式叫做交互的或者叫做双向的。这些表单对象包括文本域、下拉列表框、复选框和单选按钮等。4.1.1 创建表单域与设置表单域的属性创建表单域与设置表单域的属性1创建与删除表单域（1）创建表单域：将光标移到要插入表单域的位置。单击“插入”（表单）栏内的“表

2、单”按钮，或用鼠标将“插入”（表单）栏内的“表单”图标拖曳到网页文档窗口内，即可在网页编辑窗口内创建一个表单域，如图4-1-1所示。单击表单域内部，将光标移到表单域内，按回车键即可将表单域调大。按Backspace键，可使表单域缩小。表单域在浏览器内是看不到的。（2）显示表单域：在表单域创建后，若看不到表单域的矩形红线，则单击选中“查看”“可视化助理”“不可见元素”命令，即可将表单图4-1-1 创建的表单域域的矩形红线显示出来。（3）删除表单域：单击表单域的边线处，选中表单域，按Delete按键，即可删除表单域。2设置表单域的属性 4.1 表表 单单 单击选中表单域，此时表单域“属性”面板如图

3、4-1-2所示。4.1 表表 单单 4.1.2 插入表单对象与其他对象插入表单对象与其他对象1插入表单对象的方法 2文本域（也叫文本字段）的属性设置表单中经常使用文本域，它可以是单行，也可以是多行，它用于接收任何格式的文本、数字和字符。文本域的“属性”面板如图4-1-3所示，各选项的作用如下。图4-1-2 表单域“属性”面板图4-1-3 文本域 的“属性”面板 3按钮的属性设置按钮用来制作“提交”和“重置”按钮，还可以调用函数。它的“属性”面板如图4-1-4所示。4.1 表表 单单 4复选框的属性设置复选框有选中和未选中两种状态，多个复选框允许多选。它的“属性”面板如图4-1-5所示。图4-1

4、-4 按钮的“属性”面板图4-1-5 复选框的“属性”面板 5单选按钮的属性设置单选按钮也叫单选项，一组单选按钮中只允许选中一个。它的“属性”面板如图4-1-6所示。它与复选框“属性”面板相应选项相同。4.1 表表 单单 图4-1-6 单选按钮 的“属性”面板图4-1-7 “单选按钮组”对话框 6单选按钮组的属性设置 单选按钮组也叫单选项组。单击“插入”（表单）面板中的“单选按钮组”按钮，可调出“单选按钮组”对话框，如图4-1-7所示。7列表/菜单的属性设置列表/菜单的作用是将一些选项放在一个带滚动条的列表框内。它的“属性”面板如图4-1-8所示。4.1 表表 单单 图4-1-8 列表/菜单的

5、“属性”面板 8文件域的属性设置 文件域（也叫文件字段）用来让用户从中选择磁盘、路径和文件，并将该文件上传到服务器中。它的“属性”面板如图4-1-9所示。9图像域的属性设置图像域用来设置图像域内的图像。它的“属性”面板如图4-1-10所示。4.1 表表 单单 图4-1-9 文件域的“属性”面板 图4-1-10 图像域的“属性”面板 10隐藏域的属性设置隐藏域提供了一个可以存储表单主题、数据等的容器。在浏览器中看不到它，但处理表单的脚本程序时可以调用它的内容。其“属性”面板如图4-1-11所示，4.1 表表 单单 图4-1-11 隐藏域的“属性”面板 11跳转菜单的使用（1）单击“跳转菜单”按钮

6、，屏幕会弹出一个“插入跳转菜单”对话框，如图4-1-12所示。在“文本”文本框内输入菜单选项的说明文字，在“菜单项”列表框内会显示出来。（2）、和按钮的作用与图4-1-7所示的“单选按钮组”对话框中的按钮作用一样。（3）在“选择时，转到URL”文本框内输入要跳转的文件路径与文件字。也可以单击“浏览”按钮，调出“选择文件”对话框，选择链接的文件。（4）在“打开URL于”下拉列表框内选择在何处打开文件。（5）在“菜单名称”文本框内输入跳转菜单的名称。（6）“选项”栏有两个复选框。选中“菜单之后插入前往按钮”复选框后，在菜单的后面会增加一个按钮。选中“更改URL后选择第一个项目”复选框后，可设置跳转

7、后重新定义菜单第一个选项为默认选项。（7）单击“确定”按钮，可退出该对话框，页面会显示一个跳转菜单，如图4-1-13所示。（8）单击选中创建的跳转菜单后，其“属性”面板与图4-1-8基本一样。4.1 表表 单单 4.1 表表 单单 图4-1-12 “插入跳转菜单”对话框 图4-1-13 在页面内插入的跳转菜单 4.2.1 创建创建CSS样式表与编辑样式表对话框样式表与编辑样式表对话框 1“CSS样式”面板单击“窗口”“CSS样式”命令，调出“CSS样式”面板（也叫CSS样式表编辑器），如图4-2-1所示。4.2 CSS样式表样式表 图4-2-1 “CSS样式”面板 图4-2-2 “新建CSS样

8、式”对话框 2创建CSS样式表创建CSS样式表操作如下。（1）调出如图4-2-2所示的“新建CSS样式”面板。选中“选择器类型”栏内的第1个单选项，在“名称”下拉列表框内输入一个样式表的名字，名字必须以“.”开始，如“.CSS1”。（2）单击该对话框中的“确定”按钮，即可退出该对话框，调出“保存样式表文件为”对话框。利用该对话框，输入CSS样式表名称，单击“保存”按钮，将新建的空的CSS样式表保存。同时，会弹出“.CSS1的CSS样式定义（在CSS1.css中）”对话框，如图4-2-3所示。利用该对话框可以进行样式表内各个对象属性的定义。（3）定义完后，单击“确定”按钮，即可完成样式表的定义。

9、此时，在“CSS样式表”面板的显示窗口内，会显示出新创建的样式表的名称。4.2 CSS样式表样式表 4.2 CSS样式表样式表 图4-2-3 “.CSS1的CSS样式定义（在CSS1.css中）”对话框 3“新建CSS样式”对话框中其他各选项的含义（1）“标签”单选项：选中它后，上边的“名称”下拉列表框变为“标签”下拉列表框，它提供了各种HTML语言的标记，可利用它对HTML标记重新定制，改变它们的属性。（2）“高级”单选项：单击选中它后，上边的“名称”下拉列表框变为“选择器”下拉列表框。“选择器”下拉列表框有4个选项：link（一般链接）、visited（访问过的链接字）、hover（当前的

10、链接字）和active（被激活的链接字）。它们都是针对链接字的。针对这4种状态，可设置它们的属性，使链接字在各种状态下有不同特性。（3）“定义在”栏：用来确定CSS样式定义在文件（.css）还是定义在当前文档中。4.2 CSS样式表样式表 4.2.2 定义CSS样式表1定义样式表中的文字属性单击选中图4-2-3所示的“.CSS1的CSS样式定义（在CSS1.css中）”对话框左边“分类”栏内的“类型”选项，此时的对话框如图4-2-3所示。利用该对话框可以设置CSS样式的字体、大小、样式和颜色等。单击“应用”按钮，可将设置的样式应用到页面中。2定义样式表中的背景属性单击图4-2-3所示对话框左边

11、“分类”栏内的“背景”选项，此时的“.CSS1的CSS样式定义（在CSS1.css中）”对话框的“背景”栏如图4-2-4所示。4.2 CSS样式表样式表 图4-2-4 “背景”栏 图4-2-5 “区块”栏 3定义样式表中的区块属性单击图4-2-3所示对话框左边“分类”栏内的“区块”选项，此时对话框的“区块”栏如图4-2-5所示。4定义样式表中的方块属性单击图4-2-3所示对话框左边“分类”栏内的“方块”选项，此时的对话框右边的“方块”栏如图4-2-6所示。5定义样式表中的边框属性单击图4-2-3所示对话框左边“分类”栏内的“边框”选项，此时对话框右边的“边框”栏如图4-2-7所示。4.2 CS

12、S样式表样式表 图4-2-6 “方块”栏 图4-2-7 “边框”栏 6定义样式表中的列表属性单击图4-2-3所示对话框左边“分类”栏内的“列表”选项，此话框右边的“列表”栏如图4-2-8所示。7定义样式表中的定位属性 单击图4-2-3所示对话框左边“分类”栏内的“定位”选项，此时对话框右边的“定位”栏如图4-2-9所示。4.2 CSS样式表样式表 图4-2-8 “列表”栏图4-2-9 “定位”栏 8定义样式表中的扩展属性单击图4-2-3所示对话框左边“分类”栏内的“扩展”选项，此时对话框右边的“扩展”栏如图4-2-10所示。4.2 CSS样式表样式表 图4-2-10 “扩展”栏 图4-2-11 原图 图4-2-12“Blur”滤镜处理 图4-2-13 垂直翻转 图4-2-14 水平翻转 图4-2-15 滤镜处理 图4-2-16 滤镜处理