采用XHTML+DIV+CSS構(gòu)建網(wǎng)站示例

1、采用XHTML+DIV+CSS構(gòu)建網(wǎng)站1、采用XHTML+DIV+CSS構(gòu)建網(wǎng)站的一般原則（1）首先對整個頁面進(jìn)行布局劃分明確在網(wǎng)站頁面的什么位置應(yīng)該要放什么東西（內(nèi)容），網(wǎng)頁內(nèi)容在頁面上所處位置的設(shè)計即 為布局。遵守先“粗”再“細(xì)”的原則；首先劃分出大的區(qū)域（容器寬度為網(wǎng)站寬度的這類容器）一一比如，先劃分出網(wǎng)站頂部、欄目導(dǎo)航 區(qū)、主體區(qū)、底部工具欄區(qū)、版權(quán)信息區(qū)幾個大區(qū)；然后在各個大區(qū)中再劃出各自的小容器，小容器包 含于各自的上級大容器中。再畫一個體現(xiàn)設(shè)計結(jié)果的“草圖”（可以在Word中或者Excel中畫出）。（2）明確布局的內(nèi)容主要是決定頁面尺寸、整體造型、頁眉、文本、頁腳、圖片、多媒體（

2、如聲音、動畫、視頻）等信 息的擺放位置。（3）命名每個容器（每個區(qū)域）標(biāo)簽的名稱（都應(yīng)該要有唯一的名稱）在具體進(jìn)行網(wǎng)站實現(xiàn)時首先畫出網(wǎng)站布局的示圖這可以采用PhotoShop或FireWorks等圖片處 理軟件將需要制作的界面布局簡單的構(gòu)畫出來，然后把網(wǎng)站的各個區(qū)域劃分成不同的容器，以一定的規(guī) 律進(jìn)行命名、并標(biāo)記在示圖上面。然后按這個圖紙上的容器名在模板中用div id=容器名”來布局，例 如：根據(jù)這個容器要表現(xiàn)出的效果在CSS樣式文件中用“#容器名參數(shù)”定義這個容器的樣式參數(shù)， 例如：webLogoImage 當(dāng)然，需要合理地劃分出容器并給容器定義有意義和規(guī)律的名稱。（4）網(wǎng)站的總體風(fēng)格要一

3、致，以達(dá)到協(xié)調(diào)統(tǒng)一網(wǎng)站結(jié)構(gòu)的一致性：這包括網(wǎng)站布局、文字排版、裝飾性元素出現(xiàn)的位置、導(dǎo)航的統(tǒng)一、圖片 的位置等等；網(wǎng)站標(biāo)志性元素的一致性：這包括網(wǎng)站或公司名稱、網(wǎng)站或企業(yè)標(biāo)志、導(dǎo)航及輔助導(dǎo)航的形式 及位置、公司聯(lián)系信息等。2、了解常見的網(wǎng)站布局結(jié)構(gòu)設(shè)計網(wǎng)站網(wǎng)頁布局大致可分為“國”字型、拐角型、標(biāo)題正文型、左右框架型、上下框架型、綜合框架 型、封面型、Flash型、變化型等?！皣弊中途W(wǎng)站網(wǎng)頁布局也可以稱為“同”、“口”字型，是一些大型網(wǎng)站常采用的布局一一最上面是網(wǎng)站的標(biāo)題以及橫幅 廣告條，接下來就是網(wǎng)站的主要內(nèi)容，左右分列一些條幅形式的內(nèi)容，中間是主要的信息，與左右一起 并列到頁面底部，最下面

4、是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等信息。下面的 HYPERLINK / /網(wǎng)站就是采用這樣的結(jié)構(gòu)設(shè)計，請見下面的示圖。所有影片斐星-扣芨鷹隼大隊2012風(fēng)聲蝸居上升最快影片今日推薦2009.1 0.311極限控制由DVD版在線安裝本地下載IT世界下載2賤精先生國DVD.3穿越恰欲海 匚如口版迅雷游戲大廳迅雷迷你版軟件中心最近大家關(guān)注的所有影片斐星-扣芨鷹隼大隊2012風(fēng)聲蝸居上升最快影片今日推薦2009.1 0.311極限控制由DVD版在線安裝本地下載IT世界下載2賤精先生國DVD.3穿越恰欲海 匚如口版迅雷游戲大廳迅雷迷你版軟件中心最近大家關(guān)注的藩伯圣誕狗狗高清版宿醉當(dāng)“光根”成歷史

