框架与交互式表单.ppt

第五章 框架与交互式表单 v 5.1 框架的基本操作 v 5.2 表单的创建与应用 v 5.3 应用实例 DREAMWEAVER v 5.1 框架的基本操作 5.1.1 关于框架 框架技术用于在一个浏览器窗口 显 示多个页面，类似于Windows的 资 源浏览器窗口。其主要用途是在 同一个窗口中，实现网页之间的导航，它 是一种常用的网页设计方式。它又是一种 非常实用有效的网页布局技术，能帮助用 户实现复杂的网页，乃至整个网站的页面 布局。 DREAMWEAVER 5.1.2 认识框架和框架集 n框架是浏览器窗口中的一个区域，它可以显 示与浏览器窗口的其余部分中所显示内容无 关的HTML 文档。 DREAMWEAVER n框架集是HTML 文件，它定义一组框架的布局 和属性，包括框架的数目、框架的大小和位 置以及在每个框架中初始显示的页面的URL。 框架集文件本身不包含要在浏览器中显示的 HTML 内容，但noframes 部分除外；框架集 文件只是向浏览器提供应如何显示一组框架 以及在这些框架中应显示哪些文档的有关信 息。 n框架和框架集是紧密联系在一起的，用到框 架就要用到框架集。 DREAMWEAVER n一个典型的利用框架制作的页面 DREAMWEAVER 5.1.3 框架的创建、调整与删除 n创建一个框架。在Dreamweaver 中有两种创 建框架集的方法：您既可以从若干预定义的 框架集中选择，也可以自己设计框架集。 n从“插入” “框架”子菜单中选择预定义 的框架集。 n在“插入”栏的“框架”类别中，选择预定 义的框架集。 n拆分框架 n单击要拆分的框架内部。 n选择“修改”“框架集”命令，然后选择 拆分左框架、拆分右框架、拆分上框架、拆 分下框架，来完成框架的拆分。 DREAMWEAVER n拖曳鼠标调整框架 n将鼠标指针放在两个框架的边框上，鼠标指 针变成双向箭头。 n用鼠标拖曳边框到合适的位置，然后释放鼠 标，可以调整框架的大小。 n按住Alt不放，再用鼠标拖曳边框，可以拆分 框架。 n删除框架。 n将鼠标指向要删除的框架边框，当鼠标变成 双向箭头时，拖动鼠标到上一级框架的上下 或左右边框线处，松开鼠标即可删除框架。 n当框架面板中的信息显示为Contains no frames，表明当前无框架。 DREAMWEAVER n实例：建立一个如下图的框架 DREAMWEAVER 5.1.4 框架和框架集的选择与属性设置 n选择框架和框架集 n选择“窗口”“其它”“框架”命令，或按快捷键 Shift+F2，打开框架面板。然后在框架面板 中单击框架边框线，可选择框架集。单击某 个框架区域可选择该框架。 n或者在网页编辑窗口中按住Alt键，然后单击 要选中的框架的任意设置，便可选中该框架 。 n如果选中一个框架，按住Alt键，然后按键盘 上的左右箭头键，可以选中同一级别的框架 。按住Alt键，然后按键盘上的向上箭头键， 可以选中当前框架的上一级框架，连续重复 操作，可以选中整个框架集。 DREAMWEAVER n打开框架集属性面板 n框架和框架集有各自的属性面板。框架集的 属性面板可用来设置框架的大小、框架边框 线的颜色和宽度。 nDW中默认的框架及属性是：无边界、无滚 动条、禁止改变框架的大小。 n打开框架集属性面板：选择“窗口”“属性”命 令，或者用快捷键Ctrl+F3。 n打开框架属性面板 n选择“窗口”“属性”命令，或者用快捷键 Ctrl+F3。 n或者，按住Alt键并单击一个框架，或单击框 架面板中的相应框架。 DREAMWEAVER 5.1.5 框架里的内容主要是HTML文档，在一个网 页中创建了框架结构后，可在属性面板中设 置框架页面的超链接。框架结构的网页制作 完成后，可以分别保存每个框架文档；也可 单独保存框架集文档；还可以将整个框架集 与它的各个框架文档一起保存。 n保存框架文的步骤 n在网页编辑区窗口中，单击要保存的框架。 n选择“文件”“保存框架”命令，就可以保 存该框架文件。 DREAMWEAVER n保存框架集文档的步骤 n在网页编辑区窗口中，选中框架集。 n选择“文件”“保存框架集”命令，可保存框架 集文档。 n如果希望将框架集文档用另外的路径或文件 名保存，应选择“文件”“框架页另存为”命令 。 n保存框架集中所有文档的步骤 n选择“文件”“保存全部”命令。 n先保存框架集文档，然后保存框架集中其它 框架文档。 DREAMWEAVER 5.1.6 关于框架的实例 n建立一个简单的框架，如下图示： DREAMWEAVER n向框架中添加网页内容。我们先制作好四个 网页，分别为top.htm，用于显示在上部框架 中；left.htm用于显示在下部左框架中； 001.htm、002.htm用于显示在下部右侧框架 中。 DREAMWEAVER top.htmleft.htm 001.htm002.htm n单击Frame视窗中的topFrame，将上面的框 架选定，此时可以看到编辑页面中此框架边 界以虚线包围。调出属性面板，可以看到此 框架的缺省名字为topFrame，如果框架很复 杂，这个名字就不适用了。我们可以将其改 名，只要在下面的输入框中输入新名字就行 了，这里我们将其命名为myframe_top，给 框架命名是为了便于区分各个网页中的框架 。 DREAMWEAVER n接下来指定此框架中的源文件。单击“源文件 ”输入框左面的文件图标，选择事先制作好的 文件“Top.htm”，看，Top.htm网页显示在上 面的框架中了。 n我们可以调整框架的高度，使其与内容相适 应。将鼠标指针放在上下框架的分界线上， 当鼠标变为上下双箭头时，按下鼠标左键进 行拖动，直接改变框架高度 DREAMWEAVER n这时我们看到框架与里面内容间总有一个间 隙，我们可将这个间隙去掉。先选中 myframe_top框架，将属性面板中的“Margin Width”、“Margin Height”值均设为0，这回再 调整框架高度，可以使其刚好容纳里面的内 容。 n按住ALT键，单击左侧的框架，选中 leftFrame框架，将框架命名为 “myframe_left”，源文件设为left.htm ，并调 整框架宽度。 DREAMWEAVER n选中右侧的框架，框架名为“myframe_main” ，将其源文件设为001.htm。因为右侧框架 内容可能比较多，可以让此框架存在滚动条 。在属性面板中，在Scroll列表中选择“Auto” 。 DREAMWEAVER n别忘了保存文件哟！选择“文件”菜单下 的“保存框架页”命令，将主框架体文件 命名为myframe.htm。 注意：这个文件相当于一个汇总文 件，要让浏览器知道框架的数目、大 小比例，预先载入那些网页等信息。保 存此文件的另一个好处是框架中调入网 页文件时，源文件框中会呈现相对目录 ，而不是本地的目录名称。 n现在我们要实现这样一个目标，点击左 侧框架中的主题，对应的文章便会呈现 在右侧的页框架中。 DREAMWEAVER n选中左侧的第一个条目“集邮天地”，调出属 性面板，在Link框中选择相应的文件，这里 我们选择001.htm，再单击“target”列表框， 从中选择要显示此内容的框架名，这里选择 “myframe_main”，表示链接在框架 myframe_main中打开。 DREAMWEAVER n接下来我们选择“文学天地”，链接到002.htm 文件， “target”还是设为“myframe_main”。 n进入浏览器，单击左侧条目，右侧框架就显 示出页面的内容。 n设置主框架标题 。主框架文件（也就是最外 面的框架）是所以框架文件的载体，通常是 首页或特定主题的进入点，因而有必要设置 网页的标题。 n当光标在框架内时，按下Ctrl+J调出的“Page Properties”对话框只能设置对应框架内源文 件的页面属性。要想设置主框架文件（ myframe.htm）的属性，可以将鼠标移动到 最外层框架（在本例中为上下结构的框架） 的框线上，当鼠标指针变为双向箭头时单击 鼠标左键，使可选定整体框架。 DREAMWEAVER n再次调出“Page Properties”对话框，就可以 设置主框架文件的属性了。 n我们将Title设为“笨象的家”，对框架集而言 ，背景图或背景颜色的设定是没有任何意义 的。 n单击“OK”，主框架标题设置完了。看看效果 吧！ n有些网站是用框架来设计的，但表面却看不 出来，这是因为看不到页框间分隔线和页框 滚动条。下面我们就看一下如何设计这样的 框架。 n先选取整个框架集，在属性面板上，从 Borders下拉菜单中选择“否”。 DREAMWEAVER n同样，将下面的框架体的Borders也设为No ，再浏览此页面，框线消失了。 DREAMWEAVER 作业： n在DW中打开样式面板的快捷操作是什么？ n在DW中是利用什么HTML标记构件的分层？ n一个有3个框架的Web页实际上有几个独立 的HTML页面？ nHTML语言中，表示什么？ nHTML语言中， 表示什么？ DREAMWEAVER v 5.2 表单的创建与应用 5.2.1 关于表单 表单的作用是从访问您的Web 站点的用 户那里获得信息。访问者可以使用诸如文本 域、列表框、复选框以及单选按钮之类的表 单对象输入信息，然后单击某个按钮提交这 些信息。 无论是电子商务、网上调查，还是留言 板、聊天室，都要求网页能够接收浏览者输 入的信息，而表单就是网站获取用户信息的 最重要的手段之一。 DREAMWEAVER 表单支持客户端- 服务器关系中的客户 端。当访问者在Web 浏览器中显示的表单中 输入信息，然后单击提交按钮时，这些信息 将被发送到服务器，服务器端脚本或应用程 序在该处对这些信息进行处理。 DREAMWEAVER 5.2.2 表单的对象 在Dreamweaver 中，表单输入类型称为表 单对象。表单对象是允许用户输入数据的机 制。您可以在表单中添加以下表单对象： n文本域接受任何类型的字母数字文本输入内容。 文本可以单行或多行显示，也可以以密码域的方 式显示，在这种情况下，输入文本将被替换为星 号或项目符号，以避免旁观者看到这些文本。 n隐藏域存储用户输入的信息，如姓名、电子邮件 地址或偏爱的查看方式，并在该用户下次访问此 站点时使用这些数据。 n按钮在单击时执行操作。通常，这些操作包括提 交或重置表单。您可以为按钮添加自定义名称或 标签，或使用预定义的“提交”或“重置”标签 之一。 DREAMWEAVER n复选框允许在一组选项中选择多个选项。用户可 以选择任意多个适用的选项。下面的示例通过显 示三个选中的复选框项来说明这一点：冲浪、山 地自行车和漂流。 n单选按钮代表互相排斥的选择。在某单选按钮组 （由两个或多个共享同一名称的按钮组成）中选 择一个按钮，就会取消选择该组中的所有其它按 钮。在下面的示例中，漂流是当前选择的选项。 如果用户单击了冲浪，那么漂流按钮将被自动清 除。 n列表/ 菜单在一个滚动列表中显示选项值，用户 可以从该滚动列表中选择多个选项。“菜单”选 项在一个菜单中显示选项值，用户只能从中选择 单个选项。 DREAMWEAVER n跳转菜单是可导航的列表或弹出菜单，它使您可 以插入一种菜单，这种菜单中的每个选项都链接 到某个文档或文件。 n文件域使用户可以浏览到其计算机上的某个文件 并将该文件作为表单数据上传。 n图像域使您可以在表单中插入一个图像。图像域 可用于生成图形化按钮，例如“提交”或“重置 ”按钮。 5.2.3 表单的创建方法 若要创建HTML 表单，需要执行以下操作： n打开一个页面，将插入点放在希望表单出现 的位置。 DREAMWEAVER n选择“插入” “表单”，或选择“插入” 栏上的“表单”类别，然后单击“表单”图 标。Dreamweaver 将插入一个空的表单。当 页面处于“设计”视图中时，用红色的虚轮 廓线指示表单。如果没有看到此轮廓线，请 检查是否选中了“查看”“可视化助理 ”“不可见元素”。 DREAMWEAVER n指定将处理表单数据的页面或脚本。 在“文档”窗口中，单击表单轮廓以将其选 定。 在属性查看器中（“窗口” “属性”）的“ 动作”文 本框中键入路径，或者单击文件夹图标浏览到适 当的页面或脚本。 n指定将表单数据传输到服务器所使用的方法。 在属性检查器中，在“方法”弹出菜单中选 择 以下选项之一： n默认方法使用浏览器的默认设置将表单数据发 送到服务器。通常，默认方法为GET 方法。 nGET 方法将值附加到请求该页的URL 中。 nPOST 方法将在HTTP 请求中嵌入表单数据。 DREAMWEAVER n插入表单对象。 将插入点放置在希望表单对象在表单中出 现 的位置，然后在“插入” “表单”菜单中 ，或者 在“插入”栏的“表单”类别中选择对象。 n根据需要，调整表单的布局。 可以使用换行符、段落标记、预格式化的 文 本或表来设置表单的格式。不能将表单插入另 一 个表单中，即标签不能交迭，但是可以在一个 页 面中包含多个表单。 DREAMWEAVER 5.2.4 插入表单对象 n在网页上创建一个表单实例 n表单的图像域。图像域是一个表单域，它的主体 是一个图片。在浏览时单击这个图片，表单就会 向服务器发送表单中各个表单域的值。如果要插 入一个图像域，操作步骤如下： n在文档中，将插入点放在表单轮廓内。 n选择“插入” “表单” “图像域”。 n“选择图像源”对话框中为该按钮选择图像，然 后