《超链接与框架网页及其.ppt》由会员分享，可在线阅读，更多相关《超链接与框架网页及其.ppt（32页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第十四章第十四章 表单、超链接与框架表单、超链接与框架网页及其应用网页及其应用教学内容教学内容重点：重点：1.表单中的文本域、复选框、单选按钮、列表表单中的文本域、复选框、单选按钮、列表/菜单菜单的使用的使用2.超链接的使用超链接的使用3.框架的使用框架的使用难点：难点：1.制作发送电子邮件表单、制作跳转菜单和在网页制作发送电子邮件表单、制作跳转菜单和在网页中加入搜索引擎等较为高级的内容中加入搜索引擎等较为高级的内容2.框架的应用框架的应用表单：是实现网页互动的元素，与客户端和服务器端表单：是实现网页互动的元素，与客户端和服务器端脚本进行结合使用，可以实现互动性。表单支持客脚本进行结合使用，可
2、以实现互动性。表单支持客户端户端-服务器关系中的客户端。当访问者在服务器关系中的客户端。当访问者在Web浏浏览器中显示的表单中输入信息，然后单击【提交】览器中显示的表单中输入信息，然后单击【提交】按钮时，这些信息将被发送到服务器，服务器端脚按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序对这些信息进行处理，最后服务器端本或应用程序对这些信息进行处理，最后服务器端将处理结果返回给客户端。用于处理表单数据的常将处理结果返回给客户端。用于处理表单数据的常用服务器端技术包括用服务器端技术包括cgi、asp/、jsp、PHP等。等。表单表单Dreamweaver提供的表单对象包括表单、文提供的表
3、单对象包括表单、文本字段、隐藏域、文本区域、复选框、单选本字段、隐藏域、文本区域、复选框、单选按钮、单选按钮组、列表菜单、跳转菜单、按钮、单选按钮组、列表菜单、跳转菜单、图像域、文件域、按钮、标签、字段集等。图像域、文件域、按钮、标签、字段集等。可以通过执行可以通过执行【插入插入】-【表单表单】命令来插命令来插入表单对象，也可以单击入表单对象，也可以单击“插入插入”栏的栏的“表表单单”类别中的表单对象按钮。类别中的表单对象按钮。表单对象表单对象创建表单创建表单（1）新建一个网页，将光标定位在希望表单出现的位置上。）新建一个网页，将光标定位在希望表单出现的位置上。（2）执行【插入】）执行【插入】
4、-【表单】【表单】-【表单】命令，或选择【表单】命令，或选择“插入插入”栏上的栏上的“表单表单”类别，然后单击类别，然后单击“表单表单”按钮。按钮。（3）这时文档中将插入一个空的表单，如图）这时文档中将插入一个空的表单，如图5所示。在所示。在“设计设计”视视图中，红色的虚轮廓线表示表单。图中，红色的虚轮廓线表示表单。注意：如果没有看到红色的虚轮廓线，请检查是否选中了【查看】注意：如果没有看到红色的虚轮廓线，请检查是否选中了【查看】-【可视化助理】【可视化助理】-【不可见元素】选项。【不可见元素】选项。图5 红色的虚轮廓线表示表单（4）选定上面的表单，显示表单属性面板，如图）选定上面的表单，显示
5、表单属性面板，如图6所示。所示。图6表单属性面板表单属性：表单属性：表单名称：标识该表单的惟一名称。命名表单后，就可以使用脚本表单名称：标识该表单的惟一名称。命名表单后，就可以使用脚本语言（如语言（如JavaScript 或或VBScript）引用或控制该表单。）引用或控制该表单。动作：指定处理该表单的动态网页或脚本的路径（如动作：指定处理该表单的动态网页或脚本的路径（如asp/、php、jsp等）。可以在等）。可以在“动作动作”文本框中键入完整路径，也可以单文本框中键入完整路径，也可以单击文件夹图标以选择一个动态网页或脚本。击文件夹图标以选择一个动态网页或脚本。方法：选择将表单数据传输到服务
6、器的方法，方法：选择将表单数据传输到服务器的方法，POST方法将在方法将在HTTP请求中嵌入表单数据；请求中嵌入表单数据；GET方法是将值附加到请求该页面的方法是将值附加到请求该页面的URL中；默认方法是使用浏览器的默认设置将表单数据发送到服务中；默认方法是使用浏览器的默认设置将表单数据发送到服务器。器。MIME类型：指定对提交给服务器进行处理的数据使用类型：指定对提交给服务器进行处理的数据使用MIME编码编码类型，默认设置为类型，默认设置为“application/x-www-form-urlencode”通常通常与与POST方法协调使用。如果要创建文件上传域，需指定方法协调使用。如果要创建
7、文件上传域，需指定“multipart/form-data MIME”类型。类型。目标：设置提交表单后的目标浏览器。目标：设置提交表单后的目标浏览器。图图7 在表单中插入表格在表单中插入表格（2）将光标定位在）将光标定位在“用户名用户名”右边的单元格中，执行【插入】右边的单元格中，执行【插入】-【表单】表单】-【文本域】命令，或选择【文本域】命令，或选择“插入插入”栏上的栏上的“表单表单”类别，然类别，然后单击后单击“文本字段文本字段”图标，显示图标，显示“输入标签辅助功能属性输入标签辅助功能属性”对话框，对话框，如图如图8所示。所示。图图8“输入标签辅助功能属性输入标签辅助功能属性”对话框对
8、话框插入文本字段插入文本字段文本域可以接受任何类型的输入内容。文本可以单行或多行显示，也可以文本域可以接受任何类型的输入内容。文本可以单行或多行显示，也可以以密码域的方式显示。以密码域的方式显示。插入文本字段步骤如下：插入文本字段步骤如下：（1）定位光标在表单中，在表单中插入表格，并填充内容，如图）定位光标在表单中，在表单中插入表格，并填充内容，如图7所示。所示。（3）若以后不想在插入表单元素时显示）若以后不想在插入表单元素时显示“输入标签辅助功能属性输入标签辅助功能属性”对话框，对话框，单击对话框下面的链接文字单击对话框下面的链接文字“请更改请更改辅助功能辅助功能首选参数首选参数”，显示，显
9、示“首首选参数选参数”对话框，如图对话框，如图9所示，取消所示，取消“表单对象选项表单对象选项”。图9 取消“表单对象选项”（4）单击）单击“确定确定”按钮，保持按钮，保持“输入标签辅助功能属性输入标签辅助功能属性”对话框中的值不对话框中的值不变，单击变，单击“确定确定”按钮，文本字段被插入文档中，如图按钮，文本字段被插入文档中，如图10所示。所示。图图10文本字段被插入文档中文本字段被插入文档中（5）选择该文本域，显示文本域属性面板，如图）选择该文本域，显示文本域属性面板，如图11所示。所示。图图11 文本域属性面板文本域属性面板文本域属性：文本域属性：文本域：指定该文本域惟一的名称。文本域
10、：指定该文本域惟一的名称。字符宽度：设置文本域中最多可显示的字符数。字符宽度：设置文本域中最多可显示的字符数。最多字符数：设置单行文本域中最多可输入的字符数。最多字符数：设置单行文本域中最多可输入的字符数。换行：选中了换行：选中了“多行多行”选项，指定当用户输入的信息较多时如何选项，指定当用户输入的信息较多时如何换行显示。换行显示。类型：指定文本域为单行、多行还是密码域。类型：指定文本域为单行、多行还是密码域。初始值：指定在载入表单时文本域中要显示的内容。初始值：指定在载入表单时文本域中要显示的内容。（6）为表格增加一行，并在该行左边的单元格中输入说明文字。将）为表格增加一行，并在该行左边的单
11、元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】光标定位在该行右边的单元格中，然后执行【插入】-【表单】【表单】-【文本字段】命令，插入一个文本字段。选中该文本字段，在【文本字段】命令，插入一个文本字段。选中该文本字段，在属性面板中将属性面板中将“类型类型”由由“单行单行”改为改为“密码密码”，则创建一个密，则创建一个密码域。码域。（7）为表格增加一行，并在该行左边的单元格中输入说明文字。将）为表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】光标定位在该行右边的单元格中，然后执行【插入】-【表单】【表单】-【文本字段】命令，
12、插入一个文本字段。选中该文本字段，在【文本字段】命令，插入一个文本字段。选中该文本字段，在属性面板中将属性面板中将“类型类型”由由“单行单行”改为改为“多行多行”，则创建一个多，则创建一个多行文本域。此时文档中页面效果如图行文本域。此时文档中页面效果如图12所示。所示。图图12 插入多行文本字段文档中页面效果插入多行文本字段文档中页面效果（8）保存，按快捷键）保存，按快捷键F12预览，在文本字段中输入文字，效果如图预览，在文本字段中输入文字，效果如图13所示。所示。图图13 预览并在文本字段中输入文字预览并在文本字段中输入文字注意：要插入多行文本字段也可以直接执行【插入】注意：要插入多行文本字
13、段也可以直接执行【插入】-【表单】表单】-【文本区域】命令，效果和插入多行文本字段一【文本区域】命令，效果和插入多行文本字段一样。样。插入单选按钮插入单选按钮使用单选按钮，只能在一组选项中选择一个选项，单选按钮通常成使用单选按钮，只能在一组选项中选择一个选项，单选按钮通常成组出现，并且同一组中的所有单选按钮必须具有相同的名称。插组出现，并且同一组中的所有单选按钮必须具有相同的名称。插入单选按钮步骤如下：入单选按钮步骤如下：（1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入
14、】标定位在该行右边的单元格中，然后执行【插入】-【表单】【表单】-【单选按【单选按钮】命令，插入一个单选按钮。选中该单选按钮，属性面板如图钮】命令，插入一个单选按钮。选中该单选按钮，属性面板如图14所示。所示。图图14 单选按钮属性面板单选按钮属性面板单选按钮属性：单选按钮属性：单选按钮：在文本框中，为该对象指定一个名称。单选按钮：在文本框中，为该对象指定一个名称。选定值：设置在该单选按钮被选中时发送给服务器的值。选定值：设置在该单选按钮被选中时发送给服务器的值。初始状态：当在浏览器中载入表单时，该单选按钮是否被选中。初始状态：当在浏览器中载入表单时，该单选按钮是否被选中。（2）选中该单选按钮
15、，在属性面板中将）选中该单选按钮，在属性面板中将“初始状态初始状态”由由“未选中未选中”改为改为“已选中已选中”，并在该单选按钮右边输入文字说明。，并在该单选按钮右边输入文字说明。（3）再插入一个单选按钮，并在该单选按钮右边输入文字说明，此时文档中页面效）再插入一个单选按钮，并在该单选按钮右边输入文字说明，此时文档中页面效果如图果如图12-15所示。所示。图图15 插入单选按钮插入单选按钮4.插入单选按钮组插入单选按钮可以一个一个地插入，也可以用插入单选按钮组的方法一次插入多个单插入单选按钮可以一个一个地插入，也可以用插入单选按钮组的方法一次插入多个单选按钮。插入单选按钮组步骤如下：选按钮。插
16、入单选按钮组步骤如下：（1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】在该行右边的单元格中，然后执行【插入】-【表单】【表单】-【单选按钮组】命令，显【单选按钮组】命令，显示示“单选按钮组单选按钮组”对话框，如图对话框，如图16所示。所示。图图16“单选按钮组单选按钮组”对话框对话框（2）在）在“单选按钮组单选按钮组”对话框中各个参数如下：对话框中各个参数如下：名称：指定该单选按钮组的名称。名称：指定该单选按钮组的名称。单选按钮：在单选按钮组列表中，显示了创建的
17、单选按钮组中各个单选按钮的单选按钮：在单选按钮组列表中，显示了创建的单选按钮组中各个单选按钮的“标签标签”和和“值值”对。单击加号对。单击加号“+”按钮向组添加一个单选按钮，单击向上或向下按钮向组添加一个单选按钮，单击向上或向下箭头重新排序这些按钮。箭头重新排序这些按钮。布局，使用：选择希望布局，使用：选择希望 Dreamweaver 对这些按钮进行布局时使用的格式，可以对这些按钮进行布局时使用的格式，可以使用换行符或表格来设置这些按钮的布局。使用换行符或表格来设置这些按钮的布局。在在“单选按钮组单选按钮组”对话框中设置各选项如图对话框中设置各选项如图17所示。所示。图17 在“单选按钮组”对
18、话框中设置各选项（3）单击）单击“确定确定”按钮，此时文档中页面效果如图按钮，此时文档中页面效果如图18所示所示。图18 插入单选按钮组（4）选中该行第一个单选按钮，在属性面板中将）选中该行第一个单选按钮，在属性面板中将“初始状态初始状态”由由“未选中未选中”改为改为“已选中已选中”。5.插入复选框复选框可以让用户从一组选项中选择多个选项，每个复选框都是一个独立的复选框可以让用户从一组选项中选择多个选项，每个复选框都是一个独立的元素，各自必须有一个惟一的名称。插入复选框步骤如下：元素，各自必须有一个惟一的名称。插入复选框步骤如下：（1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。
19、将光标定位在）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】该行右边的单元格中，然后执行【插入】-【表单】【表单】-【复选框】命令，这样就插【复选框】命令，这样就插入了一个复选框。入了一个复选框。（2）在该复选框右边输入文字说明。选中该复选框，设置复选框属性面板中的各项属）在该复选框右边输入文字说明。选中该复选框，设置复选框属性面板中的各项属性。性。复选框属性：复选框属性：复选框：在文本框中为该对象指定一个名称。复选框：在文本框中为该对象指定一个名称。选定值：设置在该复选框被选中时发送给服务器的值。选定值：设置在该复选框被选中时发送给
20、服务器的值。初始状态：确定在浏览器中载入表单时，该复选框是否被选中。初始状态：确定在浏览器中载入表单时，该复选框是否被选中。（3）按照上面的方法再插入几个复选框，并输入必要的文字。此时文档中）按照上面的方法再插入几个复选框，并输入必要的文字。此时文档中页面效果如图页面效果如图19所示。所示。图19 插入复选框6插入列表/菜单列表列表/菜单在一个列表中显示选项值，用户可以从该列表中选择多个选项。菜单在一个列表中显示选项值，用户可以从该列表中选择多个选项。插入列表插入列表/菜单步骤如下：菜单步骤如下：（1）为刚才的表格增加一行，并在该行左边的单元格中输入说明文字。将）为刚才的表格增加一行，并在该行
21、左边的单元格中输入说明文字。将光标定位在该行右边的单元格中，然后执行【插入】光标定位在该行右边的单元格中，然后执行【插入】-【表单】【表单】-【列表【列表/菜单】命令，列表菜单】命令，列表/菜单被插入文档中。菜单被插入文档中。（2）选中该列表）选中该列表/菜单，在属性面板中单击菜单，在属性面板中单击“列表值列表值”按钮。显示按钮。显示“列表值列表值”对话框，如图对话框，如图12-20所示。所示。图 20“列表值”对话框（3）在）在“列表值列表值”对话框中，设置如图对话框中，设置如图21所示的所示的“项目标签项目标签-值值”对对 图21 编辑“项目标签-值”对（4）单击）单击“确定确定”按钮，选
22、中列表按钮，选中列表/菜单，属性面板如图菜单，属性面板如图22所示。所示。图图22 列表列表/菜单属性面板菜单属性面板列表列表/菜单属性：菜单属性：列表列表/菜单：为该列表菜单：为该列表/菜单指定一个惟一的名称。菜单指定一个惟一的名称。类型：指定为类型：指定为“菜单菜单”选项，还是显示选项，还是显示“列表列表”选项。选项。高度：设置高度：设置“列表列表”类型要显示的项数。类型要显示的项数。选定范围：用户是否可以从选定范围：用户是否可以从“列表列表”类型列表中选择多个项。类型列表中选择多个项。列表值：打开一个对话框，可以在该对话框中向菜单中添加菜单项。列表值：打开一个对话框，可以在该对话框中向菜
23、单中添加菜单项。初始化选定：设置列表中默认选择的菜单项。初始化选定：设置列表中默认选择的菜单项。（5）此时文档中页面效果如图）此时文档中页面效果如图23所示。所示。图图23 插入列表插入列表/菜单菜单（6）若在列表）若在列表/菜单属性面板中选择菜单属性面板中选择“类型类型”为为“列表列表”，如图，如图24所示设置所示设置各个选项。各个选项。图24 列表/菜单属性面板文件域属性：文件域属性：文件域名称：指定该文件域对象的名称。文件域名称：指定该文件域对象的名称。字符宽度：指定该域最多可显示的字符数。字符宽度：指定该域最多可显示的字符数。最多字符数：指定域中最多可容纳的字符数。最多字符数：指定域中
24、最多可容纳的字符数。（3）保存，按快捷键）保存，按快捷键F12预览，网页效果如图预览，网页效果如图27所示，所示，单击单击“浏览浏览”按钮，会显示按钮，会显示“选择文件选择文件”对话框。对话框。图图 27“选择文件选择文件”对话框对话框使用使用“表单表单”制作用户注册页面制作用户注册页面超链接及其应用超链接及其应用超链接能把超链接能把Internet上众多的网站和网页联系起来，上众多的网站和网页联系起来，未尝有网络提供了方便，真正实现了网络无国界，未尝有网络提供了方便，真正实现了网络无国界，是网页制作中使用得比较多的一种技术。是网页制作中使用得比较多的一种技术。在超链接中，连接路径是通过在超链
25、接中，连接路径是通过URL来确定的。根据来确定的。根据实验的协议不同，实验的协议不同，URL的形式也不同，常用的形式的形式也不同，常用的形式有有HTTP、FTP和和File几种。几种。超链接的种类超链接的种类创建锚点链接创建锚点链接创建创建E-mail链接链接创建导航条（通常在网页的首页上一般可设置一个导航条，创建导航条（通常在网页的首页上一般可设置一个导航条，这样既可以为浏览者浏览网站提供一个索引，又能引导浏览这样既可以为浏览者浏览网站提供一个索引，又能引导浏览者浏览整个网站的不同页面。导航条又称导航栏，可由一幅者浏览整个网站的不同页面。导航条又称导航栏，可由一幅或多幅按钮图像组成，按钮图像
26、的状态可根据浏览者的鼠标或多幅按钮图像组成，按钮图像的状态可根据浏览者的鼠标动动而改变。）动动而改变。）创建跳转菜单（跳转菜单是一个下拉式菜单，其中的每一个创建跳转菜单（跳转菜单是一个下拉式菜单，其中的每一个选项都是一个超链接。设计者可以用跳转菜单创建网站站点选项都是一个超链接。设计者可以用跳转菜单创建网站站点的各种链接，实现网页之间的跳转链接。）的各种链接，实现网页之间的跳转链接。）创建热点链接创建热点链接框架框架利用框架技术设计的网页就是把网页页面划分成相利用框架技术设计的网页就是把网页页面划分成相对独立的若干个区域，每个区域都相当于一个独立对独立的若干个区域，每个区域都相当于一个独立的页
27、面，这些区域里的页面既各自独立又相互联系，的页面，这些区域里的页面既各自独立又相互联系，也就是说，在一个浏览器窗口中，用框架制作的网也就是说，在一个浏览器窗口中，用框架制作的网页能同时显示多个不同的页能同时显示多个不同的HTML文档，就好像在一文档，就好像在一个浏览器窗口中平铺了几个子窗口，在各个子窗口个浏览器窗口中平铺了几个子窗口，在各个子窗口中分别显示不同的内容，从而使网页的版面更友好、中分别显示不同的内容，从而使网页的版面更友好、结构更清晰。结构更清晰。框架基本操作框架基本操作创建框架编辑框架保存框架页面框架页面实例创建框架创建框架方法一：单击主菜单“文件”“新建”命令或者单击标准工具栏
28、上的新建按钮 创建框架创建框架(续续)方法二：编辑框架集页面 将将鼠鼠标标移移至至区区域域之之间间的的边边框框线线，鼠鼠标标光光标标变变成成双双向向箭头，然后左右拖动可以调整左右窗口的大小。箭头，然后左右拖动可以调整左右窗口的大小。如需将页框再进行分割，可先在如需将页框再进行分割，可先在“框架框架”面板中选面板中选中对应的框（此时框线会变粗），如图的小窗口。中对应的框（此时框线会变粗），如图的小窗口。再在再在“显示设计显示设计”视图中拖动相应边框至合适位置视图中拖动相应边框至合适位置即可。即可。通过属性检查器设置框架页通过属性检查器设置框架页 在在“框架框架”面板中，单击外框（或单击面板中，单
29、击外框（或单击“显示设计显示设计”视图中各框架间的分割框线）以选取整个框架，视图中各框架间的分割框线）以选取整个框架，属性检查器就会切换成框架集属性检查器属性检查器就会切换成框架集属性检查器 框架页面间的链接框架页面间的链接打打开开属属性性检检查查器器中中的的“目目标标”属属性性，除除_blank、_self、_parent和和_top外外，又又新新增增了了“mainframe”和和“leftFrame”。保存框架页面对于框架结构必须先保存，才能进行预览。可以通过以下方式保存框架集页面（框架页）和各单个页框文件：单击主菜单“文件”“保存框架页”或“文件”“框架页另存为”保存框架集页面。单击主菜单“文件”“全部保存”保存框架集页面，同时还会将组成各页框的每个独立页面也保存。框架制作实例