翻车的Adobe Dreamweaver CS3

Abraham Chaffin


	[Rollovers in Adobe Dreamweaver CS3] 教程 : Adobe Dreamweaver 教程翻车的Adobe Dreamweaver CS3

无标题文档

Image Rollovers in Adobe Dreamweaver CS3

本教程的目的是为用户提供更多的控制和灵活性使用Dreamweaver CS3 界面中，以创建图像mouseovers. 它也将教导如何分配鼠标悬停目标图像上某个位置的网页，然后指定一个鼠标悬停样式原始鼠标悬停按钮.

第2部分显示如何嵌入弹出瑞士法郎影片到您的网页上的一些小改动的内置功能Dreamweaver CS3.

亚伯拉罕查芬
Creativecow.net,
坎布里亚, 美国加利福尼亚州

© 2007 Creativecow.net. 保留所有权利.

一些图像的大小相同，需要这个教程，所以我已经包括了一些，你可以下载这里.

打开 html 文件中规定Dreamweaver CS3 并让我们开始吧.

1 ） 首先，我们将建立一些基本的鼠标悬停图像. 去插入“菜单图像物体”翻滚图片. 图片的名字是什么的JavaScript ，将创建将利用地发现，图像. 饰品是一个很好的名字. 使用1.JPG格式的原始图像和1比.图片作为过渡形象. 保持预展期形象复选框. 替代文字和网址arn't重要，因为我们arn't将是把这个网络上，或采取你到另一个网页的位置，以便按OK.

2 ） 按一下旁边的新插入的过渡形象和重复步骤1 ，插入更多/所有过渡图像. 刚刚取代谱在步骤1与2等.

你现在有几个翻转图像. 保存并预览 html 文件，您将会看到，他们滚转很好. 但是，如果你想真正的形象，你是滚动显示为一个较大上图中?

让我们在过渡形象出现在不同的位置在网页上. 首先，我们需要一个占位符图像加载网页时负荷发生在任何翻车.

3 ） 把占位.图片上面我们过渡图像按回报您的光标前面的图像，然后将插入“ 图片, 选择占位.Gif和按下OK.

Image Name

4 ） 我们现在需要这种形象的名称，以便脚本可以找到它. 选择占位符图像, 在属性窗口左侧的宽度和高度参数类型的“目标”的图片名称.

5 ） 指定的目标图像的过渡是相当简单的. 打开行为窗口去窗口“菜单行为.

6 ） 点击第一个图片（饰品），您应该看到两个行为分配给它.
请 a onmouseout | 交换图像恢复
请 a onmouseover | 交换图像
我们要调整交换图像的行为，以指向其他图像，以便双击“交换图片”. 在交换图像窗口选择设置源案文应为“ 1 -以上.图片“ ，并因此将它删除它. 选择图片“目标”和粘贴“ 1比.格式“的设置源领域和按下OK.

7 ） 重复步骤6的所有过渡图像插入，这样你的目标是为所有这些设定的形象命名为“目标”. 保存并预览您的工作，看看您完成.

现在，如果我们不想改变形象后，我们推出了，然后来到了?

8 ） 点击“饰品”, 在行为窗口点击交换图像恢复并按下Delete键. （您可以重复此步骤，再次对您的所有过渡图片）

现在，滚转形象是要到另一个位置的过渡按钮期待有点单调. 让我们指派一些CSS样式，以便使它们看起来更有趣.

9 ） 在窗口的CSS让我们创造和新的CSS规则. 选择类型将级, 名称将“按钮” ，并确定在: 本文件只. 让我们建立一个小型填充及无形边界的1像素. 在填充下的方块类-设置为10个，使各方面. 设置边界同所有“固体 : 1像素 : 颜色＃ ffffff “. 按OK. （的原因，我们树立了一个无形的边界因此，当我们创建一个规则，以后将建立一个边界，我们不想歪曲我们的内容定位.)

11 ） 每个过渡按钮选择按钮的“类”的属性窗口.

CSS Class Border

12 ） 创建一个新的CSS规则时，要指派过渡按钮或鼠标置于. 创建它只是相同步骤9只把它称为“ buttonsover ”, 填充10像素, 和边界的“固体 : 1像素 : 颜色＃九十九点零零万“.

