【畢業(yè)論文】基于HTML5-CSS3的相冊設(shè)計(jì)與實(shí)現(xiàn)

摘要在當(dāng)今社會(huì)，相冊影像已成為人們生活和工作中日以追求的物質(zhì)和精神需求，婚紗影像、兒童寫真、個(gè)人寫真、聚會(huì)等等，它可以記錄人生的美好時(shí)光，這些都需要應(yīng)用相冊來制作成為影像。隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展和計(jì)算機(jī)性能的不斷提升，用戶享受互聯(lián)網(wǎng)的方式開端，更加的安全可靠，方便用戶共享數(shù)據(jù)。在各種應(yīng)用不斷的趨于更加網(wǎng)絡(luò)話的同時(shí)，一種新的技術(shù)標(biāo)準(zhǔn)也隨之產(chǎn)生，那就是HTML5（是一種標(biāo)記語言也是一種準(zhǔn)，互聯(lián)網(wǎng)開發(fā)居于此）。HTML5是近十年來Web（互聯(lián)網(wǎng)）標(biāo)準(zhǔn)最巨大的飛躍，和以前版本不同，HTML5并非僅僅用來表示W(wǎng)eb內(nèi)容，它的使命是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻、音頻、圖像和動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化，也就是說HTML5是通過開放的技術(shù)和標(biāo)準(zhǔn)來實(shí)現(xiàn)一個(gè)無插件模式的客戶端。所以此時(shí)研究HTML5，并且大膽的實(shí)踐有著重要的意義。HTML5技術(shù)是目前最新的互聯(lián)網(wǎng)應(yīng)用技術(shù)，它給使用者帶來全新操作體驗(yàn)的同時(shí)，也改變著整個(gè)互聯(lián)網(wǎng)未來的發(fā)展方向?，F(xiàn)階段對于HTML技術(shù)的研究和開發(fā)工作主要集中在技術(shù)草案的確立與新互聯(lián)網(wǎng)應(yīng)用的開發(fā)上。本文使用HTML5和CSS3提供的前臺(tái)展示能力制作出了漂亮的幻燈片相冊程序，結(jié)合時(shí)下流行的Asp.Net做后臺(tái)支持，實(shí)現(xiàn)了個(gè)人幻燈片相冊的B/S結(jié)構(gòu)的應(yīng)用?！娟P(guān)鍵詞】HTML5CSS3Asp.Net幻燈片相冊

ABSTRACTIntoday'ssociety,albumimagehasbecomeJapanesepeopleliveandworkinpursuitofthematerialandspiritualneeds,weddingvideo,childrenphoto,personalphoto,gatherings,etc.,itcanrecordlife'sgoodtimes,theseneedtobeappliedtoproducealbumsbecomeimages.WiththecontinuousdevelopmentofInternettechnologyandcomputerperformancecontinuestoincrease,usersenjoythewaytheInternetbegantochange,moreandmoreapplicationscanbeopeneddirectlyinthebrowser'suseofthedataisstoredinthecloud,moresecurereliable,user-sharedata.Inavarietyofapplicationstendstobemoreconstant,thenthenetworkatthesametime,anewtechnologystandardalsowillproduce,andthatisHTML5(HTMLisamarkuplanguageisaquasi,Internetdevelopmentlivinginthis).HTML5isthedecadeWeb(Internet)Standardgreatestleap,andpreviousversions,HTML5isnotjustusedtorepresentWebcontent,itsmissionistobringamatureWebapplicationplatform,onthisplatform,video,audio,imagesandanimations,aswellasinteractionwiththecomputerarestandardized,ieHTML5isthroughopentechnologiesandstandardstoachieveafreeplug-modeclient.SointhiscasestudyHTML5,andboldpracticeofgreatsignificance.HTML5technologyisthelatestInternettechnology,tobringusersnewoperatingexperienceofcolleagues,butalsochangingthefuturedirectionofdevelopmentoftheentireInternet.HTML5technologyatthisstageofresearchanddevelopmentworkismainlyconcentratedintheestablishmentanddevelopmentofnewInternetapplicationsonthedrafttechnical.UsingHTML5andCSS3frontdisplaycapabilitytoproducebeautifulslideAlbumsprocedures,combinedwiththethepopularASP.NETbackingsupport,personalslideshowalbumB/Sstructureoftheapplication.【Keywords】HTML5CSS3Asp.NetSlideshowAlbum

目錄TOC\o"1-3"\h\u18075前言 126926第一章HTML5幻燈片相冊概述 232674第一節(jié)研究內(nèi)容 224433第二節(jié)研究意義 215724第三節(jié)研究現(xiàn)狀和發(fā)展趨勢 213936第二章HTML5相關(guān)技術(shù)及簡介 412535第一節(jié)HTML5發(fā)展歷史及趨勢 430046第二節(jié)HTML部分新特性 47718一、HTML5新API 419463二、HTML5的優(yōu)點(diǎn) 527431第三節(jié)JavaScript及jQuery簡介 628462一、JavaScript 627605二、jQuery 65338第四節(jié)CSS3簡介 820814一、布局 930750二、特性： 910006三、邊框： 918470四、文字效果： 1021119五、顏色： 1017541六、用戶界面： 1028211七、選擇器： 106425八、影響： 1127401第三章開發(fā)運(yùn)行環(huán)境及配置 1224071第一節(jié)開發(fā)工具 1226767一、MicrosoftVisualStudio2010外觀和行為 121180二、幫助您快速瀏覽代碼的工具 122808三、代碼生成和文本模板 1324071第二節(jié)運(yùn)行環(huán)境 13一、12Chrome瀏覽器 13二、12SqlServer2008R2 13325第四章開發(fā)實(shí)例與設(shè)計(jì) 15第12656一節(jié)幻燈片相冊需求分析 1526767一、需求分析 1526767二、總體需求 1526767三、功能需求 1526767四、網(wǎng)站概要設(shè)計(jì) 17第17887五章開發(fā)與實(shí)現(xiàn) 216256第一節(jié)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn) 2113580一、分類管理 215756二、文件管理 2912245三.、客服端 3216509四、登陸頁面 443006結(jié)論 45前言隨著社會(huì)的不斷發(fā)展，計(jì)算機(jī)已經(jīng)逐漸普及，幾乎滲入到人們生活中的每一個(gè)角落，人們的日常生活已經(jīng)越來越離不開計(jì)算機(jī)了。計(jì)算機(jī)軟件的發(fā)展更是日新月異，現(xiàn)在好多人喜歡把自己的照片或是一些美麗的圖片制作成相冊，以動(dòng)畫的方式瀏覽。網(wǎng)絡(luò)上各種各樣的相冊層出不窮，本文將介紹基于HTML5和CSS3的幻燈片相冊的設(shè)計(jì)與實(shí)現(xiàn)。HTML5是近十年來Web標(biāo)準(zhǔn)最巨大的飛躍，和以前的版本有所不同，HTML5并非僅僅用來表示W(wǎng)eb內(nèi)容，它的使命是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻、音頻、圖像和動(dòng)畫，以及同電腦的交互都被標(biāo)準(zhǔn)化。HTML5中加入了各類新的元素和功能，同時(shí)也考慮到了非健全人士使用互聯(lián)網(wǎng)時(shí)可能帶來的問題。所以，研究HTML5這種技術(shù)體系來嘗試做一些應(yīng)用是一個(gè)千載難逢的機(jī)遇。

