【毕业论文】基于HTML5-CSS3的相册设计与实现

摘要在当今社会，相册影像已成为人们生活和工作中日以追求的物质和精神需求，婚纱影像、儿童写真、个人写真、聚会等等，它可以记录人生的美好时光，这些都需要应用相册来制作成为影像。随着互联网技术的不断发展和计算机性能的不断提升，用户享受互联网的方式开端，更加的安全可靠，方便用户共享数据。在各种应用不断的趋于更加网络话的同时，一种新的技术标准也随之产生，那就是HTML5（是一种标记语言也是一种准，互联网开发居于此）。HTML5是近十年来Web（互联网）标准最巨大的飞跃，和以前版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化，也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的客户端。所以此时研究HTML5，并且大胆的实践有着重要的意义。HTML5技术是目前最新的互联网应用技术，它给使用者带来全新操作体验的同时，也改变着整个互联网未来的发展方向。现阶段对于HTML技术的研究和开发工作主要集中在技术草案的确立与新互联网应用的开发上。本文使用HTML5和CSS3提供的前台展示能力制作出了漂亮的幻灯片相册程序，结合时下流行的Asp.Net做后台支持，实现了个人幻灯片相册的B/S结构的应用。【关键词】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第一节研究内容 224433第二节研究意义 215724第三节研究现状和发展趋势 213936第二章HTML5相关技术及简介 412535第一节HTML5发展历史及趋势 430046第二节HTML部分新特性 47718一、HTML5新API 419463二、HTML5的优点 527431第三节JavaScript及jQuery简介 628462一、JavaScript 627605二、jQuery 65338第四节CSS3简介 820814一、布局 930750二、特性： 910006三、边框： 918470四、文字效果： 1021119五、颜色： 1017541六、用户界面： 1028211七、选择器： 106425八、影响： 1127401第三章开发运行环境及配置 1224071第一节开发工具 1226767一、MicrosoftVisualStudio2010外观和行为 121180二、帮助您快速浏览代码的工具 122808三、代码生成和文本模板 1324071第二节运行环境 13一、12Chrome浏览器 13二、12SqlServer2008R2 13325第四章开发实例与设计 15第12656一节幻灯片相册需求分析 1526767一、需求分析 1526767二、总体需求 1526767三、功能需求 1526767四、网站概要设计 17第17887五章开发与实现 216256第一节详细设计与实现 2113580一、分类管理 215756二、文件管理 2912245三.、客服端 3216509四、登陆页面 443006结论 45前言随着社会的不断发展，计算机已经逐渐普及，几乎渗入到人们生活中的每一个角落，人们的日常生活已经越来越离不开计算机了。计算机软件的发展更是日新月异，现在好多人喜欢把自己的照片或是一些美丽的图片制作成相册，以动画的方式浏览。网络上各种各样的相册层出不穷，本文将介绍基于HTML5和CSS3的幻灯片相册的设计与实现。HTML5是近十年来Web标准最巨大的飞跃，和以前的版本有所不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。HTML5中加入了各类新的元素和功能，同时也考虑到了非健全人士使用互联网时可能带来的问题。所以，研究HTML5这种技术体系来尝试做一些应用是一个千载难逢的机遇。

