为网站穿上“奥运装”

站长空间

北京奥运,网站同庆!行动起来吧!让奥运风吹进个人网站。让我们来探索一下,如何为自己的网站穿上“奥运装”——可以将网站或者博客改为奥运风格、添加一个奥运加油频道,甚至还设置一个奥运会赛程表……只需几步,就可营造奥运氛围,让自己的网站也来“为奥运加油!”

简单步骤 首页变身奥运风格

为了庆祝奥运会的到来,各大门户网站都在首页添加了火红的头部背景,在浏览网站时能感受到浓厚的奥运氛围。其实要实现这一效果并不难,下面,我们就教大家怎样为自己的网站或者博客添加奥运背景风格。

第一步:准备背景素材

门户网站实现的效果,虽然看起来很复杂,但其实是通过添加一张红色渐变的图片完成的。我们可以通过网络寻找素材,也可以通过Photoshop或其他图片处理软件进行制作。

素材的制作方法是,在Photoshop软件中新建一个宽度为1000像素,高度为400像素,分辨率为72像素,颜色模式为RGB的8位的图片文档。而后在左侧的工具栏中选择“渐变工具”,设置从左至右的颜色。我们既可以像大多数网站那样设置深红到浅黄色的渐变,也可以按照自己的喜好对颜色渐变任意进行调整(图1)。

31-f13-1-4.jpg

进行渐变设置后,还要在图片素材上进行花纹等添加,可以是奥运图案或者是文字等。全部设计完成后,将它保存为png格式的文件即可。

小提示:Fireworks等图片制作软件同样可以制作类似的素材,操作方法大同小异。不过需要提醒大家的是,很多奥运的标志没有经过授权,并不能使用,所以在挑选图案的时候需要注意这点。

第二步:上传JavaScript文件

