我們網(wǎng)站設(shè)計(jì)師一直都是一群狡猾的人，如果需要實(shí)現(xiàn)特定的外觀或功能，我們通?？梢云礈惓鲆粋€(gè)解決方案。即使沒有特定的標(biāo)準(zhǔn)或工具來指導(dǎo)我們，情況也是如此。這就是網(wǎng)站設(shè)計(jì)技巧的概念發(fā)揮作用的地方。

黑客是創(chuàng)造性的，通常是迂回的方法，使一個(gè)網(wǎng)站的外觀或工作在一定的方式。有時(shí)，它們帶有負(fù)面的含義。例如，基于Html表格的布局被嘲笑為屏幕閱讀器無法訪問。但并非所有的黑客都是壞的。

事實(shí)上，他們的部署是為了挑戰(zhàn)極限。網(wǎng)絡(luò)總是有它的局限性，網(wǎng)站設(shè)計(jì)師們?cè)噲D利用黑客來繞過它們。

有了這些，讓我們來看看過去幾年來最有用、最流行的一些網(wǎng)站設(shè)計(jì)技巧，這些靈感來自于與其他設(shè)計(jì)師在Twitter上的討論。盡管他們并不一定能滿足我們今天所擁有的標(biāo)準(zhǔn)，但他們?cè)谧约旱臅r(shí)代是名人堂。

布局：HTML表格和CSS浮點(diǎn)數(shù)

我們的第一批選擇將一起進(jìn)入這個(gè)虛擬名人堂。盡管它們各自的峰值使用時(shí)間相隔數(shù)年，但它們本質(zhì)上是用來完成相同的事情的：多列布局。

HTML表格

在CSS出現(xiàn)之前，早期的網(wǎng)站都是單列的。沒有填充或邊距，也沒有將內(nèi)容放置在水平列中的標(biāo)準(zhǔn)方法。直到一些有進(jìn)取心的人決定使用表來實(shí)現(xiàn)這個(gè)目的。

當(dāng)然，HTML表格是用來保存表格式數(shù)據(jù)的，而不是頁面布局。但在CSS出現(xiàn)之前，它們實(shí)際上是一種有效的方法。

CSS漂浮

表有很多缺點(diǎn)——包括前面提到的可訪問性問題。它們?cè)跒g覽器中呈現(xiàn)也很慢。因此，當(dāng)CSS浮動(dòng)被引入時(shí)，它被視為網(wǎng)站設(shè)計(jì)師的游戲規(guī)則改變者。

浮動(dòng)不是HTML標(biāo)記，所以它們更容易訪問，可以提高性能。突然之間，多欄布局通過CSS成為可能，并且可以更好地適應(yīng)屏幕大小等東西。

然而，浮舟并沒有把我們帶到應(yīng)許之地。如果您希望列具有相同的高度，則必須實(shí)現(xiàn)額外的clearfix hack。

這些物品中的每一件在今天仍然非常有用，當(dāng)它們被用于最初的目的時(shí)。但是對(duì)于布局來說，謝天謝地，他們的日子已經(jīng)結(jié)束了。

元素間距：非突破性空格和Spacer.gif

注重細(xì)節(jié)的網(wǎng)站設(shè)計(jì)師經(jīng)常尋找將元素空間縮小到精確像素的方法。再說一次，這在當(dāng)時(shí)并不容易。因此，使用不間斷空格（＆nbsp;）和spacer.gif可以更好地控制間距。

非突破性空間

想要將一個(gè)元素水平移動(dòng)，但沒有居中或右對(duì)齊?添加一些不間斷的空格就可以了。

然而，這并不是一門精密的科學(xué)。每個(gè)空間的實(shí)際大小取決于字體族和字體大小。即使考慮到這些差異，這次黑客攻擊看起來仍然會(huì)因訪問者使用的瀏覽器和操作系統(tǒng)而有所不同。

Spacer.gif

這種更精確的間距技巧通過創(chuàng)建一個(gè)透明的.gif圖像(通常命名為spacer.gif)并將其放入頁面中來實(shí)現(xiàn)。簡(jiǎn)潔之處在于，因?yàn)檫@是一個(gè)透明的圖像，設(shè)計(jì)師可以將高度和寬度設(shè)置為任意像素，而不會(huì)對(duì)外觀或性能造成負(fù)面影響。

CSS使得這兩種方法都過時(shí)了。但你不知道WordPress Gutenberg編輯器有一個(gè)Spacer塊它做的事情幾乎一樣?它只是表明，需求仍然存在。

字體設(shè)計(jì)：基于圖像的文本

這個(gè)需求非常簡(jiǎn)單，早期的網(wǎng)站基本上局限于用戶系統(tǒng)上安裝的字體。當(dāng)然，除了諸如Times New Roman、Georgia、Arial和Helvetica這樣的基礎(chǔ)字體，設(shè)計(jì)師無法知道用戶使用的所有字體。

