艺创空间

哈尔滨合众名车行

fly2021 — Wed, 18 Apr 2012 14:46:16 +0000

哈尔滨合众名车行

依然使用了DD做的PNG透明处理

11个独具创意的网站滑动效果设计展示

fly2021 — Fri, 13 Apr 2012 03:17:13 +0000

图片滑块在展示项目、产品和服务等方面中的使用相当普遍，如今jQuery、Mootools、 Scriptallicious、YUI和Prototype等JavaScript框架可以用轻量的代码来获得和Flash一样的效果，从而可以替换掉 Flash，这也给网站开发人员和设计师创造了很大的创意空间。本文将展示11个独具创意的网站滑动效果设计，希望能给你带来一些设计灵感。

Superlover

Green Campus Guide

Lake Nona

Agence de comminication

20个创新精美的网站页脚设计案例

fly2021 — Fri, 13 Apr 2012 03:15:13 +0000

网站的页脚已不仅仅再是网站底部显示版权信息和附加链接的简单区域了，近年来一个比较有意思的网页设计趋势就是给精美的页面配上更吸引人的页脚。越来越多的设计者已经意识到，一个精心设计的页脚不仅为网站带来额外的视觉效果，而且也能更好的提升网站的易用和互动性。本文中就有20个创新精美的网站页脚设计案例，希望能为设计者们带来创作的灵感。

Seyart Design

WeNew Media

Stand & Ea

Magnifica

Grzegorz Kozak

Groovy Web Design

me & oli

Urban Pie

Twither

Duplos by Ricardo Mestre

Bristol Archive Records Talisman

Graduate Talent Pool

Mom & Popcorn

如何转移或复制WordPress博客：主机空间数据搬家篇

fly2021 — Fri, 17 Feb 2012 07:12:19 +0000

前些天，一个客户要求把一个WordPress外贸企业站原样复制到另外一个空间和域名下，说是之后慢慢替换网站内容弄个中文版。这次网站的迁移非常成功，但是很多问题也是临时才研究出来的，所以在此将一些过程和经验留个资料，也顺便跟大家分享一下WordPress如何搬家，若有更高效的方法也望大家不吝指教。

1.备份旧主机上的数据

在正式开始搬家之前，首先要备份好网站的数据。同时，为了保证在转移过程中不小心更改了备份的数据，个人建议保留两个备份，其中一个备份用于迁移到新主机，另一个备份用于防止第一个备份遭到破坏。

备份的内容包括：数据库里的数据，使用主题，使用的插件，使用的附件（比如在你博客里使用的图片等），相应的配置文件（包括wp-config.php, robots.txt, .htaccess文件等），以及你修改过的WordPress文件等。

这里除了数据库的数据外，其他需要备份的内容都是文本文件，只要你通过ftp或者别的办法，将这些文件下载到本地保存好即可。关于数据库的备份将在另一篇文章中介绍。

2.将数据上传到新的主机

将原来主机上所有的数据备份好之后，下一步就要将这些数据上传到新的主机上去。

除了数据库文件外，其他文本文件都可以通过ftp方式进行上传即可。除此之外，我们也可以首先将要上传的文件压缩为tar文件，然后通过CPanel来进行在线解压缩，或者直接在本地将空间文件压缩为ZIP格式，上传之后在线解压即可，这样相比用FTP逐个上传文件而言可以节约很多时间。

注意，如果有必要，需要对wp-config.php里面的数据库用户名和密码做相应的修改。

3.测试新主机上的站点

将所有的数据文件和数据库上传之后，我们需要对新主机上的站点进行测试。这个时候，我们网站域名的IP还是指向旧的主机，先不要进行更改；我们可以通过在本地设置解析来进行测试。

假设新主机的ip为174.153.123.242，新的网站域名为sample.com，如果你使用的是Windows XP操作系统，使用文本编辑器打开文件

C:\Windows\System32\drivers\etc\hosts

在最后添加一行:

174.153.123.242 sample.com

当然，如果你使用的域名带www，再添一行:

74.53.105.242 www.example.com

这时候，在你的浏览器里输入你的博客的域名，访问到的就是新主机上的博客；你可以查看一下各个功能是否都正常，如果有问题，可以及时进行修正。

