38,Q:在网页上实现“预览图”：
A:网页制做时，大的图片会消耗较长的下载时间，为了不使浏览者失去耐心，可以采用“预览图”(low source)的办法，即先下载一个“low source”，然后再下载真正需要显示的图片。在 Html 文档中标注“low source”的方法为：〈img src="需要显示的图片" lowsrc="预览图" width="x" height="y"〉(其中 width 和 height 是需要显示的图片的宽度和高度。如果不加 width 和 height 属性，浏览器视为以较小图片作为长宽尺寸。)
实现“预览图”还有一个方法，就是将预览图做成一个链接，如果用户愿意，可以点击它，再观看真正的图片，格式是：
<a href="需要显示的图片"><img src="预览图" width=x height=y border=0></a>
39,Q:闪亮的链接：
A:
<a href="linkto" name="link1" style="text-decoration:underline;color:green;">闪亮的链接</a>
<script language="javascript">
<!-- 这段脚本放在链接的后面
function flashit()
{
if (!document.all) return
if (link1.style.color=="green")
link1.style.color="red"
else
link1.style.color="green"
}
setInterval("flashit()", 400)
//-->
</script>
40,Q:在网页中添加“添加到收藏夹“设为首页”功能(似乎只能在 IE5.0 以上版本使用?)：
A:添加到收藏夹：〈a href="javascript:window.external.addFavorite('http://链接','说明');"〉添加到收藏夹〈/a〉
设为首页：〈a href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage('http://链接');〉设为首页〈/a〉
41,Q:定制浏览器地址栏前的小完：
A:在网页的〈head〉〈/head〉间加入以下语句：〈link rel="shortcuticon" href="http://…/icon.ico"〉即可。其中 icon.ico 为 16x16 的完文件，颜色不要超过 16 色。
42,Q:给超链接、表单、表格等网页元素加上动态说明：
A:网页中的图片可以用〈img alt="说明"〉 加上注释，其它元素页可以加上注释说明，方法是用 title 属性。如：
〈a href="" title="说明"〉；〈input title="说明"〉；〈table title="说明"〉…〈/table〉
43,Q:用曾叠式样式表(css)定制按钮的鼠标形状(cursor)：
A:<input type="button" style="cursor:hand;">，这样，当鼠标移到按钮上时，会变成一个“手”形，和移到超级链接上一样。cursor 后的参数很多，列在下边：
hand 手型
crosshair 十字型
text 移动到文本上的那种效果(I 形)
wait 等待的那种效果(沙漏)
default 默认效果
help 问号
e-size 向右的箭头
ne-resize 向右上的箭头
n-resize 向上的箭头
nw-resize 向左上的箭头
w-resize 向左的箭头
sw-resize 向左下的箭头
s-resize 向下的箭头
se-resize 向右下的箭头
auto 由系统自动给出效果
44,Q:在网页页面上显示 html 代码：
A:要在 html 代码中放置 html 文本显然是不行的，因为你放在 html 中的 html 文本会相互混淆起来，产生严重的错误。如果 html 文本很少，可以将其中的〈 〉用全角的〈 〉代替；如果文本很长，将它门放在标签〈xmp〉〈/xmp〉中，这是专门用来显示 html 文本的标签。与此相关的一个问题是：有时从网页上“挖”下来的 html 代码，放在 html 文件中浏览时，显示的全是 html 代码，就是因为他们制做网页时将标签的大于号、小于号用全角的〈、〉代替了。
45,Q:加速网页加载的技巧：
A:当浏览者停留在一个网站的主页上时，其它页面的下载是停止的，这样时间就白白浪费了。我们可以将主页分成两个帧，一个帧显示主页，将另一个帧隐藏后“偷偷”地下载其它页面，在硬盘里缓存起来。这样，当浏览者浏览到别的页面时，浏览器就是从硬盘里调用数据了。
46,Q:让网页的背景图片动起来(Vbscript)：
A:
<SCRIPT language="VBScript">
dim c,numgc
c=-100000
numgc=document.body.sourceIndex
sub SF
c=c+2
Document.all(numgc).style.BackgroundPosition="0 " & c
id=SetTimeOut("SF",64,"VBScript")
end sub
SF
</SCRIPT>
47,Q:用 javascript 控制浏览器窗口大小：
A:有时候，我们需要控制显示窗口的大小，这当然能够通过点击窗口右上角的控制按钮来实现。但是，能否在页面中通过链接来实现呢？答案是：能！请看下面的代码：
<SCRIPT LANGUAGE="javascript">
function Minimize()
{
window.innerWidth = 100;
window.innerHeight = 100;
window.screenX = screen.width;
window.screenY = screen.height;
alwaysLowered = true;
}
function Maximize()
{
window.innerWidth = screen.width;
window.innerHeight = screen.height;
window.screenX = 0;
window.screenY = 0;
alwaysLowered = false;
}
</SCRIPT>
<A HREF="javascript:onClick=Minimize()">Minimize</A>
<A HREF="javascript:onClick=Maximize()">Maximize</A>
上面的代码包含 2 个函数，先来看看第 1 个。函数 Minimize 中使用 innerWidth 和 innerHeight 2 个命令在象素级别上控制窗口尺寸大小，这里将窗口设置为宽 100 高 100。然后，设置窗口的起始位置，定位大小为屏幕的宽和高，这样，使用 alwaysLowered 命令就将窗口缩小并移动到了屏幕的右下角。触发事件是一个 javascript 链接 〈A HREF="javascript:onClick=Minimize()"〉Minimize〈/A〉。同时，上述代码可以用于设置屏幕的任何分辨率。
注意，当在页面上应用这个功能时，请将那 2 个触发事件的链接放置在页面的左上角，这样，当窗口缩小到右下角时，它们也不会消失。
48,Q:网页的定时转向和定时刷新?
A:在网页的 <Head></Head> 间加入 <meta http-equiv="refresh" content="10; url=http://……"> 就会使网页在 10 秒后自动转向到网址 http://…… 去。特殊情况是，如果没有 url=…… 一项，网页就会每隔 10 秒自我刷新一次 -- 最初的聊天室就使用了这种技术，但屏幕看起来有些闪烁感。
49,Q:上传主页的一个技巧：
A:如果你做主页时是假设网站的主文件为 index.htm，网页中的所有链接也默认主页为 index.htm。但当你上传主页时发现网站的主文件为 index.html，那么你是不是需要一个一个地去修改许多网页中的链接呢? NO! 这时你只要在网站建立一个 index.html 文件，其中放以下一条语句就可以了：
<meta http-equiv="refresh" content="0; url=index.htm">
那么，如果你做主页时假设网站的主文件为 index.html，而上传主页时发现网站的主文件为 index.htm 时怎么办呢? …… “To be,or not to be,this is a question.”
50,Q:在网页中实现下拉弹出菜单:
A:下拉弹出菜单用 javascript 构造，原代码及效果见演示。
51,Q:为什么用 FrontPage 做的网页在有的网站上显示不正常?
A:如果用 FrontPage 做的网页使用了 FrontPage 扩展特性，且放在了用 Unix、Linux 建立的网站上，就会显示不正常，丢失一些特性。因为 FrontPage 扩展特性是基于 Windows 系列操作系统的。避免办法就是……“因噎废食”了。
52,Q:让 IE 浏览器的标题条文字动起来?
A:在网页的 <head></head> 之间加入以下 VbScript 脚本即可：
<Script language="vbscript">
msg="十万个为什么-计算机应用技巧大全"
l=len(msg)
i=l-3
sub movetitle()
title=right(msg,l-i)+left(msg,i)
top.document.title=title
i=(i+1) mod l
end sub
speed = 10 '毫秒
a=setInterval("movetitle()",speed)
</Script>
53,Q:网页中 IFRAME 帧的使用(在网页中构造小“窗口”方法之一)：
A:用标签 <IFRAME></IFRAME> 可以在网页中构造小“窗口”，显示指定 URL 的网页，语法如下：
<IFRAME SRC="" width="500" height="200" marginwidth="0" marginheight="110" hspace="10" vspace="20" frameborder="0" scrolling="1">
</IFRAME>
(注1：可以用此法在网页中制作网页效果演示。
注2：相关知识：如果要在网页中开一个“窗口”，显示一段文本，可以使用:
<form>
<textarea name="S1" rows="高" cols="宽"></textarea>
</form>)
54,Q:在网页中构造小“窗口”方法之二: 使用 ActiveX 控件：
A:
<object id="browserIcons" classid="clsid:EAB22AC3-30C1-11CF-A7EB-0000C05BAE0B" align="baseline" border="0" width="452" height="161">
<param name="Location" value="http://100000.home.sohu.com">
<param name="AlignLeft" value="0"><param name="AutoSize" value="0">
<param name="AutoSizePercentage" value="10">
<param name="AutoArrange" value="1">
<param name="NoClientEdge" value="1">
<param name="ViewMode" value="0">
</object>
55,Q:当鼠标移动到表格上时，表格背景色改变:
A:在网页的 <body></body> 之间放如下代码即可实现：
<script language="javascript">
<!--
function mOvr(src,clrOver)
{
if(!src.contains(event.fromElement))
{src.style.cursor='hand';
src.bgColor = clrOver;
}
}
function mOut(src,clrIn)
{
if(!src.contains(event.toElement))
{src.style.cursor='default';
src.bgColor=clrIn; }
}
function mClk(src)
{ //执行单元格中的链接
if(event.srcElement.tagName=='TD')
{src.children.tags('A')[0].click();}
}
//-->
</script>
<table border="1" align=center>
<tr>
<td align="middle" height="17" onclick="mClk(this);" onmouseout="mOut(this,'#0aac9d');" onmouseover="mOvr(this,'#a1bbe8');">
<a href="http://100000.home.sohu.com" target="_blank" class="nav">链接变色</a>
</td>
</tr>
<tr>
<td onmouseout="mOut(this,'#0aac9d');" onmouseover="mOvr(this,'#a1bbe8');">无链接变色</td>
</tr>
</table>
56,Q:打开网页时自动弹出欢迎窗口：
A:
<script language="javascript">
function Info()
{if(!confirm("这是一个自动弹出的欢迎窗口" + "\n\n欢迎光临\n\n你可以试着加上一些其它的信息。"+"\n\n请按确定进入本页\n"+
"\n按取消将返回上一页\n"))
history.go(-1);
return " "
}
document.writeln(Info()) //触发执行 Info() 函数
</script>
57,Q:鼠标触发网页的链接文字动态大小变化：
A:在网页的 <head></head> 之间加入以下样式表代码即可(免去了烦人的 javascript 脚本)：
<style type="text/css">
<!--
A:visited {text-decoration:none; font-size:9pt; font-family:新细明体}
A:hover {text-decoration:underline; font-size:15pt; font-family: 黑体; color:ffffff; background-color:rgb(01,221,66)}
-->
</style>
58,Q:为什么用 FrontPage 做的主页有时会显示为乱码?
A:看看主页的 <head></head> 之间是否有 <meta charset=gb2312> 字样，加上它就好了(它自动将 IE 浏览器的文字编码设置为“简体中文。如果没有前述语句，则必须手动设置才能看清网页内容)。
59,Q:在网页上显示你是否 O'ICQ 在线:
A:在网页上加入 <img src=http://icon.tencent.com/9265822/s/ alt="On/Off O'ICQ"> 语句即可向浏览者显示你现在是否正连在 O'ICQ 上。其中 9265822 是 O'ICQ 号码，可以更换，s 换成 l 则显示大完。还可以形如
<a href="http://search.tencent.com/cgi-bin/friend/user-show-info?ln=9365822";>
<img src=http://icon.tencent.com/9265822/s/alt="On/Off O'ICQ">
</a>
来显示你的 O'ICQ 个人资料。
60,Q:将样式表(css)加到你的网页中的几种方法：
A:
(1)、将样式表置入 HTML 文件头部:
<STYLE TYPE="text/css">
<!--
H1 {color: green; font-family: impact}
P {background: yellow; font-family: courier}
-->
</STYLE>
(2)、将一个外部样式表定义文件链接到 HTML 文件上:
<HEAD>
<LINK REL=stylesheet href="mystyles.css" TYPE="text/css">
</HEAD>
文件 mystyles.css 的内容如下:
H1 {color:green; font-family:impact}
P {background:yellow; font-family:courier}
(3)、将一个外部样式表定义文件输入到 HTML 文件中:
<STYLE TYPE="text/css">
<!--
@import url(company.css);
H1 { color: orange; font-family: impact}
-->
</STYLE>
其中 company.css 文件内容如下：
H1{color:green, ; font-family:times}
P{background:y, ellow; font-family:courier}
(4)、将样式表加入到 HTML 文件行中:
如：<H1 STYLE="color: orange;font-family:楷体_gb2312>HTML中的样式表</H1>
(注意：如果一个网页中同时使用了以上 4 种方法，那么它们的优先级从高到低是 4-3-2-1。)
61,Q:自动显示网页的最后更新日期:,
A:将以下代码放入网页中，会根据网页文件的存盘时间自动显示网页的更新日期:
<script>document.write(document.lastModified)</script>
62,Q:仿 Outlook2000 导航菜单
A:这个看起来复杂的脚本改起来其实不难，但还是要小心。在源代码中有修改的注释。
(1)、首先，你需要一些 32*32 的图片，然后在源代码中将本例中的图片修改成你自己的。
(2)、其次，你需要修改 menu.htm 文件，即左侧的文件。还有 2 个 javascript 脚本文件。
(3)、最后别忘记修改主文件，这是 frameset 分帧文件，右侧的 frame 的名字在这里是“main”，所以需要页
面在右侧打开时用到了“parent.main”就是这个原因，请注意一下。(在整个页面中打开时用“top”即可。)
63,Q:用 css 和 javascript 定制按钮
A:请参看示例……
按钮说：我要疯狂!
效果演示：
首先，在 <head> 区定义 CSS(层叠式样式表单)的 2 个 class， 分别是 .over 和 .down (注意在名字前面有个点)。代表含义是"鼠标覆盖和按下去的式样效果"。 你可以修改颜色等属性。属性请参考 CSS 相关属性。
<html>
<head>
<style type="text/css">
<!--
.over {color:yellow; background: navy}
.down {color:yellow; background: navy; font-style: italic}
-->
</style>
</head>
<body>
<input
type="Button"
onMouseOver="this.className='over';"
onMouseOut="this.className='';"
onMouseDown="this.className='down';"
onMouseUp="this.className='over';"
value="我是按钮"
onClick="this.value='我要疯狂!!!'" name="Button">
</body>
</html>
补充说明：
(1)、这里用到了一些与鼠标动作有关的事件，其实 DHTML 就是依靠事件驱动的。这里用到的事件有onmouseover,onmouseout,onmousedown,onmouseup，分别代表鼠标覆盖（移动到某个对象上），鼠标离开，鼠标按下去，鼠标按下去又松开。
(2)、与按钮相关的知识：在 HTML 中我们使用 <input type="button" value="button"> 和 <input type="submit" value="button"> 都可以生成按钮，但是用法是有区别的。用 <input type="submit" value="button"> 生成的按钮，在点击后交由 Form 标签中的 action 中指定的程序去处理，一般是 CGI/ASP 等程序(例如：<form method="post" action="submit.cgi">）。而 <input type="button" value="button"> 生成的按钮在点击后通过 onclick 事件定义的方法处理。 本例 onClick="this.value='我要疯狂!!!'" 表示显示"我要疯狂!!!"字符串。这实际上没有什么实际意义。
下面是一些常用的 onclick 事件的写法：
A)onClick="javascript:alert('ok!')" 弹出警告窗口显示ok信息。
B)onClick="javascript:location.href='http://100000.home.sohu.com'"; 点击后连向某个站点或页面。
注意：括号不要混用。双套单"''"，或者单套双'""'。
64,Q:样式表单图片动画效果示范
A:代码：
〈img src=about_net-e.jpg id=image1
style="visibility:hidden;
FILTER:revealTrans(Duration=4.0, Transition=23);"〉
〈SCRIPT FOR=window EVENT=onLoad LANGUAGE=vbscript〉
image1.filters.item(0).apply()
image1.filters.item(0).transition = [取值：0-22]
image1.Style.visibility = ""
image1.filters(0).play(1)
〈/SCRIPT〉
65,Q:数字时钟（示例一）
A:<html>
<head>
<title>生动逼真的数字时钟</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
A:link {text-decoration: none; color:#ffffff; font-family: 宋体}
A:visited {text-decoration: none; color: #e0e088; font-family: 宋体}
A:active {text-decoration: none; color: #FF0000; font-family: 宋体}
A:hover {text-decoration: underline; color: FF0000}
body {font-size:9pt}
td {font-size:9pt}
</style>
<script language="javascript">
<!--
img = new Array()
for(var i=0; i <= 14; i++)
{img = new Image();}
img[1].src = "dg0.gif"
img[2].src = "dg1.gif"
img[3].src = "dg2.gif"
img[4].src = "dg3.gif"
img[5].src = "dg4.gif"
img[6].src = "dg5.gif"
img[7].src = "dg6.gif"
img[8].src = "dg7.gif"
img[9].src = "dg8.gif"
img[10].src = "dg9.gif"
img[11].src = "dgon.gif"
img[12].src = "dgoff.gif"
img[13].src = "dgam.gif"
img[14].src = "dgpm.gif"
var base = "dg"
var space = "space.gif"
var per = false
function stop() {
document.one.src = space
document.two.src = space
document.three.src = space
document.four.src = space
document.five.src = space
document.six.src = space
per = false
}
function pause() {per = false}
function go() {per = true; start()}
function start()
{ if(per == true) {
var now = new Date()
var hours = now.getHours();
var ampm = (hours < 12) ? "am" : "pm"
hours = (hours > 12) ? (hours - 12) + "" : hours + ""
hours = (hours == "0") ? "12" : hours
hours = (hours < 10) ? "0" + hours : hours + ""
var minutes = now.getMinutes();
minutes = (minutes < 10) ? "0" + minutes : minutes + ""
var seconds = now.getSeconds();
seconds = (seconds < 10) ? "0" + seconds : seconds + ""
document.one.src = (hours.charAt(0)=="0") ? space : add(hours.charAt(0))
document.two.src = add(hours.charAt(1))
document.three.src = (now.getSeconds() % 2) ? add("on") : add("off")
document.four.src = add(minutes.charAt(0))
document.five.src = add(minutes.charAt(1))
document.six.src = add(ampm)
setTimeout("start()",1000)
}
}
function add(it) {return "dg" + it + ".gif"}
//-->
</script>
</head>
<body onLoad="go()" bgcolor="#000000" text="#FFFFFF" onselectstart="return false;">
<div align="center">
<p><font size="3" color=yellow>数字时钟 [Digital Clock]</font></p>
<p><img src="space.gif" width=16 height=21 alt="clock" name="one"><img src="space.gif" width=16 height=21 alt="clock" name="two"><img src="space.gif" width=8 height=21 alt="clock" name="three"><img src="space.gif" width=16 height=21 alt="clock" name="four"><img src="space.gif" width=16 height=21 alt="clock" name="five"><img src="space.gif" width=16 height=21 alt="clock" name="six">
<br><a href="javascript:go()">开始</a> | <a href="javascript:pause()">暂停</a> | <a href="javascript:stop()">停止</a>
</p>
<table width="69%" border="0">
<tr>
<td>代 码：<br>
<br>
<html><br>
<head><br>
<title>生动逼真的数字时钟</title><br>
<script language="javascript"><br>
<!--<br>
img = new Array()<br>
for(var i=0; i <= 14; i++) {img = new Image()}<br>
img[1].src = "dg0.gif"<br>
img[2].src = "dg1.gif"<br>
img[3].src = "dg2.gif"<br>
img[4].src = "dg3.gif"<br>
img[5].src = "dg4.gif"<br>
img[6].src = "dg5.gif"<br>
img[7].src = "dg6.gif"<br>
img[8].src = "dg7.gif"<br>
img[9].src = "dg8.gif"<br>
img[10].src = "dg9.gif"<br>
img[11].src = "dgon.gif"<br>
img[12].src = "dgoff.gif"<br>
img[13].src = "dgam.gif"<br>
img[14].src = "dgpm.gif"<br>
var base = "dg"<br>
var space = "space.gif"
<p>var per = false<br>
function stop()<br>
{<br>
document.one.src = space<br>
document.two.src = space<br>
document.three.src = space<br>
document.four.src = space<br>
document.five.src = space<br>
document.six.src = space<br>
per = false<br>
}<br>
function pause() {per = false}<br>
function go()<br>
{<br>
per = true<br>
start()<br>
}<br>
function start()<br>
{<br>
if(per == true) {<br>
var now = new Date()<br>
var hours = now.getHours();<br>
var ampm = (hours < 12) ? "am" : "pm"<br>
hours = (hours > 12) ? (hours - 12) + "" : hours + ""<br>
hours = (hours == "0") ? "12" : hours<br>
hours = (hours < 10) ? "0" + hours : hours + ""<br>
var minutes = now.getMinutes();<br>
minutes = (minutes < 10) ? "0" + minutes : minutes + ""<br>
var seconds = now.getSeconds();<br>
seconds = (seconds < 10) ? "0" + seconds : seconds + ""<br>
document.one.src = (hours.charAt(0)=="0") ? space : add(hours.charAt(0))<br>
document.two.src = add(hours.charAt(1))<br>
document.three.src = (now.getSeconds() % 2) ? add("on") :
add("off")<br>
document.four.src = add(minutes.charAt(0))<br>
document.five.src = add(minutes.charAt(1))<br>
document.six.src = add(ampm)<br>
setTimeout("start()",1000)<br>
}<br>
}</p>
<p>function add(it){ return "dg" + it + ".gif"}<br>
//--><br>
</script><br>
</head><br>
<br>
<body <font color="#66FF66">onLoad="go()"</font> bgcolor="#000000"
text="#FFFFFF"><br>
<font color="#FFFFCC"><img src="space.gif" width=16 height=21
alt="clock" name="one"><img src="space.gif"
width=16 height=21 alt="clock" name="two"><img
src="space.gif" width=14 height=21 alt="clock" name="three"><img
src="space.gif" width=16 height=21 alt="clock" name="four"><img
src="space.gif" width=16 height=21 alt="clock" name="five"><img
src="space.gif" width=16 height=21 alt="clock" name="six">
</font><br>
<br><br>
<a href="javascript:go()">开始</a> | <a href="javascript:pause()">pause</a> | <br>
<a href="javascript:stop()">stop</a>
<br></body><br>
</html></p>
<p>说明：图片文件名应该是dg0.gif,dg1.gif...，你可以用自己的图片替换它们。<BODY>标签中的<font color="#66FF66">onLoad="go()"</font>千万不要少，否则不会运行的。</p>
<p>黄色部分代码是时钟初始设置，写成一行，这样数字之间不会留空格。</p>
</td>
</tr>
</table>
</DIV>
<!底部标签--><br><hr width=72% color=green>
<table border="0" align="center" cellspacing="2" cellpadding="0">
<tr align="center">
<td>Copyright(C) By 西安网e工作室</td>
<td align="left"><a href="javascript:close()"><img src="../../images/close.gif" border="0" alt="关闭本窗口" WIDTH="32" HEIGHT="32"></a></td>
</tr>
<tr align="center">
<td colspan="2">
站长邮箱：<a href="mailto:zhangking@263.net?subject=给张庆的信">zhangking@263.net</a>
Bp:029-95808 呼 822686 O'ICQ:9365822
</td></tr>
</table><p>
</body>
</html>
上一页 [1] [2] [3] [4] 下一页 |
注册 登录
