为网页添加特效

特效|网页

制作弹出式窗口
有许多网页在打开的时候,会弹出一个较小的窗口,显示广告或一些最新信息。这种弹出式窗口制作很简单,只要在网页代码的〈body〉标签后面插入类似代码即可:
<script language=″javascript″>
window.open(′url′,′窗口名′,′属性列表′);
</script>
其中“url”是在窗口中显示的html文档的地址;“窗口名”可任意起一个,但不要用中文;“属性列表”是一个用逗号分开的各个属性值的字符串,它确定了弹出窗口的外观与状态。常用属性有:
toolbar(是否显示工具栏)、location(是否显示地址栏)、directories(是否显示常用链接)、status(是否显示状态栏)、menubar(是否显示选单条)、scrollbars(是否使用滚动条)、resizable(是否可改变大小),这些属性值等于1时表示是,等于0或不将此属性加入列表时表示否。此外,还有width(窗口宽)、height(窗口高)、top(与屏幕上边的距离)、left(与屏幕左边的距离)等属性用于对弹出窗口大小和位置的控制。
例子:要制作一个只有地址栏、无滚动条、可改变大小、高100像素、宽300像素、初始位置为距屏幕上边与左边都为100像素的弹出窗口,并在其中显示当前目录下hello.htm的内容,则要将上面的代码中间的一段改为:“window.open(′hello.htm′,′window1′,′location=1,scrollbars=0,resizable=1,height=100,width=300,top=100,left=100′);”。

制作“关闭窗口”、“前进”、“后退”链接
“关闭窗口”、“前进”、“后退”这些浏览器本身具备的功能,也可通过页面中的超级链接来实现。
在frontpage中,选择要链接的文字或图像,按ctrl-k 打开“create hyperlink(创建超级链接)”对话框,在“url”中输入“javascript:window.close()”可制作关闭当前浏览器窗口链接;输入“javascript:history.forward()”可制作“前进”链接,功能相当于浏览器上的“前进”按钮;输入“javascript:history.back()”可制作“后退”链接,功能相当于浏览器上的“后退”按钮。这些链接对于没有选单、没有按钮的弹出式窗口会非常有用。

制作具有链接功能的下拉式选单
在frontpage 中,使用“insert(插入)”〉“form field(表单域)”〉“drop-down menu(下拉选单)”命令插入一个下拉选单。右键单击它,在快捷选单中选“form field properties(表单域属性)”,在打开的对话框中按“add...(添加...)”按钮打开“add choice(添加选项)”对话框,在“choice(选项)”中输入要在下拉选单中显示的文本描述,点击“指定值”前的复选框使该项有效,在它下边的文本框中输入相应的完整url地址,然后确定。继续添加其它选单选项,完成后确定。
在表单中任意位置击右键,在快捷选单中选“form properties(表单属性)”,在弹出的对话框中选择“send to other(发送到其它)”。
点击frontpage 界面左下角的“html”标签进入源代码状态,寻找刚才制作的下拉式选择框所对应的代码,在〈select〉标签中加入这样一段代码:onchange=″location.href=this.options[this.selectedindex].value″。

用frontpage可视化编辑样式表
你一定见过许多主页上有这样的链接,它并不像普通链接总是带下划线,当鼠标指上去时,链接文字就会变色并出现下划线,这都是样式表的功劳!
用frontpage打开要编辑的html文件,使用选单命令“format(格式)”〉“stylesheet...(样式...)”打开“format stylesheet(样式格式)”对话框,这里显示了当前文件内联样式表的内容,你可以在〈!--...--〉 之间添加或修改样式表语句。如果要添加新的样式语句,首先要输入标签(如:a:link、a:hover、a:active、a:visited 它们分别表示:正常情况下未访问过的、鼠标接近时、鼠标点击时、访问过的链接的样式)。然后,把光标停在这个标签末尾,点击对话框左下角的“style...(样式...)”按钮,进入“style(样式)”对话框,在这里你可以跟据需要设置多种样式属性。如果要更改某个标签的样式,只要光标停在相应标签后面的一对大括号中代码的任意位置,然后按“style...(样式...)”按钮进行修改即可。
例子:你希望鼠标移动到链接上时,文字背景变为黄色,文字本身变为红色且无下划线。先在〈!--...--〉之间输入a:hover,然后把光标停在它末尾,按“style...(样式...)”按钮进入“style(样式)”对话框,在“colors(颜色)”页中设置“foreground color(前景颜色)”为红色,“background color(背景颜色)”为黄色,在“text(文本)”页中设置“decoration(修饰)”为“none(无)”,然后确定。这时,frontpage已将代码{ background-color: rgb(0,0,128); color: rgb(255,255,255); text-decoration: none }添加到a:hover标签后面,是不是比自已编容易得多?

制作鼠标指针指在上面时会变化的动态按钮
在frontpage中通过选单命令:“insert(插入)”〉“active elements(active单元)”〉“hover botton(动态按钮)”,可以制作动态效果的按钮。但是,这种按钮效果是基于java applet 小程序的,它有速度慢、不能显示提示文本、鼠标指针不能变为手形等缺点。这里介绍用dreamweaver 2.0 制作基于javascript的动态按钮的方法。
在制作这种按钮效果之前,首先要为每个按钮制作两张不同的图片,一张是正常情况下要显示的图片,另一张是鼠标指针停留在按钮上时要显示的图片。图片命名时最好有规律,比如两张图片名分别是botton.gif 、botton_1.gif。
首先在frontpage中插入第一张图片,并设好超级链接,文件保存后用dreamweaver调入(如果熟悉dreamweaver,可以不要frontpage“帮忙”)。单击已插入的第一张图片选中它,点击“behaviors (行为)”窗口(如果未显示,按f8显示它)中的+号按钮,在选单中选“swip image(交换图片)”打开对话框,按“browse(浏览)”按钮选择第二张图片,最后点“ok”确定。这样,一个动态效果按钮就做成了,简单吧。

