毕业论文基于HTML5 CSS3的相册设计与实现.docx

毕业论文基于HTML5 CSS3的相册设计与实现.docx

《毕业论文基于HTML5 CSS3的相册设计与实现.docx》由会员分享，可在线阅读，更多相关《毕业论文基于HTML5 CSS3的相册设计与实现.docx（50页珍藏版）》请在冰豆网上搜索。

毕业论文基于HTML5CSS3的相册设计与实现

摘要

在当今社会，相册影像已成为人们生活和工作中日以追求的物质和精神需求，婚纱影像、儿童写真、个人写真、聚会等等，它可以记录人生的美好时光，这些都需要应用相册来制作成为影像。

随着互联网技术的不断发展和计算机性能的不断提升，用户享受互联网的方式开始不断的变化，越来越多的应用可以直接以浏览器打开的方式使用，数据则是存储在云端，更加的安全可靠，方便用户共享数据。

在各种应用不断的趋于更加网络话的同时，一种新的技术标准也随之产生，那就是HTML5（HTML是一种标记语言也是一种准，互联网开发居于此）。

HTML5是近十年来Web（互联网）标准最巨大的飞跃，和以前版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化，也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的客户端。

所以此时研究HTML5，并且大胆的实践有着重要的意义。

HTML5技术是目前最新的互联网应用技术，它给使用者带来全新操作体验的同时，也改变着整个互联网未来的发展方向。

现阶段对于HTML技术的研究和开发工作主要集中在技术草案的确立与新互联网应用的开发上。

本文使用HTML5和CSS3提供的前台展示能力制作出了漂亮的幻灯片相册程序，结合时下流行的Asp.Net做后台支持，实现了个人幻灯片相册的B/S结构的应用。

【关键词】HTML5CSS3Asp.Net幻灯片相册

ABSTRACT

Intoday'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

前言

随着社会的不断发展，计算机已经逐渐普及，几乎渗入到人们生活中的每一个角落，人们的日常生活已经越来越离不开计算机了。

计算机软件的发展更是日新月异，现在好多人喜欢把自己的照片或是一些美丽的图片制作成相册，以动画的方式浏览。

网络上各种各样的相册层出不穷，本文将介绍基于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：

实时二维绘图

CanvasAPI：

有关动态产出与渲染图形、图表、图像和动画的API。

定时媒体播放

HTML5音频与视频：

HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任何插件。

离线存储数据库（离线网络应用程序）

编辑

拖放

跨文档通信

通信／网络

CommunicationAPIs：

构建实时和跨源（cross-origin）通信的两大基础：

跨文档通信（CrossDocumentMessaging）与XMLHttpRequestLevel2。

二、HTML5的优点

SEO（搜索引擎优化）得到提升

一些常用的图形效果有CSS3表达方式，包括不透明贴图、圆角、阴影。

这些效果与CSS3渐变色一起使得上传更为简洁，跨平台维护也更为容易。

此外，它们还在SEO（搜索引擎优化）方面具有优势。

更快的图片下载速度，尤其是对于移动用户

在网页设计中，“渐变”是一种背景效果：

你的网页上的“窗口”拥有更精致的底纹或纹理。

公司设计人员有更大的空间来平衡明暗度、匹配边界，实现让大数浏览者叹为观止的色彩或风格。

Web应用开发更容易，尤其是移动应用

最后一个优势是，HTML5解决方案是一个可媲美原生应用的编程环境。

这对于移动终端用户来说非常重要，原生应用开发成本昂贵：

其编程人员薪水高、许可证各类繁多，可移植性差。

HTML5在优势在于许多应用能够被完整的编在HTML5内。

更精美的动画效果

除了上面所提到的功能外，其特色功能还包括

HTML5能够以更低的成本和更短的下载时间展现媲美目前顶级网页设计人员设计的外观，语义标记具有SEO和维护优势。

HTML5现在拥有的一些效果已经超越早期标准的效果，其中之一就是动画制作。

第三节JavaScript及jQuery简介

一、JavaScript

JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。

于是Netscape的浏览器Navigator加入了JavaScript，提供了数据验证的基本功能。

由于Ajax的出现，JavaScript的功能被越来越多的丰富，能做的事情也越来越多，是Web2.0时代的象征。

一个完整的JavaScript实现是由以下3个不同部分组成的：

核心（ECMAScript）、文档对象模型（DocumentObjectModel，简称DOM）、浏览器对象模型（BrowserObjectModel，简称BOM）。

JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。

二、jQuery

jQuery是继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特点：

动态特效

AJAX

通过插件来扩展

方便的工具-例如浏览器版本判断

渐进增强

链式调用

多浏览器支持，支持InternetExplorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+

jQuery库是一个单独的JavaScript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。

有MediaTemple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下

选择器：

jQuery使用sizzle引擎，支持css选取，Xpath选取等方式。

$（"p"）选取全部

元素。

$（"p.intro"）选取所有包含class为"intro"的

元素。

$（"#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，就可以实现这个复杂布局。

二、特性：

圆角表格，对应属性：

border-radius。

以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。

对应属性：

font-effect。

丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。

（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：

text-underline-style，text-underline-color，text-underline-mode，text-underline-position。

在文字下点几个点或打个圈以示重点，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（色相、饱和度、亮度）。