前言
看到论坛很多朋友对如何定制OWA 2007登陆/注销界面比较感兴趣,大家就这个话题也发起了很多帖子,看来爱美之心人皆有之。
尽管OWA2007比OWA2003界面漂亮了不少,但是看久了难免会厌倦。所以今天我就先来抛块砖,和大家分享一下如何DIY我们的OWA界面,希望大家会喜欢!
(站长lianggj曾有一篇针对OWA 2003主页自定义的精华文章,有需要的朋友可以查看如下链接: 《自定义OWA主页》)
操作
1.其实,个性化OWA web界面很简单,本质上是修改如下的一些文件(1个CSS样式文件和9个gif图片):
logon.css
lgnbotl.gif
lgnbotm.gif
lgnbotr.gif
lgnexlogo.gif
lgnleft.gif
lgnright.gif
lgntopl.gif
lgntopm.gif
lgntopr.gif
这些文件位于CAS服务器上的C:\Program Files\Microsoft\Exchange Server\ClientAccess\Owa\8.1.240.5\themes\base目录中。
(注:8.1.240.5这个目录可能会和大家的有所不同,这个和当前Exchange的版本号相同,因为我的Exchange是2007 SP1,所以显示是8.1,
请按照自己的实际情况更换路径,包括更换Exchange的安装路径)
2.为了直观显示各个图片的位置,方便大家对照修改,特贴出如图1的图片:
下载 (45.87 KB)
2008-4-10 09:49(图1)
3.以上的gif文件就不多说了,我想说一下logon.css的作用。它主要定义了登录页、语言选择页和注销页所使用的文本样式、
颜色和背景颜色等。
4.好了,现在可以进入实际操作阶段。将以上的gif图片找到,按照相同的大小和格式使用图像编辑工具设计好自己喜欢的图片
或者直接修改原图片并替换之。至于能设计到哪个程度,得看你的美术天赋了。我的艺术细胞不多,只能在这里向大家献丑了。
其实我主要目的还是想和大家分享一下从技术层面上如何实现我们的需求,要说美工水平自己都不敢恭维自己:(
(注:
a. 在进行所有修改之前,请备份好要修改的文件,如果觉得备份指定文件比较麻烦,可以直接将前面路径中的base目录复制另存一份,
反正这个目录占用空间挺小的。
b. 为了保持整个页面的简单和视觉上的协调,建议对所有图像中的背景使用纯色,这样比较漂亮,别扔砖头!我是外行人在说内行话!
因为Exchange 2007 OWA默认也是纯色,英雄所见果然一般!
5.图片文件修改好后,接下来的工作是修改logon.css这个文件。估计前面的图片设计已经花费了你不少的时间吧,
当你庆幸以为图片改好了、工作快结束了时,我可要泼你冷水了:高兴什么呢?!还早着呢!如果你的审美要求比较高、
如果你是一个注重完美的人,那么修改logon.css这个文件一定会让你头疼不已。
6.前面我已经说过,logon.css它主要定义了登录页、语言选择页和注销页所使用的文本样式、颜色和背景颜色等。
经过前面的修改后,你会发现OWA界面不但没有按照我们预期的想法修改好,反而被我们改得不伦不类了:
自己修改好的图片和OWA自带的默认图片混杂在一起,真是难看得很!其实我们只要简单修改一下这个logon.css文件就可以了。
打开base目录下的logon.css,查找字符串“background: #7f90b1” ,如图2所示:
下载 (136.45 KB)
2008-4-10 09:52(图2)
将#7f90b1替换为你想要的值,如我在这个演示中就将其替换为#f5c38c,大小写无所谓。这个#f5c38c代表的是和前面图片颜色比较配套的橘黄色。
修改完以后,打开浏览器,输入OWA站点的URL测试,此时是不是整体颜色都协调多了?!
(注:
a.此处和后面的查找内容我都用引号引起来了,实际输入查找的时候请不要输入引号。
b.#f5c38c表示的RGB颜色的十六进制数值,每两个数据分别代表着红、绿、蓝三原色。
c.一般用photoshop可以直接取到十进制的颜色数据,然后再可以使用系统自带的计算器或者第三方小工具将其转化为十六进制,
例如十进制的255使用计算器转换为十六进制就是FF。再如255,255,255转换成十六进制就是FFFFFF,也就是代表纯白色。)