網(wǎng)頁設(shè)計(jì)的質(zhì)量和代碼的速度

作為一個(gè)網(wǎng)頁設(shè)計(jì)師的需要?jiǎng)?chuàng)建一個(gè)詳細(xì)的、創(chuàng)造性的、原創(chuàng)的網(wǎng)頁設(shè)計(jì)，Photoshop網(wǎng)頁設(shè)計(jì)大部分的思考如何將代碼簡(jiǎn)化。
在設(shè)計(jì)階段，它是對(duì)所有的網(wǎng)頁速度期待，對(duì)于一個(gè)網(wǎng)頁設(shè)計(jì)師感覺不在設(shè)計(jì)過程中。

這是一個(gè)偉大的想法，并能導(dǎo)致最好的網(wǎng)頁設(shè)計(jì)。然而，一旦它不需要代碼，作為設(shè)計(jì)師的我們是一個(gè)棘手的地方。
在這篇文章中，你會(huì)找到一些簡(jiǎn)單的網(wǎng)頁設(shè)計(jì)技巧，可以幫助網(wǎng)頁設(shè)計(jì)師了解基本的XHTML/CSS代碼快速加載的網(wǎng)站是準(zhǔn)確的。
我們必須簡(jiǎn)化切片和代碼，或把我們部分網(wǎng)頁設(shè)計(jì)PSD轉(zhuǎn)XHTML / CSS。作為主要設(shè)計(jì)者，第二選項(xiàng)通常是最佳選擇的客戶，因?yàn)樗鼘⑻峁┳罴训慕Y(jié)果。

雖然有時(shí)，較小的網(wǎng)頁設(shè)計(jì)項(xiàng)目，我們需要一個(gè)寫網(wǎng)站自己的代碼。不管什么原因，或者占用太多我們的時(shí)間。

較小的網(wǎng)頁設(shè)計(jì)項(xiàng)目是自己制作還是外包
本文是針對(duì)網(wǎng)頁設(shè)計(jì)師，許多網(wǎng)頁設(shè)計(jì)師不喜歡網(wǎng)站代碼的是很常見的，喜歡設(shè)計(jì)，也有少數(shù)例外，但是最重要的是態(tài)度。
許多設(shè)計(jì)師發(fā)現(xiàn)的外包效益：支付公司切片和代碼設(shè)計(jì)，讓它在幾天內(nèi)回來，并保存自己的時(shí)間和精力做它你自己。
如果一個(gè)人沒有足夠有效地編碼一個(gè)網(wǎng)站的經(jīng)驗(yàn)，花了太多時(shí)間在不值得你會(huì)得到支付的一個(gè)項(xiàng)目。

一些項(xiàng)目只是需要多一點(diǎn)的客戶關(guān)懷，從你的設(shè)計(jì)師。根據(jù)客戶和項(xiàng)目，最好打破分層編碼部分成更易于管理的部分，有一些變量對(duì)客戶意見的整個(gè)過程。在任何情況下，你的設(shè)計(jì)師，必須不斷修改代碼以適應(yīng)客戶的需求，在最初的網(wǎng)站代碼，這可能是最好的自己，做整個(gè)事情。

所以它是由你根據(jù)每個(gè)項(xiàng)目，每個(gè)客戶，每個(gè)組的情況來決定是否外包的編碼部分或不。
作為一種福利外包，有經(jīng)驗(yàn)的程序員可以創(chuàng)建一個(gè)相同的編碼版本你的PSD設(shè)計(jì)，同時(shí)保持加載速度和可用性。
如果你在這種情況下，你正在想切片和代碼自己的網(wǎng)站，這里有一些一般提示1）節(jié)省您的時(shí)間，所以你不必為2美元/小時(shí)和2）為你的客戶提供更好的結(jié)果，作為一個(gè)有經(jīng)驗(yàn)的開發(fā)者，同時(shí)還節(jié)省了外包成本。

1。片有效
PS圖象處理軟件和煙花來與一個(gè)內(nèi)置的切片工具，允許設(shè)計(jì)器代碼直接插入HTML網(wǎng)站。然而，即使是現(xiàn)代版本的這些軟件創(chuàng)建基于表格的標(biāo)記。對(duì)于現(xiàn)代的網(wǎng)頁設(shè)計(jì)師，這是非常有用的，當(dāng)然。
這就是為什么網(wǎng)站編碼技術(shù)的發(fā)展是一個(gè)獨(dú)立的實(shí)踐，以自己的才華和經(jīng)驗(yàn)。所有的網(wǎng)頁設(shè)計(jì)需要一些手工編碼和思維過程的背后。沒有軟件可以為你做一切。

不過，切片工具在PS圖象處理軟件和煙花可以善加利用的發(fā)展部分的網(wǎng)頁設(shè)計(jì)。關(guān)鍵是要知道如何有效地使用切片工具。
不再鉆研整個(gè)分層編碼的教程在這里，一個(gè)偉大的導(dǎo)師在Nettuts+可以幫助很多：”PSD切圖”。它會(huì)在基本的思維過程，以及技術(shù)指導(dǎo)、分層Web設(shè)計(jì)的現(xiàn)代的和正確的方式采用傳統(tǒng)的切片工具。
它是在一個(gè)時(shí)間順序，不同的視頻開發(fā)過程的每個(gè)階段，以及類似的和額外的截屏有用的鏈接。

