Posts Tagged '国外教程翻译'

表格是网页中最常的一种排版方法。如果网页中需要引用大量文本的话，为了让用户浏览的时候更加方便。除了用锚点，或是分割网页的方法之外，也可以选择将文本置入到表格之中。这样管理起来方便且方便网页浏览。因为网页在加载表格内容的时候是依次加载，这样如果用户网速较慢的话，就可以一边看已经下载的内容一边等待加载剩余。表格之内套嵌太多表格也不利于页面加载，因浏览器是先加载完大表格之后再加载内嵌的小表格，因此内嵌表格会最终降低整页加载速度。

a.如果某个网页采用了大段的长篇文本，除了可以将一页文本 分成多面，还可以考虑将文本置入不同表格中，这样不仅管理方便，也使得该页加载时每个 表格内容依次加载，这样访问者就可以一边看已下载内容一边等待剩余部分加载，而不是等 待很久之后才一齐加载出来。

b.表格之内套嵌太多表格也不利于页面加载，因浏览器是先加载完大表格之后再加载内嵌的小 表格，因此内嵌表格会最终降低整页加载速度。

c.尽量采用XHTML标准，使用DIV代替表格。

具体方法是采用CSS里面的 FLOAT 属性，position 属性等定位。

问题1：什么是XHTML？

XHTML是The Extensible HyperText Markup Language(可扩展标识语言)的缩写。HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。

总结：合理使用表格，最多不超过三层；如果允许，最好使用DIV替换表格。

从内容质量上看，这本书有一半的内容是有意思的，另一半内容是不符合国情的。具体的说，设计、布局、图像和结尾的一些建议是比较有意思的章节，有些信息是在以前没有看到过的。本书将重点放在解决视觉设计问题上，而不是详细描述CSS规范的方方面面。在恰当的时候也会讨论浏览器的支持情况，以保证实用性。通过对作品的解读，可以得到不少收获。我的最大收获就是：绝对定位方式如此重要，以前我认为这是只有菜鸟才用的蠢方法而不敢使用。书最后的那些原则指导太 有用了，几乎是每个标准入门者必修的内容。

>>>本书针对的读者:

本书适合所有对设计和开发网站感兴趣的读者阅读。

1.设计师

本书采用视觉化的方式讨论CSS设计理论和实践，以使用基于标准的最新技术完成实际作品和解决实际问题为目标。

2.程序员

本书的重点是视觉艺术，但并不要求读者具有图形设计基础。作者从始至终都在尽最大努力以最佳的方式定义设计术语，确保即使读者不具备任何设计知识，也能理解并运用本书中介绍的概念和技巧。

3.CSS新手

尽可能少用行话和技术术语，即使读者对CSS没有足够清晰的认识，也能理解大部分章节。建议CSS新手从推荐读物（参见本书末尾的“结语”部分）中选择一本阅读，‘学习基本概念和语法，然后通过阅读本书来拓展这些概念并在作品中实际应用。

Using a visual vocabulary to discuss CSS design theory and practice, we aimed the lessons toward practical design and solving real-world problems with the latest standards-based techniques.

书中探讨了一些基本的Web设计原则，适用于大多数但不是所有情况。当然可以使用Adobe Dreamweaver等自动设计工具来创建基于CSS的网页，但对那些使用HTML编辑器手工编写代码的设计人员来说，本书介绍的大部分CSS技巧将显得更加有用。如果仅依赖拖放来完成Web设计，将会发现本书在很多方面技术性太强。但愿这不会让读者丧失拓展知识的勇气。

4.CSS高级用户

即使是对CSS了如指掌的读者也能从阅读本书的过程中受益良多。本书侧重于视觉艺术，辅以实际的CSS示例，这些实例均出自当今最具创意的一些设计师之手；书中涉及的主题丰富多彩，即使是那些经验最为丰富的专业人员也能从中学到一些全新的技巧。

Those familiar with the ins and outs of the box model, floats, and selectors will still find plenty to learn. The visual ...

Continue Reading →

