建站常識(shí)
如何進(jìn)行網(wǎng)站布局
2008-02-22 10:32:00
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.
有些人喜歡利用表格設(shè)計(jì)網(wǎng)站,但我建議你最好不要使用表格。我想你可以避免使用表格。
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 ...
有時(shí)候,框架確實(shí)可以發(fā)揮作用,但它的缺點(diǎn)多于優(yōu)點(diǎn)。你一定不能忽視框架的缺點(diǎn),因?yàn)樘嗳艘呀?jīng)在抱怨框架所帶來的問題。如果堅(jiān)持使用框架,你需要為網(wǎng)站用戶創(chuàng)造另外一套無框架網(wǎng)頁。但誠實(shí)地說,
... it's just not worth the trouble!
這種做法太麻煩!
As If that wasn't enough reason, many search engine spiders also encounter difficulties with frames.
并且很多搜索引擎在搜索框架時(shí),會(huì)越到一些問題。
This means you'll either have to spend additional time learning how to overcome these shortcomings or be doomed to low search rankings. Convinced?
這就意味著,你需要花費(fèi)時(shí)間學(xué)習(xí)如何克服框架的缺點(diǎn),否則網(wǎng)站注定會(huì)在搜索引擎中有一個(gè)低排名。
I hope so - for your sake!
我希望你的網(wǎng)站不會(huì)出現(xiàn)這種情況。
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.
大多數(shù)情況下,表格可以代替框架。利用表格的同時(shí),你還可以使用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.
比如說,使用框架布局左列導(dǎo)航條,可能看起來很有吸引力。所有網(wǎng)頁布局一致,并且修改一個(gè)單獨(dú)文件之后,就可以改變所有網(wǎng)頁。
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.
很多人沒有意識(shí)到,在表格單元中利用SSI編號(hào),也可以達(dá)到這個(gè)效果。這就會(huì)涉及到服務(wù)器中的另外一個(gè)文件,這個(gè)文件在需要時(shí)會(huì)設(shè)置到這個(gè)位置。瀏覽器與搜索引擎,更喜歡看似普通、不會(huì)出現(xiàn)框架問題的頁面。
等一下!
Whilst we're on the subject of tables...
我們正在談?wù)摫砀駟栴}。
... don't make the same mistake I did when first using them!
第一次利用表格時(shí),不要出現(xiàn)我曾出現(xiàn)過的問題。
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 ...
表格是一種網(wǎng)頁布局的好方法,你可以根據(jù)需要,選擇網(wǎng)頁內(nèi)容的位置。我在網(wǎng)頁中設(shè)計(jì)了一個(gè)大表格,劃分為很多行、很多欄,然后在內(nèi)部表格中嵌套更小的表格。
Wrong! Wrong! Wrong!
錯(cuò)誤!
Those of you that are quietly chuckling can stop now, thank you! Don't pretend you've never made the same mistake!
請(qǐng)你不要笑,我想你肯定犯過類似的錯(cuò)誤。
Where was I ...?
我哪里出錯(cuò)了呢?
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?
是的,表格。這里的問題是,在表格內(nèi)容下載完畢之前,瀏覽器不會(huì)在顯示屏中呈現(xiàn)任何內(nèi)容。這就意味著,任何嵌套的內(nèi)容都要下載完畢,那么這些布局精美的網(wǎng)頁會(huì)怎樣呢?
It took DAYS to download!
下載時(shí)間太長(zhǎng)了!
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!
事實(shí)上,網(wǎng)頁下載不需要那么長(zhǎng)時(shí)間。網(wǎng)頁首先會(huì)空白,瀏覽器下載完畢之后,網(wǎng)頁突然出現(xiàn)全部?jī)?nèi)容。如果網(wǎng)站訪問者長(zhǎng)時(shí)間瀏覽空白頁面,他們很快會(huì)離開。
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.
繼續(xù)分析問題。我們應(yīng)該避免在表格中嵌套其它表格,避免把表格繼續(xù)分割。如果表格尺寸沒有標(biāo)明,瀏覽器下載表格的時(shí)間會(huì)比較長(zhǎng),因?yàn)?,瀏覽器需要計(jì)算表格將會(huì)占用的空間。
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.
你可以利用表格填充網(wǎng)頁顏色,這樣比下載速度慢的圖片更好?;蛘甙盐谋痉胖迷诰W(wǎng)頁有顏色的表格中。
Tidy and Businesslike
整潔并且有條理
Forget about loud colors, blinking or scrolling text, fancy animated graphics ...
避免使用濃重的顏色、炫目或者滾動(dòng)文本、奇怪的動(dòng)畫圖像。
... anything that distracts the eye.
以及其它轉(zhuǎn)移用戶注意力的內(nèi)容。
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.
網(wǎng)站必須保證用戶集中精力閱讀文字內(nèi)容,這樣才可以吸引他們購買產(chǎn)品或服務(wù)。你可以參考實(shí)體商店,設(shè)計(jì)網(wǎng)站。
Would you paint that bright yellow and deck it out with flashing lights?
你會(huì)把網(wǎng)頁設(shè)計(jì)成嫩黃色或者很亮的顏色嗎?
... 'Nuff said!
最好不要!
Keep your pages clean and well organized. People must be able to find things easily.
網(wǎng)頁必須整潔、有條理,便于用戶尋找信息。
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.
假設(shè),你在一個(gè)陌生城鎮(zhèn)的超市中匆忙地購買餐巾紙。使你掃興的是,商品沒有標(biāo)簽,你需要在商店中到處尋找商品。
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 ...
當(dāng)然,你肯定會(huì)購買,但你可能會(huì)去別的商店。網(wǎng)上購買也是同樣道理。
... click ... "I'm outta here!"
有些網(wǎng)站使用戶難以發(fā)現(xiàn)所需信息。
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.
實(shí)際上,超市中的產(chǎn)品都很整齊,并且產(chǎn)品旁邊都會(huì)有標(biāo)簽。構(gòu)建網(wǎng)上商店時(shí),遵循這些規(guī)則。
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.
確保網(wǎng)站用戶在三次點(diǎn)擊之內(nèi),找到所需內(nèi)容,否則他們會(huì)沮喪地離開網(wǎng)站。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計(jì)的五大特點(diǎn)
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計(jì)制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計(jì)應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計(jì)的好看,這個(gè)網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺(tái)管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費(fèi)者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計(jì)都有哪些新的趨勢(shì)?
延伸閱讀
- [2008-01-18 15:03:00] 刪格設(shè)計(jì)解決網(wǎng)站布局亂的問題
- [2007-05-09 09:00:00] 注意你的網(wǎng)站布局對(duì)訪者的友好程度
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計(jì)解決方案 機(jī)械行業(yè)網(wǎng)站設(shè)計(jì)解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 科技企業(yè)網(wǎng)站設(shè)計(jì)解決方案 電子家電網(wǎng)站設(shè)計(jì)解決方案 食品行業(yè)網(wǎng)站設(shè)計(jì)解決方案 集團(tuán)公司網(wǎng)站設(shè)計(jì)解決方案 企事業(yè)單位網(wǎng)站設(shè)計(jì)解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 健身運(yùn)動(dòng)網(wǎng)站設(shè)計(jì)解決方案 美容與化妝品網(wǎng)站設(shè)計(jì)解決方案 建筑設(shè)計(jì)行業(yè)網(wǎng)站設(shè)計(jì)解決方案 物流行業(yè)網(wǎng)站設(shè)計(jì)解決方案
TAGS關(guān)鍵字
青島SEO css 中小型企業(yè)網(wǎng)站建設(shè) 建站常識(shí) 企業(yè)網(wǎng)站建設(shè) 響應(yīng)式設(shè)計(jì) 青島網(wǎng)站優(yōu)化 青島網(wǎng)站建設(shè)基礎(chǔ)知識(shí) 青島網(wǎng)頁設(shè)計(jì) 搜索引擎 營(yíng)銷型網(wǎng)站 集團(tuán)官網(wǎng) 網(wǎng)站品牌 SEO 青島網(wǎng)站建設(shè)公司哪家好 企業(yè)網(wǎng)站 集團(tuán)公司網(wǎng)站建設(shè) 圖形網(wǎng)格 良好的導(dǎo)航 集團(tuán)性網(wǎng)站 網(wǎng)站推廣 力圖 網(wǎng)站建設(shè)的步驟有哪些 用戶界面 微信小程序 交互設(shè)計(jì) 網(wǎng)站規(guī)劃 如何做網(wǎng)站優(yōu)化 舒適的界面 微官網(wǎng)帶來的好處