第五章-Plone外观风格定制.docVIP

Plone外观风格定制 用 Plone 做一个站点，往往需要定制站点的外观风格，而不希望千篇一律地使用 Plone 默认的外观。本章将展示如何使用 Plone 定制个性化的网站外观。你将了解到Plone外观定制的原理、操作方法、内部结构和一些具体的实例。 另需说明的是，有些书中强调这部分工作不能叫做定制皮肤，而应称为定制 Plone 的主题(Theme)。这是因为，Plone的皮肤定制有很多方式，有的需改动模板和增加一些脚本，但本章中介绍的是外观风格定制，不涉及开发的内容。 对于网站前台开发人员，只需要掌握基本的 CSS ，通过本章的学习，就可以轻松地定制 Plone 的风格外观。如果你想对Plone皮肤进行更多的改进，你可以结合后面《Plone脚本开发》章节的学习就可以做到。 本章学习重点： 认识Plone皮肤 了解Plone皮肤基本原理 深入学习Plone皮肤定制 结合案例，定制Plone的外观风格 5.1???了解Plone皮肤 皮肤是内容之上的一个视觉上的包装，它也可能包括和视觉表现直接相关的少量逻辑部分。要生成用户看到的样子，皮肤有很多元素，包括静态的，如图片；和动态的，如脚本。 一旦安装完Plone，就会看到一个缺省的皮肤。这个皮肤是绝大多数用户所熟悉的，也就是你在 和其他网站上可看到的那个带着简捷的浅蓝色和绿色的用户界面。但是Plone未必一定要在外观上千篇一律，或者依稀可以认出是一个Plone站点；其观感 全然取决与你。你可以选用已有皮肤来随意整合出你想要的新皮肤给Plone。你可以仅做少许修改或者给出一些较大的改动，【Plone空间】 就是个例子，尽管它还是有着类似的Plone外观。 如果将一个Plone站点进行完全的定制，你甚至将很难识别出是否是Plone站点。在 /about/sites 中，有一个Plone网站实例清单，他们大都有非常个性化的定制外观。 Plone网站能够轻松地在多个皮肤中切换，提供给用户不同的皮肤。很多网站在内部管理时仍然使用Plone的标准界面，这个界面功能强大而且很灵活，他们能很方便的添加和编辑内容；但与此同时，他们提供了一个完全不同的外部最终用户界面。 5.2???快速示例 下面，对常用的Plone网站定制操作先做一个快速的介绍。 5.2.1???更换标识图片(logo) 最常问到的问题是：“我该如何改变网站的左上角的标识logo？”，可如下操作。 【例 5.1】 更换logo的操作步骤 在ZMI中的 portal_skins 中，进入 plone_images 在清单中找到logo.jpg，单击进入 【图 5.1】 找到logo.jpg，开始定制logo 如上图 5.1 ，点击 Customize (定制)按钮 使用浏览表单，上载一个新的图片，点击 Upload ，完成上载，如下图 5.2。 【图 5.2】浏览上传图片，定制logo 这样，回到Plone界面，使用 Ctrl-F5 刷新浏览器，这个logo图片已经更改了。十分简单。 5.2.2???调整字体显示 默认的Plone的字体大小不适合中文显示，需调大些。 【例 5.2】 调整字体显示的操作步骤 在ZMI中的 portal_skins 中，进入 plone_style 在清单中找到 base_properties 对象，进入 base_properties 对象，如下图 5.3 。 【图 5.3】 base_properties对象 点击 Customize (定制)按钮 修改属性值: fontBaseSize : 75% fontSmallSize : 95% 保存后回到Plone界面，中文的显示字体大小就符合中文显示了。 base_properties 中还可对字体颜色，边框等设置，下表中对 base-properties 中的属性有具体说明： 【表 5.1】 base_properties 中属性说明 属性 说明 logoName logo的名字（通过更改这里的名字，也是定制logo的另外一种方法） fontFamily 备选字体族 fontBaseSize 基础的字体大小，控制整个Plone的字体 fontColor 字体颜色 fontSmallSize 小字体的大小 backgroundColor 背景颜色 linkColor 链接颜色 linkActiveColor 激活链接颜色 linkVisitedColor 访问过的链接颜色 borderWidth 边框宽 borderStyle 边框风格 borderStyleAnnotations 注释的边框类型 globalBorderColor 全局边框颜色 globalBackgroundColor 全局背景颜色 globa