这是一篇翻译文章，原文及参考的链接可以到我的英文博客 10 common web design mistakes to watch out for 找到。

如果你是使用博客软件来写博客，并对网页制作不很感冒，本文也许对你没有什么帮助。但当你从头开始制作一个网站时，就要力求克服下述这些很容易犯的错误。不管你做的网站是复杂正规的商务网站，还是一般的个人网站或非赢利的组织网站。

1、没有提供描述你网站基本情况的信息

2、忘掉了图片或链接中的 alt 和 title 属性标签

切记要经常使用 alt、 title 等 XHTML 属性标签。这点对那些无法显示图片的浏览器或有视力残障的访客们很有帮助。如果你是在设计政府部们的网站，更应该注意这点了，在美国有些规章制度规定政府的网站一定要达到一定 Accessibility 标准的。

3、经常更改归档网页的链接

你要经常更改网站上的网页链接，这是很正常的。但尽量降低修改归档网页的链接，比方说将老网页删除，或者移到另一个文件夹。这样会造成一定的“文件不能找到”的错误网页，毕竟这也不利于你已经形成的搜索结果。而且，另一部分带来网页交通的是人们之间推荐的网页链接，我想频繁修改你的网页链接不会带来多少好处的。

4、不将你的内容日期化

一般来说，你是应该经常更新你的网页内容以留住回访客。这样，你最好将你的网站内容更新日期加上，这样很利于访客明白那些是新的内容。即使在很少的情况下，你的某些网页可能很少更新，那在网页上加上“最后更新”日期也是很有用的。如果，你有时间，时不时更新一下你的“最后更新时间”也是不错的想法。你网站的读者越明白他们读到的是更新的信息，他们越有可能会再次回访。

5、创建杂乱、忙碌的页面

将太多的信息放在一个页面里会留不住你的访客的。保持你的最基本的观点言简意赅，然后在有必要时提供可参考的详细信息的链接。使用第一点、第二点之类的清单是表达你繁多信息的一个好方法，这样能是访客清楚的看到你的表达思路。同样的道理，罗列链接时也不要一股脑全推在一个地方。

6、过多的图片

俗话说，一个图片胜过千言万语，但太多的图片，就像你一下子要给人讲千句万句一样难受。图片需适可而止，而且每个图片应该与你的文字内容有相关性。而且太多的图片也影响网页下载速度。原则上，除了一些 banner 或必须的商标图，和解释内容的插图，图片能少用就少用。

7、使用太多的间接链接、链接转向

不要一味防止其他网站直接链接到你的网站内容。不要象一些无聊的新闻网站，给出的新闻链接都是连到网站的首页，这样既不帮助你的SEO，也对你的网站访客带来沮丧。要鼓励别的网站直接连到的你的网站内容。

8、使访客很难分清你更新的内容

象我刚才在 #4 里说的那样，我们要适时、适当地更新网页。但当你的网站更新频繁时，一定要记住能使你的访客轻易找到你的更新信息。不要将你今天更新的信息放在三年前的内容目录里，而且还没有任何地方能告诉访客那里是哪里。

新的内容应该是那种新鲜得让你的读者觉得确实有价值。如果你的网页确实是需要更新频繁，建议你使用一定的分门别类，将你的新东西归到一定的类别，能帮助你的读者找到想看的东西，而且在大网站里，应用一定的搜索功能也能帮助你的读者更好地找到你更新的东西。

9、显示太小的图片预览图

但不想显示一些很大的图片时，使用预览图并将预览图连向原始图是很好的做法。但要注意不要将预览图弄得太小了，看不清的预览图与没有预览图是一个效果。

当然，要真正地使用尺寸缩小的图片来做预览图，而不是使用图片的尺寸属性，或CSS来将原始图显示尺寸放小来做预览图。要知道，不管你的显示尺寸有多小，你的读者在打开那个网页时还是要等很久因为网页传递的还是原始图片它本身。

10、忘掉了给所有网页按个标题

许多网页制作者老是忘了给每个网页按上一个有明确意思的标题，而是使用一些网页制作工具默认的”Untitled Page“ 标题。如果，我告诉你每个搜索引擎都是用网页标题来标识你的网站网页，而且这些网页标题会出现在别人收藏你网页的标题上，你会不会改改这个习惯呢？

另一个错误就是喜欢将所有的网页取同一个标题，再就是将标题取得很长。记住，太长的标题与没有标题一样可怕。

【编后语】做网页现在再也不是一个很难的活了，在有一定工具的情况下，大部分非IT人士都能很快创建出一个网页。但是，他们往往不知道或者忽视上述10个简单的错误。这些小毛病可以被其他的方面来掩盖，但是也不能因为你已经有了一只脚就非得将另一只砍掉不要吗。想要使你的网页给你带来成功，记住这些网站设计的基本原理不会有坏处的。