第一章HTML5幻燈片相冊概述第一節(jié)研究內(nèi)容HTML5賦予網(wǎng)頁更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對程序、對用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。在不犧牲性能和語義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。第二節(jié)研究意義利用HTML5和CSS3實(shí)現(xiàn)一個(gè)幻燈片相冊的應(yīng)用，以此來學(xué)習(xí)這個(gè)最新的Web技術(shù)，以適應(yīng)潮流的發(fā)展，讓用戶感受HTML帶來的全新體驗(yàn)。第三節(jié)研究現(xiàn)狀和發(fā)展趨勢國內(nèi)市場支持HTML5標(biāo)準(zhǔn)的瀏覽器已經(jīng)從2010年的不到2%發(fā)展到2012年超過三成的比例，2013年這一比例將有望突破70%。越來越多PC瀏覽器開始重視并且支持HTML5發(fā)展的同時(shí)，HTML5也越來越受到移動(dòng)互聯(lián)網(wǎng)的重視。許多大網(wǎng)站開始采用HTML5頁面，例如淘寶，京東等，足以見得HTML5發(fā)展之快。相對于PC平臺(tái)而言，移動(dòng)平臺(tái)一直是開發(fā)者更為關(guān)心的，因?yàn)橐苿?dòng)平臺(tái)瀏覽器品種較少，版本也普遍集中在最新正式版。同時(shí)，由于移動(dòng)設(shè)備的更新?lián)Q代速度要比PC更快,硬件支持和瀏覽器的狀況都要比PC平臺(tái)的狀況更好。移動(dòng)平臺(tái)上主流的5款瀏覽器(iOSSafari6.0、AndroidBrowser4.1、OperaMobile12.1、ChromeforAndroid18.0、FirefoxforAndroid15.0)，目前對標(biāo)準(zhǔn)的支持度均高于60%。其中表現(xiàn)居首的是ChromeforAndroid，而支持度相對較低的Android系統(tǒng)自帶的瀏覽器AndroidBrowser對HTML5的支持度也在60%以上。此外，硬件加速促進(jìn)了HTML5標(biāo)準(zhǔn)的發(fā)展和應(yīng)用。在使用HTML5開發(fā)時(shí)，開發(fā)者經(jīng)常會(huì)談到的一個(gè)問題就是性能。使用HTML5動(dòng)畫、Canvas、WebGL究竟能否帶來更好的用戶體驗(yàn)，與其實(shí)際性能密不可分。目前國內(nèi)外主流瀏覽器均支持硬件加速，這對HTML5的發(fā)展無疑是個(gè)好消息?？梢灾С钟布铀俚臑g覽器版本有：Chrome18+、Firefox4+、IE9+、Safari5.1+、Opera12+。國內(nèi)的有360安全瀏覽器、搜狗瀏覽器以及QQ瀏覽器。手機(jī)系統(tǒng)情況也比較樂觀，主流的智能手機(jī)系統(tǒng)iOS、Android以及WindowsPhone上的原生瀏覽器都已經(jīng)支持硬件加速。Android4.0+上的Chrome在硬件加速方面更是超越了原生瀏覽器的表現(xiàn)。2012年12月17日，W3C發(fā)布了HTML5以及Canvas2D兩個(gè)標(biāo)準(zhǔn)的完全定義版本，標(biāo)志著HTML5的標(biāo)準(zhǔn)已經(jīng)在趨向穩(wěn)定。在2013年，支持HTML5的PC瀏覽器將會(huì)有一個(gè)較大的增長。除Chrome、Firefox之外，微軟推出的IE9、IE10對HTML5的支持度都大幅提升，相信HTML5大面積使用只是時(shí)間問題。此外，移動(dòng)平臺(tái)的HTML5比PC平臺(tái)發(fā)展得更快。由于移動(dòng)設(shè)備的更新?lián)Q代速度遠(yuǎn)遠(yuǎn)超過PC，而且硬件性能也能夠完全支持HTML5。

第二章HTML5相關(guān)技術(shù)及簡介第一節(jié)HTML5發(fā)展歷史及趨勢HTML5是HTML下的一個(gè)主要修訂版本，現(xiàn)在仍處于發(fā)展階段。目標(biāo)是取代1999年所訂定的HTML4.01和XHTML1.0

