?? 網頁設計中的一些技巧.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0047)http://www.shanxiwindow.net/teaching/file03.htm -->
<HTML><HEAD><TITLE>培訓教程-網頁設計中的一些技巧</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2873" name=GENERATOR>
<STYLE type=text/css>A:link {
FONT-SIZE: 12pt; COLOR: #2361a1; TEXT-DECORATION: underline
}
A:visited {
FONT-SIZE: 12pt; COLOR: #2361a1; TEXT-DECORATION: underline
}
A:active {
FONT-SIZE: 12pt; COLOR: #2361a1; TEXT-DECORATION: none
}
A:hover {
FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: #ff0000; TEXT-DECORATION: none
}
.p9 {
FONT-SIZE: 9pt; COLOR: #000000; FONT-FAMILY: "宋體"
}
</STYLE>
</HEAD>
<BODY bgColor=#ffffff>
<DIV align=center>
<CENTER>
<TABLE cellSpacing=1 width="80%" bgColor=#0080ff border=0>
<TBODY>
<TR>
<TD width="100%" bgColor=#ffffff><FONT size=3>
<H1 align=center></FONT>網頁設計中的一些技巧<FONT size=3></H1>
<HR SIZE=1>
<BLOCKQUOTE>
<BLOCKQUOTE>
<BLOCKQUOTE>
<P>◆.<A
href="http://www.shanxiwindow.net/teaching/file03.htm#a1">解決網頁中亂碼、錯位問題</A></P>
<P>◆.<A
href="http://www.shanxiwindow.net/teaching/file03.htm#a2">給你的超級鏈接來點個性</A></P>
<P>◆.<A
href="http://www.shanxiwindow.net/teaching/file03.htm#a3">如何實現網頁自動刷新</A></P>
<P>◆.<A
href="http://www.shanxiwindow.net/teaching/file03.htm#a4">去除圖像的鏈接外框</A></P>
<P>◆.<A
href="http://www.shanxiwindow.net/teaching/file03.htm#a5">如何檢驗鏈接的有效性</A></P>
<P>◆.<A
href="http://www.shanxiwindow.net/teaching/file03.htm#a6">表格的使用（背景色、邊框、間距的應用）</A></FONT></P>
<P><FONT size=3>◆.<A
href="http://www.shanxiwindow.net/teaching/file03.htm#a7">給你的鼠標來點個性</A></FONT></P>
<P><FONT size=3>◆.<A
href="http://www.shanxiwindow.net/teaching/file03.htm#a8">字的陰影</A></FONT></P>
<P><FONT size=3>◆.</FONT><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a9">改變鏈接的說明文字</A></P>
<P><FONT size=3>◆.<A
href="http://www.shanxiwindow.net/teaching/file03.htm#a90">關閉窗口</A></FONT></P>
<P align=right><FONT color=red size=3><A
href="http://www.shanxiwindow.net/teaching/index.htm">首頁</A></FONT></P></BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE></TD></TR></TBODY></TABLE></CENTER></DIV>
<P> </P>
<DIV align=center>
<CENTER>
<TABLE height=2851 cellSpacing=1 cellPadding=9 width="80%" bgColor=#0080ff
border=0>
<TBODY>
<TR>
<TD width="100%" bgColor=#ffffff height=154><BR><A name=a1></A><FONT
size=3>◆.解決網頁中亂碼、錯位問題</FONT>
<UL>
<LI><FONT size=3>設置</FONT><FONT
color=#000000>文字類型為GB2312，</FONT><meta http-equiv="<FONT
color=#ff0000><STRONG>Content-Type</STRONG></FONT>" content="<FONT
color=#ff0000><STRONG>text/html; charset=gb2312</STRONG></FONT>">；
<LI><FONT color=#000000>設置輸入法，漢字、空格在中文輸入狀態下進行；</FONT>
<LI><FONT color=#000000>如果需要強制換行，使用“shift”鍵和“enter”鍵組合；</FONT> </LI></UL>
<P align=right><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a0">top</A> </P></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff height=737><BR><A name=a2></A><FONT
size=3>◆.給你的超級鏈接來點個性</FONT>（適用于IE4<FONT size=3>.</FONT>0以上；不適用于NETSCAPE）
<P><html><BR><head><BR><title>歡迎光臨中國山西之窗</title><BR><STRONG><FONT
color=#ff0000><style
type="text/css"><BR><!--<BR><BR> </FONT><FONT
color=#008000>A</FONT><FONT color=#ff0000> </FONT><FONT
color=#ff00ff> {</FONT><FONT color=#000000> text-decoration: none;
</FONT></STRONG></P>
<P><FONT color=#000000><STRONG> color: #000080; </STRONG></FONT></P>
<P><FONT color=#000000><STRONG> font-family: "宋體";
</STRONG></FONT></P>
<P><STRONG><FONT color=#000000> font-size: 9pt</FONT><FONT
color=#008000>}</FONT><FONT color=#ff0000><BR><BR> </FONT><FONT
color=#008000>A:hover </FONT><FONT color=#ff00ff>{</FONT><FONT
color=#000000>text-decoration: underline; </FONT></STRONG></P>
<P><FONT color=#000000><STRONG> color: #FF0000; </STRONG></FONT></P>
<P><FONT color=#000000><STRONG> font-family: "宋體";
</STRONG></FONT></P>
<P><STRONG><FONT color=#000000> font-size: 9pt</FONT><FONT
color=#ff00ff> }</FONT></STRONG></P>
<P><STRONG><FONT color=#ff0000> </FONT><FONT
color=#008000>A:visited</FONT><FONT color=#0000ff> </FONT><FONT
color=#ff00ff>{</FONT><FONT color=#0000ff> </FONT><FONT
color=#000000>font-family: "宋體"; </FONT></STRONG></P>
<P><FONT color=#000000><STRONG> color: #990066;
</STRONG></FONT></P>
<P><STRONG><FONT color=#000000> font-size: 9pt</FONT><FONT
color=#0000ff> </FONT><FONT color=#ff00ff>}</FONT></STRONG></P>
<P><STRONG><FONT color=#ff0000> </FONT><FONT
color=#008000>.p9</FONT><FONT color=#0000ff> </FONT><FONT
color=#ff00ff>{ </FONT><FONT color=#000000>font-family: "宋體";
</FONT></STRONG></P>
<P><FONT color=#000000><STRONG> color: #808080; </STRONG></FONT></P>
<P><STRONG><FONT color=#000000> font-size: 9pt </FONT><FONT
color=#ff00ff>}</FONT><FONT
color=#ff0000><BR><BR>--><BR></style></FONT></STRONG></P>
<P></head></P>
<P><body></P>
<P><p class=p9>山西省網絡管理中心-中國山西之窗</p></P>
<P></body></P>
<P></html></P>
<P>關于<FONT color=#ff0000><STRONG>.p9</STRONG></FONT>字體顯示效果的一點說明：
<UL>
<LI>
<P class=p9><STRONG><FONT
color=#008000>（使用樣式表，適用于IE、NETSCAPE4。0以上）：</FONT><BR></STRONG><BR> 培訓目的：在理解網絡的基礎上，通過自己動手實際操作，加深理解，學會網絡規劃、設計，學會網頁設計、制作和美化，并能熟練地通過IE4上網，在網上查找自己所需的資料，使學員在實際操作中，融會貫通。</P>
<LI><SMALL><FONT
color=#008000><STRONG>（不使用非樣式表，使用字縮小屬性-----適用于IE、NETSCAPE3。0以上）：</STRONG></FONT></SMALL><BR><BR><SMALL> 培訓目的：在理解網絡的基礎上，通過自己動手實際操作，加深理解，學會網絡規劃、設計，學會網頁設計、制作和美化，并能熟練地通過IE4上網，在網上查找自己所需的資料，使學員在實際操作中，融會貫通。</SMALL>
</LI></UL>
<P align=right><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a0">top</A> </P></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff height=202><A name=a3></A><FONT
size=3><BR>◆.如何實現網頁自動刷新</FONT>
<P>在頁面的頭域中寫入下面一行：<BR><BR> <META http-equiv="<STRONG><FONT
color=#ff0000>refresh</FONT></STRONG>" content="<FONT
color=#ff0000><STRONG>6;
URL=index.htm</STRONG></FONT>"><BR><BR> 可以根據你的需要來調整封面頁停留的時間。在這個例子中，我們把它設為6秒（就是上述代碼中的6），這個時間只是一個近似值。原則是能確保訪問者有足夠的時間來閱讀網頁。</P>
<P align=right><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a0">top</A> </P></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff height=141>
<P><A name=a4></A><FONT size=3>◆.去除圖像的鏈接外框</FONT></P>
<P><FONT size=3>在圖象的"image proprities"中選擇“appearance”，將“ border
thickness”的值設置為“<FONT color=#ff0000><STRONG>0</STRONG></FONT>”；</FONT></P>
<P align=right><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a0">top</A> </P></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff height=685><A name=a5></A><FONT
size=3><SPAN class=text style="COLOR: rgb(98,98,98)">
<P>◆.如何檢驗鏈接的有效性</P>
<P><FONT
color=#000000>檢驗Web頁面鏈接有效性的快捷方法<BR> 如果網頁中的鏈接點比較多，就會在維護中遇到很多問題。首先，一個鏈接點的
URL名可能很長，
我們只有保證一個字母都不敲錯才能正確進行鏈接，無疑這對輸入的要求是很高的。另外，時間一長，某些站點已不復存在，過去有效的鏈接已經變成了“死鏈接”，如果靠人工定期一個個站點去訪問以確保鏈接正確，那幾乎是不可能的。這是個讓人為難的問題。而利用FrontPage98就能有效地解決這個問題:
<BR><BR> 首先啟動FrontPage 98并打開欲檢驗的Web站點(就在本地硬盤相應文件夾中) 。在左邊Views(視圖)
區選擇Hyperlink
Status(超鏈接狀態)視圖，此時屏幕右半邊便轉變為超鏈接狀態視圖。右邊窗口中會列出該站點網頁中所有超鏈接的狀態表。最上一行是項目欄，共計有“Status(狀態)
”、“Hyperlink(超鏈接點) ”、“In Page (所在頁) ”、“Page Title(頁面標題)”、“Modified
by(修改人)”五項。最重要的“狀態” 一項共有三種值，黃球+Unknown表示尚未檢查，紅球+Broken表示斷鏈，綠球+Ok表示有效鏈。
點擊上方Status項目欄邊框，可以按狀態值排列超鏈接點，按此功能可將所有短鏈列于最前方， 以便于修改。當然，根據需要也可按“In Page”
等項目排列鏈接點，進行管理。如果只檢查一部分鏈接點，其選擇操作也在此窗口中進行。
選擇排列在一起的鏈接點，按住“Shift”，用上下方向鍵選擇即可；選擇分立的鏈接點，則要求按住“CTRL”鍵，用鼠標左鍵單擊欲選鏈接。
<BR><BR> 剛開始所有的超鏈接點狀態都為 “Unknown” ， 要進行斷鏈檢查， 請先連上 Internet，
選擇Tools菜單下“Verify Hyperlinks...”工具。系統會彈出對話框，詢問你要進行何種操作(共三種選擇) 。“Verify all
hyperlinks”是檢查本站點所有的鏈接點，“Resume verification”用于恢復檢查(檢查工作意外中斷后恢復操作)
，“Verify selected
hyperlink(s)”只檢查事先選定的一個或一組文件。選擇一種工作方式，點擊右方OK按鈕，檢驗工作便正式開始了。
<BR></FONT><BR><FONT color=#000000> 自動檢查完畢，可能你會發現一些標為紅色的短鏈。下面就需要修正這些鏈接點了，
操作起來也相當的方便。 選中欲修正的鏈接，點擊鼠標右鍵，彈出菜單中會有 “Edit Hyperlink...”和“Edit
Page”這兩項。選擇“Edit
Hyperlink...”一項，系統會詢問將無效鏈接修改為哪一地址，比如FrontPage發現http://www.micorsoft.
com為無效鏈接， 我們發現為輸入時錄入錯誤，此時修改為http: //www.microsoft.
com就對了。如果錯誤不易發覺如何修改，那邊可選用“Edit
Page”一項，仔細研究該程序，以期發現問題之所在，實在不行就刪掉該鏈接。</FONT></SPAN></FONT></P>
<P align=right><A
href="http://www.shanxiwindow.net/teaching/file03.htm#a0">top</A> </P></TD></TR>
<TR>
<TD width="100%" bgColor=#ffffff height=829><A name=a6></A>
<P><FONT size=3>◆.表格的使用（背景色、邊框、間距的應用）<BR></FONT>
<UL>
<LI><STRONG><FONT color=#008000>實現圖文效果</FONT></STRONG>（適用于IE4<FONT
size=3>.</FONT>0以上；不適用于NETSCAPE）： </LI></UL>
<DIV align=center>
<CENTER>
<TABLE borderColor=#ff8000 cellPadding=5 width="80%" border=1>
<TBODY>
<TR>
<TD width="50%">
<P align=center>山西之窗</P></TD>
<TD width="50%">
山西之窗</TD></TR></TBODY></TABLE></CENTER></DIV>
<P> </P>
<DIV align=center>
<CENTER>
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0 width="80%"
bgColor=#dfdfff borderColorLight=#c0c0c0 border=1>
<TBODY>
<TR>
<TD align=middle width="40%">
<P align=center>中國山西之窗 </P></TD>
<TD align=middle width="17%">山西資訊</TD>
<TD align=middle width="23%"> </TD></TR></TBODY></TABLE></CENTER></DIV>
<P>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -