110互动论坛 - Powered by Discuz! Board

标题: 【网站】网页制作技巧 [打印本页]

作者: dummy111 时间: 2010-3-26 09:19 标题: 【网站】网页制作技巧

小技巧：如果系统盘空间不足，可以将.ttf文件存放在D盘，或者E盘，在C盘的windows\\fonts目录下，选择文件菜单、安装新字体、将字体复制到font文件夹前的勾去了，然后再用浏览指向到D盘的.ttf文件，这样存放在Fonts目录下的字体仅是一个快捷方式，省却了空间的容量。

去除水平滚动条的代码如下：
<body style=\'overflow:scroll;overflow-x:hidden\'>
</body>

网页制作技巧：（这是标题，具体内容看下面的楼层）

1.消除用Netscape编制的网页中的乱码
2.如何改变字的颜色
3.设置网页的背景图像
4.如何去掉主页超链接的下划线?
5.DreamWeaver中如何防止出现重叠现象
6.中文网页制作中段落缩进的方法
7.如何调整表格高度
8.超级链接时如何设定目标窗口
9.如何实现文字的自动换行
10.如何制作HTML字幕动画效果
11.灵活运用DREAMWEAVER的SITE功能
12.如何弹出公告窗口
13.如何让背景图象不滚动？
14.如何为网页设置背景音乐？
15.实现有立体感的表格边框
16.定制自己的站点导航条
17.DM查找替换的技巧(一)
18.DM查找替换的技巧(二)
19.鼠标移过链接时实现特定响应
20.显示日期和跳动的时间
21.怎样使公告窗口或主页面的内容滚动显示
22.自动显示最后更新时间
23.跑马灯大全(一)
24.跑马灯大全(二)
25.为主页定义热键
26.超链“确认”对话框
27.简单的鼠标跟随
28.调查信息以Email形式发送
29.绝对去掉广告的方法！
30.在网页中嵌入media播放器
31.怎么才能给自己的主页加一个百度搜索引擎
32.网页制作教程（十二）自动显示最后更新时间
33.在状态栏加跑马灯。
34.如何如掉网易广告？
35.网站flash制作技巧
36.关于版权声明的写法
37.网页中插入音频视频文件的代码
38.关于弹出窗口的制作
39.防止另存网页
40.如何实现网页中的背景条纹
41.嵌入网页
42.禁止右键
43.如何控制横向和纵向滚动条的显隐？
44.加入注释的格式
45.怎样在网页中加入 E-mail 链接并显示预定的主题?
46.添加到收藏夹：　　　
47.设为首页：
48.定制浏览器地址栏前的小图标
49.把滚动条放在浏览器窗口的左边
50.跳转
51.滚动
52.让背景图不滚动
53.让IFRAME框架内的文档的背景透明
54.返回页首
55.如何实现鼠标移上后单元格颜色变化？
56.用透明FLASH做背景
57.定制滚动条颜色
58.页面转换特效[推荐 ]
59.禁止查看源代码
60.自动滚屏[推荐]
61.保护自己的页面不被别人放在框架中
62.如何使同一页中的超文本链接呈现不同的颜色
63.各种媒体播放html代码
64.鼠标放上链接时文字下显示虚线的办法
65.鼠标移上链接时显示说明文字的方法
66.鼠标移上时表格变色方法
67.如何在网页中显示最新更新时间？

作者: yulingli 时间: 2010-3-26 09:20

1.消除用Netscape编制的网页中的乱码
解决这一问题的方法其实很简单，我们只须在网页的源文件的<head>栏内加入下面的命令：

　　<META HTTP－EQUIV=“Content－Type”CONTENT=“text/html;
　　　 charset=gb2312”>

　　其中“charset”的参数是起关键作用的地方。对于用BIG5码制作的中文网页，则应改为“charset=big5”。

2.如何改变字的颜色
当MOUSE移上去是一种颜色，移开就是另外一种颜色：
只需要在Head内预先定义两个类，分别定义了两种颜色：
<style>
　　　.normal {color:red;}
　　　.start {color:blue;}
　　</style>

　　然后我们在要改变的字前后加上下面的代码:

　　<SPAN 　
　　　 class=start> here </SPAN>

　　这里的“class=start”是将这行字的默认值设为 start {color:blue;},要是不加上这句的话，你这行字的颜色就会变成HTML预先设定的数值。

链接字变色：
<style>

</style>
把A:hover 放在最后是为了点击后A:visited 的颜色盖去A:hover 的颜色。

