第4章交互式网页设计PPT格式课件下载.ppt

上传人:b****3 文档编号:15616521 上传时间:2022-11-08 格式:PPT 页数:22 大小:509.50KB
下载 相关 举报
第4章交互式网页设计PPT格式课件下载.ppt_第1页
第1页 / 共22页
第4章交互式网页设计PPT格式课件下载.ppt_第2页
第2页 / 共22页
第4章交互式网页设计PPT格式课件下载.ppt_第3页
第3页 / 共22页
第4章交互式网页设计PPT格式课件下载.ppt_第4页
第4页 / 共22页
第4章交互式网页设计PPT格式课件下载.ppt_第5页
第5页 / 共22页
点击查看更多>>
下载资源
资源描述

第4章交互式网页设计PPT格式课件下载.ppt

《第4章交互式网页设计PPT格式课件下载.ppt》由会员分享,可在线阅读,更多相关《第4章交互式网页设计PPT格式课件下载.ppt(22页珍藏版)》请在冰豆网上搜索。

第4章交互式网页设计PPT格式课件下载.ppt

u表单是动态网页的灵魂。

表单是动态网页的灵魂。

目录上一页下一页退出4.2创建表单页创建表单页l4.2.1插入表单l4.2.2设置表单属性l4.2.3表单实例目录上一页下一页退出4.2.1插入表单1插入表单对象的方法

(1)选择“插入”|“表单”中的相关命令来插入表单对象。

(2)选择“插入”|“表单”子工具栏,在其中选择要插入对象的相应按钮,如图4-1所示。

2插入表单在网页中添加表单对象,首先必须创建表单。

方法:

s选择“插入”|“表单”|“表单”命令,s选择“插入”工具栏中的“表单”类别,然后单击“表单”按钮。

目录上一页下一页退出4.2.2设置表单属性选中表单,在“属性”面板上可以设置表单的各项属性。

目录上一页下一页退出4.2.3表单实例表单实例设计一个用户注册页面设计一个用户注册页面目录上一页下一页退出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)打开hbindex.html文档,选中“死神来了”的图片。

(2)单击“行为”面板上的“+”按钮,打开动作菜单。

从动作菜单中选择“打开浏览器”命令,在弹出的“打开浏览器窗口”对话框中设置参数,如图所示。

目录上一页下一页退出(3)在“要显示的URL”文本框右侧单击“浏览”按钮选择在新窗口中载入的目标的URL地址(可以是网页也可以是图像)。

在这里选择./images/sslld.jpg图片,然后将窗口宽度设为500像素,窗口高度设为667像素,窗口名称为“放大图片”。

设置好后单击“确定”按钮即可添加该动作。

(4)在添加行为时,系统自动选择了事件onClick(单击鼠标)。

单击“行为”面板上的“事件菜单”按钮,打开事件菜单,重新选择一个触发行为的事件。

把onClick(单击鼠标)的事件改为onMouseOver(鼠标滑过)(5)保存文件,预览。

目录上一页下一页退出注意:

注意:

如果需要一打开网页就弹出窗口,则选如果需要一打开网页就弹出窗口,则选择对象时单击文档窗口状态栏上的择对象时单击文档窗口状态栏上的标标记,选中整个网页。

记,选中整个网页。

设置动作事件为设置动作事件为onLoad,再将需要显示,再将需要显示的的URL设置好,则可以实现网页一打开就弹设置好,则可以实现网页一打开就弹出窗口的效果。

出窗口的效果。

目录上一页下一页退出3行为应用

(1)播放声音实例。

)播放声音实例。

(2)设置状态行文本。

)设置状态行文本。

(3)创建图像交换效果。

)创建图像交换效果。

目录上一页下一页退出4.4层的应用4.4.1层的概述4.4.2层的基本应用目录上一页下一页退出4.4.1层的概述层的概述层是CSS中的定位技术,在Dreamweaver中对其进行了可视化操作。

文本、图像、表格等元素只能固定其位置,不能互相叠加在一起,而层可以放置在网页文档内的任何一个位置,层内可以放置网页文档中的其他构成元素(如文本、图像、表格等)层可以自由移动,层与层之间还可以重叠,因此还可以用层来布局网页。

网页中的层就像一个透明画布,可以多个层叠加在一起,每个层里都可以是不同的元素,修改其中一个层不会影响到其他层的效果。

目录上一页下一页退出4.4.2层的基本应用1创建层

(1)插入层的方法。

选择“插入”|“布局对象”|“层”命令在“插入”工具栏中选择“布局”选项,单击“绘制层”按钮,在文档窗口内鼠标光标变成十字光标,然后按住鼠标左键拖动出一个矩形,矩形的大小就是层的大小,释放鼠标后层就会出现在页面中。

(2)选择和移动层。

s单击层的边框s在“层”面板中单击层的名称。

s可以按住Shift键来选择多个层。

目录上一页下一页退出(3)调整层的大小。

w选中层后将鼠标放在层的边框控制柄上,当鼠标变为双箭头时拖动鼠标即可。

w如果要调整多个层的大小,可以先将需要调整的层选中,再选择“修改”|“排列顺序”|“设成宽度相同”命令。

(4)对齐层。

选择“修改”|“排列顺序”子菜单中的相应命令对齐的方式有:

左对齐、右对齐、对齐上缘和对齐下缘。

2创建嵌套层创建嵌套层的方法如下:

(1)将光标放在某个层内,选择“插入”|“布局对象”|“层”命令。

目录上一页下一页退出

(2)将光标放在某个层内,将“插入”工具栏“布局”类别中的“绘制层”按钮拖动到该层中。

(3)将光标放在某个层内,单击“绘制层”按钮,按住Alt键键绘制一个新层。

(4)打开“层”面板,从中选择需要嵌套的层,此时按住Ctrl键键的同时拖动该层到另外一个层下,释放Ctrl键和鼠标,这样普通层就转换为嵌套层了。

3设置层的属性选中要设置的层,即可在“属性”面板中设置层的属性目录上一页下一页退出4在层中添加内容在层中任意位置单击,将插入点置于层中,在该层即可输入文字或插入图像,操作方式与在空白页面中操作相同。

5层与表格的转换

(1)表格转换为层。

选择“修改”|“转换”|“表格到层”命令。

2)层转换为表格。

选择“修改”|“转换”|“层到表格”命令目录上一页下一页退出举例说明层的应用以实验三为例以实验三为例

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 工程科技 > 纺织轻工业

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1