遵循通用原则,网站看上去会更专业

Rules and preference for designing a website can differ from website to website depending on the target audience, whether it is entertainment website or corporate website or just a personal portfolio. But there are still somethings that are common in all websites, and if followed can make your site look better. So here are few things I would like to discuss.

 

网站设计要根据目标受众，选择设计方法。娱乐性网站，公司网站以及个人网站设计方法都不相同。但是网站设计中有一些通用原则，如果遵循这些规则，网站看上去会更专业。下面，介绍几个要点。

1. Font Style and Size
1.字号和字体

Selecting a right font and size is essential. For example fonts such as Verdana, Arial and Helvetica look especially good in websites, whereas fonts such as Times New Roman, Courier, Sans-Serif... etc types won't look good. Also the size of the font plays important role in website design, smaller sized fonts look neat but it is more difficult to read. So it is your decision to make a choice between the look and usability. Following is the comparison between Times New Roman and Verdana.

选择合适的字号和字体，是网站设计要考虑的一项重要内容。比如说，网站中使用Verdana、Arial和Helvetica字体，就会使页面看起来非常舒服，然而， Times New Roman、Courier、Sans-Serif等字体就不会有这样的效果。同样，字号在网站中也能发挥重要的作用，稍小的字号会使内容看起来更整洁，但不利于用户的浏览 。所以，你要在外观和可用性方面作一个选择。下面就是Times New Roman和Verdana的一个比较：

 

This sentence is in Times New Roman with size 3 （Times New Roman3号字体）

 This sentence is in Verdana with size 3（Verdana3号字体）
 
This sentence is

in Times New

Roman with size 2 （Times New Roman2号字体）

 This sentence is

in Verdana with

size 2 (Good

Choice) （Verdana2号字体）（是一个好的选择）
 
This sentence is

in Times New

Roman with size 1（Times New Roman1号字体）
 This sentence

is in Verdana

with size 1 （Verdana1号字体）
 

2. Using tables? Don't forget the cellpadding
2.使用表格时利用cellpadding属性

 

Almost all the websites use tables in one way or another, but using tables with a sense of design will make your site look better. If you use tables background colors in your page, then it is very important to use cellpadding, otherwise all the text inside the table will stick to the border of the table. Which is not recommended at all. Here is the Examples:

几乎所有网站都会利用一种或者几种表格，但是只有正确使用表格才会使网站看上去更美观。如果在网页中运用表格背景色，那你必须要运用cellpadding这个属性，否则表格内容会到边缘，这样的效果很不好。下面就是一个比较，上面的表格利用了cellpadding属性，下面的没有使用。 This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10. This table has a cellpadding of 10.
 

 

 

 

This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0. This table has a cellpadding of 0.

 

3. Design websites for 800x600 resolution
3.网站设计考虑800x600分辨率

While 1024x860 resolution is the most used resolution online, it is recommended to design your website 800x600 compatible. Because there are people who still use 800x600 resolution. There are different ways to design a website which is compatible to 800x600 resolution.

现在，用户使用最多的是1024x860分辨率，但是，必须保证网站可以在800x600分辨率的状态下呈现，因为仍然有用户在使用这个分辨率。要保证网站在800x600的分辨率下呈现，可以利用很多方法。

1. For example you can design it in a way that it will stretch to any size (any resolution), here is one good example of such website. Alamy.com

 

1.比如说，你可以将网站设计成能够自动适应任何尺寸（或任何分辨率）的网站，Alamy.com就是这样的一个网站。

2. Another way is fixed size such as this website. The size does not change no matter how much is the resolution. Yahoo.com

2.另一种方法就是将网站设计成固定尺寸，比如：W3pop.com，它不会随着分辨率的改变而改变。Yahoo.com也是这样的网站。

3. And finally not so user friendly but still acceptable design that is all the content is placed on the table not exceeding 800 pixels. There will still be a horizontal scroller on your browser but at least you don't have to scroll it when you are reading something on the site. Here is a good example of such site: Tomshardware.com

3.最后，还有一种方法虽然不是广为人知，但仍然有人使用，那便是在表格中放置宽度不超过800像素的内容。虽然会在浏览器上出现水平滚动条，但当你阅读信息时，你完全没有使用它的必要。Tomshardware.com就是这样的一个网站。

4. Pop up window? Bad idea
4.避免出现弹出窗口

Pop up windows are a good to catch user's attention and force him to take action (at least to make him close the window), but it is annoying and generally users don't like it. So unless it is very essential to use a pop up window for you - I would say avoid using it. Even though you can program it to pop up only once, it is still considered a bad idea.

