网页设计技巧10则

网页设计技巧10则

  1.改变收藏夹中URL标题前面的IE缺省图标
  当别人收藏你的网站时，想不想使它在收藏夹中更酷更吸引人，那就试着改变收藏夹中你的URL标题前面的IE图标，使它变成一个个性化图标，其实如果用户的浏览器是IE5.0（大多数网虫都应该是IE5.0或以上了），这很容易做到，请在 </head>前面加上这一句：<link rel="shortcut icon" href="cool.ICO"> ,其中的cool.ico是你想要用的ico图标，将cool.ico 和首页放到服务器的同一个目录里就可以了，打开页面收藏后，将可以发现收藏夹中你站点前面的图标已经改变，以后再打开时，你会发现浏览器的地址栏图标也将变成cool.ico ,请注意测试时必须将页面放到服务器上执行才行，而不能直接双击打开它来收藏。
  2.判断用户的屏幕分辨率而转向到不同的网页
  请将以下代码加入到</head>前面，并且将640.htm ,800.htm,1024.htm改为你需要转向的页面，运行测试页面,您还可以看到转向后的页面将变成“第一页”，也就是说浏览器的后退键是不可用的，这就避免用户按后退键造成“死循环”。
  <script language="javascript">
//resolutionRedirect
if (window.screen){
var w = screen.width;
url_640 = "640.htm";
url_800 = "800.htm";
url_1024 = "1024.htm";
if(w<740){
  self.location.replace(url_640);
}
if(w>=740 & w<835){
  self.location.replace(url_800);
}
if(w>=835){
  self.location.replace(url_1024);
}
}//resolutionRedirectEnd
</script>
   3.判断用户显示器色深然后转向到不同网页
   将以下代码加入到</head>前面，并将转向页面 less.htm,256.htm,more.htm 改成你想转向的页面，和上面一样，转向后，用户的后退键是不可用的。更深一级的是可以将分辨率、和颜色的判断结合起来，即先判断颜色，然后转向到判断分辨率页面，当然这样的话，网站维护人员也就太累了！估计只有在展示某个产品时才用到。
   <script language="javascript">
  //ColorDepthRedirect
  if (window.screen){
   c=screen.colordepth;
   redirectless="less.htm";
   redirect256 = "256.htm";
   redirectMore = "more.htm";
if(c<8) {
  self.location.replace(redirectless)
}
if(c>=8 & c<16){
  self.location.replace(redirect256);
}
else{
  self.location.replace(redirectMore);
}
}//ColorDepthRedirectEnd
</script>

   4. 给文字链接加上描述
  IE4.X以上浏览器新增的功能，可以给文字链接加上文字描叙，就象图片一样，当你的鼠标指向图片时，就出现一句描叙，在这里我们来给文字链接加上描叙，很简单,象下面这个样子：
  <a href="http://www.macromedia.com" title="FLASH5.0发布了快去下载" > FLASH的老家 </a>
   当你将鼠标指向链接文字“FLASH的老家” ，就会显示出"FLASH5.0发布了快去下载"这句描述。同样道理，对于表单中的部份元素如文本框(text)、单选(redio)、复选(checkbox)都可以用title 属性来描述，就不一一介绍。
   5.避免鼠标点击”假链接“时出现的错误
   ”假链接“就是并不真的指向一个链接（废话！），作为一名Dreamweaver的熟手，大家都知道用”假链接“ （#）来响应鼠标事件，因为通常的文字是不能响应鼠标事件，必须在属性栏的link中加一个”#“ ，这样你就可以设置当鼠标移到这些文字上时显示和隐藏层等等操作，但当用户点击这些”假链接“时则有可能跳到页首（你设置了瞄链接）或鼠标变成沙漏然后页面会刷新一下，因此必须避免用户的click事件，象这样就可以了：
   <a href="#" onClick="return false">点我也没有用</a>
   6.总是保持在最前面
   不管别人打开了其它什么窗口，你的网页总是保持在最前面，这个很有意思，也很霸道，尽量少用，当然要做到这样则很容易，在body语句中加入这样一句：<body bgcolor="#FFFFFF" onBlur="self.focus()"> 。有些网页就是这样做的，把广告条老是保持在最前面。
   7.自动关闭窗口
   当你的网页失去焦点时，就会弹出一个窗口问是否关闭，在body语句中加入这样一句就可以做到：
   <body bgcolor="#FFFFFF" onBlur="self.close()">
   8.自动移动网页
   这是个很鬼的技巧，如你可以设置一个广告弹出窗口（赚老外钱的那种），使它自动移到用户屏幕之外，这样用户就没有那么反感，不过想关掉这个窗口只能右键点任务栏的图标才行。把以下代码放到弹出窗口的</head>的前面：
   <script language="javascript">
//Move_Window
  Move_WindowX = 1500;
  Move_WindowY = 100;
  self.moveTo(Move_WindowX,Move_WindowY);//Move_WindowEnd
   </script>
   9.自动改变窗口大小
   使窗口自动改变大小也很容易，代码和上面差不多，把以下代码放到</head>前面：
   <script language="javascript">
  //Resize_Window
   Resize_WindowX = 200;
   Resize_WindowY = 200;
   self.resizeTo(Resize_WindowX,Resize_WindowY);//Resize_WindowEnd
   </script>
   请自己调整resize_windowx,resize_windowy的值。

   10.不准别人把我的网页放到他的框架中
   很多情况下自己的网页被直接引用到他人的框架中（简直被打劫！），这会令我们很不愉快，当然我们有愉快的解决办法，将下面的代码加到</head>前面就行了:
    <script language="javascript">
   //myframe
   if (top.location !=self.location)
    {top.location=self.location}
   //myframeEnd
    </script>

第11则：如何建立滚动字母超连接和对鼠标响应：
代码：
<MARQUEE onmouseout="if (document.all!=null){this.start()}"
      onmouseover="if (document.all!=null){this.stop()}" scrollAmount=4
      scrollDelay=10><font color=red >Home of teaman:</font><A
      href="http://teaman.top263.net" >:茶人之家</a> 还有：<a href="http://teaman.host.wayall.com">PHP的茶人</a></marquee>
当将鼠标移向滚动文字时它将会自动停下来，移开又会走。
效果参见 http://teaman.oso.com.cn

   还有很多此类的技巧，只要您多留心别人网站的制作，注意有特色的地方,研究一下源代码，您就会有很多意想不到的收获。