PAGE.PAGE.目錄摘要1Abstract21概述31.1個人BLOG的概念31.2個人BLOG的開展現(xiàn)狀31.3個人BLOG具有的特點和主要功能52需求分析72.1開發(fā)背景72.2系統(tǒng)開發(fā)環(huán)境需求72.3系統(tǒng)目標(biāo)82.4系統(tǒng)需求92.4.1系統(tǒng)性能需求92.4.2系統(tǒng)功能需求93系統(tǒng)總體設(shè)計123.1系統(tǒng)體系構(gòu)造123.1.1終端層133.1.2接入效勞器133.2主要功能設(shè)計133.2.1系統(tǒng)模塊介紹143.2.2系統(tǒng)的物理構(gòu)造143.4信息平安設(shè)計163.4.1系統(tǒng)平安183.4.2環(huán)境平安183.4.3物理平安183.4.4網(wǎng)絡(luò)平安183.5數(shù)據(jù)庫概要設(shè)計184系統(tǒng)詳細(xì)設(shè)計204.1首頁面及主要頁面設(shè)計204.2系統(tǒng)交易處理流程204.3數(shù)據(jù)庫設(shè)計204.4功能模塊設(shè)計235系統(tǒng)實現(xiàn)285.1首頁設(shè)計285.2日志顯示模塊305.3游客留言顯示模塊315.4系統(tǒng)管理模塊325.5樣式表396完畢語42參考文獻(xiàn)43致444軟件具體實現(xiàn)及效果274．1系統(tǒng)平安274．1．1啟動窗體驗證274．1．2配置窗體身份驗證274．2用戶權(quán)限限制284．3創(chuàng)立登錄界面304．4創(chuàng)立主界面324．5對于提貨整個過程的實現(xiàn)說明334．6其他頁面的創(chuàng)立355設(shè)計總結(jié)395.1關(guān)于系統(tǒng)395.2自身收獲39詳細(xì)設(shè)計第十一周：測試。摘要越來越多的網(wǎng)絡(luò)用戶希望能夠在網(wǎng)絡(luò)平臺上更多地展現(xiàn)自己的個性，更方便地與人互動交流，在傳統(tǒng)的WEB1.0時代，無論是論壇、社區(qū)還是個人，都試圖在這些方面進(jìn)展努力，隨著WEB2.0時代的到來，一個新的概念出現(xiàn)了博客。隨著計算機(jī)網(wǎng)絡(luò)的飛速開展，博客已經(jīng)成為寫網(wǎng)絡(luò)日志必不可少的一種工具，也是一種簡單有效的提供網(wǎng)絡(luò)用戶之間進(jìn)展在線交流的網(wǎng)絡(luò)平臺，通過其可以結(jié)交更多的朋友，表達(dá)更多的想法，它隨時可以發(fā)布日志，方便快捷。個人博客的開展，也已經(jīng)成為廣告商業(yè)務(wù)拓展的重要領(lǐng)域。因此本文主要論述了BLOG的概念、開展前景、特點和功能等。分析了個人博客系統(tǒng)的總體設(shè)計模式和系統(tǒng)的實現(xiàn)過程。最后，文章還論述了本系統(tǒng)在今后的開展方向。本文的研究在一定程度上借鑒了新浪、QQ空間等的開展經(jīng)歷成果，系統(tǒng)的最終目的是通過為博客提供優(yōu)質(zhì)的互動交流平臺，提高的知名度和訪問量，從而獲得為企業(yè)提供更多的產(chǎn)品介紹及開展的時機(jī)，提升自己的網(wǎng)絡(luò)價值。BlogSitesDesignandImplementationAbstract:Moreandmorenetworkusershopedthatcanmoreunfoldownindividualityinthenetworkplatform,interactsconvenientlywiththehumantheexchange,intraditionalWEB1.0time,regardlessofbeingtheforum,munityindividualwebsite,attemptsintheseaspectstocarryondiligently,alongwithWEB2.0thetimearrival,anewconceptappearedBlog.Alongwithputernetwork'sswiftdevelopment,theblogalreadybecamewritesthenetworkdiaryessentialonekindoftool,isalsoonekindsimpleeffectiveprovidesbetweenthenetworkusertocarryontheonlineexchangethenetworkplatform,throughitsmaybeefriendswithmorefriends,expressesmoreideas,itmomentarilymayissuethediary,facilitatesquickly。Individualblogdevelopment,alsoalreadybecametheadvertisingagentservicedevelopmenttheimportantdomain。ThereforethisarticlemainlyelaboratedtheBLOGconcept,theprospectsfordevelopment,thecharacteristicandthefunctionandsoon.Hasanalyzedindividualblogsystem'ssystemdesignpatternandthesystemrealizestheprocess.Finally,thearticlealsoelaboratedthissysteminpresent'sdevelopmentdirection.Thethisarticle'sresearchhasprofitedfromsina,QQspacedevelopmentexperienceachievement,system'sfinalgoalistoacertainextentthroughprovidesthehighqualityinteractionfortheblogtoexchangetheplatform,enhancesthewebsitethepopularityandthevisitquantity,thusobtainsfortheenterpriseprovidesthemoreproductintroductionsandthedevelopmentopportunity,promotesownnetworkvalue.1概述對個人而言，博客可以調(diào)動個人的積極性，充分發(fā)揮個人的創(chuàng)造性。從2002年開場，國博客開場迅猛開展起來，從最初的只有幾千個嘗鮮者到現(xiàn)在的各式各樣的博客，圈子。在這三年的開展過程中，主要呈現(xiàn)出如下幾個特點：1.博客是可以將個人信息完整呈現(xiàn)在互聯(lián)網(wǎng)上的載體。2.博客具有"準(zhǔn)實名制〞趨勢，有助于信任機(jī)制的建立。本文就此探討了我國博客開展的幾個要素。1.1個人BLOG的概念BLOG是WEB

LOG的縮寫，簡單來說就是網(wǎng)絡(luò)日記。它是1997年12月由美國的Jorn

