一生设计

本人最近开始从事游戏推广页设计，之前做页设计。两者之前貌似差别不是很大，推广页设计主要目的是吸引用户点击素材，注册成为游戏玩家，其来源主要是渠道推广平台（游戏资讯门户网站，网盟投放广告….）；而网页设计是根据游戏素材原画（场景、人物等）组合成网站页面然后切图制作成网页。

而实际上游戏推广素材要真正的做到位 还是有点难度的，首先什么样的素材会吸引用户点击呢？从性别上来说，玩游戏的男性略多与女性玩家。根据异性相吸原理，美女素材是最能激发男性体内荷尔蒙的，会忍不住去点击注册看看，到底是什么游戏如此吸引人，什么美女这么妩媚动人，所以美女素材是最能引起用户注册的欲望。

而真正的游戏玩家还要靠游戏内容来吸引他们，这就是第二种原画素材。根据原画素材制作推广页，用户流失会少很多，因为游戏素材就是他们玩游戏里面的内容，注册进去之后不会产生心理落差，这点就比美女素材好。

第三种就是不相关的素材，可能是最新的电影、动画片、电视剧等来的灵感、将当下最热门的话题作为素材，大家都会进去看看发生什么事了，产生话题共鸣。

综上所述，游戏推广目的只有一个，吸引用户进来注册、玩游戏、消费。设计素材以此为宗旨，什么都可以做。天马行空，都可以做，设计无极限。只要在天朝的范围内，就行。

                                               –本人原创  转载请注明

  相信每个站长都会经历选择cms的过程，cms是那些对网络编程语言不是很熟悉的用户的福音，它可以用一种比较简单的方式来管理自己的网站。　一般CMS程序，可以在服务器一键安装。简单配置一下网站的属性，设置一下广告， ctrl+c 和 ctrl+v 复制粘贴几篇文章，一个网站就出来了。现在市面有太多可以方面而现在市面上的cms会不会让你挑的眼花缭乱？而且一旦选择了就不会轻易更换。大家都知道无论更换空间，域名，程序对搜索引擎来说都是非常不友好的。我个人认为：没有最好的cms，只有更适合自己的cms。下面我来说说如果选择适合自己的cms。

      一、网站类型

      无论是门户网站、企业网站、电子上网站还是论坛博客类网站都有自己独特的功能需求。所以首先要从网站的功能性进行筛选。因为对于cms开发者来说，为了在cms界里存活，总会有一些自己独特的优势。对于各种类型的网站都会有一些比较专业的cms，我举几个常用的cms来说。pageadmin、锐商企业cms更适合做企业站。phpcms、php168、dede、帝国等比较适合做门户站。ecshop是应用最多的电子商务的cms，很多cms也带有商城的功能。博客有z-bolg和WordPress。论坛有Discuz和PHPWind。还有一些例如风讯、也都有自己的独特的优势。网站功能的选择其实跟网站类型是有一定关系。例如要做行业门户站肯定是要有采集功能的，以为那么多的信息量不可能手动去发。如果是做博客站那标签模块和订阅功能就十分重要。

      二、cms语言

      主要的程序语言有：asp、.net、php。asp相对简单便捷，修改也方便，被很多站长青睐，但是它的安全性也是最差的。.net是asp的升级版，主要用c#开发，基于windows。而php是开源的语言，所以php的cms较多。主流的cms也是php居多。但是对于站长来说不管是什么语言开发都已经解决了文章发布管理的功能，所以用什么语言并不是最重要的，要看你对什么语言更熟悉，因为网站的制作当中免不了要对程序进行一定的修改该。所以无论选择什么语言的cms都要先去官方论坛上看看自带的模板、插件、教程是否完备，提出的问题是否能被很快的回答。

      三、搜索引起友好度

      例如：生成静态页，生产网站和Google地图、自定URL、绑定二级域、动态调用title，keyword，description等功能名仿佛都已经成了cms必备的功能。有更多方面搜索引擎优化方面功能就可以节省在网站推广中的很多工作。所以在选择cms的时候一定要关注程序针对搜索引擎有哪些功能和优势

      其实选择cms并不难，因为现在很多cms已经做得已经很完善了，基本都已经满足做站的需求。 同样的cms做相同类型的网站还是会有成功和失败，关键还是做站的技巧和心态。希望广大站长不要在选择cms上纠结，用心做好自己的站才是最重要的。

