靜態(tài)網站畢業(yè)論文

設計（論文）題目：使用div+css開發(fā)個人網站大學高等函授畢業(yè)設計（?？疲┤蝿諘鳾第1頁/共2頁]姓名學號專業(yè)計算機信息管理所屬站重慶新華電腦學校工作單位電話通信地址E-mail地址設計（或論文）題目使用div+css開發(fā)個人網站指導教師、指導教師組組長及成員姓名職稱工作單位及所從事專業(yè)鄭賢中級重慶新華電腦學校，網頁設計專業(yè)方向、基本理論、技術要求及設計（論文）內容綱要專業(yè)方向：網站開發(fā)基礎理論：采用網站開發(fā)的思路進行設計，具體設計作品可跟據自己搜集資料的詳細程度來自行選擇。技術要求：1、采用Windows2000以上的操作系統(tǒng)，網頁三劍客+Photoshop+Access+div/css開發(fā)；2、采用div+css布局和美化網頁；設計內容：整個網站風格定位及各頁面布局設計網頁整體整體圖形的制作div+css布局網站測試與后期優(yōu)化論文內容：畢業(yè)論文要求論點突出、條理清楚、論據充分、內容實際、格式規(guī)范，所針對的題目應具有一定的廣泛性和實用性，結論明確。論文的內容綱要應符合以下要求：1、摘要：以濃縮的形式概括課題的內容，中文摘要在500字左右。2、目錄：目錄按三級標題編制，要求標題層次清晰，題文一致。3、正文：畢業(yè)論文正文包括前言、主體和結論。要求正文字數不少于10000字。正文主體部分應按照Asp網站建設的思想進行論述。4、結束語：對導師和給予指導或協(xié)助完成畢業(yè)論文（設計）工作的組織和個人表示感謝。文字要簡捷、實事求是。5、參考文獻：文獻條目只要包括三個部分：作者、標題和出版信息。數量5-10本。6、附錄：是一些不宜放在正文中，但有參考價值的內容。本人在該設計中具體完成的工作1.完成調研和資料收集。2.完成使用DIV+CSS布局信息宣傳類網站的分析，設計，實現和測試。3.完成論文的撰寫。主要參考文獻、資料：項宇峰等.《HTML網絡編程從入門到精通》.清華大學出版社，2006年徐磊主.《網頁制作與網站建設技術大全》.清華大學出版社，2008年張景峰等.《HTML程序設計》.高等教育出版社，2005年要求完成報告書的時間：2012年5月15日審批意見函授站（蓋章）年月日審批意見重郵成教院（蓋章）年月日注：第2頁/共2頁；本表由指導教師填寫一式三份。

重慶郵電大學高等函授畢業(yè)設計（專科）評定表姓名張宇學號11800231專業(yè)網站開發(fā)所屬站重慶新華電腦學校設計（或論文）題目使用div+css開發(fā)個人網站畢業(yè)設計（或論文）的評語：指導教師（簽名）年月日備注