将图片素材准备好之后,接着上传图片显示需要的JavaScript源代码,由于该代码过长,我们提供了直接下载。需要提醒大家的是,本例中用到的所有图片素材和源代码,在压缩包中都有提供。(下载地址:http://www.shudoo.com/bzsoft/)

将下载到的flash.js文件,用FTP软件上传到网站任意目录即可。同时将刚刚制作好的素材图片也放置于上传的文件夹images中。

第三步:修改网站源代码

用网页编辑软件或者记事本打开需要加入奥运效果的文件,既可以修改网站首页,也可以是任意想放置的网站页面,在网页源代码中的和标签中上面加入以下代码:

〈SCRIPT src="刚才上传的目录/ flash.js" type=text/javascript〉〈/SCRIPT〉

〈style type="text/css"〉

#reStyle {DISPLAY: block; RIGHT: 6px; BACKGROUND: url(/aoyun/images/cl_mj_001.gif) no-repeat 0px 0px; OVERFLOW: hidden; WIDTH: 18px; CURSOR: pointer; POSITION: absolute; TOP: 6px; HEIGHT: 43px}

.RedStyle {BACKGROUND: url(/aoyun/images/背景图片名称.png) #fff no-repeat center top}

〈/style〉

需要注意的是,在上述代码中,需要按照实际情况修改“刚才上传的目录”和“背景图片名称”等参数。

接下来在网页代码的〈body标签后面加上 "class=RedStyle",这行代码要直接加在body标签中间,也就是〉符号的前面。

第四步:设置可关闭功能

大多数网站在设置奥运风格时,并没有提供关闭背景效果的按钮。但对于一些不喜欢这类风格的浏览者来说,我们还可以设置一个可关闭的功能,这样不仅更便于访客浏览,还最大限度地给了浏览者自由,增强了用户体验。

要设置关闭功能,直接在同样网页的源代码中加上压缩包中提供的关闭代码即可:

小提示:在修改网页代码前,需要先将网页进行备份,以免发生错误不能恢复的情况。如果使用的是CMS网站管理系统,则需要直接在站点模板文件中进行修改。

轻松设置 添加奥运赛事日程表

现在正是奥运进行时,什么最能牵动观众的心?当然是奥运会的各项比赛了,如果能够在网站或者博客上显示奥运会的详细比赛日程,既能够方便自己,最主要的是可以让浏览者方便地获取奥运赛程信息。

这里我们推荐这个使用谷歌日历制作的奥运日程表,谷歌日历不仅提供了第三方调用功能,可以将其调用到任意网页,还提供了RSS以及Ical输出。

在网站或者博客加入这个日历应用后,点击每个奥运项目会显示具体的比赛时间、地点以及类型等数据。另外最为实用的是,该日程表会随着时间推移自动显示当天的赛程,无须再另外进行设置。

有三种调用方式可供选择,包括按照每天、每周和月份的方式进行选择。

日期方式赛程调用(图2):

31-f13-1-6.jpg

〈iframe src="http://www.google.com/calendar/embed?showNav=0&showDate=0&showTabs=0&showCalendars=0&mode=AGENDA&height=300&wkst=1&bgcolor=%2300cccc&src=mvnlf93vqvvgqvg7qvjjut9v28%40group.calendar.google.com&color=%2329527A&ctz=Asia%2FShanghai" style=" border:solid 1px #777 " width="300" height="300" frameborder="0" scrolling="no"〉〈/iframe〉

其中width="300" height="300"分别表示调用对象的宽度和高度,我们可以任意对这两个数值进行修改,以便其大小能够适应需要插入的网站页面。

另外我们还可以通过按照月份和每周的方式进行预报,其他两个代码均在压缩包中提供。这三种方式各有优缺点,对于博客来说,可以选择第一款小型的按照每天方式进行日程预告的代码,而其他两款所占页面较大,则可以放置于整个网站页面中,如加入到专门的奥运赛事日程专题页面中。

奥运加油 设立万人签名频道

很多大型网站都建立了自己的奥运频道,但是对于个人站长来说,增加一个奥运频道费时又费力,往往心有余而力不足。这里我们给大家推荐这个简单添加网站奥运祝福频道的方法,可以为自己的网站快速建立一个奥运祝福分频道。不仅能调动网友的积极性,诸如推荐给好友等功能,还能通过口碑传播为网站带来意想不到的流量。

第一步:注册签名频道。

打开www.2008.org网站,点击左侧的“申请”按钮,输入所要申请频道的网站名称和地址,以及要设置的频道二级域名,如2008.你的域名.com,该域名同时也是以后管理签名频道所使用的用户名。

第二步:网站域名解析。

而后进入网站域名注册商提供的DNS解析管理后台,添加一条CNAME记录,将值设置为2008.chinaz.com,TTL值设置为3600,域名则输入刚才设定的二级域名,如刚才设置的是2008.你的域名.com,这里输入2008即可。

资料填写完成并提交后,等待域名解析生效,一般的域名DNS解析需要几分钟到24小时不等的时间。在浏览器中输入刚才设定的域名,如果已经能够访问则说明设置成功。

第三步:设置访问参数。

使用域名和刚才设定的密码登录频道管理后台,在设置面板中可以对栏目各项菜单进行添加设置,还能够在这里选择适合的Banner放置图片于网站上。

点燃激情 整体更换论坛风格

相对于简单的添加奥运挂件等修改,对于社区类网站来说,还可以直接更换奥运风格的模板。Discuz!社区论坛系统是应用较为广泛的论坛程序之一,目前大多数网站论坛都是使用该论坛程序,所以我们就以该程序进行讲解。另外还有很多主流论坛程序的官方网站也推出了各种与奥运会相关的模板(图3),使用方式也都类似。

31-f13-1-9.jpg
奥运论坛风格

第一步:将2008奥运会论坛风格源文件下载到本地(下载地址:http://www.discuz.net/viewthread.php?tid=1006532),解压缩后将其中的templates\2008文件夹里的文件全部上传到论坛空间的templates文件夹中,而后将3张图片上传到论坛空间的images\Beijing2008文件夹里。

第二步:使用管理员账户登录论坛管理后台,进入论坛管理菜单,在左侧的界面风格菜单栏中选择“导入界面方案”功能,而后将附件中的文本复制粘贴,确认无误后提交即可。

第三步:如果是6.0版本的论坛程序,需要打开css.htm 文件,6.1版本则须打开css_common.htm或css_append.htm文件,在网页代码末尾加入以下代码:

#footer { background: url({IMGDIR}/bj2008.png); },修改完成后,论坛的风格就更换成功了。如果风格模板不能正常显示,则有可能是服务器缓存未刷新的缘故,这时只须在后台更新CSS缓存即可。