使用弹出窗口，确实能吸引用户的注意力，促使他们采取行动（至少可以使它们阅读内容），但是大多数用户对这个感到厌烦。因此，只有在非常有必要的情况下，才可以使用探出窗口，不过，最好是一次也不要用。

Especially now with the browser's build in pop-up blockers, most of the popups are left blocked.

现在很多浏览器自带了弹出框屏蔽器，大多数弹出框都会被屏蔽。

5. Mention Image height and width in html <width="120" height="100">
5.在html中使用<width="120" height="100">来设置图片的高度和宽度

When browser opens a particular page it tries to understand the html, so when you leave the image without mentioning its dimensions, browser gets confused how much space it supposed to take, thus it will slow down the loading of the page. However if you mention the width and height of the image, browser can know exactly how much space should it allocate for particular image, and even before the image loads it can allocate this space to it and continue loading the rest of the page. So if you want your pages to load faster, don't forget to include image width and height.

 

当浏览器打开网页的时候，它会试图读懂html的语言，所以在没有涉及到图片尺寸的情况下，浏览器不了解图片会占用多少空间，因此图片下载速度会减慢。然而，如果设置了图片的长度和宽度，浏览器就可以了解图片的存储空间，会在下载以前分配图片的空间，然后继续下载网页的其它部分。所以，要使网页下载速度加快，就需要在在html中使用<width="120" height="100">来设置图片的高度和宽度。

 

6. Follow the web conventions.
遵循网站设计规则

Web conventions are very useful when it comes to web design, if you follow them you will make your user's life a lot easier. After all only useful things will become a convention. For example having the logo on the top-left corner of your website and linking it to the homepage is one of the conventions. Or employing consistent navigation throughout your website is another convention.

在设计网站时，遵循网站规则很重要，这样可以方便用户进行浏览。当然，只有有效的方法才会成为规则。比如说，logo要放置在网站的左上角，并且可以与首页进行链接，这是一个规则。网站的导航系统要连贯是另外一个规则。

 

7. Avoid under construction pages.
7.避免出现未建设完成的网页

 

Publish your websites only if it is fully completed, or if you have unfinished pages then do not put those pages online yet and do not provide link to them until they are fully completed. Under construction pages are totally useless, it will waste your user's click and might even generate negative effect towards your website (or you). Because if you think from user's perspective you don't want to click on the link just to find out that this page is under construction.

只有在网站建设完成之后，才可以在网上呈现，如果某些网页没有完成，就不要把它们放在网上，或者是不要进行链接。未完成的网页毫无作用，只会浪费用户的点击时间，这样会对网站产生消极的影响。因为，如果站在用户的角度考虑，你肯定不想链接完成之后，看到一个正在建设的网页。

 

8. Underlined texts that are not links.
8.不要给非链接文本内容添加下划线

nly links should be underlined, if you underline the text then make sure the user will not confuse it for a link.

能够进行链接的内容可以加下划线，但非链接文本就不要出现下划线，因为这样会使用户产生混淆。

9. Avoid intros and Welcome pages
9.抛弃引导页和欢迎页

Unless you have a very impressive intro (maybe designed by 2advanced) avoid using intros. As for the welcome pages that has an "enter" button and some info about the site should be avoided as well. Basically with welcome page you are stopping your users from actually seeing your site, you are keeping them one step behind. You never know maybe some of your users leave your site without even clicking on your 'enter' button, if so then you are loosing a potential customers.

如果引导页不是令人印象特别深刻，那就不要出现。出现“进入”以及某些信息的欢迎网页最好也不要出现。如果使用欢迎页面，那就意味着用户需要多点击一次，才能找到所需要的内容。你可能不知道，一些用户在点击“进入”键之前就已经离开网站了，这就意味着网站流失掉一些潜在用户。

 

我www.111cn.net的网站架起来有一段时间了,里面的文章有上万篇了,奇怪的是我有搜索引擎总是找不到我的网站,我查了原因,没想到,是我网站原创文章太少,所以我昨天写了一篇ajax+php用户注册功能的代码,发上去,没到第二就被google收集了,虽然给我带了的IP只有几个,但是让我太太的发现搜索引擎软件喜欢原创文章,

最后,各位站长如果想自己的网站被搜索引擎软件经常光顾的话,就多写一些原创文章吧.

Be aware of these common pitfalls when designing your site:

 

网站设计中，避免出现以下错误：

* The home page does not quickly tell you what the Web site is all about. You should be able to visit the home page of any Web site and figure out what the site is about, what type of products it sells, or what it is advertising within five seconds.

 

