網(wǎng)站內(nèi)容管理系統(tǒng)設計

本科畢業(yè)論文題目：網(wǎng)站內(nèi)容管理系統(tǒng) 學院： 專業(yè)班級： 學號： 學生姓名： 指導教師姓名： 指導教師職稱：年月日摘要隨著互聯(lián)網(wǎng)技術的飛速發(fā)展，建設一個網(wǎng)站的技術門檻越來越低。但是對于有網(wǎng)站建設需求的初學者來說，由于沒有任何基礎，對相關的概念很迷茫，在摸索的過程中會走很多的彎路。其實使用免費開源的內(nèi)容管理系統(tǒng)（ContentManagementSystem，簡寫CMS），建設一個網(wǎng)站是輕而易舉的事情內(nèi)容管理系統(tǒng)是典型的CMS信息管理系統(tǒng),其開發(fā)主要包括后臺數(shù)據(jù)庫的建立和維護以及前端應用程序的開發(fā)兩個方面。對于前者要求建立起數(shù)據(jù)一致性和完整性強、數(shù)據(jù)安全性好的庫。而對于后者則要求應用程序功能完備,易使用等特點。本系統(tǒng)在前端開發(fā)設計中，在頁面的布局時，HTML將元素進行定義，CSS對展示的元素進行定位，網(wǎng)站前端最基本的四個技能：PS，HTML，CSS，JavaScript。這個是前端開發(fā)最基本也最重要的技能，前端的開發(fā)中，在頁面的布局時，HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現(xiàn)相應的效果和交互。雖然表面看起來這些很簡單，但這里面需要掌握的東西絕對不會少。在進行開發(fā)前，需要對這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會得心應手。設計此管理系統(tǒng)的目的是希望能給需要此類信息的人們帶來方便，同時自己在完成此程序的過程中學到知識和經(jīng)驗。關鍵字：管理系統(tǒng)、前端、HTML、CSS、PS、JavaScript.ABSTRACTWiththerapiddevelopmentofInternettechnology,theconstructionofawebtechnologyismoreandmorelowthreshold.Butforthebeginnerwithwebsiteconstructiondemand,becausethereisnobasis,veryconfusedontherelatedconcept,intheprocessofexplorationwilltakemanydetours.Contentmanagementsystemistheuseoffreeandopensource(ContentManagementSystem,abbreviatedCMS),buildingawebsiteisabeaneasyjobtodoCMScontentmanagementsystemisthetypicalinformationmanagementsystem,itsdevelopmentmainlyincludestwoaspects:thebackgroundoftheestablishmentandmaintenanceofdatabaseandfront-endapplicationdevelopment.Fortheformerrequirementtoestablishdataconsistencyandintegritystrong,thedatasecuritygoodstorehouse.Forthelatterrequestapplicationprocedurefunctioniscomplete,easytouseetc..Thesysteminthefrontenddesign,inthelayoutofthepage,HTMLwilldefinetheelements,positioningCSStodisplayelements,front-endwebfourmostbasicskills:PS,HTML,CSS,JavaScript.Thisistheskilloffront-enddevelopmentthemostbasicandmostimportant,front-enddevelopment,inthelayoutofthepage,HTMLwilldefinetheelements,positioningCSStodisplayelements,andthenthroughtheJavaScripttoachievethecorrespondingeffectandinteraction.Althoughthesurfacelooksliketheseisverysimple,butitneedstograspthingsdefinitelynotless.Inthedevelopment,theneedfortheseconceptsclear,clear,sointhedevelopmentprocesswillbehandy.Thismanagementsystemdesigngoalistobringconveniencetopeopleinneedofsuchinformation,anduponcompletionoftheprocedureoflearnedknowledgeandexperience.Keywords：Managementsystem,frontend,HTML,CSS,PS,JavaScript.目錄TOC\o"1-3"\h\u20559第1章緒論 頁第1章緒論1.1選題背景及意義如今的互聯(lián)網(wǎng)已經(jīng)滲透到我們生活的每一個層面，網(wǎng)站的內(nèi)容越來越豐富全面，以此來滿足了各種不同需求的瀏覽者。網(wǎng)站的作用眾所周知人們通過網(wǎng)站快速獲取，發(fā)布和傳遞信息。目前網(wǎng)絡上有成千上百的網(wǎng)站，譬如：很多高校建立了自己的網(wǎng)站，企業(yè)網(wǎng)站建立了自己的網(wǎng)站，還有各種論壇，電子商城網(wǎng)站。這些網(wǎng)站的建立方便了人們的生活，當然現(xiàn)在越來越多的人，想在網(wǎng)上有自己的網(wǎng)站，在網(wǎng)絡上開辟的屬于自己的新天地。網(wǎng)絡具有超時空性。網(wǎng)絡超時空性是一種“一人對一人，一人對多人，多人對一人，多人對多人”的傳播方式[1]。但是一旦網(wǎng)絡設計完畢并投入使用后，隨著時間的變化，對網(wǎng)站的需求也有可能發(fā)生變化，例如：某高校想在自己的校園網(wǎng)上添加一個新欄目或者刪除一個欄目，那么毋庸置疑，傳統(tǒng)的網(wǎng)站開發(fā)會進行網(wǎng)站的“二次開發(fā)”，對網(wǎng)站進行修改，但是這不僅費時費力，更讓人頭疼的是，如果需求頻頻發(fā)生變化，那么網(wǎng)站就要隨之改變，網(wǎng)站的代碼就必須改來改去的。這無疑給網(wǎng)站設計者帶來時間和金錢上的損失，網(wǎng)站內(nèi)容管理系統(tǒng)具有許多基于模板的設計，可以加快網(wǎng)站開發(fā)的速度和減少開發(fā)的成本。我們要創(chuàng)建我們網(wǎng)站內(nèi)容管理系統(tǒng)的專業(yè)網(wǎng)站，網(wǎng)站前端設計最基本的三個技能：HTML，CSS，JavaScript，PS矢量圖像編輯技術。這個是前端開發(fā)中最基本也是最必須的三個技能。前端的開發(fā)中，在頁面的布局時，HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現(xiàn)相應的效果和交互。雖然表面看起來這些很簡單，但這里面需要掌握的東西絕對不會少。在進行開發(fā)前，需要對這些概念弄清楚，弄明白，這樣在開發(fā)的過程中才會得心應手。建立網(wǎng)站內(nèi)容管理系統(tǒng)發(fā)揮的作用如下（1）一個建全完善的網(wǎng)站內(nèi)容管理系統(tǒng)是基于很多模板和插件的，網(wǎng)站內(nèi)容管理系統(tǒng)實現(xiàn)對用戶的友好，而后臺是網(wǎng)站內(nèi)容管理系統(tǒng)的重中之重，網(wǎng)站的后臺使網(wǎng)站內(nèi)容的創(chuàng)建，管理，分享更加簡潔。（2）網(wǎng)站內(nèi)容管理系統(tǒng)采用靈活方便的可視化模板引擎，支持HTML靜態(tài)網(wǎng)頁生成，可用于創(chuàng)建各種新聞文章網(wǎng)站。（3）完善的內(nèi)容管理功能，后臺各頻道具有分類檢索，搜索，自動排序方式，批量處理，轉(zhuǎn)移欄目和類別等完備的內(nèi)容管理功能。本課題研究的主要目的之一即是幫助網(wǎng)站建設初學者了解和學習網(wǎng)站建設整個過程的基礎知識，消除他們對網(wǎng)站建設的迷茫與恐懼心理，適合希望個人網(wǎng)站的初學者，希望節(jié)省開支并獲得網(wǎng)站運營基礎知識的中小型網(wǎng)站以及全面了解網(wǎng)站建設與運營的人群參考，本文內(nèi)容將是你走上快速網(wǎng)站建設之路的捷徑。1.2選題研究的目的很多人認為建設一個網(wǎng)站覺得很復雜，同樣也有很多人認為，做一個網(wǎng)站很簡單，那么做一個網(wǎng)站是簡單還是復雜呢？建設一個網(wǎng)站其實最簡單的方式，就是利用現(xiàn)成的系統(tǒng)進行建設，這樣就不得不說內(nèi)容管理系統(tǒng)了在網(wǎng)站建設中的巨大優(yōu)勢了。網(wǎng)站內(nèi)容管理系統(tǒng)（CMS）以信息共享為核心目的，面向大量信息處理，集成管理，傳播，查詢與一體，可以實現(xiàn)從內(nèi)容采集，創(chuàng)建，傳遞到內(nèi)容分析的完整整合；內(nèi)容管理系統(tǒng)包括網(wǎng)絡信息內(nèi)容的創(chuàng)建獲取，存儲和管理，權(quán)限管理，以及信息發(fā)布等一系列功能，其功能模塊化的設計，完善的管理員權(quán)限等級設置，可以實現(xiàn)不同部門不同地點的內(nèi)容創(chuàng)作人員，編輯人員，發(fā)布人員，均可根據(jù)不同的權(quán)限在同一平臺上提交，修改，審批，發(fā)布等內(nèi)容，內(nèi)容管理系統(tǒng)模板與程序功能的前后臺分離，可以讓初學者不用花很大力氣和資本，短期內(nèi)即可建設功能強大界面同一的各種類型站點；內(nèi)容管理系統(tǒng)在結(jié)構(gòu)設計，搜索引擎優(yōu)化方面富含經(jīng)驗的精細設計，可以讓建設出來的站點具有良好的搜索引擎友好度，使網(wǎng)站在網(wǎng)絡營銷中占據(jù)巨大的優(yōu)勢。近幾年互聯(lián)網(wǎng)發(fā)展異常迅速，互聯(lián)網(wǎng)網(wǎng)站數(shù)量與日劇增，其中的大多數(shù)網(wǎng)站，都是由非專業(yè)人士運用網(wǎng)站內(nèi)容管理系統(tǒng)（CMS）建設起來的，CMS因其較低的技術門檻及開源而強大的功能，在互聯(lián)網(wǎng)網(wǎng)站建設中起著舉足輕重的作用，可以說CMS推動了互聯(lián)網(wǎng)網(wǎng)站的迅速發(fā)展，因此使用CMS，你不需要掌握很多的技術，即可建設出功能完善的各種網(wǎng)站，所以研究分析CMS的使用與發(fā)展趨勢，是具有重要的意義。另一方面，個人網(wǎng)站得以大量的涌現(xiàn)，開源軟件的發(fā)展是推動互聯(lián)網(wǎng)飛速發(fā)展重要因素。如果說建設大型的專業(yè)性的網(wǎng)站平臺，需要企業(yè)聘請專業(yè)的團隊定制和管理，那么對于功能需求相對普及化的中小型站點，就沒有能力也就沒有必要付出昂貴的代價，對于一般的中小型的網(wǎng)站建設，完全可以花費很少的資本，選擇優(yōu)秀而合適的CMS內(nèi)容管理系統(tǒng)進行搭建，從而以較少的投入獲得較高的效益。本課題從CMS的概念講解入手，從當前互聯(lián)網(wǎng)網(wǎng)站建設的現(xiàn)狀和形式分析，從一個初學者的角度考慮，重點以一個企業(yè)網(wǎng)站建設實例為參考模型，介紹一般的個人網(wǎng)站，企業(yè)網(wǎng)站以及專業(yè)性門戶網(wǎng)站的搭建過程，根本的目的即讓對網(wǎng)站建設感興趣的非專業(yè)人士，能夠了解一般網(wǎng)站建設的基本過程，能夠獨立地搭建起個人希望建設的網(wǎng)站站點，并能夠進行一般性有意義的網(wǎng)站運營。本文中提到的縮寫CMS一般均意為“內(nèi)容管理系統(tǒng)”。1.3可行性分析當前建立企業(yè)，政府對外的門戶網(wǎng)站或者面向內(nèi)部企業(yè)員工建立信息發(fā)布平臺是信息化建設的重要組成部分。然而，盡管各部門已建成各種形式的網(wǎng)站信息發(fā)布平臺，但是大多平臺功能簡單單一，而且信息更新緩慢，內(nèi)容粗糙單一，對多媒體內(nèi)容的管理相對薄弱，很難滿足信息交流，資源共享的實際需要，另外，大多功能單一的企業(yè)網(wǎng)站在營銷化方面做的糟糕至極，企業(yè)網(wǎng)站很難起到實際的效益。此外，隨著網(wǎng)絡的普及，個人網(wǎng)站也越來越多，很多非計算機專業(yè)的人也希望建設自己的個人網(wǎng)站。幾年前，想要在網(wǎng)絡上順利發(fā)表個人的文章或作品，還真的需要知道一點技術，而現(xiàn)在，大多數(shù)天天寫著文章的人，都是沒有任何技術背景的普通用戶，而隨著開源CMS項目如火如荼的發(fā)展趨勢，加上未來主機托管或者虛擬機租用費用的不斷降低，任何一個不具備專業(yè)技術知識的人，只要感興趣，都可以輕易的建立自己的網(wǎng)站，如果說這幾年網(wǎng)絡日志的發(fā)展解放了普通民眾的發(fā)言權(quán)，那么功能更為復雜的CMS系統(tǒng)的法杖，將會促使那些更加會創(chuàng)造，會關心別的用戶的需求的人的創(chuàng)造得到利益的回報。內(nèi)容管理系統(tǒng)由于大都是專業(yè)團隊歷盡多年開發(fā)出來的整站系統(tǒng)，具有一般平臺不可比擬的巨大優(yōu)勢：首先，CMS低廉的價格，節(jié)省網(wǎng)絡技術投入成本，降低技術難度，是值得網(wǎng)站建設者選擇的理由之一；其次CMS強大健全的功能，能滿足各種應用需求，能夠提高快速部署能力和結(jié)構(gòu)更新，提高網(wǎng)站運營效率和信息更新力；再者，CMS模塊化設計以及階梯型用戶權(quán)限部署，能夠輕松地規(guī)范網(wǎng)站管理運營規(guī)則和管理手段；此外，CMS強大的后臺管理功能，能從很大程度上減輕網(wǎng)站技術和采編人員的工作難度和壓力，使一般網(wǎng)站管理員不用學習專業(yè)的知識，只需簡單的文檔添加操作即可較好的管理整個網(wǎng)站?？偸?，CMS是中小型網(wǎng)站快速建立門戶網(wǎng)站的捷徑，是企業(yè)單位和個人建設網(wǎng)站的可行性解決方案。通過本課題的研究學習，能夠讓讀者對內(nèi)容管理系統(tǒng)有一個明確清晰的認識，對一般性網(wǎng)站建設過程有清晰的了解，對網(wǎng)站的運營與優(yōu)化推廣方法有基礎的意識，并能通過短期的學習，獨立搭建個人或者企業(yè)站點。1.4本章小結(jié)本章闡述了開發(fā)網(wǎng)站管理系統(tǒng)的研究背景和意義。介紹了網(wǎng)站的發(fā)展現(xiàn)狀，以及對于非專業(yè)人士最快的建站方法對，說明了網(wǎng)站內(nèi)容管理系統(tǒng)的總體規(guī)劃思想。最后對于本文課題的研究內(nèi)容進行了可行性分析。第2章前端開發(fā)工具及相關技術2.1前端開發(fā)環(huán)境網(wǎng)站前端開發(fā)，即網(wǎng)頁架構(gòu)設計。主要是由與交互設計，視覺設計的配合，根據(jù)效果圖來規(guī)劃頁面布局，合理部署頁面代碼層次，挖掘用戶體驗效果。用Editplus，CSS，JS等布局網(wǎng)頁內(nèi)容，制作靜態(tài)頁面，這些頁面要兼容各主流瀏覽器，并配合程序完成靜態(tài)頁面與后臺程序的整合工作。另外，要對網(wǎng)站做一些相應的更新，維護及優(yōu)化。整個網(wǎng)站開發(fā)的流程在后面有具體介紹。前端開發(fā)在整個過程中占據(jù)著不可替代的地位，其它幾個環(huán)節(jié)主要給予相關的配合[2]。2.2前端開發(fā)工具（1）PhotoshopAdobePhotoshop，簡稱“PS”，是一個由AdobeSystems開發(fā)和發(fā)行的圖像處理軟件。Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以更有效的進行圖片編輯工作。在網(wǎng)站前端開發(fā)過程中需要把圖片用Photoshop處理成加載到網(wǎng)站頁面的圖片，用Photoshop制作矢量圖形用作網(wǎng)站頁面的修飾按鈕。EditplusEditPlus是由韓國人編寫的一款共享軟件(1-userlicense:US$35)，最新版本是EditPlus3.41(2012-05-03)。EditPlus是功能全面的文本、HTML、程序源代碼編輯器。首先，EditPlus是一套功能強大的文本編輯器。它擁有無限制的Undo/Redo功能，讓你不再為一步誤操作而后悔不已；其強勁的英文拼字檢查、自動換行、列數(shù)標記、語法高亮顯示、垂直選擇、搜尋功能，讓你全面體驗記事本所沒有的超強功能；它可以同時編輯多種文件類型，輕松做到“一旦擁有，別無所求”；另外還有全屏幕瀏覽功能；特別值得一提的是，它的監(jiān)視剪貼板的功能，能同步于剪貼板自動將文字貼進EditPlus的編輯窗口中，讓你省去粘貼的步驟。其次，EditPlus還是一個好用的(X)HTML編輯器。在EditPlus中設計網(wǎng)頁和編輯一個文檔沒什么兩樣。單擊“File”→“New”→“HTMLPage”，就可以打開“HTML頁面編輯器”窗口，使用它所提供的工具就可以直接進行網(wǎng)頁的編輯與創(chuàng)作。EditPlus除了可以對你直接輸入的文字用顏色標記HTMLTag（同時支持C/C++、Perl、Java）外，還內(nèi)建了完整的HTML和CSS1指令功能，你甚至可以一邊編輯一邊“瀏覽”（CTRL+B）頁面效果。對于習慣用記事本進行網(wǎng)頁編輯的網(wǎng)友們來說，它可以幫你節(jié)省一半的網(wǎng)頁編輯時間。再次，EditPlus其他比較好用的功能包括：可以設置工程并進行多文件查找；代碼片斷；自動完成；設置標記方便跳轉(zhuǎn)，EditPlus功能眾多，有不少功能很多編輯器都是有的，就不進行介紹.(3)MyEclipse簡介MyEclipse企業(yè)級工作平臺（MyEclipseEnterpriseWorkbench，簡稱MyEclipse）是對EclipseIDE的擴展，利用它我們可以在數(shù)據(jù)庫和JavaEE的開發(fā)，發(fā)布以及應用程序服務器的整合方面極大的提高工作效率。它是功能豐富的JavaEE集成開發(fā)環(huán)境，包括了完備的編碼，調(diào)試，測試和發(fā)布功能，完整支持HTML，Struts，JSP，CSS，JavaScript，Spring，SQL，Hibernate。MyEclipse[]結(jié)構(gòu)上的這種模塊化，可以讓我們在不影響其他模塊的情況下，對任一模塊進行單獨的擴展和升級。簡單而言，MyEclipse是Eclipse的插件，也是一款功能強大的JavaEE集成開發(fā)環(huán)境，支持代碼編寫，配置，測試以及除錯，MyEclipse6。0以前版本需先安裝Eclipse。MyEclipse6。0以后版本安裝時不需安裝Eclipse。2.3前端開發(fā)相關技術2.3.1html簡介[6]超文本標記語言HTML作為一種語言，它具有語言的一般特征，所謂語言的一般特征是一種符號系統(tǒng)，具有自己的詞匯（符號）和語法（規(guī)則）。所謂標記，就是作記號。和寫文章時通常用大體字標記文章的標記，用換行空兩格標記一個段落一樣，HTML是一對<h1>標記把文字括起來表明這些字是標題，用一對<p>標記把一段字括起來表明是一個段落?！^超文本，就是相對普通文本有超越的地方，如超文本可以通過超鏈接轉(zhuǎn)到指定的某一頁，而普通文本只能一頁頁的翻，超文本還具有圖像，視頻，聲音等元素，這些都是普通文本無法具有的。超文本標記語言HTML是一種建立超文本/超媒體文檔的語言，它用標簽標記文檔中的文本及圖像等各種元素，指示瀏覽器如何顯示這些元素。HTML語言與編程語言有明顯的不同，首先它不是一種計算機編程語言，而是一種描述文檔結(jié)構(gòu)的語言，或者說排版語言；其次HTML是弱語法語言，隨便怎么寫都可以，計算機盡力去理解執(zhí)行，不理解的按原樣顯示，而編程語言是嚴格語法的語言，寫錯一點點計算機都不執(zhí)行，報告錯誤；再次HTML語言不像大多數(shù)編程語言一樣需要編譯成指令后執(zhí)行，而是每次由瀏覽器解釋執(zhí)行。2.3.2CSS簡介CSS[4]是CascadingStylesSheets的縮寫，中文譯名為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。CSS[](層疊樣式表)是用來進行網(wǎng)頁風格設計的，它簡化并擴展了HTML中的各種標記，使得各個標記的屬性更具有一般性和通用性，大大提高了HTML開發(fā)的效率。在制作網(wǎng)頁時采用CSS技術，可以有效地對頁面的布局，字體，顏色，背景和其他效果實現(xiàn)更加精確的控制，只要對相應的代碼作一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。什么是CSS？CSS中，Cascading是“層疊”的意思，也就是說在同一個Web文檔中可以有多個樣式表存在，這些樣式表根據(jù)所在的位置，擁有不同的優(yōu)先級，優(yōu)先級越高，就會在最后顯示時被采用。從樣式表插入的形式看可以分為3種。(1) 內(nèi)聯(lián)式樣式表；(2) 嵌入式樣式表；(3) 外部式樣式表；CSS的特點CSS是用來擴展HTML的，而不是用來替換HTML的，也就是說CSS不能脫離HTML，它只是一項輔助工具。除了可擴展HTML的樣式設定外，CSS使得網(wǎng)頁的設計與維護更加高效，這主要表現(xiàn)在以下幾個方面：減少圖形文件的使用，集中管理樣式信息，設定共享樣式，將樣式分類使用。2.3.3Javascript簡介Javascript的出現(xiàn)，它可以使得信息和用戶之間不僅只是一種顯示和瀏覽的關系，而是實現(xiàn)了一種實時的，動態(tài)的，可交互式的表達能力[3]。從而基于CGI靜態(tài)的HTML頁面將被可提供動態(tài)實時信息，并對客戶操作進行反應的Web頁面的取代。Javascript腳本正是滿足這種需求而產(chǎn)生的語言。它深受廣泛用戶的喜愛和歡迎。它是眾多腳本語言中較為優(yōu)秀的一種，它與WWW的結(jié)合有效地實現(xiàn)了網(wǎng)絡計算和網(wǎng)絡計算機的藍圖。無疑Java家族將占領Internet網(wǎng)絡的主導地位。因此，盡快掌握javascript腳本語言編程方法是我國廣大用戶日益關心的問題。2.3.4Javascript基本特點(1)基于對象的語言javascript是一種基于對象的語言，同時也可以看作一種面向?qū)ο蟮?。這意味著它能運用自己已經(jīng)創(chuàng)建的對象。因此，許多功能可以來自于腳本環(huán)境中對象的方法與腳本的相互作用[]。(2)簡單性javascript的簡單性主要體現(xiàn)在：首先它是一種基于Java基本語句和控制流之上的簡單而緊湊的設計，從而對于學習Java是一種非常好的過渡。其次它的變量類型是采用弱類型，并未使用嚴格的數(shù)據(jù)類型。(3)安全性javascript是一種安全性語言，它不允許訪問本地的硬盤，并不能將數(shù)據(jù)存入到服務器上，不允許對網(wǎng)絡文檔進行修改和刪除，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互。從而有效地防止數(shù)據(jù)的丟失。(4)動態(tài)性javascript是動態(tài)的，它可以直接對用戶或客戶輸入做出響應，無須經(jīng)過Web服務程序。它對用戶的反映響應，是采用以事件驅(qū)動的方式進行的。所謂事件驅(qū)動，就是指在主頁(HomePage)中執(zhí)行了某種操作所產(chǎn)生的動作，就稱為“事件”(Event)。比如按下鼠標，移動窗口，選擇菜單等都可以視為事件。當事件發(fā)生后，可能會引起相應的事件響應。2.3.5JQueryJQuery是繼prototype之后又一個優(yōu)秀的Javascript框架。其宗旨是——WRITELESS，DOMORE，寫更少的代碼，做更多的事情。它是輕量級的js庫(壓縮后只有21k)，這是其它的js庫所不及的，它兼容CSS3，還兼容各種瀏覽器（IE6。0+，F(xiàn)F1。5+，Safari2。0+，Opera9。0+）。JQuery是一個快速的，簡潔的JavaScript庫，使用戶能更方便地處理HTMLdocuments，events，實現(xiàn)動畫效果。jQuery其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強大的網(wǎng)頁特效。本文主要論述了如何在Web開發(fā)中使用jQuery技術，豐富網(wǎng)站的交互性和用戶體驗性[]。jQuery是一套Javascrip腳本庫。"Javascript輕量級腳本庫"系列文章。Javascript腳本庫類似于。NET的類庫，這些工具方法或?qū)ο蠓椒ǚ庋b在類庫中，方便用戶使用。注意jQuery是腳本庫，而不是腳本框架。"庫"不等于"框架"，比如"System程序集"是類庫，而"ASP.NETMVC"是框架。jQuery并不能幫助我們解決腳本的引用管理和功能管理，這些都是腳本框架要做的事。腳本庫能夠幫助完成編碼邏輯，實現(xiàn)業(yè)務功能。使用jQuery將極大的提高編寫javascript代碼的效率，讓寫出來的代碼更加優(yōu)雅，更加健壯。jQuery有如下特點：(1)提供了強大的功能函數(shù)使用這些功能函數(shù)，能夠幫助我們快速完成各種功能，而且會讓我們的代碼異常簡潔。(2)解決瀏覽器兼容性問題javascript腳本在不同瀏覽器的兼容性一直是Web開發(fā)人員的噩夢，常常一個頁面在IE9，F(xiàn)irefox下運行正常，在IE6下就出現(xiàn)莫名其妙的問題。針對不同的瀏覽器編寫不同的腳本是一件痛苦的事情。有了jQuery我們將從這個噩夢中醒來，比如在jQuery中的Event事件對象已經(jīng)被格式化成所有瀏覽器通用的，從前要根據(jù)event獲取事件觸發(fā)者，在IE下是event.srcElements而ff等標準瀏覽器下下是event。target。jQuery則通過統(tǒng)一event對象，讓我們可以在所有瀏覽器中使用event。target獲取事件對象。(3)實現(xiàn)豐富的UIjQuery可以實現(xiàn)比如漸變彈出，圖層移動等動畫效果，讓我們獲得更好的用戶體驗。單以漸變效果為例，從前我自己寫了一個可以兼容IE和ff的漸變動畫，使用大量javascript代碼實現(xiàn)，費心費力不說，寫完后沒有太多幫助過一端時間就忘記了。再開發(fā)類似的功能還要再次費心費力。如今使用jQuery就可以幫助我們快速完成此類應用。(4)糾正錯誤的腳本知識大部分開發(fā)人員對于javascript存在錯誤的認識。比如在頁面中編寫加載時即執(zhí)行的操作DOM的語句，在HTML元素或者document對象上直接添加"onclick"屬性，不知道onclick其實是一個匿名函數(shù)等等。擁有這些錯誤腳本知識的技術人員也能完成所有的開發(fā)工作，但是這樣的程序是不健壯的。比如"在頁面中編寫加載時即執(zhí)行的操作DOM的語句"，當頁面代碼很小用戶加載很快時沒有問題，當頁面加載稍慢時就會出現(xiàn)瀏覽器"終止操作"的錯誤。jQuery提供了很多簡便的方法幫助我們解決這些問題，一旦使用jQuery你就將糾正這些錯誤的知識--因為我們都是用標準的正確的jQuery腳本編寫方法!2.4本章小結(jié)本章介紹了開發(fā)網(wǎng)站內(nèi)容管理系統(tǒng)前端所需要的開發(fā)工具和他們的運行環(huán)境，同時講述了相關的前端開發(fā)技術比如：Javascript，CSS，jqurey等。以便以后的開發(fā)過程中能夠?qū)@些開發(fā)工具盒技術有深刻的理解。第3章前端布局分析與設計3.1前端總體開發(fā)流程及設計前端設計Web前端開發(fā)技術是一個先易后難的過程，主要包括三個要素：HTML，CSS和JavaScript，這就要求前端開發(fā)工程師不僅要掌握基本的Web前端開發(fā)技術，網(wǎng)站性能優(yōu)化，SEO和服務器端的基礎知識，而且要學會運用各種工具進行輔助開發(fā)以及理論層面的知識，包括代碼的可維護性，組件的易用性，分層語義模板和瀏覽器分級支持等。3.1.1分層開發(fā)在網(wǎng)站內(nèi)容管理系統(tǒng)概要確定后就需要進行分層開發(fā)的劃分，根據(jù)項目內(nèi)容的不同，劃分工作。大致分為，總體結(jié)構(gòu)搭建，模塊制作，頁面制作，底層JS搭建[7]，JS交互效果，內(nèi)部測試，代碼優(yōu)化。如圖3-1所示：圖3SEQ圖\*ARABIC\s11分層開發(fā)圖這樣做的好處是能根據(jù)項目的不同，劃分出不同的功能模塊，合理的安排時間，在有限的時間內(nèi)做出很多模塊和功能。降低開發(fā)成本，提高開發(fā)效率。3.1.2代碼編寫前期工作準備好后，就開始進入代碼編寫階端，大致流程為總規(guī)劃和設計草稿完成后，就進行前期的前端開發(fā)（搭建大致的HTML結(jié)構(gòu)），然后設計出完設計稿后再進行頁面樣式的完善，最后完成正式的頁面后交給開發(fā)，嵌套程序。這樣做的好處不僅能有效的提高開發(fā)效率，實現(xiàn)逐層開發(fā)，讓前端提前介入，減少整體消耗的時間，確保產(chǎn)品有更多的時間修改和完善。確定了流程后還需要對產(chǎn)品原型進行分析，拆分，把復用性高的部分找出來制作成代碼模塊，方便以后的套用。確認二，三級頁面的風格搭建統(tǒng)一框架。前端設計樣式確定以后，就進行通用模塊樣式的設計（包括按鈕，分頁，默認字體顏色，連接顏色等），完成后并提交給前端，統(tǒng)一的搭建。在代碼的編寫過程中，最重要的是標準和規(guī)范的執(zhí)行遵守，在編寫HTML時候充分發(fā)揮想象盡可能的滿足后期樣式表現(xiàn)的需要。如圖3-2所示：圖3-SEQ圖\*ARABIC\s12編寫代碼流程圖代碼編寫過程中讓前端提前進入開發(fā)流程中來，在樣式屬性后就進行HTML結(jié)構(gòu)的編寫，頁面設計完成后，在進行樣式表的開發(fā)，這樣不僅能節(jié)省很多的開發(fā)時間，提高開發(fā)效率，能在前端對全局頁面的把控。在此同時也強調(diào)規(guī)范和模塊化的重要性，正所謂無規(guī)矩不成方圓，這樣能便于后期維護，減少維護成本。而模塊化，是敏捷開發(fā)所必需的，重要性在這里也不做過多的描述。3.1.3內(nèi)部測試與后續(xù)優(yōu)化

