1、基于HTML5 CSS3的相册设计与实现acTxtTipacTxtPics摘要在当今社会，相册影像已成为人们生活和工作中日以追求的物质和精神需求，婚纱影像、儿童写真、个人写真、聚会等等，它可以记录人生的美好时光，这些都需要应用相册来制作成为影像。随着互联网技术的不断发展和计算机性能的不断提升，用户享受互联网的方式开始不断的变化，越来越多的应用可以直接以浏览器打开的方式使用，数据则是存储在云端，更加的安全可靠，方便用户共享数据。在各种应用不断的趋于更加网络话的同时，一种新的技术标准也随之产生，那就是HTML5（HTML是一种标记语言也是一种准，互联网开发居于此）。HTML5是近十年来Web（互联
2、网）标准最巨大的飞跃，和以前版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化，也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的客户端。所以此时研究HTML5，并且大胆的实践有着重要的意义。HTML5技术是目前最新的互联网应用技术，它给使用者带来全新操作体验的同时，也改变着整个互联网未来的发展方向。现阶段对于HTML 技术的研究和开发工作主要集中在技术草案的确立与新互联网应用的开发上。本文使用HTML5和CSS3提供的前台展示能力制作出了漂亮的幻灯片相册程序，结合时下流行的As
3、p.Net做后台支持，实现了个人幻灯片相册的B/S结构的应用。【关键词】HTML5 CSS3 Asp.Net 幻灯片相册ABSTRACTIn todays society, album image has become Japanese people live and work in pursuit of the material and spiritual needs, wedding video, children photo, personal photo, gatherings, etc., it can record lifes good times, these need to b
4、e applied to produce albums become images.With the continuous development of Internet technology and computerperformance continues to increase, users enjoy the way the Internet began to change, more and more applications can be opened directly in the browsers use of the data is stored in the cloud,
5、more secure reliable, user-share data. In a variety ofapplications tends to be more constant, then the network at the same time, a new technology standard also will produce, and that is HTML5 (HTML is a markup language is a quasi, Internet development living in this). HTML5 is the decade Web (Intern
6、et) Standard greatest leap, and previous versions, HTML5 is not just used to represent Web content, its mission is to bring a mature Web application platform, on this platform, video, audio, images and animations, as well as interaction with the computer are standardized, ie HTML5 is through open te
7、chnologies and standards to achieve a free plug-mode client. So in this case study HTML5, and bold practice of great significance.HTML5 technology is the latest Internet technology, to bring users newoperating experience of colleagues, but also changing the future direction ofdevelopment of the enti
8、re Internet. HTML5 technology at this stage of research and development work is mainly concentrated in the establishment and development of new Internet applications on the draft technical.Using HTML5 and CSS3 front display capability to produce beautiful slide Albums procedures, combined with the t
9、he popular ASP.NET backing support, personal slideshow album B / S structure of the application.【Key words】HTML5 CSS3 Asp.Net Slideshow Album目录前言. 1第一章 HTML5幻灯片相册概述 2第一节研究内容. 2第二节研究意义. 2第三节研究现状和发展趋势.2第二章 HTML5相关技术及简介 4第一节 HTML5发展历史及趋势 4第二节 HTML部分新特性 4一、HTML5新API .4二、HTML5的优点 . 5第三节 JavaScript及jQuery
10、 简介 6一、JavaScript . 6二、jQuery .6第四节 CSS3简介 . 8一、布局. 9二、特性：.9三、边框：.9四、文字效果：.10五、颜色：.10六、用户界面：.10七、选择器：.10八、影响：.11第三章开发运行环境及配置.12第一节开发工具. 12一、Microsoft Visual Studio 2010外观和行为 12二、帮助您快速浏览代码的工具.12三、代码生成和文本模板.13第二节运行环境. 13一、Chrome 浏览器 13二、Sql Server 2008 R2 . 13第四章开发实例与设计.15第一节幻灯片相册需求分析.15一、需求分析. 15二、总体
11、需求. 15三、功能需求. 15四、网站概要设计. 17sid=fc0a7e07d3f1df98北美旅游找“走四方”走四方旅游网美国官方认证A级信誉7X24热线：4006-333-926第五章开发与实现. 21第一节详细设计与实现.21一、分类管理. 21二、文件管理. 29三.、客服端.32四、登陆页面. 44结论. 45前言随着社会的不断发展，计算机已经逐渐普及，几乎渗入到人们生活中的每一个角落，人们的日常生活已经越来越离不开计算机了。计算机软件的发展更是日新月异，现在好多人喜欢把自己的照片或是一些美丽的图片制作成相册，以动画的方式浏览。网络上各种各样的相册层出不穷，本文将介绍基于HTML
12、5和 CSS3的幻灯片相册的设计与实现。HTML5是近十年来Web标准最巨大的飞跃，和以前的版本有所不同，HTML5并非仅仅用来表示 Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。HTML5中加入了各类新的元素和功能，同时也考虑到了非健全人士使用互联网时可能带来的问题。所以，研究HTML5这种技术体系来尝试做一些应用是一个千载难逢的机遇。第一章 HTML5幻灯片相册概述第一节研究内容HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa 的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的
13、Web 。在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web 排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。第二节研究意义利用HTML5和CSS3实现一个幻灯片相册的应用，以此来学习这个最新的Web技术，以适应潮流的发展，让用户感受HTML带来的全新体验。第三节研究现状和发展趋势国内市场支持HTML5标准的浏览器已经从 2010年的不到2%发展到2012年超过三成的比例，2013年这一比例将有望突破70%。越来越多PC 浏览器开始重视并且支持HTML5发展的同时，HTML5也越来越受到移动互联网的重视。许多大网站开始采用HTML
14、5页面，例如淘宝，京东等，足以见得HTML5发展之快。相对于 PC 平台而言，移动平台一直是开发者更为关心的，因为移动平台浏览器品种较少，版本也普遍集中在最新正式版。同时，由于移动设备的更新换代速度要比 PC 更快,硬件支持和浏览器的状况都要比 PC平台的状况更好。移动平台上主流的 5 款浏览器 (iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0、Firefox for Android 15.0)，目前对标准的支持度均高于 60%。其中表现居首的是 Chrome for Android，而支
15、持度相对较低的 Android 系统自带的浏览器 Android Browser 对 HTML5 的支持度也在 60%以上。此外，硬件加速促进了HTML5标准的发展和应用。在使用 HTML5 开发时，开发者经常会谈到的一个问题就是性能。使用 HTML5 动画、Canvas、WebGL究竟能否带来更好的用户体验，与其实际性能密不可分。目前国内外主流浏览器均支持硬件加速，这对 HTML5 的发展无疑是个好消息。可以支持硬件加速的浏览器版本有：Chrome 18+、Firefox 4+、IE 9+、Safari 5.1+、Opera 12+。国内的有360 安全浏览器、搜狗浏览器以及QQ 浏览器。手
16、机系统情况也比较乐观，主流的智能手机系统iOS、Android 以及 Windows Phone 上的原生浏览器都已经支持硬件加速。Android 4.0+上的 Chrome在硬件加速方面更是超越了原生浏览器的表现。2012 年 12 月 17日，W3C 发布了 HTML5 以及 Canvas 2D 两个标准的完全定义版本，标志着 HTML5 的标准已经在趋向稳定。在2013年，支持 HTML5 的 PC 浏览器将会有一个较大的增长。除Chrome、Firefox 之外，微软推出的 IE9、IE10 对HTML5 的支持度都大幅提升，相信 HTML5 大面积使用只是时间问题。此外，移动平台的H
17、TML5比PC平台发展得更快。由于移动设备的更新换代速度远远超过PC，而且硬件性能也能够完全支持HTML5。第二章 HTML5相关技术及简介第一节 HTML5发展历史及趋势HTML5是HTML下的一个主要修订版本，现在仍处于发展阶段。目标是取代1999年所订定的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet applicatio
18、n，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。HTML5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22 日，第一份正式草案已公布，在2010年9月正式向公众推荐。HTML5 是近十年来 Web 标准最巨大的飞跃。和以前的版本不同，HTML 5 并非仅仅用来表示 Web 内容，它的使命是将 Web 带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及同电脑
19、的交互都被标准化。目前Firefox （火狐浏览器），IE9及其更高版本，Chrome， Safari，Opera 等；国内的傲游浏览器（Maxthon），以及基于IE所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。第二节 HTML部分新特性一、HTML5新API除了原先的DOM 接口， HTML5增加了更多样化的API：实时二维绘图Canvas API：有关动态产出与渲染图形、图表、图像和动画的API。定时媒体播放HTML5 音频与视频：HTML5里新增的元素，它们为开发者提供了一套通用的、集成的、脚本式的处理音频与视频的API，而无需安装任
20、何插件。离线存储数据库（离线网络应用程序）编辑拖放跨文档通信通信网络Communication APIs：构建实时和跨源（cross-origin）通信的两大基础：跨文档通信（Cross Document Messaging）与XMLHttpRequest Level 2。二、HTML5的优点 SEO(搜索引擎优化 )得到提升一些常用的图形效果有CSS3表达方式，包括不透明贴图、圆角、阴影。这些效果与CSS3渐变色一起使得上传更为简洁，跨平台维护也更为容易。此外，它们还在SEO(搜索引擎优化) 方面具有优势。更快的图片下载速度，尤其是对于移动用户在网页设计中，“渐变 ”是一种背景效果：你的网页
21、上的“窗口”拥有更精致的底纹或纹理。公司设计人员有更大的空间来平衡明暗度、匹配边界，实现让大数浏览者叹为观止的色彩或风格。 Web应用开发更容易，尤其是移动应用最后一个优势是，HTML5解决方案是一个可媲美原生应用的编程环境。这对于移动终端用户来说非常重要，原生应用开发成本昂贵：其编程人员薪水高、许可证各类繁多，可移植性差。HTML5在优势在于许多应用能够被完整的编在HTML5内。更精美的动画效果除了上面所提到的功能外，其特色功能还包括HTML5能够以更低的成本和更短的下载时间展现媲美目前顶级网页设计人员设计的外观，语义标记具有SEO和维护优势。HTML5现在拥有的一些效果已经超越早期标准的效
22、果，其中之一就是动画制作。第三节 JavaScript及jQuery 简介一、JavaScriptJavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator 加入了JavaScript，提供了数据验证的基本功能。由于Ajax的出现，JavaScript 的功能被越来越多的丰富，能做的事情
23、也越来越多，是Web2.0时代的象征。一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。JavaScript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。二、jQueryjQuery是继prototype之后又一个优秀的JavaScript 框架。它是轻量级的js库 (压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+,
24、 FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全；而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的HTML页面保持代码和 HTML内容分离，也就是说，不用再在HTML里面插入一堆 js来调用命令了，只需定义ID即可。如今，jQuery已经成为最流行的JavaScript 库，在世界前10000 个访问最多的网站中，有超过55%在使用jQuery。jQuery特点：动
25、态特效 AJAX通过插件来扩展方便的工具 - 例如浏览器版本判断渐进增强链式调用多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+ 、Chrome1.0+jQuery库是一个单独的JavaScript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有Media Temple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下选择器：jQuery使用 sizzle引擎，支持css选取，Xpath选取等方式。$(“p“) 选取全部元素。$(“p.intro“
26、) 选取所有包含class为“intro“的元素。$(“#demo“) 选取 id为“demo“ 的元素。$(“href“) 选取所有带有href属性的元素。$(“href=#“) 选取所有带有href值等于 “#“ 的元素。$(“href!=#“) 选取所有带有href值不等于 “#“ 的元素。$(“href$=.jpg“) 选取所有href值以 “.jpg“ 结尾的元素。事件处理：直接绑定指定事件，事件类型即方法名，支持click、focus 、blur 、submit等。$(“#button“).click(function()/script goes here);用on来绑定事件，of
27、f来解绑事件，第一个参数为事件名，第二个参数为回调函数。$(“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“,dat
28、a: “name=John).fail(function(xmlHttpRequest,statusText,errorThrown) alert(“Your form submission failed.nn“+ “XML Http Request: “ + JSON.stringify(xmlHttpRequest)+ “,nStatus Text: “ + statusText+ “,nError Thrown: “ + errorThrown););这个例子发送name=John 和location=Boston 两个数据给服务端的example.php，请求成功后会提示用户。插件机制
29、：jQuery的官方插件是jQuery UI。开发者可以任意扩展jQuery的函数库或者按照自己的需求开发UI组件。目前网上已经有数以千计的jQuery插件，覆盖各种各样的需求。例如Ajax辅助、数据表格、动态列表、XML 工具、拖曳、cookie处理、弹出层等等。 jQuery的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择,比如 ComponentOne for jQuery。第四节 CSS3简介CSS即层叠样式表（Cascading Stylesheet）。在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应
30、的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。CSS3带来无与伦比的页面表现能力，而这些在以前只能靠图片，多层的标签嵌套或者js 才能实现，现在只需要几行CSS3就能实现，效率也比原来要高很多。一、布局Grid布局应用很广泛，最简单的例子就是内容的分栏显示。对于左边这个布局复杂的三栏网页来说，如果
31、使用CSS3Grid布局的话，我们只需这样写：bodycolumns:3;column-gap:0.5in;imgfloat:pagetopright;width:3gr;其中，body部分声明页面为3栏，栏间距为0.5英寸；img中 float属性指明图片浮动位置为页面的右上角，而宽度为3个栏宽。只需这样两行CSS，就可以实现这个复杂布局。二、特性：圆角表格，对应属性：border-radius。以往对网页上的文字加特效只能用filter 这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。丰富了对链接下划线的样式，以往的下划线都
32、是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color ，text-underline-mode，text-underline-position。在文字下点几个点或打个圈以示重点，CSS3 也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。三、边框：border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变
33、效果。 border-image:控制边框图象。border-corner-image:控制边框边角的图象。border-radius：能产生类似圆角矩形的效果。background-size：可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。multiple backgrounds：多重背景图象，可以把不同背景图象只放到一个块元素里。四、文字效果：text-shadow：文字投影，可能是因为 MAC OSX的Safari浏览器开始支持投影才特意增加的。text overflow：当文字溢出时，用 “.”提示
34、。包括ellipsis、clip 、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。五、颜色：HSL colors：除了支持RGB颜色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H 用度表示， S和L 用百分比表示，比如hsl（0,100%, 50%）。HSLA colors：加了个不透明度（Apacity），用0 到1之间的数来表示，比如hsla（0,100%,50%,0.
35、2 ）。Opacity：直接控制不透明度，用0到1之间的数来表示。RGBA colors：和HSLA colors类似，加了个不透明度。一直以来，浏览器的透明一直无法实现单纯的颜色透明，每次使用alpha后就会把透明的属性继承到子节点上。换句话说，很难实现背景颜色透明而文字不透明的效果。直到RGBA颜色的出现这一切将成为现实。实现这样的效果非常简单，设置颜色的时候我们使用标准的rgba（）单位即可，例如rgba （255,0,0,0.4）这样就出现了一个红色同时拥有alpha透明为0.4的颜色。经过测试firefox3.0、safari3.2、opera10都支持了rgba单位。六、用户界面：
36、Resize：可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者 both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局。七、选择器：CSS3增加了更多的CSS选择器，可以实现更简单但是更强大的功能，比如：nth-child() 等。Attribute selectors：在属性中可以加入通配符，包括,$,*。att=val：表示开始字符是val的att属性。att$=val：表示结束字符是val的att属性。att*=val：表示包含至少有一个 val的att属性。其它模块（Other modules）：
37、media queries：感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。multi-column layout：多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值。column-width：指定每列宽度。column-count：指定列数。column-gap：指定每列之间的间距。column-rule-color：控制列间的颜色。column-rule-style：控制列间的样式。column-rule-width：控制列间的宽度。co
38、lumn-space-distribution：平均分配列间距。八、影响：CSS3将完全向后兼容，所以没有必要修改现在的设计来让它们继续运作。网络浏览器也还将继续支持CSS2。CSS3主要的影响是将可以使用新的可用的选择器和属性，这些会允许实现新的设计效果（譬如动态和渐变），而且可以很简单的设计出现在的设计效果（比如说使用分栏）。第三章开发运行环境及配置第一节开发工具一、Microsoft Visual Studio 2010外观和行为图3.1显示了 Visual Studio 集成开发环境 (IDE)。图3.1Visual Studio IDE可视增强功能IDE 已经过重新设计，提高了可性读
39、。为了减少杂乱，不必要的行和渐变都已删除。支持多个监视器“代码编辑器” 和“设计”视图窗口等文档窗口现在都可以放置在 IDE 窗口的外部。例如，您可以将“代码编辑器”拖出 IDE，以便可以将它与“设计”视图窗口并排查看。二、帮助您快速浏览代码的工具代码编辑器新的代码编辑器使代码更容易阅读。您可以通过在按住 Ctrl 的同时滚动鼠标滚轮来进行缩放。此外，当您在 Visual C# 或 Visual Basic 中单击某个符号时，该符号的所有实例都将自动突出显示。 键 入时即开始搜索新的“定位到 ”功能 对文件、 类型和成员提供“键入时即开始搜索”支持。“定位到” 使您能够利用 Camel 大小写
40、格式和下划线来缩写搜索文本。例如，可以使用“AOH”来搜索“AddOrderHeader”。调 用层次结构在 Visual C# 和 Visual C+ 中，调用层次结构使您能够从一个成员定位到它的调用方成员以及它的被调用方成员。在浏览面向对象的代码时，这十分有用。三、代码生成和文本模板在 Visual Studio 的任何版本中都可以创建和使用文本模板，无需任何其他组件。在引入了预处理文本模板的 Visual Studio 2010 中，从应用程序生成任何类型的文本文件已变得更加容易。还通过与生成系统的更好集成，改进了对代码集成的支持，从而使生成的源代码始终会在对源模型进行任何更改后保持更新
41、。第二节运行环境一、Chrome 浏览器Chrome浏览器是一款设计简约、蕴含了尖端的技术，可以让用户更快速、轻松且安全地使用网络的浏览器，该浏览器是基于其他开放原始码软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效的使用界面。软件的名称是来自称作Chrome的网路浏览器图形使用者界面（GUI）。目前市场上的浏览器虽然品牌众多，但是其都是根据几大开源内核来构建的，主要可以分为两大类：IE 系列和非IE 系列。Chrome浏览器属于非IE系列，与IE和Mozilla等浏览器相比，Chrome浏览器在Javascript执行速度上最快，对CSS的渲染也是最快的。Chrome浏览器能够很好地支持HTML5，同时又是功能强大的调试工具。
