HTML技巧100例(三)
61. 制作動態頁面的步驟是怎樣的?
第一步：設計頁面及尋找頁面需要的材料；
第二步：完成普通頁面的制作，此時無須涉及動態主頁內容；
第三步：為頁面文字增加層疊樣式表，以改變文字顏色，鏈接等；
第四步：為頁面增加交互性內容，如cgi,javascirpt,activeX控件等，這是把頁面動態的關鍵；
第五步：測試動態頁面以適應更多瀏覽器；
第六步：發布動態頁面并在上面標明該頁是動態頁面(dhtml)。
62. 如何讓訪問者單擊加入站點書簽?
總希望訪問者能能把你的站點，加入到他們的書簽里，這里有個好辦法：
在<HEAD></HEAD>部分加入：
<script language="JavaScript"><!--
function addbookmark()
{window.external.AddFavorite("http://www.yy0736.com","夜鷹在線");}
//-->
</script>
然后在<BODY></BODY>部分加入：
<script language="JavaScript">
<!--
if(document.all != null){document.write("[＜a href=javascriptddbookmark()＞按一下，我將和您成為朋友。</a>]");}
// --></script>
63. 是否可以利用大寫體來書寫HTML標簽元素?
對于大多數HTML標簽元素,你可以利用大寫體或小寫體及兩者的混合體來書寫標簽元素。比如：
<html></html>和<HTML></HTML>同等有效。 但如果是特殊字符的標簽元素，你只能使用小寫體。比如版權的字符的標簽元素是：© 顯示?，如果寫成©，那么頁面將完全顯示?。
64. 如何在頁面利用單擊來關閉瀏覽窗口?
在<BODY></BODY>部分加入以下代碼：
<a href="javascript:window.close()">關閉窗口</a>
65.如何為頁面設置訪問口令?
有時候你需要為某一頁設置密碼，以讓合適的人進來。在＜head＞＜/head＞部分加入：
<script language="JavaScript"><!--var pd="" var rpd="bullbat" pd=prompt("請您輸入密碼:","")if(pd!=rpd){ alert("您的密碼不正確...")history.back()}else{alert("您的密碼正確!")window.location.href="flash.htm"}
// -->
</script>
在以上代碼中,"bullbat"就是正確的密碼。"flash.htm"是當輸入正確密碼后鏈接的頁面。這種設置口令的方法并不安全，因為只要訪問者查看頁面源代碼就能知道設置的密碼了。
66.如何為訪問者設置正確的軟件下載鏈接?
與其它鏈接一樣，都使用<a></a>標簽。但對于軟件下載鏈接，你需要這樣設置：
<a href="wbzx.zip">下載wbzx.zip (188kb)</a>
67. 如何刪除圖片鏈接的藍色邊框?
如果我們設置了圖片為一個鏈接，會發現圖片四周出現了藍色邊框。要刪除邊框，需要在圖片標簽里加上border="0"。如：<img src="dog.jpg" border="0">
68. 如何為鏈接提供一個按鈕?
<form ACTION="cnshell.htm" METHOD="GET">
<p><input TYPE="submit" VALUE="單擊這里" NAME="cnshell"></p>
</form>
69.如何知道站點的流量來至那里?
如果你擁有站點服務器的管理權，那么這是個很簡單的問題，查查服務器日志就可以了。但目前你沒有那權力，不過可以由第三方提供流量數據。易數是個不錯的選擇，鏈接到站點http://best.netease.com/申請，然后把代碼加入到頁面即可。當你想知道流量時，單擊易數圖標，在統計頁面中，單擊分析即可。
70.如何讓瀏覽器正確顯示word文件格式?
為了正確處理word等格式，你需要在HTML文件中設置好該文件類型，比如：
<meta http-equiv="Content-Type" content="Application/msword">
還有其它經常設置的文件類型：
Application/msword Microsoft Word Document application/pdf PDF Documentapplication/wordperfect6.0 WordPerfect 6.0 Documentapplication/zip ZIP archiveaudio/x-wav WAV audio formataudio/midi MIDI audio formataudio/x-pn-realaudio RealAudioimage/gif GIF image formatimage/jpeg JPEG image formatimage/png PNG image formattext/html HTML documenttext/plain Plain textvideo/mpeg MPEG video formatvideo/quicktime QuickTime video formatvideo/x-msvideo AVI video format
71.如何知道自己的圖片被其它網站使用?
如果你為自己站點的圖片起了一個獨特的名字，也就是不容易重名，比如tt124.jpg.那么鏈接到站點：http://www.altavista.com/，在搜索欄里輸入tt124.jpg.然后開始查找，如果有站點采用了tt124.jpg圖片，該站點就會被列出。AltaVista搜索引擎是一個以機器人搜尋為主的站點，它的機器人會不停地把整個網絡的頁面作上索引，所以，你可以在那里找到和你相關的任何東西，把你的名字的拼音輸輸入看看，找到什么啦。 72.如何縮進文本段落?
在<head></head>部分加入：
P { text-indent: 1% }
P標簽為HTML文本段落的標簽，1%為縮進的范圍。
72. 如何正確使用分隔線?
如果你使用FrongPage98，這里我再假設你需要分隔頁面左右兩部分內容，先利用表格工具拖出三個橫行表格，把內容分別放置到左右兩個單元，然后把中間的單元的寬度設置為1個Pixels,并填入所需要的顏色。你還需要把所有表格及單元的大小單位都設置為Pixels即可。
73.為什么有的站點下載很慢?
因為網頁用了過多的圖片，為了追求COOL的效果用了大量的Java Applet，過多使用<TABLE>，這些都是不可取的。對于圖片必須要用的壓縮再用，對于Java Applet絕對不用，它會讓機器配置低的訪問者的硬盤狂讀不止。對于需要的動態頁面，可利用CSS和JavaScript實現。
74. 如何讓字體顯示的更舒服?
這需要利用到CSS(層疊樣式表)，目前約定俗成的字體是：{ font-family:宋體(GB); font-size: 9pt; line-height: 16px }，把這段代碼加入到<head></head>之間。如：
<head>
<style>
<!--.font { font-family:宋體(GB); font-size: 9pt; line-height: 16px }--></style>
</head>
<body><p class="font">計算機世界報<br>網頁制作常見問題解答</p>
</body>
font-family:宋體(GB)是設置的字體；font-size: 9pt是字體的大小；line-height: 16px是文本行的上下間隔。
75. 如何讓網頁兼容IE和NN兩種瀏覽器?
完全的兼容是不可能的。目前IE瀏覽器占有量大大超過NN瀏覽器，所以你只需要兼容IE瀏覽器即可。當然你也可以制作兩套網頁，利用JavaScript來檢測不同瀏覽器以裝入相應網頁。
76. 如何正確使用字體?
設置文本字體是網頁制作中很重要的的環節，但因為并不是每一位訪問者都有你設置的字體，所以盡量使用操作系統默認的字體宋體，黑體，楷體。對于其它類型字體可以用圖形方式實現。 78.如何制作繁體版本網頁?
如果你使用E-Port的網頁作坊工具制作頁面，那就可以利用工具菜單下的GB轉BIG5來把簡體網頁變成繁體網頁。如果你用其它工具也可以利用網頁作坊的GB轉BIG5來制作繁體網頁，利用網頁作坊打開頁面，點選工具菜單下的GB轉BIG5轉換網頁并保存。要注意的是，你需要把原<meta http-equiv="Content-Type" content="text/html; charset=gb2312">中的charset=gb2312改為charset=big5，這樣，訪問者的瀏覽器就會自動識別了。(E-Port的網頁作坊下載地址：http://e-port.soim.net/)
77. 利用水平線(HR)制作垂直線?
插入HR很簡單：<hr size="1">。如何讓它垂直呢，更簡單：<hr size="100" width="1">
78. 與其它站點交換連接需要什么?
當然，你首先要有一個個人站點，然后準備好兩個站點LOGO。一般來說，400x40和88x31兩種LOGO是必需的，其它也可以準備一個100x31的LOGO。400x40的LOGO用于象網盟這樣的廣告交換站點，88x31和100x31用于個人站點之間的交換。
79. 如何讓下拉式菜單中的鏈接來打開一個新的窗口?
先把下拉式菜單設置好，如：
<form method="POST">
<select name="D1" size="1">
<option value="http://www.163.com/">網易</option>
<option value="http://www.suho.com/"＞搜狐</option></select>
<input type="submit" value="確定" name="B1"><input type="reset" value="重置"name="B2"></p></form>
然后把<select name="D1" size="1">改為
<select onChange="javascript:window.open(this.options[this.selectedIndex].value)">即可。
80. 如何正確對齊文本？
有時，我們需要對一段文本的左右，上下的邊距(指文本至瀏覽器的距離)加以指定以使文本正確對齊，CSS(層疊樣式表)提供這樣的功能：
在<head></head>中加入
<style>
<!--.tt { margin-left: 68px; margin-right: 70px; margin-top: 69px; margin-bottom: 71px }
-->
</style>
.tt為類名，以便你在HTML標簽中應有。而在{ }中的屬性及指分別為邊距左，右，上，下的距離。當它們的邊距都相等時比如都是60px，可以簡寫為：.tt { margin: 60px }.
當在文本中引用了該CSS，你會發現文本對的非常整齊。
81.如何正確使用圖片格式?
目前在網絡上的圖片準標準格式為JPG和GIF。當圖片顏色數很多時，就選擇JPG，它的壓縮比高，而GIF適合顏色數少的圖片。
82. 如何在網頁上顯示訪問者系統信息?
把以下代碼加入到<Body></Body>:
<script Language="JavaScript">
document.write(navigator.appVersion)
</script>
83. 如何正確放置JavaScript?
JavaScript為動態主頁的實現工具，一般來說JavaScript放置于<head></head>或者<body></body>之間。對于放置在<body></body>之間的JavaScript，你需要把它放置在適當位置。如果你用FrontPage98工具，先把光標移到想放置JavaScript的地方，然后選擇Insert/Advanced/script，在打開的文本框中輸入JavaScript，這樣就放置好了。預覽頁面，JavaScript出現在你放置的地方。你也可以把JavaScript放置到表格中，這樣可以精確定位。
84. 個人站點需要那些交互功能?
交互是網絡的魅力所在，作為個人站點也需要這些交互性的工具，以便和訪問者隨時進行溝通。以下是目前個人站點必備的交互工具：
留言板-讓訪問者給你的站點提提意見;
論壇-討論某一個特定主題的地方，它和留言板的區別是留言板可以包含任何內容;
調查表單-利用個人站點，你可以對某一問題進行調查，然后看看各意見的支持率;
訂閱表單-通過郵件給訂閱者提供站點的更新信息;
聊天室-一個即時的對話場所，特別可以對一個特定主題組辦一個網絡討論;
搜索引擎-當站點內容過多時，搜索引擎可以讓訪問者快速找到想看的內容;
85. 如何點擊一個鏈接同時在兩個frame 內變化?
對于一個由topFrame、leftFrame、mainFrame 構成的頁面，如果想在leftFrame 中點擊鏈接，同時在其他兩個frame 內變化，代碼如下：
<a href="x1.htm" οnclick="parent.topFrame.location.href=''x2.htm''" target="mainframe">
90.前進、后退和刷新
<a href="javascript:history.back()">后退</a>
<a href="javascript:history.go()">前進</a>
<a href="javascript:location.reload()">刷新</a>
86. 打印按鈕
<form>
<input name="Print" onClick="window.print();
return false" type="button" value="Print">
</form>
87. 查看源碼按鈕
<input type=button name="view" value="查看源碼" onClick=''window.location="view-source:" +window.location.href'' style="font-size:9pt">
88. 如何去掉頁面滾動條?
在body 中加入樣式表控制，代碼如下：
<body bgcolor="#000000" leftmargin="0" topmargin="0"
style="overflow-x: hidden; overflow-y: hidden; width: 100%">
89.如何在Dreamweaver 插入空格？
在FrontPage 中，插入空格只需要在選定的文本前按下鍵盤空格鍵就可以了，但在Dreamweaver 中不行。空格的標簽是可以開啟HTML Source 視窗直接加入標簽，也可以在指定的文本前，按下Ctrl+Shift+Space。
90. 如何在DW中設置Flash 動畫的背景透明？
在SWF文件的屬性面板中，點parameters，添加參數wmode，值選擇transparent；
或者直接修改網頁的代碼，在標志SWF文件屬性的代碼中添加：
<param name="wmode" value="transparent">
91. 如何正確使用分隔線?
這里我再假設你需要分隔頁面左右兩部分內容，先利用表格工具拖出三個橫行表格，把內容分別放置到左右兩個單元，然后把中間的單元的寬度設置為1個pixels(像素)，并填入所需要的顏色。你還需要把所有表格及單元的大小單位都設置為pixels 即可。
92. 如何讓瀏覽器正確顯示word 文件格式?
為了正確處理word 等格式，你需要在HTML文件中設置好該文件類型，比如：
<meta http-equiv="Content-Type" content="application/msword"> 還有其它經常設置的文件類型：
application/msword Microsoft Word Document
application/pdf PDF Document
application/wordperfect6.0 WordPerfect 6.0 Document
application/zip ZIP archive
audio/x-wav WAV audio format
audio/midi MIDI audio format
audio/x-pn-realaudio RealAudio
image/gif GIF image format
image/jpeg JPEG image format
image/png PNG image format
text/html HTML document
text/plain Plain text
video/mpeg MPEG video format
video/quicktime QuickTime video format
video/x-msvideo AVI video format
93. 如何實現一個頁面兩種顏色鏈接變化?
在CSS中設置不同的CLASS類，如下例所示：
a.r:link{text-decoration:none;color:#000066}
a.r:visited{text-decoration:none;color:#333333}
a.r:hover{color:#0000ff;text-decoration:underline}
a.r1:link{text-decoration:none;color:#000066; font-weight:bold}
a.r1:visited{text-decoration:none;color:#000066; font-weight:bold}
a.r1:hover{color:#FF0000; font-weight:bold}
a.r2:link{text-decoration:none;color:#ffffff}
a.r2:visited{text-decoration:none;color:#ffffff}
a.r2:hover{color:#000000;}
94. DW中如何準確地定位層？
就目前來說，還沒有好的方法實現非常精確地定位使得層在編輯中和瀏覽中的位置不變，即便是使用“標尺”和“網格”輔助定位，仍然會有差別，而且在IE和NC中顯示的層的位置會有偏差，大約偏差3個象素。最好的方法是對照瀏覽器的顯示來調整層的位置。
95. 怎樣把別人網頁上的背景音樂保存下來?
A:瀏覽該網頁后,在你的 Windows\Temporary Internet Files 文件夾下可以找到該背景音樂的緩存文件，拷貝出來即可使用。如果還是找不見該文件，可以打開網頁的源文件，找到音樂文件的 URL 路徑，用“螞蟻”等 FTP 軟件進行下載。
96. 避免有人從你分幀的主頁的幀中徑直進入網站,而不是從 index.htm 中進入?
A:在幀中的網頁的<head></head>之間加入以下腳本代碼:
<Script language="JavaScript">
if (top==self)
self.location.href="index.htm";
</Script>
這樣,當有人從幀中進入網站時,就會自動重定向到主頁文件 index.htm。
97. IE5.0 的部分快捷鍵：
A:打開查找功能：Ctrl+F
關閉瀏覽器窗口：Ctrl+W
打開地址欄下拉列表框：F4
刷 新：F5
將當前Web頁保存到收藏夾列表：Ctrl+D
打開當前 IE 窗口的一個拷貝：Ctrl+N
停止下載當前網頁：Esc
光標迅速移動到網頁的開頭：Home
光標迅速移動到網頁的尾部：End
打開新的地址鍵入窗口：Ctrl+O
打開收藏夾：Ctrl+I
打開歷史記錄文件夾：Ctrl+H
打開瀏覽器設定的默認主頁：Alt+HOME
98. 如何使網頁在不同分辯率下都全屏鋪開？
用表格（不要使用層），做好內容后，將最外表格設置寬為100%，再適當調整。
99. 如何定時關閉網頁？
在head區加入
<SCRIPT LANGUAGE="javascript">
setTimeout('window.close();',2000);
</SCRIPT>
表示兩秒后自動關閉窗口。
100. 如何實現不提示，直接關閉窗口？
(1) 直接關閉，無任何提示：
在<body></body>內加以下代碼：
<object id=closes type="application/x-oleobject"
classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">
<param name="Command" value="Close">
</object>
在要顯示“關閉窗口”文字或圖片或按鈕的位置加以下代碼：
<a href="#" onClick="closes.Click();"><img name="bu1" src="bu1.gif" width="31" height="31" border="0" alt="關閉窗口"></a>
<a href="#" onClick="closes.Click();">關閉窗口</a>
關閉窗口
<input name="button" type=button id="btn"
onClick="closes.Click();" value="關閉窗口">
(2) 有提示框顯示是否確認關閉：
<a href="javascript:window.opener=null;window.close();">內容</a>
關閉窗口
<a href="javascript:window.close();">關閉窗口</a>
關閉窗口
或關閉按鈕：
<input name="button" type=button id="btn"
onClick="javascript:self.close();" value="關閉窗口">
轉載于:https://www.cnblogs.com/guodapeng/archive/2007/11/13/958319.html
總結
以上是生活随笔為你收集整理的HTML技巧100例(三)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 病毒式营销案例：多芬让“病毒”的诱惑自发
- 下一篇： CSS 多浏览器兼容又一方案