一般而言，搜索引擎只识读文本内容，对图片文件视而不见，也就是说识别不是那么的好。同时，图像文件直接延缓页面加载时间，如果超过20秒网站还不能加载，用户极有可能离开。因此，除非网站内容是图片为主或者图片至关重要，否则尽量避免使用大图片，更不要采用单纯一张大图外加热点的方式制作网页,下面说说图片SEO优化。

网站图片SEO优化有三点要注意：

1、在保持图像质量的情况下尽量压缩图像的文件大小。

2、增加图片ALT属性：每个图像（img）标签中都有ALT属性，搜索引擎会读取该属性以了解图像的信息；因此，最好在所有插图的ALT属性中部有文字描述：并带上该页关键字在其中。

3、在这个图片上使用超级链接，以增加其受访问的几率。

Google的图像搜索(Googlebot-Image)和Google的文本搜索(Googlebot)不是同蜘蛛。

总结：避免使用大图片，使用Alt属性、文本或链接优化图片。

FLASH 优化：

>Flash 会使页面很好看，不过FLASH 网页有一个非常致命的问题，即大部分搜索引擎无法识别 FLASH 中的信息。

FLASH 优化可以从以下三个方面来考虑：

1、做一个辅助 HTML 版本：

保留原有 FLASH 版本的同时，还可以设计一个 HTML 格式的版本，这样既可以保持动态美观 效果，也可以让搜索引擎通过 HTML 版本的网页来发现网站。

2、将 Flash 内嵌 HTML 文件：

还可以通过改变网页结构进行弥补，即不要将整个网页都设计成 Flash 动画，而是将 Flash 内容嵌入到 HTML 文件中，这样对于用户浏览并不会削弱视觉效果，搜索引擎也可以从 HTML 代码中发现一些必要的信息，尤其是进入内容页面的链接。

总结：避免使用FLASH 做首页。

一个网站导航系统的基础是网站的栏目设置，在栏目之下还可以进一步设计其他辅助的导航手段，例如一种常见的形式是，通过在各个栏目的主菜单下面设置一个辅助菜单来说明用户目前所在网页在网站中的位置。其表现形式比较简单，一般形式为：首页>一级栏目>二级栏目>三级栏目>内容页面。网站地图也可以理解为网站导航系统的一部分。此外，还可以专门设置更为职能的导航系统，如果需要，可以随时告诉用户所在的栏目和位置。

1.主导航醒目清晰

主导航一般体现为一级目录，通过它们用户和蜘蛛程序都可以层层深入访问到网站所有重要 内容。因此主栏目必须在网站首页第一屏的醒目位置体现，并最好采用文本链接而不是图片。

2.“面包屑型(Breadcrumbs)”路径

> 所谓“面包屑”是比喻用户通过主导航到目标网页的访问过程中的路径提示，使用户了解所 处网站中的位置而不至于迷失“方向”，并方便回到上级页面和起点。路径中的每个栏目最 好添加链接。

即使没有详细的路径来源，也至少应该在每个子页面提示回首页的链接，包括页面的 LOGO 作链接。良好的目录导航，可以提高网站的流量。

3.首页突出重要内容 ：

>除了主栏目，还应该将次级目录中的重要内容以链接的方式在首页或其它子页中多次呈现， 以突出重点。搜索引擎会对这种一站内多次出现的链接给予充分重视，对网页级别 （PageRank）提高有很大帮助，这也是每个网站首页的网页级别一般高于其它页面级别的重 要因素，因为每个子页都对首页进行了链接。

例如：以前很多人使用博客做排名，原因就在于博客首页PR值大，而刚刚更新的博客会出现在首页，如果此时 搜索引擎来索引，收录，对个人博客作用很大，通常能够获得不错的排名。

4.使用网站地图：

>网站地图（Site Map）是辅助导航的手段，多采用文本链接，以加快页面加载速度。 尤其对于那些采用图片导航和动态技术生成的网页，通过在网站地图中进行文本链接， 可在一定程度上弥补蜘蛛程序无法识别图片和动态网页造成的页面不可见的风险。

