網(wǎng)站開發(fā)中，將PSD轉(zhuǎn)換成HTML的操作中，關(guān)鍵步驟是將PSD擴展設(shè)計轉(zhuǎn)化為可兼容、零誤差、靜態(tài)、高質(zhì)量、語義性、注釋明確并經(jīng)W3C驗證的手編程序XHTML / CSS / HTML標(biāo)記，準(zhǔn)確的HTML編碼是基于靜態(tài)web布局與跨瀏覽器兼容性在PSD上添加高級功能最重要的一個方面，用HTML編碼設(shè)計，需要具備下列條件:

?豐富的編碼經(jīng)驗

?淵博的編碼知識

?極高的關(guān)注度

?扎實的Html實踐功底

許多開發(fā)人員(無論是初學(xué)者還是有經(jīng)驗的)在使用XHTML / HTML代碼時都存在一定困難，容易犯一些常見錯誤，這里向大家推薦幾個將PSD轉(zhuǎn)換為XHTML / HTML/CSS的編碼技巧：

?不在線條樣式中使用

?正確編碼web頁面下設(shè)計樣式

?使用恰當(dāng)?shù)臉?biāo)記，

這是開發(fā)人員常犯的一個錯誤，混亂使用標(biāo)記會嚴(yán)重影響視覺美感，建議大家使用小寫字母，能使頁面看起來清晰美觀。從用戶角度而言，網(wǎng)站設(shè)計沒有吸引力，就會大大縮短訪客在網(wǎng)站上的停留時間，減少成交量，所以恰當(dāng)?shù)臉?biāo)記直觀重要。

?圖標(biāo)導(dǎo)航應(yīng)該體現(xiàn)用戶友好型

簡單明了，復(fù)雜乏味的導(dǎo)引圖標(biāo)指示會讓客戶覺得無聊，用起來費勁，高質(zhì)量的導(dǎo)航是一個網(wǎng)站保持魅力的關(guān)鍵，因此，結(jié)合使用CSS和無序列表元素能使網(wǎng)站導(dǎo)航菜單美觀大方，訂單頁面也是不容錯過的重要點，一個好的訂單頁面能讓用戶感覺親切、舒服，引導(dǎo)消費。

?許多開發(fā)人員喜歡運用div標(biāo)簽調(diào)整段落

在div周圍增加使用多個div標(biāo)簽，這時候就需要將元素正確分類，使得頁面看起來整潔，注意塊元素和內(nèi)聯(lián)元素，塊風(fēng)格元素有div h1，h2，h3，ul，p，ol，塊引用等等；內(nèi)聯(lián)風(fēng)格元素有span，a，em，img，strong，br，acronym等等。

上面提到的小技巧都是經(jīng)過實踐總結(jié)出來的最有效的方法，希望能幫助你把PSD順利轉(zhuǎn)化為HTML，避免一些不必要的錯誤。

智能社 撰稿，更多知識請關(guān)注微信號zhi_neng_she ，具體代碼可在公眾號內(nèi)‘技術(shù)圈’獲得！

來越多的開發(fā)者熱衷于使用html5+JavaScript開發(fā)移動Web App。不過，HTML5 Web APP的出現(xiàn)能否在未來取代移動應(yīng)用，就目前來說，還是個未知數(shù)。那么，有什么辦法，既可以使用HTMl5開發(fā)應(yīng) 用，又可以將其簡單封裝成APK文件呢？

一、Android SDK中的WebView

1.在要Activity中實例化WebView組件：WebView webView = new WebView(this);

2.調(diào)用WebView的loadUrl()方法，設(shè)置WevView要顯示的網(wǎng)頁：

? 互聯(lián)網(wǎng)用：webView.loadUrl("http://www.qietu.com");

? 本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中

3.調(diào)用Activity的setContentView( )方法來顯示網(wǎng)頁視圖

4.用WebView點鏈接看了很多頁以后為了讓W(xué)ebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點擊系統(tǒng)回退剪鍵，整個瀏覽器會調(diào)用finish()而結(jié)束自身，而不是回退到上一頁面

5.需要在AndroidManifest.xml文件中添加權(quán)限，否則會出現(xiàn)Web page not available錯誤。

