神马文学网建立功能强大的自定义Space相册
来源：百度文库 编辑：神马文学网 时间：2024/07/06 19:09:24
Space的内建相册存在以下几个明显的缺点：
v 不支持相片标题和描述的直观显示；
v 无法对相册或相片进行评论；
v 显示速度慢，需要控制进度按钮来加载；
v 无法同时直观地查看所有相片的缩略图（通过RSS方式可以查看相片缩略图，但是当相册相片很多时只能看到部分相片）；
针对以上这些弊端，下面提供了自己建立自定义相册的方法：
1 演示
蓝天、阳光、河水、林荫......好美的大自然，我照得还不错吧^_^
示例相册 华盛顿风光1 华盛顿风光2 华盛顿风光3
点击缩略图片显示完整图片。 点击缩略图片显示完整图片，鼠标在相片内外分别停留一下看看^_^ 点击缩略图片显示完整图片，并可以对该图片进行评论。
华盛顿风光4 夏威夷风光 路
点击缩略图片显示完整图片。 点击缩略图片显示完整图片。 点击缩略图片显示完整图片。
2 概念及基础知识
相册是采用表格布局来展示的。
虽然通过在设计模式下编辑日志比较方便，但如果想实现对相册格式的精确灵活控制，必须采用html编辑方式。本文介绍的方法都是在html编辑模式下进行的。
本部分将介绍与自定义相册相关的html知识，虽然介绍仅限于表格，但我展示的是一些基本概念和方法，对于其他的html语法也很类似，因此如果你想对html编辑举一反三，建议详细阅读。
2.1 表格结构
表格主要是由caption（表示表格名称）、table（表示表格）、tr（表示行）、th（表示标题单元格）、td（表示正文单元格）等html元素组成的，其html结构如下：
2.2 html元素样式
元素的样式可以通过属性或者style进行设置，并且两种方法通常都有互相替代的办法。考虑到浏览器的通用性用属性来设置样式是更好的方式，但用style设置样式可以实现更加灵活强大的功能。在下面的设置中，将同时采用这两种方式。
样式语法如下所示：
样式和属性都支持0到多个，如果不设置某个属性或样式，浏览器将按照缺省值进行显示。
3 代码及扩展
3.1 演示代码
下面这段代码就是实现前面演示效果的html代码：
3.2 主要属性和样式参考
v 主要属性参考
cellspacing（单元格之间的距离）（table）：数值；
background（背景图片）（table）：图片链接地址；
bgcolor（背景色）（table）：颜色代码；
width（宽度）（table，th，td）：数值或百分比；
align（对齐方式）（table，th，td）：left（左对齐）、center（居中）、right（右对齐）；
title（帮助文本）（table，th，td）：鼠标停留时显示的文本；
target（链接目的窗口）（a）：_blank（弹出新窗口）、_self（当前窗口）；
href（资源链接地址）（a）；
border（边框宽度）（img）：数值；
alt（替换文本）（img）：图片加载前和鼠标停留时显示的文本；
src（图片地址）（img）；
v
主要样式参考
font-size（字体大小）：数值；
font-weight（字体粗细）：normal、bold、bolder、lighter；
color（字体颜色）：色彩代码；
border（边框）、border-top（上边框）、border-bottom（下边框）、border-left（左边框）、border-right（右边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；
vertical-align:baseline、top、middle、bottom；
filter（滤镜效果）：具体信息请参考《图片套用滤镜效果》。
v 可惜的是编辑器既不支持table元素的cellpadding（单元格内容到单元格边框的距离），也不支持样式中的padding,padding-left,padding-right,padding-top,padding-bottom属性，因此很难设置表格中的文字边距，本文是采用变通的方法实现的：设置cellspacing；去除单元格之间的边框线；在行之间增加线段。
v 关于HTML元素属性和样式更加全面详细的参考请到《微软MSDN》中查找。
3.3 其他要点
v 相片上载和内建相册的隐藏
相片的上载仍然需要以相册的方式上载，上载完成后，如果不希望显示Space内建的相册，可以在"自定义"-"模块"中删除相册模块，即可隐藏内建相册。
v 获取缩略相片地址和完整相片地址
在"设置"-"存储"页面可以查看到所有相片的缩略图。
在相片上单击鼠标右键选择"属性"，在弹出的窗口中显示的"地址"后的文本就是缩略相片地址。
在文件名称链接上单击鼠标右键选择"属性"，在弹出的窗口中显示的"地址"后的文本就是完整相片地址。
v 单击相片展示完整相片的方式
单击相片有两种展示完整相片的方式，一种是直接链接到完整相片，另外就是为每个相片都分别建立日志。
前者实现起来很简单，直接添加完整相片的地址即可。
后者需要建立日志，但可以保留【相片评论】。
v 留言的保存
可以为每个相册建立一篇日志，也可以为多个相册建立一篇日志，由于日志支持评论，因此也就具有了保存【相册评论】的功能。
如果想保留【相片评论】，就必须为每个相片分别建立日志。
v 置顶或显示在主页
如果不打算在Space主页显示相册的所有相片，只是挂上一个链接，那么可以将相册日志的地址加到某个列表模块的项目中即可；
如果需要在Space主要显示所有相片，甚至希望置顶，那么由于Space总是新发布的日志在最上面，因此相册迟早是要被挤下去的，因此需要经常地删除重发布，使其显示在主页或置顶，但这样带来的问题就是如何保存【相册评论】，建议的方式是将日志的评论行隐藏，就像本空间的置顶日志一样，然后在相册中增加一个留言的链接，链接到留言本即可。
关于手动置顶的内容请参考《爬山虎的Space技巧提高篇》 。
关于隐藏评论行的内容请参考《如何隐藏日志标题和评论行？》。
v 不支持相片标题和描述的直观显示；
v 无法对相册或相片进行评论；
v 显示速度慢，需要控制进度按钮来加载；
v 无法同时直观地查看所有相片的缩略图（通过RSS方式可以查看相片缩略图，但是当相册相片很多时只能看到部分相片）；
针对以上这些弊端，下面提供了自己建立自定义相册的方法：
1 演示
蓝天、阳光、河水、林荫......好美的大自然，我照得还不错吧^_^
示例相册 华盛顿风光1 华盛顿风光2 华盛顿风光3
点击缩略图片显示完整图片。 点击缩略图片显示完整图片，鼠标在相片内外分别停留一下看看^_^ 点击缩略图片显示完整图片，并可以对该图片进行评论。
华盛顿风光4 夏威夷风光 路
点击缩略图片显示完整图片。 点击缩略图片显示完整图片。 点击缩略图片显示完整图片。
2 概念及基础知识
相册是采用表格布局来展示的。
虽然通过在设计模式下编辑日志比较方便，但如果想实现对相册格式的精确灵活控制，必须采用html编辑方式。本文介绍的方法都是在html编辑模式下进行的。
本部分将介绍与自定义相册相关的html知识，虽然介绍仅限于表格，但我展示的是一些基本概念和方法，对于其他的html语法也很类似，因此如果你想对html编辑举一反三，建议详细阅读。
2.1 表格结构
表格主要是由caption（表示表格名称）、table（表示表格）、tr（表示行）、th（表示标题单元格）、td（表示正文单元格）等html元素组成的，其html结构如下：
| 标题第一列的内容 | 标题第二列的内容 | 标题第三列的内容 |
|---|---|---|
| 正文第一行第一列的内容 | 正文第一行第二列的内容 | 正文第一行第三列的内容 |
| 正文第二行第一列的内容 | 正文第二行第二列的内容 | 正文第二行第三列的内容 |
2.2 html元素样式
元素的样式可以通过属性或者style进行设置，并且两种方法通常都有互相替代的办法。考虑到浏览器的通用性用属性来设置样式是更好的方式，但用style设置样式可以实现更加灵活强大的功能。在下面的设置中，将同时采用这两种方式。
样式语法如下所示：
样式和属性都支持0到多个，如果不设置某个属性或样式，浏览器将按照缺省值进行显示。
3 代码及扩展
3.1 演示代码
下面这段代码就是实现前面演示效果的html代码：
华盛顿风光1 | 华盛顿风光2 | 华盛顿风光3 |
|---|---|---|
 |  |  |
