使用div+css開發(fā)個人網(wǎng)站畢業(yè)設計

使用div+css開發(fā)個人網(wǎng)站畢業(yè)設計TOC\o"1-5"\h\z、乙 >. T刖 言 1\o"CurrentDocument"第一章網(wǎng)站開發(fā)背景 2\o"CurrentDocument"第一節(jié)WEB概述 2\o"CurrentDocument"一、認識WEB 2\o"CurrentDocument"二、認識WEB2.0標準 2\o"CurrentDocument"第二章DIV+CSS詳解 5\o"CurrentDocument"第一節(jié)DIV+CSS簡介 5\o"CurrentDocument"第二節(jié)級聯(lián)樣式表簡介 6\o"CurrentDocument"第三節(jié)DIV+CSS布局的優(yōu)點 6\o"CurrentDocument"一、利于搜索引擎蜘蛛爬行 6\o"CurrentDocument"二、易于修改 7\o"CurrentDocument"三、減少網(wǎng)頁加載時間 7\o"CurrentDocument"四、代碼精簡 7\o"CurrentDocument"五、相對表格的嵌套問題 8\o"CurrentDocument"六、搜索排名的影響 8\o"CurrentDocument"第四節(jié)div+css布局方式 8\o"CurrentDocument"第五節(jié)div+css理論概述 9\o"CurrentDocument"一、理解CSS盒子模型 9\o"CurrentDocument"二、轉(zhuǎn)變思路 10\o"CurrentDocument"三、實現(xiàn)結構與表現(xiàn)分離 11\o"CurrentDocument"第六節(jié)div+css的兼容性問題 11\o"CurrentDocument"一、div的垂直居中問題 11\o"CurrentDocument"二、margin力口倍的問題 11\o"CurrentDocument"三、浮動ie產(chǎn)生的雙倍距離 11\o"CurrentDocument"四、IE與寬度和高度的問題 11\o"CurrentDocument"五、頁面的最小寬度 12\o"CurrentDocument"六、DIV浮動IE文本產(chǎn)生3象素的bug 12\o"CurrentDocument"七、IE捉迷藏的問題 12\o"CurrentDocument"八、IE6下為什么圖片下有空隙產(chǎn)生 12\o"CurrentDocument"第二章開發(fā)工具的介紹 13\o"CurrentDocument"第一節(jié)夢幻網(wǎng)頁的編織者——Dreamweaver 13\o"CurrentDocument"第二節(jié)圖形、圖像編輯設計軟件制作軟件一一AdobePhotoshopcs2 13\o"CurrentDocument"第三章網(wǎng)站總體分析和設計 15\o"CurrentDocument"第一節(jié)網(wǎng)站開發(fā)的需求分析 15\o"CurrentDocument"第二節(jié)網(wǎng)站的總體設計 16\o"CurrentDocument"第三節(jié)整體風格設計 19\o"CurrentDocument"一、頁面屬性設計 19\o"CurrentDocument"二、色彩搭配 19\o"CurrentDocument"三、連接效果 20\o"CurrentDocument"四、導航設計 20五、細節(jié)設計 21\o"CurrentDocument"第四節(jié)首頁設計 21\o"CurrentDocument"一、DIV分布和概述 21\o"CurrentDocument"二、搜索關鍵字與描述 23\o"CurrentDocument"第五節(jié)其他頁面設計 23\o"CurrentDocument"第四章網(wǎng)站的測試 29\o"CurrentDocument"第五章后續(xù)工作 30結論 31結束語 32\o"CurrentDocument"附錄一：網(wǎng)站首頁效果圖 33附錄二：部分代碼 34前百當今世界已進入信息時代，Internet成為21世紀最受關注的行業(yè)之一，它的飛速發(fā)展和在全球范圍的普及應用正在給人類生活帶來革命性變化。網(wǎng)絡技術的發(fā)展也取得了巨大的成就，為網(wǎng)站開發(fā)提供了很好的技術支持。網(wǎng)站已經(jīng)成為現(xiàn)階段眾多企業(yè)不可或缺的網(wǎng)絡營銷平臺，互聯(lián)網(wǎng)應用規(guī)模正不斷擴大。其中，特別是中小型企業(yè)，對于網(wǎng)絡平臺搭建的需要求相當?shù)钠惹小８鞔箝T戶網(wǎng)，企業(yè)網(wǎng)都在WEB2.0的標準上,采用CSS+DIV來布局網(wǎng)站，所以才有了此次的選題。論文詳細論述了一個基于公司網(wǎng)站的開發(fā)的設計過程。在技術上，采用了Dreamweaver網(wǎng)站開發(fā)工具，以HTML的超大功能結合JAVAScript的客戶端語言，并加以FLASH等動畫以增加網(wǎng)站的動態(tài)效果。這樣的構造有利于以后對網(wǎng)站系統(tǒng)開發(fā)的把握，并給以后的開發(fā)積累一定的經(jīng)驗，提升編程能力。其中，最主要的就是介紹和展示DIV+CSS在網(wǎng)頁中的最用和魅力。本文實現(xiàn)了首頁、新聞、案例、介紹、聯(lián)系、搜索、留言、聯(lián)系我們、等功能，全面化個人網(wǎng)站的需求。論文組織如下：首先闡述了該系統(tǒng)的開發(fā)背景、意義，詳細介紹了div+css理論知識；其次介紹了相關的開發(fā)工具及技術基礎；接著對網(wǎng)站的需求進行了分析，并提出了具體的設計方案；然后展現(xiàn)了整個系統(tǒng)的具體實現(xiàn)，包括網(wǎng)頁的設計和連接，各功能模塊的實現(xiàn)；最后對該網(wǎng)站進行了嚴格的測試。第一章網(wǎng)站開發(fā)背景第一節(jié)web概述一、認識WEBweb本意是蜘蛛網(wǎng)和網(wǎng)的意思?，F(xiàn)廣泛譯作網(wǎng)絡、互聯(lián)網(wǎng)等技術領域。表現(xiàn)為三種形式，即超文本(hypertext)、超媒體(hypermedia)、超文本傳輸協(xié)議(HTTP)等。Web(WorldWideWeb,簡稱WWW，又稱萬維網(wǎng))是目前Internet上應用最廣泛也是最重要的信息服務類型，它的影響已經(jīng)進入了Internet上的廣告、新聞、電子商務和展示信息等各個服務領域。Web采用瀏覽器/服務器(B/S)工作模式，其運作模式可以描述為：請求一處理一應答。Web以超文本標記語言HTML(HyperTextMarkupLanguage)與超文本傳輸協(xié)議HTTP(HyperTextTransferProtocol)為基礎，通過瀏覽器為用戶提供方便友好的信息瀏覽界面。Web將位于全世界互聯(lián)網(wǎng)上不同網(wǎng)址的相關信息有機地編織在一起。在Web服務方式中，信息以頁面(或稱Web頁)的形式存儲在Web服務器中，這些頁面采用超文本的方式對信息進行組織，通過鏈接將一頁信息鏈接到另一頁信息。這些相互鏈接的頁面既可以放置在同一臺主機上，也可以放置在不同的主機上。頁面到頁面的鏈接信息由統(tǒng)一資源定位器URL(UniformResourceLocator)維持。用戶通過客戶端應用程序(即瀏覽器)向Web服務器發(fā)出請求，服務器根據(jù)客戶端的請求將保存在服務器中的某個頁面返回給客戶端，瀏覽器接收到頁面后對其進行解釋，最終將信息以圖、文、聲并茂的形式呈現(xiàn)給用戶。Web服務的特點在于高度的集成性，它能夠?qū)崿F(xiàn)不同類型的信息(如文本、圖像、聲音、動畫和視頻等)和服務(如New、FTP、Telnet、Gopher及Mail等)的無縫鏈接，特別適合于廣域網(wǎng)中信息的組織、檢索與顯示。二、認識WEB2.0標準“Web2.0”的概念開始于一個會議中，展開于O'Reilly公司和MediaLive國際公司之間的頭腦風暴部分。所謂互聯(lián)網(wǎng)先驅(qū)和 O'Reilly公司副總裁的戴爾?多爾蒂(DaleDougherty)注意到，同所謂的“崩潰”迥然不同，互聯(lián)網(wǎng)比其他任何時候都更重要，令人激動的新應用程序和網(wǎng)站正在以令人驚訝的規(guī)律性涌現(xiàn)出來。更重要的是，那些幸免于當初網(wǎng)絡泡沫的公司，看起來有一些共同之處。那么會不會是互聯(lián)網(wǎng)公司那場泡沫的破滅標志了互聯(lián)網(wǎng)的一種轉(zhuǎn)折，以至于呼吁“Web2.0”的行動有了意義？我們都認同這種觀點，Web2.0會議由此誕生。WEB標準不是某一個標準，而是一系列的標準集合，網(wǎng)頁主要是由三部分組成：結構(structure)、表現(xiàn)(presentation)、和行為(behavior)。對應的標準也分為三個方面：結構化標準語言主要包括XHTML和XML，表現(xiàn)標準語言主要包括CSS，行為標準主要包括對象模型(如W3CDOM)、ECMAScripr等。這些標準大部分由W3C起草和發(fā)布，也有一些是其他標準組織制訂的標準， 比如ECMA(EuropeancomputerManufacturersAsscoiation)的ECMASscript標準。我們來簡單了解下這些標準：1、結構標準語言XML是TheExtensibleMarkupLanguage(可擴展標識語言)的簡寫。目前推薦遵循的是W3C于2000年10月6日發(fā)布的XML1.0，參考WWW.W3.ORG/TR/2000/REC-XML-30001006。和xthml一樣，xml同樣是來源于SGML，但是xml是一種能定義其他語言的語。xml最初設計的目的是彌補html的不足，以強大的擴展性媽祖網(wǎng)絡信息發(fā)布的需要，夠來逐漸用于網(wǎng)絡數(shù)據(jù)的轉(zhuǎn)換和描述。關于xml的好處和技術規(guī)范描寫，這里就不說了有更多的數(shù)據(jù)可供分廿參考。xhtml是TheExtensibleHapertextMarkupLanguage可擴展標識語言的縮寫。目前推薦遵循的是W3C于2000年1月26日發(fā)布的XthML1.0，xml雖然是數(shù)據(jù)轉(zhuǎn)換的能力強大，完全可以替代HTML，但是面對成千上萬的已有的站點，直接串通XML還為時過早。因此，我們在HTML4.0的基礎上，用XML的規(guī)則對其進行擴展，得到了xhtml。簡單的說，建立xhtml的目的就是實現(xiàn)XHTML向xml的過渡。2、表現(xiàn)標準語言CSS是CaseadingStyleSheets層疊樣式表的縮寫。目前推薦遵循的是W3C于1998年5月12日推薦CSS2oW3C創(chuàng)建CSS標準的目的是以CSS取代表格式布局、幀和其它表現(xiàn)的語言。純CSS布局與結構式xhtml結合能幫助設計師分離外觀與結構，使站點的訪問及維護更加容易。3、行為標準(1)DOMDOM是DocumentObjectModel文檔對象模型的縮寫。根據(jù)W3C規(guī)范/dom/,DOM是一種瀏覽器，平臺，語言的借口，使得你可以訪問頁面其它的標準組件。簡單的理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設計師和開發(fā)者一個標準的方法，讓他們來訪問他們站點中的數(shù)據(jù)、腳本和表現(xiàn)層對象。(2)ECMAScriptECMAScript是ECMA(EuropeanComputerManufacturersAssociation)制訂的標準腳本語言)人丫人5討1口匕目前推薦遵循的是ECMAScript262。CSS是CaseadingStyleSheets的簡稱。實際上它是一組樣式。我們對CSS樣式并不陌生，在網(wǎng)上沖浪時，幾乎隨時都在與CSS打交道，在網(wǎng)頁上沒有使用過CSS的網(wǎng)頁可能不好找，不管你用什么工具軟件制作網(wǎng)頁，都在有意無意的使用CSS。用好CSS能使你的網(wǎng)頁更加的簡練，為什么同樣內(nèi)容的網(wǎng)頁，有的人能做出及時KB，而高手做出來的只有十幾KB，CSS在其中的作用是不言而喻的。第二章DIV+CSS詳解第一節(jié)DIV+CSS簡介CSS是英語CascadingStyleSheets（層疊樣式表單）的縮寫，它是一種用來表現(xiàn)HTML或XML等文件式樣的計算機語言。DIV+CSS是網(wǎng)站標準（或稱“WEB標準”）中常用術語之一，div+css是一種網(wǎng)頁的布局方法,這一種網(wǎng)頁布局方法有別于傳統(tǒng)的HTML網(wǎng)頁設計語言中的表格（table）定位方式，真正地達到了w3c內(nèi)容與表現(xiàn)相分離。HTML語言自HTML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復雜化、專用化。XHTML語言是一種可以將HTML語言標準化，用XHTML語言重寫后的HTML頁面可以應用許多XML應用技術。使得網(wǎng)頁更加容易擴展，適合自動數(shù)據(jù)交換，并且更加規(guī)整。在XHTML網(wǎng)站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現(xiàn)各種定位。以下是DIV+CSS的特點簡介：①符合W3C標準。微軟等公司均為W3C支持者。這一點是最重要的，因為這保證您的網(wǎng)站不會因為將來網(wǎng)絡應用的升級而被淘汰。②支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是IE7或者是火狐，您的網(wǎng)站都能很好的兼容。③搜索引擎更加友好。相對與傳統(tǒng)的table,采用DIV+CSS技術的網(wǎng)頁，對于搜索引擎的收錄更加友好。④樣式的調(diào)整更加方便。內(nèi)容和樣式的分離，使頁面和樣式的調(diào)整變得更加方便?，F(xiàn)在YAHOO,MSN等國際門戶網(wǎng)站，網(wǎng)易，新浪等國內(nèi)門戶網(wǎng)站，和主流的WEB2.0網(wǎng)站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢所趨。⑤CSS的極大優(yōu)勢表現(xiàn)在簡潔的代碼，對于一個大型網(wǎng)站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。⑥表現(xiàn)和結構分離，在團隊開發(fā)中更容易分工合作而減少相互關聯(lián)性。第二節(jié)級聯(lián)樣式表簡介有三種方法可以在站點網(wǎng)頁上使用樣式表：①將網(wǎng)頁鏈接到外部樣式表。②在網(wǎng)頁上創(chuàng)建嵌入的樣式表。③應用內(nèi)嵌樣式到各個網(wǎng)頁元素。④每一種方法均有其優(yōu)缺點：當要在站點上所有或部份的網(wǎng)頁上一致地應用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，并將它們鏈接到所有網(wǎng)頁，便能確保所有網(wǎng)頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表一中作一次更改一而該更改會反映到所有與該樣式表相鏈接的網(wǎng)頁上。通常外部樣式表以.css做為文件擴展名，例如Mystyles.css。當人們只是要定義當前網(wǎng)頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯(lián)樣式表，“嵌”在網(wǎng)頁的＜HEAD＞標記符內(nèi)。嵌入的樣式表中的樣式只能在同一網(wǎng)頁上使用。使用內(nèi)嵌樣式以應用級聯(lián)樣式表屬性到網(wǎng)頁元素上。如果網(wǎng)頁鏈接到外部樣式表，為網(wǎng)頁所創(chuàng)建的內(nèi)嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。第三節(jié)DIV+CSS布局的優(yōu)點一、利于搜索引擎蜘蛛爬行根據(jù)總結和經(jīng)驗，div+css布局有利于蜘蛛的爬行，拿html的table布局和div+css布局的網(wǎng)頁來做對比，很顯然table的字節(jié)大于div+css的，字節(jié)小就有益于搜索引擎蜘蛛下載頁面所用的時間，縮減頁面代碼量，可以提高頁面瀏覽速度。而且也有益于蜘蛛爬行到網(wǎng)站深處。二、易于修改提高易用性，使用CSS可以結構化HTML,可以輕松控制頁面的布局。CSS編寫容易，可以像寫html代碼一樣輕松地編寫CSS。在一般情況下，div+css布局的網(wǎng)站，都是將html頁面和css文件分開的，div+css的特點就是能將網(wǎng)頁的內(nèi)容和表現(xiàn)形式分離，將設計部分剝離出來放在一個獨立樣式文件中，你可以減少未來網(wǎng)頁無效的可能。網(wǎng)站改版方便，只要修改CSS文件就可以重新構建網(wǎng)站。所以，假如你要修改網(wǎng)站整站布局的話，一般只需要修改css文件里的的個別屬性即可，而這種特點是table不具備的。可重復使用，編程完成多處使用。你可以將許多網(wǎng)頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網(wǎng)頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那么整個站點的所有頁面都會隨之發(fā)生變動。三、減少網(wǎng)頁加載時間縮減頁面代碼量，可以提高頁面瀏覽速度，在幾乎所有的瀏覽器上都可以使用。前面就提到過，div+css是將css文件和html文件分開的，當用戶點擊網(wǎng)站時，是在同時下載css文件和html文件，所以可以提高打開網(wǎng)頁的速度，而table是必須以標簽開始到結束才能顯示網(wǎng)頁內(nèi)容。另外，div的html文件則是邊加載邊顯示，這樣是不是提高了用戶體驗？Google已經(jīng)將網(wǎng)頁加載速度列入了排名的因素，盡管這個因素只能影響排名的一小部分，甚至可以忽略，但是有利于seo的辦法，我們?yōu)槭裁床挥茫克?、代碼精簡如果使用DIV+CSS布局，網(wǎng)頁的頁面代碼精簡，使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。如果你不是javascrput的高手，你可以不必去寫ID，只用class就可以。當客戶端程序員寫完程序，需要調(diào)整時候，你可以在利用他的ID進行控制。Table中布局中，垃圾代碼會很多，一些修飾的樣式及布局的代碼混合一起，很不利于直觀。而Div更能體現(xiàn)樣式和結構相分離，結構的重構性強。