此时，别的网友访问你的网站域名，看到的仍然是你旧主机上的站点。也就是说，我们的测试并不影响你的博客正常运行。

4.更改域名DNS，指向新主机IP

如果新主机的站点都已经开始正常工作了，那么我们可以对你的域名修改DNS，让它指向新的主机的IP。

这里有两个小技巧：

第一，测试过程可能需要几个小时或者一两天，跟每个网友自己的习惯有关系。因此，在测试完成后，可以删除数据库，重新导入旧主机上的数据。

第二，更改域名解析后，一般需要几个小时才能生效，并且各地生效时间也不完全一致。因此，域名指向新的IP后，数个小时内仍会有访问者看到的是旧的主机上面的内容。因此，建议在访问人数少的时候，比如午夜时分来进行操作。

到这一步位置，我们基本上就将博客站点顺利地由旧的主机迁移到了新的主机上面，完成了搬家过程。

记住最重要的一条，一定要做好数据备份。只要数据备份好，哪怕中间出了错，我们也可以随时找出解决办法。否则万一迁移过程中出了问题，那就只能空留遗憾了。

如何转移或复制WordPress博客：SQL数据库搬家篇

介绍了WordPress网站空间数据的搬家教程，不过并没有介绍如何进行数据库的转移。因为数据库是一个网站的核心，并且数据库的转移比较复杂，所以现在单独来进行介绍。

WordPress采用MySQL数据库系统。下面就介绍一下如何转移数据库。

1. 注意数据库使用的字符编码

很多用户在升级MySQL过程中，最主要的问题就是中文乱码问题，也就是数据库的编码问题。MySQL是从4.1版本开始引入了数据库编码的概念，这是一个非常棒的功能，提高了MySQL的性能。但是，如果你使用的MySQL 4.1+的版本，则必须注意使用正确的编码格式。

如果你使用的数据库是MySQL 4.1+版本，就可以通过phpMyAdmin整理数据库的编码格式：

2. 使用CPanel或phpMyAdmin导入导出数据库

首先我们来看看如何导出数据库：

然后我们来看看如何导入数据库：

3. 别忘记进行修改wp-config.php配置文件

如果你的数据库从原来的4.0及以下版本，升级到了4.1+版本，那么别忘了修改WordPress的配置文件：wp-config.php。你需要在这个文件里设置数据库所使用的编码格式。

4. utf8_general_ci和utf8_unicode_ci的差别

很多网友都对MySQL里所采用的 utf8_general_ci 和 utf8_unicode_ci 两个校对集感到疑惑，不知道其中有什么区别。百度一下一篇文章对此进行了较为详细的介绍：Mysql中校对集utf8_unicode_ci与utf8_general_ci的区别。

按照上述办法转移数据库之后，大部分情况下，WordPress都可以正常显示中文了。仍然是昨天的老话，无论如何，在迁移网站的过程中，一定要做好备份工作，这样即使出现了一些差错，也不至于无法挽留。

新的企业站

fly2021 — Fri, 17 Feb 2012 05:59:06 +0000

午夜做的- -最近好忙啊··没时间弄这些东西··· 初步效果还行继续一次过稿反正挺简单的

安保网站设计

企业网站架构SEO优化诊断和分析的四个阶段

fly2021 — Fri, 17 Feb 2012 05:46:31 +0000

针对企业网站而言，网站结构是SEO中非常重要的方面，基于产品网站在内容丰富程度上的区别，网站结构的设计也需要根据网站规模的大小来决定，没有一个既定通用的模式。网站结构和通道设计的优劣会直接影响页面的PR值传递、网页排名的提升，还有搜索引擎收录数量和质量等问题。网站架构通俗点说就是网站的结构组成，其组织和实施必须跟内容相辅相成，形成一个有利于SEO优化的网站主体。

第一：选择一个优秀的网站程序平台

做企业网站是为了更好的推广产品，我们在选择建站程序的时候，必须以此为前提去斟酌优劣。当然如果有能力自己做出一个比较安全的文章发布系统，那就最好不过了，不过对于一般的站长和企业而言来说，还是会比较喜欢用成熟的CMS系统或者博客等开源系统，精巧高效而且可以很方便的安装各种免费插件。在这方面，综合多年的观察和建站经验，WordPress是一个相当不错的选择。