前端的內(nèi)部測試，指出頁面與設計稿不匹配的地方，優(yōu)化部分細節(jié)頁面樣式。測試不僅能提高內(nèi)測的質(zhì)量，還能更早的發(fā)現(xiàn)問題并及時的修改，否則當頁面提交開發(fā)以后再做修改是一件很麻煩的事情。當所有細節(jié)修改完畢后，就需要進行制作文件的優(yōu)化以確保代碼的最優(yōu)化，盡可能地壓縮圖片和減少外部HTTP請求如圖3-3所示：圖3-3內(nèi)部測試流程圖圖34前端開發(fā)流程圖這套流程制定出來就一直要求所有前端設計必須嚴格按照流程執(zhí)行，也經(jīng)過了很長時間的磨合跟改進。雖然不是很完美，但是很適合我們現(xiàn)在開發(fā)的需要，好處也是顯而易見的，遵循并使用它對我們的發(fā)開有很大的幫助，能更好的應對高強度，高質(zhì)量的開發(fā)需要。代碼更可控，開發(fā)效率更高。3.2前端UI設計3.2.1網(wǎng)站LOGO的設計網(wǎng)站的圖標是一個網(wǎng)站的門面，只有設計好的圖標才可以引來更多的瀏覽量，本系統(tǒng)是網(wǎng)站內(nèi)容管理系統(tǒng)，偏重信息化的東西，要傳達給用戶更多，較清晰的信息，設計的圖標要清新，實而不華，在本次網(wǎng)站內(nèi)容管理系統(tǒng)的設計中，選擇與網(wǎng)站色調(diào)一致的色系-藍色。其中CMS前面的圖樣是IT兩個字樣，其中以IT來設計是因為開發(fā)本系統(tǒng)的都是從事IT行業(yè)的，I設計成波浪形式的，T設計成海燕形式的，表意：海燕在大海中展翅飛翔，寓意：可以克服重重困難，事業(yè)蒸蒸日上。（注：由于設計的圖標很小，在word中截圖不是太清楚，這是放大后的效果）。圖3-2網(wǎng)站LOGO圖標3.2.2網(wǎng)站整體布局網(wǎng)站整體布局大致可以分為“同”字型。最上面是網(wǎng)站的標題以及橫幅廣告條，接下來就是網(wǎng)站的主要內(nèi)容，網(wǎng)站內(nèi)容的左邊是會員登錄和注冊，最下面是網(wǎng)站的一些基本信息，聯(lián)系方式，版權(quán)等。這種結(jié)構(gòu)是網(wǎng)站常見的一種布局方式，其實時操作版面，頁面布局清晰，擺布對稱，主次分明，整體布局如圖3-3.子欄目排行榜子欄目排行榜版權(quán)Logo導航內(nèi)容圖3-3網(wǎng)站整體布3.2.3模塊分布UI設計這是設計中最重要的一點，也可以發(fā)揮出更多創(chuàng)意的設計想法；其中體現(xiàn)出層次感設計的就是從屬關系，點構(gòu)成線，線構(gòu)成面，主次清晰明了。下面是以任由設計師發(fā)揮，不是這樣死板，要運用層次感的原理去設計如圖3-5,3-6所示：正確的層次布局錯誤的布局圖35布局對比圖在網(wǎng)站內(nèi)容管理系統(tǒng)中UI層次感的體現(xiàn)3.2.4顏色配置產(chǎn)生豐富色彩的三原色是紅，綠，藍，也就是RGB，十六進制是000000，

