怎樣讓網(wǎng)站建設(shè)的布局變得更好

很多非常聰明的人都說(shuō)過(guò)，不從歷史中吸取教訓(xùn)的人注定要重蹈覆轍。還有人說(shuō)懷舊誘餌，回顧得到了很多點(diǎn)擊，個(gè)人認(rèn)為回顧一下過(guò)去一些過(guò)時(shí)的UI慣例可能既有趣又有教育意義。記住他們?cè)?jīng)存在的原因，他們是如何死的以及為什么死的很好。它讓我們深入了解最佳實(shí)踐是如何產(chǎn)生的，以及為什么它們是我們擁有的“最佳”實(shí)踐，它為我們構(gòu)建web的未來(lái)提供了環(huán)境。此外，這個(gè)行業(yè)每年都有新人加入，他們也應(yīng)該知道一些這方面的知識(shí)。

對(duì)于那些現(xiàn)在還沒(méi)有本能反應(yīng)的人來(lái)說(shuō)，標(biāo)簽就能做到這一點(diǎn)：blink。斷斷續(xù)續(xù)，一會(huì)兒在那兒，一會(huì)兒不在那兒，就好像它是為了傷害你的眼睛而設(shè)計(jì)的。這個(gè)標(biāo)簽是在早期瀏覽器大戰(zhàn)的高潮時(shí)期發(fā)明的，是瀏覽器專(zhuān)用標(biāo)簽的早期例子，目的是讓Netscape Navigator比當(dāng)時(shí)剛剛興起的Internet Explorer更有優(yōu)勢(shì)。

Flash菜單

在開(kāi)始時(shí)，無(wú)法用JavaScript構(gòu)建動(dòng)畫(huà)導(dǎo)航菜單（即具有懸停狀態(tài)的菜單），或者在Dreamweaver中稱(chēng)為DHTML，所以用Macromedia Flash創(chuàng)建了帶有動(dòng)畫(huà)按鈕的超炫菜單，并將它們嵌入到制作的每個(gè)網(wǎng)站標(biāo)題中。有一段時(shí)間，基于flash的菜單模板是一個(gè)獨(dú)立的家庭手工業(yè)，熱點(diǎn)提示：永遠(yuǎn)，永遠(yuǎn)不要做一個(gè)你不能通過(guò)編輯文本文件來(lái)改變的網(wǎng)站菜單。光是維護(hù)成本就令人頭痛不已，搜索引擎也從未掌握在Flash文件中爬行的竅門(mén)。盤(pán)旋框架，最初的AJAX是的，在我們使用JavaScript在漸進(jìn)式web應(yīng)用程序中加載所有數(shù)據(jù)之前，所有的工作都是由瀏覽器完成的，想必現(xiàn)在仍然可以。你知道iframes嗎？他們?cè)?jīng)有一個(gè)“老大哥”，叫做“框架”，在表格出現(xiàn)之前，我們用它來(lái)做基本的布局。問(wèn)題是，即使他們?cè)试S瀏覽器只更新部分頁(yè)面，而不是加載一個(gè)全新的頁(yè)面（某種程度上），他們也破壞了幾個(gè)基本的瀏覽器功能，包括：后退和前進(jìn)按鈕；一般瀏覽器歷史；將鏈接復(fù)制粘貼到網(wǎng)站的特定頁(yè)面更加困難；重新加載一個(gè)網(wǎng)站肯定有點(diǎn)隨機(jī)，通常只會(huì)帶你回到“主頁(yè)”，因?yàn)樗恰Ｗ罱K整個(gè)框架集功能被棄用，人們主要使用iframe來(lái)加載嵌入內(nèi)容，比如YouTube視頻。

圖像按鈕

