[div+css]網站布局執行個體二

標籤：style   ar   使用   sp   on   檔案   div   log   bs   

重點:合理應用"xhtml標籤"建立良好的頁面結構拿到一份"設計方案"的後不要立即開始編碼,而是要 首先理清"各元素之間的關係"; 然後思考"以什麼標籤來組織所需表現的內容".** 分析頁面的基本構成,主要分成5地區: 上部LOGO; 導覽功能表; 左側邊欄; 右側內容; 底部著作權區.** 布局規劃: 上部LOGO + 導覽功能表 => 頭部元素 =>置於header層; 左側邊欄sidebar+右側邊欄container=>置於main層; 底部著作權區置於footer層. <<< header層(分4塊):網站LOGO / 網站標語 / 搜尋方塊 / 網站導覽功能表 左側邊欄分兩塊, >>>** 切割和匯出圖片 [圖片是網站設計藝術表現的載體, 它能 美化網頁 增強視覺效果 ]** 頁面主體元素xhtml編碼 頁面總體布局需要 5個 div層 header main(包圍){實現內容層和側邊層置中} container sider footer@@ id與class [命名技巧] 儘可能"以地區所在的含義命名"(如header / footer) 不要"以表現或所在位置命名"(如width500 / left / right) {後期重構如果更改會顯得不倫不類} ** 像這樣"先container後sider"的順序在[表格時代{用表格版面配置定位}]是不可思議的.[表格時代]內容以從左至右的順序來顯示,按照這種編碼思路,應該先寫sider,再寫container."現在",分析頁面的特點,側邊欄sider不是頁面的主體,頁面的主體是container(內容地區),因此,現在編碼順序是[把container放在sider前面,通過CSS進行"反向浮動"對它們的位置進行調整]"反向浮動"具有更好地適應性,靈活性.這樣的"編碼次序"主要益處: 1.使用者網速慢時可以先將主體呈現出來 2.當使用其他裝置時更易於使用者瀏覽 3.搜尋引擎蜘蛛  前面的內容更重要 @@ 在編碼中添加適當的注釋 編碼過程中加入適當的注釋非常必要. <!-- header_END --> <!-- side_END --> <!-- main_END --> 等 這些可以輔助編碼使xhtml結構更清晰. ** 下面開始"各個頁面元素的完善" ** 在編碼時可以暫且不管xhtml標籤是以何種形式呈現,只需要使xhtml編碼具有更好地語義,以恰當的標籤來組織頁面內容,即通常所說的頁面的結構.** 合理的結構 / 合適的標籤 / 這是xhtml編碼的精髓.** 而xhtml標記的外觀顯示, 可以通過css樣式表定義,讓表現和內容分離.@@ 為每一個清單項目li都賦予獨立的id 編碼導航列表時,為每一個清單項目li都指定獨立的id. 這樣的編碼便於以後的控制,為CSS樣式精準的找到目標. 可以通過它{id}來達到一些有別於其他li的樣式效果. ## 在編寫xhtml代碼時,一般可作如下考慮: 1.用<h1>標註文檔標題; 2.用<h2>標註各部分的標題或者文檔副標題; 以此類推... 可以給網站欄目名稱分配不同層級的標題, 這主要取決於整站結構與欄目組織情況. ## 左側邊欄的兩個地區構成相似,因此對一個地區解析,編碼時用class類別選取器,只需一次定義即可 統一它們的外觀樣式. "三行兩列式""頁面配置整體頁面配置CSS 這是典型的"三行兩列式布局"整體布局,需要 對 5個div層定義  以建立初步的頁面配置架構,他們是: header main container sider footer應用"反向浮動"-將主要內容置於文檔前面部分應用"無序列表ul"構建[水平橫向菜單]製作"圖文混排"的[側邊欄]頁面元素通過"修改CSS檔案"實現[頁面重構]

[div+css]網站布局執行個體二