如何进行网站布局_网页设计教程

推荐：成功构建网站的方法
Ifyou'redoingbusinessontheInternet,oneofthemostimportantaspectsofyoursuccessisyourwebsite.Ifyourwebsitedoesn'tlookprofessio

Frames Vs Tables
框架Vs表格

Some people like to use frames on their sites. I would recommend you avoid them if you can ... and you probably can.

有些人喜欢利用表格设计网站，但我建议你最好不要使用表格。我想你可以避免使用表格。

Frames can be useful on occasion but "the pain is greater than the gain". Too many people complain of problems with frames than you can afford to ignore. So if you insist on using them, you'll need to create an alternative no-frames set of pages for these users. Honestly ...

有时候，框架确实可以发挥作用，但它的缺点多于优点。你一定不能忽视框架的缺点，因为太多人已经在抱怨框架所带来的问题。假如坚持使用框架，你需要为网站用户创造另外一套无框架网页。但老实地说，

... it's just not worth the trouble!

这种做法太麻烦！

As If that wasn't enough reason, many search engine spiders also encounter difficulties with frames.

并且很多搜索引擎在搜索框架时，会越到一些问题。

This means you'll either have to spend additional time learning how to overcome these shortcomings or be doomed to low search rankings. Convinced?

这就意味着，你需要花费时间学习如何克服框架的缺点，否则网站注定会在搜索引擎中有一个低排名。

I hope so - for your sake!

我希望你的网站不会出现这种情况。

In most of the situations in which you might feel you need to use frames you can usually use tables equally effectively. If not on their own, then in conjunction with SSI - Server Side Includes - which also allow you to write separate pages for inclusion in another 'main' page.

大多数情况下，表格可以代替框架。利用表格的同时，你还可以使用SSI（Server Side Includes），它可以帮助你编辑主要页面所包含的其它页面。

The left column navigation bar, for example, is one area that it may seem appealing to place in it's own frame. The content remains the same on every page and should you need to change it, you can effect a global change just by altering a single file.

比如说，使用框架布局左列导航条，可能看起来很有吸引力。所有网页布局一致，并且修改一个单独文件之后，就可以改变所有网页。

What many people don't realize that you can achieve almost the same result by using an SSI callout in a table cell within the page. This will reference another file on the server which will be written into this location when called. To browsers and search engine spiders alike the page appears as a normal web page and doesn't give rise to any of the problems associated with the use of frames.

很多人没有意识到，在表格单元中利用SSI编号，也可以达到这个效果。这就会涉及到服务器中的另外一个文件，这个文件在需要时会设置到这个位置。浏览器与搜索引擎，更喜欢看似普通、不会出现框架问题的页面。

　　

The Long Wait!

等一下！

Whilst we're on the subject of tables...

我们正在谈论表格问题。

... don't make the same mistake I did when first using them!

第一次利用表格时，不要出现我曾出现过的问题。

Tables are great for page layout - you can put things just where you want them to appear on the page. So I made one big table for the whole page, split it up into various rows and columns, then put (nested) other tables inside these and in some places yet smaller ones inside them ...

表格是一种网页布局的好方法，你可以根据需要，选择网页内容的位置。我在网页中设计了一个大表格，划分为很多行、很多栏，然后在内部表格中嵌套更小的表格。

Wrong! Wrong! Wrong!

错误！

Those of you that are quietly chuckling can stop now, thank you! Don't pretend you've never made the same mistake!

请你不要笑，我想你肯定犯过类似的错误。

Where was I ...?

我哪里出错了呢？

Oh yes ... tables. Now the thing with tables is that the browser downloads all the contents of the table BEFORE it actually draws anything on the screen. This includes the contents of any nested tables. So what did that mean for my beautiful page?

是的，表格。这里的问题是，在表格内容下载完毕之前，浏览器不会在显示屏中呈现任何内容。这就意味着，任何嵌套的内容都要下载完毕，那么这些布局精美的网页会怎样呢？

It took DAYS to download!

下载时间太长了！

Actually, it didn't really take that much longer, but it *seemed* like it did. The page remained completely blank until the browser had downloaded every single component and then suddenly flung them all onto the page at once! Leaving your visitors staring at a blank page for ages like this is not a good way to keep them on your site!

事实上，网页下载不需要那么长时间。网页首先会空白，浏览器下载完毕之后，网页忽然出现全部内容。假如网站访问者长时间浏览空白页面，他们很快会离开。

As ever, learn from your mistakes - or my mistakes! - and split your page up into several separate tables. Keep the whole lot as simple as possible and try to avoid nesting more than one layer of tables inside another. Browsers also take longer to draw tables if you don't specify the sizes. This is because the browser has to calculate how big the table needs to be to fit in all the contents.

继续分析问题。我们应该避免在表格中嵌套其它表格，避免把表格继续分割。假如表格尺寸没有标明，浏览器下载表格的时间会比较长，因为，浏览器需要计算表格将会占用的空间。

You can also employ tables to add color to a page in preference to slow loading graphics. Or to effectively draw attention to text placed in a colored box on the page.

你可以利用表格填充网页颜色，这样比下载速度慢的图片更好。或者把文本放置在网页有颜色的表格中。

Tidy and Businesslike
整洁并且有条理

Forget about loud colors, blinking or scrolling text, fancy animated graphics ...

避免使用浓重的颜色、炫目或者滚动文本、希奇的动画图像。

... anything that distracts the eye.

以及其它转移用户注重力的内容。

Your visitor needs to concentrate on your text if you want to get them to 'bite'. Compare your site to it's offline 'brick and mortar' equivalent.

网站必须保证用户集中精力阅读文字内容，这样才可以吸引他们购买产品或服务。你可以参考实体商店，设计网站。

Would you paint that bright yellow and deck it out with flashing lights?

你会把网页设计成嫩黄色或者很亮的颜色吗？

... 'Nuff said!

最好不要！

Keep your pages clean and well organized. People must be able to find things easily.

网页必须整洁、有条理，便于用户寻找信息。

Imagine calling into a supermarket in a strange town to buy a box of tissues. You're in a hurry. To your dismay you find that none of the isles are labelled and you are forced to walk all over the store to find what you want.

假设，你在一个生疏城镇的超市中匆忙地购买餐巾纸。使你扫兴的是，商品没有标签，你需要在商店中到处寻找商品。

How annoyed and fed up would you feel?

你是不是感觉很苦恼呢？

Sure, you'd still buy ... but only because of the hassle involved in leaving the store and going to another. Online this is as easy as ...

当然，你肯定会购买，但你可能会去别的商店。网上购买也是同样道理。

... click ... "I'm outta here!"

有些网站使用户难以发现所需信息。

Actually, when you go to a supermarket you'll normally find that everything's neatly labelled and tidily displayed in rows with signs above them... build your online store along the same lines.

实际上，超市中的产品都很整洁，并且产品旁边都会有标签。构建网上商店时，遵循这些规则。

Apply what I call 'the three clicks rule'... make sure your visitor can find whatever they're looking for within three clicks. If not you run the risk of them becoming frustrated and leaving.

确保网站用户在三次点击之内，找到所需内容，否则他们会沮丧地离开网站。

分享：团队协作 每一环都很重要！
我想说的是一种团队的精神，我想说的是一种全局的思维，写这篇文章得益于我看到的一个小故事：在刚过去的雅典奥运会上，男子4×100米接力赛，美国队在人员布局