Barger最早提出的，這些年全球博客獲得了突飛猛進(jìn)的開展。據(jù)博客搜索Technorati統(tǒng)計，目前全球平均每5.8秒鐘誕生一個博客。它是一個新型的個人互聯(lián)網(wǎng)出版工具，博客使用者可以很方便地用文字、、影音、圖片建立起個性化的網(wǎng)絡(luò)世界。在Internet飛速開展的今天，互聯(lián)網(wǎng)成為人們快速獲取、發(fā)布和傳遞信息的重要渠道，它在人們政治、經(jīng)濟(jì)、生活等各個方面發(fā)揮著重要的作用。因此建立在Internet應(yīng)用上的地位顯而易見，倍受人們的重視。為了樹立個人在網(wǎng)絡(luò)上的形象，通過設(shè)計一個個人博客，以到達(dá)個人推薦、展現(xiàn)自我的一個平臺，個人博客為交流提供綜合的網(wǎng)絡(luò)環(huán)境，同時也為個人的宣傳，開展，提供了一個平臺。博客秉承了個人的自由精神，但是綜合了激發(fā)創(chuàng)造的新模式，使其更具開放和建立性。它作為一種新表達(dá)的方式，它的傳播不僅情緒，包括大量的智慧、意見和思想。某種意義上說，它也是一種新的文化現(xiàn)象，博客的出現(xiàn)和繁榮，真正凸現(xiàn)網(wǎng)絡(luò)的知識價值，標(biāo)志著互聯(lián)網(wǎng)開展開場步入更高的階段。1.2個人BLOG的開展現(xiàn)狀2006年11月3日，全球中文博客站點數(shù)量到達(dá)5230萬，博客〔Blogger〕用戶數(shù)到達(dá)1987萬,平均每個博客〔Blogger〕用戶擁有大約2.6個博客，博客站點數(shù)和博客用戶數(shù)均比前一年有一定程度的增長，人均擁有博客數(shù)與前一年相比也略有上升。在近二千萬的中國博客用戶中，每個用戶平均每7.6天更新一次博客，活潑的博客用戶數(shù)〔一周有更新的博客〕到達(dá)302萬，約15.2%的用戶每周更新博客，同時，只有大約4.6%的用戶每天更新博客。在用戶更新的博客中，約42%的博客文章在500個漢字〔1000個字節(jié)〕之，500~1000個漢字〔1000~2000個字節(jié)〕的博客文章占約16.5%，越是長篇大論的文章在博客中所占比例那么越少。用戶更新博客的時間大局部集中在白天，約48.5%的用戶選擇在工作時間〔上午10點~下午6點〕更新自己的博客，其中，在臨近下班前〔下午4點~6點〕博客更新數(shù)達(dá)12.4%，而約16.3%的用戶選擇在晚上7點~10點更新博客，為全日最頂峰，晚上10點之后時間更新博客的數(shù)量逐漸減少。2006年，擁有獨立域名的博客站點，在博客站點總數(shù)中占約0.43%，這說明，絕大多數(shù)的用戶將博客效勞商作為他們的博客站點首選。而這一年，中國大陸博客效勞商(BSP)持續(xù)大幅增長，博客效勞商數(shù)量到達(dá)1460家，與去年同期相比增長近55%；大型網(wǎng)絡(luò)公司如搜狐、百度紛紛推出相應(yīng)的博客效勞，而新興的博客效勞站點如51.也開場嶄露頭角。過去一年中，中國博客開展速度整體趨緩，博客用戶增長數(shù)較之去年有小幅上升，博客效勞商之間的市場競爭日趨劇烈，與早期提供博客效勞的運營商相比，傳統(tǒng)門戶及大型公司的博客效勞已占據(jù)市場主導(dǎo)地位。總體而言，2006年中國博客開展呈現(xiàn)5大特點：專業(yè)博客如醫(yī)藥類、教育類等增長較快，博客圈成為社區(qū)開展新方向；博客效勞商(BSP)死亡比例逐漸增高，2005年Top100效勞商中,近20%的站點已經(jīng)關(guān)閉或終止效勞；博客效勞商(BSP)開場逐漸支持手機(jī)訪問和發(fā)貼，開展迅速；綜合博客效勞商(BSP)增長很快，越來越多的效勞商開場提供音頻、視頻博客等功能；利用博客進(jìn)展排名作弊的站點越來越多，06年出現(xiàn)爆炸性增長，其中小型博客效勞商(BSP)尤為突出。〔0708年個人BLOG目前面臨的主要問題：由于文化市場監(jiān)視的不利，勢必會造成一些淫穢的容廣泛傳播于網(wǎng)路，這就需要文化部門的有力監(jiān)視。1.3個人BLOG具有的特點和主要功能主要功能實現(xiàn)一個博客，通常是由簡短而且經(jīng)常更新的帖子構(gòu)成，所有文章都是按照年份和日期排列，有些類似斑竹的日記。看上去平淡無奇，毫無可炫耀之處，但它可以讓每個人零本錢、零維護(hù)地創(chuàng)立自己的網(wǎng)絡(luò)媒體，每個都可以隨時把自己的思想火花和靈感更新到博客站點上。零機(jī)制：博客屬于個人所有，是自發(fā)建立和非正式的建立。BSP不能對博客發(fā)號施令。零技術(shù)：博客不需要作的專業(yè)知識，可以像發(fā)一樣簡單地實現(xiàn)博客網(wǎng)頁的呈現(xiàn)。技術(shù)的極度簡化，包括架構(gòu)和申請博客、編輯、上傳和修改容等。零本錢：任何一個人都可以像申請免費般免費申請自己的博客。不需要注冊域名的本錢，不需要租用效勞器空間的本錢，不需要許多軟件工具的本錢。零編輯：博客用戶就是編輯，即時寫作、即時發(fā)布、自我檢查。這形成了與傳統(tǒng)寫作截然不同的"體驗〞，真正實現(xiàn)了作者"零磨損〞的開放式寫作。零形式：博客頁面的表現(xiàn)形式和文章容的表現(xiàn)方式十分靈活，沒有特定形式。與個人主頁相比擬，博客是使用方便的、交互性強。與傳統(tǒng)的電子、BBS和ICQ這三種互聯(lián)網(wǎng)溝通方式相比，博客是一種較嚴(yán)肅的溝通平臺。BBS公共匿名性很強，而個人性很弱，因此缺乏約束。電子和ICQ那么是多用于個人間的通訊，而博客是個人性和公共性的結(jié)合。博客是個人在網(wǎng)上展示自己、與別人溝通交流的綜合平臺，它的管理比BBS簡單的多。2需求分析2.1開發(fā)背景隨著時代的開展，信息技術(shù)、Internet/Intranet技術(shù)、數(shù)據(jù)庫技術(shù)的不斷開展完善，網(wǎng)絡(luò)進(jìn)程的加快個人BLOG系統(tǒng)已經(jīng)成為寫網(wǎng)絡(luò)日志必不可少的一種工具。個人BLOG系統(tǒng)是一種簡單有效的提供網(wǎng)絡(luò)用戶之間進(jìn)展在線交流的網(wǎng)絡(luò)平臺，通過個人BLOG可以結(jié)交更多的朋友，表達(dá)更多的想法，它隨時可以發(fā)布日志，方便快捷。訪客可以直接在個人BLOG上留言，如提出問題或意見。我的畢業(yè)設(shè)計也就正是一個個人BLOG系統(tǒng)的開發(fā)。2.2系統(tǒng)開發(fā)環(huán)境需求1〕開發(fā)語言：JSP作為完全解決了目前ASP,PHP的一個通病－－腳本級執(zhí)行，.Sun

