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

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

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

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

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

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