The web design world is filled with excitement and experience, creativity and skill. Often, experienced web designers utilize a set of solid, proven techniques that others may not notice. Let's take a look at a few of these techniques and how you can implement them into your own site quickly and easily.

网站设计需要兴趣、设计经验、创造性与技能。通常，经验丰富的网站设计者拥有一套固定、有效、不被其他人注意的设计方法。下面我们会介绍这些设计方法，并且介绍如何快捷、方便地运用到网站中。

1. Combating Internet spam spiders
1. 防止散布垃圾邮件

Often, a bony, lanky black spider will crawl around your web site, wiggle its little feet in excitement, gather up your e-mail address and store it near its pinchers. Then, when it returns to its master, it will religiously add all gathered data to a huge nest of e-mail addresses, then used as bait to sell to marketing firms.

通常，一只瘦长的“黑蜘蛛”会在网站周围徘徊，兴奋地挥舞着腿脚，窃取你的电子邮箱地址。然后，把获取的地址添加到一张包含许多电子邮箱地址的列表中，作为推销公司的工具。

Those little black spiders are software utilities that slither underneath your page's surface, at underlying HTML code, specifically for a standard formatted e-mail address ([email protected]). This can be the most effective method for gathering e-mail addresses and needs to be thwarted. There are a number of techniques web designers can implement to protect against these creepy crawly little annoyances.

这些“黑蜘蛛”就是潜伏在网页下面，位于HTML编码中的软件应用程序，这些软件尤其容易窃取标准格式的电子邮件地址（邮箱名@域名.com）。这可能是收集邮件地址最有效的方法，也是我们应该反对的方法。网站设计者可以采用一些技术，避免“黑蜘蛛”的侵扰。

Of the many, here are three that can work quite well.
下面介绍三种最有效的方法。

1. Use HTML symbols. To disable spiders from grabbing your e-mail address, some formatting modifications need to be made to fool the software. All e-mail addresses use the at symbol (@), and spiders are taught to look for them. HTML symbols are written directly into the HTML code, but are interpreted by the browser into their actual meaning. The HTML symbol for the @ sign is &#64;. So, how do we implement something like this? <a href="mailto:name&#64;domain.com">

运用HTML符号。通过修改格式，防止电子邮件地址被窃取。所有的e-mail地址都包含@符号，而窃取软件就是寻找这个符号。HTML符号直接写成HTML编码，浏览器会把编码翻译成现实内容。@的HTML符号是&#64;，下面就是e-mail地址的HTML符号：<a href="mailto:name&#64;domain.com">

All we do is replace the @ sign with the HTML symbol that represents it. This method, however, is sometimes caught by more sophisticated software. Although most are not quite as advanced, they do exist. How do we surpass this hurdle? Let's try some JavaScript.

我们只需要用HTML符号代替@，然而，有些软件也会在这种情况下窃取邮件地址。尽管大部分软件并没有这么先进，但并不是不存在这样的软件。如何解决这个问题呢？可以利用JavaScript。

2. Using JavaScript, we will simply break up the e-mail address into four different sections, 1: name, 2: the @ sign, 3: domain, 4: extension. Here is a simple implementation of JavaScript to perform this action.

运用JavaScript。我们把电子邮件地址简单分成四部分：1：邮件名， 2：@ 符号， 3：域名，4：扩展名。下面就是一个运用JavaScript的简单例子。
<script type="text/javascript">
name ="you"
domain ="domain"
extension =".net"
document.write('<a href="mailto:' + name + '@' + domain + extension +' " ' +' >e-mail link here ');
</script>

The above code is fairly self-explanatory. We define three variables, name, domain and extension, and simply concatenate those variables within a document.write statement to the browser. Notice we use HTML's anchor tags within the write statement so your browser will interpret the e-mail link correctly.

上述编码很简单，这里不再介绍。我们需要自己确定三个元素：邮件名、域名以及扩展名，并且需要利用document.write说明把这三个元素连接起来，然后呈现给浏览器。我们利用HTML锚标签，浏览器才能正确翻译电子邮件链接。