第一步是要看這些教程，并從他們采取的最重要的一點(diǎn)：知道什么切片圖像，如何優(yōu)化速度和質(zhì)量平衡的圖片，和你的PSD什么元素應(yīng)該是簡(jiǎn)單的XHTML和CSS。
只是看一個(gè)更有經(jīng)驗(yàn)的開發(fā)過程和解釋可以幫助設(shè)計(jì)師小切片和編碼經(jīng)驗(yàn)的過程，是更有效的證人。

2。簡(jiǎn)化CSS
有時(shí)，一個(gè)人物如何使用CSS來達(dá)到一定的效果是不是最好的辦法。如果你發(fā)現(xiàn)自己創(chuàng)造了太多的自定義類，或復(fù)雜的戰(zhàn)術(shù)，否則，為了實(shí)現(xiàn)一個(gè)效果，認(rèn)為另一種更有效率的方式。
在大多數(shù)情況下，這種來自經(jīng)驗(yàn)。你越是代碼的網(wǎng)站，發(fā)現(xiàn)新的技術(shù)，更有效地使用CSS將得到。

3。使用CSS速記和最小的HTML標(biāo)記
較小的文件大小，更快的是負(fù)荷，它是那樣簡(jiǎn)單。使用CSS速記和重用元素最小化XHTML標(biāo)記的長(zhǎng)度是這樣一個(gè)偉大的方式。
編碼整個(gè)網(wǎng)站是一個(gè)平衡的標(biāo)記和標(biāo)記的CSS樣式。標(biāo)記應(yīng)用于結(jié)構(gòu)和CSS應(yīng)該用于造型，所以要找到平衡的最好方法就是記住。
除此之外，實(shí)際只需要理解CSS速記的技術(shù)細(xì)節(jié)，以及獲得的經(jīng)驗(yàn)。

4。Smush.it
使用這樣的工具雅虎Smush.it任何圖像進(jìn)一步緊縮。這樣的工具使用的壓縮算法，減小文件大小顯著，在不犧牲圖像質(zhì)量。平均約40%的減少會(huì)使所有圖片在一個(gè)網(wǎng)站的加載時(shí)間的巨大差異。
只是簡(jiǎn)單的加載任何圖片的網(wǎng)站，在他們已經(jīng)在PS圖象處理軟件原先的優(yōu)化，應(yīng)用到Smush.it。它會(huì)給你一個(gè)新的圖像的下載列表，解釋了多少空間，以及如何。

5。注意CSS和標(biāo)記順序
在內(nèi)容元素的結(jié)構(gòu)元素，或引用的段落樣式風(fēng)格之前，不會(huì)讓任何一個(gè)樣式表加載更快。然而，一個(gè)樣式表加載的順序提出了在樣式表中，這樣可以讓網(wǎng)站出現(xiàn)的好像是加載速度更快。
例如，如果在一個(gè)樣式表，所有的內(nèi)容，圖像，首先定義了文本風(fēng)格，這些元素會(huì)在任何背景、結(jié)構(gòu)單元的負(fù)荷，或設(shè)計(jì)圖像加載。
正因?yàn)槿绱耍坪跏蔷W(wǎng)頁設(shè)計(jì)加載稍慢比我們看到的背景和結(jié)構(gòu)。

6。知道何時(shí)使用客戶端或服務(wù)器端腳本
基本的項(xiàng)目，網(wǎng)頁設(shè)計(jì)師可能不會(huì)進(jìn)入太多的編程。然而，一些腳本可能是一個(gè)簡(jiǎn)單的聯(lián)系方式或特殊要求的導(dǎo)航作用。
不管它是什么，兩種腳本語言可以使用客戶端（如腳本語言運(yùn)行在用戶的瀏覽器），或服務(wù)器端（腳本語言運(yùn)行在服務(wù)器上）。

7。最后，驗(yàn)證
這是明顯的對(duì)我們中的大多數(shù)，但與任何這樣的文章，它必須說：在整個(gè)編碼過程中，當(dāng)一切都說過和做過，驗(yàn)證CSS和XHTML代碼。
我們都知道驗(yàn)證的好處，因?yàn)樗梢宰尭鞣N瀏覽器渲染同樣，讓網(wǎng)頁加載速度更快，是一種語義代碼一般錯(cuò)誤檢查。

結(jié)束了
一些設(shè)計(jì)師擔(dān)心他們必須犧牲質(zhì)量設(shè)計(jì)的圖像編碼時(shí)，XHTML / CSS為了使快速加載的網(wǎng)站-但那不是真的。
有許多方法來編碼的智能化，可以創(chuàng)建一個(gè)用戶友好的、快速加載的網(wǎng)站符合設(shè)計(jì)師的素質(zhì)。使用這些技巧，可以幫助，但還有更多的網(wǎng)頁設(shè)計(jì)的質(zhì)量和代碼的速度東西要學(xué)。

最后大家看一下網(wǎng)站設(shè)計(jì)案例：深圳市龍華經(jīng)濟(jì)服務(wù)局網(wǎng)站設(shè)計(jì)，平安銀行監(jiān)控系統(tǒng)UI界面設(shè)計(jì)，深圳市龍華新區(qū)政府在線網(wǎng)站設(shè)計(jì)