五、相對表格的嵌套問題在一些文章是稱，搜索引擎一般不喜歡抓取三層以上的表格嵌套，這一點一直沒有得到搜索引擎官方的證實。我的也不能完全肯定是不是，就目前掌握的情況來看，在解析Table布局的頁面，遇到多層表格嵌套時，會跳過嵌套的內(nèi)容或直接放棄整個頁面。使用Table布局，為了達到一定的視覺效果，不得不套用多個表格。如果嵌套的表格中是核心內(nèi)容，解析時跳過了這一段沒有抓取到頁面的核心，這個頁面就成了相似頁面。網(wǎng)站中過多的相似頁面會影響排名及域名信任度。六、搜索排名的影響頁面結構簡潔清晰，容易被搜索引擎搜索到完成了對網(wǎng)站優(yōu)化工作。如果我們在設計時運用于基于XTHML標準的DIV+CSS布局，在設計完成要盡可能的完善到能通過W3C驗證。事實證明使用XTHML架構的網(wǎng)站排名狀況一般都不錯。這一點或許會有爭議，但至少這樣不會有什么壞處。方便搜索引擎的搜索，用只包含結構化內(nèi)容的HTML代替嵌套的標簽，搜索引擎將更有效地搜索到你的內(nèi)容，并可能給你一個較高的評價。第四節(jié)div+css第四節(jié)div+css布局方式對于網(wǎng)站DIV+CSS設計越來越受到業(yè)界的關注，從個人網(wǎng)站到企業(yè)及門戶網(wǎng)站，頁面設計人員已經(jīng)將DIV+CSS作為了業(yè)界標準。如果用DIV+CSS來構建和美化網(wǎng)站，那么DIV就是整個網(wǎng)站的骨架，CSS樣式就是網(wǎng)站的衣服。其中的內(nèi)容，就是血肉。要入手設計一個網(wǎng)站。那么，就要從DIV的布局開始。DIV元素是用來為HTML文檔內(nèi)大塊(block-level)的內(nèi)容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內(nèi)容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。各大個人網(wǎng)、企業(yè)網(wǎng)、門戶網(wǎng)基本上都在推崇DIV+css這一布局方式。比如：騰訊網(wǎng)、IBM官網(wǎng)、等等。其中就以IBM官網(wǎng)來說，頂部是導航，下面為FLASH，底部用UL列舉出公司各項服務的連接。從整體布局來看，采用的是單欄式，是頁面看上去簡潔大方，現(xiàn)在的網(wǎng)頁布局主流也從繁雜華麗轉(zhuǎn)變到簡單大方，個人也比較推崇后者。所以對于重慶逸飛咨詢有限公司的網(wǎng)站也從DIV+CSS著手，模仿IBM官網(wǎng)div布局。本網(wǎng)站的骨架架構如下圖2.1：導航信息內(nèi)容信息底部信息圖2.1設計中網(wǎng)站的骨架圖第五節(jié)div+css理論概述一、理解CSS盒子模型什么是CSS的盒子模式呢？為什么叫它是盒子？在網(wǎng)頁設計中常聽到一些屬性名：內(nèi)容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。盒模型3D效果圖如下圖2.2所示：CSS2c盒模型接次3D示意圖 …小酬心電圖2.2css2.0盒模型在網(wǎng)頁設計上，內(nèi)容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現(xiàn)實生活中盒子不同，CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞。與現(xiàn)實聯(lián)系起來后對這種模式就更為容易接受了，方便了我們后期的教學。二、轉(zhuǎn)變思路傳統(tǒng)的前臺網(wǎng)頁設計是這樣進行的：根據(jù)要求，先考慮好主色調(diào)，要用什么類型的圖片，用什么字體、顏色等等，然后再用Photoshop這類軟件做出網(wǎng)站的小樣，最后再切成小圖，通過設計HTML生成頁面，改用CSS排版后，我們要轉(zhuǎn)變這個思路，此時我們主要考慮的是頁面內(nèi)容的語義和結構，因為一個強CSS控制的網(wǎng)頁，等做好網(wǎng)頁后，你還可以輕松的調(diào)用你想要的網(wǎng)頁風格，況且CSS排版的另外一個目的是讓代碼易讀，區(qū)塊分明，強化代碼重用，所以結構很重要。10三、實現(xiàn)結構與表現(xiàn)分離這也用CSS布局的特色所在，結構與表現(xiàn)分離后，代碼才簡潔，更新才方便。給出一個實例，對比把樣式寫進去和分離開的區(qū)別，進一步說明結構與表現(xiàn)分離的優(yōu)點，在這里建議學生單獨建立css文件與頁面進行鏈接，這樣的方式會使代碼部分更為清淅。第六節(jié)div+css的兼容性問題一、div的垂直居中問題vertical-align:middle;將行距增加到和整個DIV一樣高line-height:200px;然后插入文字，就垂直居中了。缺點是要控制內(nèi)容不要換行。二、margin加倍的問題設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div里面加上display:inline;三、浮動ie產(chǎn)生的雙倍距離#box{float:left;width:100px;margin:000100px;//這種情況之下IE會產(chǎn)生200px的距離display:inline;〃使浮動忽略}這里細說一下block與inline兩個元素：block元素的特點是，總是在新行上開始,高度,寬度,行高,邊距都可以控制（塊元素）；Inline元素的特點是,和其他元素在同一行上,不可控制（內(nèi)嵌元素）；#box{display:block;//可以為內(nèi)嵌元素模擬為塊元素display:inline;〃實現(xiàn)同一行排列的效果diplay:table。四、IE與寬度和高度的問題11IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度，比如要設置背景圖片，這個寬度是比較重要的。五、頁面的最小寬度min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個＜div＞放到＜body＞標簽下，然后為div指定一個類。六、DIV浮動IE文本產(chǎn)生3象素的bug左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內(nèi)的文本會離左邊有3px的間距。七、IE捉迷藏的問題當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發(fā)生捉迷藏的問題。有些內(nèi)容顯示不出來，當鼠標選擇這個區(qū)域是發(fā)現(xiàn)內(nèi)容確實在頁面。解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構盡量簡單。八、IE6下為什么圖片下有空隙產(chǎn)生解決這個BUG的方法也有很多，可以是改變html的排版，或者設置img為display:block或者設置vertical-align屬性為vertical-align:top|bottom|middle|text-bottom都可以解決.等各種解決兼容性問題。12第二章開發(fā)工具的介紹第一節(jié)夢幻網(wǎng)頁的編織者 DreamweaverDreamweaver是創(chuàng)建和管理網(wǎng)頁的專業(yè)化可視編輯器。使用Dreamweaver可以輕松創(chuàng)建跨平臺、跨瀏覽器的頁面。Macromedia的RoundtripHTML技術允許用戶隨意導入HTML文檔而無需重新設置代碼格式。Dreamweaver可以為用戶做到：使用動態(tài)HTML功能（例如具有動態(tài)效果的層和行為）而不用寫一行代碼。它甚至還可以檢查用戶的工作成果在所有流行的平臺和瀏覽器中可能發(fā)生的錯誤。Dreamweaver還是一個可以完全自定義的應用程序。用戶可以創(chuàng)建自己的對象和命令修改菜單和快捷鍵，甚至編寫JavaScript代碼擴展Dreamweaver的行為和屬性檢查器。至于Dreamweaver工作區(qū)是非常靈活的，因此它可以適應各種不同的工作風格和使用水平。常用的Dreamweaver工作區(qū)組件有以下若干種：①文檔窗口可顯示當前文檔，文檔的外觀和瀏覽器中看到的非常相似。②裝載器中包含一些打開和關閉常用檢查器和模板的按鈕。③對象工具欄包含創(chuàng)建不同類型的對象（例如圖象、表格和層等）的按鈕。④屬性檢查器顯示選定對象的屬性。⑤快捷菜單可以使用戶對當前選擇或區(qū)域快速執(zhí)行某些命令。⑥可固定的浮動工具欄允許用戶將浮動窗口、檢查器和工具欄組合在一個或多個選擇窗口中。第二節(jié)圖形、圖像編輯設計軟件制作軟件——AdobePhotoshopcs2Photoshopcs2是目前最流行的圖形、圖像編輯設計軟件，在數(shù)碼影像處理、13圖像編輯合成、廣告設計、封面設計、美術繪畫、網(wǎng)頁設計等領域都被廣泛地應用。①文字處理更加方便②增加的圖層集使圖層管理更有序。③新增圖像功能：圖像的剪切和剪裁更加方便。④將所有工具的選項板改進為工具選項欄放置在工作區(qū)頂部，方便先項參數(shù)的設置。⑤為了更方便地用路徑繪畫，改進增加了幾何形狀工具，通過選擇工具的不同工作模式，可創(chuàng)建路徑、幾何形狀或幾何填充區(qū)，使得矢量繪圖功能得到了加強。14第三章網(wǎng)站總體分析和設計第一節(jié)網(wǎng)站開發(fā)的需求分析隨著網(wǎng)絡技術的餓不斷發(fā)展，網(wǎng)絡應用已經(jīng)滲透到人類社會的各個角落作為網(wǎng)絡，世界色支撐點的網(wǎng)站，更是人們關注的熱點：政府利用網(wǎng)站宣傳自己的施政綱領，日益成為與百姓交流的直通車；企業(yè)利用網(wǎng)站宣傳自己的形象，挖掘無限商機，個人利用網(wǎng)站展示個性風采,創(chuàng)建彼此溝通的橋梁.越來越多的企業(yè)希望擁有網(wǎng)。建立個人網(wǎng)站要有一個清晰的網(wǎng)站布局。比如說，導航條要不要？很多人說那東西人人在做，就顯得太俗沒個性，難顯示出新潮。但導航條之所以有那么多人在用，是因為它給瀏覽者一個明確的布局，便利人們查找本身所需的信息。從某種角度上說，大家都在用的東西就說明它確實被大家所接受。要清楚網(wǎng)站做出來是給每一個人普通用戶看的。網(wǎng)站還要經(jīng)常更新，給人以新意。設計技術的成長，帶來了網(wǎng)頁世界的繁榮。尤其在崇尚個性的今天，設計者們更是將頁面設計表示的淋漓盡致。用戶欣喜的看到那些僵化的設計模式正在被逐個打破，網(wǎng)頁設計充滿了朝氣。但是，作為網(wǎng)頁設計者，不能一味的只追求個性的表現(xiàn)，還必需兼顧到用戶和客戶的習慣，在表現(xiàn)本身的風格的同時，在功能上使用戶更加便利。網(wǎng)站導航結構圖如下圖3.1所示：圖3.1網(wǎng)站導航功能15需求結果：生成5個頁面，index.HTML 網(wǎng)站首頁；blog.html 網(wǎng)站新聞；notes.html網(wǎng)站案例；styles.html網(wǎng)站介紹；lianxi.html網(wǎng)站聯(lián)系。第二節(jié)網(wǎng)站的總體設計與傳統(tǒng)媒體不同，網(wǎng)頁除了文字和圖像以外，還包含聲音、視頻和動畫等新興多媒體元素，更借助由代碼語言編程所實現(xiàn)的各種交互式效果，增加了網(wǎng)頁界面的生動性和復雜性，也使得網(wǎng)頁設計者需要考慮更多頁面元素的排布、優(yōu)化。一般來說，網(wǎng)頁的界面主要由下面幾個因素構成：①文字：文字元素是信息傳達的主體部分。網(wǎng)頁中的文字主要包括標題、信息、文字鏈接、幾種主要形式。標題和傳統(tǒng)媒體中信息傳達的基本作用相同，是內(nèi)容的簡概說明一般比較醒目、優(yōu)先編排。文字作為占據(jù)頁面重要比率的元素，同時又是信息重要載體，它的字體、大小、顏色和排布對頁面整體設計影響極大。我所使用的文字是宋體12號，因為這樣看得比較清楚，使整個頁面整潔，網(wǎng)頁中都普遍的使用，讓顧客一看就忍不住繼續(xù)看，所以在此我選擇12號宋體作為網(wǎng)頁的主體文字樣式。②圖形：圖形在網(wǎng)頁界面中具有重要作用。合理的運用圖形，可以生動直觀、形象地表現(xiàn)設計主題。網(wǎng)頁中常用的圖形格式包括jpg和gif，這兩種格式壓縮比高，得到了規(guī)范瀏覽器的支持，下載速度快，具有跨平臺的特性，不需要瀏覽器安裝插件即可直接閱覽。圖形元素包括標題、背景、主圖、鏈接圖標四種。我所使用的圖片主要是自己收集的比較精美。如下圖3.2：16

