转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
用JavaScript来装扮自己的“家园”         ★★★★

用JavaScript来装扮自己的“家园”

作者:闵涛 文章来源:闵涛的学习笔记 点击数:577 更新时间:2009/4/23 11:30:22

  随着INTERNET的逐步盛行,上网冲浪已经成为一种很时尚的事情,在网上拥有一个属于自己的“家园”更是这些网虫们的追求。为了使自己的“家园”更有特色,吸引更多的人参观,这些网虫们可以说是煞费苦心,他们往往利用各种专门网页制作工具例如FRONTPAGE2000、DREAMWEAVER等来制作网页,利用各种特效编辑工具来增强页面效果,然而利用上面的专门制作工具来装扮“家园”不是一件简单容易的事情,而且它们还能在网页中生成大量的垃圾代码和错误代码,从而不利于浏览器快速浏览。为此笔者今天就向各位网友提供另外一种生成特效的方法,那就是往主页中添加HTML源代码,这种方法可以最大程度上对HTML代码进行优化,提高代码质量。在这里笔者就把自己平时在实践过程中,搜集和整理的一些常用的HTML代码小程序推荐给大家。大家使用它们时,只要通过简单的复制和粘贴操作,就能制作出相应的特效来。如果你稍懂一些HTML语言和JaveScript插件语法则更好。

  1、显示访问者的浏览器相关信息

  如果你想让你的主页自动能显示出访问者的一些相关信息,例如在页面中显示出他的浏览器类型、版本号等信息,并提出建议,如: “请使用600*800显示模式来浏览网页。”那么,大家可以直接把下面的HTML源代码加入到你自己主页的源代码中去。

  vari=0;

  varj=0;

  varn=0;

  varBrowserInfo="您的浏览器是:"+navigator.appName+""+navigator.appCodeName+""+navigator.appVersion;functionMakeArray(n)

  {

  this.length=n;

  for(varj=0;j\n;j++)

  {

  this[j]=0;

  }

  returnthis;

  }

  varMessages=newMakeArray(3);

  Messages[0]="您的浏览器名字:"+navigator.appName;

  Messages[1]="您的浏览器代码:"+navigator.appCodeName;

  Messages[2]="浏览器版本号码:"+navigator.appVersion;

  Messages[3]=" 请使用600*800显示模式来浏览网页";

  functionShowInfo()

  {

  document.Menu.Display.value=Messages[i];

  if(iΛ2)

  i=0

  elsei++;

  document.Menu.Display.value=Messages[i];

  BrowserInfo=Messages[i];

  setTimeout("ShowInfo()",3000);

  }

  2、给主页添加视频动画

  只要把下面这段代码添加到你的网页中,就可以在主页中添加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文件改成自己需要的视频文件。

  3、去掉超链接的下划线

  在你刚开始编网页时,还记得在超链接的下划线吗?你有没有想过要把它去掉吗?如果有这个念头,请把下列语句放在<head>...</head>之间

  〈style>

  〈!--

  td{font-size:12px; line-height=16px;}

  body{font-size:12px; line-height=16px;}

  A:link {text-decoration: none; color: ″#0000ff″}

  A:visited {text-decoration: none; color: ″#ffffff″}

  A:active {text-decoration: none}

  A:hover {text-decoration: underline; color: ″#009900″}

  -->

  〈/style>

  这里的〈style>、〈/style>是风格样式标签,作用是统一整个页面的风格。其中,代码td和body用来控制表格中和不在表格中的文字表现形式。font-size定义了文字大小,而line-height用于控制行距。以A开头的几句控制链接文字的风格:使其在链接、正在被点击过程和点击后都呈现不同的样式,更主要的是消除了链接文字的下划线,效果试试就知道啦。另外,在color后的颜色也可用black、blue、white限定词等来代替颜色的16进制码,例如可写成color:blue的形式。

  4、在线改变网页的背景图象

  平时看到的网页背景一般是静态的,浏览者是无权自己更换背景图案的,不知你有没有想过做出来的网页可以让浏览者自己改变背景图像呢?如果你有这个念头的话,下面的这段代码就能帮你轻松实现这样的功能,你所要做的就是把它们COPY然后贴在你HTML代码的合适位

  置就可以了。不敢说很有用,但用得好的话绝对是锦上添花。好了,一起先来看看代码好了。

  <FORM>

  <SELECT onChange="document.body.style.background=this.options[this.selectedIndex].value">

  <OPTION VALUE="url('背景一的地址')" SELECTED>第一种背景

  <OPTION VALUE="url('背景二的地址')"> 第二种背景

  <OPTION VALUE="url('背景三的地址')"> 第三种背景

  .......其它选择格式如上......

  </SELESTED>

  </FORM>

  使用这段代码时,我们可以自己先选择好或者制作好需要的背景,然后把各个背景图像的

  URL替换上面代码中的背景地址,这样我们就可以轻松实现在线更改背景图案。

  5、让主页中的自动换行适应不同的浏览器

  有时你会见过这样的主页,一行字老长老长,让您拉着滚动条走了好远好远,这样是不是很麻烦,让人浏览起来感觉极不协调!能不能在Netscape让中文随着窗口的大小或表格的大小而自动换行,象西文那样呢?其实很简单,只要在<head>和</head>加入以下html源代码内容,您就不用再痛苦的手动换行了.

  <HTML>

  <HEAD>

  <META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=gb2312">

  <TITLE>举例说明</TITLE>

  </HEAD>

  <BODY></BODY>

  </HTML>

  6、 自动滚屏

  绝大多数主页的显示范围会超出屏幕,访问者都必须要按动水平或垂直滚动杆来跳过开始的欢迎词,下面的函数演示了自动按指定的方向、速率、范围游动的主页的制作。

  varposition=0;

  functionscroller()

  {

  if(position!=400)

  {

  position++;

  parent.scroll(400,position);

  clearTimeout(timer);

  vartimer=setTimeout("scroller()",0);

  timer;

  }

  }

  看到这儿,想必大家心里一定痒痒的,那就赶快行动起来,让自己的“家园”变得更加靓丽吧!

  文/周勇生


没有相关教程
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台