5、 票房黑馬諜戰(zhàn)新片秋喜 恐怖喜劇詹妮弗的肉體t蝸居正橫掃全國熒屏聚隹房奴貪官白領(lǐng)包養(yǎng)熱點3D網(wǎng)漆巨作t迅雷-北，龍的佳人一起上，火爆深空失憶驚悚恐怖片 憂美的創(chuàng)意與恐怖震撼并存溫曖內(nèi)衣套裝搶購59元限時搶購溫暖肉衣套裝59元酒子哨央視黃金檔熱播E 迅雷看看同步播映，邀你觀賞能r 迅雷 5： 144韓國驚悚愛瞥片榮獲夏納等多個電影節(jié)獎項C-HH眼沼錯抱女兒 各大地方衛(wèi)視掀起熱播狂畫迅雷看看播放器48 2009.10.15本地下載 中關(guān)村下載 泡泡網(wǎng)下載4保鏢礙高酒版5東方三俠H版&主顧心貝。版7快速前進(jìn)崗EWE)版 S阿飛正傳囪DVD版9霍莉H洲2)版拐角型網(wǎng)頁布局又稱“T “字型布局，這種布局

6、結(jié)構(gòu)與上一種的國”字型布局其實只是形式上的區(qū)別，上面是標(biāo)題 及廣告橫幅，接下來的左側(cè)是一窄列鏈接等，右列是很寬的正文，下面也是一些網(wǎng)站的輔助信息。在這種類型中，一種很常見的類型是最上面是標(biāo)題及廣告，左側(cè)是導(dǎo)航鏈接。下面為 HYPERLINK /%e7%9a%84%e7%bb%93%e6%9e%84%e7%a4%ba%e5%9b%be%ef%bc%8c%e5%ae%83%e4%bd%93%e7%8e%b0%e4%ba%86%e6%8b%90%e8%a7%92%e5%9e%8b%e7%bd%91%e9%a1%b5%e5%b8%83%e5%b1%80%e7%9a%84%e5%9f%ba%e6%9c%

7、ac%e7%89%b9%e6%80%a7%e3%80%82 /的結(jié)構(gòu)示圖，它體現(xiàn)了拐角型網(wǎng)頁布局的基本特性。標(biāo)題正文型網(wǎng)頁布局這種類型的網(wǎng)頁布局的最上面是標(biāo)題，下面是正文信息和導(dǎo)航條等。 HYPERLINK .c / 系統(tǒng)采用了該形式的布局。首頁I新聞I民生I寬頻I娛樂首頁I新聞I民生I寬頻I娛樂I圖庫I房產(chǎn)I動漫I休闈I汽車I女性I男性I商城I團(tuán)購I旅游I數(shù)碼I健康I壹友I整形I家居I公壹I小記者_(dá)國慶6a周年楂州網(wǎng)論壇bbs.hamgzhou.CD華夏商旅卡快樂行天下超盈應(yīng)閾酮華星簡卡奪寶行即第一期火穗閂場！注冊 登錄 搜索 杭網(wǎng)娛辱中心-幫助 杭州網(wǎng) 杭州博客網(wǎng)杭州博客網(wǎng)-杭州網(wǎng)論壇I用

8、戶名今日：5006,昨S： 14111,最高日：66983精華區(qū)rJ 主題：140S076,帖子：21S16433,登員：912031,歡迎新會員 wypl996（4）左右框架型網(wǎng)頁布局這是一種左右隔離的框架形式的布局結(jié)構(gòu)，一般左面是導(dǎo)航鏈接，有時最上面會有一個小的標(biāo)題或 標(biāo)志，右面是正文。這在BBS論壇系統(tǒng)很普遍，因為這種類型的布局結(jié)構(gòu)非常清晰，一目了然。某個論 壇系統(tǒng)http:bbspx1987com/就采用了布局方案。（5）封面型網(wǎng)頁布局這種類型的網(wǎng)頁布局基本上是出現(xiàn)在一些網(wǎng)站的首頁，大部分為一些精美的平面設(shè)計的動畫，放上 幾個簡單的超鏈接或者僅是一個“進(jìn)入”的鏈接。請參考 HYPERL

