温柔网

 找回密码
 注册

查看: 1342|回复: 6

网站制作技巧

  [复制链接]
发表于 2005-5-5 22:10:20 | 显示全部楼层 |阅读模式
Q: 背景音乐是如何插入的?
A: 当然往网页中插入背景音乐会使页面声色不少。但是在使用音乐背景的时候要注意,背景音乐不能太大,否则文件传输会成问题,从而使网页的吸引力下降。

   在 HTML 中有 embed 标签可以实现背景音乐的插入功能,其语法规则如下:

<EMBED src="music.mid" autostart="bool" loop="n" width="m" height="k" >

   下表给出有关上面的语法的一些具体的值和含义:

src  音乐文件的路径及文件名;   
autostart true 为音乐文件上传完后自动开始播放,默认为 false (否)   
loop true 为无限次重播, false 为不重播,某一具体值(整数)为重播多少次   
volume  取值范围为 "0-100" ,设置音量,默认为系统本身的音量   
starttime " 分:秒 " ,设置歌曲开始播放的时间,如, starttime="00:10" ,从第 10 开始播放   
endtime " 分:秒 " ,设置歌曲结束播放的时间   
width  控制面板的宽   
height  控制面板的高   
controls  控制面板的外观 controls="console/smallconsole/playbutton/ pausebutton/stopbutton/
volumelever" ·console  正常大小的面板   
·smallconsole  较小的面板   
·playbutton  显示播放按钮   
·pausebutton  显示暂停按钮   
·stopbutton  显示停止按钮   
·volumelever  显示音量调节按钮   
  
hidden  为 true 时可以隐藏面板   

Q: 自动显示最后更新时间。
A: 我们自己网页上传以后,经常会不断更新和添加新的内容,而怎样才能让浏览网页的网友知道自己的辛苦更新呢?通常我们会在网页的一角,列出此网页更新的最后日期,但是这个工作如果手工来做的话,既麻烦又容易遗忘。怎么样解决这个问题呢?

  看了这个小技巧,你定会说,原来这么简单。好了,下面我们来做一下吧。

源码粘贴框:

<script language="JavaScript">
<!--hide script from old browsers
document.write("本页最后更新日期: " + document.lastModified + "")
// end hiding -->
</script>

我们只要把“源码粘贴框”中的JavaScript代码复制到你想要显示最后更新时间的地方就行了。

  如果我们把代码复制到如下的表格中,则每次这个页面的html文件更改时,表格中便自动显示出更新时间,如下所示:

本页最后更新日期: 07/10/2000 14:26:37   

  代码中document.write()的意思是在页面上写出括号内设定的内容,现在我们采用“document.lastModified”得到文件最后更新时间,并把它显示出来。灵活运用“document.write()”语句,我们还能在页面上输出其它内容,比如说当前的时间、日期、用户信息等,大家可以去试一试。

Q: 关于弹出窗口的制作。
A:经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段Javascript代码即可实现。下面俺就带您剖析它的奥秘。  

【1、最基本的弹出窗口代码】  

其实代码非常简单:  

<SCRIPT LANGUAGE="javascript">  
<!--
window.open ('page.html')
-->  
</SCRIPT>  
因为着是一段javascripts代码,所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。<!-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。  
window.open ('page.html') 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以,只是不要混用。  
这一段代码可以加入HTML的任意位置,<head>和</head>之间可以,<body>间</body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。  


【2、经过设置后的弹出窗口】  

下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。  
我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。  
<SCRIPT LANGUAGE="javascript">  
<!--
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//写成一行
-->  
</SCRIPT>  
参数解释:  
<SCRIPT LANGUAGE="javascript"> js脚本开始;  
window.open 弹出新窗口的命令;  
'page.html' 弹出窗口的文件名;  
'newwindow' 弹出窗口的名字(不是文件名),非必须,可用空''代替;  
height=100 窗口高度;  
width=400 窗口宽度;  
top=0 窗口距离屏幕上方的象素值;  
left=0 窗口距离屏幕左侧的象素值;  
toolbar=no 是否显示工具栏,yes为显示;  
menubar,scrollbars 表示菜单栏和滚动栏。  
resizable=no 是否允许改变窗口大小,yes为允许;  
location=no 是否显示地址栏,yes为允许;  
status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;  
</SCRIPT> js脚本结束  


【3、用函数控制弹出窗口】  

下面是一个完整的代码。  
<html>  
<head>  
<script LANGUAGE="JavaScript">  
<!--
function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=
no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//-->  
</script>  
</head>  
<body onload="openwin()">  
...任意的页面内容...  
</body>  
</html>  
这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前
没有任何用途。  
怎么调用呢?  
方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口;  
方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;  
方法三:用一个连接调用:  
<a href="#" onclick="openwin()">打开一个窗口  
注意:使用的“#”是虚连接。  
方法四:用一个按钮调用:  
<input type="button" onclick="openwin()" value="打开窗口">  

【4、同时弹出2个窗口】  

对源代码稍微改动一下:  
<script LANGUAGE="JavaScript">  
<!--
function openwin()
{ window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
}
//-->  
</script>  
为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。  

注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。OK?  

【5、主窗口打开文件1.htm,同时弹出小窗口page.html】  

如下代码加入主窗口<head>区:  
<script language="javascript">  
<!--
function openwin()
{window.open("page.html","","width=200,height=200")
}
//-->  
</script>  
加入<body>区:  
<a href="1.htm" onclick="openwin()">open即可。  

【6、弹出的窗口之定时关闭控制】  

下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则...),让它10秒后自动关闭是不是更酷了?  

首先,将如下代码加入page.html文件的<head>区:  
<script language="JavaScript">  
function closeit()  
{setTimeout("self.close()",10000) //毫秒}  
</script>  
然后,再用<body onload="closeit()"> 这一句话代替page.html中原有的<BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)  

【7、在弹出窗口中加上一个关闭按钮】  

<FORM>  
<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>  
</FORM>  
呵呵,现在更加完美了!  