There is another problem with using this method...can you figure it out? JavaScript is client-side, which means although spiders might not be able to interpret your e-mail address, browsers with JavaScript capabilities turned off will not either, meaning your e-mail address will not be displayed to the user.

运用这个方法也会出现一个问题：不易辨认。JavaScript属于client-side，也就是说，如果窃取软件不能辨认邮件地址，带有JavaScript功能的浏览器也不能辨认。这样用户就不能看到你的邮件地址。

How do we fix this problem? Can we get away with refusing to display any e-mail address? Yes, we can, but we still must provide a way for the user to contact us. The solution is a rather simple email form.

如何解决这个问题呢？我们能够摆脱这种情况吗？当然，但需要提供其它联系方式。解决办法就是提供一种相对简单的电子邮件地址形式。

3. The third might be the only full proof method of protecting yourself against spam spiders, and that is simply refusing to display your e-mail address. Instead, if your server supports server-side processing, like Perl, ASP, Cold Fusion or PHP, simply design a feedback form, and call a server-side script to process the data behind the scenes. Sorry boys, spiders can't dig quite that deep.

第三种方法可以彻底避免e-mail地址被窃取，方法就是不要出现电子邮件地址。如果服务器支持server-side程序（例如：Perl、ASP、Cold或者PHP），可以设置反馈形式，允许server-side在后台处理数据。窃取软件不会深入到这里。

I am a huge advocate of PHP, but choose whatever language that your host supports. Please note that if your server does not support any server-side programming language, you are out of luck in this regard. Chose between the two aforementioned methods, and stick with it.

我非常支持PHP，但你需要选择虚拟主机支持的语言。请注意，如果服务器不支持server-side程序语言，你就要放弃使用。这时，你可以从前两种办法中选择一种，运用到网站中。

2. Take the typography test
2. 注重排版设计

Our web sites are nothing without content, and most content is comprised of simple text. Many web designers neglect to pay attention to their topography, and it shows. Proper topography varies based on where the text is and what purpose it serves. Although there are no rules etched in stone, there are a few general techniques that should be followed. Although some of these tips may seem elementary, I find many of them are not followed.

有些网站只是简单地罗列内容，大部分内容由简单文本组成，许多网站设计者忽视了排版的重要性。恰当的排版应该根据文本内容以及网站目标进行设计，我们没有固定的规则可以遵循，但我们可以借鉴以下几种设计方法。尽管这几种方法很基本，但我发现很多网站并没有遵循。

• Headings
  标题
  
  Clearly, headings should be larger, by 1 or 2 font sizes, than your body text. You may consider bold, but be cognizant of the letter width. Arial Black, for example, may create letters too fat for your taste. When using colors, be sure the colors contrast well with the background color of your site. Black and dark gray do not contrast well, while black and white (or light gray) work quite well. Sometimes, even a simple color change can create useful headings.
  
  很明显，标题字体应该比正文大，可以利用一至两种字号。可以把标题加粗，但要注意字母宽度，比如说，Arial Black字体可能会很宽。颜色搭配时，字体与背景颜色要协调，比如说，黑色与深灰色搭配，效果并不好；白色（或浅灰色）与黑色搭配，效果会很理想。有时，简单的色彩变化就能产生突出标题的效果。
  
  Also be sure to cascade your headings. A main heading, for example, would be larger than subheadings. This effect creates a sense of emphasis and flow to the information.
  
  标题要有层次感。比如说，主标题的字号要比副标题大，这样会创造强调效果，引导读者继续阅读文章。
  
  Do not italicize your headings. Italics are meant to underscore particular content, but since the text is a heading and of larger size anyway, italics are redundant and often make the text difficult to read.
  
  标题中避免出现斜体字。斜体字可以用来强调某些内容，但由于标题字号比较大，已经非常醒目，所以使用斜体字是多余的，还会使标题难以阅读。