標(biāo)準(zhǔn)，以期能在互聯(lián)網(wǎng)應(yīng)用迅速發(fā)展的時(shí)候，使網(wǎng)絡(luò)標(biāo)準(zhǔn)達(dá)到符合當(dāng)代的網(wǎng)絡(luò)需求。廣義論及HTML5時(shí)，實(shí)際指的是包括HTML、CSS和JavaScript在內(nèi)的一套技術(shù)組合。它希望能夠減少瀏覽器對于需要插件的豐富性網(wǎng)絡(luò)應(yīng)用服務(wù)（plug-in-basedrichinternetapplication，RIA)，如AdobeFlash、MicrosoftSilverlight，與OracleJavaFX的需求，并且提供更多能有效增強(qiáng)網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。HTML5草案的前身名為WebApplications1.0。于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。在2008年1月22日，第一份正式草案已公布，在2010年9月正式向公眾推薦。HTML5是近十年來Web標(biāo)準(zhǔn)最巨大的飛躍。和以前的版本不同，HTML5并非僅僅用來表示W(wǎng)eb內(nèi)容，它的使命是將Web帶入一個(gè)成熟的應(yīng)用平臺(tái)，在這個(gè)平臺(tái)上，視頻、音頻、圖像、動(dòng)畫以及同電腦的交互都被標(biāo)準(zhǔn)化。目前Firefox（火狐瀏覽器），IE9及其更高版本，Chrome，Safari，Opera等；國內(nèi)的傲游瀏覽器（Maxthon），以及基于IE所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產(chǎn)瀏覽器同樣具備支持HTML5的能力。第二節(jié)HTML部分新特性一、HTML5新API除了原先的DOM接口，HTML5增加了更多樣化的API：=1\*GB3①實(shí)時(shí)二維繪圖CanvasAPI：有關(guān)動(dòng)態(tài)產(chǎn)出與渲染圖形、圖表、圖像和動(dòng)畫的API。=2\*GB3②定時(shí)媒體播放HTML5音頻與視頻：HTML5里新增的元素，它們?yōu)殚_發(fā)者提供了一套通用的、集成的、腳本式的處理音頻與視頻的API，而無需安裝任何插件。=3\*GB3③離線存儲(chǔ)數(shù)據(jù)庫（離線網(wǎng)絡(luò)應(yīng)用程序）=4\*GB3④編輯=5\*GB3⑤拖放=6\*GB3⑥跨文檔通信=7\*GB3⑦通信／網(wǎng)絡(luò)CommunicationAPIs：構(gòu)建實(shí)時(shí)和跨源（cross-origin）通信的兩大基礎(chǔ)：跨文檔通信（CrossDocumentMessaging）與XMLHttpRequestLevel2。二、HTML5的優(yōu)點(diǎn)=1\*GB3①SEO(搜索引擎優(yōu)化)得到提升一些常用的圖形效果有CSS3表達(dá)方式，包括不透明貼圖、圓角、陰影。這些效果與CSS3漸變色一起使得上傳更為簡潔，跨平臺(tái)維護(hù)也更為容易。此外，它們還在SEO(搜索引擎優(yōu)化)方面具有優(yōu)勢。=2\*GB3②更快的圖片下載速度，尤其是對于移動(dòng)用戶在網(wǎng)頁設(shè)計(jì)中，“漸變”是一種背景效果：你的網(wǎng)頁上的“窗口”擁有更精致的底紋或紋理。公司設(shè)計(jì)人員有更大的空間來平衡明暗度、匹配邊界，實(shí)現(xiàn)讓大數(shù)瀏覽者嘆為觀止的色彩或風(fēng)格。=3\*GB3③Web應(yīng)用開發(fā)更容易，尤其是移動(dòng)應(yīng)用最后一個(gè)優(yōu)勢是，HTML5解決方案是一個(gè)可媲美原生應(yīng)用的編程環(huán)境。這對于移動(dòng)終端用戶來說非常重要，原生應(yīng)用開發(fā)成本昂貴：其編程人員薪水高、許可證各類繁多，可移植性差。HTML5在優(yōu)勢在于許多應(yīng)用能夠被完整的編在HTML5內(nèi)。=4\*GB3④更精美的動(dòng)畫效果除了上面所提到的功能外，其特色功能還包括HTML5能夠以更低的成本和更短的下載時(shí)間展現(xiàn)媲美目前頂級(jí)網(wǎng)頁設(shè)計(jì)人員設(shè)計(jì)的外觀，語義標(biāo)記具有SEO和維護(hù)優(yōu)勢。HTML5現(xiàn)在擁有的一些效果已經(jīng)超越早期標(biāo)準(zhǔn)的效果，其中之一就是動(dòng)畫制作。第三節(jié)JavaScript及jQuery簡介一、JavaScriptJavaScript是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類型的區(qū)分大小寫的客戶端腳本語言，主要目的是為了解決服務(wù)器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當(dāng)時(shí)服務(wù)端需要對數(shù)據(jù)進(jìn)行驗(yàn)證，由于網(wǎng)絡(luò)速度相當(dāng)緩慢，只有28.8kbps，驗(yàn)證步驟浪費(fèi)的時(shí)間太多。于是Netscape的瀏覽器Navigator加入了JavaScript，提供了數(shù)據(jù)驗(yàn)證的基本功能。由于Ajax的出現(xiàn)，JavaScript的功能被越來越多的豐富，能做的事情也越來越多，是Web2.0時(shí)代的象征。一個(gè)完整的JavaScript實(shí)現(xiàn)是由以下3個(gè)不同部分組成的：核心（ECMAScript）、文檔對象模型（DocumentObjectModel，簡稱DOM）、瀏覽器對象模型（BrowserObjectModel，簡稱BOM）。JavaScript的一個(gè)重要功能就是面向?qū)ο蟮墓δ?，通過基于對象的程序設(shè)計(jì)，可以用更直觀、模塊化和可重復(fù)使用的方式進(jìn)行程序開發(fā)。二、jQueryjQuery是繼prototype之后又一個(gè)優(yōu)秀的JavaScript框架。它是輕量級(jí)的js庫(壓縮后只有21k)，它兼容CSS3，還兼容各種瀏覽器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery使用戶能更方便地處理HTMLdocuments、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢是，它的文檔說明很全；而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的HTML頁面保持代碼和HTML內(nèi)容分離，也就是說，不用再在HTML里面插入一堆js來調(diào)用命令了，只需定義ID即可。如今，jQuery已經(jīng)成為最流行的JavaScript庫，在世界前10000個(gè)訪問最多的網(wǎng)站中，有超過55%在使用jQuery。jQuery特點(diǎn)：=1\*GB3①動(dòng)態(tài)特效=2\*GB3②AJAX=3\*GB3③通過插件來擴(kuò)展=4\*GB3④方便的工具-例如瀏覽器版本判斷=5\*GB3⑤漸進(jìn)增強(qiáng)=6\*GB3⑥鏈?zhǔn)秸{(diào)用=7\*GB3⑦多瀏覽器支持，支持InternetExplorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+jQuery庫是一個(gè)單獨(dú)的JavaScript文件，可以保存到本地或者服務(wù)器直接引用，也可以從多個(gè)公共服務(wù)器中選擇引用。有MediaTemple、Google、Microsoft等多家公司給jQuery提供CDN服務(wù)，比較常用的引用地址如下<scripttype="text/javascript"src="/ajax/libs/jquery/1.8/jquery.min.js"></script>選擇器：jQuery使用sizzle引擎，支持css選取，Xpath選取等方式。$("p")選取全部<p>元素。$("ro")選取所有包含class為"intro"的<p>元素。$("#demo")選取id為"demo"的元素。$("[href]")選取所有帶有href屬性的元素。$("[href='#']")選取所有帶有href值等于"#"的元素。$("[href!='#']")選取所有帶有href值不等于"#"的元素。$("[href$='.jpg']")選取所有href值以".jpg"結(jié)尾的元素。事件處理：直接綁定指定事件，事件類型即方法名，支持click、focus、blur、submit等。$("#button").click(function(){//scriptgoeshere});用on來綁定事件，off來解綁事件，第一個(gè)參數(shù)為事件名，第二個(gè)參數(shù)為回調(diào)函數(shù)。$("[href^='/imgaes/']")選取所有href值以/imgaes/"開頭的元素。動(dòng)態(tài)特效：$("#msg").show("fast");$("#msg").hide("slow");$("#msg").fadeIn();$("#msg").fadeOut();以上代碼實(shí)現(xiàn)一個(gè)id為Msg的jQuery對象的漸入和淡出。函數(shù)接受的參數(shù)除了快慢等，還可以接收整型，作為漸入或淡出的完成時(shí)間，單位為ms。AJAX：使用jQuery實(shí)現(xiàn)ajax方式如下$.ajax({type:"POST",url:"example.php",data:"name=John&location=Boston"}).done(function(msg){alert("DataSaved:"+msg);}).fail(function(xmlHttpRequest,statusText,errorThrown){alert("Yourformsubmissionfailed.\n\n"+"XMLHttpRequest:"+JSON.stringify(xmlHttpRequest)+",\nStatusText:"+statusText+",\nErrorThrown:"+errorThrown);});這個(gè)例子發(fā)送name=John和location=Boston兩個(gè)數(shù)據(jù)給服務(wù)端的example.php，請求成功后會(huì)提示用戶。插件機(jī)制：jQuery的官方插件是jQueryUI。開發(fā)者可以任意擴(kuò)展jQuery的函數(shù)庫或者按照自己的需求開發(fā)UI組件。目前網(wǎng)上已經(jīng)有數(shù)以千計(jì)的jQuery插件，覆蓋各種各樣的需求。例如Ajax輔助、數(shù)據(jù)表格、動(dòng)態(tài)列表、XML工具、拖曳、cookie處理、彈出層等等。jQuery的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇,比如ComponentOneforjQuery。第四節(jié)CSS3簡介CSS即層疊樣式表（CascadingStylesheet）。在網(wǎng)頁制作時(shí)采用CSS技術(shù)，可以有效地對頁面的布局、字體、顏色、背景和其它效果實(shí)現(xiàn)更加精確的控制。只要對相應(yīng)的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數(shù)不同的網(wǎng)頁的外觀和格式。CSS3是CSS技術(shù)的升級(jí)版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括：盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等。CSS3帶來無與倫比的頁面表現(xiàn)能力，而這些在以前只能靠圖片，多層的標(biāo)簽嵌套或者js才能實(shí)現(xiàn)，現(xiàn)在只需要幾行CSS3就能實(shí)現(xiàn)，效率也比原來要高很多。一、布局Grid布局應(yīng)用很廣泛，最簡單的例子就是內(nèi)容的分欄顯示。對于左邊這個(gè)布局復(fù)雜的三欄網(wǎng)頁來說，如果使用CSS3Grid布局的話，我們只需這樣寫：body{columns:3;column-gap:0.5in;}img{float:pagetopright;width:3gr;}其中，body部分聲明頁面為3欄，欄間距為0.5英寸；img中float屬性指明圖片浮動(dòng)位置為頁面的右上角，而寬度為3個(gè)欄寬。只需這樣兩行CSS，就可以實(shí)現(xiàn)這個(gè)復(fù)雜布局。二、特性：=1\*GB3①圓角表格，對應(yīng)屬性：border-radius。=2\*GB3②以往對網(wǎng)頁上的文字加特效只能用filter這個(gè)屬性，這次CSS3中專門制訂了一個(gè)加文字特效的屬性，而且不止加陰影這種效果。對應(yīng)屬性：font-effect。=3\*GB3③豐富了對鏈接下劃線的樣式，以往的下劃線都是直線，這次可不一樣了，有波浪線、點(diǎn)線、虛線等等，更可對下劃線的顏色和位置進(jìn)行任意改變。（還有對應(yīng)頂線和中橫線的樣式，效果與下劃線類似）對應(yīng)屬性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。=4\*GB3④在文字下點(diǎn)幾個(gè)點(diǎn)或打個(gè)圈以示重點(diǎn)，CSS3也開始加入了這項(xiàng)功能，這應(yīng)該在某些特定網(wǎng)頁上很有用。對應(yīng)屬性：font-emphasize-style和font-emphasize-position。三、邊框：border-color:控制邊框顏色，并且有了更大的靈活性，可以產(chǎn)生漸變效果。border-image:控制邊框圖象。border-corner-image:控制邊框邊角的圖象。border-radius：能產(chǎn)生類似圓角矩形的效果。background-size：可以指定背景大小，以象素或百分比顯示。當(dāng)指定為百分比時(shí)，大小會(huì)由所在區(qū)域的寬度、高度，以及background-origin的位置決定。multiplebackgrounds：多重背景圖象，可以把不同背景圖象只放到一個(gè)塊元素里。四、文字效果：text-shadow：文字投影，可能是因?yàn)镸ACOSX的Safari瀏覽器開始支持投影才特意增加的。text–overflow：當(dāng)文字溢出時(shí)，用“...”提示。包括ellipsis、clip、ellipsis-word、inherit，前兩個(gè)CSS2就有了，目前還是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一個(gè)單詞，對中文意義不大，inherit可以繼承父級(jí)元素。五、顏色：HSLcolors：除了支持RGB顏色外，還支持HSL（色相、飽和度、亮度）。以前一般都是作圖的時(shí)候用HSL色譜，但這樣一來會(huì)包括更多的顏色。H用度表示，S和L用百分比表示，比如hsl（0,100%,50%）。HSLAcolors：加了個(gè)不透明度（Apacity），用0到1之間的數(shù)來表示，比如hsla（0,100%,50%,0.2）。Opacity：直接控制不透明度，用0到1之間的數(shù)來表示。RGBAcolors：和HSLAcolors類似，加了個(gè)不透明度。一直以來，瀏覽器的透明一直無法實(shí)現(xiàn)單純的顏色透明，每次使用alpha后就會(huì)把透明的屬性繼承到子節(jié)點(diǎn)上。換句話說，很難實(shí)現(xiàn)背景顏色透明而文字不透明的效果。直到RGBA顏色的出現(xiàn)這一切將成為現(xiàn)實(shí)。實(shí)現(xiàn)這樣的效果非常簡單，設(shè)置顏色的時(shí)候我們使用標(biāo)準(zhǔn)的rgba（）單位即可，例如rgba（255,0,0,0.4）這樣就出現(xiàn)了一個(gè)紅色同時(shí)擁有alpha透明為0.4的顏色。經(jīng)過測試firefox3.0、safari3.2、opera10都支持了rgba單位。六、用戶界面：Resize：可以由用戶自己調(diào)整div的大小，有horizontal（水平）vertical（垂直）或者both（同時(shí)），或者同時(shí)調(diào)整。如果再加上max-width或min-width的話還可以防止破壞布局。七、選擇器：CSS3增加了更多的CSS選擇器，可以實(shí)現(xiàn)更簡單但是更強(qiáng)大的功能，比如：nth-child()等。Attributeselectors：在屬性中可以加入通配符，包括^,$,*。[att^=val]：表示開始字符是val的att屬性。[att$=val]：表示結(jié)束字符是val的att屬性。[att*=val]：表示包含至少有一個(gè)val的att屬性。其它模塊（Othermodules）：mediaqueries：感覺叫媒體選擇比較合適，可以為網(wǎng)頁中不同的對象設(shè)置不同的瀏覽設(shè)備。比如可以為某一塊分別設(shè)置屏幕瀏覽樣式和手機(jī)瀏覽樣式，以前則只能設(shè)置整個(gè)網(wǎng)頁。multi-columnlayout：多列布局，讓文字以多列顯示，包括column-width、column-count、column-gap三個(gè)值。column-width：指定每列寬度。column-count：指定列數(shù)。column-gap：指定每列之間的間距。column-rule-color：控制列間的顏色。column-rule-style：控制列間的樣式。column-rule-width：控制列間的寬度。column-space-distribution：平均分配列間距。八、影響：CSS3將完全向后兼容，所以沒有必要修改現(xiàn)在的設(shè)計(jì)來讓它們繼續(xù)運(yùn)作。網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性，這些會(huì)允許實(shí)現(xiàn)新的設(shè)計(jì)效果（譬如動(dòng)態(tài)和漸變），而且可以很簡單的設(shè)計(jì)出現(xiàn)在的設(shè)計(jì)效果（比如說使用分欄）。第三章開發(fā)運(yùn)行環(huán)境及配置第一節(jié)開發(fā)工具一、MicrosoftVisualStudio2010外觀和行為圖3.1顯示了VisualStudio集成開發(fā)環(huán)境(IDE)。圖3.1VisualStudioIDE=1\*GB3①可視增強(qiáng)功能IDE已經(jīng)過重新設(shè)計(jì)，提高了可性讀。為了減少雜亂，不必要的行和漸變都已刪除。=2\*GB3②支持多個(gè)監(jiān)視器“代碼編輯器”和“設(shè)計(jì)”視圖窗口等文檔窗口現(xiàn)在都可以放置在IDE窗口的外部。例如，您可以將“代碼編輯器”拖出IDE，以便可以將它與“設(shè)計(jì)”視圖窗口并排查看。二、幫助您快速瀏覽代碼的工具=1\*GB3①代碼編輯器新的代碼編輯器使代碼更容易閱讀。您可以通過在按住Ctrl的同時(shí)滾動(dòng)鼠標(biāo)滾輪來進(jìn)行縮放。此外，當(dāng)您在VisualC#或VisualBasic中單擊某個(gè)符號(hào)時(shí)，該符號(hào)的所有實(shí)例都將自動(dòng)突出顯示。=2\*GB3②鍵入時(shí)即開始搜索新的“定位到”功能對文件、類型和成員提供“鍵入時(shí)即開始搜索”支持?！岸ㄎ坏健笔鼓軌蚶肅amel大小寫格式和下劃線來縮寫搜索文本。例如，可以使用“AOH”來搜索“AddOrderHeader”。=3\*GB3③調(diào)用層次結(jié)構(gòu)在VisualC#和VisualC++中，調(diào)用層次結(jié)構(gòu)使您能夠從一個(gè)成員定位到它的調(diào)用方成員以及它的被調(diào)用方成員。在瀏覽面向?qū)ο蟮拇a時(shí)，這十分有用。三、代碼生成和文本模板在VisualStudio的任何版本中都可以創(chuàng)建和使用文本模板，無需任何其他組件。在引入了預(yù)處理文本模板的VisualStudio2010中，從應(yīng)用程序生成任何類型的文本文件已變得更加容易。還通過與生成系統(tǒng)的更好集成，改進(jìn)了對代碼集成的支持，從而使生成的源代碼始終會(huì)在對源模型進(jìn)行任何更改后保持更新。第二節(jié)運(yùn)行環(huán)境一、Chrome瀏覽器Chrome瀏覽器是一款設(shè)計(jì)簡約、蘊(yùn)含了尖端的技術(shù)，可以讓用戶更快速、輕松且安全地使用網(wǎng)絡(luò)的瀏覽器，該瀏覽器是基于其他開放原始碼軟件所撰寫，包括WebKit和Mozilla，目標(biāo)是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡單且有效的使用界面。軟件的名稱是來自稱作Chrome的網(wǎng)路瀏覽器圖形使用者界面（GUI）。目前市場上的瀏覽器雖然品牌眾多，但是其都是根據(jù)幾大開源內(nèi)核來構(gòu)建的，主要可以分為兩大類：IE系列和非IE系列。Chrome瀏覽器屬于非IE系列，與IE和Mozilla等瀏覽器相比，Chrome瀏覽器在Javascript執(zhí)行速度上最快，對CSS的渲染也是最快的。Chrome瀏覽器能夠很好地支持HTML5，同時(shí)又是功能強(qiáng)大的調(diào)試工具。二、SqlServer2008R2SQLServer2008R2提供完整的企業(yè)級(jí)技術(shù)與工具，幫助你以最低的總擁有成本獲得最有價(jià)值的信息。你可以充分享受高性能，高安全性，高可用性，使用更多的高效管理與開發(fā)工具，利用自服務(wù)的商業(yè)智能實(shí)現(xiàn)更為廣泛的商業(yè)洞察。SQLServer2008R2引進(jìn)了一系列新功能幫助各種規(guī)模的業(yè)務(wù)從信息中獲取更多價(jià)值。經(jīng)過改進(jìn)的SQLServer2008R2增強(qiáng)了開發(fā)能力，提高了可管理性，強(qiáng)化了商業(yè)智能及數(shù)據(jù)倉庫。數(shù)據(jù)庫運(yùn)行界面如圖3.268C41C79F0C5F86B圖3.2數(shù)據(jù)庫頁面圖第四章開發(fā)實(shí)例與設(shè)計(jì)第一節(jié)幻燈片相冊需求分析一、需求分析一個(gè)網(wǎng)站項(xiàng)目的確立是建立在各種各樣的需求上面的，這種需求往往來自于客戶的實(shí)際需求或者是出于公司自身發(fā)展的需要，其中客戶的實(shí)際需求也就是說這種交易性質(zhì)的需求占了絕大部分。對用戶需求的理解程度，在很大程度上決定了此類網(wǎng)站開發(fā)項(xiàng)目的成敗，因此如何更好地了解、分析、明確用戶需求，并且能夠準(zhǔn)確、清晰以文檔的形式表達(dá)給參與項(xiàng)目開發(fā)的每個(gè)成員，保證開發(fā)過程按照滿足用戶需求為目的的正確項(xiàng)目開發(fā)方向進(jìn)行是很重要的。二、總體需求對幻燈片相冊的基本要求主要傾向于以下幾個(gè)方面：=1\*GB3①相冊應(yīng)具備一般的注冊登錄，上傳下載等功能=2\*GB3②要求網(wǎng)頁具有良好的互動(dòng)性=3\*GB3③計(jì)算瀏覽次數(shù)，數(shù)字在網(wǎng)頁上面顯示三、功能需求相冊是以B/S架構(gòu)為基礎(chǔ)的用來存放圖片的網(wǎng)站。前臺(tái)使用HTML5CSS3等相關(guān)技術(shù)，后臺(tái)連接數(shù)據(jù)庫。由于相冊用于存儲(chǔ)和展示圖片，存儲(chǔ)則是相冊的主要功能，此外，為了配合此功能，此網(wǎng)站還應(yīng)具有上傳、刪除等相應(yīng)的功能和一些豐富網(wǎng)站性能的功能，總體如圖4.1所示圖4.1總體功能需求圖1、前臺(tái)功能需求前臺(tái)是使用者最直接接觸的東西，包括是否能夠讓客戶很輕松、方便的登錄和注冊，請求響應(yīng)時(shí)間、主機(jī)連接時(shí)間、上傳圖片、刪除圖片、HTML綜合質(zhì)量、圖片綜合質(zhì)量、首頁布局質(zhì)量、首頁信息類型等。用戶注冊：相冊為用戶提供存儲(chǔ)、展示圖片的一些相關(guān)功能，并且能夠設(shè)定一些私人的屬性，因此，要使用這些功能用戶必須先注冊ID，每個(gè)用戶都必須有一個(gè)獨(dú)立的帳號(hào)，注冊時(shí)需要提供一些基本信息，便于管理人員進(jìn)行管理和權(quán)限設(shè)置，也便于網(wǎng)站以后的發(fā)展。因此，此功能是網(wǎng)站最基本的功能之一。上傳圖片：要實(shí)現(xiàn)圖片的存儲(chǔ)功能達(dá)到在Internet上展示圖片的目的，上傳的功能是必不可少的。上傳不受地域的限制，實(shí)現(xiàn)在網(wǎng)頁上顯示圖片的目的。頁面的交互性：各級(jí)頁面要具有良好的交互性，減少響應(yīng)時(shí)間，節(jié)省用戶時(shí)間。2、后臺(tái)功能需求后臺(tái)的作用是為前臺(tái)運(yùn)行必要的數(shù)據(jù)支持和供網(wǎng)站管理員對網(wǎng)站進(jìn)行管理用戶管理：管理員對數(shù)據(jù)庫里面的userInfo這張表進(jìn)行操作，管理里面存儲(chǔ)的用戶基本信息。數(shù)據(jù)管理：管理員操作存儲(chǔ)圖片信息，還有目錄信息的表，達(dá)到管理的目的。權(quán)限設(shè)置：對用戶進(jìn)行權(quán)限設(shè)定，屬性為Administrator的用戶擁有最高權(quán)限，可以對網(wǎng)頁上的任何目錄和圖片進(jìn)行刪除，添加和修改。3、系統(tǒng)的邏輯設(shè)計(jì)-數(shù)據(jù)流程圖如圖4.2所示圖4.2數(shù)據(jù)流程圖四、網(wǎng)站概要設(shè)計(jì)1、模塊的劃分與功能設(shè)計(jì)通過對用戶需求調(diào)研并分析，確定系統(tǒng)應(yīng)具備的功能，包括：注冊登錄、上傳下載、留言評(píng)論、創(chuàng)建目錄、計(jì)算瀏覽次數(shù)、修改密碼、上一張/下一張連接。各模塊的具體功能設(shè)計(jì)如下：(1)注冊登錄功能對于相冊這種網(wǎng)站來說，用戶首先必須注冊，提供可供登錄比對的個(gè)人驗(yàn)證信息，進(jìn)入個(gè)人的帳號(hào)之后才能進(jìn)行其他操作。(2)上傳下載相冊最主要的功能就是存儲(chǔ)圖片，所以必須提供完善的用戶上傳圖片到服務(wù)器端及用戶從服務(wù)器端下載圖片的功能，上傳時(shí)選擇相冊名，下載時(shí)可以選擇下載的路徑。此外，還包括一些刪除圖片，目錄的相冊基本管理。(3)留言評(píng)論提供瀏覽者對圖片發(fā)表評(píng)論的功能，發(fā)表評(píng)論必須先注冊登錄。(4)創(chuàng)建目錄允許注冊用戶登錄后自行在相冊內(nèi)創(chuàng)建文件夾，方便用戶對上傳相片的分類和管理。(5)計(jì)算瀏覽次數(shù)計(jì)算瀏覽某一個(gè)目錄的次數(shù)，數(shù)據(jù)自動(dòng)更新并顯示在目錄名旁邊。(6)編輯圖片根據(jù)需求分析，提供對已上傳的圖片修改名稱及描述信息的功能，用戶在想修改圖片名稱和描述信息的時(shí)候不用將圖片刪除重新上傳。(7)修改密碼用戶可根據(jù)自己的需要對原有的密碼進(jìn)行修改。(8)上一張/下一張連接為圖片瀏覽者提供“上一張/下一張”連接功能，方便瀏覽者查看上下張圖片。2、功能模塊的初步設(shè)計(jì)為了配合模塊的劃分和實(shí)現(xiàn)預(yù)期的功能，將功能模塊按照網(wǎng)站的頁面?zhèn)€數(shù)劃分為：相冊首頁、用戶登錄頁面、創(chuàng)建目錄頁面、上傳頁面、用戶注冊頁面、修改密碼頁面和顯示圖片頁面，各個(gè)頁面后端寫實(shí)現(xiàn)功能的代碼，在App_Code里面寫一個(gè)連接數(shù)據(jù)庫方法的類databaseclass，具體連接數(shù)據(jù)庫的ADO方法，比如Connection，Command，Adapter和dataset，datatable等都寫在這個(gè)類里面，頁面后端代碼共用此方法對數(shù)據(jù)庫進(jìn)行連接。3、模塊的組織結(jié)構(gòu)圖如圖4.3所示圖4.3模塊組織結(jié)構(gòu)圖起始頁為相冊首頁，未登錄可以瀏覽圖片，進(jìn)入顯示圖片評(píng)論頁面，用戶登錄頁面和用戶注冊頁面，只有查看圖片和評(píng)論的權(quán)限。登錄用戶可以進(jìn)入所有頁面，并擁有一些操作權(quán)限。4、數(shù)據(jù)庫結(jié)構(gòu)的設(shè)計(jì)用戶信息表如表4.1所示表4.1userInfo(用戶信息表)名稱中文描述數(shù)據(jù)類型長度NullPK默認(rèn)值userid用戶idint4NotnullYusername用戶名varchar50Nullpassword密碼varchar50Nulltel電話varchar50Nullemail郵件varchar50Nullrolename權(quán)限varchar50NulluserInfo用于儲(chǔ)存用戶信息，用戶在注冊時(shí)填寫的資料都保存在此表內(nèi)，主要用于用戶登錄時(shí)對比信息，確定是否本人登錄。圖片信息表如表4.2所示表4.2photo(圖片信息表)名稱中文描述數(shù)據(jù)類型長度NullPK默認(rèn)值photo_id圖片idint4NotnullYphototitle圖片標(biāo)題varchar50Nullphotopath圖片編號(hào)varchar50Nullphotodesc圖片描述varchar100Nullcataid目錄idint4Nulluserid用戶idint4Nulltime上傳時(shí)間datetime8Nullphoto用來儲(chǔ)存圖片信息，用于查找比對圖片將正確的圖片顯示在網(wǎng)頁上和搜尋上一張/下一張圖片。目錄信息表如表4.3所示表4.3catalog(目錄信息表)名稱中文描述數(shù)據(jù)類型長度NullPK默認(rèn)值catalog_id目錄idint4NotnullYcatalog_name創(chuàng)建用戶名varchar50Nulluserid創(chuàng)建用戶idint4NullTime創(chuàng)建時(shí)間datetime8Nullbroustimes瀏覽次數(shù)int4Null0catalog儲(chǔ)存目錄的相關(guān)信息，其中broustimes默認(rèn)值設(shè)置為0，點(diǎn)擊此目錄一次，寫入數(shù)據(jù)庫一次，用來記錄此相冊目錄的瀏覽次數(shù)。評(píng)論信息表如表4.4所示表4.4comment(評(píng)論信息表)名稱中文描述數(shù)據(jù)類型長度NullPK默認(rèn)值id評(píng)論信息idint4NotnullYphoto_id圖片idint4Nulluserid用戶idint4Nullcontent評(píng)論內(nèi)容varchar100Nulltime發(fā)表時(shí)間datetime8Null第五章開發(fā)與實(shí)現(xiàn)第一節(jié)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)一、分類管理1、功能描述登錄用戶，輸入要?jiǎng)?chuàng)建的分類的名字，點(diǎn)擊“新增分類”彈出對話框“新建成功”，點(diǎn)擊確定后跳轉(zhuǎn)到上傳頁面，如果新建一個(gè)目錄名相同的文件夾，提示“此文件名存在”，頁面不跳轉(zhuǎn)。用戶進(jìn)入管理界面，可以通過分類管理添加相冊新的分類和刪除已有的分類；每個(gè)分類就相當(dāng)于一個(gè)相冊集。2、界面設(shè)計(jì)添加一個(gè)窗體，設(shè)置linkbutton控件，連接到其他頁面。一個(gè)linkbutton控件退回初時(shí)狀態(tài)；設(shè)置2個(gè)label控件，2個(gè)button控件分別用來確定新增分和取消此次操作。分類管理如圖5.1所示圖5.1分類管理分類管理實(shí)現(xiàn)部分代碼：新增分類調(diào)用方法：protectedvoidaddFenlei_Click(objectsender,EventArgse){ //獲取路徑stringdictionName=Server.MapPath("upload/"+fenlei.Value);if(!Directory.Exists(dictionName)){//根據(jù)獲取到的路徑創(chuàng)建目錄Directory.CreateDirectory(dictionName);initFenleis();}}分類列表使用了一個(gè)

的Repeater控件 前臺(tái)控件代碼:<asp:RepeaterID="Repeater1"runat="server"OnItemCommand="Repeater1_ItemCommand"><ItemTemplate><tr><td><%#Container.ItemIndex+1%></td><td><%#GetDataItem()%></td><td><asp:LinkButtonID="lkbtnDel"runat="server"CommandName="del"CommandArgument='<%#GetDataItem()%>'OnClientClick="javascript:returnconfirm('刪除分類后將連分類內(nèi)的圖片一起刪除確認(rèn)要?jiǎng)h除嗎？')">刪|?除y</asp:LinkButton></td></tr></ItemTemplate></asp:Repeater> 后臺(tái)數(shù)據(jù)綁定代碼://初始化分類列表publicvoidinitFenleis(){string[]dict=getFenlei();for(inti=0;i<dict.Length;i++){dict[i]=dict[i].Substring(dict[i].LastIndexOf("\\")+1,dict[i].Length-dict[i].LastIndexOf("\\")-1);}Repeater1.DataSource=dict;Repeater1.DataBind();}//獲取分類列表publicstring[]getFenlei(){stringfilepath=Server.MapPath("upload");string[]filenames=Directory.GetDirectories(filepath);returnfilenames;} 點(diǎn)刪除時(shí)調(diào)用的代碼:protectedvoidRepeater1_ItemCommand(objectsource,RepeaterCommandEventArgse){if(e.CommandName.Equals("del"){stringdic=e.CommandArgument.ToString();DeleteFolderAll(Server.MapPath("upload/"+dic));}initFenleis();}///<summary>///刪除文件夾及其內(nèi)容///</summary>///<paramname="dir"></param>publicstaticvoidDeleteFolderAll(stringdir){foreach(stringdinDirectory.GetFileSystemEntries(dir)){if(File.Exists(d)){FileInfofi=newFileInfo(d);if(fi.Attributes.ToString().IndexOf("ReadOnly")!=-1)fi.Attributes=FileAttributes.Normal;File.Delete(d);//直接刪除其中的文件}else{DeleteFolder(d);////遞歸刪除子文件夾Directory.Delete(d);}}Directory.Delete(dir);}///<summary>///清空指定的文件夾但不刪文件夾///</summary>///<paramname="dir"></param>publicstaticvoidDeleteFolder(stringdir){foreach(stringdinDirectory.GetFileSystemEntries(dir)){if(File.Exists(d)){FileInfofi=newFileInfo(d);if(fi.Attributes.ToString().IndexOf("ReadOnly")!=-1)fi.Attributes=FileAttributes.Normal;File.Delete(d);//直接刪除其中的文件}else{DirectoryInfod1=newDirectoryInfo(d);if(d1.GetFiles().Length!=0){DeleteFolder(d1.FullName);////遞歸刪除子文件夾}Directory.Delete(d);}}}CSS：.divTab{position:relative;top:2px;margin-left:10px;}.divContent{ -webkit-box-shadow:0px0px10px#ddd; -moz-box-shadow:0px0px10px#ddd; box-shadow:0px0px10px#ddd;}.divTaba{text-shadow:1px1px5px#999;display:block;float:left;margin-right:5px;border:solid2px#ddd;padding:0px10px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:5px; background-color:#eff;color:gray;text-decoration:none;cursor:pointer;}.divTaba:hover{background-color:#fef;}.divTab.aCur{border-bottom:solid2pxwhite;background-color:white;color:blue;cursor:default;}.divTab.aCur:hover{background-color:white;}table{*border-collapse:collapse;/*IE7andlower*/border-spacing:0;width:100%;}.bordered{border:solid#ccc1px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-webkit-box-shadow:01px1px#ccc;-moz-box-shadow:01px1px#ccc;box-shadow:01px1px#ccc;}.borderedtr:hover{background:#fbf8e9;-o-transition:all0.1sease-in-out;-webkit-transition:all0.1sease-in-out;-moz-transition:all0.1sease-in-out;-ms-transition:all0.1sease-in-out;transition:all0.1sease-in-out;}.borderedtd,.borderedth{border-left:1pxsolid#ccc;border-top:1pxsolid#ccc;padding:10px;text-align:left;}.borderedth{background-color:#dce9f9;background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#ebf3fc),to(#dce9f9));background-image:-webkit-linear-gradient(top,#ebf3fc,#dce9f9);background-image:-moz-linear-gradient(top,#ebf3fc,#dce9f9);background-image:-ms-linear-gradient(top,#ebf3fc,#dce9f9);background-image:-o-linear-gradient(top,#ebf3fc,#dce9f9);background-image:linear-gradient(top,#ebf3fc,#dce9f9);-webkit-box-shadow:01px0rgba(255,255,255,.8)inset;-moz-box-shadow:01px0rgba(255,255,255,.8)inset;box-shadow:01px0rgba(255,255,255,.8)inset;border-top:none;text-shadow:01px0rgba(255,255,255,.5);}.borderedtd:first-child,.borderedth:first-child{border-left:none;}.borderedth:first-child{-moz-border-radius:6px000;-webkit-border-radius:6px000;border-radius:6px000;}.borderedth:last-child{-moz-border-radius:06px00;-webkit-border-radius:06px00;border-radius:06px00;}.borderedth:only-child{-moz-border-radius:6px6px00;-webkit-border-radius:6px6px00;border-radius:6px6px00;}.borderedtr:last-childtd:first-child{-moz-border-radius:0006px;-webkit-border-radius:0006px;border-radius:0006px;}.borderedtr:last-childtd:last-child{-moz-border-radius:006px0;-webkit-border-radius:006px0;border-radius:006px0;}二、文件管理1、功能描述用戶進(jìn)入管理界面，可以通過文件管理新增相片和刪除已有相片。2、界面設(shè)計(jì)文件管理如圖5.2所示圖5.2文件管理文件管理實(shí)現(xiàn)部分代碼：上部分是文件上傳功能，下部分列表展現(xiàn)當(dāng)前所選分類已有圖片的信息。HTML：<divclass="divTab"style=""> <ahref="admin.aspx">分類管理</a> <ahref="#"class="aCur">文件管理</a></div><divclass="divContent"style="border:solid2px#ddd;padding:10px;clear:both;"> <div>文件上傳<br/><label>選擇分類：</label><asp:DropDownListOnSelectedIndexChanged="reloadFile"ID="fenleis"runat="server"AutoPostBack="True"></asp:DropDownList><br/><label>選擇文件：</label><asp:FileUploadID="FileUpload"runat="server"/><asp:ButtonID="addFile"runat="server"onclick="addFile_Click"Text="新增文件"/></div><tableclass="bordered"><thead><tr><th><asp:Literalrunat="server"ID="nowFenlei"></asp:Literal></th><th>文件名</th><th>預(yù)覽圖</th><th>操作</th></tr></thead><asp:RepeaterID="Repeater1"runat="server"OnItemCommand="Repeater1_ItemCommand"><ItemTemplate><tr><td><%#Container.ItemIndex+1%></td><td><%#GetDataItem().ToString().Substring(GetDataItem().ToString().LastIndexOf("\\")+1,GetDataItem().ToString().Length-GetDataItem().ToString().LastIndexOf("\\")-1)%></td><td><imgwidth="100"src="<%#GetDataItem()%>"/></td><td><asp:LinkButtonID="lkbtnDel"runat="server"CommandName="del"CommandArgument='<%#GetDataItem()%>'OnClientClick="javascript:returnconfirm('確認(rèn)要?jiǎng)h除嗎?')">刪除</asp:LinkButton></td></tr></ItemTemplate></asp:Repeater></table></div>接收上傳文件的代碼：protectedvoidaddFile_Click(objectsender,EventArgse){string[]arr=newString[5];stringFileOrginName=FileUpload.PostedFile.FileName.Substring(FileUpload.PostedFile.FileName.LastIndexOf("\\")+1);if(FileUpload.PostedFile.ContentLength<=0)return;stringpath=Server.MapPath("upload/"+fenleis.SelectedValue+"/"+FileOrginName);try{FileUpload.PostedFile.SaveAs(path);}catch(Exceptionexec){throw(exec);}initFiles();}三、客戶端1、分類及其照片查詢 部分代碼如下：//上傳圖片protectedvoidPage_Load(objectsender,EventArgse){string[]dictions=getFenlei();stringpicHtml="";for(inti=0;i<dictions.Length;i++){stringdictionName=dictions[i].Substring(dictions[i].LastIndexOf("\\")+