重慶郵電大學高等函授畢業(yè)設計(?？?評閱意見表畢業(yè)論文題目使用div+css開發(fā)個人網站 評價項目得分選題質量01選題符合專業(yè)培養(yǎng)目標，體現綜合訓練基本要求選題綜合得分（共10分）：02題目難易度03題目工作量04理論意義或實際價值能力水平05查閱文獻資料能力能力水平綜合得分（共50分）：06綜合運用知識能力07研究方案的設計能力08研究方法和手段的運用能力成果質量09文題相符論文成果綜合得分（共40分）：10寫作水平11寫作規(guī)范12篇幅評閱人評定成績（共100分）評閱人：重慶郵電大學高等函授畢業(yè)設計成績總評表姓名張宇學號11800231專業(yè)計算機信息管理重慶新華電腦學校設計（或論文）題目使用div+css開發(fā)個人網站畢業(yè)設計指導委員會意見：根據畢業(yè)設計指導教師和評閱教師意見，經成人教育學院高等函授畢業(yè)設計指導委員會認真評定，該學員的畢業(yè)設計總評（四級評分制）成績?yōu)椋寒厴I(yè)設計指導委員會主任：年月日【摘要】計算機和計算機網絡的飛速發(fā)展，人們對計算機網絡的依賴是越來越大。人們在網上聊天交友，在網上請教問題，查閱資料，還在網上聽音樂。除此之外，人們還會在網上進行商務交易、下載信息，有著眾多的使用者。尤其是電子商務大大的減少了人們對周圍環(huán)境的依賴，無論是哪里的網友，都可以瀏覽到世界各地的各類信息，非常的方便，由于以上的優(yōu)勢，各類網站如雨后春筍般的出現，這也就是我的畢業(yè)設計的實際意義。本文就個人網站的規(guī)劃于建設，以軟件工程的方法對過程經行了分析與研究。本文的主要工作集中在：對web頁經行概述，主要是對Internet的歷史和發(fā)展作了回顧，在web頁的定義而后特性上進行闡述。而Web設計的健康發(fā)展依靠web標準的采用，沒有web標準就不會有真正的可訪問性和連貫的設計。不用web標準，就跟不上時代。在這樣的標準時代，我們需要網頁更加容易擴展，適合自動數據交換，并且更加規(guī)整。而css，則實現了頁面內容與樣式分離。鑒于web標準，本論文著重對div+css布局公司網頁進行了討論。并對網站開發(fā)過程中使用的開發(fā)工具和技術作了簡要的介紹。對網站建設中提及到術語經行了解釋，并對個人網站的由來和發(fā)展經行了討論；對自己的個人網站從規(guī)劃建設經行了詳細的分析；使用Dreameaver、photoshop等技術實現了個人網站的各種功能并且就網站建設提出了自己的觀點與建議?！娟P鍵詞】網頁設計div+cssDreamweaver個人網站目錄TOC\o"1-3"\u前言 1第一章網站開發(fā)背景 2第一節(jié)web概述 2一、認識WEB 2二、認識WEB2.0標準 2第二章DIV+CSS詳解 5第一節(jié)DIV+CSS簡介 5第二節(jié)級聯樣式表簡介 \h6第三節(jié)DIV+CSS布局的優(yōu)點 6一、利于搜索引擎蜘蛛爬行 6二、易于修改 7三、減少網頁加載時間 7四、代碼精簡 7五、相對表格的嵌套問題 h8六、搜索排名的影響 8第四節(jié)div+css布局方式 8第五節(jié)div+css理論概述 9一、理解CSS盒子模型 9二、轉變思路 10三、實現結構與表現分離 9599\h11第六節(jié)div+css的兼容性問題 11一、div的垂直居中問題 11二、margin加倍的問題 11三、浮動ie產生的雙倍距離 11四、IE與寬度和高度的問題 11五、頁面的最小寬度 12六、DIV浮動IE文本產生3象素的bug 12七、IE捉迷藏的問題 12八、IE6下為什么圖片下有空隙產生 12第二章開發(fā)工具的介紹 13第一節(jié)夢幻網頁的編織者——Dreamweaver PAGEREF_Toc325009610\h13第二節(jié)圖形、圖像編輯設計軟件制作軟件——AdobePhotoshopcs2 13第三章網站總體分析和設計 15第一節(jié)網站開發(fā)的需求分析 15第二節(jié)網站的總體設計 16第三節(jié)整體風格設計 PAGEREF_Toc325009615\h19一、頁面屬性設計 19二、色彩搭配 19三、連接效果 20四、導航設計 20五、細節(jié)設計 21第四節(jié)首頁設計 \h21一、DIV分布和概述 21二、搜索關鍵字與描述 23第五節(jié)其他頁面設計 23第四章網站的測試 29第五章后續(xù)工作 30結論 31結束語 32附錄一：網站首頁效果圖 33附錄二：部分代碼 34PAGE43前言當今世界已進入信息時代，Internet成為21世紀最受關注的行業(yè)之一,它的飛速發(fā)展和在全球范圍的普及應用正在給人類生活帶來革命性變化。網絡技術的發(fā)展也取得了巨大的成就，為網站開發(fā)提供了很好的技術支持。網站已經成為現階段眾多企業(yè)不可或缺的網絡營銷平臺，互聯網應用規(guī)模正不斷擴大。其中，特別是中小型企業(yè)，對于網絡平臺搭建的需要求相當的迫切。各大門戶網，企業(yè)網都在WEB2.0的標準上,采用CSS+DIV來布局網站，所以才有了此次的選題。論文詳細論述了一個基于公司網站的開發(fā)的設計過程。在技術上，采用了Dreamweaver網站開發(fā)工具，以HTML的超大功能結合JAVAScript的客戶端語言，并加以FLASH等動畫以增加網站的動態(tài)效果。這樣的構造有利于以后對網站系統(tǒng)開發(fā)的把握，并給以后的開發(fā)積累一定的經驗，提升編程能力。其中，最主要的就是介紹和展示DIV+CSS在網頁中的最用和魅力。本文實現了首頁、新聞、案例、介紹、聯系、搜索、留言、聯系我們、等功能，全面化個人網站的需求。論文組織如下：首先闡述了該系統(tǒng)的開發(fā)背景、意義，詳細介紹了div+css理論知識；其次介紹了相關的開發(fā)工具及技術基礎；接著對網站的需求進行了分析，并提出了具體的設計方案；然后展現了整個系統(tǒng)的具體實現，包括網頁的設計和連接，各功能模塊的實現；最后對該網站進行了嚴格的測試。第一章網站開發(fā)背景第一節(jié)web概述一、認識WEBweb本意是蜘蛛網和網的意思?，F廣泛譯作網絡、互聯網等技術領域。表現為三種形式，即超文本（hypertext）、超媒體（hypermedia）、超文本傳輸協(xié)議（HTTP）等。Web(WorldWideWeb，簡稱WWW，又稱萬維網)是目前Internet上應用最廣泛也是最重要的信息服務類型，它的影響已經進入了Internet上 的廣告、新聞、電子商務和展示信息等各個服務領域。Web采用瀏覽器/服務器（B/S）工作模式，其運作模式可以描述為：請求→處理→應答。Web以超文本標記語言HTML(HyperTextMarkupLanguage)與超文本傳輸協(xié)議HTTP(HyperTextTransferProtocol)為基礎，通過瀏覽器為用戶提供方便友好的信息瀏覽界面。Web將位于全世界互聯網上不同網址的相關信息有機地編織在一起。在Web服務方式中，信息以頁面（或稱Web頁）的形式存儲在Web服務器中，這些頁面采用超文本的方式對信息進行組織，通過鏈接將一頁信息鏈接到另一頁信息。這些相互鏈接的頁面既可以放置在同一臺主機上，也可以放置在不同的主機上。頁面到頁面的鏈接信息由統(tǒng)一資源定位器URL(UniformResourceLocator)維持。用戶通過客戶端應用程序（即瀏覽器）向Web服務器發(fā)出請求，服務器根據客戶端的請求將保存在服務器中的某個頁面返回給客戶端，瀏覽器接收到頁面后對其進行解釋，最終將信息以圖、文、聲并茂的形式呈現給用戶。Web服務的特點在于高度的集成性，它能夠實現不同類型的信息（如文本、圖像、聲音、動畫和視頻等）和服務（如New、FTP、Telnet、Gopher及Mail等）的無縫鏈接，特別適合于廣域網中信息的組織、檢索與顯示。二、認識WEB2.0標準“Web2.0”的概念開始于一個會議中，展開于O'Reilly公司和MediaLive國際公司之間的頭腦風暴部分。所謂互聯網先驅和O'Reilly公司副總裁的戴爾·多爾蒂(DaleDougherty)注意到，同所謂的“崩潰”迥然不同，互聯網比其他任何時候都更重要，令人激動的新應用程序和網站正在以令人驚訝的規(guī)律性涌現出來。更重要的是，那些幸免于當初網絡泡沫的公司，看起來有一些共同之處。那么會不會是互聯網公司那場泡沫的破滅標志了互聯網的一種轉折，以至于呼吁“Web2.0”的行動有了意義？我們都認同這種觀點，Web2.0會議由此誕生。WEB標準不是某一個標準，而是一系列的標準集合，網頁主要是由三部分組成：結構（structure）、表現（presentation）、和行為（behavior）。對應的標準也分為三個方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括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的不足，以強大的擴展性媽祖網絡信息發(fā)布的需要，夠來逐漸用于網絡數據的轉換和描述。關于xml的好處和技術規(guī)范描寫，這里就不說了有更多的數據可供參考。xhtml是TheExtensibleHapertextMarkupLanguage可擴展標識語言的縮寫。目前推薦遵循的是W3C于2000年1月26日發(fā)布的XthML1.0，xml雖然是數據轉換的能力強大，完全可以替代HTML，但是面對成千上萬的已有的站點，直接串通XML還為時過早。因此，我們在HTML4.0的基礎上，用XML的規(guī)則對其進行擴展，得到了xhtml。簡單的說，建立xhtml的目的就是實現XHTML向xml的過渡。2、表現標準語言CSS是CaseadingStyleSheets層疊樣式表的縮寫。目前推薦遵循的是W3C于1998年5月12日推薦CSS2。W3C創(chuàng)建CSS標準的目的是以CSS取代表格式布局、幀和其它表現的語言。純CSS布局與結構式xhtml結合能幫助設計師分離外觀與結構，使站點的訪問及維護更加容易。3、行為標準(1)DOMDOM是DocumentObjectModel文檔對象模型的縮寫。根據W3C規(guī)范/dom/,DOM是一種瀏覽器，平臺，語言的借口，使得你可以訪問頁面其它的標準組件。簡單的理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設計師和開發(fā)者一個標準的方法，讓他們來訪問他們站點中的數據、腳本和表現層對象。(2)ECMAScriptECMAScript是ECMA（EuropeanComputerManufacturersAssociation)制訂的標準腳本語言JAVAScript。目前推薦遵循的是ECMAScript262。CSS是CaseadingStyleSheets的簡稱。實際上它是一組樣式。我們對CSS樣式并不陌生，在網上沖浪時，幾乎隨時都在與CSS打交道，在網頁上沒有使用過CSS的網頁可能不好找，不管你用什么工具軟件制作網頁，都在有意無意的使用CSS。用好CSS能使你的網頁更加的簡練，為什么同樣內容的網頁，有的人能做出及時KB，而高手做出來的只有十幾KB，CSS在其中的作用是不言而喻的。第二章DIV+CSS詳解第一節(jié)DIV+CSS簡介CSS是英語CascadingStyleSheets（層疊樣式表單）的縮寫，它是一種用來表現HTML或XML等文件式樣的計算機語言。DIV+CSS是網站標準（或稱“WEB標準”）中常用術語之一，div+css是一種網頁的布局方法,這一種網頁布局方法有別于傳統(tǒng)的HTML網頁設計語言中的表格（table）定位方式,真正地達到了w3c內容與表現相分離。HTML語言自HTML4.01以來，不再發(fā)布新版本，原因就在于HTML語言正變得越來越復雜化、專用化。XHTML語言是一種可以將HTML語言標準化，用XHTML語言重寫后的HTML頁面可以應用許多XML應用技術。使得網頁更加容易擴展，適合自動數據交換，并且更加規(guī)整。在XHTML網站設計標準中，不再使用表格定位技術，而是采用DIV+CSS的方式實現各種定位。以下是DIV+CSS的特點簡介：=1\*GB3①符合W3C標準。微軟等公司均為W3C支持者。這一點是最重要的，因為這保證您的網站不會因為將來網絡應用的升級而被淘汰。=2\*GB3②支持瀏覽器的向后兼容，也就是無論未來的瀏覽器大戰(zhàn)，勝利的是IE7或者是火狐，您的網站都能很好的兼容。③搜索引擎更加友好。相對與傳統(tǒng)的table,采用DIV+CSS技術的網頁，對于搜索引擎的收錄更加友好。④樣式的調整更加方便。內容和樣式的分離，使頁面和樣式的調整變得更加方便。現在YAHOO,MSN等國際門戶網站，網易，新浪等國內門戶網站，和主流的WEB2.0網站，均采用DIV+CSS的框架模式，更加印證了DIV+CSS是大勢所趨。⑤CSS的極大優(yōu)勢表現在簡潔的代碼，對于一個大型網站來說，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼。=6\*GB3⑥表現和結構分離，在團隊開發(fā)中更容易分工合作而減少相互關聯性。第二節(jié)級聯樣式表簡介有三種方法可以在站點網頁上使用樣式表：①將網頁鏈接到外部樣式表。②在網頁上創(chuàng)建嵌入的樣式表。③應用內嵌樣式到各個網頁元素。④每一種方法均有其優(yōu)缺點：當要在站點上所有或部份的網頁上一致地應用相同樣式時，可使用外部樣式表。在一個或多個外部樣式表中定義樣式，并將它們鏈接到所有網頁，便能確保所有網頁外觀的一致性。如果人們決定更改樣式，只需在外部樣式表—中作一次更改—而該更改會反映到所有與該樣式表相鏈接的網頁上。通常外部樣式表以.css做為文件擴展名，例如Mystyles.css。當人們只是要定義當前網頁的樣式，可使用嵌入的樣式表。嵌入的樣式表是一種級聯樣式表，“嵌”在網頁的<HEAD>標記符內。嵌入的樣式表中的樣式只能在同一網頁上使用。使用內嵌樣式以應用級聯樣式表屬性到網頁元素上。如果網頁鏈接到外部樣式表，為網頁所創(chuàng)建的內嵌的或嵌入式樣式將擴充或覆蓋外部樣式表中的指定屬性。第三節(jié)DIV+CSS布局的優(yōu)點一、利于搜索引擎蜘蛛爬行根據總結和經驗，div+css布局有利于蜘蛛的爬行，拿html的table布局和div+css布局的網頁來做對比，很顯然table的字節(jié)大于div+css的，字節(jié)小就有益于搜索引擎蜘蛛下載頁面所用的時間，縮減頁面代碼量，可以提高頁面瀏覽速度。而且也有益于蜘蛛爬行到網站深處。二、易于修改提高易用性，使用CSS可以結構化HTML，可以輕松控制頁面的布局。CSS編寫容易，可以像寫html代碼一樣輕松地編寫CSS。在一般情況下，div+css布局的網站，都是將html頁面和css文件分開的，div+css的特點就是能將網頁的內容和表現形式分離，將設計部分剝離出來放在一個獨立樣式文件中，你可以減少未來網頁無效的可能。網站改版方便，只要修改CSS文件就可以重新構建網站。所以，假如你要修改網站整站布局的話，一般只需要修改css文件里的的個別屬性即可，而這種特點是table不具備的?？芍貜褪褂茫幊掏瓿啥嗵幨褂?。你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的行，那么整個站點的所有頁面都會隨之發(fā)生變動。三、減少網頁加載時間縮減頁面代碼量，可以提高頁面瀏覽速度，在幾乎所有的瀏覽器上都可以使用。前面就提到過，div+css是將css文件和html文件分開的，當用戶點擊網站時，是在同時下載css文件和html文件，所以可以提高打開網頁的速度，而table是必須以標簽開始到結束才能顯示網頁內容。另外，div的html文件則是邊加載邊顯示，這樣是不是提高了用戶體驗?Google已經將網頁加載速度列入了排名的因素，盡管這個因素只能影響排名的一小部分，甚至可以忽略，但是有利于seo的辦法，我們?yōu)槭裁床挥?四、代碼精簡如果使用DIV+CSS布局，網頁的頁面代碼精簡，使頁面的字體變得更漂亮，更容易編排，使頁面真正賞心悅目。如果你不是javascrput的高手，你可以不必去寫ID，只用class就可以。當客戶端程序員寫完程序，需要調整時候，你可以在利用他的ID進行控制。Table中布局中，垃圾代碼會很多，一些修飾的樣式及布局的代碼混合一起，很不利于直觀。而Div更能體現樣式和結構相分離，結構的重構性強。五、相對表格的嵌套問題在一些文章是稱，搜索引擎一般不喜歡抓取三層以上的表格嵌套，這一點一直沒有得到搜索引擎官方的證實。我的也不能完全肯定是不是，就目前掌握的情況來看，在解析Table布局的頁面，遇到多層表格嵌套時，會跳過嵌套的內容或直接放棄整個頁面。使用Table布局，為了達到一定的視覺效果，不得不套用多個表格。如果嵌套的表格中是核心內容，解析時跳過了這一段沒有抓取到頁面的核心，這個頁面就成了相似頁面。網站中過多的相似頁面會影響排名及域名信任度。六、搜索排名的影響頁面結構簡潔清晰，容易被搜索引擎搜索到完成了對網站優(yōu)化工作。如果我們在設計時運用于基于XTHML標準的DIV+CSS布局，在設計完成要盡可能的完善到能通過W3C驗證。事實證明使用XTHML架構的網站排名狀況一般都不錯。這一點或許會有爭議，但至少這樣不會有什么壞處。方便搜索引擎的搜索，用只包含結構化內容的HTML代替嵌套的標簽，搜索引擎將更有效地搜索到你的內容，并可能給你一個較高的評價。第四節(jié)div+css布局方式對于網站DIV+CSS設計越來越受到業(yè)界的關注，從個人網站到企業(yè)及門戶網站，頁面設計人員已經將DIV+CSS作為了業(yè)界標準。如果用DIV+CSS來構建和美化網站，那么DIV就是整個網站的骨架，CSS樣式就是網站的衣服。其中的內容，就是血肉。要入手設計一個網站。那么，就要從DIV的布局開始。DIV元素是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素。DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。各大個人網、企業(yè)網、門戶網基本上都在推崇DIV+css這一布局方式。比如：騰訊網、IBM官網、等等。其中就以IBM官網來說，頂部是導航，下面為FLASH，底部用UL列舉出公司各項服務的連接。從整體布局來看，采用的是單欄式，是頁面看上去簡潔大方，現在的網頁布局主流也從繁雜華麗轉變到簡單大方，個人也比較推崇后者。所以對于重慶逸飛咨詢有限公司的網站也從DIV+CSS著手，模仿IBM官網div布局。本網站的骨架架構如下圖2.1：圖2.1設計中網站的骨架圖第五節(jié)div+css理論概述一、理解CSS盒子模型什么是CSS的盒子模式呢？為什么叫它是盒子？在網頁設計中常聽到一些屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)，CSS盒子模式都具備這些屬性，日常生活中所見的盒子也具有這些屬性，所以叫它盒子模式。盒模型3D效果圖如下圖2.2所示：圖2.2css2.0盒模型在網頁設計上，內容常指文字、圖片等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同，CSS盒子具有彈性，里面的東西大過盒子本身最多把它撐大，但它不會損壞。與現實聯系起來后對這種模式就更為容易接受了，方便了我們后期的教學。二、轉變思路傳統(tǒng)的前臺網頁設計是這樣進行的：根據要求，先考慮好主色調，要用什么類型的圖片，用什么字體、顏色等等，然后再用Photoshop這類軟件做出網站的小樣，最后再切成小圖，通過設計HTML生成頁面，改用CSS排版后，我們要轉變這個思路，此時我們主要考慮的是頁面內容的語義和結構，因為一個強CSS控制的網頁，等做好網頁后，你還可以輕松的調用你想要的網頁風格，況且CSS排版的另外一個目的是讓代碼易讀，區(qū)塊分明，強化代碼重用，所以結構很重要。三、實現結構與表現分離這也用CSS布局的特色所在，結構與表現分離后，代碼才簡潔，更新才方便。給出一個實例，對比把樣式寫進去和分離開的區(qū)別，進一步說明結構與表現分離的優(yōu)點，在這里建議學生單獨建立css文件與頁面進行鏈接，這樣的方式會使代碼部分更為清淅。第六節(jié)div+css的兼容性問題一、div的垂直居中問題vertical-align:middle;將行距增加到和整個DIV一樣高line-height:200px;然后插入文字，就垂直居中了。缺點是要控制內容不要換行。二、margin加倍的問題設置為float的div在ie下設置的margin會加倍。這是一個ie6都存在的bug。解決方案是在這個div里面加上display:inline;三、浮動ie產生的雙倍距離#box{float:left;width:100px;margin:000100px;//這種情況之下IE會產生200px的距離display:inline;//使浮動忽略}這里細說一下block與inline兩個元素：block元素的特點是,總是在新行上開始,高度,寬度,行高,邊距都可以控制(塊元素);Inline元素的特點是,和其他元素在同一行上,不可控制(內嵌元素);#box{display:block;//可以為內嵌元素模擬為塊元素display:inline;//實現同一行排列的效果diplay:table。四、IE與寬度和高度的問題IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度，比如要設置背景圖片，這個寬度是比較重要的。五、頁面的最小寬度min-width是個非常方便的CSS命令，它可以指定元素最小也不能小于某個寬度，這樣就能保證排版一直正確。但IE不認得這個，而它實際上把width當做最小寬度來使。為了讓這一命令在IE上也能用，可以把一個<div>放到<body>標簽下，然后為div指定一個類。六、DIV浮動IE文本產生3象素的bug左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距。七、IE捉迷藏的問題當div應用復雜的時候每個欄中又有一些鏈接，DIV等這個時候容易發(fā)生捉迷藏的問題。有些內容顯示不出來，當鼠標選擇這個區(qū)域是發(fā)現內容確實在頁面。解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構盡量簡單。八、IE6下為什么圖片下有空隙產生解決這個BUG的方法也有很多,可以是改變html的排版,或者設置img為display:block或者設置vertical-align屬性為vertical-align:top|bottom|middle|text-bottom都可以解決.等各種解決兼容性問題。第二章開發(fā)工具的介紹第一節(jié)夢幻網頁的編織者——DreamweaverDreamweaver是創(chuà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是目前最流行的圖形、圖像編輯設計軟件，在數碼影像處理、圖像編輯合成、廣告設計、封面設計、美術繪畫、網頁設計等領域都被廣泛地應用。①文字處理更加方便②增加的圖層集使圖層管理更有序。③新增圖像功能：圖像的剪切和剪裁更加方便。④將所有工具的選項板改進為工具選項欄放置在工作區(qū)頂部，方便先項參數的設置。⑤為了更方便地用路徑繪畫，改進增加了幾何形狀工具，通過選擇工具的不同工作模式，可創(chuàng)建路徑、幾何形狀或幾何填充區(qū)，使得矢量繪圖功能得到了加強。第三章網站總體分析和設計第一節(jié)網站開發(fā)的需求分析隨著網絡技術的餓不斷發(fā)展,網絡應用已經滲透到人類社會的各個角落作為網絡，世界色支撐點的網站,更是人們關注的熱點：政府利用網站宣傳自己的施政綱領,日益成為與百姓交流的直通車；企業(yè)利用網站宣傳自己的形象,挖掘無限商機，個人利用網站展示個性風采,創(chuàng)建彼此溝通的橋梁.越來越多的企業(yè)希望擁有網。建立個人網站要有一個清晰的網站布局。比如說，導航條要不要？很多人說那東西人人在做，就顯得太俗沒個性，難顯示出新潮。但導航條之所以有那么多人在用，是因為它給瀏覽者一個明確的布局，便利人們查找本身所需的信息。從某種角度上說，大家都在用的東西就說明它確實被大家所接受。要清楚網站做出來是給每一個人普通用戶看的。網站還要經常更新，給人以新意。設計技術的成長，帶來了網頁世界的繁榮。尤其在崇尚個性的今天，設計者們更是將頁面設計表示的淋漓盡致。用戶欣喜的看到那些僵化的設計模式正在被逐個打破，網頁設計充滿了朝氣。但是，作為網頁設計者，不能一味的只追求個性的表現，還必需兼顧到用戶和客戶的習慣，在表現本身的風格的同時，在功能上使用戶更加便利。網站導航結構圖如下圖3.1所示：站長設計首頁站長設計首頁新聞博客素材聯系我們需求結果：生成5個頁面，index.HTML網站首頁；blog.html網站新聞；notes.html網站案例；styles.html網站介紹;lianxi.html網站聯系。第二節(jié)網站的總體設計與傳統(tǒng)媒體不同，網頁除了文字和圖像以外，還包含聲音、視頻和動畫等新興多媒體元素，更借助由代碼語言編程所實現的各種交互式效果，增加了網頁界面的生動性和復雜性，也使得網頁設計者需要考慮更多頁面元素的排布、優(yōu)化。一般來說，網頁的界面主要由下面幾個因素構成：=1\*GB3①文字：文字元素是信息傳達的主體部分。網頁中的文字主要包括標題、信息、文字鏈接、幾種主要形式。標題和傳統(tǒng)媒體中信息傳達的基本作用相同，是內容的簡概說明一般比較醒目、優(yōu)先編排。文字作為占據頁面重要比率的元素，同時又是信息重要載體，它的字體、大小、顏色和排布對頁面整體設計影響極大。我所使用的文字是宋體12號，因為這樣看得比較清楚，使整個頁面整潔，網頁中都普遍的使用，讓顧客一看就忍不住繼續(xù)看，所以在此我選擇12號宋體作為網頁的主體文字樣式。=2\*GB3②圖形：圖形在網頁界面中具有重要作用。合理的運用圖形，可以生動直觀、形象地表現設計主題。網頁中常用的圖形格式包括jpg和gif，這兩種格式壓縮比高，得到了規(guī)范瀏覽器的支持，下載速度快，具有跨平臺的特性，不需要瀏覽器安裝插件即可直接閱覽。圖形元素包括標題、背景、主圖、鏈接圖標四種。我所使用的圖片主要是自己收集的比較精美。如下圖3.2：圖3.2圖案展示=3\*GB3③頁面版式：版式是網頁界面設計的重要組成部分，它將文字、圖形等視覺元素進行組合配置，使頁面整體視覺效果美觀和諧，簡單大方，便于閱讀，實現信息傳達的最佳效果。如下圖3.3：圖3.3頁面版式=4\*GB3④色彩：彩色網頁比單色網頁更具吸引力；色彩本身具有象征作用。第三節(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與頁面的邊距為零。二、色彩搭配打開一個網站，給用戶留下第一印象的既不是網站豐富的內容，也不是網站合理的版面布局，而是網站的色彩。色彩對人的視覺效果非常明顯，一個網站設計成功與否，在某種程度上取決于設計者對色彩的運用和搭配。因為網頁設計屬于一種平面效果設計，在排除立體圖形、動畫效果之外，在平面圖上，色彩的沖擊力是最強的，它很容易給用戶留下深刻的印象。因此，在設計網頁時，必須要高度重視色彩的搭配。本網站的搭配主打為：白、灰、藍、三種顏色。白色代表純潔、純真、樸素、神圣、明快?；疑彩且环N很大器的顏色，幾乎能與所有的顏色相輔相成。