• Fonts
  字体
  
  The default is Times New Roman, which works fine, but many think it is boring. I have experimented with Arial, Georgia and Verdana, and have found Verdana the most readable font face available. This is a personal preference, but fonts should be restricted to the above four to ensure compatibility between all users of your web site. If your user's browser does not support your font choice, their browser will revert to its default. Since browsers have increased support for CSS, or Cascading Style Sheets, whenever possible, use CSS to define your fonts, rather than HTML's <font> tag. Also, be sure to keep your font sizes large enough for visitors of all ages and eyesights.
  
  默认的Times New Roman字体，效果不错，但很多用户并不喜欢者众字体。我利用Arial、 Georgia 、Verdana做过试验，发现Verdana是最容易阅读的字体。当然，字体的选择与个人喜好有关，但应该严格限制为以上四种字体，保证网站用户的兼容性。如果用户浏览器不支持这种字体，就会将其转换为默认认字。由于浏览器已经支持CSS，如果可能，可以利用CSS定义字体，效果会比使用HTML中的<font>标签好。同时，字号要足够大，保证各个年龄段以及各种视力水平的人，都可以浏览。
• Stress Styles
  强调
  
  Avoid using all capital letters within your text, as it makes it difficult to read and implies you are shouting at the reader.
  
  避免在文章中使用大写字母。否则用户会因为难以阅读文章，而对网站感到厌烦。
  
  To stress words within your body text, decide on a format and stick with it. Some choose bold, while others choose italics or underline. My personal favorite is italics, but any of these can work well. Be careful when using underline, however, as it can be mistaken for a link. In addition, do not overuse these stress styles.
  
  选择一种强调格式，坚持使用。粗体、斜体以及下划线都是不错的选择，我个人更喜欢使用斜体。使用下滑线时，用户容易误认为是链接，所以运用时要谨慎。此外，强调内容不应该过度出现。
  
  Entire body text should not be bold. Bold, like italics, is used to emphasis words, and usually an entire body of copy should speak for itself in regularly styled text. I like to use CSS to space my body text out
  
  正文部分不应该出现粗体。粗体与斜体都是强调词语的方法。通常，正文应该设置正常字体，我喜欢用CSS安排这些内容。

3. Metatags make your site search engine friendly
3. Meta标签利于搜索引擎优化

Metatags are what search engines use to display your site when a user searches for keywords within a search engine. Usually, web designers include at least three metatags, title, description and keywords.

用户在搜索引擎中键入关键字之后，搜索引擎利用Meta标签呈现网站。通常，网站设计者至少会设置三个Meta标签：标题、说明、关键词。

A great thing about metatags is they are easy to implement, directly within the <head> and </head> tags. Let's take a look at what the three aforementioned metatags look like.

Meta标签使用很简单，直接包含在<head> 与 </head>标签中，上述三种Meta标签（标题、说明、关键词）如下：
<META NAME="Title" CONTENT="Title here">
<META NAME="Description" CONTENT="Description here">
<META NAME="Keywords" CONTENT="Keywords here">

You can copy and paste the above three lines of code and place them within your HTML source code; simply type in your web site's title, a description (or summary) of your web site, and keywords, usually separated by commas. Then, simply submit your web site to as many search engines as you can get your hands on, and watch your site's hits improve.

你可以直接复制上述标签，然后粘贴到HTML编码中；键入网站标题、网站说明（摘要）以及关键词，通常用逗号隔开。之后，把网站提交给搜索引擎，查看网站点击率。

I have created a little utility to automatically generate metatag code, including the above three and a few more. Click here.

我创建了一种自动生成Meta标签的应用程序，可以创建更多的Meta标签（不仅包括以上三种）。查看更多内容，点击这里（Click here）。

4. Always provide a method of contact
4. 提供联系方式

Always, always provide some method of communication for your users. Many web developers will include e-mail links and feedback forms on their site. Doing this tells your users that you care about what they think of your site, and also suggests your encouragement for them to e-mail you are share.

