基于HTML5 CSS3的相册设计与实现 - 图文

摘 要

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

随着互联网技术的不断发展和计算机性能的不断提升，用户享受互联网的方式开始不断的变化，越来越多的应用可以直接以浏览器打开的方式使用，数据则是存储在云端，更加的安全可靠，方便用户共享数据。在各种应用不断的趋于更加网络话的同时，一种新的技术标准也随之产生，那就是HTML5（HTML是一种标记语言也是一种准，互联网开发居于此）。HTML5是近十年来Web（互联网）标准最巨大的飞跃，和以前版本不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化，也就是说HTML5是通过开放的技术和标准来实现一个无插件模式的客户端。所以此时研究HTML5，并且大胆的实践有着重要的意义。

HTML5技术是目前最新的互联网应用技术，它给使用者带来全新操作体验的同时，也改变着整个互联网未来的发展方向。现阶段对于HTML技术的研究和开发工作主要集中在技术草案的确立与新互联网应用的开发上。 本文使用HTML5和CSS3提供的前台展示能力制作出了漂亮的幻灯片相册程序，结合时下流行的Asp.Net做后台支持，实现了个人幻灯片相册的B/S结构的应用。

【关键词】HTML5 CSS3 Asp.Net 幻灯片相册

- I -

ABSTRACT

In today's 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 life's good times, these need to be applied to produce albums become images.

With the continuous development of Internet technology and computer

performance continues to increase, users enjoy the way the Internet began to change, more and more applications can be opened directly in the browser's use of the data is stored in the cloud, more secure reliable, user-share data. In a variety of applications 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 (Internet) 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 technologies 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 new operating experience of colleagues, but also changing the future direction of development of the entire 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 the popular ASP.NET backing support, personal slideshow album B / S structure of the application.

【Key words】HTML5 CSS3 Asp.Net Slideshow Album

- II -

目 录

前 言......................................................................................................................... 1 第一章 HTML5幻灯片相册概述 ............................................................................ 2 第一节 研究内容................................................................................................... 2 第二节 研究意义................................................................................................... 2 第三节 研究现状和发展趋势............................................................................... 2 第二章 HTML5相关技术及简介 ............................................................................ 4 第一节 HTML5发展历史及趋势 ........................................................................ 4 第二节 HTML部分新特性 .................................................................................. 4 一、HTML5新API ........................................................................................... 4 二、HTML5的优点 .......................................................................................... 5 第三节 JavaScript及jQuery简介 ........................................................................ 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

- III -

第四章 开发实例与设计......................................................................................... 15 第一节 幻灯片相册需求分析............................................................................. 15 一、需求分析................................................................................................... 15 二、总体需求................................................................................................... 15 三、功能需求................................................................................................... 15 四、网站概要设计........................................................................................... 17 第五章 开发与实现................................................................................................. 21 第一节 详细设计与实现..................................................................................... 21 一、分类管理................................................................................................... 21 二、文件管理................................................................................................... 29 三.、客服端...................................................................................................... 32 四、登陆页面................................................................................................... 44 结论........................................................................................................................... 45

- IV -

前 言

随着社会的不断发展，计算机已经逐渐普及，几乎渗入到人们生活中的每一个角落，人们的日常生活已经越来越离不开计算机了。计算机软件的发展更是日新月异，现在好多人喜欢把自己的照片或是一些美丽的图片制作成相册，以动画的方式浏览。网络上各种各样的相册层出不穷，本文将介绍基于HTML5和CSS3的幻灯片相册的设计与实现。

HTML5是近十年来Web标准最巨大的飞跃，和以前的版本有所不同，HTML5并非仅仅用来表示Web内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。HTML5中加入了各类新的元素和功能，同时也考虑到了非健全人士使用互联网时可能带来的问题。所以，研究HTML5这种技术体系来尝试做一些应用是一个千载难逢的机遇。

- 1 -

第一章 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 款浏览器(iOS Safari 6.0、Android Browser 4.1、Opera Mobile 12.1、Chrome for Android 18.0、Firefox for Android 15.0)，目前对标准