第二：根据网站内容和风格选择合适的主题模板

选择好或者做好网站的前台和后台程序后，接下来我们就需要设计我们的模板文件了，这一步我们需要结合我们自身网站的主题，以简约大方为设计宗旨，尽量少的运用大图。然后就是网站的布局，一个好的布局对于我们以后SEO优化可以达到事半功倍的效果。比如首先导航一定要清晰，对于网站下的栏目，一定要在主导航里边都能够充分体现；其次就是网站首页的文章URL布局，把你认为比较重要的栏目文章最新文章列出首页。

以Wordpress做企业网站为例，有资金实力的公司可以制作网站界面效果图，然后找专业人士定制主题。Wordpress主题定制的费用较高，一般都要2000大洋起步，还有一个缺点就是主题制作好之后，很难判断其底层代码的质量如何，是否有利于今后的SEO优化和产品推广。企业网站的外观，其实只要简洁大气、细节精致就可以了，这一点多数价格大约35美元的WordPress企业主题就可以完全满足要求了，企业建站的灵魂是对产品信息的合理组织和直观表现，并在其中融合SEO的理念，时间和精力应该用在这个刀刃上。

第三：网站栏目结构设置和URL路径的优化

当网站设计好，前台和后台对接好之后，就可以进行栏目和站内的URL架构和规划了。首先是设计网站的栏目结构，一般比较合理的网站架构分为扁平式和树形的，扁平式的结构就是所有的页面都放在网站的根目录下，所有的页面都直接跟在主域名之后。

第四：网站关键词和内部链接细节的完善

事实上如果认真的去想一下企业建站的最终目标和效果，归根结底其实就是两个字：排名。比如一个外贸网站，当你所确定的关键词在搜索引擎上有了好的排名，那么就算是网站每天100个定向流量，也会为你带来可观的转化率。而这转化率，也就是相当于你的客户和订单。面包屑导航、文章内链、URL静态化等方面，我们都必须花一定的时间和精力进行修饰和完善，使其有比较合理的URL结构，从而利于SEO优化。当然也包括手动的增加关键词链接、组织和表达URL语义等操作，其实这样做的目的就是增加整站内部链接的质量。

七则CSS技巧帮助你改善优化SEO

fly2021 — Fri, 17 Feb 2012 05:35:58 +0000