保证为用户提供联系方式。许多设计者会在网站中设置电子邮件链接与用户回馈窗口，让用户了解网站在意他们的想法，这样用户更愿意提出意见与建议。

Be sure, then, to check your e-mail often. There is nothing more frustrating then having to wait a week or more for someone to respond to your e-mail. Checking your e-mail ususally takes 2 minutes...do it as much as you can and keep your web visitors happy.

保证经常查看邮件内容。最让用户沮丧的莫过于，一周以内，电子邮件内容没有得到回复。查看邮件只需要两分钟，两分钟时间就能让用户感到满意。

If your server supports a server-side language, like Perl, ASP, Cold Fusion or PHP, either design one or head off to a script repository and perform a simple search. Listed below are a few resources offering free scripts:

如果服务器支持server-side类似于Perl、ASP、Cold Fusion 或者 PHP的server-side语言，你可以设计或者截取资料库，进行简单的搜索。以下网站提供免费资料：
Hotscripts.com
Matt's Script Archive
ResourceIndex (CGI)
ResourceIndex (PHP)
TotalScripts

5. Design with the little guy in mind
5. 不要忽视网站任何用户

In this day and age, all we think about are the bells and whistles, especially when it comes to slick new web designs. Not only are these new technologies often misused, it dramatically slows the speed of your site down, especially large animated .gifs and complex Flash programs.

现在，有些网站会出现铃声或嘘声，尤其是华而不实的新建网站。使用这些技术会显著减慢网站下载速度，尤其是.gif格式的动画图像以及复杂的Flash程序。

Although there are more broadband users than ever, never design specifically for them. There are still 28.8 users out there, and designing your site so waiting time exceeds 10 seconds will send those users to a competitor's site.

尽管现在宽带用户越来越多，但电话拨号上网用户仍然存在。如果网站下载时间超过10秒，电话拨号用户就会登陆竞争对手的网站。

Web designers need to keep their sites simple. Far too many, especially newer web designers, have fixated their eyes upon the gold when they have not yet mastered the silver. Only use graphics where you need them. Never use .gif animations unless absolutely, unavoidably necessary, which is rare. Additionally, do not use large, intricate backgrounds on your pages, as they hinder the readability of your text and increase load time.

网站设计要简单。很多网站设计者（尤其是缺乏经验者），经常在没有掌握简单技术之前，就开始利用难度更大的设计方法，这是不可取的。在需要时，只可以使用图片，避免使用.gif动画图像，除非很有必要。此外，避免使用面积大、内容复杂的页面背景，否则会影响文章的可读性，增加网页下载时间。

Design with the end user in mind. Assume the user is connected through a 28.8 modem with a 15" monitor at 800x600 resolution using Netscape. Trust me, those visitors will love you (and support you) for it.

考虑最终用户。如果用户利用传输速率为28.8的调制解调器进行网络连接，显示器为15英寸，分辨率为800x600，浏览器为Netscape，相信我，这些用户会喜欢你的网站。

Wrapping it up
全文总结

We have looked at 5 tips every designer needs to keep in mind when doing the work they love. Although communication is essential, steps can be taken to decrease the amount of spam in your little brown mailbox.

网站设计者工作时，应遵循以上5条建议。尽管交流很重要，但我们可以采取措施减少邮箱中的垃圾邮件数量。

Designers also must make sure their topography is easily readable and logically designed. Moreover, search engine friendly sites are often popular sites, and those who design for the little guy greatly improve compatibility with all potential users.

设计者同时要保证网页内容的易读性以及结构合理性。此外，还要进行搜索引擎优化，因为与搜索引擎友好的网站通常是受用户欢迎的网站。此外，遵循第五条建议，可以吸引更多潜在用户。

Using these tips will lift your site to another level and ensure every visitor gets the content they are looking for.

运用以上方法进行设计，网站会提升一个层次。用户可以在网站中找到需要的内容。

自己动手设计网站 综合考虑网站内容创作、外观设计、网站利用三个要素

评论 (0) All