PC宣傳站
1、為(wèi)何使用表格排版是不明智的(de)？
表格之所以存在于 HTML 中，隻是為(wèi)了一(yī)個目的(de)：顯示表格狀的(de)數據。然而此後的(de) border="0" 使得設計師可(kě)以将圖片和(hé)文本放在這無形的(de)網格中。迄今為(wèi)止，表格仍然主導着視(shì)覺豐富的(de)網站的(de)設計方式，但它卻阻礙了一(yī)種更好的(de)、更有親和(hé)力的(de)、更靈活的(de)，而且功能更強大的(de)網站設計方法。
2、概覽：這對我有什麽用處？
我們将告訴你這樣一(yī)種工作方式，它會：
使你的(de)頁面載入得更快
降低(dī)你的(de)流量費用
讓你在修改設計時更有效率而代價更低(dī)
幫助你的(de)整個站點保持視(shì)覺的(de)一(yī)緻性
讓你的(de)站點可(kě)以更好地(dì)被搜索引擎找到
使你的(de)站點對浏覽者和(hé)浏覽器更具親和(hé)力
在世界上越來越多人采用 Web 标準時，它還能 提高(gāo)你的(de)職場競争實力 (事實上也就是降低(dī)失業的(de)風險)。
3、表格帶來的(de)問題
把格式數據混入你的(de)內(nèi)容中。
這使得文件的(de)大小無謂地(dì)變大，而用戶訪問每個 頁面時都必須下載一(yī)次這樣的(de)格式信息。
帶寬并非免費。
這使得重新設計現有的(de)站點和(hé)內(nèi)容極為(wèi)消耗勞力 (且昂貴)。
這還使我們保持整個站點的(de)視(shì)覺的(de)一(yī)緻性極難，花費也極高(gāo)。
基于表格的(de)頁面還大大降低(dī)了它對殘疾人和(hé)用手機或 PDA 浏覽者的(de)親和(hé)力。
4、過渡性的(de)設計
使用 margin 和(hé) padding 來代替多餘的(de)表格單元和(hé)間隔 GIF。
使用 link 和(hé) @import 來載入樣式。前者用于早期浏覽器，後者給現在的(de)浏覽器。
<link href="basic.css" rel="stylesheet" type="text/css">
<style type="text/css" media="screen"><!--
@import url(modern.css) screen;
--></style>
5、結構化标記：所寫即所想，所想即所寫
即便書寫 CSS 很簡單，使用 CSS 來排版卻真的(de)需要一(yī)種和(hé)我們以往有些不同的(de)思維方式。
我們排版時考慮的(de)不是“這個東西放在這兒，那個東西放在那兒”，而是頁面中信息的(de)類别和(hé)信息的(de)結構。
我們用 <h1> 标記來标示最重要的(de)頭條；次一(yī)級的(de)條目則用 <h2> 來标記，以此類推；而段落則放在 <p> 标記中。
這就是我們稱之為(wèi)“結構标記”或“語義标記”的(de)東西。
你的(de)內(nèi)容将不放在表格和(hé)表格元素中，取代它們的(de)是 div 元素。還要給你的(de) div 元素安排一(yī)個 id 或 class，不過這是為(wèi)了描述它們的(de)內(nèi)容或功能，而非它們的(de)外觀。
當你把某個對象設為(wèi)斜體時，大概要麽就是想強調它，要麽是想 引用某個書中标題吧(ba)？ 如(rú)果是前者，應該用 <em>；如(rú)果是後者，其實得用 <cite>。
如(rú)果某個對象被标記為(wèi)粗體，事實上它應該被标記的(de)是， <strong>。
如(rú)果你希望在某處添加一(yī)個換行，這大概是開始了一(yī)個新的(de)開頭。如(rú)果不是開頭，會不會是某種在你的(de)站點中出現過的(de)class (類型)？在上面兩種情況下，你都應該用 CSS 替換 <br>。
.foo {display:block}
考慮你需要導航的(de)內(nèi)容是一(yī)些無序的(de)鏈接這種情況：
用 <ul> 标簽來編輯它們。
link1
link2
link3
link4
link5
水平導航條
我們可(kě)以用 CSS 來控制這個列表顯示在網頁上的(de)外觀。
通過使用 display:inline 我們可(kě)以創建水平導航條。
link1
link2
link3
link4
link5
這是上面這個導航條用到的(de)代碼：
#nav1{
margin-top: 1em;
margin-bottom: 0.5em;
}
#nav1 ul {
background-color: silver;
text-align: center;
margin-left: 0;
padding-left: 0;
border-bottom: 1px solid gray
}
#nav1 li {
list-style-type: none;
padding: 0.25em 1em;
border-left: 1px solid white;
display: inline
}
#nav1 li:first-child {
border: none;
}
垂直導航條
link1
link2
link3
link4
link5
這是垂直導航條的(de)代碼：
#nav2 {
background-color: silver;
border: solid 1px gray;
width: 8em
}
#nav2 ul {
list-style-type: none;
margin: 0;
padding: 0;
border: none
}
#nav2 li {
margin: 0;
padding: 0.25em 0.5em 0.25em 1em;
border-top: 1px solid gray;
width: 100%;
display: block
}
html>body #nav2 li {
width: auto;
}
#nav2 li:first-child {
border: none
}
6、從玩弄表格技巧到遵循 Web 标準：通盤考慮
如(rú)果你已經把站點的(de)內(nèi)容分好了類，那麽是時候分析每個頁面，把它們按照邏輯關系進行分解了。
主導航條
子(zǐ)導航條
頁眉與頁腳
內(nèi)容
相關信息
其他
注意分析由嵌套表格、空白分隔符和(hé)邊框元素組成的(de)表格結構 (因為(wèi)我們希望把它們替換為(wèi)用 div 标記組織的(de)那種簡單得多的(de)表格結構)。
一(yī)旦你分析好頁面的(de)結構，就可(kě)以着手揭開表象，分析你現在的(de)頁面代碼中可(kě)以轉換成結構化标記的(de)那些地(dì)方。
作為(wèi)一(yī)個完美主義者，消滅所有的(de) <font> 标記和(hé)間隔 GIF 吧(ba)！
同樣的(de)，一(yī)并搞定 <b> 和(hé) <br> 标記。
去(qù)除表格中的(de)那些外觀标記 (bgcolor, background, 等等)。
把純粹用來表示外觀的(de)那些 CSS 調用 (比如(rú) <span class="header">) 改成結構化的(de)标記。
7、把描述外觀的(de)标記改為(wèi)描述結構的(de)标記
你可(kě)以使用“查找加替換”(或者正則表達式)，不過最好的(de)方法還是在浏覽器裏打開這個頁面，然後把文本複制粘貼到你的(de) HTML 編輯器裏。
關鍵還是要用結構化的(de)方式來思考！僅僅把 <b> 标記替換為(wèi) <strong> 是遠遠不夠的(de)。
最重要的(de)條目是哪個？用 <h1> 來标記它。次要一(yī)點的(de)就用 <h2>，依此類推。用 <p> 來标記段落。把導航條标記為(wèi)無序列表。
選定一(yī)個 DOCTYPE 來使用。(www.nfrencai.com推薦 XHTML tra nsitional，除非你是此道(dào)高(gāo)手，否則别用 XHTML strict。)
8、把你的(de)頁面合理(lǐ)分布在的(de) div 中
把你的(de)主導航條放在一(yī)個 id 屬性設為(wèi) mainnav 的(de) div 中，子(zǐ)導航條則放在一(yī)個 id 或者 class 是 subnav 的(de) div 中。而頁腳類似這個形式：<div id="footer">，至于整個頁面，它被放在 <div id="content"> 裏邊。
即便現在它還不怎麽讨人喜歡，但隻要你開始給樣式表添加規則，它就會馬上變得可(kě)愛起來。
9、是開始自(zì)己編寫 CSS 的(de)時候了
首先，給每個 div 設置一(yī)個邊界。例如(rú)： div {border: 1px dotted gray; padding: .5em} 這可(kě)以幫助你完完整整地(dì)看到裏邊的(de)內(nèi)容，也不再需要卷動屏幕了。
首先為(wèi)以定義的(de)元素編寫 CSS (<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, 等等。)
盡量運用上下文相關或者有遞歸下降結構的(de)選擇符。這可(kě)以使得你的(de)标記更清晰。例如(rú)：#subnav li {border: 1px solid black; padding: .5em; display: inline} 将能夠隻能影響你的(de)子(zǐ)導航欄的(de) div 中的(de)列表項。
在盡可(kě)能多的(de)浏覽器下進行測試，畢竟你可(kě)以讓朋(péng)友幫助你用它們自(zì)己的(de)浏覽器測試。
相關搜索：随州網站建設