Copyright ©2007 CNET Networks, Inc. All rights reserved.
For more downloads and a free TechRepublic membership, please visit http://techrepublic.com.com/2001-6240-0.html

既然我现在主要用 wordpress 平台的博客作为主博，那么我就要想法将所有 blogger 上我的博客的游客引过来。实现这样，包括两步：第一、禁止在镜像网站上的评论功能；第二、每篇文章里都要有指向新博客网站的评论链接。

第一、禁止在镜像网站上的评论功能

在 blogger 网站上禁止评论十分简单。登陆到 blogger.com，然后进入 Setting（设置） –> Comments（评论），在评论页上，选择 Hide （隐蔽） 选项来隐掉所有旧的和新的文章评论。

保存并重新发表你所有文章后，你就会发现你博客网上所有文章没有观看和发表评论的链接了。

第二、每篇文章里都要有指向新博客网站的评论链接

理论上，应该是在镜像博客网站上的每篇文章里都有一个链接，游客一按这个链接就可以直接跳到我主博客网上同一个文章的发表评论处。

可惜，一我不愿意手动在每篇文章里加入此种链接。二由于我的主博并没有按文章标题来做固定链接，所以想从我blogger的文章里自己加上固定链接跳到我主博的文章是有点困难。

我也不愿意只给每个文章加上我主博的首页链接 (http://weblog.lichao.net) ，那样又需要游客重新在我主博上寻找那篇文章。

想了想，就做了一个折衷办法：通过镜像博客文章的标题在主博客里自动搜索到相同主题的帖子。这样，至少游客可以少点麻烦去重新搜寻了。

新版blogger里

首先通过Dashboard（控制板） –>Layout（外观） –> Template（模板） –> Edit HTML（修改HTML)。然后选中修改超文本标志语言的输入框右上角的 Expand Widget Templates （浏览所有widget模板）。

改 HTML 时，先找到标签 <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> 这是显示文章评论多少的地方，然后加入以下代码。

<!-- added on 2007-07-05 to link back to my main blog -->
<a class='comment-link' expr:href='"http://weblog.lichao.net/?s=" + data:post.title'>View Comments</a>

这个 data:post.title 就可以自动生成文章的标题，并传到主博客网站的搜索网页上去。

改好这个地方后，再到平常显示所有文章评论的地方。在我的blogger模板里，我是先找到以下代码标签：

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>

和

<b:if cond='data:post.allowComments'>

再插入自己的代码，插完后的代码就象以下的：

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<!-- added on 2007-07-06 to link back to main blog -->
<a class='comment-link' expr:href='"http://weblog.lichao.net/?s=" + data:post.title'>Please click here to leave your comments</a>
<b:if cond='data:post.allowComments'>

传统旧版的 blogger 的修改方法

旧版的有点不一样，主要是要用 <$BlogItemTitle$> 来自动传递文章的标题。

也是先到你的控制板里，到 Edit HTML 部分。然后找到一般显示评论数的地方，我的是在这里：

<p class="post-footer">
......
<BlogItemCommentsEnabled>
<a class="comment-link" href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnclick$>><span style="text-transform:lowercase"><$I18NNumComments$></span></a>
</BlogItemCommentsEnabled>

在</BlogItemCommentsEnabled>后面插入新的代码：

<!-- added by Chao on 2007-07-05 to forward traffic to new weblog site -->
<a class="comment-link" href="http://weblog.lichao.net/?s=<$BlogItemTitle$>" target="_blank"><span style="text-transform:lowercase">查看评论</span></a>

同样在显示所有文章评论的地方，一般在 <!– Begin #comments –>标签后面。

这个地方改完后就象下面这样：

<!-- Begin #comments -->
<ItemPage>

<div id=”comments”>

<!– added by WebGuru on 2007-07-05 to forward traffic to new weblog site –>

<p style=”padding-left:20px;”>谢谢你对本文的兴趣和阅读，由于此博客已转为我的镜像博客网，所有文章的评论功能已经取消。如果你想就此文发表评论，请<a href=”http://weblog.lichao.net/” target=”_blank”>按此连接到我的主博客站</a>，然后将你的评论发表到相应的文章后面。若需要帮助来寻找到相应的文章，请试着用相同的文章标题<a href=”http://weblog.lichao.net/?s=<$BlogItemTitle$>” target=”_blank”>进行搜索</a>。

<BlogItemCommentsEnabled><a name=”comments”></a>

我的英文原文：how to forward traffics from my blogger to the same post on my wordpress blog
Technorati : blogger hacks
 Del.icio.us : blogger hacks

首先要说明的是我不想花太多的时间来研究修改blogger产生自动的类别链接。所以我就用了如下的一个笨而简单的方法。你们不妨也试试看，还是十分有效的。

