《网页设计实用技术》第4章网页设计高级应用.pptx

第4章 网页设计高级应用制作：蔡宗吟第4章 网页设计高级应用4.1 表单4.2 模板4.3 网页特效4.1.1 表单概述表单是用于实现浏览者与网站之间信息交互的一种网页对象。在Internet中，使用表单可以帮助服务器从用户那里收集信息与反馈，例如收集用户资料、获取用户订单等。一个完整的表单包含两个部分：一个是在网页中进行描述的表单对象；另一个是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。4.1.2 表单对象1．插入表单对象的方法（1）选择“插入”面板中“表单”列表中的相关命令来插入表单对象。（2）选择“插入”→“表单”命令，在其中选择要插入对象的相应按钮，如图所示。4.1.2 表单对象2．表单对象介绍（1）表单 ：在网页中插入表单域。（2）文本字段 ：在表单中插入文本域。文本域可以接受任何类型的字母数字项。输入的文本可以显示为单行、多行、项目符号或星号（用于保护密码）。（3）隐藏域 ：存储用户输入的信息，如姓名、电子邮件地址或偏爱的查看方式，并在该用户下次访问此站点时使用这些数据。（4）文本区域 ：可以输入多行文本。在创建多行文本字段时，指定用户可以输入的文本行数。（5）复选框 ：在表单中插入复选框。复选框允许在一组选项中选择多项，有选中和未选中两种状态。（6）单选按钮 ：在表单中插入单选按钮。单选按钮代表互相排斥的选择。选择一组中的某个按钮，就会取消选择该组中的所有其他按钮。例如，用户可以选择“是”或“否”。4.1.2 表单对象（7）单选按钮组 ：插入共享同一名称的单选按钮的集合。在一组选项中只能选择其中一个。（8）列表/菜单 ：可以在列表中创建用户选项。“列表”选项在滚动列表中显示选项值，并允许用户在列表中选择多个选项。“菜单”选项在弹出式菜单中显示选项值，而且只允许用户选择一个选项。（9）跳转菜单 ：插入可导航的列表或弹出式菜单。跳转菜单允许插入一种菜单，在这种菜单中的每个选项都链接到文档或文件。（10）图像域 ：可以在表单中插入图像。可以使用图像域替换“提交”按钮，以生成图形化按钮。（11）文件域 ：在文档中插入空白文本域和“浏览”按钮。文件域使用户可以浏览到其硬盘上的文件，并将这些文件作为表单数据上传到服务器。（12）按钮 ：在表单中插入文本按钮。按钮在单击时执行任务，如提交、重置表单或调用某个函数。可以为按钮添加自定义名称或标签，或者使用预定义的“提交”或“重置”标签之一。（13）标签 ：在文档中给表单加上标签，以label/label形式开头和结尾。（14）字段集 ：在文本中设置文本标签。4.1.2 表单对象3．设置表单对象将插入点放在希望表单出现的位置，选择“插入”→“表单”→“表单”命令，或者选择“插入”工具栏中的“表单”类别，然后单击“表单”按钮。其代码结构如下：form id=form1 name=form1 method=post action=表单控件/form4.1.3 表单应用实例4.1.3 表单应用实例1．新建网页新建一个网页文件，名为register.html，在“文档”工具栏中将网页的标题设置为“用户注册”。2．插入表单单击“插入”面板中“表单”区域中的“表单”图标，在该页中插入一个表单域，如图所示。4.1.3 表单应用实例3．插入布局表格（1）在表单域中插入一个10行2列的表格。表格宽度为720像素，表格间距设置为1像素，填充为5像素。（2）将第一行合并，插入register_title.png，并输入“用户注册”文字信息，设置图片的对齐方式为“绝对居中”。（3）在第2～7行的第1列的单元格中分别输入文本信息：用户昵称、创建密码、确认密码、性别、爱好、电子邮箱、出生年月。水平居右对齐。4.1.3 表单应用实例4．插入单行文本框（1）插入文本字段。文本框的标记为input，其基本格式如下：input type=text name=文本框名称 id=文本框ID值 value=默认值 /4.1.3 表单应用实例（2）选中文本框，在“属性”面板中修改文本框属性，将此文本框命名为“username”文本域：文本域下方的文本框中可以输入文本框的名称。在命名时最好使用英文或数字，不能包含特殊字符和空格，可以使用下划线“_”。不能与网页中的其他对象重名。名称最好具有代表性，如账号文本框可以命名为“name”。字符宽度：用来设置文本字段的宽度，默认状态为24个字符长度。最多字符数：设置单行文本所能填写的最多字符数。初始值：用于设置默认状态下在文本框中显示的字符。4.1.3 表单应用实例5．插入密码文本框控件密码框也是使用input标记，只是“type”值为“password”。其格式如下：input type=password