计算机实用技术 刘毅 第4章 交互式网页设计.pptVIP

第4章 交互式网页设计 目录 4.1 表单概述 4.2 创建表单页 4.3 行为的应用 4.4 层的应用 4.1 表单概述· 表单是用于实现浏览者与网站之间信息交互的一种网页对象。在Internet中使用表单可以帮助服务器从用户那里收集信息与反馈 通常一个表单中包含多个对象，例如用于输入文本的文本域、用于发送命令的按钮等 一个完整的表单包含两个部分：一个是在网页中进行描述的表单对象；另一个是应用程序，它可以是服务器端的，也可以是客户端的，用于对客户信息进行分析处理。 4.2 创建表单页 4.2.1 插入表单 4.2.2 设置表单属性 4.2.3 表单实例 4.2.1 插入表单 1．插入表单对象的方法 （1）选择“插入”|“表单”中的相关命令来插入表单对象。 （2）选择“插入”|“表单”子工具栏，在其中选择要插入对象的相应按钮，如图4-1所示。 2．插入表单 在网页中添加表单对象，首先必须创建表单。 方法： 选择“插入”|“表单”|“表单”命令， 选择“插入”工具栏中的“表单”类别，然后单击“表单”按钮。 4.2.2 设置表单属性 选中表单，在“属性”面板上可以设置表单的各项属性 。 4.3 行为的应用 4.3.1 行为概述 4.3.2 行为的基本应用 4.3.1 行为概述 行为是事件与动作的彼此结合。 1．对象（Object） 对象是产生行为的主体，很多网页元素都可以成为对象，如图片、文字、多媒体文件等 2．事件（Event） 事件是触发动态效果的原因，它可以被附加到各种页面元素上，也可以被附加到HTML标记中。 3．动作（Action） 行为通过动作来完成动态效果，如图片翻转、打开浏览器、播放声音都是动作。动作通常是一段JavaScript代码，在Dreamweaver中不必自己编写。 4．事件与动作 将事件和动作组合起来就构成了行为，例如，将onClick行为事件与一段JavaScript代码相关联，单击时就可以执行相应的JavaScript代码（动作）。一个事件可以同多个动作相关联，即发生事件时可以执行多个动作。为了实现需要的效果，还可以指定和修改动作发生的顺序。 4.3.2 行为的基本应用 1．“行为”面板 在Dreamweaver中，对行为的添加和控制主要通过“行为”面板来实现，“行为”面板如图所示。 2．创建行为 创建行为有三个步骤：选择对象、添加动作、调整事件。 示例：通过一个“打开浏览器窗口”实例说明如何创建行为。效果是，在鼠标放到网页的小图像上时打开一个新窗口显示放大的图像。 （1）单击“行为”面板上的“+”按钮，打开动作菜单。从动作菜单中选择“打开浏览器”命令，在弹出的“打开浏览器窗口”对话框中设置参数，如图所示。 （3）在“要显示的URL”文本框右侧单击“浏览”按钮选择在新窗口中载入的目标的URL地址（可以是网页也可以是图像）。在这里选择../images/sslld.jpg图片，然后将窗口宽度设为500像素，窗口高度设为667像素，窗口名称为“放大图片”。设置好后单击“确定”按钮即可添加该动作。 （4）在添加行为时，系统自动选择了事件onClick（单击鼠标）。单击“行为”面板上的“事件菜单”按钮，打开事件菜单，重新选择一个触发行为的事件。把onClick（单击鼠标）的事件改为onMouseOver（鼠标滑过） 4.4 层的应用 4.4.1 层的概述 4.4.2 层的基本应用 4.4.1 层的概述 层是CSS中的定位技术，在Dreamweaver中对其进行了可视化操作。文本、图像、表格等元素只能固定其位置，不能互相叠加在一起，而层可以放置在网页文档内的任何一个位置，层内可以放置网页文档中的其他构成元素（如文本、图像、表格等） 层可以自由移动，层与层之间还可以重叠，因此还可以用层来布局网页。网页中的层就像一个透明画布，可以多个层叠加在一起，每个层里都可以是不同的元素，修改其中一个层不会影响到其他层的效果。 4.4.2 层的基本应用 1．创建层 （1）插入层的方法。 选择“插入”|“布局对象”|“层”命令 在“插入”工具栏中选择“布局”选项，单击“绘制层”按钮，在文档窗口内鼠标光标变成十字光标，然后按住鼠标左键拖动出一个矩形，矩形的大小就是层的大小，释放鼠标后层就会出现在页面中。 （2）选择和移动层。 方法： 单击层的边框 在“层”面板中单击层的名称。 可以按住Shift键来选择多个层。 （3）调整层的大小。 选中层后将鼠标放在层的边框控制柄上，当鼠标变为双箭头时拖动鼠标即可。 如果要调