第一章HTML5幻灯片相册概述第一节研究内容HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。第二节研究意义利用HTML5和CSS3实现一个幻灯片相册的应用，以此来学习这个最新的Web技术，以适应潮流的发展，让用户感受HTML带来的全新体验。第三节研究现状和发展趋势国内市场支持HTML5标准的浏览器已经从2010年的不到2%发展到2012年超过三成的比例，2013年这一比例将有望突破70%。越来越多PC浏览器开始重视并且支持HTML5发展的同时，HTML5也越来越受到移动互联网的重视。许多大网站开始采用HTML5页面，例如淘宝，京东等，足以见得HTML5发展之快。相对于PC平台而言，移动平台一直是开发者更为关心的，因为移动平台浏览器品种较少，版本也普遍集中在最新正式版。同时，由于移动设备的更新换代速度要比PC更快,硬件支持和浏览器的状况都要比PC平台的状况更好。移动平台上主流的5款浏览器(iOSSafari6.0、AndroidBrowser4.1、OperaMobile12.1、ChromeforAndroid18.0、FirefoxforAndroid15.0)，目前对标准的支持度均高于60%。其中表现居首的是ChromeforAndroid，而支持度相对较低的Android系统自带的浏览器AndroidBrowser对HTML5的支持度也在60%以上。此外，硬件加速促进了HTML5标准的发展和应用。在使用HTML5开发时，开发者经常会谈到的一个问题就是性能。使用HTML5动画、Canvas、WebGL究竟能否带来更好的用户体验，与其实际性能密不可分。目前国内外主流浏览器均支持硬件加速，这对HTML5的发展无疑是个好消息。可以支持硬件加速的浏览器版本有：Chrome18+、Firefox4+、IE9+、Safari5.1+、Opera12+。国内的有360安全浏览器、搜狗浏览器以及QQ浏览器。手机系统情况也比较乐观，主流的智能手机系统iOS、Android以及WindowsPhone上的原生浏览器都已经支持硬件加速。Android4.0+上的Chrome在硬件加速方面更是超越了原生浏览器的表现。2012年12月17日，W3C发布了HTML5以及Canvas2D两个标准的完全定义版本，标志着HTML5的标准已经在趋向稳定。在2013年，支持HTML5的PC浏览器将会有一个较大的增长。除Chrome、Firefox之外，微软推出的IE9、IE10对HTML5的支持度都大幅提升，相信HTML5大面积使用只是时间问题。此外，移动平台的HTML5比PC平台发展得更快。由于移动设备的更新换代速度远远超过PC，而且硬件性能也能够完全支持HTML5。

第二章HTML5相关技术及简介第一节HTML5发展历史及趋势HTML5是HTML下的一个主要修订版本，现在仍处于发展阶段。目标是取代1999年所订定的HTML4.01和XHTML1.0

