电脑故障

位置:IT落伍者 >> 电脑故障 >> 浏览文章

为网页添加特效


发布日期:2020/7/6
 

制作弹出式窗口有许多网页在打开的时候会弹出一个较小的窗口显示广告或一些最新信息这种弹出式窗口制作很简单只要在网页代码的〈body〉标签后面插入类似代码即可<script language=″javascript″> windowopen(′url′′窗口名′′属性列表′)</script>其中url是在窗口中显示的html文档的地址窗口名可任意起一个但不要用中文属性列表是一个用逗号分开的各个属性值的字符串它确定了弹出窗口的外观与状态常用属性有toolbar(是否显示工具栏)location(是否显示地址栏)directories(是否显示常用链接)status(是否显示状态栏)menubar(是否显示选单条)scrollbars(是否使用滚动条)resizable(是否可改变大小)这些属性值等于时表示是等于或不将此属性加入列表时表示否此外还有width(窗口宽)height(窗口高)top(与屏幕上边的距离)left(与屏幕左边的距离)等属性用于对弹出窗口大小和位置的控制

例子要制作一个只有地址栏无滚动条可改变大小像素像素初始位置为距屏幕上边与左边都为像素的弹出窗口并在其中显示当前目录下的内容则要将上面的代码中间的一段改为windowopen(′′′window′location=scrollbars=resizable=height=width=top=left=′)

制作关闭窗口前进后退链接关闭窗口前进后退这些浏览器本身具备的功能也可通过页面中的超级链接来实现

在frontpage中选择要链接的文字或图像按ctrl-k 打开create hyperlink(创建超级链接)对话框url中输入javascriptwindowclose()可制作关闭当前浏览器窗口链接输入javascripthistoryforward()可制作前进链接功能相当于浏览器上的前进按钮输入javascripthistoryback()可制作后退链接功能相当于浏览器上的后退按钮这些链接对于没有选单没有按钮的弹出式窗口会非常有用

制作具有链接功能的下拉式选单在frontpage 中使用insert(插入)form field(表单域)drop-down menu(下拉选单)命令插入一个下拉选单右键单击它在快捷选单中选form field properties(表单域属性)在打开的对话框中按add……(添加……)按钮打开add choice(添加选项)对话框choice(选项)中输入要在下拉选单中显示的文本描述点击指定值前的复选框使该项有效在它下边的文本框中输入相应的完整url地址然后确定继续添加其它选单选项完成后确定

在表单中任意位置击右键在快捷选单中选form properties(表单属性)在弹出的对话框中选择send to other(发送到其它)

点击frontpage 界面左下角的html标签进入源代码状态寻找刚才制作的下拉式选择框所对应的代码在〈select〉标签中加入这样一段代码onchange=″locationhref=thisoptions[thisselectedindex]value″

用frontpage可视化编辑样式表你一定见过许多主页上有这样的链接它并不像普通链接总是带下划线当鼠标指上去时链接文字就会变色并出现下划线这都是样式表的功劳!

用frontpage打开要编辑的html文件使用选单命令format(格式)stylesheet……(样式……)打开format stylesheet(样式格式)对话框这里显示了当前文件内联样式表的内容你可以在〈!——……——〉 之间添加或修改样式表语句如果要添加新的样式语句首先要输入标签(如alinkahoveraactiveavisited 它们分别表示正常情况下未访问过的鼠标接近时鼠标点击时访问过的链接的样式)然后把光标停在这个标签末尾点击对话框左下角的style……(样式……)按钮进入style(样式)对话框在这里你可以跟据需要设置多种样式属性如果要更改某个标签的样式只要光标停在相应标签后面的一对大括号中代码的任意位置然后按style……(样式……)按钮进行修改即可

例子你希望鼠标移动到链接上时文字背景变为黄色文字本身变为红色且无下划线先在〈!——……——〉之间输入ahover然后把光标停在它末尾style……(样式……)按钮进入style(样式)对话框colors(颜色)页中设置foreground color(前景颜色)为红色background color(背景颜色)为黄色text(文本)页中设置decoration(修饰)none(无)然后确定这时frontpage已将代码{ background-color rgb( color rgb( text-decoration none }添加到ahover标签后面是不是比自已编容易得多?

制作鼠标指针指在上面时会变化的动态按钮在frontpage中通过选单命令insert(插入)active elements(active单元)hover botton(动态按钮)可以制作动态效果的按钮但是这种按钮效果是基于java applet 小程序的它有速度慢不能显示提示文本鼠标指针不能变为手形等缺点这里介绍用dreamweaver 制作基于javascript的动态按钮的方法

在制作这种按钮效果之前首先要为每个按钮制作两张不同的图片一张是正常情况下要显示的图片另一张是鼠标指针停留在按钮上时要显示的图片图片命名时最好有规律比如两张图片名分别是bottongif botton_gif首先在frontpage中插入第一张图片并设好超级链接文件保存后用dreamweaver调入(如果熟悉dreamweaver可以不要frontpage帮忙单击已插入的第一张图片选中它点击behaviors (行为)窗口(如果未显示按f显示它)中的+号按钮在选单中选swip image(交换图片)打开对话框browse(浏览)按钮选择第二张图片最后点ok确定这样一个动态效果按钮就做成了简单吧

上一篇:违例控制:解决错误

下一篇:默认构建器