WordPress做网站|企业网站SEO|外贸网站优化|SEO视频教程 » 国外教程翻译 http://ximicc.com - 西米CC Wed, 16 May 2012 03:30:34 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 如何转移或复制WordPress博客：主机空间数据搬家篇 http://ximicc.com/wordpress-tutorial/move-wordpress-to-new-webhosting-01 http://ximicc.com/wordpress-tutorial/move-wordpress-to-new-webhosting-01#comments Wed, 26 Oct 2011 01:56:33 +0000 ximicc http://ximicc.com/?p=5101 前些天，一个客户要求把一个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后，数个小时内仍会有访问者看到的是旧的主机上面的内容。因此，建议在访问人数少的时候，比如午夜时分来进行操作。

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

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

wordprerss企业建站服务|商业主题代购|模板效果调试|网站建设套餐|后台维护指导视频|主题汉化定制

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/wordpress-tutorial/move-wordpress-to-new-webhosting-01/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part22 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part22#comments Thu, 03 Mar 2011 10:35:52 +0000 ximicc http://ximicc.com/?p=3969 若曾编写过在未来相当长的一段时间内都要保持不变的文档，你就会发现在编写的过程中必须处处小心，让文档尽可能地完美。
以出版行业为例，为了保证语言流畅简洁和内容的正确性，这本书曾被很多人修改编辑过。原因很明显：与网页在浏览器缓存中存在的时间相比，书籍在书架中停留的时间要长得多。所有这些预先的检查工作都是为了确保书籍在出版时的正确性（但愿出版后好运相伴）。
但是在同样的问题上，Web却没有此类的限制。每次用户来访．Web站点都从服务器将内容发送给访客。这样就意味着，即使在网站发布之后，你仍旧可以修改页面的内容或重新设计页面的样式，每个再次访问的用户都能够立即看到这些变化，而并不需要像图书这样，只有重印或再版的时候才有机会修改。自然，网站的不断改进会让人非常高兴，但这也会让那些签了固定合同的设计师感到些许郁闷。
虽然禅意花园也是一个网站，但在编写HTML的过程中却遇到了一些独特的挑战，让这个过程更像是写书而不是网站。若是在用户已经提交了设计之后再修改页面的HTML，那么就有可能破坏掉从前的设计，这也与禅意花园的最初目标相悖。即使修改的仅仅是页面中的文本，也会对文档以及文档中某块内容的大小造成影响，并有可能无法预知地改变某些作品的布局。这样看来，一旦发布之后再对禅意花园的HTML进行任何结构或内容的修改都可能是有害且不可接受的，所以在编写HTML时就需要尽可能小心准确。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（16） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（22）- 西米CC(http://ximicc.com)

若曾编写过在未来相当长的一段时间内都要保持不变的文档，你就会发现在编写的过程中必须处处小心，让文档尽可能地完美。

以出版行业为例，为了保证语言流畅简洁和内容的正确性，这本书曾被很多人修改编辑过。原因很明显：与网页在浏览器缓存中存在的时间相比，书籍在书架中停留的时间要长得多。所有这些预先的检查工作都是为了确保书籍在出版时的正确性（但愿出版后好运相伴）。

但是在同样的问题上，Web却没有此类的限制。每次用户来访．Web站点都从服务器将内容发送给访客。这样就意味着，即使在网站发布之后，你仍旧可以修改页面的内容或重新设计页面的样式，每个再次访问的用户都能够立即看到这些变化，而并不需要像图书这样，只有重印或再版的时候才有机会修改。自然，网站的不断改进会让人非常高兴，但这也会让那些签了固定合同的设计师感到些许郁闷。

虽然禅意花园也是一个网站，但在编写HTML的过程中却遇到了一些独特的挑战，让这个过程更像是写书而不是网站。若是在用户已经提交了设计之后再修改页面的HTML，那么就有可能破坏掉从前的设计，这也与禅意花园的最初目标相悖。即使修改的仅仅是页面中的文本，也会对文档以及文档中某块内容的大小造成影响，并有可能无法预知地改变某些作品的布局。这样看来，一旦发布之后再对禅意花园的HTML进行任何结构或内容的修改都可能是有害且不可接受的，所以在编写HTML时就需要尽可能小心准确。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part22/feed 1 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part20 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part20#comments Sun, 27 Feb 2011 10:30:50 +0000 ximicc http://ximicc.com/?p=3965 我们在前面已经分析了这个问题，但还是有必要在这里重复一遍：根据文档内容的结构而选择HTML元素，而不是根据HTML元素的样式。例如，用p元素包含文字段落，而不是为了换行；用blockquote包含被引用的文字——而不是为了得到缩进等。
当然，并不是所有的HTML元素都可以在XHTML l.0 Strict标准中使用的。事实上，虽然XHTML l.0 Strict标准（以及XHTML l.1标准）中可使用的HTML元素较少，但这些元素却有着更加明确的意义。若你在创建文档时找不到合适的、可以恰当描述其结构的标签，那么可以考虑使用通用的div或span元素。当然，这也是一个警告……接下来将会介绍。示例：
<h3>The Road to Enlightenment</h3>
而不要使用这样的HTML:
<code    style=¨font-size: 1.5em;¨>The Road to Enlightenment</code>
避免过度使用div和span
设计HTML时一个常见的错误就是过度使用div和spano少量、必要的合理使用可以明显地增强文档的结构性。但若是文档中使用了太多的div和span，那么你就应该考虑一下是不是还有更加合适的HTML元素供选择了。
例如，若是h3更能表示内容的含义，那么就不应该使用div．span也不应该替代label的作用。但这并不意味着div和span应避免使用。文档中合适位置的少量div元素可以使文档更易于应用样式，且在逻辑段落上也显得更加清晰。我们可以将div看作一个可以被重用的容器：将内容深深隐藏于太多的容器中并不是一个好主意，但是几个合理位置中的div却可以让文档显得井井有条。示例：
<divMsoNormal”>    <hl>CSS Zen Garden</hl>
<h2>The  Beauty  of  <acronym  title=¨Cascading  Style
Sheets”> CSS</acronym> Design</h2>
</div>
Note:在W3Schools的”XHTML l.0 Reference”( httP://w3schools.com/xhtmiixhtml_reference.asp)中可以找到xHTML1.0中允许使用的所有HTML元素。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（16） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（20） - 西米CC(http://ximicc.com)

我们在前面已经分析了这个问题，但还是有必要在这里重复一遍：根据文档内容的结构而选择HTML元素，而不是根据HTML元素的样式。例如，用p元素包含文字段落，而不是为了换行；用blockquote包含被引用的文字——而不是为了得到缩进等。

当然，并不是所有的HTML元素都可以在XHTML l.0 Strict标准中使用的。事实上，虽然XHTML l.0 Strict标准（以及XHTML l.1标准）中可使用的HTML元素较少，但这些元素却有着更加明确的意义。若你在创建文档时找不到合适的、可以恰当描述其结构的标签，那么可以考虑使用通用的div或span元素。当然，这也是一个警告……接下来将会介绍。示例：

<h3>The Road to Enlightenment</h3>

而不要使用这样的HTML:

<code    style=¨font-size: 1.5em;¨>The Road to Enlightenment</code>

避免过度使用div和span

设计HTML时一个常见的错误就是过度使用div和spano少量、必要的合理使用可以明显地增强文档的结构性。但若是文档中使用了太多的div和span，那么你就应该考虑一下是不是还有更加合适的HTML元素供选择了。
例如，若是h3更能表示内容的含义，那么就不应该使用div．span也不应该替代label的作用。但这并不意味着div和span应避免使用。文档中合适位置的少量div元素可以使文档更易于应用样式，且在逻辑段落上也显得更加清晰。我们可以将div看作一个可以被重用的容器：将内容深深隐藏于太多的容器中并不是一个好主意，但是几个合理位置中的div却可以让文档显得井井有条。示例：

<divMsoNormal”>    <hl>CSS Zen Garden</hl>

<h2>The  Beauty  of  <acronym  title=¨Cascading  Style

Sheets”> CSS</acronym> Design</h2>

</div>

Note:在W3Schools的”XHTML l.0 Reference”( httP://w3schools.com/xhtmiixhtml_reference.asp)中可以找到xHTML1.0中允许使用的所有HTML元素。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part20/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1-2 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1-2#comments Wed, 23 Feb 2011 10:25:58 +0000 ximicc http://ximicc.com/?p=3960 与声明DOCTYPE同样重要的是将HTML文档指定为某一种人类的语言。如果你曾偶然闯入某个看似乱码的网页，而实际上其文字却是日语、希腊语、斯瓦希里语或者其他什么语言，你就会知道页面编写者忘记设置页面编码所造成的后果了。因为Google和其他搜索引擎会根据搜索请求的语言来过滤搜索结果，所以如果你不想放弃搜索引擎带来的流量的话，那么正确地设置页面的编码将显得极为重要。本章稍后将详细介绍字符编码的相关内容。
<html xmlns=’’http: //www .w3 .org/1999/xhtml’’  xml: lang=¨en¨>
设置文档的XML语言。这里设置为英语的ISO代码en。
<meta  http-equiv=’’Content-Type’‘  content=’’text/html;charset=utf-8″   >
设置文档的字符集。这里为UTF-8。
指定标题
每个HTML页面都需要一个用来描述页面内容的
元素。在访客将页面保存至收藏夹时，元素中的内容将作为链接的描述同样被保存在访客的浏览器中。搜索引擎也对<title>元素中包含的关键宇格外感兴趣，因此好的<title>可以明显地提高页面在搜索引擎中的排名。网站中的每个页面都应该尽可能地有一个惟的标题，标题应该极具描述性地概括该页面的内容，而不是泛泛地介绍整个站点。示例：
<title>CSS Zen Garden:  The Beauty in CSS Design</title>
Note：若想了解更多关于将文档结构和表现分来的内容，请参考Roger Johansson在456 Berea Street网站给出的白皮书—— “Developing with Web Standards” ( www.456bereastreet.com/dwws)。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（16） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（19）- 西米CC(http://ximicc.com)指定语言和字符集

与声明DOCTYPE同样重要的是将HTML文档指定为某一种人类的语言。如果你曾偶然闯入某个看似乱码的网页，而实际上其文字却是日语、希腊语、斯瓦希里语或者其他什么语言，你就会知道页面编写者忘记设置页面编码所造成的后果了。因为Google和其他搜索引擎会根据搜索请求的语言来过滤搜索结果，所以如果你不想放弃搜索引擎带来的流量的话，那么正确地设置页面的编码将显得极为重要。本章稍后将详细介绍字符编码的相关内容。

<html xmlns=’’http: //www .w3 .org/1999/xhtml’’  xml: lang=¨en¨>

设置文档的XML语言。这里设置为英语的ISO代码en。

<meta  http-equiv=’’Content-Type’‘  content=’’text/html;charset=utf-8″   >

设置文档的字符集。这里为UTF-8。

指定标题

每个HTML页面都需要一个用来描述页面内容的
元素。在访客将页面保存至收藏夹时，元素中的内容将作为链接的描述同样被保存在访客的浏览器中。搜索引擎也对<title>元素中包含的关键宇格外感兴趣，因此好的<title>可以明显地提高页面在搜索引擎中的排名。网站中的每个页面都应该尽可能地有一个惟的标题，标题应该极具描述性地概括该页面的内容，而不是泛泛地介绍整个站点。示例：

<title>CSS Zen Garden:  The Beauty in CSS Design</title>

Note：若想了解更多关于将文档结构和表现分来的内容，请参考Roger Johansson在456 Berea Street网站给出的白皮书—— “Developing with Web Standards” ( www.456bereastreet.com/dwws)。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1-2/feed 0 新站做网络推广需要坚持一个谷歌更新时间 http://ximicc.com/seo/seo-google-timing http://ximicc.com/seo/seo-google-timing#comments Thu, 03 Feb 2011 02:33:35 +0000 ximicc http://ximicc.com/?p=3928 做资讯站是后来的想法，之前的网站一直是以博客的形式存在的。新站一个星期被收录，百度和谷歌的收录还可以，但是之前以博客的形式存在的时候， 优化一直不是很好，很多关键词无法排到百度的首页。可能之前的定位有很大的关系，于是后来重新定位网站从营销博客到营销咨询站的改变。
网站的定位很关键，这就直接导致你网站未来的主流量是那一部分全体，而针对这部分群体投放广告就比较精准，所以网站的定位很关键，这就好比是一个孩子应该有一个属于自己的名字。
网站之前叫做东京七号公馆，借助青大地摊女生造势，想打造一个帮助情侣寄存爱情的地方，可以是感动或者秘密。这段美好的愿望成就了淘宝店却冷落 了网站，于是后来改版网站，觉得寻找时机重新走回这个甜蜜的思路。于是网站定位生活、职场类，然后会夹杂营销的很多基础经验，帮助职场的一部分新人和喜欢 营销的朋友。
最终网站定位是糖·咖啡·公馆，属于生活职场之类的咨询站，中间夹杂一些营销知识方法。正式定位网站成为现在的样子是在3月29号左右，上线后 及时更新一些伪原创信息，，第二天百度几乎全部收录关于新站的文章。这一点上，对于新人来说，新站如果想要做长久，最好还是原创的文章，这样会增加搜索引 擎对网站的喜好度，实在没有时间想要充实网站的话，也要采用伪原创，这个效果对于我的新站很明显，我上线新网站的当天赶上百度大更新，文章几乎全部收录。
之前是网站是博客的时候在一些权重比较高的网站还有博客如新浪搜狐百度做过一些外链，大家一致认为的道理是内容为王外链为皇，外链做的好不好只 有更新PR的时候或者使用站长工具的时候会一目了然，它在增加网站权重的时候也会引来一些流量。一般权重比较高的博客都可以添加友链，这也是一个比较不错 的外链模式。
3月31号正式开始上线百度的广告联盟，最初做广告联盟只是想让自己的网站看上去比较华丽一点，没指望能挣到钱。从31号开始几乎能保证每天七 八百个ip左右，有稍微的广告收入，然后我开始加入一些链接群开始做广告或者交换友情链接，几乎每天更新文章三篇次左右，有原创和伪原创之分，然后每天交 换链接至少三家以上，能换高的链接就换高的，实在不行就是同等收录的。
4月3号晚上，在牟长青的一个友链群中，他说晚上谷歌会更新pr的。不过这个信息是4月4号中午看到的，我抓紧用站长工具一查，pr从0直接到2。看来努力还是有效果的。
新人做站贵在一个坚持，也许下一刻你的pr就上去了，你放弃在这一秒。其实新站每天更新三篇次文章左右，交换三五个链接，只要坚持等到谷歌更新的下一个点都会有收获。蜘蛛自有公道，付出总有回报。
[ 以下内容您也可能感兴趣 ]

提升网站流量方法之一：善用分享按钮功能 (0)
互联网产品营销：你不得不知的推广方法（PPT） (0)
SEO基础视频教程三：长尾关键词的运用 (0)
SEO基础第五课：长尾关键词-附长尾理论精华PDF中文版 (0)
SEO基础第二课：新手高手对话实录 (0)

]]> 企业做网站进军网络营销这块，不像是进餐厅吃饭一样，照着菜单点，完了就可以上一桌大餐，网络营销是一个细活像是绣花，半点来不及。但是很多站都减持不到一个谷歌更新的时间，谷歌的pr更新意味着你会越来越好做你的站，尤其是pr提升之后。

做资讯站是后来的想法，之前的网站一直是以博客的形式存在的。新站一个星期被收录，百度和谷歌的收录还可以，但是之前以博客的形式存在的时候， 优化一直不是很好，很多关键词无法排到百度的首页。可能之前的定位有很大的关系，于是后来重新定位网站从营销博客到营销咨询站的改变。

网站的定位很关键，这就直接导致你网站未来的主流量是那一部分全体，而针对这部分群体投放广告就比较精准，所以网站的定位很关键，这就好比是一个孩子应该有一个属于自己的名字。

网站之前叫做东京七号公馆，借助青大地摊女生造势，想打造一个帮助情侣寄存爱情的地方，可以是感动或者秘密。这段美好的愿望成就了淘宝店却冷落 了网站，于是后来改版网站，觉得寻找时机重新走回这个甜蜜的思路。于是网站定位生活、职场类，然后会夹杂营销的很多基础经验，帮助职场的一部分新人和喜欢 营销的朋友。

最终网站定位是糖·咖啡·公馆，属于生活职场之类的咨询站，中间夹杂一些营销知识方法。正式定位网站成为现在的样子是在3月29号左右，上线后 及时更新一些伪原创信息，，第二天百度几乎全部收录关于新站的文章。这一点上，对于新人来说，新站如果想要做长久，最好还是原创的文章，这样会增加搜索引 擎对网站的喜好度，实在没有时间想要充实网站的话，也要采用伪原创，这个效果对于我的新站很明显，我上线新网站的当天赶上百度大更新，文章几乎全部收录。

之前是网站是博客的时候在一些权重比较高的网站还有博客如新浪搜狐百度做过一些外链，大家一致认为的道理是内容为王外链为皇，外链做的好不好只 有更新PR的时候或者使用站长工具的时候会一目了然，它在增加网站权重的时候也会引来一些流量。一般权重比较高的博客都可以添加友链，这也是一个比较不错 的外链模式。

3月31号正式开始上线百度的广告联盟，最初做广告联盟只是想让自己的网站看上去比较华丽一点，没指望能挣到钱。从31号开始几乎能保证每天七 八百个ip左右，有稍微的广告收入，然后我开始加入一些链接群开始做广告或者交换友情链接，几乎每天更新文章三篇次左右，有原创和伪原创之分，然后每天交 换链接至少三家以上，能换高的链接就换高的，实在不行就是同等收录的。

4月3号晚上，在牟长青的一个友链群中，他说晚上谷歌会更新pr的。不过这个信息是4月4号中午看到的，我抓紧用站长工具一查，pr从0直接到2。看来努力还是有效果的。

新人做站贵在一个坚持，也许下一刻你的pr就上去了，你放弃在这一秒。其实新站每天更新三篇次文章左右，交换三五个链接，只要坚持等到谷歌更新的下一个点都会有收获。蜘蛛自有公道，付出总有回报。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/seo/seo-google-timing/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1#comments Thu, 20 Jan 2011 10:23:14 +0000 ximicc http://ximicc.com/?p=3952 选择DOCTY PE
在HTML的最开始部分声明DOCTYPE（Document Type（文档类型）的简写）可以让浏览器或其他用户代理知道你要使用的HTML语言的类型。无论你打算选择何种类型的HTML语言，DOCTYPE都是一个健壮的文档所必需的，也是你在编写HTML时要做的第一件事情。
Note：“<p>标签”和“p元素”之间到底有什么区别？大多数时候它们表示的是同一个东西，但仍有一些细微的区别。“标签”指简单的HTML分隔符，例如<p>、<div>和<／body>等。而“元素”则是由一对开始结束“标签”构成的，用来包含某一些内容——这里有一个值得注意的例外，即<br/>本身既是开始标签又是结束标签，其中不包含任何内容。
一般地，“元素”用来表示某一段明确的结构，而“标签”则仅仅是用来创建文档结构的语法而已。示例：
<! DOCTYPE  html  PUBLIC  “-//W3C//DTD  XHTML  l-0  Strict//EN¨¨http://www.w3.org/TR/xhtmll/DTD/xhtmll-s trict.dtd”>
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（16） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（18） - 西米CC(http://ximicc.com)每个页面部在结构上有自己不同的需求，所以对于创建HTML来说，很难找到一个完美的一揽子解决方案。但我们却能够总结出一些通用的指导方针，将这些要点烂熟于胸，一定会对编写HTML大有裨益。

选择DOCTY PE

在HTML的最开始部分声明DOCTYPE（Document Type（文档类型）的简写）可以让浏览器或其他用户代理知道你要使用的HTML语言的类型。无论你打算选择何种类型的HTML语言，DOCTYPE都是一个健壮的文档所必需的，也是你在编写HTML时要做的第一件事情。

Note：“<p>标签”和“p元素”之间到底有什么区别？大多数时候它们表示的是同一个东西，但仍有一些细微的区别。“标签”指简单的HTML分隔符，例如<p>、<div>和<／body>等。而“元素”则是由一对开始结束“标签”构成的，用来包含某一些内容——这里有一个值得注意的例外，即<br/>本身既是开始标签又是结束标签，其中不包含任何内容。

一般地，“元素”用来表示某一段明确的结构，而“标签”则仅仅是用来创建文档结构的语法而已。示例：

<! DOCTYPE  html  PUBLIC  “-//W3C//DTD  XHTML  l-0  Strict//EN¨¨http://www.w3.org/TR/xhtmll/DTD/xhtmll-s trict.dtd”>

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part1/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part17 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part17#comments Mon, 13 Dec 2010 13:50:55 +0000 ximicc http://ximicc.com/?p=3846 为表现样式编码和为实现正确的语义编码，二者在基本原理上的差别比较微妙。这里给出了一段示例代码来帮助我们更好地区别。下面这一段HTML就是为了实现某种表现样式而编写的：
<br><br>
<b><font size="2">Our Family</font></b>
<br><br>
<font size="1">Pictured are Matt and Jeremy. As usual, Matt is making
a funny face. We don't have many photos where he isn't.</font>
下面这一段HTML是为了达到正确的语义而编写的：
<div id="family">
 <h3>Our Family</h3>
 <p>Pictured are Matt and Jeremy. As usual, Matt is making a funny
face. We don't have many photos where he isn't.</p>
</div>
在第一个代码片断中，所有的HTML标签都是用来表现样式的。<br>标签用来换行，<b>标签用来给文本加粗，<font>标签则指定了文本显示的大小。而在第二个代码片断中，却一点都没有对页面显示样式的说明——h3和p元素仅仅用来描述页面中某一段内容的功能。p元素中包含了一个自然段的文字，而h3元素则表示其内容是页面中的第三级标题。
关键之处就在于，第二个代码片段并没有考虑这些元素将要以何种样式呈现出来，因为元素的呈现样式将由CSS控制。之所以选择这些标签，是因为它们恰如其分地描述了其中的内容。这也正是HTML中语义的概念：选择何种HTML标签取决于标签本身的语义，而不是其默认显示出的样式。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS ...]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（17）针对语义编写HTML所带来的巨大优势将在本章稍后部分介绍。现在我们只要记住，使用CSS进行设计时的主要任务之一，就是从编写合法的、带有良好结构并拥有语义的HTML文档开始。完成了这一步之后，我们才能在这个坚实牢固的基础之上应用各种CSS样式。

为表现样式编码和为实现正确的语义编码，二者在基本原理上的差别比较微妙。这里给出了一段示例代码来帮助我们更好地区别。下面这一段HTML就是为了实现某种表现样式而编写的：

  1. <br><br>
  2. <b><font size="2">Our Family</font></b>
  3. <br><br>
  4. <font size="1">Pictured are Matt and Jeremy. As usual, Matt is making
  5. a funny face. We don't have many photos where he isn't.</font>

下面这一段HTML是为了达到正确的语义而编写的：

  1. <div id="family">
  2.  <h3>Our Family</h3>
  3.  <p>Pictured are Matt and Jeremy. As usual, Matt is making a funny
  4. face. We don't have many photos where he isn't.</p>
  5. </div>

在第一个代码片断中，所有的HTML标签都是用来表现样式的。<br>标签用来换行，<b>标签用来给文本加粗，<font>标签则指定了文本显示的大小。而在第二个代码片断中，却一点都没有对页面显示样式的说明——h3和p元素仅仅用来描述页面中某一段内容的功能。p元素中包含了一个自然段的文字，而h3元素则表示其内容是页面中的第三级标题。

关键之处就在于，第二个代码片段并没有考虑这些元素将要以何种样式呈现出来，因为元素的呈现样式将由CSS控制。之所以选择这些标签，是因为它们恰如其分地描述了其中的内容。这也正是HTML中语义的概念：选择何种HTML标签取决于标签本身的语义，而不是其默认显示出的样式。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part17/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（16） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part16 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part16#comments Sat, 11 Dec 2010 13:46:54 +0000 ximicc http://ximicc.com/?p=3842 长期以来，格式化Web页面时基本HTML元素的选择都取决于它们的显示的样式。若需要一个带有缩进的段落，你可能会选择用标签将这段文字包围起来，让段落两端显示出一些空白。但顾名思义，blockquote元素表示其中包含的内容是一段引用自其他来源的文字。如果我们仅仅是为了让某一段文字以缩进形式显示而使用blockquote元素，而这段文字却并非引用自其他来源的话，那么就意味着我们错误地使用了HTML标签-HTML标签是用来表示文档结构的。对于文档的显示样式（例如某一元素的缩进），应该使用CSS来实现。
结构化HTML文档主要体现在对HTML标签正确、合理地使用中。选择HTML标签时要根据其语义，而不是其样式进行。
既然现在CSS设计已经是可用的了，那么就应该把所有的格式化和设计相关的实现放在CSS文件中，让HTML只用来表示文档结构。作为一门用来设计表现样式的语言，CSS建立于HTML的文档结构之上并为其应用可视化样式，而HTML则只用来表示文档的结构，不再用于页面样式的设计中。
那么正确、合理的文档结构能够带来什么好处呢？这一节中所提到的“结构”到底又是什么东西呢？
只有对HTML元素非常熟悉，才能知道何时应该选用何种标签口这里我们推荐Dan Cederholm的Web Standards Solutions:The Markup and Style Handbook一书（2004年由Friends of ED出版社出版），作为实际开发中关于结构化标记的参考。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（16）在开始使用CSS布局之前，首先要保证你的Web页面是以标记结构化的方式编写的。既然正在阅读本书，那么你十有八九已经听过将结构( structure)和表现(presentation)分开的说法。若你对此尚不熟悉，也不用担心——基于CSS进行设计的最主要的优势就是，只要HTML文档结构良好，那么今后将很容易通过添加一层CSS作为修饰，让文档样式变得非常漂亮。

长期以来，格式化Web页面时基本HTML元素的选择都取决于它们的显示的样式。若需要一个带有缩进的段落，你可能会选择用标签将这段文字包围起来，让段落两端显示出一些空白。但顾名思义，blockquote元素表示其中包含的内容是一段引用自其他来源的文字。如果我们仅仅是为了让某一段文字以缩进形式显示而使用blockquote元素，而这段文字却并非引用自其他来源的话，那么就意味着我们错误地使用了HTML标签-HTML标签是用来表示文档结构的。对于文档的显示样式（例如某一元素的缩进），应该使用CSS来实现。

结构化HTML文档主要体现在对HTML标签正确、合理地使用中。选择HTML标签时要根据其语义，而不是其样式进行。

既然现在CSS设计已经是可用的了，那么就应该把所有的格式化和设计相关的实现放在CSS文件中，让HTML只用来表示文档结构。作为一门用来设计表现样式的语言，CSS建立于HTML的文档结构之上并为其应用可视化样式，而HTML则只用来表示文档的结构，不再用于页面样式的设计中。

那么正确、合理的文档结构能够带来什么好处呢？这一节中所提到的“结构”到底又是什么东西呢？

只有对HTML元素非常熟悉，才能知道何时应该选用何种标签口这里我们推荐Dan Cederholm的Web Standards Solutions:The Markup and Style Handbook一书（2004年由Friends of ED出版社出版），作为实际开发中关于结构化标记的参考。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part16/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（15） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part15 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part15#comments Thu, 09 Dec 2010 13:44:17 +0000 ximicc http://ximicc.com/?p=3838 很明显，禅意花园的出现满足了人们压抑已久的对CSS设计方面的需求，这在当时没有任何其他网站能够做到。自发布以来，禅意花园已经出现在全球范围内的数十种杂志、图书中，巩固了它在Web设计历史上独一无二的地位。感谢信更是从世界的各个角落纷至沓来，设计师和开发者用禅意花园向他们的雇主、客户以及同事证明了使用CSS进行设计的优势。提交作品的设计师也由此声名远扬，禅意花园甚至推进了他们的职业发展。
虽然创建和维护是由一个人完成的，但禅意花园在很大程度上是志愿者协作的结果——才华横溢的设计师们贡献给自己的作品，帮助它获得成功。每个人都能在禅意花园中找到不同的价值。虽然创建禅意花园的本意是演示CSS在设计中的作用，但它同样在很多当初没有预料到的领域中给人们带来了帮助。

若是某位设计师正在被一个布局问题所困扰，那么现在他有了寻求帮助的地方——禅意花园中有数百个不同的设计，他所遇到的问题极有可能已经被别人解决了。禅意花园允许并鼓励人们学习它的CSS，并将其使用在其他站点上。
类似地，禅意花园中也不断出现新的页面布局技术及CSS效果。我们都有机会在数百个作品中找到一些新奇的东西。
禅意花园还是一个绝佳的浏览器兼容性测试网站。其中所有的设计都使用有效的、基于标准的代码编写，所以理论上这些设计应该能够在所有浏览器中以一致的方式呈现出来。（当然实际上并非如此完美。由于某些浏览器的缺陷或对某些元素缺乏支持，大多数设计师都不得不考虑浏览器之间显而易见的呈现差别，并使用多种CSS过滤器和hack来解决。）
当你正尝试说服你的雇主或客户使用Web标准设计页面时，禅意花园就是一个极其令人信服的证明。
当你灵感枯竭的时候，禅意花园中的设计或许能够给你一些启发。感觉江郎才尽了？来禅意花园逛逛吧，说不定灵感就在不经意之间出现了呢！
禅意花园为经验丰富的专家和积极努力的设计师提供了一个良好的展示自我的平台。雇主和潜在的客户很愿意主动联系它们中意作品的设计师，提供工作或者合作机会。这些优秀的作品也经常出现在国际性的图书和杂志中。

禅意花园已成为教师和讲师在教授当代Web设计实践时的一个有力工具。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（15）几天之内，陆续有用户开始提交他们的设计：在站点发布的第一周里，每天就有成千上万个访问者到来。人们还志愿将禅意花园翻译成数十种语言。

很明显，禅意花园的出现满足了人们压抑已久的对CSS设计方面的需求，这在当时没有任何其他网站能够做到。自发布以来，禅意花园已经出现在全球范围内的数十种杂志、图书中，巩固了它在Web设计历史上独一无二的地位。感谢信更是从世界的各个角落纷至沓来，设计师和开发者用禅意花园向他们的雇主、客户以及同事证明了使用CSS进行设计的优势。提交作品的设计师也由此声名远扬，禅意花园甚至推进了他们的职业发展。

虽然创建和维护是由一个人完成的，但禅意花园在很大程度上是志愿者协作的结果——才华横溢的设计师们贡献给自己的作品，帮助它获得成功。每个人都能在禅意花园中找到不同的价值。虽然创建禅意花园的本意是演示CSS在设计中的作用，但它同样在很多当初没有预料到的领域中给人们带来了帮助。

  1. 若是某位设计师正在被一个布局问题所困扰，那么现在他有了寻求帮助的地方——禅意花园中有数百个不同的设计，他所遇到的问题极有可能已经被别人解决了。禅意花园允许并鼓励人们学习它的CSS，并将其使用在其他站点上。
  2. 类似地，禅意花园中也不断出现新的页面布局技术及CSS效果。我们都有机会在数百个作品中找到一些新奇的东西。
  3. 禅意花园还是一个绝佳的浏览器兼容性测试网站。其中所有的设计都使用有效的、基于标准的代码编写，所以理论上这些设计应该能够在所有浏览器中以一致的方式呈现出来。（当然实际上并非如此完美。由于某些浏览器的缺陷或对某些元素缺乏支持，大多数设计师都不得不考虑浏览器之间显而易见的呈现差别，并使用多种CSS过滤器和hack来解决。）
  4. 当你正尝试说服你的雇主或客户使用Web标准设计页面时，禅意花园就是一个极其令人信服的证明。
  5. 当你灵感枯竭的时候，禅意花园中的设计或许能够给你一些启发。感觉江郎才尽了？来禅意花园逛逛吧，说不定灵感就在不经意之间出现了呢！
  6. 禅意花园为经验丰富的专家和积极努力的设计师提供了一个良好的展示自我的平台。雇主和潜在的客户很愿意主动联系它们中意作品的设计师，提供工作或者合作机会。这些优秀的作品也经常出现在国际性的图书和杂志中。

禅意花园已成为教师和讲师在教授当代Web设计实践时的一个有力工具。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part15/feed 0 《CSS Zen Garden – CSS禅意花园》中文版学习笔记（14） http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part14 http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part14#comments Tue, 07 Dec 2010 13:37:11 +0000 ximicc http://ximicc.com/?p=3832 除了正文部分之外，默认设计中的所有图片和文字都是在Adobe Photoshop中手工绘制的。起初Shea希望能够用书法手工写出标题的这段文本，不过在尝试了一个小时的毛笔和墨汁之后，Shea还是决定使用另一种让人更加满意的方法-Bitstream的Calligraphic 421字体（图1-1-12）。

因为汉字笔画复杂、样式美观，所以很多设计师非常欣赏它所体现出的细节。一种典型的西方设计方式就是一知半解地将若干汉字拼凑起来，以体现出某种“神秘”的意味，但Shea却不想这样o Shea花费了一段时间研究将要放在页面左上角卷轴中的汉字，希望能够让这些汉字表示出一定的含义。虽然初衷是好的，但结果仍旧让人遗憾：卷轴中的汉字在英语中的含义大概为beginning、complete、Whole和skill l 。
还记得小学时候的这类小作品么？将墨汁倒在一张白纸上，然后用吸管将墨汁吹成类似树的形状，最后撕下一些卫生纸片作为“花”。页面右下角的那棵树的设计过程将会让你回忆起这段美好的时光。从屏幕截图中可以看到，这棵树经历了若干次修正（图l-l-13）。整个过程从树的轮廓开始，只包含一些很简单的颜色，然后再基于该轮廓，以不断添加图层的方式进行改善。

在图7中我们可以看到，这几个汉字为“完”、“全”、“技”等。隐约可以感到Shca似乎要表达出类似“最高水平”的意思。
[ 以下内容您也可能感兴趣 ]

《CSS Zen Garden – CSS禅意花园》中文版学习笔记（22） (1)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（20） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（19） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（18） (0)
《CSS Zen Garden – CSS禅意花园》中文版学习笔记（17） (0)

]]> 《CSS Zen Garden - CSS禅意花园》中文版学习笔记（14）虽然前5个初始设计都对禅意花园的成功起到了至关重要的作用，但从长远来看，只有默认的第一个设计始终保持着较高的知名度。精致简洁的“安静”始终被设定为禅意花园的默认界面。虽然也曾考虑将2号设计“鲑鱼奶油奶酪”作为默认界面，因为该设计第一眼给人的冲击力较强，但谢天谢地，最后还是选择了“安静”。

