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] 下一页 |