设为首页收藏本站

SharePoint爱好者 SharePoint论坛 信任 尊重 共享 互助!

 找回密码
 用QQ帐号注册

QQ登录

只需一步,快速开始

【转载】SharePoint2010的主题

2011-2-19 07:50| 发布者: admin| 查看: 4885| 评论: 0

摘要: 从SharePoint 2003开始,主题就作为一种自定义SharePoint外观的重要选项。SharePoint 2003和2007中的包括一系列开箱即用的主题,可以被网站所有者通过SharePoint UI应用到SharePoint网站。网页设计师和开发人员可以创 ...
从SharePoint 2003开始,主题就作为一种自定义SharePoint外观的重要选项。SharePoint 2003和2007中的包括一系列开箱即用的主题,可以被网站所有者通过SharePoint UI应用到SharePoint网站。网页设计师和开发人员可以创建包含自定义图片及CSS文件的自定义主题。
定制SharePoint 2007主题的一个问题是,网页设计师或开发人员需要创建自定义的CSS,图片和相关的主题注册文件才能实现主题的自定义。而且需要将其部署到SharePoint Web前端服务器的本地文件系统上。这样无疑就提高了主题定制的门槛,因为需要一定的技术知识和对物理服务器的访问权限,所以非技术人员和最终用户很难对SharePoint网站视觉设计进行灵活的修改。
SharePoint 2010也支持主题,但其工作机制已发生很大变化。Miicrosoft对整个主题框架进行大调整的目的之一就是,希望非技术用户能够方便的进行站的视觉设计,并能够通过SharePoint用户界面对主题进行定制。
使用主题全新的主题编辑器可以在"网站设置"下"外观"里的"网站主题"下找到,页面上提供了一个列表框,可以选择某个主题。这和SharePoint 2007里的页面一样,可以看到很多熟悉的主题名称,尽管主题本身已经发生了很大的变化。

现在,我们可以通过SharePoint用户界面选择一个主题,然后定制其字体和颜色。SharePoint 2010主题的一大优点就是更加标准化:
  • 4种控制背景和文字的颜色(深色1[Dark1],浅色1[Light1],深色2[Dark2],浅色2[Light2]),作为该主题的核心色调。这些颜色将作为该主题样式的主旋律,并最大程度的影响网站的整体外观。
  • 6种强调色(accent)可以使您设计的风格更加成熟,允许我们最大程度的控制激活或悬停超链接的颜色,边框的颜色,特定内容的文字颜色(如系统菜单,组标题,标题区等)。
  • 两种字体用于标题和内容元素。
  • 两种颜色用于超链接<hyperlinks>(正常[normal]的和访问过后的[followed])
除了直接提供给用户选择的颜色外,主题生成器会为每种颜色自动生成5种附加色(通过亮变化和暗变化)。 每一种变化所使用的标签为(以强调文字颜色 1 [Accent 1]为例):
  • 强调文字颜色 1 (用户选定的颜色)
  • 强调文字颜色 1 – 最亮 [Accent 1 - Lightest]
  • 强调文字颜色 1 – 偏亮 [Accent 1 - Lighter]
  • 强调文字颜色 1 – 中等 [Accent 1 - Medium]
  • 强调文字颜色 1 – 偏暗 [Accent 1 - Darker]
  • 强调文字颜色 1 – 最暗 [Accent 1 - Darkest]
色彩和色调变化是网页设计师进行视觉设计时的常用技法,常用于边框效果,渐变等。在本文的后面部分,我将演示这些色彩是如何通过CSS文件的方式来引用的。
剖析一个主题SharePoint 2007里的主题是一个由CSS,图片,主题信息文件组成的集合,存放在相对于SharePoint的根目录的下。在SharePoint 2010里,你仍然可以找到2007的主题,历史的原因,仍放在相同的相对目录14\Template\Themes下。
然而,真正的SharePoint 2010主题实际上存放在相对于SharePoint根目录的14\Template\Global\Lists\Themes下。格式也已经发生了很大的变化。主题现在使用Office Open XML的格式进行了打包,变成一个.THMX文件。


THMX文件是一个包含了主题样式XML定义和图片资源的zip文件。 一个主题文件内部结构的完整描述已经超出了本文的范围,你可以参考MSDN上的文章来“创建Office Open XML格式的文档主题”。
主题也可以通过"网站设置"下"库"下面的"主题"来查看,这种方式打开的是主题库。
主题如何用于页面呈现SharePoint 2010关联到CSS的方式与SharePoint 2007大致相同,都是采用了在母版页<HEAD>部分添加控件的方式。
view sourceprint?

