【51CTO.com快譯】隨著響應(yīng)式設(shè)計的興起，眾多開發(fā)者已經(jīng)開始回歸瀏覽器內(nèi)設(shè)計思路。這種能夠顯著提升網(wǎng)站適應(yīng)能力的開發(fā)方案雖然具備諸多優(yōu)勢，但同時亦在挑戰(zhàn)著開發(fā)人員的既有設(shè)計思路。在今天的文章中，我們將共同立足于瀏覽器內(nèi)Web開發(fā)，探討十項能夠幫助大家順利解決問題的重要提示。

1. 從基礎(chǔ)開始，充分利用網(wǎng)格

 拋開既有風(fēng)格，通過引入全部必要內(nèi)容思考設(shè)計方向的作法值得提倡，因為這能夠使最終設(shè)計更契合您的實際內(nèi)容。利用基于網(wǎng)格的框架，網(wǎng)站開發(fā)時間將得到大幅縮短。另外，這亦能讓您的布局擁有更為堅實緊湊的觀感。另外，基于網(wǎng)格的設(shè)計思路還能幫助我們更了解自身網(wǎng)站的瀏覽方式。

 2. 采用***編輯器

 如果您傾向于手動編碼開發(fā)網(wǎng)站，則需要一款專業(yè)編輯器以強化工作流程。請確保您的編輯器具備全部所需功能?？紤]到種類繁多的編輯器選項，大家需要根據(jù)需求認(rèn)真篩選。這里向大家初步推薦Aloha、Aptana、Netbeans以及Coda等幾款。

3. 使用更佳字體

 在Photoshop內(nèi)以圖像形式創(chuàng)建文本時，大家可以隨意使用自己喜愛的字體而不必?fù)?dān)心兼容性。但這種作法會導(dǎo)致文本內(nèi)容不可選擇或者搜索。要解決這一難題，大家可以安裝幾種可自定義的字體解決方案。在進行瀏覽器內(nèi)Web開發(fā)時，大家可以使用@font-face命令。

4. 在元素上添加陰影

 其實無需Photoshop，我們也能夠在Web上輕松實現(xiàn)陰影。目前眾多主流瀏覽器皆支持CSS 3，其提供大量出色的新功能以幫助您實現(xiàn)創(chuàng)意。Box-Shadow功能就能夠單憑CSS實現(xiàn)特定條目的陰影添加。另外，大家還可以調(diào)整陰影的長度、寬度、顏色與模糊半徑。

[[185101]]

5. 如何實現(xiàn)圓角

 這是現(xiàn)代CSS中的一項重要功能。大家可以使用border-radius函數(shù)在火狐及Safari瀏覽器中添加圓角。通過這種圓潤的效果，您將使自己的網(wǎng)站具備更出色的視覺呈現(xiàn)。

6. 如何實現(xiàn)文本陰影

 在瀏覽器內(nèi)設(shè)計層面，為文本添加陰影非常簡單。大家只需要使用text-shadow功能，即可調(diào)整模糊半徑與陰影顏色。另外，您還可以使用此項功能實現(xiàn)凸版效果、發(fā)光效果以及火焰效果。

7. 如何選擇字體

 我們當(dāng)然不可能在每個網(wǎng)站上使用同樣的字體。大家可以使用全面的網(wǎng)絡(luò)字體庫輕松更改字體，并在不同項目中使用不同的選項。利用Typetester等工具，大家能夠在瀏覽器中查看不同的字體與設(shè)置（例如對齊效果與字體大?。ＴO(shè)置完成后，其即會為您導(dǎo)出CSS代碼。

8. 使用瀏覽器測試工具

 值得注意的是，并非所有瀏覽器都能夠支持瀏覽器內(nèi)Web開發(fā)并提供必要的技術(shù)方案。因此，大家需要花點時間了解當(dāng)前瀏覽器如何顯示網(wǎng)站內(nèi)容，而后選擇正確的瀏覽器以用于網(wǎng)站開發(fā)。

9. 構(gòu)建色彩方案

 利用Photoshop，我們能夠輕松嘗試不同的色彩組合。不過Web層面亦提供大量色彩方案資源，同樣可實現(xiàn)驚人的顯示效果。Kuler等本色方案能夠提供一套界面，用以輕松建立美觀的本色方案，同時亦包含多種預(yù)先創(chuàng)建且易于搜索的本色方案。大家可根據(jù)所開發(fā)網(wǎng)站的主題從中選擇最合適的模板。

10. 如何運用Stock Art

 如果大家需要建立快速按鈕、圖標(biāo)或者其它您不愿親手構(gòu)建的圖像，則可直接使用現(xiàn)成的Stock Art資源。目前各類Stock Art站點能夠提供大量網(wǎng)絡(luò)元素，您可直接在自己的網(wǎng)站中加以使用——其中不少甚至完全無需進一步修改。相較于投入大量時間自行構(gòu)建，直接使用現(xiàn)成資源只需幾分鐘即可完成任務(wù)。

時至今日，瀏覽器內(nèi)Web開發(fā)已經(jīng)受到眾多開發(fā)人員的熱烈歡迎。而本文中涵蓋的這些提示，相信亦能夠幫助大家在無需配合Photoshop的前提下更為輕松地實現(xiàn)與預(yù)期相符的網(wǎng)站外觀與使用感受。

原文標(biāo)題：10 In-Browser Web Development Tips     原文作者：Prat

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】