每周的《午间欢乐购》和《周末疯狂购》，已经成为视觉组的固定需求。从开始接触到现在5个月的时间里，思维也和这些小小banner逐渐碰撞出火 花。

前 期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

▲初期上手，按照熊猫同学一贯的通用排版去做。始终坚持白底，可以不用抠图，改变丝带的颜色，做做字体变形。

▲组织上下达命令，不能一层不变，需要改变。但是改变在哪里当时还没揣摩透，暂且做些颜色上的尝试。由清爽变成浓烈。

▲似乎是有那么点想通了，试着做风格上的改变，一次可爱卡通风格的尝试。

中 期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

▲年中清仓，促销必然少不了红色，但是在大夏天用太多红色未免太过浮躁，尝试与蓝色的搭配。总感觉3折吸引不到会员了，1折吧~

▲因为模特的衣服和鞋子的色彩将这次主题定位紫色。个人比较喜欢需求这次的主题，所以很偏心的把心思用在主题字设计上。^_^

▲我只想用这个花花背景玩一下，大家先略过吧= =~

▲荧光粉和黄是经典的促销配色。吐血价放在整个视觉中心。貌似构图上有所醒悟。

近 期~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

▲好久没玩小粉嫩，顺便做个空间感试试。这是我一贯喜欢的甜美感，曾经有段时间刻意避免使用粉嫩，现在重新回归一下。

▲看到需求文案就觉得要cool，现在看来，当时想得太简单，欧美范很不够哪！应该力求简洁大气才对。

▲街拍立马就想到杂志感，需求给的文案是街头达人秀，觉得少了点什么，恩？加上look！才是杂志的范儿。

▲秋天到了，很庸俗的用了叶子和棕黄色系。个人对模特MM和旁边的箱子很喜欢，秋天是个该拖着箱子去旅行的季节。

▲在懒惰思维中继续挣扎，还是叶子，还是棕黄色系，唯一有变的是背景格子布和缝纫的线头。

▲这次是一次品质感的尝试，因为我找到了一个灰常有品质感的背景。hoho~

▲好玩的主题，所以任何一个元素我都想表现到位，唯一的缺憾是模特的着装不够party。

关于处理此类需求还有几点小建议：
1.这块banner起到页面中页头的作用，商品基本都是用来做点缀的，listing页面里并没有卖，商品不要打价格会误导会员，如果觉得画面空可以加 商品标题。
2.每次根据需求的主题去寻找新的素材，围绕文案制造出一些小情境。放上应季应景的漂亮商品才是最有氛围的！
3.左侧固有的斜角区块可以根据每次排版做些变化，没必要都是丝带+文字。与主标题一起设计整个画面会更融合。

4.在需求文案原有基础上可以稍作调整，加上如“hot”、“至in”、“3折”、“look”、“抢”等煽动性文字。

5.好的素材是可遇不可求的，所以平日的积累才是至关重要的。

用心去设计，大胆的玩设计，朝着你感兴趣的设计点出发，寻求banner制作中的变化，让每个banner都是你独一无二的心思！

文章来源：http://ued.alimama.com/

网页设计师速查手册大全，网页设计资料，网页设计手册.

在网页设计师速查手册大全（上）中，介绍的主要是 Web 开发者常用速查手册，本文将着重介绍 Web 前端设计者常用速查手册。其中涉及颜色速查表以及 Adobe 众多设计工具的速查手册。

Color Codes

RGB Hex Colour Chart

这张 RGB 16进制颜色速查表刚好可以打印在整张 A4 纸上，包含216种所谓的 Web 安全色。下载（PNG | PDF ）

Color Reference Guide （配色表,下载 PDF ）

Web Safe Color Chart （Web 安全色,下载 GIF ）

HTML Colors Cheat Sheet (预 览 | 下 载 )

RGB Values for Macbeth Color Checker （Macbeth 色卡之 RGB 色值，预览 ）

Dreamweaver

DreamWeaver CS4 Keyboard Shortcuts (PC)

DW PC CS4 版快捷键速查手册，下 载（PDF）

Illustrator

Adobe Illustrator CS4 Shortcuts (Mac – PC )

Adobe Illustrator CS4 快捷键速查表。下载（MAC PDF | PC PDF ）

Indesign

Adobe InDesign CS4 Keyboard Shortcuts (Mac – PC )

Adobe InDesign CS4 快捷键速查表，下载 （MAC PDF | PC PDF ）

