综合实战电子相册.pptxVIP

24 综合实战：电子相册 本章实例以HTML+CSS+JavaScript+jQuery+XML技术混合进行开发。遵循结构、表现、逻辑和数据完全分离的原则进行设计。结构层由HTML负责，在结构内不包含其他层代码；表现层完全独立，并实现表现层皮肤定制功能，CSS代码完全兼容IE 6、IE 7和FF等浏览器，符合Web标准设计的规范；逻辑层使用JavaScript+jQuery技术配合进行开发，充分发挥各自优势，以实现最优化代码编辑原则，其中数据的导入由JavaScript负责，而数据的解析由jQuery负责。示例所要呈现的数据完全独立，并以XML格式进行存储，数据容量可以自由增减，不受程序和页面结构的限制。本实例不需要后台服务器技术的支持，因此对于广大初学者来说，可以自由在本地或远程进行调试和运行。 样吧视频教室（） 《网页制作与网站开发从入门到精通》配套视频 24.1 策划思路和XML数据设计 24.1.1 电子相册功能演示 本实例具备这样几个功能： 第一，分类比较灵活，方便浏览者按类浏览。 第二，缩微图富有动感，方便选择，单击某个缩微图即可加载并显示缩微图的大图。 第三，图片分类自由，可以任意定制和增减，分类设置和显示不受限于页面结构，而且可以自由控制。 第四，可以定制相册皮肤，实现用户自己决定相册的肤色。 样吧视频教室（） 《网页制作与网站开发从入门到精通》配套视频 24.1 策划思路和XML数据设计 24.1.2 策划思路 整个案例的设计思路可以按如下几个部分进行讲解。 结构部分：由HTML负责。结构代码存放在index.html、index1.html和index2.html文件中，负责构建页面的基本骨架。index.html、index1.html和index2.html三个文件没有必然联系，只是方便读者学习而逐步搭建的框架。index.html文档结构为初步设计版，index2.html文档结构为最终效果版。 布局部分：由CSS负责。页面样式代码存放在images/javasript0.js（初步样式）、images/javasript.js（最终效果）、images/colour_blue.css（蓝色皮肤）、images/colour_green.css（绿色皮肤）、images/colour_orange.css（橙色皮肤）、images/colour_pink.css（粉红色皮肤）、images/colour_purple.css（紫色皮肤）。 脚本部分：由JavaScript和jQuery负责。脚本代码存放在javasript0.js（初步控制皮肤）和javasript.js（控制皮肤、XML数据的读显操作）。同时注意在文档中导入jquery.js框架文件，本实例使用版本为jquery-1.2.6，早期jQuery版本的语法可能略有不同。 数据部分：由XML负责。存放在pics文件夹中。左侧分类导航信息存放在pics/class.xml文件中，可以根据照片容量自由增减。在pics文件夹中可以自定义子文件夹，每个子文件件表示一类照片，文件夹的名称可以自由设置。具体照片、照片缩微图和照片XML数据索引都放在不同的子分类文件夹中，详细说明可以参阅下一节讲解。 样吧视频教室（） 《网页制作与网站开发从入门到精通》配套视频 24.1 策划思路和XML数据设计 24.1.3 设计XML数据结构 Web开发比较讲究：兵马未动，粮草先行。在项目开工之前，数据结构一定要心中有谱。对于一个大型项目来说，数据结构搭建好了，也就等于项目开发成功了一半，后期开发无非是借助逻辑层把这些数据串连为一个有机体，并映射到页面中。 本实例所用的数据存在两种形式：一类是实体的照片文件，这些图像文件按原始状态、固定位置和有序组织在项目下的子目录中；另一类是XML格式数据，这些数据是相关照片文件的索引信息，存储这些索引信息目的就是为了方便脚本灵活控制照片的显示。XML格式数据包括两种文件： 第一种文件（pics/class.xml）负责存储分类导航栏的显示信息，其中pics表示根节点。folder是子节点，它包含每个分类文件夹（照片分类）的信息，当前节点的name属性表示分类文件夹的名称，class属性表示分类导航的图标，folder节点所包含的信息为当前分类的标题。以上数据必须根据子文件夹的实际信息进行填写，否则程序在读取数据时就会发生紊乱。该文件可以自由增加folder子节点的数目，以实现自由增减相册分类。 样吧视频教室（） 《网页制作与网站开发从入门到精通》配套视频 24.1 策划思路和XML数据设计 24.1.3 设计XML数据结构 第二种文件（pics/子目录/pics.xml）负责存储某类照片的信息 该结构也是以pi