1), 登陆你的Google Blogger 管理界面，然后选择模板 Template。

2), 然后在修改HTML（ Edit HTML）的界面，找到你大概要放置”分类文章”的地方。一般会在<!-- Begin #sidebar --> <div id="sidebar"> 和 <!-- Begin #sidebar --> <div id="sidebar"> 标签之间。当然具体情况要因人而异，因你的模板而异。

3), 添加你的分类文章的代码：

<!-- Begin #categories-container -->

<div id="categories-container">
<h2 class="sidebar-title">Category</h2>
<ul class="profile-datablock">
<li class="categories-link"><a href="/labels/5Y2a5a6i6L2v5Lu2.html">网页设计</a></li>
<!-- other category labels here -->
</ul>
</div>

<!-- End #categories -->

请注意： 在上面的代码里，红色的代码请用你自己的分类标签页面来代替。如何找到你的页面？打开你自己的 blogger 博客，在每篇文章的结尾处会有你的分类标签链接，拷贝那个链接就可以了。当然，你要浏览所有文章以确保你找到了所有的分类。当然，在 blogger 的分类标签管理界面里也可以给你启示。

4) , 接下来就是你的美工设计活了，可以通过CSS或内部style将你的 categories-container 变得更漂亮一些。

5), 保存模板，再重新发布你整个博客就可以了。

今后若你又有新的分类了，再重复以上步骤就可以了。

Technorati : blogger hacks, blogger tips, how-to classic blogger
 Del.icio.us : blogger hacks, blogger tips, how-to classic blogger

因为我的网页有 ASP, ASP.NET 也有 PHP 的，所以一个跨网页程序语言的小工具十分有用。Javascript 是我的首选，经过几分钟的摸索，我得到了下面这个简单易运用的小Javascript脚本。你们也可以试一试看！

生成一个 Javascript 脚本文件，里面有一个新的文本输入框，隐含表单值和随机产生的文字或数字。

在这个新的脚本里，利用Math.random函数可以快速生成一个4位数的随机数字。

//产生一个四位数的随机数字
var i=parseInt(Math.random()*8999 + 1000);

//新增一个文本输入框到你的网页表单
document.write('<input type="text" name="code_verfiy" value="" />');

//将刚产生的那个随机值赋予给一个新的表单隐含值
document.write('<input type="hidden" name="code" value="' + i + '" />');

//再将刚产生的那个随机值显示出来，从而网页访问者可以照此填写那个新的文本输入框
document.write('<label style="" >' + i + '</label>')

通过脚本调用可以将这个 Javascript 脚本文件放到你的所有网页表单里

调用这个脚本的位置一般来说是放到你提交表单的那个按钮之前。假设我刚才生成的那个脚本文件叫code.js，你的代码会是这样的:

<form name="myForm" action="save.asp">
…… //其他表单内容
<label>Verify Code</label> <script language="JavaScript" type="text/javascript" src="code.js"></script>
….
<input type="submit"....>
</form>

最后，增加一段判断代码来确定提交的表单数据是否来自你的网页本身

不管你是运用同一或单独文件来处理你的表单，你都可以十分简单地加一段代码来判断是否那个随机值被键入。下面的这段代码是用 ASP (VB) 语言写的，如果你使用asp.net，php等，你可以运用它们自己的语法来修改。

‘//首先，判断是否有你设定的code_verify值，然后，判断是否匹配你设的那个隐含值 (ASP VB)
If Request.Form("code_verify") = "" OR Request.Form("code_verfiy") <> Request.Form("code") Then
‘//如果没有匹配，则停止执行，显示错误信息
Response.write ("error, do not access to this page directly")
Response.End()
Else
‘//匹配，一切正常。这下面就是你没有验证码之前的代码。
End If

其他可以改善的地方

好了，你已经有一个可以使用的文本验证码了。如果你还想花时间，你可以将它改的更好。

首先申明，我只在我的网站上测试过，你下载并使用在你自己网站上所带来的所有可能风险，本人概不负责。

好，首先我们可以将那段生成文本输入框的代码从javascript脚本里直接移到你的表单里，这样，你可以用一些客户端脚本来判断它是否被填写。

当然，你还可以增加一些样式使你显示的随机数值看起来像流行的图片验证码，比方说增加一个边框，改变背景和文字颜色等等 (像这个 1234 )。

还有，你也多写一些Javascript来随机产生一些除数字以外的字母等等。

祝大家编程快乐