3.设置网页的背景图像
网页的背景色和背景图选择得好，会是页面增色不少。如果选取单一的背景色，难免显得单调，如果选择整个图片做背景，由于图片本身的文件大，造成网页的加载时间长，一般用户很难有耐性等待下去。那么带背景的网页是如何制作出来的？
一般是采用一幅很小的图片，然后铺展开，形成很漂亮的背景。对背景图的要求当然是越漂亮越好，文件越小越好。
<BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF" >

<HTML>
　　　<HEAD>
　　　　　<TITLE>欢迎洪恩在线</TITLE>
　　　</HEAD>
　　　<BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF">
　　　　　<><FONT FACE="Arial" SIZE="5" COLOR="#0000ff">12亿中国人的网上学校</FONT><FONT FACE="5" COLOR="#0000ff">电脑乐园</FONT></P>
　　　</BODY>
　　</HTML>

作者: 不属于 时间: 2010-3-26 09:21

4.如何去掉主页超链接的下划线?
在访问一个页面的时候，我们会发现，当鼠标移动到具有超级连接的文字上的时候，有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢？

　　我们在<HEAD>...</HEAD>之间插入下面的代码。

　　<style>B {font-weight: 700; }
　　　P {padding: 5px 0px;
　　　　 margin: 0px;
　　　　 font-family: 宋体,黑体,宋体;
　　　　}
　　　A {text-decoration: none}
　　　TD { font-family: 宋体,黑体,宋体; }
　　</style>
　　<script language="javascript">
　　　var contents = true;
　　</script>

　　更简单的方法是：

　　　<style>
　　　 
</script>

方法二：
直接在<body>与</body>插入如下一段代码：