公司借助自己在Java

上的非凡造詣，將Java

從Java

應(yīng)用程序

和

Java

Applet

之外，又有新的碩果，這就是JSP－－Java

Server

Page。下面主要介紹下JSP的特點：將容的生成和顯示進(jìn)展別離

使用JSP技術(shù)，Web頁面開發(fā)人員可以使用HTML或者XML標(biāo)識來設(shè)計和格式化最終頁面。JSP技術(shù)源于Java語言。Java語言是體系構(gòu)造中立的。這使JSP技術(shù)可以在實現(xiàn)這個JSP平臺的任何系統(tǒng)中運行。這種途徑適合于異構(gòu)的網(wǎng)絡(luò)環(huán)境和軟件的分發(fā)。JSP系統(tǒng)是可移植的。這種可移植性來源于體系構(gòu)造中立性。強調(diào)可重用的組件

絕大多數(shù)JSP頁面依賴于可重用的，跨平臺的組件〔JavaBeans或者Enterprise

JavaBeansTM組件〕來執(zhí)行應(yīng)用程序所要求的更為復(fù)雜的處理。采用標(biāo)識簡化頁面開發(fā)

Web頁面開發(fā)人員不會都是熟悉腳本語言的編程人員。JavaServer

Page技術(shù)封裝了許多功能，這些功能是在易用的、與JSP相關(guān)的XML標(biāo)識中進(jìn)展動態(tài)容生成所需要的。JSP是JavaServerPage，J2EE是Java2EnterpriseEidtion，它們是Sun公司建立在Java語言上的一種效勞器端的編程技術(shù)，簡單來說，它是用來動態(tài)生成網(wǎng)頁的一種技術(shù)。在本中決大局部〔可以說是全部〕的數(shù)據(jù)庫操作和很大一局部的復(fù)雜商業(yè)邏輯都是在JavaBean或其他的Java類中實現(xiàn)的，這使得整個的功能穩(wěn)定，高效。而JavaBean有個很大的優(yōu)點就是它可以充分提高代碼的重用性，這使得程序的代碼編輯量大大減少。JSP將網(wǎng)頁邏輯與網(wǎng)頁設(shè)計和顯示別離，支持可重用的基于組件的設(shè)計，使基于Web的應(yīng)用程序的開發(fā)變得迅速和容易。使用JSP標(biāo)識或者小腳本來生成頁面上的動態(tài)容。生成容的邏輯被封裝在標(biāo)識和JavaBeans組件中，并且捆綁在小腳本中，所有的腳本在效勞器端運行。。由于JSP頁面的置腳本語言是基于Java編程語言的，而且所有的JSP頁面都被編譯成為JavaServlet，JSP頁面就具有Java技術(shù)的所有好處，包括強健的存儲管理和平安性；作為Java平臺的一局部，JSP擁有Java編程語言"一次編寫，各處運行〞的特點。2〕開發(fā)平臺：Eclipse+dreamweaverEclipse是一個開放源代碼的軟件開發(fā)工程，專注于為高度集成的工具開發(fā)提供一個全功能的、具有商業(yè)品質(zhì)的工業(yè)平臺。它主要由Eclipse工程、Eclipse工具工程和Eclipse技術(shù)工程三個工程組成，具體包括四個局部組成——EclipsePlatform、JDT、CDT和PDE.JDT支持Java開發(fā)、CDT支持C開發(fā)、PDE用來支持插件開發(fā)，EclipsePlatform那么是一個開放的可擴(kuò)展IDE，提供了一個通用的開發(fā)平臺。它提供建造塊和構(gòu)造并運行集成軟件開發(fā)工具的根底。EclipsePlatform允許工具建造者獨立開發(fā)與他人工具無縫集成的工具從而無須分辨一個工具功能在哪里完畢，而另一個工具功能在哪里開場。Dreamweaver

MX