时间: 2024-09-16 23:50:06

为网页添加特效的相关文章

Dreamweaver制作网页打开特效教程

  下图就是一个特效,这是从一个页面切换到另一个页面的效果. 1.按快捷键ctrl+n新建一个页面,选择基本页 html,创建. 2.接着我们插入一个图片使得我们的效果更好看出来.点击插入--图像. 3.在插入图片对话框中选择一个图片,我们选择du小策的艺术照一张. 4 插入图片以后,我们在图片上方输入du小策和du帮帮. 5.按快捷键ctrl+s,储存,文件名为du小策. 6.同样的方法我们建立du帮帮的个人页面. 7.接着我们给du小策这几个字添加指向"du小策.html"的文件的

PowerPoint为图片怎么添加特效

  PowerPoint为图片怎么添加特效         在PowerPoint 2016中新建幻灯片后,切换到"插入"选项卡,再点击"图片"导入需要制作特效的图片.其实也可以直接在网页或资源管理器中复制图片文件,然后在PowerPoint中按Ctrl+V键直接粘贴. 选中照片后,切换到"图片工具-格式"选项卡,再点击"图片效果→三维旋转→透视",选中"左向对比"效果. 现在图片有了透视变化,但还不够酷.

解决win7系统无法将网页添加到收藏夹的方法

  许多用户在访问网站时,如果看到自己感兴趣的网页内容或网站,通常我们都会通过Ctrl+D添加到收藏夹中,但近期有部分win7系统用户,在浏览器下添加网页收藏时,却发现无法将网页添加到收藏夹,对于这一问题我们如何解决呢?下面看小编为大家提供的详细解决方法吧! 原因分析: 很多时候网址不能收藏都是由于收藏夹目录指向错误引起的,我们可以到注册表里将其修复. 操作方法: 1.在开始菜单中点击"运行",然后输入"regedit"并且回车; 2.打开注册表编辑器,依次展开[H

ASP代码给网页添加验证码的实现方法

  本文给大家介绍ASP实现给网页添加验证码的功能,您可以将这个功能添加在注册表单.网页评论等中,下边来看实现的方法: 第一步:下载本文下的附件.该压缩包为 imgchk 文件夹 ,其中有三个文件:validatecode.asp,validatebody.fixvalidatehead.fix 主要即是为生成 验证码 服务的. 将解压文件夹直接释放在需要在某页添加验证码的同目录下,(比如 addnew.asp 需要添加验证码,该文件在 cnbruce 文件夹下,则将 imgchk 文件夹同时释

网页添加背景音乐

网页 一.学会添加音乐文件 为网页添加背景音乐的方法一般有两种,第一种是通过普通的<bgsound>标签来添加,另一种是通过<embed>标签来添加. (一)使用<bgsound>标签 用Dreamweaver打开需要添加背景音乐的页面,点击"代码"打开代码编辑视图,在<body></body>之间输入"<"在弹出的代码提示框中选择bgsound. Dreamweaver自动输入"<b

让你的主页声色并茂—巧为网页添加背景音乐

网页 对于个人站长来说,如何能使自己的网站与众不同.充满个性,一直是不懈努力的目标.除了尽量提高页面的视觉效果.互动功能以外,如果能在打开网页的同时,听到一曲优美动人的音乐,相信这会使你的网站增色不少. 一.学会添加音乐文件 为网页添加背景音乐的方法一般有两种,第一种是通过普通的< bgsound>标签来添加,另一种是通过< embed>标签来添加. (一)使用< bgsound>标签 用Dreamweaver打开需要添加背景音乐的页面,点击"代码"

网页添加CSS样式表的四种方式

核心提示:网页添加CSS样式表的四种方式 一.使用STYLE属性: 将STYLE属性直接加在个别的元件标签里. <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...}例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二

网页图片特效小技巧

技巧|特效|图片特效|网页 这几个网页图片特效小技巧基本主要利用了一些鼠标控制语句.css滤镜代码,加上简单的javascript语句实现的,简单有趣,可以作为帮助一些朋友javascript入门的小例子. 图片循环渐显渐隐 效果描述:图片循环渐显渐隐-- 实现方法: 1.把如下代码加入<body>区域中: <img src="http://www.webjx.com/htmldata/2005-05-25/image1.gif" name="u"

网页图片特效技巧小总结

技巧|特效|图片特效|网页 这几个网页图片特效小技巧基本主要利用了一些鼠标控制语句.css滤镜代码,加上简单的javascript语句实现的,简单有趣,可以作为帮助一些朋友javascript入门的小例子. 图片循环渐显渐隐 效果描述:图片循环渐显渐隐-- 实现方法: 1.把如下代码加入<body>区域中: <img src="http://www.webjx.com/htmldata/2006-02-27/image1.gif" name="u"