例如經(jīng)常寫的red，color:#FF0000；縮寫color:#F00；color:gray(#808080)；是比較深的灰色。所謂鄰近色，就是在色帶上相鄰近的顏色，例如綠色和藍色，紅色和黃色就互為鄰近色。采用鄰近色設計網(wǎng)頁可以使網(wǎng)頁避免色彩雜亂，易于達到頁面的和諧統(tǒng)一。我們網(wǎng)站上用的色彩系是屬于藍白色系這個選擇符合網(wǎng)站的整體風格，不可能把網(wǎng)站設計成五顏六色，因為是內(nèi)容網(wǎng)站所以要體現(xiàn)一種淡雅，自然的色彩風格。背景色一般采用素淡清雅的色彩，避免采用花紋復雜的圖片和純度很高的色彩作為背景色，同時背景色要與文字的色彩對比強烈一些。首頁的頂端使用藍色標題圖片下面用淺藍色這兩個部分過度的很自然。在文字部分用黑色文字當鼠標移動到相關文字上面時文字顏色變成藍色。不同的文字顏色會產(chǎn)生不同的效果，這能給瀏覽者一種層次感，方便與閱讀。違紀一點禁止大面積使用白色文字，特別是較深的背景下，禁止大面積使用加粗文字如圖3-7所示：圖37字體顏色變換3.3