隨之而來的是一個(gè)糟糕的決定——在Photoshop中創(chuàng)建充滿文字的圖像。雖然這允許使用幾乎任何字體，但它是以犧牲可訪問性為代價(jià)的。此外，使用圖像代替HTML標(biāo)題標(biāo)簽還會(huì)破壞頁面的語義——可能會(huì)破壞搜索引擎優(yōu)化。

粘性標(biāo)題和導(dǎo)航：框架

HTML框架可能是超前的，因?yàn)槲覀冊(cè)?jīng)使用它們完成的許多任務(wù)現(xiàn)在都是通過CSS和Javascript完成的。

這個(gè)概念相當(dāng)簡(jiǎn)單，布局中的每個(gè)單獨(dú)的"框架"實(shí)際上是它自己的頁面。這是一種將頁眉、頁腳或?qū)Ш綇木W(wǎng)站的其他內(nèi)容中分離出來的簡(jiǎn)單方法。例如，對(duì)導(dǎo)航進(jìn)行更改意味著在單個(gè)文件中進(jìn)行單個(gè)更改。它與服務(wù)器端include所做的類似，只是包含了一些其他的設(shè)計(jì)優(yōu)點(diǎn)。

其中最主要的是創(chuàng)建"粘性"標(biāo)題和導(dǎo)航的能力。當(dāng)用戶滾動(dòng)內(nèi)容時(shí)，他們?nèi)匀豢梢暂p松地瀏覽站點(diǎn)。

這項(xiàng)技術(shù)達(dá)到了它的目的，但還遠(yuǎn)遠(yuǎn)不夠理想。對(duì)于不同的屏幕大小，它的適應(yīng)性不是很好，對(duì)于搜索引擎優(yōu)化也不是很好。還有一些安全問題，可能從一個(gè)惡意的URL加載幀。

圖像優(yōu)化：切片圖像

在寬帶普及之前，圖像優(yōu)化是至關(guān)重要的。即使是50kb的映像也可能會(huì)在慢速連接上拖累頁面。

軟件巨頭Adobe提供了一個(gè)有趣的解決方案。通過他們的圖像備份軟件，設(shè)計(jì)師可以將一張圖像分割成任意數(shù)量的小塊。每個(gè)單獨(dú)的片段可以被優(yōu)化，理論上可以讓它們快速下載。

但這還不是全部，然后，軟件可以將這些切片導(dǎo)出到一個(gè)HTML表中。從那里，您可以復(fù)制并粘貼該HTML到您的頁面。

這種技術(shù)的問題有兩方面，首先，表布局可能會(huì)花費(fèi)額外的時(shí)間來渲染——可能會(huì)破壞已經(jīng)實(shí)現(xiàn)的任何優(yōu)化。其次，維持它可能是一種真正的痛苦。例如，向大型標(biāo)題圖形添加導(dǎo)航項(xiàng)可能需要重新使用一組全新的切片——因此需要更改模板。

雖然圖像優(yōu)化仍然很重要，但慶幸的是寬帶讓我們?cè)谔幚泶笪募r(shí)有了更多的回旋余地。即便如此，現(xiàn)代版本的Photoshop仍然提供圖像切片和HTML導(dǎo)出。

放置Internet Explorer：＜!--[if IE]＞

直到今天，仍然經(jīng)常聽到網(wǎng)站設(shè)計(jì)師詛咒Internet Explorer的存在。它的傳統(tǒng)依然存在，部分原因是一些用戶根本不會(huì)放棄它。

正因?yàn)槿绱?，我們似乎永遠(yuǎn)都在繞過IE的許多專有怪癖和限制。多年來，這包括使用條件注釋來檢測(cè)IE用戶并提供替代樣式。

它在某種程度上是通用的，因?yàn)槟梢詫邮綉?yīng)用于IE的所有版本＜!--[if IE]＞，或針對(duì)使用較舊版本的樣式＜!--[if lt IE 11]＞。您也可以反向使用它，以查找大于或等于特定發(fā)行版的版本＜!--[if gte IE 10]＞。

微軟肯定對(duì)網(wǎng)站設(shè)計(jì)師有些同情，因?yàn)樗试S這些有條件的評(píng)論在IE中工作。謝天謝地，他們的新Edge瀏覽器不需要這些廢話。

要記住的網(wǎng)站設(shè)計(jì)技巧

當(dāng)然，名人堂里的這些技巧并不是網(wǎng)站設(shè)計(jì)師們唯一使用的方法。有無數(shù)的變通方法幫助我們完成看似不可能的事情。但這個(gè)列表的與眾不同之處在于它們的廣泛使用，在某些情況下，還得到了大公司的支持。

也許關(guān)于它們，我們能說的最好的事情就是它們起了作用。我們利用它們作為達(dá)到目的的手段。當(dāng)然，它們可能是通過磨損的管道膠帶粘在一起的，但將這種高尚的設(shè)計(jì)真正呈現(xiàn)在瀏覽器中感覺像是一個(gè)真正的成就。

更棒的是，他們?yōu)榻裉斓木W(wǎng)絡(luò)鋪平了道路。此列表中的大多數(shù)項(xiàng)都已被HTML和CSS標(biāo)準(zhǔn)取代，這對(duì)每個(gè)人都有好處。