网页制作案例教程 教学课件 作者 沈大林 第4章.ppt

《网页制作案例教程 教学课件 作者 沈大林 第4章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第4章表单与CSS样式表本章要点4.1表单4.2CSS样式表4.3应用实例习题4表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面，用户利用表单可以输入信息或选择选项等，然后将这些信息提交给服务器进行处理。这种查询方式叫做交互的或者叫做双向的。这些表单对象包括文本域、下拉列表框、复选框和单选按钮等。4.1.1创建表单域与设置表单域的属性1．创建与删除表单域（1）创建表单域：将光标移到要插入表单域的位置。单击“插入”（表单）栏内的“表单”按钮，或用鼠标将“插入”（表单）栏内的“表单”图标拖曳到网页文档窗口内，即可在网页编辑窗口内创建一个表单域，如图4-1-1所

2、示。单击表单域内部，将光标移到表单域内，按回车键即可将表单域调大。按Backspace键，可使表单域缩小。表单域在浏览器内是看不到的。（2）显示表单域：在表单域创建后，若看不到表单域的矩形红线，则单击选中“查看”→“可视化助理”→“不可见元素”命令，即可将表单图4-1-1创建的表单域域的矩形红线显示出来。（3）删除表单域：单击表单域的边线处，选中表单域，按Delete按键，即可删除表单域。2．设置表单域的属性4.1表单单击选中表单域，此时表单域“属性”面板如图4-1-2所示。4.1表单4.1.2插入表单对象与其他对象1．插入表单对象的方法2．文本域（也叫文本字段）的属

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

4、“属性”面板如图4-1-6所示。它与复选框“属性”面板相应选项相同。4.1表单图4-1-6单选按钮的“属性”面板图4-1-7“单选按钮组”对话框6．单选按钮组的属性设置单选按钮组也叫单选项组。单击“插入”（表单）面板中的“单选按钮组”按钮，可调出“单选按钮组”对话框，如图4-1-7所示。7．列表/菜单的属性设置列表/菜单的作用是将一些选项放在一个带滚动条的列表框内。它的“属性”面板如图4-1-8所示。4.1表单图4-1-8列表/菜单的“属性”面板8．文件域的属性设置文件域（也叫文件字段）用来让用户从中选择磁盘、路径和文件，并将该文件上传到服务器中。它的“属性”面板如图

5、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）单击“跳转菜单”按钮，屏幕会弹出一个“插入跳转菜单”对话框，如图4-1-12所示。在“文本”文本框内输入菜单选项的说明文字，在“菜单项”列表框内会显示出来。（

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

7、-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.2CSS样式表图4-2-1“CSS样式”面板图4-2-2“新建CSS样式”对话框2．创建CSS样式表创建CSS样式表操作如下。（1）调出如图4-2-2所示的“新建CSS样式”面板。选中“选择器类型”栏内的第1