我们都知道，要构建一个对用户和Google两面都要好的网站是件不容易的事情。如果我们要迁就Google让它尽可能的发现网站的价值，那么在设计网站时就会在用户体验上大打折扣。Google的蜘蛛爬虫至今仍无法很好的辨识一些高级的Web技术，如Flash、Ajax等，它们有时候就像小孩子一样，你需要手把手的去引导和帮助它们去发现并理解网站质素。值得庆幸的是也有很多的CSS方案可以弥补这一缺陷，虽然本文标题中的”技巧”感觉有点诡计、花招的意味，事实上这也只是迎合Google的一些手段而已。试想，到底是我们存心想去”欺骗”Google，还是Google让我们的Web开发总是不得安生… 虽然搜索引擎不止Google一个，但是它们很多甚至比Google还难伺候，再者鉴于其绝对优势的影响力，所以本文探讨的重点还是放在Google上。下面七条有利于SEO的CSS诀窍，排名不分先后： 1.合理利用CSS分页技术 Google在评定长篇幅文章页面权重时存在很严重的问题，一般而言长篇幅页面较之短篇幅页面有着更大的权重。但是就用户体验角度来讲，我们往往希望用户能看完全文，并且不需要去拖拉滚动条或打开另外一张新的页面继续阅读。解决方案就是CSS分页。这不就是文本隐藏？事实上隐藏文本跟隐藏链接、小文本等手段一样，是较为古老的干涉搜索引擎规律的作弊形式，也就是常说的”黑帽SEO”的一种，所以千万不要去用它。而CSS分页与文本隐藏的实质大不相同，它能把长文本分割成易辨识的几部分，并仍处于同一页面中，某种程度上有点选项卡的意思。在运用CSS分页的时候，也要留意Google页面权重判定的一个限制：对于一个体积较大的页面，爬虫一般不会进行很完整的抓取。 2.绝对定位页面中越靠近顶端的内容越能得到Google的关注。Google爬虫对页面内容的”浏览”并不像人为阅读一样针对最终解析的页面效果，它们是在源码中进行抓取的，所以如果你网站的结构比较复杂，比如有很多导航、脚本或其它小玩意儿，Google爬虫可能还没蠕到主要内容就停止抓取了。在这种情况下，你可以考虑把主内容体现在页面源代码较前的位置，然后利用CSS中的绝对定位将其定位网页中适当的位置，这样用户浏览的时候主内容也就不会跑到导航菜单等元素的前面去了。 3.使用H1,H2…H*定义标题在HTML中标题元素H1、H2等总是默认比其它文本大一些，所以长久以来很多网页设计者都习惯用DIV或SPAN代替H*标签作为标题文本的容器，然后自由的进行样式设定。但是如果这么做的话，Google将无从知晓那些文本是页面内容的标题，在一定程度上影响了页面权重的判断。事实上现在的CSS也能对H1等标签进行很丰富的样式定义，我们完全没有必要采用之前那种舍本逐末的做法。 4.标题文本SIFR图像替换法很多人喜欢在标题上使用文本替换技术，简而言之就是利用CSS将标题文本隐藏，然后替换以外观更加丰富的图像。图像替换文本技术有很多种实现方法，具体可以参考西米CC中的图像替换文本技术一文，这些方法其中有一些考虑比较周全，也有一些相对而言比较简陋。也许你又会问了，这不又是文本隐藏么？是的，有些替换技术会对SEO带来一些负面影响，因为爬虫无法抓取到标题本身。幸运的是，现在有一种称之为SIFR的图像替换文本方法得到了Google的认可，它可以用Flash形式来展示标题，在其中你可以灵活的使用各种字体，并且能够在代码中确保H*标签被辨识出来。 SIFR表示Scalable Inman Flash Replacement，即“可伸缩Inman Flash替换”技术。是由Mike Davidson在IFR方法的基础之上扩展的一种技术。它通过Flash + JS + CSS联合实现在不替换页面中文本元素的情况下，对文本进行更为细腻准确的效果渲染。使用SIFR你可以任意定义WEB中的文本字体，即便是客户端浏览器未安装的字体。SIFR使用Flash渲染字体效果，可以平滑消除文本锯齿，你可以像使用用CSS控制文本一样轻松得到各种文本效果。 5.列表的运用现在大多数的SEO专家都认可了一个事实，那就是关键字密度并不是影响页面权重的主要因素，也就是说你的关键字在页面中出现20次还是5次对权重不会有实质性的影响，相反密度过大可能会被认作是作弊性质的关键字堆砌。但是假如你不是为了SEO，而是真的需要不断的重复一些字词该怎么办呢？那么就把它们放在列表标签里吧，不论是无序列表还是有序列表，Google不会将其中的字词重复视为作弊手段。如果你不希望UL或OL以列表的形式展示在网页中，你可以用CSS改变其外观样式，使其与页面融合得更加和谐。有些牛人甚至把整站都用列表来实现，完全不把表格、DIV甚至SPAN运用到布局中。 6.友情链接页Nofollow属性 Nofollow属性是由Google领头新创的一个标签，目的是尽量减少垃圾链接对搜索引擎的影响，只需在链接标签中加入rel=”nofollow”即可。这种情况下，相当于告诉搜索引擎，该链接所指向的网页非我所能控制，对其内容不予置评，这样搜索引擎在计算目标的网站的链接广泛度时，将会把这个链接排除在外。 Google在鉴定页面权重时，会特别关注那些包含很多外链的页面上，使用Nofollow能让Google不会把那些友情链接页误认为是很重要的页面。别把权重浪费在一些无关的页面上，要尽量把权限集中到重要的页面上，一个rel=”nofollow”属性能很好的避免权重的浪费。 7.纯CSS导航菜单很多人以为纯CSS菜单并不会对SEO产生实质性的影响，所以在设计的时候还是很习惯的加入一些JS或其它东西来增强菜单的动态效果。事实上如果要说纯CSS菜单有什么好处，其原理就类似为什么我们要抛弃表格而采用DIV布局一样，精简扼要的页面代码能使页面加载速度得到很大的提高，这在spider爬行时是非常有利的，否则对页面的收录及权重肯定会有一定的影响。更何况现在CSS强大的样式控制能力，足够让我们制作出实用而又精巧的导航菜单。以上所论述的七个方面，并不是什么很高级的知识或技术，也不会对一个网站的SEO效果产生决定性的作用，但不可否认的是它们或多或少会有些正当合法的帮助，而且有助于让你把CSS由一种技术提升为一种理念。如果说你觉得SPAM对SEO效果更明显，我只能说那是种很愚蠢的想法。顺便说一句，我并不喜欢什么白帽SEO的概念，对我而言一种方法或手段要么就是SEO，要么就是SPAM。