"灰色有種很內斂、很隱約的'暗香襲人'的意味"。藍色是博大的色彩，天空和大海這遼闊的景色都呈蔚藍色。藍色是永恒的象征，它是最冷的色彩。純凈的藍色表現出一種美麗、文靜、理智、安祥與潔凈。采用這種色彩搭配給游客留下深刻的印象。三、連接效果對于一個頁面不僅要設計其字體和其他風格，還要有鏈接效果，使頁面更加的生動，stley.css中的鏈接效果如下：a,a:link,a:visited{ color:#0074c5; text-decoration:none;}a:hover{ color:#009900; text-decoration:underline;}頁面的鏈接效果設置為：已經訪問的連接樣式字體顏色為白色，無下劃線，字體加粗為正常值；當有鼠標懸停在鏈接上樣式字體顏色為#FFFF33，有下劃線。四、導航設計網站的導航欄目可以讓用戶對網站的內容及信息一目了然。導航分為：首頁、新聞、博客、素材、聯系我們。首先采用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><li><ahref="contact.html">聯系我們</a></li></ul> 五、細節(jié)設計1PX凹陷西線的設計給網頁帶來了分成次的美觀、圖片的選擇給人醒目、大方的感覺、按鈕的設計給顧客賞心悅目的感覺，搜索工具的設計方便了游客輕松的實現網頁功能的搜索。留言效果方便了直接與顧客交流的機會，提高了網站水平。第四節(jié)首頁設計一、DIV分布和概述由于個人完整給人的形象應該是專業(yè)、大方，所以主頁的設計和布局我采用大方簡單又不失活潑的原則。首頁整體用1個大的DIV里面包含兩個小的（上下個一個）DIV。Div設置效果為：總體都設置了寬度，居中格式，背景顏色及背景圖片，其他還有內邊距，高等。內容界面是一個網站走向成功道路上必不可少的因素。網站的內容代表著一個好網站的素質和形象，所以應該表現的大氣、端莊而且精細。還更要表現出一個網站應該有的朝氣和活力。因此我首先選中色彩搭配比較大方，整體布局比較清晰簡潔的內容模式。在首頁的版面，先是用Photoshop對網站模板進行切片，然后用DIV+CSS進行排版。首先自然映入顏面的是logo設計，一個特殊于類似酒瓶的圖標給我們是用心品，只有我們心與心交流加上我們實力制作給網站設計達到一種酒醉的境界，頁面效果如下圖3.4所示：圖3.4頁面效果根據因為瀏覽者在閱讀時候經常采用從上到下，從左到右的習慣，主體內容中，我將“公司簡介”和“博客帖子”各自放一邊，“l(fā)ogo”放在了上面的位置而且和搜索一起完美搭配這樣能更好地吸引瀏覽者的眼球，同時也體現網站的專業(yè)、得體。底部不僅能夠展示網站的各種優(yōu)點，而且突出顯示出網站整體結尾的完美，看著簡介而又大方得體，真是賞心悅目呀！二、搜索關鍵字與描述為了有利于搜索引擎的收錄，在首頁專門設置了mate信息，設置相關關鍵字和描述。相關代碼如下：<metaname="keywords"content="網站素材"/><metaname="description"content="站長素材"/>第五節(jié)其他頁面設計其他頁面設計整體風格跟主頁布局風格一致，就只是內容布局格式不一樣，更加直觀、簡潔明了，其中聯系頁面附加有留言網站整體風格的源于首頁的改裝，在聯系頁面中附加了留言內容給顧客留下了直接心與心溝通的交流機會，首先心靈溝通直接給人溫暖的感覺，專業(yè)的一塊--心靈溝通模式，讓你們生層次的了解我們，更加有資質，實力，專業(yè)，精心為你們服務。接著左邊是留言和公司信息，左邊是博客帖子簡潔大方，給人心情愉悅。新聞網站直接吸引顧客的是網站新聞四個大字，突出顯示新聞的作用，新聞的作用在于建設型網站系列適用于中小型企業(yè)，并以web2.0的核心理念為指導，高端視覺設計需求，及交互性需求。新聞的作用突出本網站品牌，很好的展示本網站的形象，全方位的展示您的想法，互動平臺的搭建，信息功能完善。博客頁面，依然是四個大字首先映入我們顏面的是博客中心，博客中心是介紹專注與人交流，專業(yè)從事心與心的溝通，通過精美的原創(chuàng)網站設計，高質量的網站建設，為用戶制作一流的網站。并且介紹網站設計經驗，專為中小企業(yè)提供網站建設服務。致力于中小企業(yè)網站建設、網頁設計制作、網站優(yōu)化，為多家中小企事業(yè)單位提供了網站建設及網頁設計服務。博客所關注的領域包含：互聯網、電腦網絡、網站架設、搜索引擎、編程開發(fā)、社會化網絡、網絡營銷、互聯網地圖、GoogleEarth、Web2.0等；專注于網站開發(fā)。目前已經成長為一個以IT技術為主導，全面發(fā)展而又有自身特色的原創(chuàng)互聯網科技博客。站長素材展示的是成功案例產品介紹，產品分類：中小企業(yè)類、門戶類、商城購物類集團品牌高端設計類、教育類等。素材的作用通過成功案例的展示讓顧客深刻了解本公司，所以擁有優(yōu)秀的網站設計是你們公司成功的關鍵，優(yōu)秀的網站首先展示不盡是公司的完美的信息而且表現出公司的實力。您不想讓您的企業(yè)發(fā)展得更快嗎？您不想讓你的企業(yè)產品的知名度更廣嗎？你不想讓您的產品銷量更大嗎？難道您會眼睜睜地看著競爭對手搶走您的定單嗎？為什么同行的生意會越做越好，而您企業(yè)的發(fā)展和產品卻是陷入困境，銷量平平一直不好嗎？所以擁有優(yōu)秀的網站設計是你們公司成功的關鍵，與本公司合作最大的感受就是實力！圖3.5聯系我們頁面圖3.6新聞頁面圖3.7博客頁面圖3.7素材頁面第四章網站的測試編碼完成后，就要對源程序進行測試。軟件測試的目的在于爭取在第一時間發(fā)現程序中的錯誤，以便于及時糾錯，增加軟件可靠性。它在整個系統(tǒng)設計實施過程中占有相當的分量。測試是軟件開發(fā)時期的最后一個階段，也是軟件質量保證中至關重要的一個環(huán)節(jié)。測試的目的是為了盡可能的發(fā)現程序中存在的錯誤，其任務就是消除網站故障，保證程序的可靠運行，最終把一個高質量的網站系統(tǒng)交給用戶使用。一般來說在每個模塊完成之后就要對它作必要的測試，這種測試被稱為單元測試，模塊的測試者也就是編寫者。編碼和單元測試屬于網站生命周期的同一階段。這個階段結束之后，對網站系統(tǒng)還應該進行各種綜合測試，這是網站生命周期的另一個獨立的階段，由專門的測試人員承擔。在網頁中的測試階段主要是對網站進行瀏覽器兼容性測試。在網頁測試的階段我分別安裝了IE8、火狐、搜狗、等瀏覽器，并且進行了逐個測試。在多次實踐中或多或少都遇到了不可調節(jié)的DIV浮動問題，但是最后還是在老師的指導和書籍查閱后，嵌入表格完成了頁面設計，使頁面在各個瀏覽器中顯示正常。第五章后續(xù)工作本企業(yè)網站以前臺靜態(tài)HTML為主，其中關鍵是描述DIV+CSS在網頁布局中的妙用、巧用。但要真正的去完善一個網站，還需要更多的專業(yè)知識，比如說，數據庫、其他后臺相關語言，網站的安全，網站的發(fā)布，日常維護和更新，等等一系列問題，更是還有關于網站后臺管理的拓展分布，想要完成一個網站，每一項必不可少的驟。完成網站后，還要多網站進行整體優(yōu)化和宣傳推廣，這樣，才能讓網站增加人氣和點擊率。但是由于時間、精力和專業(yè)知識的關系。就把這一系列事情歸納為后續(xù)工作。在以后的時間里不斷的去學習、摸索，然后慢慢的去完善這個網站。

結論我的畢業(yè)設計快要結束了，我在學校的時間也就要劃上結束符號，這最后的符號是問號、逗號或者感嘆號再有幾天也就有結果了。我想在這大學的最后時間里，我們每個人都會對我們一起度過的這幾年生活有點感慨吧，特別是設計這一階段。通過這段時間的畢業(yè)設計，學到了、了解到了很多東西，不僅把以前所學的很多知識充分利用上了，還初步了解了HTML強大的數據庫開發(fā)能力，對HTML的語言進一步的了解，我體會到了網站開發(fā)不僅是編程，它需要方方面面的考慮，同時也必須具備比較全面的知識。我在設計過程中遇到了許多困難，最大的問題就在DIV浮動上，但是在指導老師和同學的幫助下，再加上大量書籍的查閱，最終完成了設計。這不但培養(yǎng)了我細心和耐性，樹立了一種科學的態(tài)度，還對我們以后的工作和學習有了很大的幫助和指導。同時我也認識到本身不存在很多不足的地方，還需要不斷的努力來充實自己完善自己，只有這樣我們才能學無止境，以求得更大的發(fā)展。本次設計由于設計時間較緊，且相關模塊比較多，加之設計經驗的不足，在網站的整體設計及各模塊功能可能設計的不完全，有待于進一步的完善和改進。結束語轉眼間，畢業(yè)設計完成了。在這段時間里，我在老師的指導和同學的幫助下下圓滿的完成了畢業(yè)設計,在此我衷心的感謝我的指導老師張應菊老師,在百忙之中抽出時間來對我耐心的指導和幫助，并提出了許多寶貴的意見和建議，我的論文才得以順利完成。為了畢業(yè)設計和畢業(yè)論文的完成，老師也付出了很多寶貴的時間和精力，對于她的幫助我表示感謝。設計的這段時間里，雖然很辛苦，但使我獲益非淺，我體會到自己在學習的知識方面存在很多的欠缺，特別是在DIV浮動和數據庫方面。但最終在畢業(yè)設計的制作中，還是不斷的把知識慢慢加深、鞏固。在論文即將完成之際，我的心情無法平靜，從開始進入課題到論文的順利完成，有多少可敬的師長、同學、朋友給了我無言的幫助，在這里請接受我誠摯的謝意！附錄一：網站首頁效果圖附錄二：部分代碼<divid="templatemo_header_wrapper"> <divid="templatemo_header"> <divid="site_title"><h1><ahref="#"target="_parent"><imgsrc="images/templatemo_logo.png"alt="WebTemplates"/><span>站長素材</span></a></h1></div><divid="search_box"><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><li><ahref="products.html">新聞</a></li><li><ahref="blog.html">博客</a></li><li><ahref="gallery.html">素材</a></li><li><ahref="contact.html">聯系我們</a></li></ul> </div><!--endoftemplatemo_menu--><divid="templatemo_banner"><divid="one"class="contentslider"><divclass="cs_wrapper"><divclass="cs_slider"><divclass="cs_article"> <divclass="left"><h2>suspendisse桑達但米賣主blandit語</h2><p>我volutpataliquam。保護者nisl編號最后ultrices等寬度consequat歐盟情報。praesent交流水平的rutrumegestas利奧。aliquam修改此塊內容vulputatearcu，誰congue意義laoreet桑達。</p><divclass="button"><ahref="#">瀏覽更多</a></div> </div><divclass="right"><ahref="#"target="_parent"><imgsrc="images/slider/templatemo_slide02.jpg"alt="Template1"/></a> </div></div><!--Endcs_article--><divclass="cs_article"><divclass="left"><h2>suspendisse桑達但米賣主blandit語</h2><p>我volutpataliquam。保護者nisl編號最后ultrices等寬度consequat歐盟情報。praesent交流水平的rutrumegestas利奧。aliquam修改此塊內容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修改此塊內容vulputatearcu，誰congue意義laoreet桑達。</p><divclass="button"><ahref="#">瀏覽更多</a></div> </div><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><