13 ） 选择“饰品” ，并在行为窗口右边点击“交换图像” ，然后选择“添加新的清单项目”. 左键在新的空间，请 a onmouseover型“饰品.类= ' buttonsover ' “. （这也可以重复所有其他过渡图像.)

14 ） 在窗口中的行为onmouseout外地请在 a 分配“饰品.类= '按钮' “. 这将使该级恢复当您的鼠标. 做到这一点对所有过渡图像.

On Mouseover and on Mouseout

这应该给你的基本理念有些事情你可以做的过渡职能Dreamweaver CS3.

第2部分

下一个部分本教程是有点Dreamweaver黑客显示瑞士法郎视频/影片当您将鼠标放在另一个因素. 组合使用，与其他一些简单的功能，您可以得到一些非常酷的效果为您的网站. 您可以使用此效果，展示您的影片在一个画廊并不像istockvideo.

首先您需要下载的项目文件这里.

电影1 电影2 电影3

内容阶层“ movinvis ”这里

的对象，本教程是为了显示视频时过渡的一个因素. 我们要开始创建的CSS类，我们将指派给占位股利整个教程.

1 ）在的CSS窗口点击“新的CSS规则”图标. 选择类型将是“类”, 要求的名称级“ movinvis ” ，它应建立本文件只.

2 ）中的CSS规则定义窗口选择“定位”一类，并设置职位类型，以绝对, 能见度隐藏, 和的Z - 999指数. （绝对定位使阶级不把它周围的其他内容, 和更高的Z指数将课堂上的其他要素.) 按OK.

3 ）再次创建一个新的CSS规则中的相同步骤1和2只设置的名称，类别“ movvis ” ，并设置能见度明显.

4 ）插入一个新的股利前往插入“菜单布局对象” DIV标记. 没有设置任何属性和新闻部尚未确定.

5 ）选择新创建的股利和在属性窗口中设置股利编号为“ movtarget ”和类“ movinvis ”.

现在，占位股利是安装收到我们的电影让我们创建按钮，将用于翻车. 这一次是为了简单，我们将只使用文字.

6 ）将光标放在上面的无形股利和类型“电影1 ”选中文字, 并使其成为超链接. 把“ ＃ ”为文件名或网址. （您可以重复此步骤，以安装在翻车的“电影2 ”和“电影3 ”

明年我们将插入的电影，我们要指派给该部使用的过渡环节. 然后我们将它们分配给股利onmouseover我们联系. 最后，我们将指派班onmouseover和onmouseout所以股利只能当电影正在展出.

7 ）去插入“菜单媒体” Flash并选择rollover1.瑞士法郎. 按OK.

8 ）选择新插入Flash视频和去查看“菜单代码. 选择的代码之间的 noscript 和“ / noscript ”标签，并复制到您的剪贴板粘贴后要.

9 ）返回到设计视图前往查看“ 设计. 选择Flash视频和删除.

10 ）选择“电影1 ”链接，并在行为窗口按（ + ）购买行为按钮. 选择设置文本“设置文本的集装箱. 选择容器股利“ movtarget ”并粘贴复制到新的代码 html 领域.

11 ）确保行为设置为onmouseover事件创建此效应. 如果不是您可以更改它的点击事件，并选择onmouseover从下拉.

12 ）与“电影1 ”的联系仍处于选中状态（ + ）添加其他行为称为“改变财产”. 确保类型的内容是“课”, 和元素ID是股利“ movtarget ”. 选择“输入:“电台的财产，进入”类“. 输入“ movvis ”为新值，然后按确定. 确保这种行为是分配给onmouseover事件, 如果不改变它.

13 ）重复步骤12只指派新的价值，因为“ movinvis ” ，并指派行动的onmouseout事件.

14 ）重复步骤7月13日，以“电影2 ”和“电影3 ”.

现在，我们将进行破解的JavaScript上的数据仓库用途改变财产的行为，使工作的方式，我们用它来改变班.

15 ）去修改“菜单查找和替换. 发现在“当前文件”, 搜索“源代码”, 找到“目标.风格.“, 取代“目标.“, 和取代两个实例了这方面的JavaScript代码.

您应该能够保存和预览您的工作，现在看到您完成. 这种技术可以用来搭配定位脚本获得瑞士法郎位置究竟在何处您想要. 或安装不同的divs在您想要的电影和具体目标的活动，去那里. 还有其他方法获得相同的效果，但这是一个略黑的方式得到它与简单的功能内置在Dreamweaver CS3.