首页 web前端 html教程 网页制作中的小秘诀

网页制作中的小秘诀

Dec 16, 2016 pm 02:17 PM
网页制作

1、给主页添加视频动画
只要把下面这段代码添加到你的网页中,就可以在主页中添加Windows视频动画或其他RralMedia格式的视频动画。 
test.avi (40M字节) 
在这段代码中,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="view.gif" lowsrc="PReview.gif" width="x" height="y"> 
其中view.gif是原图,preview.gif是缩略图,width是原图的宽度,height是原图的高度。 

6、建立一个站内的搜索引擎 
随着页面内容的不断增多,要快速准确地获取站点之内的某个内容就变得越来越困难。为了能够使访问者很快找到他们想要的信息,那么就需要在站内建立一个搜索引擎。要建立一个站点的搜索引擎,我们可以直接链接到网站网络特区http://netzone. swatou. com/personal/, 单击“申请站点引擎” 并填写申请表,然后按照要求建立站点页面数据库即可。 

7、让背景音乐持续播放 
我们知道,当打开一个含有背景音乐的页面时,我们就能听到一段悠扬的乐声,但是当我们用鼠标单击页面中的链接或者去访问另外一个页面时,正在播放的背景音乐就会突然停止,那么我们有没有办法让某个页面的背景音乐持续不断地播放下去呢? 回答是肯定的,其实,我们只需建立一个上下框架结构的网页,把声音文件包含在下框架页面内容里,并把下框架的宽度设置为0个像素,而上框架里是正常的页面内容,由于下框架不占用窗口的空间,这就相当于我们把含有声音文件的页面当我们离开含有背景音乐的网页页面时,由于下框架页面内容未变,所以声音就能持续不断地进行播放了。 

由于编辑原因,所有代码的尖括号均为全角字符,应用时请换为半角。

 以上就是网页制作中的小秘诀的内容,更多相关文章请关注PHP中文网(www.php.cn)! 


本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1670
14
CakePHP 教程
1428
52
Laravel 教程
1329
25
PHP教程
1274
29
C# 教程
1256
24
HTML:结构,CSS:样式,JavaScript:行为 HTML:结构,CSS:样式,JavaScript:行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是:1.HTML定义网页结构,2.CSS控制网页样式,3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML,CSS和JavaScript的未来:网络开发趋势 HTML,CSS和JavaScript的未来:网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件,CSS的未来趋势是CSS-in-JS和CSSHoudini,JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果,Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积,CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡,Serverless简化开发但需优化冷启动问题。

HTML的未来:网络设计的发展和趋势 HTML的未来:网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML:建立网页的结构 HTML:建立网页的结构 Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义,使用、、等标签。2.提供语义化标记,如、、等,提升SEO效果。3.通过标签实现用户交互,需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号,需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

HTML与CSS vs. JavaScript:比较概述 HTML与CSS vs. JavaScript:比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是:HTML负责内容结构,CSS负责样式,JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容,确保语义化。2.CSS通过选择器和属性控制网页样式,使其美观易读。3.JavaScript通过脚本控制网页行为,实现动态和交互功能。

HTML与CSS和JavaScript:比较Web技术 HTML与CSS和JavaScript:比较Web技术 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术:1.HTML定义网页结构,2.CSS负责网页外观,3.JavaScript提供网页动态和交互性,它们共同作用,打造出用户体验良好的网站。

HTML:是编程语言还是其他? HTML:是编程语言还是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增强WebevebDevelopment。

&lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签? &lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签? Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签,和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

See all articles