Photoshop

Photoshop CS3 Keyboard Shortcut （hotoshop CS3 快捷键速查，下 载 PDF ）

Photoshop CS4 Shortcut Cheatsheets （Photoshop CS4 快捷键速查，下载 MAC PDF | PC PDF ）

Brush Tool cheatsheetush Tool cheat sheet for Photoshop （Photoshop 笔刷速查手册，下 载 PDF ）

Adobe Photoshop Quick Reference Guide （Photoshop 速查手册，下载 PDF ）

Black & White Cheatsheet For Photoshop （如何在 Photoshop 中处理黑白图,下 载 PSD ）

Photoshop Quick reference card (Photoshop 快速参考，下 载 PDF )

Photoshop Lasso Tool Cheat Sheet （Photoshop 套索选择工具速查，下 载 PDF ）

Photoshop Toolbox Reference （Photoshop 工具箱参考手册，全部 Flash 格式教程，直接浏览 ）

Keys for using the Layers palette （层操作快捷键，直 接浏览 ）

Flash

Flash CS4 Keyboard Shortcuts(PC and Mac )

Flash CS4 快捷键速查，下载 MAC PDF | PC PDF

ActionScript 3.0 Top Level Cheat Sheet

ActionScript 3.0 高阶速查手册，下 载 PDF

请参阅

网 页设计师速查手册大全（上）

本文来源：http://www.tripwiremagazine.com/tools/design/40-must-have-cheat-sheets-for-effective-web-designers.html

SQL （Structured Query Language） in one page SQL 语言速查。直接访问

MySQL Cheat Sheet MySQL 速查。下载（PNG | PDF）

XML （eXtensible Markup Language） in one page XML 单页速查手册。直接访问

XML Syntax Quick Reference XML 语法参考。下载（PDF）

SEO 速查手册

The Web Developer’s SEO Cheat Sheet

出自 SEO MOZ 的 SEO 速查手册，包括重要的 SEO HTML 标签，搜索引擎索引的限制，Title 标签语法建议等。下 载（PDF）

本文资料来源：http://www.tripwiremagazine.com/tools/cheat-sheets/front-end-web-developers-toolbox.html

网页设计现在是一个比较热门的行业，随着网络技术的发展，越来越多的人开始学习网页设计。但是在开始学习的时候，感觉一头雾水。我从事网页设计也2年多了，以过来人的身份告诉大家一些学习的方法，希望能帮助大家少走一些弯路。
先来谈谈网页设计的现状（个人观点），网页设计虽然懂的人多，但是真正能算的上是网页设计师的却没有几个。很多公司习惯性的招人时希望招的人既懂网页设计又懂程序。这种人确实是有，也不算少数。但是，我觉得一个真正的网页设计师应该有明确的发展方向，要么以设计为主，要么以程序为主。什么都懂就是什么都不懂。一专多能是最好的，必须要有一方面是专业的。要么程序，要么设计。这主要看个人喜好，如果对色彩，界面比较感兴趣那就以设计为主，如果对程序比较感兴趣，逻辑思维能力比较强，那就一程序为主。因为我直偏向于网页设计的，所以我的主要精力都在网页设计上。
网页设计需要了解div布局CSS，photoshop/fireworks，flash、dreamweaver。这些哪里可以学到呢？

第一，自学。可以自己买本书先了解大概的，再去看视频教程。视频教程的优点就是费用低甚至无需要任何费用就是免费的,只要你懂得如何利用好百度和google就能解决你在学习工程中的任何问题。但是学习的深度就在与个人了，熟语师傅领进门，修行在个人。现在网络上很多的视频教程，在百度和google上搜索：网页设计视频教程 会有很多资源的，可以在线观看也可以下载下来看。 看完后最主要的一点是一定要自己动手实践。这个其实和去培训班培训效果类似，只不过没有那种学习氛围。缺少监督，定力不好的很容易就退却了。
其次，参加培训班。这个虽然要有成本，但是也是最快最先能见成效的。专门去学网页设计，不要学太多了。学的东西多了就杂了，有捡芝麻掉西瓜的可能。还有一点就是态度，一定要坚持下来。在自己觉得好想学的差不多时，可以尝试做自己的第一个个人网站。然后发布。做完第一个个人网站，什么感觉呢？欣喜若狂？面无表情？感觉做的不够漂亮？  没事，这时多去看看优秀的网页设计，从中吸取精华。转化为自己的东西。13sj.com左侧有很多网页设计学习资源、网站链接。网页模板网站、flash资源、酷站赏析、WEB标准资源、专业设计团队、网页设计行业网站：多 欣赏，多看，多练，多做，里面有国内外最好的网页设计模板、最权威的网页设计资讯网站链接。链接资源是本站的精华。

