第五章框架与交互式表单.ppt

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