網頁製作技巧及常用代碼集錦

網頁製作技巧及常用代碼集錦
 A: 在網頁裏把SWF文件設置爲背景透明即可,具體做法:在標誌SWF文件屬性的代碼中添加:
<param name="wmode" value="transparent">注意,這種效果只有IE支持。

Q: 如何讓一個圖片或表格在頁面中始終保持橫向和縱向的居中?
A: 首先插入一個1行1列的表格,設置其寬度爲100%、高度也爲100%,邊框爲0。
然後設置單元格的屬性,設置其內容的水平對齊方式和垂直對齊方式均爲居中。
最後在這個單元格插入圖片或表格,就可以保持內容在頁面內橫向和縱向都居中顯示了。

Q: 表格內的文字不會自動換行,怎麼辦?
A: 有兩種可能的情況:
第一種,你用CSS把表格內文字的字體設置成了英文字體,這樣在DW裏表格內的文字不會自動換行,但這僅是DW裏的顯示效果,在IE裏其實是可以正常換行的。如希望在DW的編輯狀態也能使文字自動換行,把表格內文字的字體設置爲中文字體即可(例如“宋體”)。
第二種,你在表格中輸入了連串無空格的英文或數字,它們被IE識別爲一個完整的單詞,所以不會自動換行,遇到這種情況,你可以通過CSS把文字強行打散,例如:
<td style="word-break:break-all">……</td>

Q: 背景音樂因爲頁面的切換而無法連續播放,怎麼讓它連續播放?
A: 用分幀實現,把其中一個frame的顯示高度(或寬度)定義爲0,在其中設置背景音樂,另外一個frame內的頁面切換不影響整個背景音樂的播放。
例子:<html><head><title>框架頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<frameset rows="0,*" frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" scrolling="NO" noresize src="bgsound.htm" >
<frame name="mainFrame" src="main.htm">
</frameset>
</html>

