网页设计常用的一些技巧


答案：各种用途的按钮 
<!--脚本说明： 
把如下代码加入<body>区域中:--> 
<form> 
      <p> 
      <input type="button" value="返回"  name="button" class="pt9"> 
      <input TYPE="button" NAME="view" value="查看本例的源码" view-source:" +window.location.href" class="pt9"> 
    </p> 
</form> 
<form> 
<p><input TYPE="button" value="返回上一步" ></p> 
</form> 
<form> 
<p><input TYPE="button" value="刷新按钮一" ></p> 
</form> 
<script language="javascript"><!-- 
function ReloadButton(){location.href=>// --></script> 
<form> 
<p><input TYPE="button" value="刷新按钮二" > </p> 
</form> 
<form> 
<p><input TYPE="button" value="回首页按钮" ></p> 
</form> 
<script language="javascript"><!-- 
function HomeButton(){location.href=><form> 
<p><input TYPE="button" value="弹出警告框" ></p> 
</form> 
<script language="javascript"><!-- 
function AlertButton(){window.alert("要多多光临呀！");} 
// --></script> 
<form> 
<p><input TYPE="button" value="状态栏信息" ></p> 
</form> 
<script language="javascript"><!-- 
function StatusButton(){window.status="要多多光临呀！";} 
// --></script> 
<form> 
<p><input TYPE="button" value="背景色变换" ></p> 
</form> 
<script>function BgButton(){ 
if (document.bgColor=='#00ffff') 
  {document.bgColor='#ffffff';} 
else{document.bgColor='#00ffff';} 
} </script> 
<form> 
<p><input TYPE="button" value="打开新窗口" ></p> 
</form> 
<script language="javascript"><!-- 
function NewWindow(){window.open("test.htm","","height=240,width=340,status=no,location=no,toolbar=no,directories=no,menubar=no");} 
// --></script> 

个非常漂亮的下拉列表框 

<HTML> 
<HEAD> 
<TITLE></TITLE> 
<SCRIPT LANGUAGE=javascript> 
function getSelected() 
{ return hDDL.innerText 
} function hDDL_onmousemove() 
{ window.event.cancelBubble = true 
} 

function DDLI_onmousemove() 
{ window.event.cancelBubble = true 
} 

function DDLI_onmouseover(item) 
{ item.style.color = DDL_HFC 
item.style.backgroundColor = DDL_HBC 
} 

function DDLI_onmouseout(item) 
{ item.style.color = DDL_FGC 
item.style.backgroundColor = DDL_BGC 
} 

function DDLI_onclick(item) 
{ hDDL.innerText = item.innerText 
DDL.style.display = "none" 
alert("You click " + item.innerText + "!") 
} 

function document_onmousemove() 
{ DDL.style.display = "none" 
} 

function DDL_onmousemove() 
{ window.event.cancelBubble = true 
} 

function hDDL_onclick() 
{ DDL.style.posLeft = hDDL.offsetLeft 
DDL.style.posTop = hDDL.offsetTop + hDDL.offsetHeight  
DDL.style.display = "block" 
} 

function writeDropdownList() 
{ 

document.write("<SPAN id=hDDL") 
document.write(" style="BACKGROUND-COLOR: " + DDL_BGC + ";") 
document.write(" BORDER-BOTTOM: " + DDL_BC + " " + DDL_BW + " solid;") 
document.write(" BORDER-LEFT: " + DDL_BC + " " + DDL_BW + " solid;") 
document.write(" BORDER-RIGHT: " + DDL_BC + " " + DDL_BW + " solid;") 
document.write(" BORDER-TOP: " + DDL_BC + " " + DDL_BW + " solid;") 
document.write(" PADDING-LEFT: 10px; COLOR: " + DDL_FGC + ";") 
document.write(" CURSOR: hand; POSITION: absolute;") 
document.write(" LEFT: " + DDL_Left + "; TOP: " + DDL_Top + "; WIDTH: " + DDL_Width + """)document.write(" LANGUAGE="javascript"") 
document.write(" ") 
document.write(" >") 

document.write(DropdownListData[0] + "</SPAN>") 

document.write("<SPAN style="BACKGROUND-COLOR: " + DDL_BGC + ";") 
document.write(" BACKGROUND-IMAGE: url(imageDDLpic.gif); CURSOR: hand;")document.write(" POSITION: absolute; TOP: " + (DDL_Top + DDL_BW) + ";")document.write(" LEFT: " + (DDL_Left + DDL_Width - DDL_BW - DDL_picW) + ";")document.write(" WIDTH: " + DDL_picW + ";") 

document.write(" BACKGROUND-REPEAT: no-repeat"") 
document.write(" LANGUAGE="javascript"") 
document.write(" ") 
document.write(" >") 
document.write("</SPAN>") 

document.write("<DIV id=DDL") 
document.write(" style ="BACKGROUND-COLOR: " + DDL_BGC + ";") 
document.write(" BORDER-BOTTOM: " + DDL_BC + " " + DDL_BW + " solid;") 
document.write(" BORDER-LEFT: " + DDL_BC + " " + DDL_BW + " solid;") 
document.write(" BORDER-RIGHT: " + DDL_BC + " " + DDL_BW + " solid;") 
document.write(" BORDER-TOP: " + DDL_BC + " " + DDL_BW + " solid;") 
document.write(" DISPLAY: none; POSITION: absolute;") 
document.write(" LEFT: 10px; HEIGHT: 99px; TOP: 124px; WIDTH: " + DDL_Width + """)document.write(" LANGUAGE="javascript"") 
document.write(" >") 
var i 
for(i=0; i<DropdownListData.length; i++) 
{ document.write("<SPAN id=DDLI" + i) 
document.write(" style="BACKGROUND-COLOR: " + DDL_BGC + "; CURSOR: hand;")document.write(" COLOR: " + DDL_FGC + "; PADDING-LEFT: 10px; WIDTH: " + (DDL_Width - 2 * DDL_BW) + """)document.write(" LANGUAGE="javascript"") 
document.write("  + i + ")"")document.write("  + i + ")"") 
document.write("  + i + ")"") 
document.write(" >") 
document.write(DropdownListData + "</SPAN><BR>") 
} document.write("</DIV>") 

} 