（原创文章，转载请注明）

网页设计注重细节，可以说细节决定成败。有哪些细节呢：
1、浏览者打开一个网页的时间是有限的，一般不超过8秒当打开时能一眼就能发现该网站是做什么的，能在很短的时间内找到他所需要的内容。（注重用户体验）

2、充分利用好网站的视觉表达区，在明显的位置，如网站左上角，正文中间头部，这是大家共认的事实。主要是因为大家都是从左到右来浏览的即：按照用户习惯来设计网站内容。还要考虑在左上方一下加入一个或者两个其他的元素在这个位置让它看起来更明显（注册的链接、搜索的表单、标语等）

3、有效视觉区域：一些视觉跟踪调查研究证明，用户浏览网站的视觉路线类似于字母“F”型。最顶部的位置总是能被看到，中间区域仅有一半被看到，再往下只有左边一部分能被看到。当你在设计的时候不知道将一个内容块放到社么位置的时候，要去考虑一下这一因素。

4、避免设计的东西像广告，有的网站一打开全是大幅广告，会使用户的耐心大打折扣。合理安排广告，大块的文字区域也会被用户所忽略。

5、文字和图片：在设计页面的时候图文并茂，更容易吸引浏览者的眼球。

6、设计元素装饰标题：当用户在浏览网站内容时，通常会寻找标题。在标题上花店功夫装饰下，更容易获得用户的关注。让用户更容易找到小标题。

7.文字排版：合适的文字排版有助于用户的阅读。使用适量的段落、加粗、斜体、引用、下划线或者字母大小写……它们都可以让文字块更有视觉冲击力。引导用户阅读全文，找到他们需要的内容。

8、广告图片的设计：用户在阅读的时候最讨厌突然跳出广告的，所以在设计广告BANNER时，要考虑它的出现，大小，从色彩。人物的面部图片最吸引人，尤其是图片人物的眼睛盯着用户、或者用图片中人物的目光方向，来引导用户关注广告。值得一提的是。漂亮模特更加吸引人。

9、页面透气（熟称留白）。网页设计也是一门艺术，并不是简单的内容堆砌。艺术化的处理手段更加吸引人，在页面恰当的留白，让文字图片在页面上能够呼吸。

–本站原创

百度百 科之所以拥有这么高的权重，最主要的就是该产品在网站的优化方面方面做得非常出色。认真研究百度百科就能从其中寻找到其成功优化的方法予以借鉴，这对网站 的推广以及网站健康持续的发展都有着极其重要的作用。

百度百科不仅仅在百度搜索引擎中拥有很高的权重，在google、搜狗、搜搜等国内知名搜索引擎中也都拥有很高的权重。是什么让百度百科拥有这么高 的权重呢？万能导航网的站长曾经说过：“我们不应该只看别人说什么，更重要的是看别人做什么？”。百度百科之所以拥有这么高的权重，最主要的就是该产品在 网站的优化方面方面做得非常出色。认真研究百度百科就能从其中寻找到其成功优化的方法予以借鉴，这对网站的推广以及网站健康持续的发展都有着极其重要的作 用。

一、从百度百科整体结构来看使用代码复杂，追求自然和谐。

经常在互联网上看到DIV+CSS结构容易被百度搜索引擎抓取，但是我们从百度百科产品中我们可以清楚的看到，百度百科的页面整体结构来看，头部代 码大量的使用了JS、页面中间部分是TABLE和DIV+CSS混合结构。这种混合结构的出现，表明了百度搜索看重的并不是什么代码的尽量简化，相反却是 追求网页的自然和谐。看来我们多年来一直被误导，要知道万能导航网没有采用DIV+CSS结构，无论从收录或者优化排名方面都取得良好的效果，所以站长不 要为自己的网站不是完全采用DIV+CSS结构而耿耿于怀，可以顺其自然，专心做好网站就行了。

二、从页面的头部从头部来看标题精简，忽略了关键词和描述标签的设置

1、百度百科title标题简洁，标题中包含关键词，绝不拖泥带水。