? <uses-permission android:name="android.permission.INTERNET" />

缺點：如果是載入的是普通網(wǎng)頁，沒有什么問題，但如果是html5,封裝后，在android2.3以上才能正常訪問，android2.2及以下，SDK中的WebView還沒完全支持HTML5

下面是具體例子：

MainActivity.java

??? package com.android.webview.activity; ?

??? import android.app.Activity; ?

??? import android.os.Bundle; ?

??? import android.view.KeyEvent; ?

??? import android.webkit.WebView; ?

??? public class MainActivity extends Activity { ?

??????? private WebView webview; ?

??????? @Override

??????? public void onCreate(Bundle savedInstanceState) { ?

??????????? super.onCreate(savedInstanceState); ?

??????????? //實例化WebView對象 ?

??????????? webview = new WebView(this); ?

??????????? //設(shè)置WebView屬性，能夠執(zhí)行Javascript腳本 ?

??????????? webview.getSettings().setJavaScriptEnabled(true); ?

??????????? //加載需要顯示的網(wǎng)頁 ?

??????????? webview.loadUrl("http://www.qietu.com/"); ?

??????????? //設(shè)置Web視圖 ?

??????????? setContentView(webview); ?

??????? } ?

??????? @Override

??????? //設(shè)置回退 ?

??????? //覆蓋Activity類的onKeyDown(int keyCoder,KeyEvent event)方法 ?

??????? public boolean onKeyDown(int keyCode, KeyEvent event) { ?

??????????? if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) { ?

??????????????? webview.goBack(); //goBack()表示返回WebView的上一頁面 ?

??????????????? return true; ?

??????????? } ?

??????????? return false; ?

??? }

在AndroidManifest.xml文件中添加權(quán)限

??? <?xml version="1.0" encoding="utf-8"?>

??? <manifest xmlns:android="http://schemas.android.com/apk/res/android"

????????? package="com.android.webview.activity"

????????? android:versionCode="1"

????????? android:versionName="1.0">

??????? <uses-sdk android:minSdkVersion="10" />

??????? <application android:icon="@drawable/icon" android:label="@string/app_name">

??????????? <activity android:name=".MainActivity"

????????????????????? android:label="@string/app_name">

??????????????? <intent-filter>

??????????????????? <action android:name="android.intent.action.MAIN" />

??????????????????? <category android:name="android.intent.category.LAUNCHER" />

??????????????? </intent-filter>

??????????? </activity>

??????? </application>

??????? <uses-permission android:name="android.permission.INTERNET"/>

??? </manifest>

二、使用PhoneGap

??? PhoneGap是一個用基于HTML，CSS和JavaScript的，創(chuàng)建移動跨平臺移動應(yīng)用程序的快速開發(fā)平臺。它使開發(fā)者能夠利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位，加速器，聯(lián)系 人，聲音和振動等，此外PhoneGap擁有豐富的插件，可以以此擴展無限的功能。PhoneGap是免費的，但是它需要特定平臺提供的附加軟件，例如 iPhone的iPhone SDK，Android的Android SDK等，

詳細(xì)方法請見：http://phonegap.com/start#android

優(yōu)點：在Eclipse中加入SDK，編程自由，完美適應(yīng)不同設(shè)備屏幕大小，適合高手使用。

缺點：沒有使用布局，直接加載網(wǎng)頁，不能添加廣告。

----------------

切圖網(wǎng)（qietu.com）最早將psd轉(zhuǎn)html服務(wù)模式帶到國內(nèi)，并首個提供響應(yīng)式、webapp前端開發(fā)的公司。專注web前端開發(fā)技術(shù)，關(guān)注用戶體驗，加我們公眾微信賬號：qietuwang（長按復(fù)制）

期，切版網(wǎng)收購并啟用了qieban.cn域名，輸入域名可以看到非常搶眼的黃底黑色的網(wǎng)站。復(fù)制國外psd2html模式，主要提供html5/css3前端外包。

可見切版網(wǎng)對域名的保護是非常的重視。據(jù)查詢，qieban.cn近期信息有變動，“切版”域名qieban.cn注冊于2015年6月，相關(guān)的主流后綴域名qieban.com/.net等已注冊。

易名中國（eName.cn）訊