【8、内包含的弹出窗口-一个页面两个窗口】  

上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。  

通过下面的例子,你可以在一个页面内完成上面的效果。  
<html>  
<head>  
<SCRIPT LANGUAGE="JavaScript">  
function openwin()  
{OpenWindow=window.open("", "newwin", "height=250, width=250,
toolbar=no,scrollbars=

"+scroll+",menubar=no");  
//写成一行  
OpenWindow.document.write("<TITLE>例子</TITLE>")  
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")  
OpenWindow.document.write("<h1>Hello!</h1>")  
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")  
OpenWindow.document.write("</HTML>")  
OpenWindow.document.close()}  
</SCRIPT>  
</head>  
<body>  
<a href="#" onclick="openwin()">打开一个窗口  
<input type="button" onclick="openwin()" value="打开窗口">  
</body>  
</html>  
看看 OpenWindow.document.write()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用OpenWindow.document.close()结束啊。  

【9、终极应用--弹出的窗口之Cookie控制】  

回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(有解决的办法吗?Yes! ;-) Follow me.  

我们使用cookie来控制一下就可以了。  

首先,将如下代码加入主页面HTML的<HEAD>区:  
<script>  
function openwin()  
{window.open("page.html","","width=200,height=200")}  
function get_cookie(Name)  
{var search = Name + "="  
var returnvalue = "";  
if (document.cookie.length > 0) {  
offset = document.cookie.indexOf(search)  
if (offset != -1) {  
offset += search.length  
end = document.cookie.indexOf(";", offset);  
if (end == -1)  
end = document.cookie.length;  
returnvalue=unescape(document.cookie.substring(offset,end))  
}  
}  
return returnvalue;  
}  
function loadpopup(){  
if (get_cookie('popped')==''){  
openwin()  
document.cookie="popped=yes"  
}  
}  
</script>  
然后,用<body onload="loadpopup()">(注意不是openwin而是loadpop啊!)替换主页面中原有的<BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!  

写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。  

需要注意的是,JS脚本中的的大小写最好前后保持一致。  
 楼主| 发表于 2005-5-5 22:11:05 | 显示全部楼层

Q:网页中插入音频视频文件的代码。
A: 1.avi格式

<object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA">
<param name="ShowDisplay" value="0">
<param name="ShowControls" value="1">
<param name="AutoStart" value="1">
<param name="AutoRewind" value="0">
<param name="layCount" value="0">
<param name="Appearance value="0 value=""">
<param name="BorderStyle value="0 value=""">
<param name="MovieWindowHeight" value="240">
<param name="MovieWindowWidth" value="320">
<param name="FileName" value="file:///D|/work/vod/Mbar.avi">
<embed width="400" height="200" border="0" showdisplay="0" showcontrols="1" autostart="1" autorewind="0" playcount="0" moviewindowheight="240" moviewindowwidth="320" filename="file:///D|/work/vod/Mbar.avi" src="Mbar.avi">
</embed>  
</object>

2.mpg格式  

<object classid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A" id="ActiveMovie1" width="239" height="250">
<param name="Appearance" value="0">
<param name="AutoStart" value="-1">
<param name="AllowChangeDisplayMode" value="-1">
<param name="AllowHideDisplay" value="0">
<param name="AllowHideControls" value="-1">
<param name="AutoRewind" value="-1">
<param name="Balance" value="0">
<param name="CurrentPosition" value="0">
<param name="DisplayBackColor" value="0">
<param name="DisplayForeColor" value="16777215">
<param name="DisplayMode" value="0">
<param name="Enabled" value="-1">
<param name="EnableContextMenu" value="-1">
<param name="EnablePositionControls" value="-1">
<param name="EnableSelectionControls" value="0">
<param name="EnableTracker" value="-1">
<param name="Filename" value="../../../mpeg/halali.mpg" valuetype="ref">
<param name="FullScreenMode" value="0">
<param name="MovieWindowSize" value="0">
<param name="layCount" value="1">
<param name="Rate" value="1">
<param name="SelectionStart" value="-1">
<param name="SelectionEnd" value="-1">
<param name="ShowControls" value="-1">
<param name="ShowDisplay" value="-1">
<param name="ShowPositionControls" value="0">
<param name="ShowTracker" value="-1">
<param name="Volume" value="-480">
</object>


3.smi格式  

<OBJECT id=RVOCX classid=clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA width=240
height=180>
<param name="_ExtentX" value="6350">
<param name="_ExtentY" value="4763">
<param name="AUTOSTART" value="-1">
<param name="SHUFFLE" value="0">
<param name="REFETCH" value="0">
<param name="NOLABELS" value="-1">
<param name="SRC" value="rm.rm">
<param name="CONTROLS" value="ImageWindow">
<param name="CONSOLE" value="console1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000"><embed src="real.smi" type="audio/x-pn-realaudio-plugin" console="Console1" controls="ImageWindow" height="180" width="240" autostart="true"></OBJECT>

4.rm格式  

<OBJECT ID=video1 CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=288 WIDTH=352>

<param name="_ExtentX" value="9313">
<param name="_ExtentY" value="7620">
<param name="AUTOSTART" value="0">
<param name="SHUFFLE" value="0">
<param name="PREFETCH" value="0">
<param name="NOLABELS" value="0">
<param name="SRC" value="rtsp://203.207.131.35/vod/dawan-a.rm";>
<param name="CONTROLS" value="ImageWindow">
<param name="CONSOLE" value="Clip1">
<param name="LOOP" value="0">
<param name="NUMLOOP" value="0">
<param name="CENTER" value="0">
<param name="MAINTAINASPECT" value="0">
<param name="BACKGROUNDCOLOR" value="#000000"><embed SRC type="audio/x-pn-realaudio-plugin" CONSOLE="Clip1" CONTROLS="ImageWindow" HEIGHT="288" WIDTH="352" AUTOSTART="false">

</OBJECT>

5.wmv格式

<object id="NSPlay" width=200 height=180 classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/

nsmp2inf.cab#Version=6,4,5,715" standby="Loading Microsoft Windows Media Player components..." type="application/x-oleobject" align="right" hspace="5">
<!-- ASX File Name -->
<param name="AutoRewind" value=1>
<param name="FileName" value="xxxxxx.wmv">
<!-- Display Controls -->

<param name="ShowControls" value="1">
<!-- Display Position Controls -->

<param name="ShowPositionControls" value="0">
<!-- Display Audio Controls -->

<param name="ShowAudioControls" value="1">
<!-- Display Tracker Controls -->

<param name="ShowTracker" value="0">
<!-- Show Display -->

<param name="ShowDisplay" value="0">
<!-- Display Status Bar -->

<param name="ShowStatusBar" value="0">
<!-- Diplay Go To Bar -->

<param name="ShowGotoBar" value="0">
<!-- Display Controls -->

<param name="ShowCaptioning" value="0">
<!-- Player Autostart -->

<param name="AutoStart" value=1>
<!-- Animation at Start -->

<param name="Volume" value="-2500">
<param name="AnimationAtStart" value="0">
<!-- Transparent at Start -->

<param name="TransparentAtStart" value="0">
<!-- Do not allow a change in display size -->

<param name="AllowChangeDisplaySize" value="0">
<!-- Do not allow scanning -->

<param name="AllowScan" value="0">
<!-- Do not show contect menu on right mouse click -->

<param name="EnableContextMenu" value="0">
<!-- Do not allow playback toggling on mouse click -->
<param name="ClickToPlay" value="0">
</object>

Q:: 在Frontpage中插入Flash文件。
A: 有两种方法可以Frontpage 2000中加入Flash文件,第一种方法是在HTML源代码的「body」中加入「embed src="swf文件名" width=100 height=100」,用户在实际添加时宽度和高度自行调整。第两个方法是在frontpage中点击菜单插入--高级--插件,然后从浏览菜单中找到swf文件,并确定文件的高度和宽度,然后点击确定。

Q: 我用word做网页 。
A: 你知道吗?制作网页并不是很神秘、很困难的事情,现在有很多制作网页的软件,他们的操作都很简单,做出来的网页也很漂亮,那我给大家介绍一下你最熟悉的东东word吧,它也能做网页啊!
     一.建立网页
      1.运行word,单击“文件——新建”;
      2.在弹出的窗口中,单击“web页”,然后选择“普通版式”。单击“确定”,弹出窗口
      3.可以用提供的模板。
     二、编辑网页
      1.插入图片
       普通模板建立的网页有3栏,我们可以对它进行修改。先删除一栏,操作方法和word中删除表格行或列是一样的。这时,我们的网页只剩下2栏,在左边这一栏装上一幅画吧。
        方法是:将光标移到要插入图象的地方,然后单击“插入”,选择“图片”,找到“来自文件”后单击。
            在弹出的窗口中选择要插入的图片,单击“插入”
      2.编辑文字
         在右边那一栏里,根据提示输入自己喜欢的文字,当然你可以采取复制、粘贴的方法来完成。呵呵!看看怎么样啊!还满意吧!那就保存一下,否则你可就白忙活了。
      3.保存、修改网页
         保存的方法很简单,单击工具栏的“保存”按钮,在弹出的窗口中选择要保存的文件夹,给自己的网页文件起个名字,然后单击“保存”就OK了!
         修改网页也是非常简单的,用word打开,根据自己的需要修改就行了。
     怎么样?只要你会word的操作,就能做出网页来!
     最后告诉你,要想发布你的网页,就去网易申请个人空间,根据网易给你的要求进行操作,上传就可以让别人看到了!!

Q: 网页设计中常用的一些技巧。
A: ★原文转载自eniac版yy2125的《网页设计中常用的一些技巧》★
网页设计中常用的一些技巧
让滚动条变色

这个很简单啦,只要在<head>和</head>间插入:

<style>
BODY{
scrollbar-base-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;
scrollbar-arrow-color:#aecde7;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;}
</style>

背景图象重复与否:[/B]

background-repeat:
repeat | repeat-x | repeat-y | no-repeat

注:
以上设置标签的意义
repeat   图象水平垂直方向都重复。
repeat-x  图象水平方向重复。
repeat-y  图象垂直方向重复。
no-repeat  图象不重复。

说:
定义图象重复方向是对于一些独特的图象定位而言。  

例:
background-repeat: repeat(设定背景图为重复,如果重复一般不必设置,这个是浏览器默认的。)  

背景图的地址最好写全,就是 http://~~因为据说,NETSCAPE4.0以下好象支持的不是很好。
 楼主| 发表于 2005-5-5 22:11:31 | 显示全部楼层

背景图象是否随滚动条移动:

background-attachment:  
scroll | fixed
scroll属于浏览器默认的,也就是随滚动条移动,fixed为不动。


[B]给背景图定位:

---就是设置它显示在哪里.最上面top,还是左边left


background-position:
| [percentage | length]{1,2}
|[top | center | bottom]
| [left | center | right]  


background-position:[percentage | length]是用X(横坐标)y(纵坐标)定义,如background-position: 20px 40px;


background-position:[top | center | bottom] 和[left | center | right] 是一样的意思了,三个任意两个搭配可以产生不同的效果.
可以是background-position:top center;center bottom;top bottom;left,right.....


bottom:下,top:上,left:左,right:右,center:中.


下为像素与英文的对照:
top left = left top = 0% 0%  
top = top center = center top = 50% 0%  
right top = top right = 100% 0%  
left = left center = center left = 0% 50%  
center = center center = 50% 50%  
right = right center = center right = 100% 50%  
bottom left = left bottom = 0% 100%  
bottom = bottom center = center bottom = 50% 100%  
bottom right = right bottom = 100% 100%  


全部的设定:

{ background: background-color || background-image || background-repeat || background-attachment || background-position }


例:
body{ background: #ffffff; background-image: url( http://user.7host.com/bluemm/img/1bg.gif); background-attachment: fixed; background-repeat: no-repeat; background-position: right bottom }  

  

关于背景图就说到这里啦,适当的应用可以让页子变得美美的,同时也可以加快下载速度哦:)


1.在主页中加入背景音乐  

---- 首先要准备一首MIDI音乐,将其命名为test.mid。在HTML中使用背景音乐的标记是< EMBED SRC="test.mid">,这个标记可以根据泥的需求,放置在< BODY>和< /BODY>之间的任何地方。这个标记放置的位置会出现一个类似媒体播放器的图案,利用它可以控制音乐播放或暂停。例如下面一条语句:  

---- < EMBED SRC="test.mid" WIDTH=120 HEIGHT=60>  

---- 就会出现一个控制面版让泥播放音乐,我们可以选择控制面版的大小。  

---- 如果泥希望一进入页面就播放背景音乐,而且不显示播放控制面板,并且可以重复播放,那么可以通过以下语句实现:  

---- < EMBED SRC="test.mid" HIDDEN="TRUE" AUTOSTART="TRUE" LOOP="TRUE">  

---- 泥还可以通过以下语句插入背景音乐:  

---- < bgsound SRC="URL">  

---- 如果需要循环播放,可以通过以下语句实现:  

---- < bgsound SRC="URL" loop="-1">  

---- 按设定次数播放可以通过以下语句实现:  

---- < bgsound SRC="URL" LOOP="次数">  

2.< EMBED>的属性  


---- < EMBED>可以放在< BODY>和< /BODY>之间的任何地方,在这个标记放置的位置会出现一个控制面板的图案,您可以视自己的需求把它放在适当的位置,也可以使用HIDDEN="TRUE"将面板隐藏起来,配合AUTOSTART="TRUE"作为背景音乐使用。

(注意喔,<bgsound>的语句是加在<head>与</head>之间的,而<EMBED>则是加在< BODY>和< /BODY>之间的任何地方)  


  
阴 影 文 字:

  
是不是好想去美化自己的站站,呵呵,其实很简单啦,只要以下代码:

<table style="FILTER: glow(color=#6699FF,direction=2)">
你要的文字  
</table>

其中color 是阴影的颜色,可以配合网页色调改变,direction 是设置阴影的强度。font color是原字体的颜色。

呵呵,发挥自己的想象力让字体变得更漂漂吧^_^


浮 雕 文 字 :

大家看到这些文字和普通的文字有什么区別吗?
是不是有一种刻在网页上的感觉?
这种效果做在叶面上也是挺漂亮的。
其实很简单,這是利用了CSS做出的。

首先,在<head>~</head>之間加入:

<style type="text/css">
<!--
.font{
FILTER: dropshadow(color=#FF9999, offx=1, offy=1, positive=1); FONT-FAMILY: "Verdana"; FONT-SIZE: 10pt; width:100%; COLOR: #66CCFF;}
//-->
</style>


然后,在<body>~</body>之間加入:

<a class="font" href=#>是不是有点浮雕的效果呢?  
<!--连接中使用 -->

<p class="font">是漂亮的顔色呢~!p^^q</p>  
<!--普通状态下使用-->


#发挥一下你的想象,利用背景色的搭配,一定可以做出不错的效果的。


半透明表格

SAMPLE:  

嘿,不让你看清我!  


实现这个效果很简单啦,请将以下代码拷贝至 <TABLE> 里面

style="FILTER: alpha(opacity=50)"


例如:
<table style="FILTER: alpha(opacity=50)" width="200" border="0" cellspacing="0" cellpadding="2" bgcolor="#CCFFFF"></table>

设置文本域的字体


请将以下代码拷贝至页面合适位置:  

<TEXTAREA STYLE="font:12px;font-family:Verdana;color:#666666">
输入内容
  

注:字体(font-family)还可以选用Arial,Tahoma等等;color可自行设定  


设置文本域的背景色


请将以下代码拷贝至页面合适位置:  

<TEXTAREA STYLE="background-color:#ffffff">
输入内容
  

注:background-color可自行设定,如设为 transparent ,则背景透明


设置文本域的边框


实线:
<TEXTAREA STYLE="border:1px solid #51bfe0">
输入内容
  


虚线:
<TEXTAREA STYLE="border:1px dashed #51bfe0">
输入内容
  


点线:
<TEXTAREA STYLE="border:2px dotted #51bfe0">
输入内容
  


设置文本域的背景图


请将以下代码拷贝至页面合适位置:  

<TEXTAREA STYLE="background-attachment: fixed; background-image: url(背景图所处位置)">
输入内容
  

注: fixed可以固定背景图,如不需要可不用。

给鼠标定义个性图片

活活,很多人问我主页的那个跟在鼠标后的小图是怎样实现的?嘿,其实简单的不得了,偶不喜欢太复杂的东西,活活,先看演示啦:

SAMPLE:鼠标放上来,是不是很可爱^_^

hoho,是不是很想把它用来装扮你的叶子?EASY啦,只要:

在<head>与</head>之间插入:

<style type=text/css>
a:hover {cursor:url('**.ani')}
BODY {cursor:url('**.ani')}
</style>

其中**是你的图标的名称,后缀名还可以是.cur和.ico的图标。
Q:: Dreamweaver实用七小招。
A: 一、从外部文档中粘贴时,如果只要文字而不想要其格式,可以使用 “Edit→paste as text” 命令,不要直接用 Ctrl+V 。

二、当有浏览者使用 Netscape 浏览页面时,在改变窗口大小的时候页面会花掉。在制作网页时就应该考虑到这个问题,可以通过点击 “Command→Add/Remove Netscape resize fix” 来加以解决,它可以使在 Netscape 中浏览页面时,改变窗口大小的时候页面不会花掉。

三、仅仅拷贝文字。当我们从 Dreamweaver 中拷贝文字到另一个应用程序的时候, HTML 代码和文字一起被拷贝过去了。一般我们都用快捷键 Ctrl + C 来拷贝,   如果在拷贝的时候多按一个 “C” 键则只拷贝选中的文字。

四、在 Dreamweaver 中输入空格是一件令人很头痛的事。如果你按下面的方法操作就会简单多了:先将 “ 中文输入法 ” 转换成全角状态,然后同时按下键盘上的 Shift+Ctrl+space 就可以插入一个空格 ( 可以连续输入 ) 。


五、 library 组件和 template 模板不用上传服务器,就可以正确预览使用了该组件或模板的页面。


六、不要在同一个页面同时使用表格和层来布置,在 Netscape 中会导致混乱,从属关系除外。


七、一次链接到两个网页。我们都知道超级链接一次只能连到一个页面。如果你要想一次在不同的框架页中打开文档,可以使用 “Go To URL”JavaScript  行为。打开一个有框架的网页,选择文字或图像,然后从行为面板中选择 “Go To URL” 。你会注意到 Dreamweaver 会在 “Go To URL” 对话框中显示所有可用的框架。选择其中一个你想链接的框架并输入相应的 URL 后再选择另一个框架并输入另一个 URL。
 楼主| 发表于 2005-5-5 22:11:53 | 显示全部楼层

Q:: FLASH 文字特效六合一 。
A: 我们平时在 flash 中见到的文字特效都是一种效果,本实例将告诉您如何将同一段文字在一个动画中实现六中不同的效果,通过简单的代码控制即可实现,下面我们就来一起学习:)

我们的制作思路是:将不同效果的 as 控制代码放到不同的 mc 中,然后通过对 mc 的调用,从而实现了对文字特效的控制。

特效控制 mc 的制作:

特效 1:

1.  首先建立一个 movie clip, 命名为 appear, 进入 mc 的编辑区后 ` ,给图层 layer1 的第 1 桢加 as:

this._alpha = 0;

var act;

stop();

// 初始化,设置文本开始为不可见

2.  在第 2 桢插入一个关键桢,然后用文本工具画一个文本框,并在 properties 面板中设置此文本框为 dynamic text 动态文本框,并给文本框设置变量名 text,

3 .然后在第三桢插入一个关键桢,加如下 as:

if (this._alpha<100) {

this._alpha = this._alpha+4;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 通过对文本 _alpha 透明度属性的控制,实现文字渐显的效果,

下面按照特效 1 完全一样的方法,制作其余 5 个特效控制 mc, 唯一一点不同的是每个 mc 的第 3 关键桢的控制代码不同,分别如下所示:

特效 2(mc falldown)

if (this._alpha<100) {

this._alpha = this._alpha+5;

this._y = this._y+2;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 在特效 1---- 文字渐显效果的基础上,通过控制文本的 _y 属性实现文字的下坠效果

特效 3(mc random x&y)

a=this._x;

b=this._y;

if (Number(a)!=_root.rancon:x or Number(b)!=_root.rancon:y) {

this._x=this._x+(_root.rancon:x-Number(a))/15;

this._y=this._y+(_root.rancon:y-Number(b))/15;

//read the origan values in the rancon mc and set step number!

chax=Math.abs(this._x-_root.rancon:x)

chay=Math.abs(this._y-_root.rancon:y)

if(Number(chax)<1 && Number(chay)<1){

this._x=_root.rancon:x;

this._y=_root.rancon:y;

}

this._alpha = this._alpha+5;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 通过利用 random() 随机函数控制字母的 _y 和 _x 属性,来达到字母随机出现在舞台上, // 并渐显的效果

特效 4(mc x && y)

if (this._alpha<100) {

this._alpha = this._alpha+5;

this._y = this._y+2;

this._x= this._x+2;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 通过控制字母的 _x 和 _y 属性,实现文本从舞台四周向中间靠拢的效果

特效 5(mc xscale)

if (this._alpha<100) {

this._alpha = this._alpha+5;

this._x = this._x+5;

this._xscale = this._xscale-100;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 通过控制字母的 _xscale 属性,实现字母横向伸缩并渐显的效果

特效 6(mc yscale)

if (this._alpha<100) {

this._alpha = this._alpha+5;

this._y = this._y+3;

this._yscale = this._yscale-50;

gotoAndPlay (2);

} else {

this._alpha = 100;

stop ();

}

// 通过控制字母的 _yscale 属性,实现字母纵向伸缩并渐显的效果

到此,六种文字特效的控制代码就写好了,下面还需要编写对 mc 控制代码进行控制的 mc, 听起来蛮复杂的,其实很简单的,请跟我来。



总体控制 mc 的制作:

新建一个 movie clip 组件,命名为 con, 插入三个关键桢,在第 1 桢添加如下 as:

i=1;j=1;m=50;n=1;

var b =new Array();//ready for random

textnumber=length(_root:text);//read the length of text

for(i;i<=textnumber;i++){

duplicateMovieClip("/text", "text" add i, i);

set ("/text" add i add "/:text", _root:text.charAt(i, 1));//write a value from text to the duplicate mc

_root["text" add i]._x=30+n*9;//set the char's _x

_root["text" add i]._y=m;// set the lines

if(i%45!=0){

n++;

}else{

m=m+30; //change the number of lines

n=1;

}

}

for (j;j<=textnumber;j++) {

a=1+random(textnumber);

if (Number(eval("/text" add a add "/:act"))==0) {

b[j]=a;//thank for janlay to make me understand how to range random number

set("/text" add a add "/:act",1);//to diffrent the true or false.

}else{

j--;//It's important.Don't forget it,or you will lost some mc.

}

}

// 利用数组,对舞台上的文本框中的单个字母进行存取,并加以控制,结合各个不同特效的控制代码,从而实现了不同效果的实现。
再第 2 关键桢加入如下 as:

_root["text" add b[j>.play();

在第 3 关键桢加如下 as:

j--;

if(Number(j)>=0){

gotoAndPlay (2);

}else{

stop();

}

// 判断文本是否已经都处理完

好了,游戏的所有控制部分都做好了,剩下的任务就是把它们组织到一起,布置主场景了。

布置主场景 :

回到主场景中,分别在图层 layer1 的 1,3,5,7,9,11 桢插入 6 个关键桢,每个关键桢的内容基本上也是相同的,首先以第 1 关键桢为例说明。

首先我们制作一个简单的按钮,用来选择不同的特效,然后依此排列 6 个在舞台的中间,

給第 1 个按钮加 as:

on (release) {

gotoAndStop (1);

}

給第 2 个按钮加 as:

on (release) {

gotoAndStop (2);

}

給第 3 个按钮加 as:

on (release) {

gotoAndStop (3);

}

給第 4 个按钮加 as:

on (release) {

gotoAndStop (4);

}

給第 5 个按钮加 as:

on (release) {

gotoAndStop (5);

}

給第 6 个按钮加 as:

on (release) {

gotoAndStop (6);
給第 1 个按钮加 as:

on (release) {

gotoAndStop (1);

}

給第 2 个按钮加 as:

on (release) {

gotoAndStop (2);

}

給第 3 个按钮加 as:

on (release) {

gotoAndStop (3);

}

給第 4 个按钮加 as:

on (release) {

gotoAndStop (4);

}

給第 5 个按钮加 as:

on (release) {

gotoAndStop (5);

}

給第 6 个按钮加 as:

on (release) {

gotoAndStop (6);


}

// 上面的代码作用都一样,都是跳到有某种文字特效控制 mc 的那桢,以便 mc 对文字

// 进行控制

最后給第一桢加 as: stop();

然后需要设置我们的主角,表演特效的文本,用文本工具在舞台的上方写一些文字,内容可以任意,注意,不要写在舞台上哦,一定要写在舞台的上方,然后就要设置控制特效的 mc 了,将 mc con 拖到场景中,在 properties 面板中取名为 con, 这个控制 mc 是每一祯都需要的,因为它的作用是控制动画总体,然后每一桢再放入分别控制不同特效的控制 mc, 都在 properties 面板中取名为 text, 将 mc appear 放到第 1 桢,将 mc falldown 放到第 3 桢,将 mc random x&y 放到第 5 桢,将 mc x && y 放到第 7 桢,将 mc xscale 放到第 9 桢,将 mc yscale 放到第 11 桢,最后,给每一个关键祯加上 as:stop(), 即可。

到此为止,整个动画就完成了,您也可以将自己的特效做成单独的控制 mc, 然后运用到主场景中,这样,您的特效就越来越多,这也可以成为积累文字特效的一种方法。
 楼主| 发表于 2005-5-5 22:12:05 | 显示全部楼层


Q:: FrontPage 2000  常用快捷键一览表 。
A: FrontPage 2000  常用快捷键一览表:   
  
用于网页的快捷键:   
  
CTRL+N    创建新的网页
CTRL+O    打开网页
CTRL+K   在网页上创建超链接
CTRL+SHIFT+B   在  Web  浏览器中预览网页
  
CTRL+P   打印网页
CTRL+ SHIFT+8    显示不可打印的字符
CTRL+ /    显示  HTML  标记符
F5     刷新网页
  
CTRL(Shift)+TAB    在打开的网页之间切换
CTRL+F4      关闭网页
  
CTRL+S   保存网页
ALT+F4    退出  FrontPage
  
CTRL+F  在网页或  HTML  中查找文本   
CTRL+H   在网页或  HTML  中替换文本   
  
F7     检查网页上的拼写   
SHIFT+F7    在词典中查找文字   
  
ESC   取消操作   
CTRL+Z    撤消操作   
  
CTRL+Y   恢复或重复操作   
   
用于设置文本和段落格式的快捷键:     

CTRL+SHIFT+F   更改字体
CTRL+SHIFT+P   更改字号
  
CTRL+B  应用加粗格式  CTRL+U  应用下划线格式   
CTRL+I  应用斜体格式  CTRL+PLUS SIGN  应用上标格式   
CTRL+MINUS SIGN  应用下标格式  CTRL+ SHIFT+C  复制格式   
CTRL+SHIFT+V  粘贴格式  CTRL+SHIFT+Z  删除人工格式   
CTRL+E  将段落居中  CTRL+L  将段落左对齐   
CTRL+R  将段落右对齐  CTRL+M  将段落从左边缩进   
CTRL+ SHIFT+M  将段落从右边缩进  CTRL+ SHIFT+S  应用样式   
CTRL+SHIFT+ N  应用一般样式  CTRL+ SHIFT+L  应用列表样式   
  
用于编辑和移动文本与图形的快捷键:   
  
CTRL+BACKSPACE    删除向左所有字符
CTRL+DELETE      删除向右所有字符
  
SHIFT+ENTER    插入一行空白栏
CTRL+SHIFT+SPACEBAR    插入一空白字符

Q:: 十六则 DW 使用快技法 。
A: 1 、灵活运用样式   

   熟悉网页设计的网友就知道,调用 Style 的方法很多,我们可以单击鼠标右键选择 Custon Style 来调用 Style 标准,也可以在状态栏中的元素列表上单击右键来调用 Style 。虽然不同的方法达到的效果看似一样,但实际上产生的 HTML 代码则完全不同。比如用 Custon Style 来调用 Style 标准,在网页代码中就生成一个〈 span 〉标签,这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度,所以我们应尽量使用状态栏中的元素列表来调用 Style 。

2 、活用 Format Table 命令   

   在复杂的网页设计中,表格的应用是最多的,因为利用表格可以自由地控制文本和图象在网页上出现的具体位置,从而使整个网页看上去紧凑统一。 Dreamweaver 在这方面也不甘落后,我们可以使用其中的 “Format Table” (格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式,先将光标置于表格的任意一个单元格内,再选择 “Command”→“Format Table” 命令,   在随后出现的对话框中,从左边的列表中选择一个设计方案。按 “Apply”  键来查看效果,如果不满意的话,还可以重新设置或者修改部分参数的值,如边界粗细,背景颜色等等。   

3 、同时链接到两个网页   

   我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档,可以使用 “Go To URL”JavaScript  行为。打开一个有框架的网页,选择文字或图象,然后从行为面板中选择 “Go To URL” 。我们会注意到 Dreamweaver 会在 “Go To URL” 对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的 URL 后再选择另一个框架并输入另一个 URL 。   

4 、不给文件起中文名称   

   大家在制作好了网页后,通常会给网页起一个具有代表性的中文名称,一来能使人一看文件名就能大概了解文件所包含的内容,二来能够方便各个超级链接之间的相互调用。但如果你在 Dreamweaver 中这样做,就会发现 Dreamweaver 对中文文件名支持得不是太好,经常会有页面调用不正确的现象发生,所以我们以后在 Dreamweaver 中保存网页的时候,尽量用英文或者数字作为文件名称,这样就可以避免上面的出错现象。

  5 、巧妙设置字体分辨率   

   我们在制作网页的时候,经常有这种体会,那就是制作好的网页在本地计算机上浏览时很正常,但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了,这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示,在  Dreamweaver 中得到了较好的解决。在文档窗口的右下角, Dreamweaver  显示当前文档被设计成的分辨率大小。单击哪个数字,在弹出式菜单中可以为当前的页面指定显示分辨率,通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。   

6 、巧妙隐藏标签   

   如果在网页中插入了不可见的元素时, Dreamweaver 会自动在页面上添加一个与之相应的元素标签,以便于我们选择不可见元素。但这并不全是件好事,比如我们在一个有很多层的页面中的第一行便插入一个表格,就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行,虽然在浏览时并不影响效果,但这确确实实会阻碍我们的工作。所以当我们觉得某个元素标签碍手碍脚时,就索性将之屏蔽掉。方法是按 Ctrl+U 打开 Preferences 面板,在 Category 中选中 Invisibel Elements ,在面板的右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉,以后它就保证不会再出现了。   

7 、善用拖放技巧   

   我们在使用 Dreamweaver 编辑网页的时候,经常需要插入一些图象什么的,假设要插入的图象很多,按照常规方法来操作就显得非常麻烦。我们可以利用拖放技巧来很好地解决这个问题。首先我们把 Dreamweaver 的操作窗口变成活动窗口,以腾出空间来显示 Explorer 窗口,找到要插入的图象文件后,把它们一一用鼠标拖动到网页的适当部位, Dreamweaver 将自动把这些图象的 url 添加到文件的 HTML 代码中,当然这里要求被拖动的图象文件必须是 gif 、 jpg 等 web 图象格式的文件。对于已经在网页中的图象也是一样,直接拖过来就可以了。但如果被拖动的图象上有超级链接,就不可以再使用拖动技术了,因为那时拖过来的仅仅是超级链接地址。   

8 、自动设置更新时间   

   我们知道一个网页要想获得更多的回头率,一个很重要的一条就是要不断更新。但对于我们这些个人网页来说,要天天及时更新恐怕不是很容易的事情。因此,我们希望网页能自动更新,下面笔者就提供一个能自动更新修改时间的源代码,我们只要把这段源代码添加到 …< /BODY> 之间就能实现更新时间的目的了:   
< Script Language="JavaScript"> < /style> ;二是用鼠标依次单击 Dreamweaver 中的 Text/Custom Style/Edit/Style Sheet/New/Redefine HTML Tag ,并从中选择 a ,然后在 decoration 中选中 none ,最后单击确定就成功了。   

12 、巧妙复制文字   

   在几个不同的应用程序中间相互复制文字,是我们在实际工作中可能要常做的事情。但是,如果我们从 Dreamweaver 中复制编辑区中的文字到另外一个应用程序的时候, HTML 代码和文字将一起被复制过去了,那么我们该如何才能只把编辑区中的文字复制下来呢?我们知道,通常复制时都用快捷键  Ctrl - C  来操作,如果我们在复制的时候多按一个 C 键,那么 Dreamweaver 将只会复制选中的文字了。

13 、善用快捷键   

   为了提高操作的效率,我们可以在 Dreamweaver 中使用快捷键,例如使用 Ctrl-B 或 Ctrl-I 来为文字应用黑体或斜体格式,也可以使用以下一些键盘快捷键来为选中的文本应用 HTML 格式: Ctrl-0:  无格式   Ctrl-T:  段落   Ctrl-1:  标题  1  Ctrl-2:  标题  2 Ctrl-3:  标题  3  Ctrl-4:  标题  4  Ctrl-5:  标题  5  Ctrl-6:  标题  6  

14 、自动关闭网页   

   如果我们希望自己的网页在指定的时间内能自动关闭,不妨在网页源代码中的标签后面加入如下代码:  < script LANGUAGE="JavaScript"> < /script>  
其中代码中的 3000 表示 3 秒钟,它是以毫秒为单位的。   

15 、巧妙设置对象名称   

   我们在用 Dreamweaver 来制作非常复杂的效果时,有可能需要经常重复地使用某一个或者多个对象,例如我们经常需要定位某个特定的表格、图象等,如果我们没有给某一个网页中的多个对象取名的话,那么在重复应用这些对象的时候,可能很麻烦或者容易出错。为了能够方便调用这些对象,我们应该在每创建一个新的对象时,都记得给它取一个有代表性而且比较容易记忆的名称。在给这些对象命名时,我们可以通过对象的 “ 属性 ” 面板来操作就行了。   

16 、为图象链接增加动态效果   

   有时我们为了要达到一种逼真的效果,希望鼠标移动到某个链接上时能有动感产生。使用 Dreamweaver 可以很容易实现这种效果。设计时,我们首先需要准备两幅图象,第一幅是原始图象,第二幅是鼠标移动上去后的图象。接着用鼠标单击第一幅图,在属性面板中的链接栏中填上要链接的文件,然后单击键盘上的 F8 键,在弹出的 Behaviors 窗口中单击 “+” 号,随后选择 “swap image” ,在接着出现的窗口中选择第二幅图象,最后单击确定就可以了。   
  
文章出处: eNet 硅谷动力   

Q:: 修改HTML,给网页加点花样。
A:摘自 ---[ 网页制作学习园地 ]

  说到制作主页大家一定会想到用 Frontpage2000 、 Dreamweaver 等专用制作软件,但现在笔者要向大家介绍的是用修改 HTML 源代码的方法,来给主页添加点小 “ 点心 ” ,把你的 “ 网上小屋 ” 装扮得再漂亮一点。下面请看第一道 “ 点心 ” 是什么 ……



1. 浮动背景图像
   当你拉住滚动条把页面向下拉动时,背景图像也跟着一起移动,这样就会导致浏览速度降慢。我们可以在 <body> 语句中加入如下属性,就能产生主页内容向下滚动而背景图像不动的效果。
<body backgroud=″image.jpg″ bgproperties=″fixed″>
   其中 image.jpg 就是你主页里的背景图像。



2. 使你的主页自动被搜索引擎收录
   你一定为了让你的网站名扬天下而去各个搜索引擎注册吧?在网上有很多机器人,它们自动搜寻关键字,你只要在网站上设立这样的关键字,就有可能被它们找到。
<head><meta http - equiv=″keywords″ content=″yancheng,science,technolodgy,information,network,politics,economic″ ; charset=gb2312></head>
   其中 CONTENT 这个属性主要让你放置一些你主页里的关键词,而且这些关键词最好容易使人想到。



3. 提前下载图片
   当你要访问一个内含很多图片的网页时,通常访问速度很慢;但我们可以在打开当前网页时提前下载下一页图片,以便能够提高浏览速度。要实现这个效果,我们可以在 <body>......</body> 语句中加入以下一行:
<img src=″image.jpg″ width=0 height=0>
   其中 image.jpg 就是你想要提前下载的图像名。



4. 给某个链接添加说明信息
   有些主页,当你把鼠标指向某个链接后,在状态栏会出现该链接的具体说明信息,是不是很方便呢?其实,我们只要在网页里的链接语句中加入以下的 HTML 代码,就可以实现这个功能了!
<HTML>
<HEAD>
<TITLE> 举例说明 </TITLE>
</HEAD><BODY><A HREF=″http://www.g168.net″ OnmouseOver=″window.status=′ 网页制作学习园地 ′;return true;″ OnMouseOut=″window.status=′′;″>
</BODY></HTML>



5. 使网页自动定时刷新
   你可以添加如下 HTML 代码来实现这个要求,请在 <head> 和 </head> 语句中加入:
<META HTTP - EQUIV=″Refresh″ content=″10;url= 你想访问的网址 ″>
   其中 10 代表当前网页完全下载完成 10 秒后自动链接到指定的 URL ,把 URL 去掉就表示每隔 10 秒自动刷新一次主页。

Q:: 用 FrontPage 2000 快速制作动态按钮 。
A: 原文转载自 eniac 版 may202 的《用 FrontPage 2000 快速制作动态按钮》
                     用 FrontPage 2000 快速制作动态按钮   

          http://www.sina.com.cn  2002/09/06  13:42  赛迪网 -- 视窗世界   
  
   文 / 杨浩

   你一定看到过很多网页上的动态按钮效果,一般而言实现它需要后台的 JavaScript( 或 VBScript) 网页脚本语言支持,对于只懂使用初级的 “ 所见即所得 ” 网页编辑器的人来说确实是个难题。现在我们就来学一学制作动态按钮的 “ 傻瓜式 ” 方法。我们以制作一个中英文切换的按钮为例。

   其实,动态按钮的实现原理都是一样的,首先制作按钮的图片,然后通过脚本语言捕   
获鼠标在按钮上的事件,对事件做出交换图片的响应。在 Frontpage 2000 里有交换图片的现成语言包。

   首先在 Photoshop 或 Firework 里制作两张用于交换的按钮图片,大小均为:宽度 80 象素;高度 15 象素,并在其中输入按钮的文字,注意两张图片文字的相对位子应基本一致。

   在 Frontpage 中插入一个表格,大小与按钮图片的大小相同 ( 宽 80 象素,高 15 象素 ) ,点击插入图片按钮,在表格内插入初始化显示的按钮图片,即按钮在未进行动态变换时显示的那张图片,在这个例子中我们选择有 “English Button” 字样的图片为初始图片。接下来我们就开始为它做动态效果。选择菜单 “ 格式 ”-“ 动态 HTML 效果 ” ,出现动态 HTML 效果的对话框。确保要做动态变换的图片为选中状态的前提下,在 DHTL 效果多话框内将 “ 开启 ” 选项选择为 “ 鼠标悬停 ” ;应用选择为 “ 交换图片 ” ;并在下面一个选项内指定路径为用于交换的 “ 中文按钮 ” 图片所在的路径。

   好了,一个动态按钮效果的 “ 傻瓜 ” 式制作方法完成了。网页保存后会有一个名为 animate.js 的脚本文件,你可以通过记事本打开它,这里面的就是有 Frontpage 自动生成的脚本语言包。动态按钮效果在 Frontpage 里可以轻松的实现,你也可以改变用于交互的两张图片按照你的需要制作,注意在制作按钮图片时一定要设置两张图片的大小完全一致。
发表于 2007-4-18 16:29:55 | 显示全部楼层

Re:网站制作技巧

翻看以前的一些东西还是满有价值的
发表于 2011-4-25 10:14:22 | 显示全部楼层
以后真的注意了。。。 楼主真好











您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|温柔网 ( 浙ICP备13033583号-8 )

GMT+8, 2024-4-25 13:51 , Processed in 0.047329 second(s), 22 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表