微软中国WIDOWS产品中文首页的典型按钮制作

精华区

当前位置：网易精华区>>讨论区精华>>网易站务>>○ 网上求助>>◆ 网络相关 ◆>>○ 网页设计 ○>>微软中国WIDOWS产品中文首页的典型按钮制作

主题：微软中国WIDOWS产品中文首页的典型按钮制作

发信人: gobad(：清风笑：)
整理人: gobad(2001-02-15 18:46:44), 站内信件

本文用段来说明，由于时间仓促，为对关键字符染色，请大家原谅
使用时候，将三段依次粘贴即可。具体个人设置看后面的备注
（我第一回做，别笑话我，否则……嘿嘿）

（1）段:css文件

<style>

</style>

解释：将上面代码添加在<html><head>下。上面的参数是设置框的属性。里面的参数包括主要颜色，位置
如果你想自己做，可试着改变颜色代码。

  (2)段：JAVAScript


<SCRIPT language=JavaScript>

var Img0 = new Image()
var bFirstMouse = "True";

function ColorBlock(oRegion,sImg,sTitle,sText,sLinkID) {
if (document.readyState != "complete") return;
oRegion.className = "LeftNavUp";
sLinkID.style.color = "white";

}
function UncolorBlock(oRegion,sLinkID) {
if (document.readyState != "complete") return;
window.event.cancelBubble = true;
var oToEl = window.event.toElement;
if ((oToEl && !oRegion.contains(oToEl))||!oToEl) {
sLinkID.style.color = "black";
oRegion.className = "LeftNavOff";
}
function TabText(sText) {
if (document.readyState != "complete") return;}

var sDefText = "<TABLE CELLPADDING=0 CELLSPACING=0><TR><TD VALIGN=MIDDLE>";

function revertBox() {
if (document.readyState != "complete") return;
var oToEl = window.event.toElement;
var thisItem = document.all("main");
if ((!thisItem.contains(oToEl)) || (window.event.toElement.id == 'header') || (window.event.toElement.id == 'extraBox')){
PreviewImg.style.display = "none";
PreviewTitle.style.display = "none";
PreviewLine.style.display = "none";
PreviewText.innerHTML = sDefText;
}

</SCRIPT>
呵呵，这个就不用解释了，因为……嘻嘻。我还没学全JS呢，不过这个代码也是简化了的。直接添加在(1)段的后面就得了

(3)段按钮代码



<TABLE cellSpacing=0 cellPadding=0 width="80" height="21">

    <TD class=LeftNavOff
onmouseover="ColorBlock(this,Img0.src,'Windows 2000','<p class=90v>',Link0);"
                onclick="window.location.href='/china/windows2000/'"
                onmouseout=UncolorBlock(this,Link0); ButtonType="LeftNav" height="19" width="78">
<DIV style="WIDTH: 180px"><A id=Link0
onmouseover=this.style.textDecorationNone=true;
style="COLOR: black"
onfocus="TabText(Img0.src,'Windows 2000',';"
href="http://webflash.myetang.com/">清风笑未完工的破烂主页
                  </DIV></TD></TR>


           </TABLE>


这个解释看下面的备注。直接添加在(2)段的下面就可以，不过要注意这是一个按钮

本文用到的css样式单各种属性解释
<span>保存样式属性并用于起始和结束标记之间的HTML代码，这一标签用在单词和字母周围(原文件用到。
      但为了代码的简洁，已经删掉)
<div> 保存样式属性并用于起始和结束标记之间的HTML代码，这一标签用在段落或其他块周围
class  引入样式类，将其作用于html文档的指定部分
<TR>  标识表格一行。结束标记(属性)可选
<TD>  标识表格一行中的单元(属性）可选
<STYLE>指定HTML文档中样式单区域

备注：(1)本文只介绍了一个按钮的方法。如果要增加按钮需在(2)段的JS代码的var Img0 = new Image()
下添加var Img1 = new Image()，如此反复。要加几个按钮就将IMG后面的数字做相应的改动。在(3)段
里将LINK的数字也要做相应的改动。具体设置按钮位置可配合DREAMEWEAVER修改。

      (2) 在简化代码的过程中，可能是原来下载的微软文件在我不经意间改动了什么。以至于出现“网页
有错误”的提示。但不影响按钮的效果。我也懒的对照新的微软文件修改了，呵呵
既然有求助版，我就干脆偷个懒，求助一下吧。如果谁看出来了错误在那里，请回复告诉我：）

     (3)在<head></head>间加上<LINK REL=stylesheet HREF="URL/*.css" TYPE="text/css">可以直接
调用CSS文件，并防止别人直接引用。另外在以后修改时，只需修改响应的*.CSS文件即可。可以省很
多的麻烦.如例：“<HEAD>
<LINK REL=stylesheet HREF="http://202.110.42.18/hand/1.css" TYPE="text/css">
</HEAD>”
     (4)本人知识实在是有限，其实大家只要用心的分析，不怕麻烦。代码是很容易简化的。还有就是我太喜欢
微软的菜单和按钮了（实际上这个按钮就是微软的菜单效果，只是有一点变化而已），在此献丑，请莫见笑
如果大家看出那里的代码有错误，请回复告之。清风笑在这里感谢了

     (5)另外求教：谁有微软美国站点的哪个可移动的交互式菜单代码？如有，能告诉我吗？

     (6)本文不敢说是原创，因为原代码来自微软中国mircrosoft windows产品中文首页.html  :))

----
采菊东篱下
  悠然见南山
╬╬╬╬╬╬╬╬╬╬╬

[关闭][返回]