标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-basedrichinternetapplication，RIA)，如AdobeFlash、MicrosoftSilverlight，与OracleJavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5草案的前身名为WebApplications1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案已公布，在2010年9月正式向公众推荐。HTML5是近十年来Web标准最巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及同电脑的交互都被标准化。目前Firefox（火狐浏览器），IE9及其更高版本，Chrome，Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。第二节HTML部分新特性一、HTML5新API除了原先的DOM接口，HTML5增加了更多样化的API：=1\*GB3①实时二维绘图CanvasAPI：有关动态产出与渲染图形、图表、图像和动画的API。=2\*GB3②定时媒体播放HTML5音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。=3\*GB3③离线存储数据库（离线网络应用程序）=4\*GB3④编辑=5\*GB3⑤拖放=6\*GB3⑥跨文档通信=7\*GB3⑦通信／网络CommunicationAPIs：构建实时和跨源（cross-origin）通信的两大基础：跨文档通信（CrossDocumentMessaging）与XMLHttpRequestLevel2。二、HTML5的优点=1\*GB3①SEO(搜索引擎优化)得到提升一些常用的图形效果有CSS3表达方式，包括不透明贴图、圆角、阴影。这些效果与CSS3渐变色一起使得上传更为简洁，跨平台维护也更为容易。此外，它们还在SEO(搜索引擎优化)方面具有优势。=2\*GB3②更快的图片下载速度，尤其是对于移动用户在网页设计中，“渐变”是一种背景效果：你的网页上的“窗口”拥有更精致的底纹或纹理。公司设计人员有更大的空间来平衡明暗度、匹配边界，实现让大数浏览者叹为观止的色彩或风格。=3\*GB3③Web应用开发更容易，尤其是移动应用最后一个优势是，HTML5解决方案是一个可媲美原生应用的编程环境。这对于移动终端用户来说非常重要，原生应用开发成本昂贵：其编程人员薪水高、许可证各类繁多，可移植性差。HTML5在优势在于许多应用能够被完整的编在HTML5内。=4\*GB3④更精美的动画效果除了上面所提到的功能外，其特色功能还包括HTML5能够以更低的成本和更短的下载时间展现媲美目前顶级网页设计人员设计的外观，语义标记具有SEO和维护优势。HTML5现在拥有的一些效果已经超越早期标准的效果，其中之一就是动画制作。第三节JavaScript及jQuery简介一、JavaScriptJavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了JavaScript，提供了数据验证的基本功能。由于Ajax的出现，JavaScript的功能被越来越多的丰富，能做的事情也越来越多，是Web2.0时代的象征。一个完整的JavaScript实现是由以下3个不同部分组成的：核心（ECMAScript）、文档对象模型（DocumentObjectModel，简称DOM）、浏览器对象模型（BrowserObjectModel，简称BOM）。JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。二、jQueryjQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库(压缩后只有21k)，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+）。jQuery使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全；而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持代码和HTML内容分离，也就是说，不用再在HTML里面插入一堆js来调用命令了，只需定义ID即可。如今，jQuery已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。jQuery特点：=1\*GB3①动态特效=2\*GB3②AJAX=3\*GB3③通过插件来扩展=4\*GB3④方便的工具-例如浏览器版本判断=5\*GB3⑤渐进增强=6\*GB3⑥链式调用=7\*GB3⑦多浏览器支持，支持InternetExplorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+jQuery库是一个单独的JavaScript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有MediaTemple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下<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"结尾的元素。事件处理：直接绑定指定事件，事件类型即方法名，支持click、focus、blur、submit等。$("#button").click(function(){//scriptgoeshere});用on来绑定事件，off来解绑事件，第一个参数为事件名，第二个参数为回调函数。$("[href^='/imgaes/']")选取所有href值以/imgaes/"开头的元素。动态特效：$("#msg").show("fast");$("#msg").hide("slow");$("#msg").fadeIn();$("#msg").fadeOut();以上代码实现一个id为Msg的jQuery对象的渐入和淡出。函数接受的参数除了快慢等，还可以接收整型，作为渐入或淡出的完成时间，单位为ms。AJAX：使用jQuery实现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);});这个例子发送name=John和location=Boston两个数据给服务端的example.php，请求成功后会提示用户。插件机制：jQuery的官方插件是jQueryUI。开发者可以任意扩展jQuery的函数库或者按照自己的需求开发UI组件。目前网上已经有数以千计的jQuery插件，覆盖各种各样的需求。例如Ajax辅助、数据表格、动态列表、XML工具、拖曳、cookie处理、弹出层等等。jQuery的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择,比如ComponentOneforjQuery。第四节CSS3简介CSS即层叠样式表（CascadingStylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。CSS3带来无与伦比的页面表现能力，而这些在以前只能靠图片，多层的标签嵌套或者js才能实现，现在只需要几行CSS3就能实现，效率也比原来要高很多。一、布局Grid布局应用很广泛，最简单的例子就是内容的分栏显示。对于左边这个布局复杂的三栏网页来说，如果使用CSS3Grid布局的话，我们只需这样写：body{columns:3;column-gap:0.5in;}img{float:pagetopright;width:3gr;}其中，body部分声明页面为3栏，栏间距为0.5英寸；img中float属性指明图片浮动位置为页面的右上角，而宽度为3个栏宽。只需这样两行CSS，就可以实现这个复杂布局。二、特性：=1\*GB3①圆角表格，对应属性：border-radius。=2\*GB3②以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。=3\*GB3③丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。=4\*GB3④在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。三、边框：border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果。border-image:控制边框图象。border-corner-image:控制边框边角的图象。border-radius：能产生类似圆角矩形的效果。background-size：可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。multiplebackgrounds：多重背景图象，可以把不同背景图象只放到一个块元素里。四、文字效果：text-shadow：文字投影，可能是因为MACOSX的Safari浏览器开始支持投影才特意增加的。text–overflow：当文字溢出时，用“...”提示。包括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。五、颜色：HSLcolors：除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl（0,100%,50%）。HSLAcolors：加了个不透明度（Apacity），用0到1之间的数来表示，比如hsla（0,100%,50%,0.2）。Opacity：直接控制不透明度，用0到1之间的数来表示。RGBAcolors：和HSLAcolors类似，加了个不透明度。一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现背景颜色透明而文字不透明的效果。直到RGBA颜色的出现这一切将成为现实。实现这样的效果非常简单，设置颜色的时候我们使用标准的rgba（）单位即可，例如rgba（255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。六、用户界面：Resize：可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局。七、选择器：CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如：nth-child()等。Attributeselectors：在属性中可以加入通配符，包括^,$,*。[att^=val]：表示开始字符是val的att属性。[att$=val]：表示结束字符是val的att属性。[att*=val]：表示包含至少有一个val的att属性。其它模块（Othermodules）：mediaqueries：感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。multi-columnlayout：多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值。column-width：指定每列宽度。column-count：指定列数。column-gap：指定每列之间的间距。column-rule-color：控制列间的颜色。column-rule-style：控制列间的样式。column-rule-width：控制列间的宽度。column-space-distribution：平均分配列间距。八、影响：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。第三章开发运行环境及配置第一节开发工具一、MicrosoftVisualStudio2010外观和行为图3.1显示了VisualStudio集成开发环境(IDE)。图3.1VisualStudioIDE=1\*GB3①可视增强功能IDE已经过重新设计，提高了可性读。为了减少杂乱，不必要的行和渐变都已删除。=2\*GB3②支持多个监视器“代码编辑器”和“设计”视图窗口等文档窗口现在都可以放置在IDE窗口的外部。例如，您可以将“代码编辑器”拖出IDE，以便可以将它与“设计”视图窗口并排查看。二、帮助您快速浏览代码的工具=1\*GB3①代码编辑器新的代码编辑器使代码更容易阅读。您可以通过在按住Ctrl的同时滚动鼠标滚轮来进行缩放。此外，当您在VisualC#或VisualBasic中单击某个符号时，该符号的所有实例都将自动突出显示。=2\*GB3②键入时即开始搜索新的“定位到”功能对文件、类型和成员提供“键入时即开始搜索”支持。“定位到”使您能够利用Camel大小写格式和下划线来缩写搜索文本。例如，可以使用“AOH”来搜索“AddOrderHeader”。=3\*GB3③调用层次结构在VisualC#和VisualC++中，调用层次结构使您能够从一个成员定位到它的调用方成员以及它的被调用方成员。在浏览面向对象的代码时，这十分有用。三、代码生成和文本模板在VisualStudio的任何版本中都可以创建和使用文本模板，无需任何其他组件。在引入了预处理文本模板的VisualStudio2010中，从应用程序生成任何类型的文本文件已变得更加容易。还通过与生成系统的更好集成，改进了对代码集成的支持，从而使生成的源代码始终会在对源模型进行任何更改后保持更新。第二节运行环境一、Chrome浏览器Chrome浏览器是一款设计简约、蕴含了尖端的技术，可以让用户更快速、轻松且安全地使用网络的浏览器，该浏览器是基于其他开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效的使用界面。软件的名称是来自称作Chrome的网路浏览器图形使用者界面（GUI）。目前市场上的浏览器虽然品牌众多，但是其都是根据几大开源内核来构建的，主要可以分为两大类：IE系列和非IE系列。Chrome浏览器属于非IE系列，与IE和Mozilla等浏览器相比，Chrome浏览器在Javascript执行速度上最快，对CSS的渲染也是最快的。Chrome浏览器能够很好地支持HTML5，同时又是功能强大的调试工具。二、SqlServer2008R2SQLServer2008R2提供完整的企业级技术与工具，帮助你以最低的总拥有成本获得最有价值的信息。你可以充分享受高性能，高安全性，高可用性，使用更多的高效管理与开发工具，利用自服务的商业智能实现更为广泛的商业洞察。SQLServer2008R2引进了一系列新功能帮助各种规模的业务从信息中获取更多价值。经过改进的SQLServer2008R2增强了开发能力，提高了可管理性，强化了商业智能及数据仓库。数据库运行界面如图3.268C41C79F0C5F86B图3.2数据库页面图第四章开发实例与设计第一节幻灯片相册需求分析一、需求分析一个网站项目的确立是建立在各种各样的需求上面的，这种需求往往来自于客户的实际需求或者是出于公司自身发展的需要，其中客户的实际需求也就是说这种交易性质的需求占了绝大部分。对用户需求的理解程度，在很大程度上决定了此类网站开发项目的成败，因此如何更好地了解、分析、明确用户需求，并且能够准确、清晰以文档的形式表达给参与项目开发的每个成员，保证开发过程按照满足用户需求为目的的正确项目开发方向进行是很重要的。二、总体需求对幻灯片相册的基本要求主要倾向于以下几个方面：=1\*GB3①相册应具备一般的注册登录，上传下载等功能=2\*GB3②要求网页具有良好的互动性=3\*GB3③计算浏览次数，数字在网页上面显示三、功能需求相册是以B/S架构为基础的用来存放图片的网站。前台使用HTML5CSS3等相关技术，后台连接数据库。由于相册用于存储和展示图片，存储则是相册的主要功能，此外，为了配合此功能，此网站还应具有上传、删除等相应的功能和一些丰富网站性能的功能，总体如图4.1所示图4.1总体功能需求图1、前台功能需求前台是使用者最直接接触的东西，包括是否能够让客户很轻松、方便的登录和注册，请求响应时间、主机连接时间、上传图片、删除图片、HTML综合质量、图片综合质量、首页布局质量、首页信息类型等。用户注册：相册为用户提供存储、展示图片的一些相关功能，并且能够设定一些私人的属性，因此，要使用这些功能用户必须先注册ID，每个用户都必须有一个独立的帐号，注册时需要提供一些基本信息，便于管理人员进行管理和权限设置，也便于网站以后的发展。因此，此功能是网站最基本的功能之一。上传图片：要实现图片的存储功能达到在Internet上展示图片的目的，上传的功能是必不可少的。上传不受地域的限制，实现在网页上显示图片的目的。页面的交互性：各级页面要具有良好的交互性，减少响应时间，节省用户时间。2、后台功能需求后台的作用是为前台运行必要的数据支持和供网站管理员对网站进行管理用户管理：管理员对数据库里面的userInfo这张表进行操作，管理里面存储的用户基本信息。数据管理：管理员操作存储图片信息，还有目录信息的表，达到管理的目的。权限设置：对用户进行权限设定，属性为Administrator的用户拥有最高权限，可以对网页上的任何目录和图片进行删除，添加和修改。3、系统的逻辑设计-数据流程图如图4.2所示图4.2数据流程图四、网站概要设计1、模块的划分与功能设计通过对用户需求调研并分析，确定系统应具备的功能，包括：注册登录、上传下载、留言评论、创建目录、计算浏览次数、修改密码、上一张/下一张连接。各模块的具体功能设计如下：(1)注册登录功能对于相册这种网站来说，用户首先必须注册，提供可供登录比对的个人验证信息，进入个人的帐号之后才能进行其他操作。(2)上传下载相册最主要的功能就是存储图片，所以必须提供完善的用户上传图片到服务器端及用户从服务器端下载图片的功能，上传时选择相册名，下载时可以选择下载的路径。此外，还包括一些删除图片，目录的相册基本管理。(3)留言评论提供浏览者对图片发表评论的功能，发表评论必须先注册登录。(4)创建目录允许注册用户登录后自行在相册内创建文件夹，方便用户对上传相片的分类和管理。(5)计算浏览次数计算浏览某一个目录的次数，数据自动更新并显示在目录名旁边。(6)编辑图片根据需求分析，提供对已上传的图片修改名称及描述信息的功能，用户在想修改图片名称和描述信息的时候不用将图片删除重新上传。(7)修改密码用户可根据自己的需要对原有的密码进行修改。(8)上一张/下一张连接为图片浏览者提供“上一张/下一张”连接功能，方便浏览者查看上下张图片。2、功能模块的初步设计为了配合模块的划分和实现预期的功能，将功能模块按照网站的页面个数划分为：相册首页、用户登录页面、创建目录页面、上传页面、用户注册页面、修改密码页面和显示图片页面，各个页面后端写实现功能的代码，在App_Code里面写一个连接数据库方法的类databaseclass，具体连接数据库的ADO方法，比如Connection，Command，Adapter和dataset，datatable等都写在这个类里面，页面后端代码共用此方法对数据库进行连接。3、模块的组织结构图如图4.3所示图4.3模块组织结构图起始页为相册首页，未登录可以浏览图片，进入显示图片评论页面，用户登录页面和用户注册页面，只有查看图片和评论的权限。登录用户可以进入所有页面，并拥有一些操作权限。4、数据库结构的设计用户信息表如表4.1所示表4.1userInfo(用户信息表)名称中文描述数据类型长度NullPK默认值userid用户idint4NotnullYusername用户名varchar50Nullpassword密码varchar50Nulltel电话varchar50Nullemail邮件varchar50Nullrolename权限varchar50NulluserInfo用于储存用户信息，用户在注册时填写的资料都保存在此表内，主要用于用户登录时对比信息，确定是否本人登录。图片信息表如表4.2所示表4.2photo(图片信息表)名称中文描述数据类型长度NullPK默认值photo_id图片idint4NotnullYphototitle图片标题varchar50Nullphotopath图片编号varchar50Nullphotodesc图片描述varchar100Nullcataid目录idint4Nulluserid用户idint4Nulltime上传时间datetime8Nullphoto用来储存图片信息，用于查找比对图片将正确的图片显示在网页上和搜寻上一张/下一张图片。目录信息表如表4.3所示表4.3catalog(目录信息表)名称中文描述数据类型长度NullPK默认值catalog_id目录idint4NotnullYcatalog_name创建用户名varchar50Nulluserid创建用户idint4NullTime创建时间datetime8Nullbroustimes浏览次数int4Null0catalog储存目录的相关信息，其中broustimes默认值设置为0，点击此目录一次，写入数据库一次，用来记录此相册目录的浏览次数。评论信息表如表4.4所示表4.4comment(评论信息表)名称中文描述数据类型长度NullPK默认值id评论信息idint4NotnullYphoto_id图片idint4Nulluserid用户idint4Nullcontent评论内容varchar100Nulltime发表时间datetime8Null第五章开发与实现第一节详细设计与实现一、分类管理1、功能描述登录用户，输入要创建的分类的名字，点击“新增分类”弹出对话框“新建成功”，点击确定后跳转到上传页面，如果新建一个目录名相同的文件夹，提示“此文件名存在”，页面不跳转。用户进入管理界面，可以通过分类管理添加相册新的分类和删除已有的分类；每个分类就相当于一个相册集。2、界面设计添加一个窗体，设置linkbutton控件，连接到其他页面。一个linkbutton控件退回初时状态；设置2个label控件，2个button控件分别用来确定新增分和取消此次操作。分类管理如图5.1所示图5.1分类管理分类管理实现部分代码：新增分类调用方法：protectedvoidaddFenlei_Click(objectsender,EventArgse){ //获取路径stringdictionName=Server.MapPath("upload/"+fenlei.Value);if(!Directory.Exists(dictionName)){//根据获取到的路径创建目录Directory.CreateDirectory(dictionName);initFenleis();}}分类列表使用了一个

的Repeater控件 前台控件代码:<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('删除分类后将连分类内的图片一起删除确认要删除吗？')">删¦?除y</asp:LinkButton></td></tr></ItemTemplate></asp:Repeater> 后台数据绑定代码://初始化分类列表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;} 点删除时调用的代码:protectedvoidRepeater1_ItemCommand(objectsource,RepeaterCommandEventArgse){if(e.CommandName.Equals("del"){stringdic=e.CommandArgument.ToString();DeleteFolderAll(Server.MapPath("upload/"+dic));}initFenleis();}///<summary>///删除文件夹及其内容///</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、功能描述用户进入管理界面，可以通过文件管理新增相片和删除已有相片。2、界面设计文件管理如图5.2所示图5.2文件管理文件管理实现部分代码：上部分是文件上传功能，下部分列表展现当前所选分类已有图片的信息。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>预览图</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('确认要删除吗?')">删除</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("\\")+