第1章   引言

1.1 改版目的

为了配合DNF第五章新版本上线，并改善DNF官网的用户体验和功能，DNF开始了新的官网改版行动。

本次改版主要优化了页面结构布局，增加一些新功能和新板块，提高页面加载速度，改善用户的细节操作体验，为用户带来新的视觉感受。

更加华丽的介绍，请参见http://games.enet.com.cn/article/A1120100126050.html

1.2 官网主要调整

本次官网改版，主要有以下四个方面的调整。

首页增加赛事信息板块：随着DNF赛事的日益增多，为了方便玩家了解查询当年的各项比赛事宜，在官网显著位置添加了赛事信息板块。

首页增强游戏资料板块：为了新手用户更快的了解游戏，增加了游戏资料板块内的分类，增加了各种快速通道链接。

壁纸页面增加按日期排序的列表：旧版壁纸的浏览方式无法适应日益增多的壁纸，所以修改为将壁纸的预览图按月进行排序显示，每页显示5个月，列表顶部为最新三张壁纸的大图预览。

下载页面增加补丁搜索功能：方便那些知道自己客户端版本的用户更快的找到需要下载的游戏补丁，支持搜索框输入提示。

新闻列表页增加页卡：为了方便用户在新闻列表页对不同类别的新闻进行切换，增加了页卡功能，用户能更加容易的查看某个类别的新闻。

第2章   为何加载速度不够理想

2.1 疯狂的HTTP请求

2.1.1 什么是HTTP请求

HTTP请求是从客户端到服务器端的请求消息包括，消息首行中，对资源的请求方法、资源的标识符及使用的协议。我们打开网页，网页加载图片、FLASH、JS脚本、CSS文件都会产生HTTP请求。

2.1.2 过多的HTTP请求会影响啥

HTTP1.1规范建议浏览器从每个主机名并行下载两个文件，每个文件都会经历连接、排队、等待响应以及接受数据的过程。

图2-1 HTTP请求情况

通过上图会发现，请求文件的时间很大一部分消耗在了排队和等待响应上，真正下载的时间是很小一部分，减少请求的数量就能减少响应时间。

所以，HTTP请求数量过多，会严重影响页面的加载速度。尤其是JS文件请求，会阻塞其后面内容的呈现，同时会阻塞对其后面文件的下载，直到脚本加载完毕。

2.2 夸张的下载量

2.2.1 华丽的群图

对于游戏网站，华丽而风骚的设计产生最直接的结果是大量的CSS背景图和庞大的下载量，在下载这些图片的同时影响了页面的加载速度。

另外对于官网大量的广告图片，不仅产生大量HTTP请求，而且下载量也是不可小视的。直接加载广告图片会导致页面加载缓慢。

减小图片的体积可以减少接收图片的时间。

2.2.2 冗余的代码

重复的JS和CSS代码，复杂的HTML结构，多余的空格、制表符、换行符、注释等等，都增加了文件的体积，影响了下载的速度。

阅读全文

看到土豆首页中，左右背景延展不同，不知怎地，受到了些许打击。自己琢磨了一夜，今天继续纠结，不过总算想出了些办法。

下面用到的xhtml都是相同的

xhtml：
<div class="bg1"></div>
<div class="bg2"></div>
<div class="wrapper"></div></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>


1、首先想到了还是老式生硬的办法：js处理。
js处理很笨的原理，自然是在页面载入（onload）和浏览器尺寸改变时，自动修改左右2个div，bg1、bg2的尺寸了。代码如下：

css：
* { margin:0; padding:0;}
#bg1 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; left:0; top:0; height:100px; overflow:hidden;}
#bg2 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; right:0; top:0; height:100px; overflow:hidden;}
.wrapper { width:1000px; margin:0 auto; background:#FFF;}

JS:
function ss() {
var w = document.body.clientWidth;
if(w > 1000) {
document.getElementById('bg1').style.width = document.getElementById('bg2').style.width = (w - 1000) / 2 + 'px';
}
else {
document.getElementById('bg1').style.width = document.getElementById('bg2').style.width = 0;
}
}
if (document.addEventListener) {
window.addEventListener("load", ss, false);
window.addEventListener("resize", ss, false);
}
else if (document.attachEvent) {
window.attachEvent('onload', ss);
window.attachEvent('onresize', ss);
}


2、想想是不是css也能解决这样的问题，继续纠结，总算来了点感觉，从三列排列入手，慢慢想到自动宽度的问题，慢慢问题也得到解决，代码如下

css：
* { margin:0; padding:0;}
#bg1 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; left:0; top:0; z-index:-1; height:100px; width:50%;} 其中width:50%很关键，这样能保证在不管什么尺寸下，都是左右排列
#bg2 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; right:0; top:0; z-index:-1; height:100px; width:50%;}
.wrapper { width:1000px; margin:0 auto; background:#FFF;}

综合来说，自然第二种方法简单易行。以前一直以为左右背景一定要一样才行，现在看来，还是我们没开动脑筋。:-)

png透明针对IE6一直是件挺麻烦的事情，使用的方法也是各有不同，大多的原理是用IE的滤镜来解决的。

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )

