網頁設計的常用技巧
2024-05-06 15:45:44
供稿：網友
在設計網頁的時候有好的設計技巧就可以大大提升網站的用戶體驗，用戶體驗提升了那么訪問量自然也就上去了，那么要如何才能設計出好的網頁呢？接下來小編就針對這一問題為大家介紹網頁設計的常用技巧。
各種用途的按鈕?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
個非常漂亮的下拉列表框?
?
?
?
?
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("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]?+?"")?
document.write("
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("")?
document.write("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{?document.write("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?+?"
")?
}?document.write(" ")?
}?
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()?
?
?
?
LANGUAGE=javascript?
>
?
下拉列表框演示程序：
?
?
?
?
?
鼠標右鍵絕對禁止法?
softet??
?
?
?
Dreamweaver定制網頁過渡功能:?
首先用Dreamweaver打開頁面，然后單擊菜單中的Insert/Head/Meta（插入/文件頭標簽/Meta）.?
在對話框中的Attribute選項的下拉列表中選HTTP-equivalent選項，在Value：中鍵入Page-Enter，表示進入網頁時有網頁過渡效果。在Content:中鍵入Revealtrans(Duration=6,Transition=2),Duration=6表示網頁過渡效果的延續時間為6秒，Transition表示過渡效果方式，值為2時表示圓形收縮。?
輸入完后單擊確定，存盤。這樣當我們點擊一個超鏈接進入這個頁面時就可以看到效果了。另外還有二十多種效供你選擇，只要將Transition的值改為相應的效果的代號即可，具體效果和設置如下表所示：?
效果? Content? Transitionv??
盒狀收縮?RevealTrans?0 ??
盒狀展開 ?RevealTrans?1??
圓形收縮 ?RevealTrans?2 ??
圓形展開?RevealTrans?3??
向上擦除?RevealTrans?4??
向下擦除?RevealTrans?5??
向左擦除?RevealTrans?6??
向右擦除?RevealTrans?7??
垂直百頁窗?RevealTrans?8??
水平百頁窗?RevealTrans?9??
橫向棋盤式?RevealTrans?10??
縱向棋盤式?RevealTrans?11??
溶解?RevealTrans?12??
左右向中部收縮?RevealTrans?13??
中部向左右展開?RevealTrans?14??
上下向中部收縮?RevealTrans?15??
中部向上下展開?RevealTrans?16??
階梯狀向左下展開?RevealTrans?17??
階梯狀向左上展開?RevealTrans?18??
階梯狀向右下展開?RevealTrans?19??
階梯狀向右上展開?RevealTrans?20??
隨機水平線?RevealTrans?21??
隨機垂直線?RevealTrans?22??
隨機?RevealTrans?23
加到文字中間，以顯示倒計時。
???
然后把?
?
又一個一個非常漂亮的下拉列表框?
?
?
?
?
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("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]?+?"")?
document.write("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("")?
document.write("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{?document.write("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?+?"
")?
}?document.write(" ")?
}?
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()?
?
?
?
LANGUAGE=javascript?
>
?
下拉列表框演示程序：
?
?
?
?
?網頁設計的常用技巧就為大介紹到這里了，設計一個有可塑性、易于維護的網站，是一個偉大網頁設計師的標志，所以大家要加油哦！