访问者不能通过网站主页立即了解网站内容。用户应该在5秒钟之内登录网站，了解网站内容、产品类型或者宣传内容。

* The poor use of popup windows, splashy advertising, splash pages (pages with neat animations and sound but which you have to watch for five to ten seconds before you are taken to the real Web site), and other Web design features that draw interest away from your Web site, products, and/ or services.

网站出现弹出框、令人眼花缭乱的广告、以及眩目的进入页面（运用动画、声音设计，需要5-10分钟的下载时间）。或者出现其它特征，转移用户对网站、产品或者服务的注意力。

* Poor Web site navigation. This includes broken hyperlinks, hidden navigation, poor wording of navigational links, links that take you to pages with no links, links that take you to the same Web page, and pages with no links back to the home page (always include a link back to the home page so that regardless of where site visitors are, they can find their way back home!).
设计不合理的导航系统。其中包括无效超链接、隐藏的导航系统、糟糕的字链接以及导航链接、不能链接的页面、错误链接、不能与主页链接的页面。请记住：不管访问者处于什么位置，网站都要保证他们随时可以返回主页。

 

* Believing that because you have a Web site, you have a marketing campaign or overall marketing and advertising strategy. You need to understand that your Web site is not your marketing strategy. Your Web site is just a part of your overall marketing strategy, depending on your business goals; for example, if you have a successful restaurant but want to advertise and promote your business on the Web. Creating a Web site is great, but if it is not promoted and advertised, no one will ever find it. By passing out business cards with your Web site URL embossed on them, you are using a traditional marketing campaign to promote your Web site. If you offer a downloadable/ printable coupon from your Web site, you are successfully using your Web site as part of your marketing strategy to meet your goal of increased restaurant sales.

网站是一种营销措施、营销策略。你要了解，网站不是一种营销策略，只是营销策略的一部分，并且要根据公司目标来制定。比如说，你希望在网站中宣传餐馆，如果网站构建后，没有宣传效果，网站也就没有价值。在名片中打印网址，是一种传统的宣传方法。但如果网站提供可下载、可打印的优惠券，就是一种成功宣传的方法。

 

* Failure to attain Web site relevance and content updating. There is nothing more dissatisfying to a Web customer than visiting a Web site that is grossly out of date. Incorrect pricing, products no longer available, dated content, and ancient advertising all signify to the Web site visitor that your devotion to your Web site is suffering greatly. Cramming your pages with non-relevant material will detract the visitor from getting the point of your Web site (the five-second rule mentioned earlier).

网站内容陈旧或者与主题无关。用户最不希望浏览过期内容，错误价格、不再提供的产品、陈旧的内容、过期的广告都会让用户感到厌烦。与网站主题无关的内容，只会分散用户注意力，导致他们5秒钟之内找不到需要的信息。

 

* Avoid too many text effects. Forget flashing text, reversing text, gymnastics text, or other eye-popping and dizzying effects, which do nothing more than annoy your site visitor. Don't create a "loud" Web site that contain so many blinking, flashing, twirling, and spinning icons, text, or graphics that visitors are overwhelmed by the effects and under-whelmed by the site content.

避免出现多种效果的文本。Flash文本、浮动文本、跳动文本或者其它令人眼花缭乱的文本只会让用户感到厌烦。闪动、眩目、旋转的图像、文本、图片会吸引用户注意力，导致用户忽视其它内容。

* Limit the number of graphics on your Web site so that you don't overwhelm your site visitors with "graphics overload." Don't use animated GIF images on your Web site. These were cool ten years ago, but in today's professional environment, they are just another "loud," annoying distraction that site visitors don't want to see.

限制图片数量，避免分散网站访问者的注意力，缩减下载时间。避免使用GIF图片。运用图片在十年前很流行，但在现在这种专业环境中，只是一种影响因素。

 

* Don't use Microsoft's themes (built-in design templates) when creating a Web site with Microsoft FrontPage. While FrontPage is bashed on a regular basis, we stand by the fact that it can be used to design great Web sites.

利用Microsoft FrontPage制作网站时，不要使用内置在设计模板中的主题。FrontPage不适合创建普通网站，但可以用来创建高质量的网站。

 

* Don't incorporate frames into Web site design. The use of frames within a Web site will drive customers away faster than anything!

避免在网站中嵌入框架，否则会流失许多用户。

* DO incorporate the proper Web site design elements to ensure that your Web site is ready to be found by search engines.

网站需要出现恰当的内容，便于搜索引擎搜索。

 