- 2 -

的支持度均高于 60%。其中表现居首的是 Chrome for Android，而支持度相对较低的 Android 系统自带的浏览器 Android Browser 对 HTML5 的支持度也在 60%以上。

此外，硬件加速促进了HTML5标准的发展和应用。在使用 HTML5 开发时，开发者经常会谈到的一个问题就是性能。使用 HTML5 动画、Canvas、WebGL 究竟能否带来更好的用户体验，与其实际性能密不可分。目前国内外主流浏览器均支持硬件加速，这对 HTML5 的发展无疑是个好消息。可以支持硬件加速的浏览器版本有：Chrome 18+、Firefox 4+、IE 9+、Safari 5.1+、Opera 12+。国内的有360 安全浏览器、搜狗浏览器以及QQ 浏览器。手机系统情况也比较乐观，主流的智能手机系统 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 大面积使用只是时间问题。此外，移动平台的HTML5比PC平台发展得更快。由于移动设备的更新换代速度远远超过PC，而且硬件性能也能够完全支持HTML5。

- 3 -

第二章 HTML5相关技术及简介

第一节 HTML5发展历史及趋势

HTML5是HTML下的一个主要修订版本，现在仍处于发展阶段。目标是取代1999年所订定的HTML 4.01和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，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 带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及同电脑的交互都被标准化。目前Firefox（火狐浏览器），IE9及其更高版本，Chrome，Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力。

第二节 HTML部分新特性

一、HTML5新API

除了原先的DOM接口，HTML5增加了更多样化的API：

① 实时二维绘图

Canvas API：有关动态产出与渲染图形、图表、图像和动画的API。 ② 定时媒体播放

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

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

- 4 -

④ 编辑 ⑤ 拖放 ⑥ 跨文档通信 ⑦ 通信／网络

Communication APIs：构建实时和跨源（cross-origin）通信的两大基础： 跨文档通信（Cross Document Messaging）与 XMLHttpRequest Level 2。

二、HTML5的优点

① SEO(搜索引擎优化)得到提升

一些常用的图形效果有CSS3表达方式，包括不透明贴图、圆角、阴影。这些效果与CSS3渐变色一起使得上传更为简洁，跨平台维护也更为容易。此外，它们还在SEO(搜索引擎优化)方面具有优势。

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

在网页设计中，“渐变”是一种背景效果：你的网页上的“窗口”拥有更精致的底纹或纹理。公司设计人员有更大的空间来平衡明暗度、匹配边界，实现让大数浏览者叹为观止的色彩或风格。

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

最后一个优势是，HTML5解决方案是一个可媲美原生应用的编程环境。这对于移动终端用户来说非常重要，原生应用开发成本昂贵：其编程人员薪水高、许可证各类繁多，可移植性差。HTML5在优势在于许多应用能够被完整的编在HTML5内。

④ 更精美的动画效果

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

HTML5能够以更低的成本和更短的下载时间展现媲美目前顶级网页设计人员设计的外观，语义标记具有SEO和维护优势。HTML5现在拥有的一些效果已经超越早期标准的效果，其中之一就是动画制作。

第三节 JavaScript及jQuery简介

一、JavaScript

JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器

- 5 -

端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了JavaScript，提供了数据验证的基本功能。由于Ajax的出现，JavaScript的功能被越来越多的丰富，能做的事情也越来越多，是Web2.0时代的象征。

一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。

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

二、jQuery

jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, 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特点：

① 动态特效 ② AJAX

③ 通过插件来扩展

④ 方便的工具 - 例如浏览器版本判断 ⑤ 渐进增强 ⑥ 链式调用

⑦ 多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+

jQuery库是一个单独的JavaScript文件，可以保存到本地或者服务器直接引用，也可以从多个公共服务器中选择引用。有Media Temple、Google、Microsoft等多家公司给jQuery提供CDN服务，比较常用的引用地址如下

- 6 -