<script language="JavaScript">
  window.open("test.htm","测试公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
</script>

方法是直接在<head>与</head>之间插入一段JavaScript代码(你可以选择上面两段之一，它们的作用是相同的)，其中windows.open()的作用是打开一个窗口，括号内的各项参数的用法我们可以在下面表格中看到，我们可以根据自己的需要设置各个参数的值。

窗口参数                      参数介绍
toolbar=yes,no             是否显示工具条
location=yes,no             是否显示网址栏
directories=yes,no          是否显示导航条
status=yes,no             是否显示状态条
menubar=yes,no             是否显示菜单
scrollbars=yes,no          是否显示滚动条
resizable=yes,no          是否可以改变公告窗口大小
copyhistory=yes,no          是否显示历史按钮
width=300                   公告窗口的宽
height=200                公告窗口的高
left=100                   公告窗口的左上顶点距屏幕左边100像素
top=100                   公告窗口的左上顶点距屏幕顶端100像素

13.如何让背景图象不滚动？
前面我们讲过往页面添加图形背景的方法，但是这种背景会与页面一道移动。如何让页面内容翻动使而背景图像固定不动呢？

　　HTML也给出了这样的代码，只是不经常用而已。我们只需要将body的bgproperties属性设置为“fixed（固定）”。

　　在Dreamweaver中“Text”菜单下，选择“CSS Styles”子菜单，然后选择“Edit Style Sheet”命令（快捷键为：ctrl+shft+E），弹出如下的窗口：

点击“New”弹出如下的对话框：

选中“Redefine HTML”选项，将Tag选择为“Body”，点击“OK”，出现如下的窗口：

在Background中的Attachment里选“fixed”，背景图片选择为待设定的图片，点击OK以后就可以了。

14.如何为网页设置背景音乐？
往网页中插入背景音乐会使页面声色不少。但是在使用音乐背景的时候要注意，背景音乐不能太大，否则文件传输会成问题，从而使网页的吸引力下降。

　　在HTML中有embed标签可以实现背景音乐的插入功能，其语法规则如下：(在<body>中插入）

　　<EMBED&nbs

作者: 卡多佐 时间: 2010-3-26 09:22

4.如何去掉主页超链接的下划线?
在访问一个页面的时候，我们会发现，当鼠标移动到具有超级连接的文字上的时候，有的会产生相应的下划线。然而有些网页却没有。主页超链接的下划线是如何去掉的呢？

　　我们在<HEAD>...</HEAD>之间插入下面的代码。

　　<style>B {font-weight: 700; }
　　　P {padding: 5px 0px;
　　　　 margin: 0px;
　　　　 font-family: 宋体,黑体,宋体;
　　　　}
　　　A {text-decoration: none}
　　　TD { font-family: 宋体,黑体,宋体; }
　　</style>
　　<script language="javascript">
　　　var contents = true;
　　</script>

　　更简单的方法是：

　　　<style>
　　　 
</script>

方法二：
直接在<body>与</body>插入如下一段代码：

<script language="JavaScript">
  window.open("test.htm","测试公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
</script>

方法是直接在<head>与</head>之间插入一段JavaScript代码(你可以选择上面两段之一，它们的作用是相同的)，其中windows.open()的作用是打开一个窗口，括号内的各项参数的用法我们可以在下面表格中看到，我们可以根据自己的需要设置各个参数的值。

窗口参数                      参数介绍
toolbar=yes,no             是否显示工具条
location=yes,no             是否显示网址栏
directories=yes,no          是否显示导航条
status=yes,no             是否显示状态条
menubar=yes,no             是否显示菜单
scrollbars=yes,no          是否显示滚动条
resizable=yes,no          是否可以改变公告窗口大小
copyhistory=yes,no          是否显示历史按钮
width=300                   公告窗口的宽
height=200                公告窗口的高
left=100                   公告窗口的左上顶点距屏幕左边100像素
top=100                   公告窗口的左上顶点距屏幕顶端100像素

13.如何让背景图象不滚动？
前面我们讲过往页面添加图形背景的方法，但是这种背景会与页面一道移动。如何让页面内容翻动使而背景图像固定不动呢？

　　HTML也给出了这样的代码，只是不经常用而已。我们只需要将body的bgproperties属性设置为“fixed（固定）”。

　　在Dreamweaver中“Text”菜单下，选择“CSS Styles”子菜单，然后选择“Edit Style Sheet”命令（快捷键为：ctrl+shft+E），弹出如下的窗口：

点击“New”弹出如下的对话框：

选中“Redefine HTML”选项，将Tag选择为“Body”，点击“OK”，出现如下的窗口：

在Background中的Attachment里选“fixed”，背景图片选择为待设定的图片，点击OK以后就可以了。

14.如何为网页设置背景音乐？
往网页中插入背景音乐会使页面声色不少。但是在使用音乐背景的时候要注意，背景音乐不能太大，否则文件传输会成问题，从而使网页的吸引力下降。

　　在HTML中有embed标签可以实现背景音乐的插入功能，其语法规则如下：(在<body>中插入）

　　<EMBED&nbs

作者: 隔壁臭啊 时间: 2010-3-26 09:22

15.实现有立体感的表格边框

欢　迎　光　临
编程技巧
闪电空间
网上学习
真情无限
笑话乐园
给　我　写　信

如果你用Dreamwaver实现起来十分简单：

　　<1>我们先来插入一个表单：选择“Insert”－>“Table”，在弹出的对话框中设置为7行1列，设置宽度为125 Pixels，然后点击确定；

<2>选择“Windows”菜单，点击“Properties”项，“调出“Properties(属性)”窗口；

　　<3>将鼠标在刚才插入的表格中点一下，然后按下“Ctrl+A”,选中整个表格，这时属性框中显示的是表格的属性；

　　<4>修改表格属性如下图：
　　把“CellPad”设为1，“CellSpace”设为0，边框宽度“Border”设为1，将亮边框“Light Brdr”设为较深的颜色(比背景色要深)，将暗边框“Dark Brdr”设为白色，最后设置背景色为“#FF66CC”以完成设置。

经过这样的一番设置，便出现了带有立体感的表格(使用Netscape浏览器可能没有此种效果)。如果你喜欢手写代码，那你把表格的属性做相应修改即可。此表格的源代码如下：

<table width="25%" border="1" cellspacing="0" cellpadding="1" bordercolorlight="#cc0066"
bordercolordark="#ffffff" bgcolor="#ff66cc" align="center">
|
(插入内容）

</table>

16.定制站点导航条
很多网站都有“站点导航条”，通过它能使浏览网站的网友清楚明了的知道网站的结构，并能迅速找到自己感兴趣的内容。
以Dreamwaver为例点击“Insert”菜单->“Form Object”，选择“List/Menu”(插入一个列表菜单）并单击，这时在编辑的网页上便插入一个组件，你也可在“Object”对话框中找到这个组件。如图所示：

下面我们对“List/Menu”组件的属性作如下设置：

　　<1>打开“Properties”对话框，选择“Type”值为“List(下拉列表)”，然后点击“List Values...”（点击添加条目）下面我们对“List/Menu”组件的属性作如下设置：

　　<2>在“List Values”对话框中输入站点导航的各个条目；其中左边是站点的名称，右面为站点对应的链接，我们根据自己的实际情况添入各条目的值，这里我们把第一项填为“我的站点导航”，并把“Value”值设为当前页，也就是本页，这一个条目是做默认显示用的，点击“OK”确定；

<3>这时属性对话框中显示出了我们刚才添入的条目，我们点击选中第一项“我的站点导航”作为默认的显示项，然后在上图所示的属性框中设置“List/Menu”的名字为“select”(如果一个网页中有多个组件则命名应加以区分)；

<4>在代码中找到刚才加入的“Select”所对应的语句，然后在图示位置添加一个“onChange”语句，这句话的作用是当我们在站点导航中选择某一站点时，即触发“onChange”事件时调用第5步中我们插入的“change”函数；
<select name="select"  size="1">
            <option value="pm016.htm">我的站点导航</option>
            <option value="pm015.htm">编程技巧</option>
            <option value="pm016.htm#1">闪电空间</option>
            <option value="pm016.htm#1">网上学习</option>
            <option value="pm016.htm#1">真情无限</option>
            <option value="pm016.htm#1">笑话乐园</option>
</select>

<5>最后一步是在网页中的<HEAD>中插入如下这样一段JavaScrip语句，其中第四行的“var url=""”，我们设为空值，而在你将网页上传到服务器时最好把空值改为服务器的地址，以免发生意外错误。

　　源码粘贴框：1.在“select”标签中添加一个“onChange”语句

<select name="select"  size="1">
                  <option value="pm016.htm" selected>我的站点导航</option>
                  <option value="pm015.htm">编程技巧</option>
                  <option value="pm014.htm">闪电空间</option>
                  <option value="pm013.htm">网上学习</option>
                  <option value="pm016.htm#1">真情无限</option>
                  <option value="pm016.htm#1">笑话乐园</option>
</select>

2.在网页中的<HEAD>中插入如下这样一段JavaScrip语句:

<script language="Javascript" src="/pub/js/head.js"></script>
<script language="javascript">

</script>

到这里我们就定制好了自己的“站点导航条”，如果你使用Frontpage做网页，你可以在“插入”->“表单”->“下拉列表”中实现同样的效果。最后顺便提一下“站点导航条”的定位问题，从组件框中插入的组件经常出现放不到我们想要的位置的情况，而对这些组件的定位，我们一般采用表格来实现。如果你对表格定位的使用还不熟悉的话，请看下个技巧的内容---表格定位技巧。

17.DM查找替换的技巧(一)

在开发建设网站的过程中，也许我们会遇到这样的情况，当我们的网站已经进行了相当部分，但是发现还需要对某些细节进行修改。这时候不可能完全的依靠手工去更改了，怎么办呢？利用Dreamwaver中查找替换也许能够帮助实现这些功能。

　　Dreamwaver的查找替换功能十分强大，它的查找替换对话框中甚至可以用精确的“查询语言”来控制查找过程。我们在Dreamwaver中调出“查找对话框”的快捷键是Ctrl+H,默认形式的查找对话框如下图所示：

如图所示各个输入框的作用是：最上面的“Find”指查找的范围，在它的选择中有三项，第一项是在当前文件内查找，第二项指在当前的Site中查找，第三项是在指定文件夹中查找，如果我们选中了此项就要点击右面的文件夹状按钮指定文件夹；下面的“Find”中我们选择查找的类型，如果选“Text”是指查找类型为文本(非Html代码)，其它几项依次为在Html代码中查找，高级文本查找，包含Tag的查找；右边的输入框中要输入待查找的内容；下面一点的“Replace”指要替换为什么内容。

　　好，这里我们还是举一个例子来说明如何使用查找功能。假设我们想把正文文本中的“dreamwaver”替换为“Dreamwaver”，而如果只用“Text”查找，我们就会把“<title>”中的“dreamwaver”也替换掉，这样违背了我们的意愿。所以我们采用了“高级Text查找”，我们将查找条件(“+”、“-”按钮右的内容)设为“Inside Tag”和“Font”，意思是查找在font标签内的文字“dreamwaver”，然后将其替换为“Dreamwaver”。需要说明的一点是如图所示查找级别选项必须选为“Match Case”，也就是必须完全匹配查找条件，否则文字中的大小写区别将被忽略。

设置好后，点击“Replace All”，查找替换过程就开始了，替换完毕后所有被替换的地方会显示在替换信息列表中，文件前的小绿点表示替换成功。

18.DM查找替换的技巧(二)

在这个技巧中我们接着上一个的内容，看看包含Tag的查找替换。首先把例子中要实现的效果说一下，假设我们的网站中所有的图片都设置了“alt”属性(只有背景图和个别补角的图不设置此属性)，但由于原来做网页时没有注意设置图片的“Border”属性值为0，个别图片在浏览时出现边框而影响了浏览效果，所以想要把所有的已设“alt”值的图片的“Border”值设为0，而在图片很多的情况下我们是不可能一张张的图去改的，这时如果利用Dreamwaver包含有Tag的查找替换功能，就能很简单的解决问题。

如图所示我们先选定文件夹，然后设包含在img标签内的，具有“alt”属性并且符合“alt=any value”做为查找条件，再把“Action”设为“Set Attribute”“ Border”“0”，这个设置的意义是对符合条件的图片其“Border”属性统一设为“0”,点击“Replace All”按钮。很快，查找替换就完成了，你看33张图片被准确无误的修改，所以说只要巧用Dreamwaver的查找替换，许多看起来复杂的工作也会变的非常轻松。

　　Dreamwaver允许我们把设计好的查找替换作为一个查询文件存储起来，点击如图中所示的按钮，在弹出的“保存为”对话框中输入文件名，点击确定完成。这样我们下一次遇到类似的查找替换操作时，就不必在设置一次，只要打开上次保存的文件就行。

　　例子举完了，但实际的情况中也许要靠我们自己去发现解决问题的方法。另外要提醒的是进行查找替换时，被操作的文件不要处于被编辑的状态，否则有可能会出现替换出错的问题。

19.鼠标移过链接时实现特定响应
　　你一定看到很多网页使用了这样的技巧，当鼠标移到某一个链接上时，在页面的其它位置会出现一段对链接的解释性文字，请看下面演示：

电脑交互教程共享软件下载硬件追踪

源码粘贴框：
1.在三个链接的代码中添加onMouseOver()语句

<a href="/pc/pcketang/index.htm"  class="p2">电脑交互教程</a>
<a href="/pc/softdown/index.htm"  class="p2">共享软件下载</a>
<a href="/pc/hangqing/index.htm"  class="p2">硬件追踪</a>

2.在html文件的“<head>”中添加如下JavaScript语句：

<script language="JavaScript">
<!--
text=new Array(4);
text[0]=new Image(); text[0].src="img/text0.gif";
text[1]=new Image(); text[1].src="img/text1.gif";
text[2]=new Image(); text[2].src="img/text2.gif";
text[3]=new Image(); text[3].src="img/text3.gif";
function swap(t)
{

  if(t>0)
document.TEXT0.src=text[t].src
  else
document.TEXT0.src=text[0].src

}
//-－>
</script>

这样的效果我们采用JavaScript很容易就能实现，下面我们来具体做一下：

　　1、把介绍性文字或图片制作成几幅高宽相同的gif图，上面例子中我们制作了四幅图，分别作为默认的图片和三个介绍性的图片，分别命名为text0-text3,然后我们把默认的图片插入固定位置，并给此图象对象命名为TEXT0；

　　2、然后在三个链接的代码中添加onMouseOver()语句，这个语句的作用是，当鼠标移动到链接上面时，让程序控制出现什么响应；我们在如下图的位置加入这样的语句：

其中swap()是一个函数，在下一步中将要定义它，我们分别在“电脑交互教程”的链接中加入“”，在“共享软件下载”的链接中加入“”，在“硬件追踪”的链接中加入“”；

　　3、在html文件的“<head>”中添加如下JavaScript语句：

　　好，做完以上的工作，我们在浏览器中就能看到如前面所示的效果了。提醒你的是并不是所有的浏览器都支持此效果，另外在你加入JavaScript语句的时候一定要注意区分大小写噢。你也可以利用此技巧的原理为网页增添其它的JnMouseOver响应效果。

作者: 沉醉夕阳下 时间: 2010-3-26 09:23

20.显示日期和跳动的时间

现在很多网页上都有一个区域显示日期、时间和星期，许多网友问这是怎么实现的呢？下面给出一个实现的方法，最终的效果请看下面演示：

今天是： 2004年4月29日星期四现在时间：019 A.M.

源码粘贴框：
1.在要显示日期和星期的地方插入如下一段JavaScript：

<script language=JavaScript> var version = 1.0;</script>
<script language=JavaScript1.1> var version = 1.1;</script>
<script language=JavaScript1.2> var version = 1.2;</script>
<script language=JavaScript1.3> var version = 1.3;</script>
<script language="JavaScript">

</script>

2.在<head>中插入下面一段JavaScript：

<script language="JavaScript">
var timerID = null;
var timerRunning = false;

function stopclock (){
      if(timerRunning)
            clearTimeout(timerID);
      timerRunning = false;
}
function showtime () {
      var now = new Date();
      var hours = now.getHours();
      var minutes = now.getMinutes();
      var seconds = now.getSeconds();
      var timeValue = "" + ((hours >12) ? hours -12 :hours);
      timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
      timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
      timeValue += (hours >= 12) ? " P.M." : " A.M.";
      tt.value=timeValue;
      timerID = setTimeout("showtime()",1000);
      timerRunning = true;
}
function startclock () {
      stopclock();
      showtime();
}
</script>

3.在<body>中加入语句：

<body >

下面是详细的步骤，我们来具体做一下吧。

　　1、显示日期和星期：

我们可以在页面的任意位置显示当前的日期和星期，我们把下面一段JavaScript代码插入到要显示日期的地方即可，需要注意的是，必须为显示区留出足够的位置，不然有可能在浏览时发生折行而影响美观；

　　2、显示不断跳动的时间：

　　虽然我们很容易从系统读取时间并把它显示出来，但如果我们不采用一定的技巧，显示出的时间只能是网页打开时的时间，它是固定不变的。这里我们来实现一个不断随系统时间变化的时钟。
　　第一步先在要显示时间的地方插入一个文本框TextField并命名为tt(一定要注意大小写哦)，它的作用是作为时间输出的对象，我们在JavaScript中将timeValue值赋给tt.value，也就是随时改变文本框的显示值来动态显示时间；
　　第二步在<head>中插入如下的JavaScript代码，这段代码的作用是每隔一秒读取一次系统时间，然后将它在文本框中显示；

　　第三步在<body>中添入“”，这句代码的作用是在网页加载时调用startclock()函数，也就是开始显示动态时间变化。

　　好，做完以上的工作，我们在浏览器中就能看到显示日期、星期和动态时间的效果了。

21.页面滚动显示

有时我们公告窗口中的内容较多，而公告窗口又不能设定的太大，如果加上滚动条则会影响浏览效果，这时让窗口中的内容自行滚动会是一个不错的解决方法，下面我们看看怎样用几句简单的JavaScript语句来实现它。

　　点击下面的“打开自滚动窗口”按钮，你就能看到滚动显示的效果，而如果你点击“主窗口自行滚动”你会发现，连这个窗口也滚动起来。
                  打开自动滚动窗口    主页面自行滚动
　　
　　源码粘贴框：
1.主窗口自行滚动的JavaScript代码：

<script language="JavaScript">

</script>

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

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

本页最后更新日期: 07/10/2000 1437

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

23.跑马灯大全(一)

实现跑马灯的方法很多，其中最简单的是采用一句Html代码来实现，我们在需要出现跑马灯效果的地方插入“<marquee>滚动的文字</marquee>”语句，它的效果如下所示：

滚动的文字

　　适当的运用<marquee>标签的参数，可以表现出不同的效果，请看下面的几个例子：

　　1、左右弹来弹去的跑马灯

弹来弹去跑马灯!

　　实现的方法就是在IE的标签上稍微多加了几个参数产生了更加丰富的变化。设置behavior=alternate表示双向移动，direction=left表示运动方向向左。marquee的宽度可以使用绝对象素值，例如width=200等这个值限定了跑马灯滚动的范围。需要说明的是该效果在Netscape下是看不到的。

　　源码粘贴框：
<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>

２、跑的很快的跑马灯

跑的很快跑马灯!　

　　只要在<marquee>标签内加上“scrollamount=30”参数即可。

　　３、带有超级链接的跑马灯

带有超链接的跑马灯!点我试试？　　　　　　　　　　还有一条呢!点我试试？　

　　其实实现的方法很简单，把整个<marquee></marquee>语句包含在超链接中就行，你看看下面的代码就清楚了。当然你也可以把包含在<marquee></marquee>中的各条内容分别加上不同的链接，这样的跑马灯用来发布滚动新闻或是做站点导航再合适不过了。

　　源码粘贴框：
<marquee width=90%>
<a href="http://www.hongen.com/default.htm"　target=_blank>带有超链接的跑马灯!点我试试？</a>
　　　　　　　　　　<a href="http://www.hongen.com/pc/index.htm"　target=_blank>还有一条呢!点我试试？</a>
</marquee>

以上几个例子都是<marquee>标签参数的应用，下面把所有可以利用的参数列在表中供你参考，不过还是要提醒你，<marquee>标签只被IE所支持，使用Netscape浏览器是看不到的噢。

参数                                     用法介绍
behavior=scroll, slide, alternate       跑马方式：循环绕行，只跑一次就停住，来回往复运动
direction=left,right                   跑马方向：从左向右，从右向左
loop=100                               跑马次数：循环100次，如不写默认为一直循环
width=100%,height=200                   跑马范围：宽为100%，高为200像素
scrollamount=20                         跑马速度：数越大越快
scrolldelay=500                         跑马延时：毫秒数，利用它可实现跃进式滚动
hspace=20，vspace=20                   跑马区域与其它区域间的空白大小
bgcolor=#00FFCC                         跑马区域的背景颜色

　　你已经看到，尽管<marquee>参数不少，单毕竟不能实现复杂的和自定义的特殊跑马灯效果，而且还有浏览器限制，所以我们更多情况下会采用JavaScript来实现跑马灯，那就是我们下一个技巧的内容。

24.跑马灯大全(二)

这里向你介绍几个用JavaScript实现的较复杂的跑马灯，你只须把源码粘贴框中的代码按照说明复制的指定的位置就能看到跑马灯的效果。

　　1、状态栏中的跑马灯

　　在默认状态下浏览器的状态栏中显示的是链接指向信息，给人的感觉很单调。如果我们把问候语或是站点的介绍放在状态栏中滚动显示，一定能取得很好的效果。
            点击我，然后看看下面的状态栏吧

　　源码粘贴框：
1、将以下代码放在<head>与</head>之间：

<script LANGUAGE="JavaScript">
<!-- Begin
var Mes=new Array();
Mes[0]="洪恩在线欢迎你！          ";
Mes[1]="感谢你关注电脑交互教程                ";
Mes[2]="网页制作技巧　之　跑马灯大全             ";
var place=1;
var i=0;
function scroll()
{
window.status=Mes.substring(0, place);
if (place >= Mes.length)
{
if(i<2)
{
i++;
place=1;
window.setTimeout("scroll()",50);
}
else
{
i=0;
place=1;
window.setTimeout("scroll()",50);
}
}
else {
place++;
window.setTimeout("scroll()",50);
}
}
// End -－>
</script>

2、在<body>标签内加入onload 语句：

<body >

实现步骤:
　　(1)首先将JavaScript代码复制到<head>与</head>之间，这段代码中包含了scroll()函数，它是实现跑马灯的主体代码。我们可以修改mes[]数组的值来改变跑马灯的内容，你也可以显示更多条的信息，不过代码中i的值应等于信息的条数，也就是等于mes[]数组的维数；
　　(2)然后在<body>标签中加入onload()语句即可。

作者: 日光兰 时间: 2010-3-26 09:24

2、超链接的跑马灯式提示信息

　　把你的“老鼠”移到下面链接上试一试，有什么不同呢？原来弹出了一条跑马灯式的提示信息，这是怎么实现的呢，请接着看：
跑马灯大全(一)　　　　电脑交互教程　　　　网页制作技巧技巧

源码粘贴框：
1.将下面代码放在<body>标签下：

<script>
if (!document.layers&&!document.all)
event="test"
function showtip2(current,e,text){

if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML=\'<marquee style="border:1px solid black">\'+text+\'</marquee>\'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}

else if (document.layers){
document.tooltip2.document.nstip.document.write(\'<b>\'+text+\'</b>\')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function hidetip2(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}

</script>

2.然后在要出现提示信息的链接中，添加onMouseover语句：

<a href="pm23.htm"  >跑马灯大全(一)</a>
<a href="/pc/index.htm"  >电脑交互教程</a>
<a href="pmjq00.htm"  >网页制作技巧技巧</a>

实现步骤：
　　(1)先在<body>标签下面插入一段JavaScript代码；

　　(2)然后在需要实现跑马灯式提示信息效果的超链接中加入Onmouseover和Onmouseout语句。

25.为主页定义热键

“热键”是做什么用的呢？你一定知道菜单热键吧，也就是按钮下某个约定好的键时，会弹出一个菜单或进行一项操作。如果为我们的主页加上热键，来完成打开链接、回到页首等常见的操作，会给浏览者带来不少方便。怎么样，试一试吧。
　　　  回网页制作技巧首页（h) 打开一个测试窗口(t)

按下键盘上的“h”键，就能回到网页制作技巧首页；而按下“t”键则会打开一个测试窗口。

　　热键是怎么实现的呢？其实很简单，只须一小段JavaScript代码即可。

　　源码粘贴框：
1.将下面JavaScript代码插入<head>与</head>之间：

<script language="JavaScript1.2">
var hotkey1=104;
var hotkey2=116;
var destination="pmjq00.htm";
function backhome(e){
if (document.layers){
get=e.which;
if (get==hotkey1)
window.location=destination;
else if(get==hotkey2)
window.location="test.htm";
}
else if (document.all){
if (event.keyCode==hotkey1)
window.location=destination;
else if(event.keyCode==hotkey2)
window.open("","测试公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
}
}
document.onkeypress=backhome;
</script>

为了使热键在IE和NETSCAPE中都得到支持，在JavaScript代码中我们需要对浏览器类型进行判断，并作相应的处理。这时用了if(document.layers)和if(document.all)来进行判断。另外代码中热键的键值是按键的ASCII码，104和116分别代表h和t键。

作者: 134625 时间: 2010-3-26 09:25

26.超链“确认”对话框

请先看下面的例子，试着点击下面的超链接，你会发现点击后弹出一个确认对话框，让你确认是否继续，如果选择“确定”则会继续加载链接页面，如选则“取消”则不会继续。

来点击我

　　源码粘贴框：
1.将下面一段代码插入<head>与</head>之间：

<script>
function rusure()
{
question = confirm("确实要去进入吗?")
if (question !="0")
{
window.open("","测试公告窗口","width=340,height=163,toolbar=0,status=0,menubar=0,resize=0");
}
}
</script>

2.在链接标签内加入onclick()语句：

<a href="" >来点击我</a>

实现的方法为两步，首先将源码粘贴框中的JavaScript代码插入到<head>与</head>之间，然后在链接的标签中加入onclick()语句即可。

　　这个方法其实还可以用在其它的地方，比如说对于一个“提交”按钮，如果加上确认对话框，就能给提交者反悔的机会。JavaScript提供的标准对话框有好几种，我们把它列在下表中，供你使用时参考。

名称及用法                      用法解释                               返回值
确认对话框：
re=confirm("确认信息")       选择“确认”或“取消”，用返回值控制响应    真或假(True/False)

警告对话框：
alert("警告信息")          仅是一个警告，点击“确定”自动消失          无返回值

输入对话框：
re=prompt("问题","默认回答"）返回用户输入的信息，做下一步的操作          用户输入的文本串或空值

27.简单的鼠标跟随

当鼠标在这个页面上移动时会有一个可爱的小鼹鼠跟着你的鼠标跑来跑去，很有趣，那这种效果是如何实现的呢？

　　我们先把源码粘贴框中的JavaScript代码加入到Html的<body>标签内：
<script language="javascript" type="text/javascript">
function mousemoving(e)
{
if(document.layers)
{
status="x:"+document.floatDiv.left+" y:"+document.floatDiv.top
document.floatDiv.x=e.pageX
document.floatDiv.y=e.pageY
}
if(document.all)
{
floatDiv.style.left=event.x+document.body.scrollLeft
floatDiv.style.top=event.y+document.body.scrollTop
}

document.onmousemove=mousemoving
if(document.layers)
{
  document.captureEvents(Event.MOUSEMOVE)
}</script>

然后选择一幅图片，假设图片的路径是“img\\haha.gif”,然后加入一个层，并把它的ID改为“floatDiv”(与上面代码中的层的ID保持一致)，把图片放置到层中即可。我们也可以直接在Html的<body>之间插入如下的代码，这跟上面操作的效果是一样的。

<div id="floatDiv" style="position:absolute;"><img src="img/haha.gif" width="53" height="74"></div>

好了，现在浏览一下网页，看看效果吧。

28.调查信息以Email形式发送

在一些页面上我们经常能看到调查信息，它是反馈浏览者信息的重要方式，这个例子是一个简单的调查，填写的信息将以电子邮件方式直接发送到指定信箱。

            调查信息
你的姓名: 　　
你的Email地址:
你对网页制作技巧栏目的意见和建议:

发送  重填
注意：按下“发送”按钮后你填写的内容将以电子邮件方式发送给我们(ketang.pc@goldhuman.com)
　　
这个例子的实现步骤如下：

　　先在页面上作一个调查表单，可以参照上面的制作，也可以直接拷贝下面代码粘贴框中的代码到Html的<body>标签内：
<form name="testform" method="OST" action="mailtketang.pc@goldhuman.com?subject=调查信息"  enctype="text/plain">
                  <div align="left">你的姓名: 　　
                  <input type="text" name="text1" size=20>
                  <br>
                  你的Email地址:
                  <input type="text" name="text2" size=20>
                  <br>
                  你对网页制作技巧栏目的意见和建议:<br>
                  <textarea name="text3" cols="50" rows="4"></textarea>
                  <br>
                  <input type="submit" value="发送" name="submit">
                  　　
                  <input type="reset" value="重填" name="reset">
                  <br>
                  注意：按下“发送”按钮后你填写的内容将以电子邮件方式发送给我们(ketang.pc@goldhuman.com)
                  </div>
               </form>

需要改动的地方是<form>标签内的action属性的电子邮件地址，把它改为你所需要的即可。

29.绝对去掉广告的方法！
只要在你主页的最前面加上
<script>
clase();
</script>
这个代码就可以了！
因为广告是在你上传主页的时候网易自动加在你主页的最前面！那么上面那段代码自然就到广告的后面去了哦！所以……呵呵！

30.在网页中嵌入media播放器：
将下面这段程序放在<body>....</body>之间

<div align="center">
  <table width="405" border="8" cellspacing="5" cellpadding="5" bordercolorlight="#FFFF00">
<tr>
   <td width="672" bordercolor="#FFFFFF" bordercolorlight="#ffff00">
      <object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" id="mediaplayer1" width="700" height="350">
      <embed>
         <param name="SRC" value="aaa.mpa">
      </embed>
      </o

作者: 大傻111 时间: 2010-3-26 09:25

专业制作网站

欢迎光临 110互动论坛 (http://bbs.110.com/)