相信大多数站长都曾经遭遇过iframe木马的侵害，有朋友的网站被注入了N回iframe，心情可想而知。而且现在ARP攻击，注入iframe也是轻而易举的事，仅局域网里都时刻面临威胁，今天把原理细细地讲一下吧。

IE Only——一般只有IE害怕iframe这样的挂马，所以就拿IE开刀。

在阅读本文之前，我们先了解一下e­xpression：

IE5及其以后版本支持在CSS中使用e­xpression，用来把CSS属性和JavaScript脚本关联起来，这里的CSS属性可以是元素固有的属性，也可以是 自定义属性。就是说CSS属性后面可以是一段JavaScript表达式，CSS属性的值等于Javascript表达式执行的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

很多朋友都知道CSS可以直接描述一个可视标记的外观。例如：p{color:red} 则网页里 所有p标记里的文字颜色都会变成红色；iframe不也是一个标记吗？开始跟灵儿写代码吧，呵呵：

iframe{...这里写描述外观的CSS代码;}

仔细想想要防止iframe里的东东被下载的最好办法是什么？核心来了，那就是切断iframe里的请求，切断请求就是要迅速销毁iframe对象。如何实现呢，上面不是介绍了e­xpression吗？e­xpression是可以执行JS脚本的哈。语法格式如下二种：

标记固有的CSS属性名:e­xpression(JS表达式);
或 自定义属性名:e­xpression(JS表达式);

在这里我们选择第二种，代码应该大致是这样

iframe{v:e­xpression(JS表达式);}

接下来的问题是如何销毁网页里所有的iframe对象；使用JS实现的原理是这样的:使iframe里的请求地址变成空白页(about:blank)，再将iframe对象从DOM（文档对象模型）中移除就可以切断所有iframe里的请求了。移除DOM节点的方法比较多，我这里就用 outerHTML这个属性吧。CSS代码如下：

iframe{v:e­xpression(this.src='about:blank',this.outerHTML='');}

说明：前面的v字是灵儿自己定义的一个CSS属性，这里的this代表所有将要描述外观的iframe对象，中间的逗号代表二句代码一起执行，没有执行优先顺序，这可是强有力的保证噢。about:blank代表空白页，大家都知道的。outerHTML属性是DOM对象包含自身的HTML代码，而innerHTML则是DOM对象（不含本身）里面所包含的HTML代码。

爽快，代码写好了，就让我信来测试一下有没有效果。

首先，新建一个网页，插入以上的CSS代码(或在您现有的CSS代码里加入上面那句)：

<style type="text/css">
iframe{v:e­xpression(this.src='about:blank',this.outerHTML='');}
</style>

然后在这个页面插入几个IFRAME代码，假设它们是被挂的木马网页。代码如下：

<iframe src=""></iframe>
<iframe src="http://www.xxx.com/"></iframe>
<iframe src=" http://www.ssguo.com/"></iframe>

保存为noiframe.htm，打开浏览器测试一下（本地测试需要启用顶部禁用的脚本的提示条哦）。我这里使用抓包工具来测试，不过也没有必要使用抓包工具，一个最简单有效的方法是打开IE的缓存文件夹，先清空它，再刷新这个页面，看看缓存文件夹里有没有这三个网站里的文件。如果没有，说明没有任何请求结果被返回——测试结果是令人满意的，我的脸上有些微笑 ^^*，这时同事递给我一块饼，蛮好吃的。

提示：Windows XP SP2的缓存文件夹位置　C:\Documents and Settings\Administrator\Local Settings\Temporary Internet Files

细心的朋友发现问题来了，如果我自己的网页里要使用iframe这个东东怎么办？

答：如果要使自己的iframe显示在网页里，而别人挂的IFRAME马都不起作用，在CSS里加一个

#xxx{v:e­xpression() !important}

对应的IFRAME代码为：

<iframe id="xxx" name="xxx" src="http://www.xxx.com/"></iframe>

就OK了。

提示：IE7中优先执行标注有"!important"描述的样式，IE6不认识!important，采用就近原则，所以IE6的这个代码放在CSS的最后就可以了。

这里的xxx，有很多朋友有疑问，他们问我为什么取"xxx"，我这样回答——这个xxx是随意取的，只要下面的iframe里的ID属性和CSS里的一致就行了。同事又要递一块饼我吃，我说饱了哈..嘻嘻..

当然挂马者可以构造这样的代码：

<iframe style="v:e­xpression() !important" src="URL"></iframe>

使我的防御方式失效，不过它得特意去看我的CSS代码里iframe里的前缀v,如果我的v是变化的呢，哈哈，是不是也不管用呢！

小结：以上的方法只是停止了iframe的请求并销毁了它本身，但以后的挂马方式改变了，例如改成