enabled : 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。true | false true : 默认值。滤镜激活。
false : 滤镜被禁止。
sizingMethod : 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。 crop : 剪切图片以适应对象尺寸。
image : 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。scale : 缩放图片以适应对象的尺寸边界。
src : 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。

现在一般在使用的方法有一下几种：

阅读全文

    《QQ西游》是腾讯2009年即将推出的一款华丽的3D Q版MMORPG。以中国四大经典名著《西游记》为蓝本，通过气势恢弘的场景，生动唯美的人物，缤纷炫丽的技能，融入经典的上天入地七十二变以及降妖除魔八十一难，勾勒出一个胜于西游的取经历程。

访问官网请点击:http://qqxy.qq.com 

对于这款游戏的包装设计是怎么思考的？

1、了解西游历史时代背景：西游发生的年代是唐太宗贞观元年，年仅25岁的玄奘取经线路图青年和尚玄奘带领一个弟子离开京城西安，只身到天竺（印度）游学。贞观十九年（645年）玄奘回到了长安，带回佛经657部。唐太宗治国年间，社会秩序安定，经济繁荣，历史上称为“贞观之治”。

阅读全文

腾讯游戏最新代理韩国网游《QQ仙境》是一款Q版横版动作游戏，其可爱的人物及小怪物形象深受玩家追捧，封测期间的相关宣传照片拍摄工作于11月末在杭州进行，我们与项目组一起前往配合执行方拍摄，进行相关推进和监督工作。

出发前接到拍摄计划，大概内容为：

时间：2009年11月28日-29日

拍摄对象：（代言人）李佳妮；（coser）XX动漫社

拍摄内容：（棚景）coser装备照，节日篇；（外景）校园篇，白领篇，家居篇……

如计划所写，在2天内拍摄多造型棚景和多主题式的外景，时间极为紧张，加上异地拍摄对场地，模特，工作人员等条件的把控都具备一定难度，前期必须准备充分。

阅读全文

  《御龙在天》是由腾讯游戏琳琅天上工作室自主研发，以拯救乱世为背景，兼具厚重写实的游戏画面效果华丽流畅的技能特效的3D大型国战网络游戏。预告站的工作已经告一段落，下面就这一阶段的工作做一个小小的总结。

一、前期准备工作
  早在设计工作开始的前一月御龙在天预告站的项目就已经开始，以收集相关资源，提炼游戏特色、确定预告站风格为主。在对项目组的风格需求分析和游戏素材的理解之后，预告站整体风格概括说来便是“王”与“战”，同过对这两个字的诠释来呈现游戏
“万人国战”、“攻城略地”、“华丽技能”、“史诗副本”等游戏特色。因此预告站的风格定为：
  1.遵从写实风格原画，能体现游戏世界观、细腻丰富的游戏内容前瞻和强对抗国战风格。
  2.写实厚重的宽屏电影感，着重表现细腻的金属质感和古典元素
  3.宏大的战场感觉

二、预告站设计的提炼
  在此期间进行了多种风格与形式感的尝试，最终提炼如下：
  1、颜色：战场的黑色；烟火的红色、灰色；盔甲的金色，整体以饱和度较低的暗色系为主。
        

2、质感：金属的厚重、石纹的斑驳以及做旧的卷轴无疑是渲染“王者”、“国战”、“史诗”最恰到的质感。
3、ui提炼：游戏能本身能提供的ui元素不多，便尝试着从给出的游戏形象的素材里提炼出表现游戏特色的ui

阅读全文

2009腾讯游戏嘉年华10月17、18日在上海正大广场华丽登场，这是腾讯游戏独立举办的一年一度的大型线下玩家盛典，从产品数量、游戏的现场体验、专业的Cosplay表演，超值的周边礼品售卖、激动人心的全国赛事等各个环节，较去年盛典相比更完善、细化，已成为国内游戏活动的一次视觉饕嚏，吸引着线下玩家的关注与追捧。作为次此嘉年华的工作人员参与其中非常荣幸，TGIDEAS团队在展会的平面、视频等方面做出很大支持，也感受到此盛典中活动策划的专业度。在活动现场的火爆人气中，更体会到广大玩家对腾讯游戏产品的喜爱度与忠诚度。

阅读全文

  《御龙在天》是由腾讯游戏琳琅天上工作室自主研发，诚意奉献的3D大型国战网络游戏，拯救乱世为背景，采用国际领先的网络游戏研发技术。带来最厚重写实的游戏画面效果华丽流畅的技能特效，带给玩家震撼的游戏体验。
  《御龙在天》官方预告站已于2009年10月21日17:00正式开放。官方预告站地址：http://yl.qq.com

阅读全文