Q: 半透明的層怎麼做?
A: 先定義一個CSS樣式:
<style type="text/css">
<!--
.halfalpha { background-color: #000000; filter: Alpha(Opacity=50)}
-->
</style>
然後應用在層標籤裏:
<div class="halfalpha">

Q: 層在不同分辨率下發生錯位,怎麼辦?
A:解決方法有二:
1、頁面居左顯示;
2、使用層的相對定位,關於相對定位你可以參考這篇文章:
[url]http://www.windstudio.net/tech/show.asp?id=37[/url]

Q: 如何實現“設爲首頁”、“添加到收藏夾”?
A: 設置爲首頁:
<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.windstudio.net');">設爲首頁</a>
加入收藏:
<a href="javascript:window.external.AddFavorite('http://www.windstudio.net', '有風的日子·帶給你一陣清新的設計風')">加入收藏</a>

Q: 如何製作細線表格?
A: 表格細線邊框的做法
方法1:把表格的cellspacing設置爲1,cellpadding和border均爲0,分別填充表格的背景色和單元格的背景色。舉例如下:
<table width="550" border="0" cellspacing="1" cellpadding="0" bgcolor="#666666">
<tr bgcolor="#FFFFFF">
<td> </td>
</tr>
<tr bgcolor="#FFFFFF">
<td> </td>
</tr>
</table>

方法2:把cellspacing、cellpadding、border均設置爲1,分別設定表格的邊框色和內部單元格的邊框色,注意使內部單元格的邊框色和網頁背景色或表格背景色相同,這樣內部的邊框看上去就和背景融爲一體了。舉例如下:
<table width="550" border="1" cellspacing="1" cellpadding="1" bordercolor="#666666">
<tr bordercolor="#FFFFFF">
<td> </td>
</tr>
<tr bordercolor="#FFFFFF">
<td> </td>
</tr>
</table>

方法3:用CSS定義表格的邊框寬度爲1個像素。先設置CSS類table1 { border-top: 0px; border-right: 0px; border-bottom: 0px; border-left:0px},然後在<table>標籤裏添加class="table1"。

方法4:做一個和表格等大的圖片作爲表格的背景,尤其當你想使表格邊線有倒角時。

Q: 怎樣打開一個全屏的IE窗口?
A: 用JavaScript來實現:
定義過程:
<script language="JavaScript">
<!--
function MachakFull(Ie,other){
x=screen.availWidth;
y=screen.availHeight;
target = parseFloat(navigator.appVersion.substring(navigator.appVersion.indexOf('.')-1,navigator.appVersion.length));
if((navigator.appVersion.indexOf("Mac")!=-1) &&(navigator.userAgent.indexOf("MSIE")!=-1) &&(parseInt(navigator.appVersion)==4))
window.open(other,"sub",'scrollbars=yes');
if (target >= 4){
if (navigator.appName=="Netscape"){
var MachakFull=window.open(other,"MachakFull",'scrollbars=yes','width='+x+',height='+y+',top=0,left=0');
MachakFull.moveTo(0,0);
MachakFull.resizeTo(x,y);}
if (navigator.appName=="Microsoft Internet Explorer")
window.open(Ie,"MachakFull","fullscreen=yes");
}
else window.open(other,"sub",'scrollbars=yes');
}
//-->
</script>

調用函數:
<a href="javascript:;" onClick="MachakFull('index.htm','')">點這裏打開一個全屏窗口</a>

Q: 怎麼做無邊的IE彈出窗口?
A: 這種窗口叫Chromeless Window,用一個DW插件就可以實現這種效果。
插件名稱:Chromeless Window 完美修正版
下載地址:[url]http://www.windstudio.net/[/url]

Q: 如何去除瀏覽器的“滾動條”?
A: <body scroll=no>
去掉水平滾動條:
<body style="overflow-x: hidden">
去掉豎直滾動條:
<body style="overflow-y: hidden">
Q: 怎麼讓下拉列表的鏈接在新窗口中顯示?
A: <select name="designlink" onChange="window.open(this.options(this.selectedIndex).value);">
<option selected>設計站點鏈接</option>
<option value=http://www.pcicp.com>蔫老虎網站</option>
<option value=http://bbs.pcicp.com>蔫老虎論壇</option>
<option value="[url]http://www.colorbird.com[/url]">技術性文章</option>
</select>

Q: 如何實現兩種不同的鏈接效果?
A: 在CSS中設置不同的類(CLASS),例如:
a.w1:link {text-decoration:none;color:#000066}
a.w1:visited {text-decoration:none;color:#333333}
a.w1:hover {color:#0000ff;text-decoration:underline}
a.w2:link {text-decoration:none;color:#000066; font-weight:bold}
a.w2:visited {text-decoration:none;color:#000066; font-weight:bold}
a.w2: hover{color:#FF0000; font-weight:bold}

不同的鏈接調用不同的CSS類即可,例如:
<a href="#" class="w1">123</a>
<a href="#" class="w2">456</a>

也可以直接在DW中操作,例如:
1、打開css style面版選擇use css selector
2、選擇a:link,定義樣式,接下來選擇a:hover再定義樣式
3、同樣方法再建立一個鏈接樣式a.w1(名稱可任意):link 和a.w1:hover
4、第二步所建立的樣式會以默認值自動寫入文檔,當需要使用第二種樣式時,選中鏈接文字,在右鍵快捷菜單中選擇新樣式(第三步建立的樣式,這裏爲w1),搞定。

Q: 怎樣用CSS改變鼠標指針樣式?
A: <span style="cursor:X"></span>
這裏選擇cursor(文本)作爲對象,還可以自己改爲其他的,如link等。
x可以等於=hand(手形)、crosshair(十字)、text(文本光標)、wait(顧名思義啦)、default(默認效果)、help(問號)、e-size(向右箭頭)、ne-resize(向右上的箭頭)、nw-resize(向左上的箭頭)、w-resize(向左的箭頭)、sw-resize(左下箭頭)、s-resize(向下箭頭)、se-resize(向右下箭頭)、auto(系統自動給出效果)

Q: 如何解決DW4不能使用五筆輸入法的問題?
A: 選擇菜單Edit→Preferences,在Category列表中選擇General,取消複選框Enable Double-Byte Inline Input既可。取消複選框Enable Double-Byte Inline Input後,所有的中文輸入法(包括五筆字型輸入法V4.5)均恢復正常!

Q: 怎麼樣讓在800*600分辨率下生成的網頁在1024*768下居中顯示?
A: 把頁面內容放在一個寬爲778的大表格中,把大表格設置爲水平方向居中。寬度定爲778是爲了在800*600下窗口不出現水平滾動條,你也可以根據需要進行調整。
如果要加快關鍵內容的顯示,也可以把內容拆開放在幾個豎向相連的大表格中~~
除了使用表格之外,你也可以把要居中的部分用<div align=center>和</div>標籤包圍起來。

Q: 怎麼實現在不同頁面間通過鏈接跳轉時,IE地址欄的顯示地址不變?
A: 用分幀實現,把其中一個frame的顯示高度(或寬度)定義爲0,這樣另外一部分通過鏈接跳轉的時候就是在分幀內部跳轉了,如果要跳出這個分幀,設置鏈接的target="_top"即可~~
例子:
<html>
<head>
<title>框架頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>

<frameset rows="0,*" frameborder="NO" border="0" framespacing="0">
<frame name="topFrame" scrolling="NO" noresize src="blank.htm" >
<frame name="mainFrame" src="main.htm">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
對不起,你的瀏覽器不支持框架的顯示。
</body>
</noframes>
</html>

Q: 絕對地址與相對地址?絕對定位與相對定位?
A: 絕對地址:形如[url]http://www.windstudio.net/index.htm[/url]file://d:/homepage/index.htm 這樣的地址,就是文件在網絡或本地的絕對位置;

相對地址:就是被鏈接文件相對與當前頁面的地址,比如說,鏈接和當前頁面同級的文件地址只要用“文件名”即可;鏈接當前頁面下級子目錄下的文件用“目錄名/文件名”;鏈接當前頁面上一級目錄下的文件用“../文件名”;鏈接同級但在另外一個子目錄中的文件用“../目錄名/文件名”;鏈接根目錄(你的網站的根目錄,並非硬盤根目錄)下的文件可以用“./文件名”的形式。

其實絕對和相對很容易理解的,相對就是有參照物的,絕對則是固定的。

爲什麼我們提倡使用相對地址呢?打個比方說吧,如果你有一個index.htm,裏面引用了images目錄的一些圖片,如果使用了相對地址,搬家的時候只需把原來這套東西全部上傳到新的空間就行了,因爲文件彼此之間的相對位置關係沒有改變,所以這些地址仍然是有效的。但如果插入圖片的時候使用了絕對地址,那空間地址一變,引用處的圖片路徑也要隨之改變。當然,有時也會用到絕對地址,例如友情鏈接別人的主頁等等。

相對定位也是一樣,如果是相對於一個單元格定位的層,單元格挪動到哪兒,層也就會到哪兒,結合這篇《關於層的相對於絕對定位》,就可以解決層很難適應多種分辨率的問題:
[url]http://www.windstudio.net/tech/show.asp?id=37[/url]

用辯證的觀點來看,其實絕對定位也是相對的,它和我們所說的相對定位的區別就在於,層的絕對定位是相對於瀏覽器的左邊界和上邊界而言,而層的相對定位是層相對於它的載體(表格或另外的層)而言~~

Q: 如何取消鏈接的下劃線?
A: 用CSS來實現:
<style type="text/css">
<!--
a:link { text-decoration: none}
a:visited { text-decoration: none}
a:hover { text-decoration: none}
-->
</style>
其中a:link 表示一般的鏈接樣式;a:visited 表示已訪問過的鏈接樣式;a:hover 表示鼠標經過時的鏈接樣式。text-decoration: none 表示無下劃線,text-decoration: underline 表示有下劃線。

如果三種鏈接狀態的樣式相同,也可以簡化爲:
<style type="text/css">
<!--
a { text-decoration: none}
-->
</style>

Q: 爲什麼在DW中把單元格高度設置爲1沒有效果?
A: DW生成表格時會自動在每個單元格里填充一個 代碼,就是空格代碼,如果有這個代碼的存在,你把該單元格寬度或高度設置爲1都沒有效果,實際預覽時該單元格會佔據10px左右的寬度。
如果把 代碼去掉,再把單元格寬度或高度設置爲1,就可以在IE中看到預期的效果。但是在NS(Netscape)中該單元格不會顯示,就好象表格中缺了一塊。在單元格內放一個透明的GIF圖,然後把它的寬度和高度都設置爲1,這樣就可以同時兼容IE和NS了。

Q: 爲什麼在DW中給單元格設置了背景圖有時在IE裏看不到?
A: 如果背景圖的設置出現在<tr>裏,在實際預覽時是看不到效果的,我覺得這應該算做DW的一個BUG,手工把<tr>中的背景圖相關設置代碼轉移到<td>中就好了。

Q: 如何使表格背景色在鼠標經過時改變?
A: <table width="100" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000">
<tr>
<td onmouseover="style.backgroundColor='#CCCCCC'" onmouseout="style.backgroundColor='#FFFFFF'" align="center" bgcolor="#FFFFFF">背景色改變</td>
</tr>
</table>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章