不久前，平面設(shè)計(jì)風(fēng)靡全球，促使人們說(shuō)，“等等……那是一個(gè)按鈕嗎？”我可以點(diǎn)擊它嗎？為什么要使用自定義游標(biāo)呢？“在那之前，所有人都在關(guān)注那些看起來(lái)像3d的按鈕，因?yàn)樗鼈兒芷?。?tīng)著，它始于90年代初，我們對(duì)1980年至2005年間發(fā)生的任何事情都不提出質(zhì)疑，只是時(shí)間不同。當(dāng)然，CSS3幾乎關(guān)閉了基于圖像的按鈕，當(dāng)文本被嵌入到圖像中時(shí)，按鈕是不可能管理的，而當(dāng)它不管理時(shí)，我們不得不使用上千種技巧使它們甚至是半響應(yīng)的。有人記得做過(guò)一個(gè)按鈕嗎？一個(gè)部分是loooooong PNG，另一個(gè)部分是右邊的角？或者在按鈕的每個(gè)角落都有一個(gè)單獨(dú)的PNG？

選框曾幾何時(shí)，在所有人都開(kāi)始說(shuō)圖像滑塊不好之前，HTML實(shí)際上有一個(gè)內(nèi)置的元素來(lái)讓東西在頁(yè)面上滑動(dòng)。它被稱(chēng)為大帳篷標(biāo)簽，在它真正死去之前很久，人們就討厭它了。它是在Internet Explorer中實(shí)現(xiàn)的，以響應(yīng)標(biāo)記，而且對(duì)您的眼睛的危害也只是稍微好一點(diǎn)。它被拋棄了，并因過(guò)于分散用戶(hù)的注意力而遭到唾棄。

分隔符分隔器/頁(yè)面

在我們開(kāi)始做正確的布局之前，人們需要一種方法來(lái)分解長(zhǎng)頁(yè)的文本，使它們看起來(lái)不那么別扭，對(duì)于某些人來(lái)說(shuō)，元素感覺(jué)太平淡了，所以當(dāng)時(shí)的設(shè)計(jì)師們就像他們經(jīng)常做的那樣，將注意力轉(zhuǎn)向了. gif。它們?cè)诒举|(zhì)上只是單杠，但只要它們是圖像，它們就可以是你喜歡的任意想象。

這是CSS/CSS3的另一個(gè)趨勢(shì)，此外，當(dāng)分隔符在視覺(jué)上比文本更令人興奮時(shí)，可能會(huì)給用戶(hù)帶來(lái)一些沖突。站點(diǎn)地圖曾經(jīng)是導(dǎo)航的全部和最終部分，在網(wǎng)站擁有自己的搜索功能之前，您可以使用站點(diǎn)地圖來(lái)查找任何給定站點(diǎn)上所需的內(nèi)容。很簡(jiǎn)單：所有的內(nèi)容都在那里，你只需要滾動(dòng)?，F(xiàn)在，很多站點(diǎn)都太大或太小，以至于不需要站點(diǎn)地圖作為UI元素。它們通常仍然由許多CMS自動(dòng)生成，但它們用于幫助搜索引擎更快地搜索站點(diǎn)。對(duì)于中等規(guī)模的網(wǎng)站，這是一個(gè)可以恢復(fù)的功能，它不會(huì)傷害任何人。

表布局

表布局一些人在笑話(huà)中嘲笑它，而另一些人則只是在低聲細(xì)語(yǔ)中引用它。這是推動(dòng)網(wǎng)頁(yè)設(shè)計(jì)向前發(fā)展的趨勢(shì)，也是一個(gè)不能很快消亡的趨勢(shì)。它結(jié)合了內(nèi)聯(lián)樣式、相當(dāng)多的混亂以及1像素的.gif文件，這些文件以某種方式將布局組合在一起。它的死亡是因?yàn)镃SS有浮動(dòng)，雖然這是一個(gè)骯臟的一個(gè)半，它實(shí)際上是更好的。我們使用表的時(shí)間之所以如此之長(zhǎng)，是因?yàn)闉g覽器（咳咳）跟不上CSS支持的速度，但它們最終做到了這一點(diǎn)。

奇怪的是，CSS網(wǎng)格就像有表格一樣，但是好多了。