百度百科是百度产品中最成功的一次打造和创意，非常受到谷歌、搜搜、搜狗等搜索引擎的青睐。这就需要我们认真的研究一下其中的缘由。从百度百科的产 品中我们清晰的看到，其title标题非常的简洁，从不拖泥带水，更重要的是标题中包含了关键词。像《万能导航网的传说》《万能导航网源于一个传说》这两 个文章的标题，如果按照百度百科标题的要求，应该是前者更加受到百度的青睐和重视。所以作为编辑在编写文章的时候，不要总是迎合搜索引擎而编辑出冗长的文 章标题来，既要有新意，同时也要适可而止。

2、可以忽略网页头部的关键词（keywords）和描述（description）标签设置。

谷歌为了提高搜索排名的质量，早已经取消了头部关键词和描述。但是百度在给站长的建议中明确地写到：认真撰写网页的标题，要重视网页关键词和描述。 于是站长们纷纷发表相关文章，关键词（keywords）和描述（description）标签设置是如何如何的重要。仔细研究一下百度百科产品，并没有 发现百度在自己最成功的产品中关键词（keywords）和描述（description）标签并没有得到应有的重视，说明了百度赋予这两个标签在搜索排 名中的权重很低，甚至忽略不计。百度的建议只不过是让用户在搜索到这个页面的时候，能够过多的了解他搜索的这个页面而已。我们都知道百度青睐独特内容的原 创，所以收录也比较良好，可是《“万能导航网”吉祥文化的代名词》这篇文章，就因为关键词设置不当的缘故，百度一直不予收录，后来在研究百度百科等百度相 关产品时发现，百度很多产品并没有设置关键词，于是就删除了关键词和描述。结果没过两天就被收录了。这就告诉我们不要太在意文章关键词的设置，因为现在搜 索引擎并不看重这些，设置关键词不但不会给你带去多大的好处，一旦设置不当可能会给你带去不可估量的严重后果，轻则受到惩罚，重则可能网站都会被K掉。

三、从百度百科内容部分来看

1、结构一目了然、脉络清晰流畅

当你打开百度百科的时候，你会发现该产品的每一个页面的内容结构都是非常清晰明了。曾看到过《一份周公解梦新解的研究报告详解》 发现这篇文章拥有很好的排名，认真的比对一下百度百科，就会发现他们拥有一个共同点，都是注重文章中一级标题，二级标题的运用，让用户通过字体大小，粗细 中很容易了解文章的结构，文章要表的思想是什么。在看一下百度告给站长们的建议：百度也只是一个普通的用户，如果用户都搞不清你在说什么，百度也同样不 会。所以在编辑文章的过程中，一定要注意文章的结构清晰。

2、建立索引目录、方便用户阅读

百度百科的页面一般来说比较长，如此长的页面让用户查阅非常不方便，所以百度百科就在该页面构建了相关的目录和描点，这样便于百度百科的阅读。目录 的建立就像是一本书的目录，只要从目录中查找到相关的章节，直接进去阅读，既方便了相关产品的阅读，也大大增强了用户的良好体验。

3、使用优化标签、强调合理优化

从百度百科的产品中我们经常看到《b》《alt》《h》《h3》《a》等标签的大量使用，相反《strong》等css很少使用，这就说明了百度对 这些HTML标签是非常青睐的，如何能够提高网页的排名，在设计网页的过程中，有意识的使用这些标签，是非常有利于网页的排名的。

4、引用参考资料、尊重著作版权

查看百度百科中编辑是，你会发现按钮中有一个“引用参考资料”的按钮，点击这个按钮，会主动弹出一个页面，上面让你填写引用资料的书面来源或者是一 个超级链接。这个引用的出处作用明白无误的告诉我们，百度等搜索引擎越来越重视版权了。在“SEO”百科中，《SEO方案：增加网站反向链接的若干技巧》 标题下的文章是引用万能导航网，所以就在参考资料增加了http://www.wndhw.com/这个链接。百度尊重文章的知识产权，并不是百度的慷慨 大方，而是百度直到现在也深受网站的版权困扰着，保护著作的版权不仅仅保护的是作者的权益，也客观地保护百度旗下产品的权益，只有让站长明白版权的重要 性，才能为打击“李鬼”网站师出有名，这就进一步告诫站长，在转载文章时，尽量做到保护作者的版权，否则在百度打击“李鬼”时就有可能成为打击的对象。

