采用DIV+CSS布局的好處
2023-12-30 分類： 網(wǎng)站建設(shè)
1、簡介：為何使用表格排版是不明智的？
表格之所以存在于 HTML 中，只是為了一個目的：顯示表格狀的數(shù)據(jù)。然而此后的 border="0" 使得設(shè)計師可以將圖片和文本放在這無形的網(wǎng)格中。迄今為止，表格仍然主導(dǎo)著視覺豐富的網(wǎng)站的設(shè)計方式，但它卻阻礙了一種更好的、更有親和力的、更靈活的，而且功能更強大的網(wǎng)站設(shè)計方法。
2、概覽：這對我有什么用處？
我們將告訴你這樣一種工作方式，它會：
使你的頁面載入得更快 降低你的流量費用 讓你在修改設(shè)計時更有效率而代價更低 幫助你的整個站點保持視覺的一致性 讓你的站點可以更好地被搜索引擎找到 使你的站點對瀏覽者和瀏覽器更具親和力 在世界上越來越多人采用 Web 標(biāo)準(zhǔn)時，它還能 提高你的職場競爭實力 (事實上也就是降低失業(yè)的風(fēng)險)。
3、表格帶來的問題
把格式數(shù)據(jù)混入你的內(nèi)容中。 這使得文件的大小無謂地變大，而用戶訪問每個 頁面時都必須下載一次這樣的格式信息。 帶寬并非免費。 這使得重新設(shè)計現(xiàn)有的站點和內(nèi)容極為消耗勞力 (且昂貴)。 這還使我們保持整個站點的視覺的一致性極難，花費也極高。 基于表格的頁面還大大降低了它對殘疾人和用手機或 PDA 瀏覽者的親和力。
4、過渡性的設(shè)計
使用 margin 和 padding 來代替多余的表格單元和間隔 GIF。
使用 link 和 @import 來載入樣式。前者用于早期瀏覽器，后者給現(xiàn)在的瀏覽器。
<link href="../../basic.CSS" rel="stylesheet" type="text/CSS">
<style type="text/CSS" media="screen"><!-- @import url(modern.CSS) screen; --></style>
5、結(jié)構(gòu)化標(biāo)記：所寫即所想，所想即所寫
即便書寫 CSS 很簡單，使用 CSS 來排版卻真的需要一種和我們以往有些不同的思維方式。
我們排版時考慮的不是“這個東西放在這兒，那個東西放在那兒”，而是頁面中信息的類別和信息的結(jié)構(gòu)。
我們用 <h1> 標(biāo)記來標(biāo)示最重要的頭條；次一級的條目則用 <h2> 來標(biāo)記，以此類推；而段落則放在 <p> 標(biāo)記中。
這就是我們稱之為“結(jié)構(gòu)標(biāo)記”或“語義標(biāo)記”的東西。
你的內(nèi)容將不放在表格和表格元素中，取代它們的是 div 元素。還要給你的 div 元素安排一個 id 或 class，不過這是為了描述它們的內(nèi)容或功能，而非它們的外觀。
當(dāng)你把某個對象設(shè)為斜體時，大概要么就是想強調(diào)它，要么是想 引用某個書中標(biāo)題吧？ 如果是前者，應(yīng)該用 <em>；如果是后者，其實得用 <cite>。
如果某個對象被標(biāo)記為粗體，事實上它應(yīng)該被標(biāo)記的是， <strong>。
如果你希望在某處添加一個換行，這大概是開始了一個新的開頭。如果不是開頭，會不會是某種在你的站點中出現(xiàn)過的class (類型)？在上面兩種情況下，你都應(yīng)該用 CSS 替換 <br>。
.foo {display:block}
考慮你需要導(dǎo)航的內(nèi)容是一些無序的鏈接這種情況：
用 <ul> 標(biāo)簽來編輯它們。
link1 link2 link3 link4 link5 水平導(dǎo)航條 我們可以用 CSS 來控制這個列表顯示在網(wǎng)頁上的外觀。
通過使用 display:inline 我們可以創(chuàng)建水平導(dǎo)航條。
link1 link2 link3 link4 link5 這是上面這個導(dǎo)航條用到的代碼：
#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; }
垂直導(dǎo)航條 link1 link2 link3 link4 link5 這是垂直導(dǎo)航條的代碼：
#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 標(biāo)準(zhǔn)：通盤考慮
如果你已經(jīng)把站點的內(nèi)容分好了類，那么是時候分析每個頁面，把它們按照邏輯關(guān)系進行分解了。
主導(dǎo)航條 子導(dǎo)航條 頁眉與頁腳 內(nèi)容 相關(guān)信息 其他 注意分析由嵌套表格、空白分隔符和邊框元素組成的表格結(jié)構(gòu) (因為我們希望把它們替換為用 div 標(biāo)記組織的那種簡單得多的表格結(jié)構(gòu))。
一旦你分析好頁面的結(jié)構(gòu)，就可以著手揭開表象，分析你現(xiàn)在的頁面代碼中可以轉(zhuǎn)換成結(jié)構(gòu)化標(biāo)記的那些地方。
作為一個完美主義者，消滅所有的 <font> 標(biāo)記和間隔 GIF 吧！ 同樣的，一并搞定 <b> 和 <br> 標(biāo)記。 去除表格中的那些外觀標(biāo)記 (bgcolor, background, 等等)。 把純粹用來表示外觀的那些 CSS 調(diào)用 (比如 <span class="header">) 改成結(jié)構(gòu)化的標(biāo)記。
7、把描述外觀的標(biāo)記改為描述結(jié)構(gòu)的標(biāo)記
你可以使用“查找加替換”(或者正則表達式)，不過最好的方法還是在瀏覽器里打開這個頁面，然后把文本復(fù)制粘貼到你的 HTML 編輯器里。
關(guān)鍵還是要用結(jié)構(gòu)化的方式來思考！僅僅把 <b> 標(biāo)記替換為 <strong> 是遠(yuǎn)遠(yuǎn)不夠的。
最重要的條目是哪個？用 <h1> 來標(biāo)記它。次要一點的就用 <h2>，依此類推。用 <p> 來標(biāo)記段落。把導(dǎo)航條標(biāo)記為無序列表。
選定一個 DOCTYPE 來使用。(我們推薦 XHTML transitional，除非你是此道高手，否則別用 XHTML strict。)
8、把你的頁面合理分布在的 div 中
把你的主導(dǎo)航條放在一個 id 屬性設(shè)為 mainnav 的 div 中，子導(dǎo)航條則放在一個 id 或者 class 是 subnav 的 div 中。而頁腳類似這個形式：<div id="footer">，至于整個頁面，它被放在 <div id="content"> 里邊。
即便現(xiàn)在它還不怎么討人喜歡，但只要你開始給樣式表添加規(guī)則，它就會馬上變得可愛起來。
9、是開始自己編寫 CSS 的時候了
首先，給每個 div 設(shè)置一個邊界。例如： div {border: 1px dotted gray; padding: .5em} 這可以幫助你完完整整地看到里邊的內(nèi)容，也不再需要卷動屏幕了。
首先為以定義的元素編寫 CSS (<HTML>, <body>, <p>, <h1>, <h2>, <ul>, <li>, 等等。)
盡量運用上下文相關(guān)或者有遞歸下降結(jié)構(gòu)的選擇符。這可以使得你的標(biāo)記更清晰。例如：#subnav li {border: 1px solid black; padding: .5em; display: inline} 將能夠只能影響你的子導(dǎo)航欄的 div 中的列表項。
在盡可能多的瀏覽器下進行測試，畢竟你可以讓朋友幫助你用它們自己的瀏覽器測試。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！
我們將告訴你這樣一種工作方式，它會：
使你的頁面載入得更快 降低你的流量費用 讓你在修改設(shè)計時更有效率而代價更低 幫助你的整個站點保持視覺的一致性 讓你的站點可以更好地被搜索引擎找到 使你的站點對瀏覽者和瀏覽器更具親和力 在世界上越來越多人采用 Web 標(biāo)準(zhǔn)時，它還能 提高你的職場競爭實力 (事實上也就是降低失業(yè)的風(fēng)險)。
3、表格帶來的問題
把格式數(shù)據(jù)混入你的內(nèi)容中。 這使得文件的大小無謂地變大，而用戶訪問每個 頁面時都必須下載一次這樣的格式信息。 帶寬并非免費。 這使得重新設(shè)計現(xiàn)有的站點和內(nèi)容極為消耗勞力 (且昂貴)。 這還使我們保持整個站點的視覺的一致性極難，花費也極高。 基于表格的頁面還大大降低了它對殘疾人和用手機或 PDA 瀏覽者的親和力。
4、過渡性的設(shè)計
使用 margin 和 padding 來代替多余的表格單元和間隔 GIF。
使用 link 和 @import 來載入樣式。前者用于早期瀏覽器，后者給現(xiàn)在的瀏覽器。
<link href="../../basic.CSS" rel="stylesheet" type="text/CSS">
<style type="text/CSS" media="screen"><!-- @import url(modern.CSS) screen; --></style>
5、結(jié)構(gòu)化標(biāo)記：所寫即所想，所想即所寫
即便書寫 CSS 很簡單，使用 CSS 來排版卻真的需要一種和我們以往有些不同的思維方式。
我們排版時考慮的不是“這個東西放在這兒，那個東西放在那兒”，而是頁面中信息的類別和信息的結(jié)構(gòu)。
我們用 <h1> 標(biāo)記來標(biāo)示最重要的頭條；次一級的條目則用 <h2> 來標(biāo)記，以此類推；而段落則放在 <p> 標(biāo)記中。
這就是我們稱之為“結(jié)構(gòu)標(biāo)記”或“語義標(biāo)記”的東西。
你的內(nèi)容將不放在表格和表格元素中，取代它們的是 div 元素。還要給你的 div 元素安排一個 id 或 class，不過這是為了描述它們的內(nèi)容或功能，而非它們的外觀。
當(dāng)你把某個對象設(shè)為斜體時，大概要么就是想強調(diào)它，要么是想 引用某個書中標(biāo)題吧？ 如果是前者，應(yīng)該用 <em>；如果是后者，其實得用 <cite>。
如果某個對象被標(biāo)記為粗體，事實上它應(yīng)該被標(biāo)記的是， <strong>。
如果你希望在某處添加一個換行，這大概是開始了一個新的開頭。如果不是開頭，會不會是某種在你的站點中出現(xiàn)過的class (類型)？在上面兩種情況下，你都應(yīng)該用 CSS 替換 <br>。
.foo {display:block}
考慮你需要導(dǎo)航的內(nèi)容是一些無序的鏈接這種情況：
用 <ul> 標(biāo)簽來編輯它們。
link1 link2 link3 link4 link5 水平導(dǎo)航條 我們可以用 CSS 來控制這個列表顯示在網(wǎng)頁上的外觀。
通過使用 display:inline 我們可以創(chuàng)建水平導(dǎo)航條。
link1 link2 link3 link4 link5 這是上面這個導(dǎo)航條用到的代碼：
#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; }
垂直導(dǎo)航條 link1 link2 link3 link4 link5 這是垂直導(dǎo)航條的代碼：
#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 標(biāo)準(zhǔn)：通盤考慮
如果你已經(jīng)把站點的內(nèi)容分好了類，那么是時候分析每個頁面，把它們按照邏輯關(guān)系進行分解了。
主導(dǎo)航條 子導(dǎo)航條 頁眉與頁腳 內(nèi)容 相關(guān)信息 其他 注意分析由嵌套表格、空白分隔符和邊框元素組成的表格結(jié)構(gòu) (因為我們希望把它們替換為用 div 標(biāo)記組織的那種簡單得多的表格結(jié)構(gòu))。
一旦你分析好頁面的結(jié)構(gòu)，就可以著手揭開表象，分析你現(xiàn)在的頁面代碼中可以轉(zhuǎn)換成結(jié)構(gòu)化標(biāo)記的那些地方。
作為一個完美主義者，消滅所有的 <font> 標(biāo)記和間隔 GIF 吧！ 同樣的，一并搞定 <b> 和 <br> 標(biāo)記。 去除表格中的那些外觀標(biāo)記 (bgcolor, background, 等等)。 把純粹用來表示外觀的那些 CSS 調(diào)用 (比如 <span class="header">) 改成結(jié)構(gòu)化的標(biāo)記。
7、把描述外觀的標(biāo)記改為描述結(jié)構(gòu)的標(biāo)記
你可以使用“查找加替換”(或者正則表達式)，不過最好的方法還是在瀏覽器里打開這個頁面，然后把文本復(fù)制粘貼到你的 HTML 編輯器里。
關(guān)鍵還是要用結(jié)構(gòu)化的方式來思考！僅僅把 <b> 標(biāo)記替換為 <strong> 是遠(yuǎn)遠(yuǎn)不夠的。
最重要的條目是哪個？用 <h1> 來標(biāo)記它。次要一點的就用 <h2>，依此類推。用 <p> 來標(biāo)記段落。把導(dǎo)航條標(biāo)記為無序列表。
選定一個 DOCTYPE 來使用。(我們推薦 XHTML transitional，除非你是此道高手，否則別用 XHTML strict。)
8、把你的頁面合理分布在的 div 中
把你的主導(dǎo)航條放在一個 id 屬性設(shè)為 mainnav 的 div 中，子導(dǎo)航條則放在一個 id 或者 class 是 subnav 的 div 中。而頁腳類似這個形式：<div id="footer">，至于整個頁面，它被放在 <div id="content"> 里邊。
即便現(xiàn)在它還不怎么討人喜歡，但只要你開始給樣式表添加規(guī)則，它就會馬上變得可愛起來。
9、是開始自己編寫 CSS 的時候了
首先，給每個 div 設(shè)置一個邊界。例如： div {border: 1px dotted gray; padding: .5em} 這可以幫助你完完整整地看到里邊的內(nèi)容，也不再需要卷動屏幕了。
首先為以定義的元素編寫 CSS (<HTML>, <body>, <p>, <h1>, <h2>, <ul>, <li>, 等等。)
盡量運用上下文相關(guān)或者有遞歸下降結(jié)構(gòu)的選擇符。這可以使得你的標(biāo)記更清晰。例如：#subnav li {border: 1px solid black; padding: .5em; display: inline} 將能夠只能影響你的子導(dǎo)航欄的 div 中的列表項。
在盡可能多的瀏覽器下進行測試，畢竟你可以讓朋友幫助你用它們自己的瀏覽器測試。
本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！
網(wǎng)頁名稱：采用DIV+CSS布局的好處
URL網(wǎng)址：http://www.muchs.cn/news4/311154.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動網(wǎng)站建設(shè)、品牌網(wǎng)站制作、ChatGPT、網(wǎng)站排名、品牌網(wǎng)站設(shè)計、網(wǎng)站設(shè)計
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容
- 分析電商購物流程設(shè)計 2023-12-30
- 網(wǎng)站設(shè)計和網(wǎng)頁設(shè)計有什么區(qū)別和不一樣 2023-12-30
- 交互設(shè)計師如何進行業(yè)務(wù)分析？ 2023-12-30
- 企業(yè)營銷網(wǎng)站建設(shè)的重要性！ 2023-12-30
- 談?wù)勯T戶首頁改版 2023-12-30
- 網(wǎng)站制作方法技巧 2023-12-30
- 成都建站公司站進行優(yōu)化更需注重網(wǎng)站設(shè)計 2023-12-30
- 服務(wù)器托管和租用區(qū)別 2023-12-30
- 企業(yè)網(wǎng)站怎樣制作更能吸引客戶 2023-12-30
- 比較有效的網(wǎng)絡(luò)推廣方法有哪些，有什么特點 2023-12-30
- 網(wǎng)站建設(shè)怎么選擇網(wǎng)站空間 2023-12-30
- 9個小技巧幫你打造優(yōu)秀的關(guān)于我們頁面 2023-12-30
- 營銷型企業(yè)網(wǎng)站建設(shè)推廣技巧：如何提高網(wǎng)站點擊量 2023-12-30
- SEO優(yōu)化現(xiàn)在還有用嗎？seo真的有效果嗎？seo優(yōu)化效果不理想？ 2023-12-30
- 成都網(wǎng)站建設(shè)之外鏈的作用是什么？ 2023-12-30
- 網(wǎng)站設(shè)計的10個需求點 2023-12-30
- 為什么響應(yīng)式網(wǎng)站制作有利于SEO？ 2023-12-30
- 成都網(wǎng)站制作開發(fā)前必須搞清楚的幾個問題 2023-12-30
- 鄭州建設(shè)網(wǎng)站如何與客戶進行溝通？(如何建設(shè)b2b網(wǎng)站) 2023-12-30