點，線，面的運用先進開發(fā)思想和良好設計模式的前端模塊化技術正逐漸成熟。根據(jù)網(wǎng)站前端模塊化的不同開發(fā)思想，詳細分析了目前常見的三種模塊化開發(fā)策略，闡述了每種開發(fā)策略的具體實現(xiàn)方法，常見的框架與工具存在的問題及優(yōu)缺點，并提出了完善前端模塊化開發(fā)策略的一些方法。在網(wǎng)頁設計中同樣離不開平面設計中最基本的點，線，面的運用。3.3.1點的運用在內(nèi)容繁雜的網(wǎng)頁上為了可以讓瀏覽者更輕松的找到自己想要的信息，點的引導作用必不可少如圖3-12所示：3.3.2線的運用線不但起到了頁面的分割作用，很好的運用線條還使網(wǎng)頁錦上添花如圖3-13：3.4網(wǎng)站結(jié)構(gòu)布局及設計3.4.1網(wǎng)站首頁結(jié)構(gòu)實際內(nèi)容占據(jù)網(wǎng)頁的大部分空間，為50%～80%，導航部分20%左右。顏色的選擇以藍白色為主，沒有使用太多的顏色來修飾某個對象，此外，正文和背景色的對比度較大，一般字色為默認的黑色，并且用了不同的背景色條區(qū)分正文區(qū)與其他功能區(qū)。為了提高網(wǎng)頁的可讀性，標題區(qū)，標題行和正文區(qū)使用了不同大小的字體，正文使用的是靜止的文字，且字體足夠大，以便于閱讀。網(wǎng)站內(nèi)容管理系統(tǒng)主要用來進行網(wǎng)站內(nèi)容信息的顯示。作為一個網(wǎng)站，應該由一些相關及相對獨立的模塊整合而成。本網(wǎng)站系統(tǒng)主要包括以下幾個主要頁面及幾個大的模塊，每個頁面包含豐富的內(nèi)容，每個大的模塊下又細分為幾個的功能模塊。