5、强化扩展阅读，增强用户体验

认真研究百度相关产品基本没有和外界交换过链接，没有上面合作伙伴，这并不是百度不重视外部链接，重视的是单向高质量的外部链接。

百度百科增设了扩展阅读的相关栏目，让编辑者可以进一步增加该文章的外延，可以是推荐和词条相关一本书或者一个章节，也可以是一些相关的外部链接， 让用户很轻松的找到相关的外部知识，进一步强化了用户体验。这就无形中告诉站长们，不要总是捂着自己的网站，生怕导出一个外部链接，给别的网站带去流量， 丰富的外延也是增加网站权重的一个重要组成部分。

6、侧重内容完整，篇幅长短不限

从百度百科的文章显示，很多百科因为不断的编辑越来越长，内容原来越丰富，编辑越来越完整。但是我们并没有看到百度百科出现分页的局面。这充分说明 了百度并不在乎文章篇幅的长短，主要侧重于页面内容的完整性。也就告诉我们百度对内容完整性的文章有所偏爱，可能解释不全，篇幅较短的文章收录排名如何应 该说是很难说的。

四、百度百科对链接的优化

1、着重强调站内链接

打开百度百科，你就会发现百度百科所有词条高权重高排名重要因素，就是几乎疯狂的站内链接。整个百度百科之间如同一个密密麻麻的蜘蛛网，既能相互支 持又能更好的传递网站的权重。这就告诉我们，应该切实行动起来，做好网站的内部链接。获取高质量的外部链接相对来说比较困难，但是做好站内链接确实比较容 易的，只要你下功夫。万能导航网开始之初就非常重视网站的内部链接，首先做好网站地图，然后从各个角度尽可能的增加站内的相互连接，犬牙交错会对网站起到 相辅相成的效果，大大增强了网站的整体权重。

2、强调主题内容导出链接相关性。

高质量且与主题相关的导出链接也是非常重要的。

3、合理弱化网站的导入链接。

从百度百科词条的导入链接来看，基本上没有什么导入链接。按照常规做法，大量高质量的外部链接的导入，会提高该页面的关键词的排名，也就是页面的权 重，但是从百度百科来看，并没有发现百度引入大量的高质量的导入链接。这就说明了百度并不是十分在意外部链接的导入。相反，如果短时间内大量导入链接的直 接导入，甚至会影响关键词的稳定，误判为垃圾广告帖子的优化。所以在此奉劝那些想通过论坛群发等留下大量外部链接的站长，一定要要慎重，因为这些无谓的操 作，并不会给你带来权重的提升，只会让你的网站全中降低的尴尬境地。

五、从百度百科的编辑词条服务来看

百度百科通过让用户积极地参与到词条的编辑，这样就能保持网页的时效性和新鲜度，要知道从不更新的网页是百度所不喜欢的。这样无形中产生了两个问 题。

1、通过百度百科的编辑服务，可以保证百度百科网页不断更新。

经常听到很多站长说，百度等搜索引擎会降低修改网页的权重，劝解站长不要轻易改动网页的内容，其实这是一种误解。根据万能导航网SEO专家的跟踪研 究发现：只要保持网页的标题不变，内容的不断修改会使该页面的权重得到有效地提高。仔细研究百度百科就会发现，百科因为有大量用户的不断修改，是网页内容 经常处于变动中，不断更新的网页产生了网站主页的效果，权重的到极大地提高，当然在搜索排名中也得到了良好的体验。

2、通过百度百科的编辑服务，增加了相关页面增强了关键词的相关性。

百度百科每编辑一次，就会出现了一个老的页面，如果编辑N次，就会有N个相同的页面的产生，这些标题相同内容各异并存的页面之间相互联系，从而使该 页面的关键词出现了高度的集中。在创建偷财网的时候曾向万能导航网SEO请教一个问题：“如果标题相同内容不相同的页面并存，是否会降低页面关键词的权重 呢？”，得到的答复是：“只要文章的标题没有改变，内容各异的网页并存，不但不会降低网页的权重，相反会增加网页的权重”，在这里我们已经找到了相关的答 案，推究其缘由可能是网页内容的相关性得到增强的缘故。

3、通过百度百科的编辑服务，巧妙的保持了关键词的标题不变。

无论我们如何的编辑百度百科中的词条，但是标题却没有改变，如此巧妙的布局，是其百度百科立足于不变的境地。