如果你想参考我的英文原文，请点这 How to create a simple non image validation bar in your web form quickly (http://eblog.lichao.net/archives/2007/programming/web-design/52/)

Technorati : Javascript, 网页编程
 Del.icio.us : Javascript, 网页编程

可是，上次介绍的那个设置并不完善。因为，那样并不能使你的读者有看WordPress博客般的感觉。每次当你点那个”继续阅读全文”的连接后，你的全部文章出现，使你又得从头将文章看一遍。这当然不是什么功能上的差错，只是我认为如果能够让读者直接跳到文章摘要后的开头将更好一点。 下面就是我动手改了的代码来实现这个直接跳到摘要后的功能。

1. 首先，要将你的所有帖子的原码进行一定的修改。找到那个可以实现摘要的代码，然后在它后面插入一个网页内部链接点(name anchor)。名字吗，可以自由取，我取的仍是 “fullpost”。这段代码应该是这样的： <span class="fullpost> <a name="fullpost"></a> 如果你不想每次都写这个代码，你可以将它放到你的新文章模板里。
2. 然后，到你的blogger模板，找到那个可以实现摘要功能的链接，加上那个你刚取好的内部链接点。改后的代码就像下面的一样.(新增的部分用红色表示).。 (传统模板里)

   <MainOrArchivePage
      <a href="<$BlogItemPermalinkURL$>#fullpost">
   继续阅读全文</a>
   </MainOrArchivePage>
   

3. (新版里)

   <b:if cond='data:blog.pageType != "item"'>
      <a expr:href="data:post.url#fullpost">继续阅读全文</a>
   </b:if>
   

4. 保存你改好的模板，再重新发布你的文章。则大功告成了。

如果你知道我在说什么，或者你需要首先了解怎样实现文章的摘要功能，请参考我原来的文章 – 怎样在blogger首页显示文章的摘要并点击后显示全文 或英文的帮助文献 How can I create expandable post summaries 。

通过模板代码的一些小改动，我就实现了这个想法。

首先，找到你想要改的侧栏标题题目的位置。一般来说，他们会在 <div id="sidebar"> 和 <!-- End #profile --> 之后。我用的模板这些标题是用 <h2>来包围的。所以，Previous Posts 看起来像 <h2 class="sidebar-title">Previous Posts </h2>.

找到后，复制整个 <h2>...</h2> 代码，然后紧随后粘贴并进行相应的语言翻译。

接着放置不同的页面判断代码。首页或归档主页的判断代码是<MainOrArchivePage> 它可以放在你改好的第一个标题前后。单个文章页面的判断代码是<ItemPag>你可放在第二个你复制并改好的标题前后。

最后，你的代码应该像如下代码：

<MainOrArchivePage>
<h2 class="sidebar-title">最近文章</h2>
</MainOrArchivePage>

<ItemPage>
<h2 class="sidebar-title">更早文章</h2>
</ItemPage>

保存你的blogger模板，然后重新发布你的博客网站就可以了。

注：如果你用的是新版本blogger，请参照相应的<b:if></b:if>语句来实现相同功能。

Technorati : blogger tips, how-to classic blogger, 博客软件
 Del.icio.us : blogger tips, how-to classic blogger, 博客软件

难点一：css原码放的位置。

按照帮助文件，主要是要用一个显示/隐藏的style，原码是

<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>

所以，正确的做法是另用一个style标签来实现。下面是我的代码，他们应该在 <head> </head>之类就行了。

<style>
/* Code to show/hide post------- */
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
/* End of code to show/hide post ------ */
</style>

难点二：看全文的连接的位置。

按照帮助文件，应该在主页的每个帖子的下面放上这样的代码，让读者可以接着读全部原文。

<b:if cond='data:blog.pageType != "item"'>
<a href="<data:post.url>">Read more!</a>
</b:if>

但每当我将它 post widget 后面时，一保存上面这段代码就奇怪地消失了。后来才知道我只能选中 Expand Widget Templates 选项，然后才能将上面那段代码放到 后面也就是post widget的中间才行。

难点三：链接的显示错误。 最后就是我老是被告知 <a href="<data:post.url>">Read more!</a> 在layout的HTML view是不允许的，经过一定的研究，只好将它修改成 <a expr:href='data:post.url'> 才可以。 所以，希望你们多加留心这新旧版本的区别。

English Keywords: google, blogger, blog hacks, tips, post summary, hide/show posts.

查看英文帮助原文

由于google谷歌越来越来聪明，以前我找到的几个方法现在不行了。所以不知道我自己琢磨这个方法能持续多久。现在google是将它的工具条做成iframe自动加到每个博客网上。我的解决方法就是通过 css sytle 将它不显示出来。用的代码是：


/* Code to remove blogger navbar

———————————————– */

#navbar-iframe, #b-navbar, #b-next {

height:0px;

visibility:hidden;

display:none;

}

/* End of code to remove blogger navbar

———————————————– */

具体放的位置是传统classic blogger里放到<style>….</style> 之间，新的blogger版本是放到<b:skin>…</b:skin>之间。

不妨试试看，若成功了给我一个评论。

English Keywords: google, blogger, blog software, hide navbar, blogging tips