是一款專業(yè)的HTML編輯器，用于對Web站點、Web頁和Web應(yīng)用程序進(jìn)展設(shè)計、編碼和開發(fā)。無論您喜歡直接編寫HTML代碼的駕馭感還是偏愛在可視化編輯環(huán)境中工作，Dreamweaver都會為您提供幫助良多的工具，豐富您的Web創(chuàng)作體驗。利用Dreamweaver中的可視化編輯功能，您可以快速地創(chuàng)立頁面而無需編寫任何代碼。不過，如果您更喜歡用手工直接編碼，Dreamweaver還包括許多與編碼相關(guān)的工具和功能。并且，借助Dreamweaver，您還可以使用效勞器語言〔例如ASP、ASP.NET、ColdFusion標(biāo)記語言〔CFML〕、JSP和PHP〕生成支持動態(tài)數(shù)據(jù)庫的Web應(yīng)用程序。3)所使用的數(shù)據(jù)庫：SQLSERVER2000SQLServer2000作為Microsoft家庭的重要成員，是基于客戶機(jī)/效勞器的大型關(guān)系數(shù)據(jù)庫系統(tǒng)。SQLServer2000這種關(guān)系型數(shù)據(jù)庫系統(tǒng)能夠滿足各種類型的企業(yè)客戶和獨立軟件供給商構(gòu)建商業(yè)應(yīng)用程序的需求，根據(jù)客戶的反映和需求，是大規(guī)模聯(lián)機(jī)事務(wù)處理〔OLTP〕、數(shù)據(jù)倉庫和電子商務(wù)應(yīng)用程序的優(yōu)秀數(shù)據(jù)庫平臺。SQLServer2000具有以下特點：強大可伸縮性；支持大型Web站點或企業(yè)信息處理系統(tǒng)；客戶機(jī)/效勞器體系構(gòu)造；而數(shù)據(jù)源包含了數(shù)據(jù)庫位置和數(shù)據(jù)庫類型等信息，實際上是一種數(shù)據(jù)連接的抽象。各部件之間的關(guān)系如圖2-1所示：應(yīng)用程序應(yīng)用程序ODBC管理器ODBCAPIsql驅(qū)動程序管理器數(shù)據(jù)源名〔DSN〕ODBC驅(qū)動程序數(shù)據(jù)源ODBC層數(shù)據(jù)層應(yīng)用層圖2-1數(shù)據(jù)關(guān)系圖2.3系統(tǒng)目標(biāo)博客系統(tǒng)開發(fā)的目標(biāo)是提供網(wǎng)絡(luò)用戶之間進(jìn)展在線交流的網(wǎng)絡(luò)平臺，通過個人BLOG可以結(jié)交更多的朋友，表達(dá)更多的想法，它隨時可以發(fā)布日志。具體的要求如下：1)博主可以簡單的添加和刪除日志；2)獨立于具體的數(shù)據(jù)庫平臺。對于與數(shù)據(jù)庫交互的局部充分考慮兼容性；4)容易在原先根底上進(jìn)展二次開發(fā)；5)中間根底平臺的無型性。盡量采用開放的標(biāo)準(zhǔn)技術(shù)，到達(dá)跨平臺運行的效果；為到達(dá)以下的開發(fā)目的。應(yīng)遵循一定的設(shè)計和開發(fā)與原那么：1)模塊接口定義清晰；2)根底類庫和接口設(shè)計合理，盡量建立叮擴(kuò)展的接口和抽象類；3)數(shù)據(jù)庫操作使用標(biāo)準(zhǔn)SQL語句，如果一定要使用有差異的SQL語句，那么盡量集中在一起，以減少將來維護(hù)和移植的難度；4)采用開放的標(biāo)準(zhǔn)和工具等；2.4系統(tǒng)需求2.4.1系統(tǒng)性能需求博客的特性要求博客系統(tǒng)需要具備以下幾個主要特性：1)多樣性:博客在設(shè)計時必須遵循的一個重要原那么，就是以用戶為系統(tǒng)設(shè)計的中心。網(wǎng)絡(luò)的開展大大降低了信息咨詢的本錢，用戶面臨更多的選擇，所以，博客除了降低本錢以外，還必須在皮膚，功能的多樣性上下工夫，才能夠得到用戶的認(rèn)可。具體來說，應(yīng)用系統(tǒng)應(yīng)能實現(xiàn)用戶特定的需求，操作界面友好、方便，功能設(shè)置符合用戶的習(xí)慣和要求。2)易維護(hù):管理員能夠簡單方便地管理系統(tǒng)，定義新的應(yīng)用，并對系統(tǒng)進(jìn)展日常維護(hù);隨著博客信息的變更或增加、數(shù)據(jù)規(guī)模的增大，系統(tǒng)升級、維護(hù)應(yīng)易于操作;各子系統(tǒng)、功能模塊的設(shè)計應(yīng)具有良好的靈活性，保證在博客系統(tǒng)建立過程中后期系統(tǒng)功能的實現(xiàn)不影響前期已投入使用的系統(tǒng)功能。3)平安性:系統(tǒng)應(yīng)充分考慮信息、設(shè)備、運行和管理的平安性，建立完善的多層次的平安保障體系，保證用戶的個人信息等資料的數(shù)據(jù)平安。4)可擴(kuò)展:博客的用戶從事著各種行業(yè)，他們的需求各不一樣，系統(tǒng)在設(shè)計時應(yīng)充分考慮到用戶需求不斷變化的需要，降低系統(tǒng)在擴(kuò)展新的業(yè)務(wù)功能時的復(fù)雜度。2.4.2系統(tǒng)功能需求幾個主要功能模塊1〕博客注冊登陸管理模塊：2〕博客即文章檢索查詢模塊3〕博客頁面顯示模塊4〕博客管理模塊5〕留言顯示檢索模塊模塊包含以下頁面：1〕index.html2〕diary.jsp3〕messeage.jsp4〕photo.html;5〕home.html6〕showrizhi.jsp7〕adminmanage.jsp系統(tǒng)各模塊的關(guān)系如圖2-2所示：IIndex.htmlDiary.jspMesseage.jspPhoto.htmlHome.htmlShowrizhi.jsp圖2-2系統(tǒng)各模塊關(guān)系圖博客系統(tǒng)通常提供三類效勞:1〕信息效勞，它可分為：日志顯示，熱點日志推薦，博主風(fēng)采2)查詢效勞：可以根據(jù)日志容，日志標(biāo)題，留言容，留言標(biāo)題等進(jìn)展模糊查詢3)留言效勞：游客可以對系統(tǒng)進(jìn)展留言或發(fā)表看法意見3系統(tǒng)總體設(shè)計博客系統(tǒng)的總目標(biāo)是：在計算機(jī)網(wǎng)絡(luò)，數(shù)據(jù)庫和先進(jìn)的開發(fā)平臺上，利用現(xiàn)有的軟件，配置一定的硬件，開發(fā)一個具有開放體系構(gòu)造的、易擴(kuò)大的、易維護(hù)的、具有良好人機(jī)交互界面的博客，以到達(dá)個人推薦、展現(xiàn)自我的一個平臺，為交流提供綜合的網(wǎng)絡(luò)環(huán)境，同時也為個人的宣傳，開展，提供了一個平臺。3.1系統(tǒng)體系構(gòu)造基于B/S構(gòu)造的個人博客系統(tǒng)，應(yīng)由終端〔用戶主機(jī)/瀏覽器〕、WEB效勞器、數(shù)據(jù)效勞器構(gòu)成。網(wǎng)上銀行系統(tǒng)的核心是中問的接入效勞器和應(yīng)用效勞器局部，但系統(tǒng)建立中需建立所有的模擬環(huán)境，因此整個系統(tǒng)的建立包含相應(yīng)的測試環(huán)境建立。網(wǎng)上銀行系統(tǒng)總體構(gòu)造圖如圖3所示：WEB效勞WEB效勞器(webServer)數(shù)據(jù)用服務(wù)器圖3博客總體構(gòu)造PC根據(jù)系統(tǒng)目標(biāo)和需求，個人博客設(shè)計采用開放的技術(shù)體系，以JSP和HTML技術(shù)作為根本技術(shù)方案。博客采用Browser/Server構(gòu)造，將博客劃分為兩個子系統(tǒng)：前臺，后臺。對于博客的平安機(jī)制，可采用成熟的平安認(rèn)證等技術(shù)。系統(tǒng)涉及到以下技術(shù)和環(huán)境:1)JSP環(huán)境2)XML,HTML3)Web效勞器系統(tǒng)包括上面總體框架中的各局部。對于每一局部在此進(jìn)展詳細(xì)描述。3.1.1終端層終端層是最終用戶接觸的設(shè)備，是原始數(shù)據(jù)的來源和最終處理結(jié)果的信息返回終點終端層的設(shè)備多樣化，網(wǎng)上銀行系統(tǒng)中僅考慮PCBrowser。在平安性要求比擬高的應(yīng)用中，Browser端要下載證書，對數(shù)據(jù)進(jìn)展加密，保證數(shù)據(jù)在傳輸過程中即使被截獲也無法閱讀明文。在平安要求不高的情況下，用戶提交數(shù)據(jù)可以用明文提交。3.1.2接入效勞器根據(jù)不同的終端設(shè)備，必然會有不同的接入方式和接入效勞器，同時也會有不同的協(xié)議和數(shù)據(jù)格式。對于計算機(jī)瀏覽器來說是WebServer和相關(guān)的動態(tài)頁面效勞器。接入效勞器的作用是獲取終端用戶請求信息提交給應(yīng)用效勞器、將應(yīng)用效勞器返回的應(yīng)答按一定的形式呈現(xiàn)給終端。它決定系統(tǒng)的表示形態(tài)。3.2主要功能設(shè)計3.2.1系統(tǒng)模塊介紹博客注冊登陸管理本模塊實現(xiàn)新用戶注冊，登陸功能。其中，注冊新用戶時會對用戶輸入的注冊信息進(jìn)展有效的驗證，包括根本數(shù)據(jù)格式的有效性，以及邏輯有效性，例如：用戶名被占用時給出提示。注冊成功登陸時會對博客輸入的信息進(jìn)展提示，如用戶名、密碼錯誤。同時在注冊時還用到了驗證碼技術(shù)，防止惡意注冊！博客文章查詢顯示管理本模塊用于幫助網(wǎng)絡(luò)用戶快速定位到自己關(guān)注的博客頁面及對應(yīng)的文章信息中。在本模塊中提供了最新文章推薦，還提供了按容或標(biāo)題等關(guān)鍵字快速查詢所需文章信息發(fā)表文章管理該模塊實現(xiàn)了博主發(fā)辮新文章的功能。博主發(fā)表文章時，可以選擇文章所屬類別，此外只有是博主才能發(fā)表文章，對此進(jìn)展了嚴(yán)格的身份驗證。發(fā)表及顯示評論管理該模塊實現(xiàn)了與文章相關(guān)的評論管理。只有注冊本錢站會員才能對文章進(jìn)展發(fā)表評論。留言顯示及查詢管理實現(xiàn)了查看用戶留言和查詢用戶/文章的管理，用戶可以檢索或瀏覽博客中的文章同時給感興趣的文章。3.2.2系統(tǒng)的物理構(gòu)造考前須知〔1〕用戶名：mr；密碼：mrsoft。〔2〕在首頁右上角，單擊"進(jìn)入后臺〞按鈕，可進(jìn)入后臺管理界面。〔3〕單擊導(dǎo)航欄中的"管理博客〞按鈕，將顯示一些常用功能的快捷鍵。業(yè)務(wù)流程在使用本系統(tǒng)時，請按照以下流程進(jìn)展操作：〔1〕選擇"博客文章管理〞/"發(fā)表博客文章〞按鈕，對博客文章進(jìn)展添加操作。〔2〕選擇"博客文章管理〞/"博客文件設(shè)置〞按鈕，對已發(fā)表的博客文章進(jìn)展修改、刪除及查詢操作。〔3〕選擇"博客文章管理〞/"文章分類〞按鈕，對文章的類別進(jìn)展添加、刪除，及查詢操作。〔4〕選擇"公告管理〞/"公告添加〞按鈕，對公告信息進(jìn)展添加操作。〔5〕選擇"公告管理〞/"公告設(shè)置〞按鈕，對公告信息進(jìn)展修改、刪除及查詢操作。〔6〕選擇"投票管理〞/"投票容添加〞按鈕，對投票信息進(jìn)展添加操作。〔7〕選擇"投票容〞/"投票容設(shè)置〞按鈕，對投票結(jié)果進(jìn)展刪除、查詢操作。〔8〕選擇"個人相片設(shè)置〞/"相片添加〞按鈕，對個人相片進(jìn)展添加操作。〔9〕選擇"個人相片設(shè)置〞/"相片設(shè)置〞按鈕，對已添加的相片進(jìn)展刪除、查詢操作。〔10〕選擇"朋友信息管理〞/"朋友信息添加〞按鈕，對朋友信息進(jìn)展添加操作。〔11〕選擇"朋友信息管理〞/"朋友信息設(shè)置〞按鈕，對已添加朋友信息進(jìn)展修改、刪除及查詢操作。〔12〕單擊"用戶設(shè)置〞按鈕，對已注冊的用戶進(jìn)展刪除、查詢操作。〔13〕單擊"博主設(shè)置〞按鈕，設(shè)置博主的詳細(xì)信息。系統(tǒng)實現(xiàn)的物理構(gòu)造如圖5所示：瀏覽器瀏覽器瀏覽器WEB效勞器數(shù)據(jù)效勞器瀏覽器圖5系統(tǒng)物理構(gòu)造圖3.4信息平安設(shè)計網(wǎng)絡(luò)的開放性導(dǎo)致網(wǎng)絡(luò)技術(shù)的全面開放，任何團(tuán)體和個人都可以獲得網(wǎng)絡(luò)資源，囚而網(wǎng)絡(luò)所面臨的破壞和攻擊將會是多方而的，可以是對軟件環(huán)境實施攻出，也可以是對硬件環(huán)境實施攻擊。網(wǎng)絡(luò)的國際性還意味著網(wǎng)絡(luò)的攻擊將不僅僅來自本地網(wǎng)絡(luò)用戶，它可能來自Internet上的任何一臺機(jī)器。即，發(fā)起攻擊的節(jié)點可以位于世界上任何地方。因此可以說，網(wǎng)絡(luò)平安所面臨的將是一個國際性全球化的挑戰(zhàn)。網(wǎng)絡(luò)的自由性意味著網(wǎng)絡(luò)最初對用戶的使用并沒有提供任何的技術(shù)約束，用戶可以自由地訪問網(wǎng)絡(luò)，自由地使用和發(fā)布各種類型的信息"。用戶只對自己的行為負(fù)責(zé)，而沒有受到任何的法律限制。如何保護(hù)個人的信息不受木馬和病毒的入侵，己成為信息平安化安康開展所要考慮的重要事情之一。3.4.1系統(tǒng)平安博客用戶個人信息的平安問題是至關(guān)重要的，制定切實可行的平安策略和實施有力的防手段是非常必要的。系統(tǒng)的平安體系由下述構(gòu)造組成，如圖6所示。環(huán)境平安環(huán)境平安主機(jī)系統(tǒng)平安人員管理平安操作平安規(guī)那么平安策略物理平安網(wǎng)絡(luò)平安圖6系統(tǒng)的平安體系構(gòu)造3.4.2環(huán)境平安環(huán)境平安是整個系統(tǒng)平安的根底，要把信息泄露的危險減至最低限度，需要選擇適當(dāng)?shù)脑O(shè)施位置，要充分考慮水災(zāi)、地震、電磁干擾與輻射以及其他等人為威脅，保證凈化電源等等。3.4.3物理平安物理平安也是整個系統(tǒng)平安的根底設(shè)置之一，物理平安涉及以系統(tǒng)中微機(jī)和主機(jī)、效勞器等資源的房間，必須進(jìn)展嚴(yán)格的管理。3.4.4網(wǎng)絡(luò)平安效勞器的操作系統(tǒng)要打好補丁，進(jìn)展平安權(quán)限的設(shè)置，并安裝好防火墻，殺毒軟件等，定時對數(shù)據(jù)進(jìn)展備份。3.5數(shù)據(jù)庫概要設(shè)計一個設(shè)計良好的數(shù)據(jù)庫，可以使系統(tǒng)的實現(xiàn)變得非常的簡單，同時，也可以使系統(tǒng)的執(zhí)行速度變得很快。反之，一個設(shè)計混亂的數(shù)據(jù)庫，不僅增加了吸引的管理實現(xiàn)過程，同時在系統(tǒng)的執(zhí)行過程中，使得檢索變得很慢，降低效率。所以數(shù)據(jù)庫的設(shè)計是一個系統(tǒng)設(shè)計很重要的步驟。根據(jù)系統(tǒng)功能設(shè)計要求和模塊劃分，本站的數(shù)據(jù)庫主要有用戶信息、日志信息、管理員信息、留言信息、回復(fù)留言信息、評論信息、回復(fù)評論視圖。數(shù)據(jù)庫的設(shè)計通常是以一個已經(jīng)存在的數(shù)據(jù)庫管理系統(tǒng)為根底的，常用的數(shù)據(jù)庫管理系統(tǒng)有Access、SQLServer、Oracle、MySQL等。根據(jù)用戶需求和系統(tǒng)分析，本系統(tǒng)采用SQLServer2005數(shù)據(jù)庫管理系統(tǒng)。在SQLServer2005數(shù)據(jù)庫管理系統(tǒng)中建立名稱為blog的數(shù)據(jù)庫。4系統(tǒng)詳細(xì)設(shè)計詳細(xì)設(shè)計是整個系統(tǒng)設(shè)計中，最重要的一個步驟。下面對系統(tǒng)得主要模塊進(jìn)展詳細(xì)的介紹。4.1首頁面及主要頁面設(shè)計表1主要頁面清單表文件名說明Index.html首頁面CustomerLogin.jsp普通用戶登陸頁面，用戶只要輸入已注冊的和密碼Diary.jsp日志顯示界面(包含日志搜索)zhucebiao.jsp新用戶注冊頁面message.jsp游客留言頁面photo.html相冊頁面adminmanager.jsp系統(tǒng)管理頁面home.html我們的小屋頁面adminLogin.jsp管理員登陸頁面4.3數(shù)據(jù)庫設(shè)計根據(jù)系統(tǒng)功能設(shè)計要求和模塊劃分，本站的數(shù)據(jù)庫主要包括日志管理員信息、日志信息、游客信息、留言信息、回復(fù)留言信息、評論信息。根據(jù)需求和系統(tǒng)分析，本系統(tǒng)采用SQLServer2005數(shù)據(jù)庫管理系統(tǒng)。在SQLServer2005數(shù)據(jù)庫管理系統(tǒng)中建立名稱為blog的數(shù)據(jù)庫。管理員信息表如圖4-1：圖4-1管理員表日志信息表如圖4-2：圖4-2日志表留言信息表如圖4-3：圖4-3留言表回復(fù)留言信息表如圖4-4：圖4-4回復(fù)留言表評論信息表如圖4-5：圖4-5評論表回復(fù)評論信息表如圖4-6所示：圖4-6回復(fù)評論視圖4.4功能模塊設(shè)計功能的詳細(xì)劃分如表2所示。表5功能詳細(xì)劃分表功能設(shè)方案分具體功能備注首頁〔Index.html〕通過點擊不同的導(dǎo)航進(jìn)入不同的頁面日志(diary.jsp)日志列表通過點擊查看全文進(jìn)入全文顯示頁面日志分頁一頁顯示5篇文章發(fā)表留言點進(jìn)進(jìn)入留言頁面加好友本功能暫未實現(xiàn)寫日志只有管理員才能發(fā)表日志全文顯示(showrizhi.jsp)閱讀數(shù)評論數(shù)發(fā)表評論只有注冊為會員才能發(fā)表評論留言(message.jsp)留言顯示留言發(fā)表后臺管理(adminmanager.jsp)用戶管理可查看、刪除用戶日志管理可修改、刪除日志留言管理進(jìn)入留言頁面進(jìn)展留言管理相冊(photo.html)小屋〔home.html〕管理員風(fēng)采介紹功能詳細(xì)劃分表21)用戶查看日志流程如圖4-7所示：驗證身份驗證身份登陸查看日志，發(fā)表評論返回登陸或注冊YN完畢圖4-7用戶查看日志流程圖2)管理員操作流程如圖4-8所示：驗證身份驗證身份登陸執(zhí)行管理員操作YN完畢圖4-8管理員操作流程圖5系統(tǒng)實現(xiàn)本系統(tǒng)主要包括用戶登陸、用戶注冊、日志顯示、日志搜索、留言顯示、留言搜索、相冊、小屋、系統(tǒng)管理〔包括日志管理，留言管理〕、九大模塊。以下是各功能模塊的具體實現(xiàn)過程。整個系統(tǒng)的框架如圖5-1所示。主要功能模塊主要功能模塊左模塊頂模塊底模塊圖5-1系統(tǒng)框架圖5.1首頁設(shè)計整個BLOG系統(tǒng)的首頁采用Flash制作，如下列圖5-2所示：圖5-2個人博客系統(tǒng)首頁主要代碼如下：<%pagecontentType="text/html;charset=gb2312"language="java"import="java.sql.*"errorPage=""%><head><meta-equiv="Content-Type"content="text/html;charset=gb2312"/><title>冷月楓林博客</title><styletype="text/css"><!--body{ background-image:url(image/1.jpg);//插入背景圖片}--></style></head><body><!—導(dǎo)入FLASH插件開場--><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-0"codebase="download.macromedia./pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0"width="800"height="390"align="middle"><paramname="movie"value="liuyan/image/index.swf"/><paramname="quality"value="high"/><embedsrc="liuyan/image/index.swf"width="800"height="390"align="middle"quality="high"pluginspage=".macromedia./go/getflashplayer"type="application/x-shockwave-flash"></embed></object><!—導(dǎo)入FLASH插件完畢--></body></html>5.2日志顯示模塊日志顯示模塊是顯示日志的，通過從數(shù)據(jù)庫調(diào)用日志編號，顯示在頁面上，每篇日志截取10個字符串，點擊查看全文可以查看全部容和發(fā)表評論，頁面如5-2圖所示：圖5-2日志顯示主要代碼實現(xiàn)如下：<%pagecontentType="text/html;charset=gb2312"language="java"import="java.sql.*"errorPage=""%><%pageimport="java.io.*"%><jsp:useBeanid="db"class=".DBconn"scope="application"/><!—導(dǎo)入JAVABEAN--><meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>冷月楓林博客</title></head><body><divclass="top"><!--左部布局開場--><divclass="right"> <divclass="rt-1"><divclass="title"><ul><% ///顯示日志 Stringsql="select*fromrizhiwheredel=0orderbyuptimedesc"; ResultSetrs=db.query(sql); intintPageSize;//一頁顯示的記錄數(shù) intintRowCount;//記錄總數(shù) intintPageCount;//總頁數(shù) intintPage;//待顯示頁碼 StringstrPage; inti; //設(shè)置一頁顯示的記錄數(shù) intPageSize=15; //取得待顯示頁碼 strPage=request.getParameter("page"); if(strPage==null){//說明在QueryString中沒有page這一個參數(shù)，此時顯示第一頁數(shù)據(jù) intPage=1; }else{//將字符串轉(zhuǎn)換成整型 intPage=java.lang.Integer.parseInt(strPage); if(intPage<1)intPage=1; } //獲取記錄總數(shù) rs.last(); intRowCount=rs.getRow(); //記算總頁數(shù) intPageCount=(intRowCount+intPageSize-1)/intPageSize; //調(diào)整待顯示的頁碼 if(intPage>intPageCount)intPage=intPageCount; if(intPageCount>0) { //將記錄指針定位到待顯示頁的第一條記錄上 rs.absolute((int1)*intPageSize+1); //顯示數(shù)據(jù) i=0; while(i<intPageSize&&!rs.isAfterLast()) { Stringchoose=rs.getString("choose"); Stringidrizhi=rs.getString("idrizhi"); Stringtitle=rs.getString("title"); Stringuptime=rs.getString("uptime"); Stringcontent=rs.getString("content"); //content.length(); Stringt=content.substring(0,10); %> <divclass="title2"> <li><divalign="left">【<fontcolor=red><%=choose%></font>】<%=title%></div></li> <liclass="tle2"><a><%=t%>。。。</a><ahref="../showrizhi.jsp"idrizhi=<%=idrizhi%>">查看全文</a></li><%=uptime%></div> <%rs.next(); i++;} %> <%}%></ul></div>5.3游客留言顯示模塊主要是游客的留言顯示模塊，游客可以不用通過注冊直接在本頁面留下自己對本系統(tǒng)的意見或者是建議。頁面如圖5-3所示：圖5-3留言顯示主要代碼實現(xiàn)如下：<meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>留言</title></head><%Stringsqlh="";ResultSetrsh=null;Stringsql="select*fromliuyanwhereisdel=0orderbyliddesc";ResultSetrs=db.query(sql);intintPageSize;intintRowCount;intintPageCount;intintPage;StringstrPage;inti;intPageSize=10;strPage=request.getParameter("page");if(strPage==null){intPage=1;}else{intPage=Integer.parseInt(strPage);if(intPage<1)intPage=1;}rs.last();intRowCount=rs.getRow();intPageCount=(intRowCount+intPageSize-1)/intPageSize;if(intPage>intPageCount)intPage=intPageCount;if(intPageCount>0){rs.absolute((int1)*intPageSize+1);i=0;while(i<intPageSize&&!rs.isAfterLast()){Stringlid=rs.getString("lid");%><divclass="box1"><li><spanclass="STYLE1">編號：<%=lid%></span><spanclass="STYLE1">昵稱：<%=rs.getString("name")%></span><spanclass="STYLE1">標(biāo)題：<%=rs.getString("bt")%></span><spanclass="STYLE1">時間：<%=rs.getString("time")%></span><%if(username!=null){%><ahref="hfliuyan.jsp"hid=<%=rs.getString("lid")%>"><imgsrc="image/reply.gif"alt="回復(fù)"border="0"/></a><ahref="../liuyan/sc.jsp"id=<%=rs.getString("lid")%>"><imgsrc="image/trash.gif"alt="刪除"border="0"/></a><%}%></div><divclass="box2"><spanclass="STYLE1">留言容:</span><spanclass="STYLE3"><%=rs.getString("nei")%></span></p></div><divclass="box3"><%sqlh="select*fromhfwherehid="+rs.getString("lid");rsh=db.query(sqlh);while(rsh.next()){%><spanclass="STYLE1">博主<fontcolor=red>[<%=rsh.getString("relname")%>]</font>回復(fù):</span><spanclass="STYLE4"><%=rsh.getString("hnei")%><%=rsh.getString("time")%></span><br/><%}rsh.close();%></div><p><%rs.next();i++;}%><%rs.close();%><spanclass="STYLE1b">共<%=intPageCount%>頁第<%=intPage%>頁<ahref="message.jsp""page=1>首頁</a><%if(intPage<intPageCount){%><ahref="message.jsp"page=<%=intPage+1%>">下一頁>></a><%}%><%if(intPage>1){%><ahref="message.jsp"page=<%=int1%>"><<上一頁</a><%}%><ahref="message.jsp"page=<%=intPageCount%>">尾頁</a></span><%}else{out.println("<spanclass='STYLE1b'>暫無留言，趕快搶沙發(fā)吧！<ahref='#top'>留言</a></span>");}%><spanclass='STYLE1b'><ahref='#top'>留言</a></span></p></div>5.4系統(tǒng)管理模塊本模塊是系統(tǒng)后臺管理模塊，管理員通過登陸進(jìn)入管理頁面，可對日志、留言的修改、刪除等操作。如圖5-4所示：圖5-4系統(tǒng)管理頁面主要代碼實現(xiàn)如下所示：<meta-equiv="Content-Type"content="text/html;charset=gb2312"><title>系統(tǒng)管理</title></head><bodybgcolor="#C7C7C<%Stringadminusername=(String)session.getAttribute("adminusername");Stringrealname=(String)session.getAttribute("realname");if(adminusername==null){out.println("<scriptlanguage='javascript'>window.alert('對不起請登陸！');window.location.href=('adminLogin.jsp');</script>");}else{%><divclass="ziti"><divalign="left">歡送你，管理員<fontcolor="#FF0000"><%=realname%></font>|<ahref="adminLogin.jsp">注銷</a></div></div><%}%><divclass="box"><divclass="left"><divclass="level1"><aclass=OUTDENThref="../rizhi/diary.jsp"><imgborder=0name=imExsrc="../images/arrowUp.gif"id=ttt>返回首頁</a></div><divclass="level1"id='head2Parent'><aclass=OUTDENThref=""onclick='returnexpandIt("head2");'id=ttt><imgborder=0name=imExsrc="../images/arrowUp.gif"id=ttt>用戶管理</a></div><divclass="level2"id='head2Child'><ahref="userList.jsp"id=ttttarget="box"><li>用戶列表</li></a><ahref="adminRole.jsp"id=ttttarget="box"><li>系統(tǒng)角色</li></a><ahref="delCutomer.jsp"id=ttttarget="box"><li>用戶刪除</li></a></div><divclass="level1"id='head3Parent'><aclass=OUTDENThref=""onclick='returnexpandIt("head3");'id=ttt><imgborder=0height=13name=imExsrc="../images/arrowUp.gif"width=17>日志管理</a></div><divclass="level2"id='head3Child'><ahref="../admin/diaryManager/diaryList.jsp"id=ttttarget="box"><li>日志操作</li></a></div><divclass="level1"id='head4Parent'><aclass=OUTDENThref=""onclick='returnexpandIt("head4");'id=ttt><imgborder=0height=13name=imExsrc="../images/arrowUp.gif"width=17>留言管理</a></div><divclass="level2"id='head4Child'><ahref="../liuyan/message.jsp"id=ttttarget="box"><li>留言操作</li></a></div></div><!--右邊布局開場--><divclass="right"><iframeheight="858px"width="550px"scrolling="auto"name="box"src="adminDefult.jsp"></iframe></div></div>本系統(tǒng)還有用戶登陸、注冊等模塊在此就不一一介紹了。5.5樣式表除以上功能模塊的設(shè)計外，本系統(tǒng)還定義了樣式表。樣式表具有如下特點：1)可以將格式和構(gòu)造別離2)可以以前所未有的能力控制頁面的布局3)可以制作出體積更小下載更快的網(wǎng)頁4)可以更快更容易地維護(hù)及更新大量的網(wǎng)頁5)瀏覽器將成為你更友好的界面代碼如下：<!—主體字體設(shè)置-->body{font-size:12px;}<!—主體布局樣式樣式設(shè)置開場-->.by{width:955px;height:auto;}.bod{width:980px;height:auto;}.box{width:750px;height:auto;margin-top:1px;overflow:hidden;color:#FFFFFF;float:left;}.top{width:980px;height:auto;float:left;}.left{width:210px;height:auto;float:left;}.right{width:770px;height:auto;float:left;}.flash{width:200px;height:200px;float:left;margin-top:28px;margin-left:275px;}.xs{width:670px;height:580px;float:left;background-color:#999999;margin-left:28px;}.head{width:980px;height:25px;margin-top:3px;float:left;color:#FFFFFF}<!—主體布局樣式樣式設(shè)置完畢--><!—導(dǎo)航條樣式設(shè)置-->.banner{width:200px;height:auto;float:right;}.diary-banner1{width:980px;height:20px;float:left;text-align:left;}<!—日志導(dǎo)航條樣式設(shè)置-->.diary-banner2{width:980px;height:50px;float:left;}.left-1{width:194px;height:auto;}<!--頭像設(shè)置-->.left-1-1{width:154px;height:150px;}.left-1-2{width:154px;height:30px;}.l1{font-size:12px;color:#999999;line-height:30px;}<!--日志控制區(qū)設(shè)置-->.left-2{width:194px;height:auto;}.lft2{width:194px;height:auto;}.l2{font-size:12px;float:left;color:#FF0000;padding-left:20px;}.l3{font-size:12px;color:#FFFFFF;}.l3ul{list-style:none;}.l3li{list-style:none;padding-top:30px;}.rt1{width:769px;height:auto;}.rt2{width:769px;height:auto;}.r1{font-size:14px;line-height:30px;float:left;color:#FF0000;}.rt-1{width:770px;height:auto;float:left;padding-top:50px;}.title{font-size:12px;color:#FFFFFF}.titleul{list-style:none;display:block;}.titleli{list-style:none;padding-left:110px;width:180px;float:left;line-he