【正文】 ，使頁(yè)面真正賞心悅目。三、減少網(wǎng)頁(yè)加載時(shí)間縮減頁(yè)面代碼量，可以提高頁(yè)面瀏覽速度，在幾乎所有的瀏覽器上都可以使用。你可以將許多網(wǎng)頁(yè)的風(fēng)格格式同時(shí)更新，不用再一頁(yè)一頁(yè)地更新了。所以，假如你要修改網(wǎng)站整站布局的話，一般只需要修改 css文件里的的個(gè)別屬性即可，而這種特點(diǎn)是 table不具備的。在一般情況下，div+css布局的網(wǎng)站，都是將 html頁(yè)面和 css文件分開(kāi)的，div+css 的特點(diǎn)就是能將網(wǎng)頁(yè)的內(nèi)容和表現(xiàn)形式分離，將設(shè)計(jì)部分剝離出來(lái)放在一個(gè)獨(dú)立樣式文件中，你可以減少未來(lái)網(wǎng)頁(yè)無(wú)效的可能。二、易于修改提高易用性，使用 CSS可以結(jié)構(gòu)化 HTML，可以輕松控制頁(yè)面的布局。第三節(jié) DIV+CSS 布局的優(yōu)點(diǎn)一、利于搜索引擎蜘蛛爬行根據(jù)總結(jié)和經(jīng)驗(yàn)，div+css 布局有利于蜘蛛的爬行，拿 html的 table布局和 div+css布局的網(wǎng)頁(yè)來(lái)做對(duì)比，很顯然 table的字節(jié)大于 div+css的，字節(jié)7小就有益于搜索引擎蜘蛛下載頁(yè)面所用的時(shí)間，縮減頁(yè)面代碼量，可以提高頁(yè)面瀏覽速度。 使用內(nèi)嵌樣式以應(yīng)用級(jí)聯(lián)樣式表屬性到網(wǎng)頁(yè)元素上。嵌入的樣式表是一種級(jí)聯(lián)樣式表， “嵌”在網(wǎng)頁(yè)的 HEAD 標(biāo)記符內(nèi)。通常外部樣式表以 .css 做為文件擴(kuò)展名，例如 。在一個(gè)或多個(gè)外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁(yè)，便能確保所有網(wǎng)頁(yè)外觀的一致性。 ③應(yīng)用內(nèi)嵌樣式到各個(gè)網(wǎng)頁(yè)元素。第 二 節(jié) 級(jí) 聯(lián) 樣 式 表 簡(jiǎn) 介有三種方法可以在站點(diǎn)網(wǎng)頁(yè)上使用樣式表：①將網(wǎng)頁(yè)鏈接到外部樣式表。 ?、?CSS的極大優(yōu)勢(shì)表現(xiàn)在簡(jiǎn)潔的代碼，對(duì)于一個(gè)大型網(wǎng)站來(lái)說(shuō)，可以節(jié)省6大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。內(nèi)容和樣式的分離，使頁(yè)面和樣式的調(diào)整變得更加方便。相對(duì)與傳統(tǒng)的 table, 采用 DIV+CSS技術(shù)的網(wǎng)頁(yè)，對(duì)于搜索引擎的收錄更加友好。② 支持瀏覽器的向后兼容，也就是無(wú)論未來(lái)的瀏覽器大戰(zhàn)，勝利的是 IE7或者是火狐，您的網(wǎng)站都能很好的兼容。微軟等公司均為 W3C支持者。在 XHTML網(wǎng)站設(shè)計(jì)標(biāo)準(zhǔn)中，不再使用表格定位技術(shù)，而是采用 DIV+CSS的方式實(shí)現(xiàn)各種定位。XHTML 語(yǔ)言是一種可以將 HTML語(yǔ)言標(biāo)準(zhǔn)化，用 XHTML語(yǔ)言重寫(xiě)后的 HTML頁(yè)面可以應(yīng)用許多XML應(yīng)用技術(shù)。 DIV+CSS是網(wǎng)站標(biāo)準(zhǔn)（或稱“WEB 標(biāo)準(zhǔn)” ）中常用術(shù)語(yǔ)之一，div+css 是一種網(wǎng)頁(yè)的布局方法,這一種網(wǎng)頁(yè)布局方法有別于傳統(tǒng)的 HTML網(wǎng)頁(yè)設(shè)計(jì)語(yǔ)言中的表格（table）定位方式,真正地達(dá)到了 w3c內(nèi)容與表現(xiàn)相分離。用好 CSS能使你的網(wǎng)頁(yè)更加的簡(jiǎn)練，為什么同樣內(nèi)容的網(wǎng)頁(yè)，有的人能做出及時(shí) KB，而高手做出來(lái)的只有十幾 KB，CSS 在其中的作用是不言而喻的。實(shí)際上它是一組樣式。目前推薦遵循的是 ECMAScript 262。簡(jiǎn)單的理解，DOM 解決了 Netscaped 的 Javascript和 Microsoft 的 Jscript 之間的沖突，給予 web 設(shè)計(jì)師和開(kāi)發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來(lái)訪問(wèn)他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)象。行為標(biāo)準(zhǔn)(1)DOMDOM 是 Document Object Model 文檔對(duì)象模型的縮寫(xiě)。W3C 創(chuàng)建 CSS標(biāo)準(zhǔn)的目的是以 CSS取代表格式布局、幀和其它表現(xiàn)的語(yǔ)言。表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言CSS是 Caseading Style Sheets 層疊樣式表的縮寫(xiě)。因此，我們?cè)?，用 XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了 xhtml 。xhtml是 The Extensible Hapertext Markup Language 可擴(kuò)展標(biāo)識(shí)語(yǔ)言的縮寫(xiě)。xml 最初設(shè)計(jì)的目的是彌補(bǔ) html的不足，以強(qiáng)大的擴(kuò)展性媽祖網(wǎng)絡(luò)信息發(fā)布的需要，夠來(lái)逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。目前推薦遵循的是 W3C于 2022年 10月 6日發(fā)布的 ，參考。這些標(biāo)準(zhǔn)大部分由 W3C起草和發(fā)布， 也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)， 比如 ECMA (European puter Manufacturers Asscoiation) 的 ECMASscript 標(biāo)準(zhǔn)。 WEB 標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列的標(biāo)準(zhǔn)集合，網(wǎng)頁(yè)主要是由三部分組成：結(jié)構(gòu)（structure） 、表現(xiàn)（presentation） 、和行為（behavior） 。 更 重 要 的 是 ， 那 些 幸 免 于 當(dāng) 初 網(wǎng) 絡(luò) 泡 沫 的 公 司 ，看 起 來(lái) 有 一 些 共 同 之 處 。Reilly 公司 副 總 裁 的 戴 爾 Reilly 公 司 和MediaLive 國(guó) 際 公 司 之 間 的 頭 腦 風(fēng) 暴 部 分 。 Web服務(wù)的特點(diǎn)在于高度的集成性，它能夠?qū)崿F(xiàn)不同類(lèi)型的信息（如文本、圖像、聲音、動(dòng)畫(huà)和視頻等）和服務(wù)（如New、FTP、Tel、Gopher 及 Mail等）的無(wú)縫鏈接，特別適合于廣域網(wǎng)中信息的組織、檢索與顯示。頁(yè)面到頁(yè)面的鏈接信息由統(tǒng)一資源定位器 URL(Uniform Resource Locator)維持。在 Web服務(wù)方式中，信息以頁(yè)面（或稱 Web頁(yè)）的形式存儲(chǔ)在 Web服務(wù)器中，這些頁(yè)面采用超文本的方式對(duì)信息進(jìn)行組織，通過(guò)鏈接將一頁(yè)信息鏈接到另一頁(yè)信息。Web 以超文本標(biāo)記語(yǔ)言 HTML(Hyper Text Markup Language)與超文本傳輸協(xié)議HTTP(Hyper Text Transfer Protocol)為基礎(chǔ)，通過(guò)瀏覽器為用戶提供方便友好的信息瀏覽界面。Web(World Wide Web，簡(jiǎn)稱 WWW，又稱萬(wàn)維網(wǎng))是目前 Inter上應(yīng)用最廣泛也是最重要的信息服務(wù)類(lèi)型，它的影響已經(jīng)進(jìn)入了 Inter上的廣告、新聞、電子商務(wù)和展示信息等各個(gè)服務(wù)領(lǐng)域?，F(xiàn)廣泛譯作網(wǎng)絡(luò)、互聯(lián)網(wǎng)等技術(shù)領(lǐng)域。論文組織如下：首先闡述了該系統(tǒng)的開(kāi)發(fā)背景、意義，詳細(xì)介紹了div+css理論知識(shí)；其次介紹了相關(guān)的開(kāi)發(fā)工具及技術(shù)基礎(chǔ)；接著對(duì)網(wǎng)站的需求進(jìn)行了分析，并提出了具體的設(shè)計(jì)方案；然后展現(xiàn)了整個(gè)系統(tǒng)的具體實(shí)現(xiàn)，包括網(wǎng)頁(yè)的設(shè)計(jì)和連接，各功能模塊的實(shí)現(xiàn)；最后對(duì)該網(wǎng)站進(jìn)行了嚴(yán)格的測(cè)試。其中，最主要的就是介紹和展示 DIV+CSS在網(wǎng)頁(yè)中的最用和魅力。在技術(shù)上，采用了 Dreamweaver網(wǎng)站開(kāi)發(fā)工具，以 HTML的超大功能結(jié)合 JAVAScript 的客戶端語(yǔ)言，并加以 FLASH 等動(dòng)畫(huà)以增加網(wǎng)站的動(dòng)態(tài)效果。各大門(mén)戶網(wǎng)，企業(yè)網(wǎng)都在 ,采用 CSS+DIV來(lái)布局網(wǎng)站，所以才有了此次的選題。網(wǎng)站已經(jīng)成為現(xiàn)階段眾多企業(yè)不可或缺的網(wǎng)絡(luò)營(yíng)銷(xiāo)平臺(tái)，互聯(lián)網(wǎng)應(yīng)用規(guī)模正不斷擴(kuò)大。使用 div+css 開(kāi)發(fā)個(gè)人網(wǎng)站畢業(yè)設(shè)計(jì)目 錄前 言 ..............................................................1第一章 網(wǎng)站開(kāi)發(fā)背景 ................................................2第一節(jié) WEB 概述 ...................................................2一、認(rèn)識(shí) WEB....................................................2二、認(rèn)識(shí) ............................................2第二章 DIV+CSS 詳解 ................................................5第一節(jié) DIV+CSS 簡(jiǎn)介 ...............................................5第 二 節(jié) 級(jí) 聯(lián) 樣 式 表 簡(jiǎn) 介 ..........................................6第三節(jié) DIV+CSS 布局的優(yōu)點(diǎn) ........................................6一、利于搜索引擎蜘蛛爬行 .......................................6二、易于修改 ...................................................7三、減少網(wǎng)頁(yè)加載時(shí)間 ...........................................7四、代碼精簡(jiǎn) ...................................................7五、相對(duì)表格的嵌套問(wèn)題 .........................................8六、搜索排名的影響 .............................................8第四節(jié) DIV+CSS 布局方式 ............................................8第五節(jié) DIV+CSS 理論概述 ............................................9一、理解 CSS盒子模型 ...........................................9二、轉(zhuǎn)變思路 ..................................................10三、實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)分離 ........................................11第六節(jié) DIV+CSS 的兼容性問(wèn)題 ........................................11一、div 的垂直居中問(wèn)題 .........................................11二、margin 加倍的問(wèn)題 ..........................................11三、浮動(dòng) ie產(chǎn)生的雙倍距離 .....................................11四、IE 與寬度和高度的問(wèn)題 ......................................11五、頁(yè)面的最小寬度 ............................................12六、DIV 浮動(dòng) IE文本產(chǎn)生 3象素的 bug ............................12七、IE 捉迷藏的問(wèn)題 ............................................12八、IE6 下為什么圖片下有空隙產(chǎn)生 ...............................12第二章 開(kāi)發(fā)工具的介紹 .............................................13第一節(jié) 夢(mèng)幻網(wǎng)頁(yè)的編織者——Dreamweaver ........................13第二節(jié) 圖形、圖像編輯設(shè)計(jì)軟件制作軟件——ADOBE PHOTOSHOP CS2 ......13第三章 網(wǎng)站總體分析和設(shè)計(jì) .........................................15第一節(jié) 網(wǎng)站開(kāi)發(fā)的需求分析 .......................................15第二節(jié) 網(wǎng)站的總體設(shè)計(jì) ...........................................16第三節(jié) 整體風(fēng)格設(shè)計(jì) .............................................19一、頁(yè)面屬性設(shè)計(jì) ..............................................19二、色彩搭配 ..................................................19三、連接效果 ..................................................20四、導(dǎo)航設(shè)計(jì) ..................................................20五、細(xì)節(jié)設(shè)計(jì) ..................................................21第四節(jié) 首頁(yè)設(shè)計(jì) .................................