CSS命名规则和结构目录，我也要适应一下啊

fly2021 — Mon, 06 Feb 2012 01:43:57 +0000

内容：content/container                导航：nav 　　               侧栏：sidebar
栏目：column                                标志：logo 　　    　页面主体：main
广告：banner                                热点：hot                    新闻：news
下载：download                         子导航：subnav               菜单：menu
搜索：search                                 页脚：footer                  滚动：scroll
版权：copyright                      友情链接：friendlink           子菜单：submenu
内容：content                            标签页：tab                 文章列表：list
注册：regsiter                        提示信息：msg                  小技巧：tips
加入：joinus                           栏目标题：title                       指南：guild
服务：service                               状态：status                  投票：vote
尾：footer                           合作伙伴：partner             登录条：loginbar
页面外围控制整体布局宽度：wrapper 　　                      左右中：left right center

(二)注释的写法:
/* Footer */
内容区
/* End Footer */

(三)id的命名:

(1)页面结构
容器: container           页头：header                  内容：content/container
页面主体：main          页尾：footer                    导航：nav
侧栏：sidebar             栏目：column              左右中：left right center
页面外围控制整体布局宽度：wrapper

(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu 子菜单：submenu 标题: title 摘要: summary

(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事项:
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css             模块 module.css            基本共用 base.css
主题 themes.css               专栏 columns.css                  打印 print.css
文字 font.css                     表单 forms.css                      补丁 mend.css
布局，版面 layout.css

fly2021 — Tue, 03 Jan 2012 09:05:53 +0000

站长之家（CHINAZ.com）12月31日编译：高品质是所有人追求的目标，在网站界面设计的领域中也不例外。一个网站的品质感很大程度上取决于它的细节。这些细节体现在每一个边角、每一像素的凹凸、每一阴影的轻重、每一个间距，每一对比的感觉。一个好网站，视觉上一定要是舒服的。这里就为设计者们分享国外20个拥有完美视觉体验的旅游网站界面佳作，以供欣赏借鉴。

hack在不同浏览器下的兼容对比

fly2021 — Fri, 16 Dec 2011 06:58:36 +0000

符号用法支持不支持备注
[ _ ] div{_background:#f00;} IE6 IE7、IE8、IE9、火狐、谷歌 IE6专属写法（属性Hack）
[ * ] div{*background:#f00;} IE6、IE7 IE8、IE9、火狐、谷歌（属性Hack）
[ !important ] div{color:#f00 !important;} IE6、IE7、IE8、IE9、火狐、谷歌 IE6 此属性Hack 有时候在IE6下会时效（属性Hack）
[ \0 ] div{_background:#f00 \0;} IE8、Opera IE6、IE7、IE9、火狐、谷歌不建议使用（属性Hack）
[ /9 ] div{background:#f00 \9;} IE6、IE7、IE8 火狐、谷歌、IE9 不建议使用（属性Hack）
[ * html ] * html .th_6{background:#F00} IE6、IE5 IE7、IE8、火狐、谷歌、IE9 针对IE6已经更早版本的IE系列浏览器（选择符级Hack说明）
[ * + html ] * + html .th_6{background:#F00} IE7 IE6、IE8、火狐、谷歌、IE9 针对IE7版本浏览器（选择符级Hack说明）
本文由站酷网 – delnmnm 原创，转载请保留此信息，多谢合作。