需要注意，网站地图也要突出重点，尽量给出主干性内容及链接，而不是所有细枝末节。

一页内不适宜放太多链接。Google 明确提出“如果网站地图上的链接超过大约 100 个，则最好将网站地图拆成多个网页”。 参考地址：网站管理员支持中心 。

总结：良好的导航结构能够使搜索引擎收录更多的网页。

5.Google SiteMap：

Google新推出的Sitemap，是对原来robots.txt的扩展，它使用XML格式来记录整个网站的信息并供Google读取，使搜索引擎能更快更全面的收录网站的内容。 Sitemap的作用就好像为网站提供了整站的RSS，而Google就是这些RSS的订阅者，只要网站有更新就会自动通知Google。这样一来，搜索引擎的收录由被动的拉变成了主动的推。

总结：利用google sitemap,可以提高收录的数量。

网站的目录结构的层级对SEO的影响很大。网站的目录层级不要太深，目录结构越简单，搜索引擎访问就越容易，目录结构层级越深，搜索引擎爬虫就越不容易抓取。URL 是统一资源定位，即每个网页的网址、路径。网站文件的目录结构直接体现于 URL。清晰简短的目录结构和规范的命名不仅有利于用户体验和网址传播，更是搜索引擎友好的体现。

1.目录访问层次：

即通过几层能够访问到最终页面，Google 最好为三层。

问题1：如果我的网站目录层次大于三层，该怎么办？

回答：由于三层的目录，容纳的页面有限，需要多级目录。
这个时候使用前面我们讲过的二级域名的方式扩大级数。因为二级域名算独立网站，目录层次从当前二级域名算起。

问题2：为什么有的网页在本网站层数很多，也被Google收录呢？

回答：这些页面被其他网站引用，而Google从其他页面进入这个页面也少于三层。
可以使用 link 命令查询该页的反相链接。

link 命令只能查询3个月前的历史记录，当前的外链需要3个月后查询。

问题3：所有的搜索引擎是否都和Google一样？

回答：不是，百度收录的时候相对宽容一些。

总结：三层目录，是最佳的目录结构。

2.目录和文件命名：

a.根据关键字无所不在的原则，可以在目录名称和文件名称中使用到关键词。但如果是关键词 组，则需要用分隔符分开。我们常用连字符“-”和下划线“_”进行分隔，URL 中还经常出 现空格码“%20”。

因此，目录和文件名称如果有关键词组，要用连字符“-”而不是下划线“_”进行分隔。

问题：所有的搜索引擎是否都和Google一样？

回答：不是
在百度图片中，拼音路径比较有效的。

b.URL 应该越短越好。

有人为了单纯增加关键字而额外建多一个带有关键字的子目录，改变目 录结构。由于 URL 中含有关键字本身对排名提高帮助并不大，因而这种做法多此一举，也是搜索引擎反感的。

例如：要做英文关键词 computer，这样的目录 http://www.ibm.com/computer/computer/computer.html 是错误的。

总结：合理的目录命名，可以对网页排名是加分的。

3.绝对 URL 和相对 URL：

绝对URL ：即网页路径使用包含顶级域名在内的完整的URL 。 如 ： www.yoursite.com/page1/index.html 是一个绝对路径，其中/page1/index.html 则为相对 路径，由浏览器自动在该链接前加上 www.yoursite.com。

总体上，Google 在排名时并不在意 URL 使用的是相对路径还是绝对路径。

目前很多网站都有数据库驱动生成的 URL，即动态 URL，往往表现为在 URL 中出现“?”、“= ”、 “%”，以及“&”、“$”等字符。动态 URL 极不利于搜索引擎抓取网页，严重影响网站排名， 通常是通过技术解决方案将动态 URL 转化成静态的 URL 形式，如： 将http://www.domain.com/messages.php?id=2&type=5 转化为 http://www.domain.com/messages/2/5/ 下文将会专门提到动态 URL 的解决方案。

问题：为什么动态页面对搜索引擎不友好呢？

因为这样会陷入死循环。这就是所谓的蜘蛛陷阱(spider traps)。