9、INK 網(wǎng)站設(shè)計方案。一【千年古鎮(zhèn)世界同里蘭一【千年古鎮(zhèn)世界同里蘭（6）Flash型網(wǎng)頁布局其實該網(wǎng)頁布局結(jié)構(gòu)與上面的封面布局型結(jié)構(gòu)是類似的，只是它采用了Flash動畫，因此能夠表達(dá) 更豐富的信息，其視覺效果及聽覺效果如果處理得當(dāng)，絕不差于傳統(tǒng)的多媒體的效果。 http:www.pdpharmcom采用了該方案。3、設(shè)計符合XHTML3、設(shè)計符合XHTML規(guī)范的頁面結(jié)構(gòu)（1）頁面結(jié)構(gòu)中的常見區(qū)塊其目的是達(dá)到“信息分類”顯示、提高“頁面的可讀性”在頁面頂部一般放“網(wǎng)站標(biāo)志”和“站點名稱”中科院計算所培訓(xùn)中心Traiming Center 中科院計算所培訓(xùn)中心Traiming Center of

10、ICT,CASS&arcli網(wǎng)站首頁/技術(shù)論壇/沈陽分校首頁業(yè)務(wù)范圍師資介蕤公開課首頁業(yè)務(wù)范圍師資介蕤公開課企業(yè)培訓(xùn)職業(yè)教育加盟合作客戶服罟關(guān)于我們 在其下放站點導(dǎo)航主菜單（導(dǎo)航條）在導(dǎo)航條的下面一般為“頁面內(nèi)容”最新會開課mORE I k; ;-高熊軟件需求分析師培訓(xùn)-北京叫明.06. 18 海如.四新-Oracle 1口所發(fā)與管理-北京2009. 05. 18至05. 22-“Circle 1口生能調(diào)憂”-北京2009.05. 13至 05. 17.-“超越敏捷有效開發(fā)北京雹皿.05.必至05.24狀態(tài)信息顯示區(qū)新聞mOREIk中科院計算所培訓(xùn)中心第二屆沙戒新聞報道高級系統(tǒng)架構(gòu)師培訓(xùn)在上海

11、圓滿結(jié)束 慶祝我中心超越逾捷有效開發(fā)”技術(shù). 中科院計算所培訓(xùn)中心沈陽分校簽約寶. Oracle性能調(diào)憂08.07.2.慶祝我中心與江西農(nóng)業(yè)大學(xué)院校合作圓. 神圳證券變易所內(nèi)訓(xùn)08.05.25.沈陽分校林炳漂校長受邀擔(dān)任第五屆遼.最下面為版權(quán)和有關(guān)法律聲明區(qū)關(guān)于我們I培訓(xùn)課程I就業(yè)信息I聯(lián)系我們I法律公告I中科院計算虜職業(yè)培訓(xùn)中心版權(quán)所有熱統(tǒng)電話：8%6龍59 82661244 82661260 800-810-9736傳真：8Z6615T9地址：北京市海淀區(qū)中美村958樓中科天博大廈 郵箱：webma，ter回前.mm京町備何iit號技術(shù)支持:聯(lián)合易網(wǎng)H 004 04 7 6（2）采用DIV元素來將這些結(jié)構(gòu)定義出來（相對長度單位）em：元素的字體高度ex：字母x的高度px：象素 Pixels%：百分比 Percentage4、利用 Macromedia Dreamweaver 工具創(chuàng)建 XHTML 頁面（1）選中其中的“使文檔與XHTML兼容”選項下面為在 Macromedia Dreamweaver工具中創(chuàng)建出一個XHTML頁面（也可以在Eclipse工具中創(chuàng) 建），但要注意選中其中的“使文檔與XHTML兼容”選項。（2）頁面的內(nèi)容 無標(biāo)題文檔 返回首頁 登陸系統(tǒng) 系統(tǒng)注冊 找回密碼 在線幫助 在CSS布局中，ul和li的運(yùn)用是非常常見的配合DIV