【正文】 ................21一、DIV 分布和概述 .............................................21二、搜索關(guān)鍵字與描述 ..........................................23第五節(jié) 其他頁面設(shè)計 .............................................23第四章 網(wǎng)站的測試 ..................................................29第五章 后續(xù)工作 ....................................................30結(jié) 論 .............................................................31結(jié)束語 .............................................................32附錄一：網(wǎng)站首頁效果圖 .............................................33附錄二：部分代碼 ...................................................341前 言當(dāng)今世界已進入信息時代，Inter 成為 21世紀最受關(guān)注的行業(yè)之一,它的飛速發(fā)展和在全球范圍的普及應(yīng)用正在給人類生活帶來革命性變化。網(wǎng)絡(luò)技術(shù)的發(fā)展也取得了巨大的成就，為網(wǎng)站開發(fā)提供了很好的技術(shù)支持。其中，特別是中小型企業(yè)，對于網(wǎng)絡(luò)平臺搭建的需要求相當(dāng)?shù)钠惹?。論文詳細論述了一個基于公司網(wǎng)站的開發(fā)的設(shè)計過程。這樣的構(gòu)造有利于以后對網(wǎng)站系統(tǒng)開發(fā)的把握，并給以后的開發(fā)積累一定的經(jīng)驗，提升編程能力。本文實現(xiàn)了首頁、新聞、案例、介紹、聯(lián)系、搜索、留言、聯(lián)系我們、等功能，全面化個人網(wǎng)站的需求。2 第一章 網(wǎng)站開發(fā)背景第一節(jié) web 概述一、認識 WEBweb本意是蜘蛛網(wǎng)和網(wǎng)的意思。表現(xiàn)為三種形式，即超文本（hypertext） 、超媒體（hypermedia） 、超文本傳輸協(xié)議（HTTP）等。 Web采用瀏覽器/服務(wù)器（B/S）工作模式，其運作模式可以描述為：請求→處理→應(yīng)答。 Web將位于全世界互聯(lián)網(wǎng)上不同網(wǎng)址的相關(guān)信息有機地編織在一起。這些相互鏈接的頁面既可以放置在同一臺主機上，也可以放置在不同的主機上。用戶通過客戶端應(yīng)用程序（即瀏覽器）向 Web服務(wù)器發(fā)出請求，服務(wù)器根據(jù)客戶端的請求將保存在服務(wù)器中的某個頁面 返回給客戶端，瀏覽器接收到頁面后對其進行解釋，最終將信息以圖、文、聲并茂的形式呈現(xiàn)給用戶。3二、認識 “Web ”的 概 念 開 始 于 一 個 會 議 中 ， 展 開 于 O39。 所 謂 互 聯(lián) 網(wǎng) 先 驅(qū) 和 O39。多 爾 蒂 (Dale Dougherty)注 意 到 ， 同 所 謂 的 “崩 潰 ”迥 然 不同 ， 互 聯(lián) 網(wǎng) 比 其 他 任 何 時 候 都 更 重 要 ， 令 人 激 動 的 新 應(yīng) 用 程 序 和 網(wǎng) 站 正 在 以令 人 驚 訝 的 規(guī) 律 性 涌 現(xiàn) 出 來 。 那 么 會 不 會 是 互 聯(lián) 網(wǎng) 公 司 那 場 泡 沫 的 破 滅 標(biāo) 志 了 互聯(lián) 網(wǎng) 的 一 種 轉(zhuǎn) 折 ， 以 至 于 呼 吁 “Web ”的 行 動 有 了 意 義 ？ 我 們 都 認 同 這 種觀 點 ， Web 會 議 由 此 誕 生 。對應(yīng)的標(biāo)準(zhǔn)也分為三個方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括 XHTML和 XML ，表現(xiàn)標(biāo)準(zhǔn)語言主要包括 CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如 W3CDOM） 、ECMAScripr 等。 我們來簡單了解下這些標(biāo)準(zhǔn)：結(jié)構(gòu)標(biāo)準(zhǔn)語言XML 是 The Extensible Markup Language(可擴展標(biāo)識語言)的簡寫。和 xthml一樣，xml 同樣是來源于SGML，但是 xml是一種能定義其他語言的語。關(guān)于 xml 的好處和技術(shù)規(guī)范描寫，這里就不說了有更多的數(shù)據(jù)可供參考。目前推薦遵循的是 W3C于 2022年 1月 26日發(fā)布的 ，xml 雖然是數(shù)據(jù)轉(zhuǎn)換的能力強大，完全可以替代 HTML，但是面對成千上萬的已有的站點，直接串通 XML還為時過早。簡單的說，建立 xhtml的目的就是實現(xiàn)4XHTML向 xml的過渡。目前推薦遵循的是W3C于 1998年 5月 12日推薦 CSS2。純 CSS布局與結(jié)構(gòu)式 xhtml結(jié)合能幫助設(shè)計師分離外觀與結(jié)構(gòu)，使站點的訪問及維護更加容易。根據(jù) W3C 規(guī)范訪問頁面其它的標(biāo)準(zhǔn)組件。(2)ECMAScriptECMAScript是 ECMA（European Computer Manufacturers Association) 制訂的標(biāo)準(zhǔn)腳本語言 JAVAScript。CSS是 Caseading Style Sheets 的簡稱。我們對CSS樣式并不陌生，在網(wǎng)上沖浪時，幾乎隨時都在與 CSS打交道，在網(wǎng)頁上沒有使用過 CSS的網(wǎng)頁可能不好找，不管你用什么工具軟件制作網(wǎng)頁，都在有意無意的使用 CSS。5第二章 DIV+CSS 詳解第一節(jié) DIV+CSS 簡介CSS 是 英 語 Cascading Style Sheets（ 層 疊 樣 式 表 單 ） 的 縮 寫 ， 它 是 一種 用 來 表 現(xiàn) HTML 或 XML 等 文 件 式 樣 的 計 算 機 語 言 。HTML 語言自 ，不再發(fā)布新版本，原因就在于 HTML語言正變得越來越復(fù)雜化、專用化。使得網(wǎng)頁更加容易擴展，適合自動數(shù)據(jù)交換，并且更加規(guī)整。以下是 DIV+CSS的特點簡介：① 符合 W3C標(biāo)準(zhǔn)。這一點是最重要的，因為這保證您的網(wǎng)站不會因為將來網(wǎng)絡(luò)應(yīng)用的升級而被淘汰。③ 搜索引擎更加友好。④ 樣式的調(diào)整更加方便。 現(xiàn)在 YAHOO,MSN等國際門戶網(wǎng)站，網(wǎng)易，新浪等國內(nèi)門戶網(wǎng)站，和主流的 ，均采用 DIV+CSS的框架模式，更加印證了 DIV+CSS是大勢所趨。 　?、?表現(xiàn)和結(jié)構(gòu)分離，在團隊開發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。 ②在網(wǎng)頁上創(chuàng)建嵌入的樣式表。 ④每一種方法均有其優(yōu)缺點： 當(dāng)要在站點上所有或部份的網(wǎng)頁上一致地應(yīng)用相同樣式時，可使用外部樣式表。如果人們決定更改樣式，只需在外部樣式表 — 中作一次更改 — 而該更改會反映到所有與該樣式表相鏈接的網(wǎng)頁上。 當(dāng)人們只是要定義當(dāng)前網(wǎng)頁的樣式，可使用嵌入的樣式表。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。 如果網(wǎng)頁鏈接到外部樣式表，為網(wǎng)頁所創(chuàng)建的內(nèi)嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。而且也有益于蜘蛛爬行到網(wǎng)站深處。CSS編寫容易，可以像寫 html代碼一樣輕松地編寫 CSS。網(wǎng)站改版方便，只要修改 CSS文件就可以重新構(gòu)建網(wǎng)站?？芍貜?fù)使用，編程完成多處使用。你可以將站點上所有的網(wǎng)頁風(fēng)格都使用一個 CSS文件進行控制，只要修改這個CSS文件中相應(yīng)的行，那么整個站點的所有頁面都會隨之發(fā)生變動。前面就提到過，div+css 是將 css文件和 html文件分開的，當(dāng)用戶點擊網(wǎng)站時，是在同時下載 css文件和 html文件，所以可以提高打開網(wǎng)頁的速度，而 table是必須以標(biāo)簽開始到結(jié)束才能顯示網(wǎng)頁內(nèi)容。如果你不是 javascrput的高手，你可以不必去寫 ID，只用 class就可以。Table 中布局中，垃圾代碼會很多，一些修飾的樣式及布局的代碼混合一起，很不利于直觀。五、相對表格的嵌套問題在一些文章是稱，搜索引擎一般不喜歡抓取三層以上的表格嵌套，這一點一直沒有得到搜索引擎官方的證實。使用 Table布局，為了達到一定的視覺效果，不得不套用多個表格。網(wǎng)站中過多的相似頁面會影響排名及域名信任度。如果我們在設(shè)計時運用于基于 XTHML標(biāo)準(zhǔn)的 DIV+CSS布局，在設(shè)計完成要盡可能的完善到能通過 W3C驗證。這一點或許會有爭議，但至少這樣不會有什么壞處。第四節(jié) div+css 布局方式對于網(wǎng)站 DIV+CSS設(shè)計越來越受到業(yè)界的關(guān)注，從個人網(wǎng)站到企業(yè)及門戶網(wǎng)站，頁面設(shè)計人員已經(jīng)將 DIV+CSS作為了業(yè)界標(biāo)準(zhǔn)。其中的內(nèi)容，就是血肉。那么，就要從 DIV的布局開始。 DIV 的 起 始 標(biāo) 簽 和 結(jié) 束 標(biāo) 簽 之 間 的 所 有 內(nèi) 容 都 是 用 來 構(gòu) 成 這 個塊 的 ， 其 中 所 包 含 元 素 的 特 性 由 DIV標(biāo) 簽 的 屬 性 來 控 制 ， 或 者 是 通 過 使 用 樣式 表 格 式 化 這 個 塊 來 進 行 控 制 。比 如 ： 騰 訊 網(wǎng) 、 IBM 官 網(wǎng) 、 等 等 。 從 整 體 布 局 來 看 ， 采用 的 是 單 欄 式 ， 是 頁 面 看 上 去 簡 潔 大 方 ， 現(xiàn) 在 的 網(wǎng) 頁 布 局 主 流 也 從 繁 雜 華 麗轉(zhuǎn) 變 到 簡 單 大 方 ， 個 人 也 比 較 推 崇 后 者 。 本 網(wǎng) 站 的 骨 架 架 構(gòu) 如 下 圖： 圖 設(shè) 計 中 網(wǎng) 站 的 骨 架 圖第五節(jié) div+css 理論概述10一、理解 CSS盒子模型什么是 CSS的盒子模式呢？為什么叫它是盒子？在網(wǎng)頁設(shè)計中常聽到一些屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。與現(xiàn)實聯(lián)系起來后對這種模式就更為容易接受了，方便了我們后期的教學(xué)。三、實現(xiàn)結(jié)構(gòu)與表現(xiàn)分離這也用 CSS布局的特色所在，結(jié)構(gòu)與表現(xiàn)分離后，代碼才簡潔，更新才方便。第六節(jié) div+css 的兼容性問題一、div 的垂直居中問題 verticalalign:middle。 然后插入文字，就垂直居中了。二、margin 加倍的問題 設(shè)置為 float的 div在 ie下設(shè)置的 margin會加倍。解決方案是在這個 div里面加上 display:inline。 width:100px。 //這種情況之下IE會產(chǎn)生 200px的距離 display:inline。Inline 元素的特點是,和其他元素在同一行上,不可控制(內(nèi)嵌元素)。 //可以為內(nèi)嵌元素模擬為塊元素 display:inline。四、IE 與寬度和高度的問題 IE不認得 min這個定義，但實際上它把正常的 width和 height當(dāng)作有min的情況來使。五、頁面的最小寬度min width是個非常方便的 CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。為了讓這一命令在 IE上也能用，可以把一個div 放到 body 標(biāo)簽下，然后為 div指定一個類。七、IE 捉迷藏的問題當(dāng) div應(yīng)用復(fù)雜的時候每個欄中又有一些鏈接，DIV 等這個時候容易發(fā)生捉迷藏的問題。 解決辦法：對layout 使用 lineheight屬性 或者給layout 使用固定高和寬。 八、IE6 下為什么圖片下有空隙產(chǎn)生解決這個 BUG的方法也有很多,可以是改變 html的排版,或者設(shè)置 img 為display:block 或者設(shè)置 verticalalign 屬性為 verticalalign:top | bottom |middle |textbottom 。使用 Dreamweaver可以輕松創(chuàng)建跨平臺、跨瀏覽器的頁面。Dreamweaver可以為用戶做到：使用動態(tài) HTML功能（例如具有動態(tài)效果的層和行為）而不用寫一行代碼。Dreamweaver還是一個可以完全自定義的應(yīng)用程序。至于 Dreamweaver工作區(qū)是非常靈活的，因此它可以適應(yīng)各種不同的工作風(fēng)格和使用水平。② 裝載器中包含一些打開和關(guān)閉常用檢查器和模板的按鈕。④ 屬性檢查器顯示選定對象的屬性。⑥ 可固定的浮動工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中。① 文字處理更加方便② 增加的圖層集使圖層管理更有序。④ 將所有工具的選項板改進為工具選項欄放置在工作區(qū)頂部，方便先項參數(shù)的設(shè)置。15第三章 網(wǎng)站總體分析和設(shè)計第一節(jié) 網(wǎng)站開發(fā)的需求分析隨著網(wǎng)絡(luò)技術(shù)的餓不斷發(fā)展,網(wǎng)絡(luò)應(yīng)用已經(jīng)滲透到人類社會的各個角落作為網(wǎng)絡(luò)，世界色支撐點的網(wǎng)站,更是人們關(guān)注的熱點：政府利