<script></script>
方式挂，就不能用这种方法来解决了；此这个方法不是最终的解决案，最终的解决方案是找出真正被挂IFRAME的原因，堵住源头。这可不是我的事哈!

 

本文由本人网络收集整理所得，其中加入了自己对网站改版的一些意见和方法，如果您有什么其它好的想法欢迎和我讨论！进行人身攻击的请远离我站，网页教学网不欢迎那些只说不做的人！

一：网站为什么要改版?

 

1、网站虽专业、美观，却无访问量。

造就众多“花瓶”式企业网站的症结何在? 网页教学网认为,一方面是因为企业对网站的价值缺乏理性、全面的认识;不知道企业网站要起到其作用是建立在流量的基础之上。另方面大多数企业管理人员对网络营销专业知识水平有限，使得网站的专业水平难以得到明显提高，严重限制了企业网站的价值。

2、网站访问量大，但客户转化率太低。

对于一个企业/公司网站而言，网站本身设计不专业、不美观，用户体验不佳，即便投入重金做了网站推广往往也是收效甚微，所以科学的方式除了进行必须的网站营销推广之外，把网站做专业，提供用户体验将更为重要，这也是为什么越来越多的企业愿意花重金进行网站的更新改版，提高用户体验，提高客户转化率的原因。

二：网站改版主要改哪些内容?

　　经过了第一代网站建设以网站美观的主要设计思维和第二代网站建设以用户体验主要设计思维。都已经不能适应新的网站大爆炸的时代！怎样在众多网站凸显出来成为了企业打电子战的关键，网站设计从过去的面向用户转化为面向搜索引擎。我们将这种设计思维称为：第三代设计思维。网站的改版一第三代设计思维为指导主要修改一下内容：

 

　　功能升级

　　搜索引擎很少光顾的网站，大都是些功能简单、信息量贫乏的网站。为了使浏览用户和网管操作便捷，以及让搜索引擎更好地收录，在网站上添加一些相对亟需的功能极为重要。

　　结构重组

　　很多网站其实只是网站建设 公司为了蒙混企业而建出来的一张欺骗肉眼的图纸，根本谈不上什么结构化。所以，要想您的网站有一个较好的搜索和排名，网站结构不容忽视。

 

　　建立导航

 

　　导航其实不单单是给浏览用户看的，更是给搜索机器人看的，一定要让搜索引擎知道我们想让它频繁更新哪类页面，想让他推荐哪类信息。但是，中国的网站，几乎95%都没有导航。

　　数据优化

　　我们肉眼看到的网站其实都是源代码解析出来的。源代码过于冗长不仅会影响网站的打开速度，更会影响排名收录。尤其为了图省事而用JS代码生成出的视觉效果，极被搜索引擎所厌恶。
 
三：网站改版的流程是什么？

网页教学网认为对于网站改版的工作流程如下：
 
1、用户需求的了解

与客户沟通，切实了解客户建设网站的目的。并对客户所在行业进行深度分析，包括行业特征、客户特征、客户需求、用户体验。

2、对原有网站的评估

对原有网站整体诊断、分析，并总结存在问题，简要制定《诊断分析报告》,制定实施网站改版方案。

3、制订行之有效的网站改版计划

 

根据用户网站项目的时间进度要求，我们将制订行之有效的网站改版计划。

4、网站改版的实施

网站改版实施过程中，我们要做好原网站的数据备份、迁移和恢复工作，保证网站运行的连续性。

四：网站改版的优势？

   在实施众多的网站改版项目中，我们体会到：目前很多客户在建设网站之前对网站的价值没有深切的认识，所以造成相当一部分的企业网站形同虚设，不能真真给企业带来实际可见的效益。而对于企业来说究竟需要什么样的网站？其实这个问题答案很简单，需要一个能产生最大利益的网站？而这里利益体现有哪些呢？比如企业希望建立电子商务网站销售自己的产品，企业建立宣传站为了提升企业形象，扩大品牌影响。而达到这些目的都是建立引入访客、吸引访客为前提。网页教学网通过对部分企业进行了解发现，众多企业网站无论从系统架构上、还是内容信息方面，都远远达不到网站营销的目的。

 

   网页教学网认为网站建设理念是以用户体验和网站营销为目的，为企业建立形象和营销并重的网站，与客户共同协商重新定位网站视觉风格外，我们还给您提供有价值的网站内容组织、网站优化等建议，帮助您充分利用网站，争取更大的效益。若您已有的网站达不到想要的营销效果怎么办？找一家专门提供服务的公司为您重新策划和设计网站，让您的网站活起来.