点击缩略图片显示完整图片。 | 点击缩略图片显示完整图片，鼠标在相片内外分别停留一下看看^_^ | 点击缩略图片显示完整图片，并可以对该图片进行评论。 |
华盛顿风光4 | 夏威夷风光 | 路 |
 |  |  |
点击缩略图片显示完整图片。 | 点击缩略图片显示完整图片。 | 点击缩略图片显示完整图片。 |
3.2 主要属性和样式参考
v 主要属性参考
cellspacing（单元格之间的距离）（table）：数值；
background（背景图片）（table）：图片链接地址；
bgcolor（背景色）（table）：颜色代码；
width（宽度）（table，th，td）：数值或百分比；
align（对齐方式）（table，th，td）：left（左对齐）、center（居中）、right（右对齐）；
title（帮助文本）（table，th，td）：鼠标停留时显示的文本；
target（链接目的窗口）（a）：_blank（弹出新窗口）、_self（当前窗口）；
href（资源链接地址）（a）；
border（边框宽度）（img）：数值；
alt（替换文本）（img）：图片加载前和鼠标停留时显示的文本；
src（图片地址）（img）；
v
主要样式参考
font-size（字体大小）：数值；
font-weight（字体粗细）：normal、bold、bolder、lighter；
color（字体颜色）：色彩代码；
border（边框）、border-top（上边框）、border-bottom（下边框）、border-left（左边框）、border-right（右边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；
vertical-align:baseline、top、middle、bottom；
filter（滤镜效果）：具体信息请参考《图片套用滤镜效果》。
v 可惜的是编辑器既不支持table元素的cellpadding（单元格内容到单元格边框的距离），也不支持样式中的padding,padding-left,padding-right,padding-top,padding-bottom属性，因此很难设置表格中的文字边距，本文是采用变通的方法实现的：设置cellspacing；去除单元格之间的边框线；在行之间增加线段。
v 关于HTML元素属性和样式更加全面详细的参考请到《微软MSDN》中查找。
3.3 其他要点
v 相片上载和内建相册的隐藏
相片的上载仍然需要以相册的方式上载，上载完成后，如果不希望显示Space内建的相册，可以在"自定义"-"模块"中删除相册模块，即可隐藏内建相册。
v 获取缩略相片地址和完整相片地址
在"设置"-"存储"页面可以查看到所有相片的缩略图。
在相片上单击鼠标右键选择"属性"，在弹出的窗口中显示的"地址"后的文本就是缩略相片地址。
在文件名称链接上单击鼠标右键选择"属性"，在弹出的窗口中显示的"地址"后的文本就是完整相片地址。
v 单击相片展示完整相片的方式
单击相片有两种展示完整相片的方式，一种是直接链接到完整相片，另外就是为每个相片都分别建立日志。
前者实现起来很简单，直接添加完整相片的地址即可。
后者需要建立日志，但可以保留【相片评论】。
v 留言的保存
可以为每个相册建立一篇日志，也可以为多个相册建立一篇日志，由于日志支持评论，因此也就具有了保存【相册评论】的功能。
如果想保留【相片评论】，就必须为每个相片分别建立日志。
v 置顶或显示在主页
如果不打算在Space主页显示相册的所有相片，只是挂上一个链接，那么可以将相册日志的地址加到某个列表模块的项目中即可；
如果需要在Space主要显示所有相片，甚至希望置顶，那么由于Space总是新发布的日志在最上面，因此相册迟早是要被挤下去的，因此需要经常地删除重发布，使其显示在主页或置顶，但这样带来的问题就是如何保存【相册评论】，建议的方式是将日志的评论行隐藏，就像本空间的置顶日志一样，然后在相册中增加一个留言的链接，链接到留言本即可。
关于手动置顶的内容请参考《爬山虎的Space技巧提高篇》 。
关于隐藏评论行的内容请参考《如何隐藏日志标题和评论行？》。
建立功能强大的自定义Space相册
功能强大的制图软件
功能强大的Tasklist命令
Space 简易教程（二十二）—— 有关相册的问题
功能强大的VC6调试器
功能强大的JavaScript引擎--SpiderMonkey
功能强大的 音乐播放器
功能强大的VC6调试器
四个功能强大的翻译网站
四个功能强大的翻译网
OpenVPN：简单、功能强大的VPN软件 ！
功能强大的SendMessage函数 vb编程
OpenVPN：简单、功能强大的VPN软件 ！
操作简单、功能强大的制图软件
操作简单、功能强大的制图软件
功能强大的白芷面膜：轻松美白
2款功能强大的歌曲播放器
操作简单、功能强大的制图软件2
七步让你的免疫功能强大起来
推荐：药效功能强大的芹菜汁
自定义你的 foobar2000
自定义的COleDropTarget
一个PDF短小精悍,启动飞快,而且功能强大的PDF PDF
DIY的核磁共振仪——价格实惠，功能强大 | 译言网