计算机实用技术课件第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）调整层的大小。选中层后将鼠标放在层的边框控制柄上，当鼠标变为双箭头时拖动鼠标即可。如果要调整多个层的大小，可以先将需要调整的层选中，再选择“修改”|“排列顺序”|“设成宽度相同”命令。（4）对齐层。方法：选择“修改”|“排列顺序”子菜单中的相应命令对齐的方式有：左对齐、右对齐、对齐上缘和对齐下缘。2．创建嵌套层创建嵌套层的方法如下：（1）将光标放在某个层内，选择“插入”|“布局对象”|“层”命令。（2）将光标放在某个层内，将“插入”工具栏“布局”类别中的“绘制层”按钮拖动到该层中。（3）将光标放在某个层内，单击“绘制层”按钮，按住Alt键绘制一个新层。（4）打开“层”面板，从中选择需要嵌套的层，此时按住Ctrl键的同时拖动该层到另外一个层下，释放Ctrl键和鼠标，这样普通层就转换为嵌套层了。3．设置层的属性选中要设置的层，即可在“属性”面板中设置层的属性

4．在层中添加内容在层中任意位置单击，将插入点置于