从这些方面我们可以得出这样的结论，只要能够保证网站的标题不改变，我们编辑网页的内容并不会受到百度的惩罚，同时能够保证出现另一个页面更好的。 当然如果标题相同，内容相同的N个网页并存，那就会受到相应的惩罚了。

六、从百度百科展示的htm页面格式来看

什么格式的网页最受搜索引擎的青睐？这个问题的答案各异，万能导航网SEO专家在对搜索引擎认真的研究发现，不同的搜索引擎喜欢的格式是不同的，一 般来说搜索引擎青睐静态的网页远胜于动态网页。对于中文网站来说，百度是流量来源的主流。认真研究百度相关产品，就会发现，百度非常喜欢.htm格式的网 页，详情如下：

1、百度青睐.htm格式的静态页面。

无论是百度百科或者是百度其他产品，显示的页面格式主要以.htm页面存在，而不是html或者其他的形式。追踪万能导航网中的混合页面，就会发现 以htm形式存在的页面远远优于以html形式的页面，以静态形式存在的页面优于以动态的页面。这些研究结果告诉我们，百度青睐的页面格式是.htm页 面。所以在制作网站的时候，认真研究一下，让程序能够生成静态的htm页面。这样在网站的推广中能有占有一席之地。

２、伪装的.htm页面同样受到百度的青睐。

进一步研究发现，百度百科和百度知道等相关产品，很多页面是动态的页面，生成的页面时伪htm的静态页面。从这些细节中可以告诉我们，伪htm静态 页面同样受到百度的青睐。

从上面的两条可以明确的告诉我们，在制作网站中要充分的考虑到网站页面存在的格式，那就是尽可能的生成静态的htm页面格式，如果无法生成静态的 htm页面至少要生成伪htm静态页面。

从百度百科优化技巧的深度分析，可以清晰地看到百度是如何巧妙的优化自己网站产品的，从中得到重要的启示，并逐步落实到自己的网站中，最终巧妙地优 化自己的网站，是自己的网站内容在满足用户的基础上更加流畅的适合百度搜索引擎，并为进一步推广自己的网站发挥着极其重要的作用了。

版权归作者所有，注明文章出处：http://www.wndhw.com/seo/jingyan/baike_201004070.htm

高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小，更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我 们系统地总结一下CSS属性的缩写。

色彩缩写

色 彩的缩写最简单，在色彩值用16进制的时候，如果每种颜色的值相同，就可以写成一个：

1

color：#113366

可 以简写为

1

color：#136

所 有用到16进制色彩值的地方都可以使用简写，比如background-color、border-color、text-shadow、box- shadow等。

盒子大小

这里主要用于两个属性：margin和padding，我们以margin为 例，padding与之相同。盒子有上下左右四个方向，每个方向都有个外边距：

1
2
3
4

margin-top:1px;
margin-right:1px;
margin-botton:1px;
margin-left:1px;

这 四个值可以缩写到一起：

1

margin:1px 1px 1px 1px;

缩 写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同，则可以省掉：

margin:1px;//四个方向的边距相同，等同于margin:1px 1px 1px 1px;
margin:1px 2px;//上下边距都为1px，左右边距均为2px，等同于margin:1px 2px 1px 2px
margin:1px 2px 3px;//右边距和左边距相同，等同于margin:1px 2px 3px 2px;
margin:1px 2px 1px 3px;//注意，这里虽然上下边距都为1px，但是这里不能缩写。

边 框(border)

border是个比较灵活的属性，它有border-width、border-style、border- color三个子属性。

border-width:数字+单位;
border-style: none || hidden || dashed || dotted || double || groove ||
              inset || outset || ridge || solid ;
border-color: 颜色 ;

它 可以按照width、style和color的顺序简写：

1

border:5px solid #369;

有 的时候，border可以写的更简单些，有些值可以省掉，但是请注意哪些是必须的，你也可以测试一下：

1
2
3
4
5

border:groove red;  //大家猜猜这个边框的宽度是多少？
border:solid;  //这会是什么样子？
border:5px;  //这样可以吗？
border:5px red; //这样可以吗？？
border:red; //这样可以吗？？？

通 过上面的代码可以了解到，border默认的宽度是3px，默认的色彩是black——黑色。默认的颜色是该规则中的color属性 的值，而color默认是黑色的。border的缩写中border-style是必须的。