document.onmousemove = document_onmousemove 

var DropdownListData = new Array() 

var DDL_BGC = "papayawhip" 
var DDL_FGC = "green" 
var DDL_HBC = "orange" 
var DDL_HFC = "red" 
var DDL_BC = "red" 
var DDL_BW = 1 
var DDL_Width = 90 
var DDL_Top = 100 
var DDL_Left = 80 
var DDL_picW = 15 

DropdownListData[0] = "Item0" 
DropdownListData[1] = "Item1" 
DropdownListData[2] = "Item2" 
DropdownListData[3] = "Item3" 
DropdownListData[4] = "Item4" 

writeDropdownList() 

</SCRIPT> 
</HEAD> 

<BODY> 

<P><INPUT type="button" value="Selected" id=button1 name=button1 
LANGUAGE=javascript 
></P> 
<P>下拉列表框演示程序：</P> 
<LABEL id=l1> 
</LABEL> 

</BODY> 
</HTML> 
鼠标右键绝对禁止法 

softet  

<script language="JavaScript"> 
<!-- 

if (window.Event)  
  document.captureEvents(Event.MOUSEUP);  

function nocontextmenu()  
{ event.cancelBubble = true 
event.returnValue = false; 

return false; 
} 

function norightclick(e)  
{ if (window.Event)  
{   if (e.which == 2 || e.which == 3) 
  return false; 
} else 
  if (event.button == 2 || event.button == 3) 
  { 
  event.cancelBubble = true 
  event.returnValue = false; 
  return false; 
  } 

} 

document.oncontextmenu = nocontextmenu;  // for IE5+ 
document.onmousedown = norightclick;  // for all others 
//--> 
</script> 
Dreamweaver定制网页过渡功能: 
首先用Dreamweaver打开页面，然后单击菜单中的Insert\Head\Meta（插入/文件头标签/Meta）. 

　　在对话框中的Attribute选项的下拉列表中选HTTP-equivalent选项，在Value：中键入Page-Enter，表示进入网页时有网页过渡效果。在Content:中键入Revealtrans(Duration=6,Transition=2),Duration=6表示网页过渡效果的延续时间为6秒，Transition表示过渡效果方式，值为2时表示圆形收缩。 
输入完后单击确定，存盘。这样当我们点击一个超链接进入这个页面时就可以看到效果了。另外还有二十多种效供你选择，只要将Transition的值改为相应的效果的代号即可，具体效果和设置如下表所示
上一个：多图幻灯Wipe擦洗效果
下一个：在table中插入多行，能使用与insertAdjacentHTML相似的功能吗？
更多图片编程知识: