综合实战电子相册

《综合实战电子相册》由会员分享，可在线阅读，更多相关《综合实战电子相册（30页珍藏版）》请在金锄头文库上搜索。

1、24 综合实战：电子相册本章实例以HTML+CSS+JavaScript+jQuery+XML技术混合进 行开发。遵循结构、表现、逻辑和数据完全分离的原则进行 设计。结构层由HTML负责，在结构内不包含其他层代码；表 现层完全独立，并实现表现层皮肤定制功能，CSS代码完全 兼容IE 6、IE 7和FF等浏览器，符合Web标准设计的规范； 逻辑层使用JavaScript+jQuery技术配合进行开发，充分发挥 各自优势，以实现最优化代码编辑原则，其中数据的导入由 JavaScript负责，而数据的解析由jQuery负责。示例所要呈现 的数据完全独立，并以XML格式进行存储，数据容量可以自 由增减

2、，不受程序和页面结构的限制。本实例不需要后台服 务器技术的支持，因此对于广大初学者来说，可以自由在本 地或远程进行调试和运行。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.1 策划思路和XML数据设计24.1.1 电子相册功能演示本实例具备这样几个功能： 第一，分类比较灵活，方便浏览者按类浏览。 第二，缩微图富有动感，方便选择，单击某个缩微图即可加载并显示缩微图的 大图。 第三，图片分类自由，可以任意定制和增减，分类设置和显示不受限于页面结 构，而且可以自由控制。 第四，可以定制相册皮肤，实现用户自己决定相册的肤色。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.

3、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（最终效果

4、）、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版本的语法

5、可能略有不同。数据部分：由XML负责。存放在pics文件夹中。左侧分类导航信息存放在pics/class.xml 文件中，可以根据照片容量自由增减。在pics文件夹中可以自定义子文件夹，每个子文件 件表示一类照片，文件夹的名称可以自由设置。具体照片、照片缩微图和照片XML数据 索引都放在不同的子分类文件夹中，详细说明可以参阅下一节讲解。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.1 策划思路和XML数据设计24.1.3 设计XML数据结构Web开发比较讲究：兵马未动，粮草先行。在项目开工之前，数据结构一定要 心中有谱。对于一个大型项目来说，数据结构搭建好了，也就等于项目开发成

6、 功了一半，后期开发无非是借助逻辑层把这些数据串连为一个有机体，并映射 到页面中。 本实例所用的数据存在两种形式：一类是实体的照片文件，这些图像文件按原 始状态、固定位置和有序组织在项目下的子目录中；另一类是XML格式数据， 这些数据是相关照片文件的索引信息，存储这些索引信息目的就是为了方便脚 本灵活控制照片的显示。XML格式数据包括两种文件：第一种文件（pics/class.xml）负责存储分类导航栏的显示信息，其中pics表示 根节点。folder是子节点，它包含每个分类文件夹（照片分类）的信息，当前节 点的name属性表示分类文件夹的名称，class属性表示分类导航的图标，folder

7、节点所包含的信息为当前分类的标题。以上数据必须根据子文件夹的实际信息 进行填写，否则程序在读取数据时就会发生紊乱。该文件可以自由增加folder子 节点的数目，以实现自由增减相册分类。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.1 策划思路和XML数据设计24.1.3 设计XML数据结构第二种文件（pics/子目录/pics.xml）负责存储某类照片的信息该结构也是以pics为根节点，子节点folder表示当前分类信息（当前目录），其 中name属性表示目录的名称，class属性表示当前分类的标题。请注意本类型 文件的XML结构与第一种类型结构中节点和属性名称所表示的语义是不

8、同的。 在folder节点下包含很多个file节点，它们分别表示每个图片文件的信息，file节 点包含的文本为每个照片的完整名称。我们还可以根据需要为file节点增加各种 属性，如图片大小、说明等。 在pics相片目录下的每个子文件夹中都包含一个同名的pics.xml文件，文件中存 储着当前子目录所有照片的信息。同时每个子目录中还应保存增加了前缀（t） 的同名缩微图，jpg格式，大小为50*50像素左右。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.2 相册结构构建24.2.1 构建宏观结构从宏观来审视页面结构，整个页面显示为2行3列的布局样式。从HTML结构层 分析，所有HT

9、ML代码都包含在包含框中，其下又嵌套三个子 包含框：（标题块）、（导航块）、（主体区域块）。在构建基本结构时，读者应该注意两个问题： 第一，结构应简洁、明晰。避免任意使用ID和class属性，如果借助包含选择器 能够实现样式控制的，就不要定义ID属性。class属性作为类样式专用属性一般 也不要乱用，除非页面中有两个或更多的元素拥有相同的样式，才可以考虑使 用类样式来设计，否则就不要使用。 第二，使用结构标签一定要注意语义性。基本结构一般使用div元素即可，但是 如果内容的语义性比较明确，不妨选用对应的元素，如标题、列表、数据表 格、段落文本等。样吧视频教室（ ）网页制作与网站开发从入门到精通

10、配套视频24.2 相册结构构建24.2.1 构建宏观结构样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.2 相册结构构建24.2.2 细化微观结构相对于宏观结构，微观结构是最考验人的，设计的随意性会比较大一些。很多 时候在设计页面微观结构时，你可以用这种方法设计，也可以那样方法设计。 只要不破坏页面结构和以及内容的语义性基，都无可厚非。 实际开发中，不少设计师习惯于通过页面效果来决定所要设计的微观结构，实 际上这种习惯是要不得，也不建议读者采用。当然，你可以在适当的时候顾及 页面表现更方便，但是不能够本末倒置。第一，行内文本不要包含过多的元素。 第二，列表信息建议使用列表结构，使

11、用列表结构时应注意有序列表、无序列 表和定义列表之间的区别，不能够随意选用。 在列表项中，超链接应该包含在li元素内，不建议在a元素中再包含其他元素， 特别是一些块状显示的元素。很多设计师喜欢在a中嵌套多个元素来设计特效 样式，这是足取的。 对于行内信息使用行内元素即可。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.2 相册结构构建24.2.2 细化微观结构相对于宏观结构，微观结构是最考验人的，设计的随意性会比较大一些。很多 时候在设计页面微观结构时，你可以用这种方法设计，也可以那样方法设计。 只要不破坏页面结构和以及内容的语义性基，都无可厚非。 实际开发中，不少设计师习惯于通

12、过页面效果来决定所要设计的微观结构，实 际上这种习惯是要不得，也不建议读者采用。当然，你可以在适当的时候顾及 页面表现更方便，但是不能够本末倒置。第一，行内文本不要包含过多的元素。 第二，列表信息建议使用列表结构，使用列表结构时应注意有序列表、无序列 表和定义列表之间的区别，不能够随意选用。 在列表项中，超链接应该包含在li元素内，不建议在a元素中再包含其他元素， 特别是一些块状显示的元素。很多设计师喜欢在a中嵌套多个元素来设计特效 样式，这是足取的。 对于行内信息使用行内元素即可。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.3 相册布局与样式设计相对于结构，页面布局和局部样

13、式设计要复杂一些，需要读者耐心加细心，否 则所设计的作品会很毛糙，看起来就会缺乏美观，这与工厂中产品的后期打磨 是一个道理。当然在CSS技术过关的情况下，网页布局和设计更多的是需要你 的艺术功底。创意无限，所以本实例设计效果也仅作为学习参考，目的是帮助 你掌握CSS技术，在艺术上就无法进行探索了。 本实例样式设计分两步走：第一步，先以静态页面的方式来设计作品，这样就 可以更容易撑起页面框架和描绘大致页面效果。第二步，根据JavaScript动态 显示数据的需要，后期补加和完善页面样式设计。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.3 相册布局与样式设计24.3.1 基本布局

14、思路整个页面的布局比较简单，其呈现的效果为2行3列，而根据结构层次的实际设 计效果，页面应该是一个3行2列式布局效果（如图24.5所示）。在显示时，标 题行和导航栏行由于区分度不大，故在视觉上显示为一行效果，而区域由于左右两列区分明显，故在视觉上显示为两列效果。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.3 相册布局与样式设计24.3.1 基本布局思路在设计时，可以考虑让标题行包含框（）和导航包含框（）流动布局，即让它们以默认状态自然显示。而和子包含框则以浮动布局，以实现并列显 示。 考虑到精确布局问题，在和子包含框 中以绝对定位布局来控制侧栏导航图标和缩微图的显示，因此还应

15、该在这两个 子包含框中定义包含块，以便设置定位坐标（有关包含块说明可以参阅第 12.3.3小节内容）。 另外借助伪劣布局设计和子包含框等 高显示（有关伪劣布局说明可以参阅第12.4.3小节内容）。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.3 相册布局与样式设计24.3.2 设计默认样式和基本框架在编写样式表时，建议读者养成好的代码编写习惯。例如，样式表一般先统一 页面标签的默认样式，这样可以避免了重复设计相同的样式。样吧视频教室（ ）网页制作与网站开发从入门到精通配套视频24.3 相册布局与样式设计24.3.3 局部样式设计在编写样式表时，建议读者养成好的代码编写习惯。例如

16、，样式表一般先统一 页面标签的默认样式，这样可以避免了重复设计相同的样式。 第一，标题透明效果的设计。在设计中，考虑到标题字体比较大，如果颜色过 重，会分散浏览者的注意力，故在这里以半透明的效果设计。第二，分类导航栏中（页面左侧）导航图标与说明文字的重叠设计。 设计思路：让包含框内的每个div元素浮动显示，并清除 浮动，禁止并列显示，实现单列显示效果。同时定义该div元素为包含块，实现 span元素绝对定位，从而精确固定在导航图标的右下角。第三，使用CSS技术来模拟鼠标移过缩微图时，能够自动浏览大图。这是CSS 的一种特效，它主要利用绝对定位的方法来设计当鼠标移过缩微图时，放大缩 微图显示并精确定位到预