制作前臺頁面模塊，包括主頁及各個子頁面，建立各個頁面與數(shù)據(jù)庫中相關數(shù)據(jù)鏈接，實現(xiàn)前臺通過調(diào)用數(shù)據(jù)庫把后臺數(shù)據(jù)在前臺顯示和更新。整體網(wǎng)站擁有完善的功能，風格要求簡潔大方不單調(diào)。各個子頁面都可正常返回主頁以及正確連接到各個子頁面。功能要求使用簡單全面，容易操作。3.4.2主題鮮明，富有特色在目標明確的基礎上，完成網(wǎng)站的構(gòu)思創(chuàng)意即總體設計方案。對網(wǎng)站的整體風格和特色做出定位，規(guī)劃網(wǎng)站的組織結(jié)構(gòu)。要做到主題鮮明突出，力求簡潔，要點明確，以簡單明確的語言和畫面告訴大家本站點的主題，吸引對本站點有需求的人的視線，對無關的人員也能留下一定的印象。對于一些LOGO[]標志應充分加以利用。調(diào)動一切手段充分表現(xiàn)網(wǎng)站的個性和情趣，突出個性，這樣才能夠辦出網(wǎng)站的特色如圖3-15所示：圖網(wǎng)站標題logo3.4.3版式編排布局合理性BABADcDcEEFF網(wǎng)頁設計作為一種視覺語言，當然要講究編排和布局，雖然主頁的設計不等同于平面設計，但它們有許多相近之處，應充分加以利用和借鑒。站點設計簡單有序，主次關系分明，將零亂頁面的組織過程，混雜的內(nèi)容，依整體的布局的需要進行分組歸納，經(jīng)過進行具有內(nèi)在聯(lián)系的組織排列，反復推敲文字，圖形與空間的關系，使瀏覽者有一個流暢的視覺體驗，如圖3-16所示：圖中的A網(wǎng)站內(nèi)容管理系統(tǒng)的大logo以及網(wǎng)站名稱，能展現(xiàn)網(wǎng)站的主題。訪問者第一眼就能看的出來網(wǎng)站的類別等。B區(qū)域是網(wǎng)站的導航欄，導航的顏色基本上是藍白色，能展現(xiàn)網(wǎng)站的大體內(nèi)容。導航欄跟頂端logo的顏色基本上一致，用戶瀏覽網(wǎng)頁時才不會產(chǎn)生視覺疲勞。導航欄中每個導航按鈕的設計也是符合美觀要求。大方，大氣，自然是設計導航欄的重要基礎。C區(qū)域是首頁中各個欄目中的主要信息，即文章D區(qū)域是子欄目。方便找到不同類型的文章E區(qū)網(wǎng)站文章的排行榜。最近在系發(fā)生的最新鮮的新聞，消息等內(nèi)容都在這里按時間循序顯示。F區(qū)域版權(quán)等基本信息。第4章主要功能的實現(xiàn)4.1主要功能的實現(xiàn)4.1.1模板設計首頁模板設計根據(jù)網(wǎng)站主題，設計模板的布局模板統(tǒng)一頂部為導航條，網(wǎng)站的欄目，前臺顯示的欄目是通過后臺添加的。模板的中部是網(wǎng)站的圖文信息，根據(jù)網(wǎng)站的最新的信息，或者網(wǎng)站的主題信息，設計的模塊模板的底部是網(wǎng)站的版面制作版權(quán)信息等（2）列表頁模板設計列表頁模板的頂部和首頁模板的頂部是相同的，這樣保持了網(wǎng)站的風格一致。列表頁模板的中部的左邊部分是欄目下的信息列表，根據(jù)不同的欄目顯示對應的欄目下的信息列表，中部的右邊部分是頂部欄目下面的子欄目，還有最受關注的文章列表列表頁模板的底部是網(wǎng)站的版面制作，版權(quán)信息等（3）詳情頁模板設計詳情頁模板的頂部和列表頁還有首頁模板的頂部是相同的，這樣保持了網(wǎng)站的風格一致性。詳情頁模板的中部的左邊部分是文章的詳情，包括標題，發(fā)布時間，瀏覽次數(shù)，文章內(nèi)容等。詳情頁模板的中部的右邊部分是頂部欄目下的子欄目，還有最受關注的文章列表詳情頁模板的底部是網(wǎng)站的版面制作，版權(quán)信息等4.2具體功能的實現(xiàn)前臺新聞顯示可以根據(jù)網(wǎng)站的需要，進行更新，如顯示欄目導航，某個欄目的N條新聞等。通過自定義標簽與后臺數(shù)據(jù)庫進行連接。如：欄目導航的顯示通過標簽{#ht:channeltype=’top’#}{#/ht:channel#}type表示欄目類型top表示頂級欄目son表示（2）子欄目對欄目列表的顯示通過標簽{#ht:listpagesize=’num’#}{#/ht:list#}顯示欄目下文章列表和這個標簽一起使用的是{#ht:pagesdesc=’樣式’/#}分頁標簽，用來為列表分頁對文章內(nèi)容的顯示通過標簽{#ht:DBfield=’字段’/#}文章的字段title顯示文章標題content顯示文章的內(nèi)容等首頁文章列表顯示通過標簽{#ht:articlechannelid=’欄目id’titlelen=’標題長度’rows=’顯示條數(shù)’order=’順序’orderby=’字段名’...#}channelid為該欄目下的文章，titlelen為顯示標題長度rows為顯示文章的條數(shù)order為排序順序orderby為按照什么字段排序各個模板頁的頭部和底部風格一致通過標簽{#ht:includefile=’模板名稱’/#}file為要包含的模板文件的名稱通常為head.htm和foot.htm除此之外還有一些全局標簽如：{#ht:globalwebHost/#}網(wǎng)站域名{#ht:globalcsspath/#}css文件路徑{#ht:globaljspath/#}js文件路徑{#ht:globalimagepath/#}圖片路徑等系統(tǒng)通過后臺解析嵌套在模板文件中的所有的標簽生成靜態(tài)html文件從而實現(xiàn)文章的實時性以及用戶瀏覽體驗4.3具體實現(xiàn)技術4.3.1首頁模板[5]{#ht:includefile='head.htm'/#}<!--包含頭部模板文件--><divclass="content">{#ht:articlechannelid='9'rows='5'titlelen='18'#}<!--調(diào)用文章標簽取出欄目id為9的欄目下面的文章--> <h4class="blue"><ahref="{$ht_arcurl}"title="{$ht_title}">{ht_title}</a></h4><p><imgsrc="{$ht_litimg}"width="90"height="60"/></p><divclass="bk20hr"><hr/></div>{#/ht:article#}</div><ulclass="contentdigg">{#ht:articlechannelid='8'rows='3'#}<!--調(diào)用文章標簽取出欄目id為8的欄目下面的文章，取3條--> <li><ahref="{$ht_arcurl}"target="_blank"title="{$ht_title}">{$ht_title}</a></li>{#/ht:article#}</ul>{#ht:includefile='foot.htm'/#}<!--include標簽包含底部模板文件-->4.3.2列表頁模板{#ht:includefile='head.htm'/#}<!--包含頭部模板文件--><divclass="col-left"><divclass="crumbs"><ahref="{#ht:globalwebHost/#}"><!--使用全局標簽得到首頁地址-->首頁</a><span>></span>列表</div><ulclass="listlh24f14">{#ht:listpagesize='4'#}<!--使用list標簽調(diào)用相應欄目下面的文章每頁顯示4條--> <li><spanclass="rt">{$ht_pubdate|date='Y-m-dH:i:s'}</span>·<ahref="{$ht_arcurl}"target="_blank">{$ht_title}</a></li> <liclass="bk20hr"></li>{#/ht:list#}</ul><divid="pages"class="text-c"><ul>{#ht:pagedesc='first,pre,pagelist,next,end'/#}<!--使用page標簽對列表進行分頁desc是分頁樣式--></ul></div></div><divclass="box"><h5class="title-2">欄目</h5><ulclass="contentdigg"> {#ht:channeltype='son'rows='2'#}<!--使用channel標簽得到相應欄目的子欄目--> <li><ahref="{$ht_typeurl}">{$ht_typename}</a></li> {#/ht:channel#}</ul></div>{#ht:includefile='foot.htm'/#}<!--包含底部模板文件-->4.3.4內(nèi)容頁模板{#ht:includefile='head.htm'/#}<!--包含頂部模板文件--><divid="Article"><h1>{#ht:DBfield='title'/#}<!--調(diào)用全局標簽得到文章標題--><br/><span>{#ht:DBfield='pubdate|date=Y-m-d\H:i:s'/#}<!--調(diào)用全局標簽文章發(fā)布時間-->   來源：{#ht:DBfield='author'/#}   評論：<ahref="#comment_iframe"id="comment">0</a>點擊：</span><spanid="hits">{#ht:DBfield='clicknum'/#}</span></h1> <divclass="summary">{#ht:DBfield='content'/#}<!--文章內(nèi)容--></div> <divid="pages"class="text-c"></div><pstyle="margin-bottom:10px"><divclass="bk15"></div></div><divclass="box"><h5class="title-2">欄目</h5><ulclass="contentdigg"> {#ht:channeltype='son'#} <li> <ahref="{$ht_typeurl}"target="_blank"title="{$ht_typename}">{$ht_typename}</a></li> {#/ht:channel#}</ul></div>{#ht:includefile='foot.htm'/#}<!--包含底部模板文件-->4.3.5head模板文件<linktype="text/css"rel="stylesheet" href="{#ht:globalcsspath/#}/reset.css"></link><linktype="text/css"rel="stylesheet" href="{#ht:globalcsspath/#}/default_blue.css"></link><scriptsrc="{#ht:globaljspath/#}/jquery.min.js"type="text/javascript"></script><scriptsrc="{#ht:globaljspath/#}/jquery.sgallery.js" type="text/javascript"></script><scriptsrc="{#ht:globaljspath/#}/search_common.js" type="text/javascript"></script><map> <ulclass="nav-site"> <li> <ahref="{#ht:globalwebHost/#}"> <span>首頁</span> </a> </li> {#ht:channeltype='top'#}<!--欄目標簽調(diào)用頂級欄目作為導航欄目--> <liclass="line">|</li> <li> <ahref="{$ht_typeurl}"> <span>{$ht_typename}</span> </a> </li> {#/ht:channel#} </ul> </map>4.3.6foot模板文件{#ht:articlechannelid='8'#}<ahref="{$ht_arcurl}"target="_blank">{$ht_title}</a>|{#/ht:article#}4.3.7小部分css代碼body{color:#444;background:#eeeurl(../image/v1/body-bg.png)repeat-ycenter}/*body的字體顏色#444；背景顏色為#eee灰色背景圖片為body-bg.png縱向平鋪居中*/a{text-decoration:none;color:#444}/*a標簽沒有下劃線字體顏色為#444*/4.3.8js代碼functionalertinfo(control){ //得到創(chuàng)建的透明背景對象 varback=createBack(); //加入body中 back.setAttribute('id','salert'); if(window.top.location!=self.location){ window.top.document.body.appendChild(back); }else{ document.body.appendChild(back); } //創(chuàng)建背景上面的div層 vardiv=createDiv(); //創(chuàng)建div層上面的banner varbanner=createBanner(); //創(chuàng)建關閉按鈕 varbutclose=createCloseButton(); //創(chuàng)建內(nèi)容區(qū) varcontent=createContent(); banner.appendChild(butclose); div.appendC