除了正文部分之外，默认设计中的所有图片和文字都是在Adobe Photoshop中手工绘制的。起初Shea希望能够用书法手工写出标题的这段文本，不过在尝试了一个小时的毛笔和墨汁之后，Shea还是决定使用另一种让人更加满意的方法-Bitstream的Calligraphic 421字体（图1-1-12）。

《CSS Zen Garden - CSS禅意花园》中文版学习笔记（14）

因为汉字笔画复杂、样式美观，所以很多设计师非常欣赏它所体现出的细节。一种典型的西方设计方式就是一知半解地将若干汉字拼凑起来，以体现出某种“神秘”的意味，但Shea却不想这样o Shea花费了一段时间研究将要放在页面左上角卷轴中的汉字，希望能够让这些汉字表示出一定的含义。虽然初衷是好的，但结果仍旧让人遗憾：卷轴中的汉字在英语中的含义大概为beginning、complete、Whole和skill l 。

还记得小学时候的这类小作品么？将墨汁倒在一张白纸上，然后用吸管将墨汁吹成类似树的形状，最后撕下一些卫生纸片作为“花”。页面右下角的那棵树的设计过程将会让你回忆起这段美好的时光。从屏幕截图中可以看到，这棵树经历了若干次修正（图l-l-13）。整个过程从树的轮廓开始，只包含一些很简单的颜色，然后再基于该轮廓，以不断添加图层的方式进行改善。

《CSS Zen Garden - CSS禅意花园》中文版学习笔记（14）

在图7中我们可以看到，这几个汉字为“完”、“全”、“技”等。隐约可以感到Shca似乎要表达出类似“最高水平”的意思。

[ 以下内容您也可能感兴趣 ]

]]> http://ximicc.com/css-tutorial/css-zen-garden-learning-notes-part14/feed 0