当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 网页制作中的小秘诀

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 网页制作中的小秘诀


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-04   浏览: 29 ::
收藏到网摘: n/a

  1、给主页添加视频动画
只要把下面这段代码添加到你的网页中,就可以在主页中添加Windows视频动画或其他RralMedia格式的视频动画。
<img dynsrc=/test.avi start="fileopen" width="360" height="190" alt="test.avi (40M字节)" controls hspace="-1" vspace="0">
在这段代码中,dynsrc的值为你的动画文件的名字,它应是以avi、ra、ram为后缀名的文件;start的值一般为“fileopen”,这样就可以使动画自动播放;width和height的值分别是动画播放时的画面的宽度和高度(以像素为单位也可以百分比来表示);alt的值是对动画文件的非显示说明;hspace是画面离页左边的距离(以像素为单位);vspace是画面离页顶的距离(以像素为单位),在这里大家可以把test.avi文件改成自己需要的视频文件。

2、让超级链接自动变色
大家知道,如果要使网页具有动态效果,一般要向网页中插入动画图象或者用Java来设计一个动态效果;但由于动画占用的字节数太多,而用Java来设计动态效果需要一定的设计基础。下面笔者就提供一种方法,可以让页面上的超级链接在一直不停地进行变色,从而使自己的网页看上去也动感十足。要实现这种效果,我们只要把下面的这段源代码粘贴到网页中的<head>与</head>之间就可以了。具体的源代码如下:
<script Language="JavaScript">
<! - - Begin
function initArray( ) {
for ( var i = 0 ; i < initArray.arguments.length; i + + )
{this[i] = initArray.arguments[i];}
this.length = initArray.arguments.length;
}
var colors = new initArray ("red","blue","green","black","purple","blue","tan","red");delay = .5; // seconds
link = 0 ;
vlink = 0 ;
function linkDance ( ) {
link= (link + 1)%colors.length;
vlink=(vlink+1)%colors.length;
document.linkColor = colors[link];
document.vlinkColor = colors[vlink];
setTimeout("linkDance( )",delay*1000);}
linkDance( );
// End - ->
</script>

3、随时改变网页的在线背景图象
我们通常看到的网页背景图象一般是静态的,普通的访问者是无权自己更换网页的背景图案的,不知大家有没有想过做出来的网页可以让访问者能自己改变背景图像呢?如果大家有这个想法的话,下面的这段代码就能帮助我们轻松实现这样的功能,我们所要做的就是把下面提供的源代码拷贝然后粘贴在自己网页中的HTML代码的合适位置就可以了。不敢说很有用,但用得好的话绝对是锦上添花。好了,一起先来看看代码好了。
<form>
<select onChange="document.body.style.background=this.options[this.selectedIndex].value">
<option value="url('背景一的地址')" selected>第一种背景
<option value="url('背景二的地址')"> 第二种背景
<option value="url('背景三的地址')"> 第三种背景
.......其它选择格式如上......
</selected>
</form>
使用这段代码时,我们可以自己先选择好或者制作好需要的背景,然后把各个背景图像的网址替换上面代码中的背景地址,这样我们就可以轻松实现随机更改背景图象了。

4、使图象与浏览窗口实现无缝接合
我们在网页中插入一幅图象时,有时候会发现该图象与浏览器窗口边框之间很难实现无缝接合,总会有点距离,看上去给人的感觉不太自然。那么我们该通过什么办法才能实现图象与浏览窗口的无缝接合,使图象很自然地融入窗口背景之中呢?其实,插入的图象之所以与浏览器的边框有缝隙,这是因为我们没有设置页面边距,解决无缝接合的办法是在页面的源代码的<body> 标签中加入以下源代码: topmargin=“0" leftmargin=“0" 其中topmargin表示与浏览器窗口顶部距离,此时设置为0,图象与浏览器窗口无缝接合。 leftmargin=“0"表示与浏览器窗口左边距离为0。

5、使用略图方式来显示图象
如果我们的确需要在网页中放置一个较大尺寸的图象时,考虑到图象传输速度相对较慢,为了能使访问者尽快知道图象所代表的内容,我们不妨使用缩略图显示的方法。即在显示原图之前,先提供一个分辨率较低、尺寸较小的图象当作“low source”,使得浏览器可以快速地显示,然后再渐渐地以高质量或者大尺寸的原图来代替。如果用户看到缩略图显示的内容并不是自己想要的,可以无须等待,直接去访问另外的内容,从而提高了浏览的效率。实现缩略图显示的具体方法是,在网页的html源文件中添加如下代码:
<img src="/upload/tech/20091104/20091104155220_8757150decbd89b0f5442ca3db4d0e0e.gif" lowsrc="/upload/tech/20091104/20091104155221_b5dc4e5d9b495d0196f61d45b26ef33e.gif" width="x" height="y">
其中view.gif是原图,pr