瀏覽器內Web開發的10個重要提示

作者：核子可樂譯 2017-03-10 19:30:58

在今天的文章中，我們將共同立足于瀏覽器內Web開發，探討十項能夠幫助大家順利解決Web開發問題的重要提示。

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

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

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

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

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

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

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

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

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

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

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

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

原文標題：10 In-Browser Web Development Tips 原文作者：Prat

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

責任編輯：test 來源： 51CTO.com