同时，还可以对每条边 采用缩写：

1
2
3
4

border-top:4px solid #333;
border-right:3px solid #666;
border-bottom:3px solid #666;
border-left:4px solid #333;

还 可以对每个属性采用缩写：

1
2
3

border-width：1px 2px 3px; //最多可用四个值，缩写规则类似盒子大小的缩写，下同
border-style：solid dashed dotted groove;
border-color:red blue white black;

outline

outline 类似border，不同的是border会影响盒模型，而outline不会。

outline-width:数字+单位;
outline-style: none || dashed || dotted || double || groove ||
              inset || outset || ridge || solid ;
outline-color: 颜色 ;

可 以缩写为：

1

outline:1px solid red;

同 样，outline的简写中，outline-style也是必须的，另外两个值则可选，默认值和border相同。

背景 (background)

background是最常用的简写之一，它包含以下属性：

1
2
3
4
5

background-color: color || #hex || RGB(% || 0-255) || RGBa;
background-image:url();
background-repeat: repeat || repeat-x || repeat-y || no-repeat;
background-position: X Y || (top||bottom||center) (left||right||center);
background-attachment: scroll || fixed;

background 的简写可以大大的提高css的效率：

1

background:#fff url(img.png) no-repeat 0 0;

background 的简写也有些默认值：

1

background:transparent none repeat scroll top left ;

background 属性的值不会继承，你可以只声明其中的一个，其它的值会被应用默认的。

font

font简写也是使用最多的一个，它也是 书写高效的CSS的方法之一。

font包含以下属性：

1
2
3
4
5
6

font-style: normal || italic || oblique;
font-variant:normal || small-caps;
font-weight: normal || bold || bolder || || lighter || (100-900);
font-size: (number+unit) || (xx-small - xx-large);
line-height: normal || (number+unit);
font-family:name,"more names";

font 的各个属性也都有默认值，记住这些默认值相对来说比较重要：

1
2
3
4
5
6

font-style: normal;
font-variant:normal;
font-weight: normal;
font-size: inherit;
line-height: normal;
font-family:inherit;

事 实上，font的简写是这些简写中最需要小心的一个，稍有疏忽就会造成一些意想不到的后果，所以，很多人并不赞成使用font缩写。

不 过这里正好有个小手册，相信会让你更好的理解font的简写：

列表样式

可能大家用的最多的一条关于列表的属性就是：

1

list-style:none

它 会清除所有默认的列表样式，比如数字或者圆点。

list-style也有三个属性：

list-style-type:none || disc || circle || square || decimal || lower-alpha ||
                upper-alpha || lower-roman || upper-roman
list-style-position:  inside || outside || inherit
list-style-image:  (url) || none || inherit

list- style的默认属性如下：

1

list-style:disc outside none

需 要注意的是，如果list-tyle中定义了图片，那么图片的优先级要比list-style-type高，比如：

list-style:circle inside url(../img.gif)

这 个例子中，如果img.gif存在，则不会显示前面设置的circle符号。

PS:其实list-style-type有很多种很有用的样 式，感兴趣的同学可以参考一下：https://developer.mozilla.org/en/CSS/list-style-type

border- radius(圆角半径)

border-radius是css3中新加入的属性，用来实现圆角边框。这个属性目前不好的一点儿是，各个浏 览器对它的支持不同，IE尚不支持，Gecko(firefox)和webkit(safari/chrome)等需分别使用私有前缀-moz-和 -webkit-。更让人纠结的是，如果单个角的border-radius属性的写法在这两个浏览器的差异更大，你要书写大量的私有属性：

1
2
3
4
5
6
7
8
9

-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;

呃， 是不是你已经看的眼花了？这只是要实现左上角不是圆角，其它三个角都是圆角的情况。所以对于border-radius，神飞强烈建议使用缩写：

1
2
3

-moz-border-radius:0 6px 6px;
-webkit-border-radius:0 6px 6px;
border-radius:0 6px 6px;

这 样就简单了很多。PS:不幸的是，最新的Safari(4.0.5)还不支持这种缩写… (thanks @fireyy)

就总结这么多，还有其它的可以缩写的属 性吗？欢迎大家提出一起讨论。

参考资源

• 常用 CSS缩写语法总结
• CSS Shorthand Guide
• Efficient CSS with shorthand properties
• Mozilla Developer Center:CSS Reference
• CSS Font Shorthand Property Cheat Sheet