跟隨我們道行中博客帖子道行中圖3.2圖案展示跟隨我們道行中博客帖子道行中圖3.2圖案展示③頁面版式：版式是網(wǎng)頁界面設計的重要組成部分，它將文字、圖形等視覺元素進行組合配置，使頁面整體視覺效果美觀和諧，簡單大方，便于閱讀，實現(xiàn)信息傳達的最佳效果。如下圖3.3：17圖3.3頁面版式色彩：彩色網(wǎng)頁比單色網(wǎng)頁更具吸引力；色彩本身具有象征作用。18第三節(jié)整體風格設計一、頁面屬性設計頁面中的整體格式和布局都在stley.css中，其中body設計如下：body{margin:0;padding:0;line-height:1.7em;font-family:"宋體"；font-size:12px;color:#d1c7ba;background:#372e23;)各個頁面的字體為：宋體、大小為12像素，字體顏色#d1c7ba。背景顏色我采用#372e23，#372e23這種背景色它與其他任何顏色的搭配都比較合適，不顯花哨，簡潔大方。Body與頁面的邊距為零。二、色彩搭配打開一個網(wǎng)站，給用戶留下第一印象的既不是網(wǎng)站豐富的內(nèi)容，也不是網(wǎng)站合理的版面布局，而是網(wǎng)站的色彩。色彩對人的視覺效果非常明顯，一個網(wǎng)站設計成功與否，在某種程度上取決于設計者對色彩的運用和搭配。因為網(wǎng)頁設計屬于一種平面效果設計，在排除立體圖形、動畫效果之外，在平面圖上，色彩的沖擊力是最強的，它很容易給用戶留下深刻的印象。因此，在設計網(wǎng)頁時，必須要高度重視色彩的搭配。本網(wǎng)站的搭配主打為：白、灰、藍、三種顏色。白色代表純潔、純真、樸素、神圣、明快?；疑彩且环N很大器的顏色，幾乎能與所有的顏色相輔相成?！被疑蟹N很內(nèi)斂、很隱約的‘暗香襲人’的意味”。藍色是博大的色彩，天空和大海這遼闊的景色都呈蔚藍色。藍色是永恒的象征，它是最冷的色彩。純凈的藍色表19現(xiàn)出一種美麗、文靜、理智、安祥與潔凈。采用這種色彩搭配給游客留下深刻的印象。三、連接效果對于一個頁面不僅要設計其字體和其他風格，還要有鏈接效果，使頁面更加的生動，stley.css中的鏈接效果如下：a,a:link,a:visited{color:#0074c5;text-decoration:none;)a:hover{color:#009900;text-decoration:underline;}頁面的鏈接效果設置為：已經(jīng)訪問的連接樣式字體顏色為白色，無下劃線，字體加粗為正常值；當有鼠標懸停在鏈接上樣式字體顏色為#FFFF33,有下劃線。四、導航設計網(wǎng)站的導航欄目可以讓用戶對網(wǎng)站的內(nèi)容及信息一目了然。導航分為:首頁、新聞、博客、素材、聯(lián)系我們。首先采用div布局，里面嵌套ul形式然后相關css部分。相關代碼如下：Div布局部分：<divid="templatemo_menu”><ul><li><ahref="index.html"class="current”>首頁</a></li><li><ahref="products.html”>新聞</a></li><li><ahref=〃blog.html〃>博客</a></li><li><ahref="gallery.html”>素材</a></li>20<li><ahref="contact.html”>聯(lián)系我們</a></li></ul>五、細節(jié)設計1PX凹陷西線的設計給網(wǎng)頁帶來了分成次的美觀、圖片的選擇給人醒目、大方的感覺、按鈕的設計給顧客賞心悅目的感覺，搜索工具的設計方便了游客輕松的實現(xiàn)網(wǎng)頁功能的搜索。留言效果方便了直接與顧客交流的機會，提高了網(wǎng)站水平。第四節(jié)首頁設計、DIV分布和概述由于個人完整給人的形象應該是專業(yè)、大方，所以主頁的設計和布局我采用大方簡單又不失活潑的原則。首頁整體用1個大的DIV里面包含兩個小的（上下個一個）DIV。Div設置效果為：總體都設置了寬度，居中格式，背景顏色及背景圖片，其他還有內(nèi)邊距，高等。內(nèi)容界面是一個網(wǎng)站走向成功道路上必不可少的因素。網(wǎng)站的內(nèi)容代表著一個好網(wǎng)站的素質(zhì)和形象，所以應該表現(xiàn)的大氣、端莊而且精細。還更要表現(xiàn)出一個網(wǎng)站應該有的朝氣和活力。因此我首先選中色彩搭配比較大方，整體布局比較清晰簡潔的內(nèi)容模式。在首頁的版面，先是用Photoshop對網(wǎng)站模板進行切片，然后用DIV+CSS進行排版。首先自然映入顏面的是logo設計，一個特殊于類似酒瓶的圖標給我們是用心品，只有我們心與心交流加上我們實力制作給網(wǎng)站設計達到一種酒醉的境界，頁面效果如下圖3.4所示：21

中小企業(yè)建網(wǎng)站要考慮商業(yè)回報齦隨我們苣仁中博客帖子譽￡=!=中小企業(yè)建網(wǎng)站要考慮商業(yè)回報齦隨我們苣仁中博客帖子譽￡=!=圖3.4頁面效果根據(jù)因為瀏覽者在閱讀時候經(jīng)常采用從上到下，從左到右的習慣，主體內(nèi)容中，我將“公司簡介”和“博客帖子”各自放一邊，“l(fā)ogo”放在了上面的位置22而且和搜索一起完美搭配這樣能更好地吸引瀏覽者的眼球，同時也體現(xiàn)網(wǎng)站的專業(yè)、得體。底部不僅能夠展示網(wǎng)站的各種優(yōu)點，而且突出顯示出網(wǎng)站整體結尾的完美，看著簡介而又大方得體，真是賞心悅目呀！二、搜索關鍵字與描述為了有利于搜索引擎的收錄，在首頁專門設置了mate信息，設置相關關鍵字和描述。相關代碼如下：<metaname="keywords"content=〃網(wǎng)站素材〃/><metaname="description"content=〃站長素材〃/>第五節(jié)其他頁面設計其他頁面設計整體風格跟主頁布局風格一致，就只是內(nèi)容布局格式不一樣，更加直觀、簡潔明了，其中聯(lián)系頁面附加有留言網(wǎng)站整體風格的源于首頁的改裝，在聯(lián)系頁面中附加了留言內(nèi)容給顧客留下了直接心與心溝通的交流機會，首先心靈溝通直接給人溫暖的感覺，專業(yè)的一塊一心靈溝通模式，讓你們生層次的了解我們，更加有資質(zhì)，實力，專業(yè)，精心為你們服務。接著左邊是留言和公司信息，左邊是博客帖子簡潔大方，給人心情愉悅。新聞網(wǎng)站直接吸引顧客的是網(wǎng)站新聞四個大字，突出顯示新聞的作用，新聞的作用在于建設型網(wǎng)站系列適用于中小型企業(yè)，并以web2.0的核心理念為指導，高端視覺設計需求，及交互性需求。新聞的作用突出本網(wǎng)站品牌，很好的展示本網(wǎng)站的形象，全方位的展示您的想法，互動平臺的搭建，信息功能完善。博客頁面，依然是四個大字首先映入我們顏面的是博客中心，博客中心是介紹專注與人交流，專業(yè)從事心與心的溝通，通過精美的原創(chuàng)網(wǎng)站設計，高質(zhì)量的網(wǎng)站建設，為用戶制作一流的網(wǎng)站。并且介紹網(wǎng)站設計經(jīng)驗，專為中小企業(yè)提供網(wǎng)站建設服務。致力于中小企業(yè)網(wǎng)站建設、網(wǎng)頁設計制作、網(wǎng)站優(yōu)化，為多家中小企事業(yè)單位提供了網(wǎng)站建設及網(wǎng)頁設計服務。博客所關注的領域包含：互聯(lián)網(wǎng)、電腦網(wǎng)絡、網(wǎng)站架設、搜索引擎、編程開發(fā)、社會化網(wǎng)絡、網(wǎng)絡營銷、互聯(lián)網(wǎng)地圖、GoogleEarth、Web2.0等；專注于網(wǎng)站開發(fā)。目前已經(jīng)成長為一個以IT技術為主導，全面發(fā)展而又有自身特色的原創(chuàng)互23聯(lián)網(wǎng)科技博客。站長素材展示的是成功案例產(chǎn)品介紹，產(chǎn)品分類：中小企業(yè)類、門戶類、商城購物類集團品牌高端設計類、教育類等。素材的作用通過成功案例的展示讓顧客深刻了解本公司，所以擁有優(yōu)秀的網(wǎng)站設計是你們公司成功的關鍵，優(yōu)秀的網(wǎng)站首先展示不盡是公司的完美的信息而且表現(xiàn)出公司的實力。您不想讓您的企業(yè)發(fā)展得更快嗎？您不想讓你的企業(yè)產(chǎn)品的知名度更廣嗎？你不想讓您的產(chǎn)品銷量更大嗎？難道您會眼睜睜地看著競爭對手搶走您的定單嗎？為什么同行的生意會越做越好，而您企業(yè)的發(fā)展和產(chǎn)品卻是陷入困境，銷量平平一直不好嗎？所以擁有優(yōu)秀的網(wǎng)站設計是你們公司成功的關鍵，與本公司合作最大的感受就是實力！24圖3.5聯(lián)系我們頁面25B博客帖子正一.邙七工三三二士三.二三■=千廿￡二」二1rLn￡sSftA-M3'?網(wǎng)站新聞■一 一■七網(wǎng)占昆芋豫L系弛T沛咕酸微公司簡介而=士.=.如iii吟2t.*=5&丈咯：/8詫U蕓5^^f口Wr：我就痂不吟:針］fc7tttitA5?.t■1縣立i工:土工武餐中右"?1H丈二Sk_j好毛.尸的乏:=■=,*15.=^=^r=i~::上三-V1二KF甘：；？土d二而克二送廿KK可NG」言各IW三口二十友跟隨我們博客帖子二W三澄三羨二￡中至三不=i*.1Lii■一三F二二三二=三三三at三r-TtgjjE-許鵬夫.一土丁4G:^=5：=三工二KF=!?iix^kh=*六二：.^-：：<■1；=；：=..l^_.r--='r--z-'T-?±_-：---=?,^jrt?t?i*mi*fcumc^=*+3.r片強外HJlrtiH贓法上口?專中三12nHl"二中日w過土界勢03社帔的=甲心.Tifri^aa.Te白兔先苦過抖廣tFam工工M，=*七出=TftHst紀立Ki3i?jis>jSt-ximAift^x—Fw0■運?:eu：，?t?三？―白-wrrx.i--r—?心'=-：三.d三W七：曲二打出V靜■EKilttW+.：-.子r/葉跳三二手五'HA或：W）英:?是匕11■彳一亡一 廣昌■軟 才霖JHf**^'二H沮國對氈肅1；就月王中小退企也.#Ex?Kt.口的&心生色為首耳.在衽…尋=疑芝修，，W?及文互性芾？1?比凸生近亞，，斯柒厘示神的豚…生古空弛度示總的學墳，環(huán)室等■五史口臺的的苴，營總攻紿主客」圖3.6新聞頁面26圖3.7博客頁面27產(chǎn)品展于6跟隨我們堂仁中博客帖子建行中圖3.7素材頁面28第四章網(wǎng)站的測試編碼完成后，就要對源程序進行測試。軟件測試的目的在于爭取在第一時間發(fā)現(xiàn)程序中的錯誤，以便于及時糾錯，增加軟件可靠性。它在整個系統(tǒng)設計實施過程中占有相當?shù)姆至?。測試是軟件開發(fā)時期的最后一個階段，也是軟件質(zhì)量保證中至關重要的一個環(huán)節(jié)。測試的目的是為了盡可能的發(fā)現(xiàn)程序中存在的錯誤，其任務就是消除網(wǎng)站故障，保證程序的可靠運行，最終把一個高質(zhì)量的網(wǎng)站系統(tǒng)交給用戶使用。一般來說在每個模塊完成之后就要對它作必要的測試，這種測試被稱為單元測試，模塊的測試者也就是編寫者。編碼和單元測試屬于網(wǎng)站生命周期的同一階段。這個階段結束之后，對網(wǎng)站系統(tǒng)還應該進行各種綜合測試，這是網(wǎng)站生命周期的另一個獨立的階段，由專門的測試人員承擔。在網(wǎng)頁中的測試階段主要是對網(wǎng)站進行瀏覽器兼容性測試。在網(wǎng)頁測試的階段我分別安裝了IE8、火狐、搜狗、等瀏覽器，并且進行了逐個測試。在多次實踐中或多或少都遇到了不可調(diào)節(jié)的DIV浮動問題，但是最后還是在老師的指導和書籍查閱后，嵌入表格完成了頁面設計，使頁面在各個瀏覽器中顯示正常。29第五章后續(xù)工作本企業(yè)網(wǎng)站以前臺靜態(tài)HTML為主，其中關鍵是描述DIV+CSS在網(wǎng)頁布局中的妙用、巧用。但要真正的去完善一個網(wǎng)站，還需要更多的專業(yè)知識，比如說，數(shù)據(jù)庫、其他后臺相關語言，網(wǎng)站的安全，網(wǎng)站的發(fā)布，日常維護和更新，等等一系列問題，更是還有關于網(wǎng)站后臺管理的拓展分布，想要完成一個網(wǎng)站，每一項必不可少的驟。完成網(wǎng)站后，還要多網(wǎng)站進行整體優(yōu)化和宣傳推廣，這樣，才能讓網(wǎng)站增加人氣和點擊率。但是由于時間、精力和專業(yè)知識的關系。就把這一系列事情歸納為后續(xù)工作。在以后的時間里不斷的去學習、摸索，然后慢慢的去完善這個網(wǎng)站。30我的畢業(yè)設計快要結束了，我在學校的時間也就要劃上結束符號，這最后的符號是問號、逗號或者感嘆號再有幾天也就有結果了。我想在這大學的最后時間里，我們每個人都會對我們一起度過的這幾年生活有點感慨吧，特別是設計這一階段。通過這段時間的畢業(yè)設計，學到了、了解到了很多東西，不僅把以前所學的很多知識充分利用上了，還初步了解了HTML強大的數(shù)據(jù)庫開發(fā)能力，對HTML的語言進一步的了解，我體會到了網(wǎng)站開發(fā)不僅是編程，它需要方方面面的考慮，同時也必須具備比較全面的知識。我在設計過程中遇到了許多困難，最大的問題就在DIV浮動上，但是在指導老師和同學的幫助下，再加上大量書籍的查閱，最終完成了設計。這不但培養(yǎng)了我細心和耐性，樹立了一種科學的態(tài)度，還對我們以后的工作和學習有了很大的幫助和指導。同時我也認識到本身不存在很多不足的地方，還需要不斷的努力來充實自己完善自己，只有這樣我們才能學無止境，以求得更大的發(fā)展。本次設計由于設計時間較緊，且相關模塊比較多，加之設計經(jīng)驗的不足，在網(wǎng)站的整體設計及各模塊功能可能設計的不完全，有待于進一步的完善和改進。31好擊;五

結束語轉(zhuǎn)眼間，畢業(yè)設計完成了。在這段時間里，我在老師的指導和同學的幫助下下圓滿的完成了畢業(yè)設計，在此我衷心的感謝我的指導老師張應菊老師，在百忙之中抽出時間來對我耐心的指導和幫助，并提出了許多寶貴的意見和建議，我的論文才得以順利完成。為了畢業(yè)設計和畢業(yè)論文的完成，老師也付出了很多寶貴的時間和精力，對于她的幫助我表示感謝。設計的這段時間里，雖然很辛苦，但使我獲益非淺，我體會到自己在學習的知識方面存在很多的欠缺，特別是在DIV浮動和數(shù)據(jù)庫方面。但最終在畢業(yè)設計的制作中，還是不斷的把知識慢慢加深、鞏固。在論文即將完成之際，我的心情無法平靜，從開始進入課題到論文的順利完成，有多少可敬的師長、同學、朋友給了我無言的幫助，在這里請接受我誠摯的謝意！32附錄一：網(wǎng)站首頁效果圖公司實網(wǎng)頁設計☆網(wǎng)頁建設☆網(wǎng)站設計服務博客帖子T二一正在不工7=i^k二莪百七注r：E工7浣二國下三苣二丑在越/士愚圣：君:不卻當ti二六爽—三花f工二廣房“ffaL二血對鼻舌彳:右左m：三郎.發(fā)二七^品二三方::LF芟手工二躁隨我們苣仁中博客帖子注E中%：m:%二4三一三總干石二日：.-=二二:5蘭中巧■^三總二「宛衽.匚*.4=J--三一*一不。走產(chǎn).三』二MM上行正文之三.工工二年二葭七三廣工三M一T五=3缶1-司三一■_.星=5干，葉:國￡三三”三，三三三口二六FE=j=.-7.^ =^ -=：?=：-*-；1=,三導工；三工二正匕七工誕二三，1三前三丁建百三亍三-中小企業(yè)建網(wǎng)站要考慮商業(yè)回報網(wǎng)頁模板匕為可布儂WtTaii及二及小耳箋1注強=忸甘丑生咫金耐1，■=%一■自三方曲=<-3%尻*<4.EERW.FNME三里三.弓廳《二十次元，二五一八4.正XH*?.=超二既IT米--厘干工大力.==i^r：^-^r.&-====iTi-屬1底二十W"Et-■2?科關4*可工亡一由三。注阡亞慶對洋至說.飛到了對H設可一生，栽共的電帆靈玷聒?,鳧就區(qū)的網(wǎng)均說，擔？中空U.^f史兩出.左俘吉客年陽士設可母理，全方中中/但1供對空更北生濘?我力于一r.Mt公冏正就設，兩3：所■空'司空黃+t，為各軍『「上上手船望空孟生:刑苑這能妾刑支設計班晉,33附錄二:部分代碼<divid="templatemo_header_wrapper"><divid="templatemo_header"><divid="sitetitle”><h1><ahref="#"target="_parent”><imgsrc="images/templatemo_logo.png"alt="WebTemplates"/><span>站長素材</span></a></h1></div><divid="searchbox"><formaction="#"method="get"><inputtype="text"value=""name="q"size="10"id="searchfield"title="searchfield"onfocus="clearText(this)"onblur="clearText(this)"/><inputtype="submit"name="Search"value="搜索"alt="Search"id="searchbutton"title="Search"/></form></div><divclass="cleaner"></div></div><!--endofheader--><divid="templatemo_menu"><ul><li><ahref="index.html"class="current",首頁</a></li>34<li><ahref="products.html">新聞</a></li><li><ahref='七108卜31">博客</2></11><1i><ahref="ga11ery.htm1">素材</a></1i><1i><ahref="contact.htm1">聯(lián)系我們</a></1i></u1></div><!--endoftemp1atemo_menu--><divid="temp1atemo_banner"><divid="one"class="contents1ider”><divclass="cs_wrapper"><divclass="cs_s1ider”><divclass="cs_artic1e"><divclass="1eft"><h2>suspendisse桑達但米賣主blandit語</h2><p>我volutpataliquam。保護者nisl編號最后ultrices等寬度consequat歐盟情報。praesent交流水平的rutrumegestas利奧。aliquam修改此塊內(nèi)容vulputatearcu，誰congue意義laoreet桑達。</p><divclass="button"><ahref="#">瀏覽更多</a></div></div><divclass="right”><ahref="#"target="_parent"><imgsrc="images/s1ider/temp1atemo_s1ide02.jpg"alt="Template1"/></a></div>35</div><!--Endcs_article--><divclass="cs_article”><divclass="left"><h2>suspendisse桑達但米賣主blandit語</h2><p>我volutpataliquam。保護者nisl編號最后ultrices等寬度consequat歐盟情報。praesent交流水平的rutrumegestas利奧。aliquam修改此塊內(nèi)容vulputatearcu，誰congue意義laoreet桑達。</p><divclass="button"><ahref="#">瀏覽更多</a></div></div><divclass="right”><ahref="#"target="_parent"><imgsrc="images/slider/templatemo_slide01.jpg"alt="Template2"/></a></div></div><!--Endcs_article--><divclass="cs_article"><divclass="left"><h2>suspendisse桑達但米賣主blandit語</h2><p>我volutpataliquam。保護者nisl編號最后ultrices等寬度consequat歐盟情報。praesent交流水平的rutrumegestas利奧。aliquam修改此塊內(nèi)容vulputatearcu，誰congue意義laoreet桑達。</p><divclass="button"><ahref="#">瀏覽更多</a></div></div>36<divclass="right”><ahref="#"target="_parent"><imgsrc="images/slider/templatemo_slide03.jpg"alt="Template3"/></a></div></div><!--Endcs_article--><divclass="cs_article"><divclass="left"><h2>suspendisse桑達但米賣主blandit語</h2><p>我volutpataliquam。保護者nisl編號最后ultrices等寬度consequat歐盟情報。praesent交流水平的rutrumegestas利奧。aliquam修改此塊內(nèi)容vulputatearcu，誰congue意義laoreet桑達。</p><divclass="button"><ahref="#">瀏覽更多</a></div></div><divclass="right"><ahref="#"target="_parent"><imgsrc="images/slider/templatemo_slide04.jpg"alt="Template4"/></a></div></div><!--Endcs_article--></div><!--Endcs_slider--></div><!--End