1 <SharePoint:CssLink runat="server" Version="4"/>

2 <SharePoint:CssRegistration Name="/Style Library/Custom.css" After="true" runat="server" EnableCssTheming="true"/>

3 <SharePoint:Theme runat="server"/>





虽然我们一直以来都习惯通过标准的HTML<link>属性来在母版页中包含CSS样式表,但是CssLink,CssRegistration和Theme控件可以提供特殊的功能,因此这种方式在2010中继续作为一种在我们的设计中插入样式表关联的推荐方式。这里给出每个控件的简要介绍:
  • <SharePoint:CssLink>控件负责插入SharePoint默认的核心样式表和任何通过CssRegistration控件注册的自定义样式表。
  • <SharePoint:CssRegistration>控件允许注册任何自定义的CSS样式。 实际插入到页面中的<link>是通过CssLink控件完成的。
  • <SharePoint:Theme>控件会检查是否有主题被应用到当前站点,并负责关联到主题的样式表。
    注:由于历史的原因,本控件似乎仍然包含在SharePoint 2010母板页中。对于SharePoint 2010主题,该控件似乎不再是必需的。
还是上面的例子,让我们来看看在没有应用主题时页面输出的<link>:
view sourceprint?

1 <link rel="stylesheet" type="text/css" href="/_layouts/2052/styles/Themable/search.css?rev=13MPCAdDiTOjeBSP8ulMLA%3D%3D"/>

2 <link rel="stylesheet" type="text/css" href="/_layouts/2052/styles/Themable/wiki.css?rev=YwZnjCtjmh%2B5m0%2BZ4o%2Fw%2Fw%3D%3D"/>

3 <link rel="stylesheet" type="text/css" href="/_layouts/2052/styles/Themable/corev4.css?rev=hMUVPfEXdjj0KHpLKexFuA%3D%3D"/>

4 <link rel="stylesheet" type="text/css" href="/Style%20Library/Custom.css"/>




在上面的例子中,我们可以看到通过CssLink控件插入了数个SharePoint自带的样式表。 同时还可以看到,我自定义的CSS也已经输出在最后一行,直接关联到样式库中存储的原始CSS文件。
在应用了一个现成的主题后,我们可以看到,SharePoint修改了输出到页面的样式表关联。
view sourceprint?

1 <link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/search-BBB12040.css?ctag=6"/>

2 <link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/wiki-8D6982C.css?ctag=6"/>

3 <link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/corev4-24A0E46F.css?ctag=6"/>

4 <link rel="stylesheet" type="text/css" href="/_catalogs/theme/Themed/67B9FADD/Custom-37A53504.css?ctag=6"/>




在SharePoint 2007里,应用主题后会在页面的输出中插入一个额外的样式表关联。 该主题中包含的样式将会通过CSS的层叠行为覆盖任何核心样式或自定义样式。
在SharePoint 2010中的行为已经发生了改变。 当一个主题应用时,SharePoint会实时的自动生成该主题的CSS和图片,并将它们存储在应用该主题的站点的_themes文件夹下。
如果我们用SharePoint Designer打开该网站,可以看到SharePoint创建的这个文件夹,其中包含了生成的主题文件。 文件夹名称是一个唯一的数字标识符,该数字是在应用一个新的主题时生成的。

要注意的很重要的一点是,SharePoint已经用主题化后的变体替代了所有原来的CSS关联。在SharePoint 2010里,当生成一个主题时,SharePoint利用嵌入在原先样式表中的指令来生成替换后的样式表。这种自动生成和替换只有在满足以下两个条件的情况下才会触发:
  • 自带的样式表是*主题化(themable)*的。这些样式表实际上可以很容易的通过引用它们的虚目录区分出来,因为它们位于_layouts/2052/styles/themeable目录中。
  • 用于我们的自定义样式表的CSSRegistration控件需要具有 EnableCssTheming=”true” 这一属性。

本文内容由 admin 提供

1

鲜花
2

握手

雷人

路过

鸡蛋

刚表态过的朋友 (3 人)

在 @sharepoint.org.cn 中获取一个免费帐户
注册
检查电子邮件

小黑屋|Archiver|手机版|SharePoint爱好者 ( 苏ICP备11073373号-1  

GMT+8, 2018-1-23 06:04 , Processed in 0.096521 second(s), 23 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部