對于剛?cè)胄械腢I設(shè)計師，最容易犯的錯就是在設(shè)計移動APP時，不懂什么尺寸或者用哪種屏幕的尺寸是最適當?shù)?？為了解決這個問題，今天我們就簡單的為大家整理做UI時最基礎(chǔ)的尺寸規(guī)范?，F(xiàn)象首先說現(xiàn)象，大家都知道移動端設(shè)備屏幕尺寸非常多，碎片化嚴重。尤其是Android，你會聽到很多種分辨率：480×800, 480×854, 540×960, 720×1280, 1080×1920，而且還有傳說中的2K屏。近年來iPhone的碎片化也加劇了：640×960, 640×1136, 750×1334, 1242×2208。不要被這些尺寸嚇倒。實際上大部分的app UI設(shè)計和移動端網(wǎng)頁，在各種尺寸的屏幕上都能正常顯示。說明尺寸的問題一定有解決方法，而且有規(guī)律可循。像素密度要知道，屏幕是由很多像素點組成的。之前提到那么多種分辨率，都是手機屏幕的實際像素尺寸。比如480×800的屏幕，就是由800行、480列的像素點組成的。每個點發(fā)出不同顏色的光，構(gòu)成我們所看到的畫面。而手機屏幕的物理尺寸，和像素尺寸是不成比例的。最典型的例子，iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。剛好兩倍，然而兩款手機都是3.5英寸的。所以，我們要引入最重要的一個概念：像素密度，也就是PPI（pixels per inch）。這項指標是連接數(shù)字世界與物理世界的橋梁。Pixels per inch，準確的說是每英寸的長度上排列的像素點數(shù)量。1英寸是一個固定長度，等于2.54厘米，大約是食指最末端那根指節(jié)的長度。像素密度越高，代表屏幕顯示效果越精細。Retina屏比普通屏清晰很多，就是因為它的像素密度翻了一倍。倍率與邏輯像素再用iPhone 3gs和4s來舉例。假設(shè)有個郵件列表界面，我們不妨按照PC端網(wǎng)頁設(shè)計的思維來想象。3gs上大概只能顯示4-5行，4s就能顯示9-10行，而且每行會變得特別寬。但兩款手機其實是一樣大的。如果照這種方式顯示，3gs上剛剛好的效果，在4s上就會小到根本看不清字。在現(xiàn)實中，這兩者效果卻是一樣的。這是因為Retina屏幕把2×2個像素當1個像素使用。比如原本44像素高的頂部導(dǎo)航欄，在Retina屏上用了88個像素的高度來顯示。導(dǎo)致界面元素都變成2倍大小，反而和3gs效果一樣了。畫質(zhì)卻更清晰。在以前，iOS應(yīng)用的資源圖片中，同一張圖通常有兩個尺寸。你會看到文件名有的帶@2x字樣，有的不帶。其中不帶@2x的用在普通屏上，帶@2x的用在Retina屏上。只要圖片準備好，iOS會自己判斷用哪張，Android道理也一樣。由此可以看出，蘋果以普通屏為基準，給Retina屏定義了一個2倍的倍率（iPhone 6plus除外，它達到了3倍）。實際像素除以倍率，就得到邏輯像素尺寸。只要兩個屏幕邏輯像素相同，它們的顯示效果就是相同的。Android的解決方法類似，但更復(fù)雜一些。因為Android屏幕尺寸實在太多，分辨率高低跨度非常大，不像蘋果只有那么幾款固定設(shè)備、固定尺寸。所以Android把各種設(shè)備的像素密度劃成了好幾個范圍區(qū)間，給不同范圍的設(shè)備定義了不同的倍率，來保證顯示效果相近。像素密度概念雖然重要，但用不著我們自己算，iOS與Android都幫我們算好了。如圖所示，像素密度在120左右的屏幕歸為ldpi，160左右的歸為mdpi，以此類推。這樣，所有的Android屏幕都找到了自己的位置，并賦予了相應(yīng)的倍率：ldpi [0.75倍]mdpi [1倍]hdpi [1.5倍]xhdpi [2倍]xxhdpi [3倍]xxxhdpi [4倍]各型號iPhone的倍率比較簡單，我們后面會講到。那么Android手機那么多，具體怎么分？哪些手機是幾倍的倍率呢？我們先看一張表，這是友盟2014年10月到2015年03月的數(shù)據(jù)：就目前市場狀況而言，各種手機的分辨率可以這樣粗略判斷。雖然不全面，但至少在1年內(nèi)都還有一定的參考意義：ldpi 如今已絕跡，不用考慮mdpi [320x480]（市場份額不足5%，新手機不會有這種倍率，屏幕通常都特別?。﹉dpi [480x800、480x854、540x960]（早年的低端機，屏幕在3.5英寸檔位；如今的低端機，屏幕在4.7-5.0英寸檔位）xhdpi [720x1280]（早年的中端機，屏幕在4.7-5.0英寸檔位；如今的中低端機，屏幕在5.0-5.5英寸檔位）xxhdpi [1080x1920]（早年的高端機，如今的中高端機，屏幕通常都在5.0英寸以上）xxxhdpi [1440x2560]（極少數(shù)2K屏手機，比如Google Nexus 6）自然地，以1倍的mdpi作為基準。像素密度更高或者更低的設(shè)備，只需乘以相應(yīng)的倍率，就能得到與基準倍率近似的顯示效果。不過需要注意的是，Android設(shè)備的邏輯像素尺寸并不統(tǒng)一。比如兩種常見的屏幕480×800和1080×1920，它們分別屬于hdpi和xxhdpi。除以各自倍率1.5倍和3倍，得到邏輯像素為320×533和360×640。很顯然，后者更寬更高，能顯示內(nèi)容。所以，即使有倍率的存在，各種Android設(shè)備的顯示效果仍然無法做到完全一致。單位不難發(fā)現(xiàn)，真正決定顯示效果的，是邏輯像素尺寸。為此，iOS和Android平臺都定義了各自的邏輯像素單位。iOS的尺寸單位為pt，Android的尺寸單位為dp。說實話，兩者其實是一回事。單位之間的換算關(guān)系隨倍率變化：1倍：1pt=1dp=1px（mdpi、iPhone 3gs）1.5倍：1pt=1dp=1.5px（hdpi）2倍：1pt=1dp=2px（xhdpi、iPhone 4s/5/6）3倍：1pt=1dp=3px（xxhdpi、iPhone 6）4倍：1pt=1dp=4px（xxxhdpi）單位決定了我們的思考方式。在設(shè)計和開發(fā)過程中，應(yīng)該盡量使用邏輯像素尺寸來思考界面。設(shè)計Android應(yīng)用時，有的設(shè)計師喜歡把畫布設(shè)為1080×1920，有的喜歡設(shè)成720×1280。給出的界面元素尺寸就不統(tǒng)一了。Android的最小點擊區(qū)域尺寸是48x48dp，這就意味著在xhdpi的設(shè)備上，按鈕尺寸至少是96x96px。而在xxhdpi設(shè)備上，則是144x144px。無論畫布設(shè)成多大，我們設(shè)計的是基準倍率的界面樣式，而且開發(fā)人員需要的單位都是邏輯像素。所以為了保證準確高效的溝通，雙方都需要以邏輯像素尺寸來描述和理解界面，無論是在標注圖還是在日常溝通中。不要再說“底部標簽欄的高度是96像素，我是按照xhdpi做的”這樣的話了。Web怎么辦移動端頁面的絕對單位仍然是px，至少代碼里這么寫，但它的道理也和app一樣。由于像素密度是設(shè)備本身的固有屬性，它會影響到設(shè)備中的所有應(yīng)用，包括瀏覽器。前端技術(shù)可以善加利用設(shè)備的像素密度，只需一行代碼，瀏覽器便會使用app的顯示方式來渲染頁面。根據(jù)像素密度，按相應(yīng)倍率縮放。以iPhone 5s為例，屏幕的分辨率是640×1136，倍率是2。瀏覽器會認為屏幕的分辨率是320×568，仍然是基準倍率的尺寸。所以在制作頁面時，只需要按照基準倍率來就行了。無論什么樣的屏幕，倍率是多少，都按邏輯像素尺寸來設(shè)計和開發(fā)頁面。只不過在準備資源圖的時候，需要準備2倍大小的圖，通過代碼把它縮成1倍大小顯示，才能保證清晰。實際應(yīng)用大家最關(guān)心的還是實際運用，畫布該怎么設(shè)置。我們就iOS、Android、Web三個平臺來分別梳理一下。不過在這之前，我要為使用PS進行設(shè)計的朋友介紹一個小技巧。之前我說過，我們要以邏輯像素尺寸來思考界面。體現(xiàn)到設(shè)計過程中，就是要把單位設(shè)置成邏輯像素。打開PS的首選項——單位與標尺界面，把尺寸和文字單位都改成點（Point）。這里的點也就是pt，無論設(shè)計iOS、Android還是Web應(yīng)用，單位都用它。當然，各平臺單位名稱還是要記住的。這里我們用的只是它的原理，不用在意名稱。要調(diào)節(jié)倍率，則通過圖像大小里的DPI來控制。這個DPI，其實就是PPI，像素密度。有個常識大家都知道，屏幕上的設(shè)計DPI設(shè)成72，印刷品設(shè)計DPI設(shè)成300。為什么是這兩個數(shù)字？首先說300，這和人眼的分辨能力有關(guān)。由于1英寸是固定長度，每1英寸有多少個像素點決定了畫質(zhì)清晰程度。之前說過，這就是像素密度，也就是DPI。DPI達到300以上，其細膩程度就會給人真實感，像真實世界中的物件。相反，DPI只有10的話，在你一個食指指節(jié)大小的長度內(nèi)只有10個像素，這明顯就是馬賽克了。所以印刷品要設(shè)成300，才能保證清晰。再說72，這有一定的歷史原因。最早的圖形設(shè)計是在mac電腦上進行的，mac本身的顯示器分辨率就是72。PS中把圖像DPI也設(shè)成72，就能保證屏幕上顯示的尺寸和打印尺寸相同，便于設(shè)計。72的PC顯示器分辨率逐漸成為一種默認的行業(yè)標準，這套規(guī)則就這么沿用下來?，F(xiàn)在回到正題，我們怎么通過DPI來調(diào)節(jié)倍率？既然屏幕本身的分辨率是72，DPI設(shè)成72剛好是1倍尺寸，那設(shè)成72的兩倍就是倍率為2的屏幕了，就這么簡單。下面來看看3個平臺各自的畫布設(shè)置：IPhoneiPhone的屏幕尺寸各不相同，我說的是邏輯像素尺寸，這確實是讓人很頭疼的事情。如果想用一套設(shè)計涵蓋所有iPhone，就要選擇邏輯像素折中的機型。從市場占有率數(shù)據(jù)來看，目前最多的是iPhone5/5s的屏幕。倍率為2，邏輯像素320×568。上升勢頭最猛，未來有望登上第一的是iPhone 6的屏幕。倍率為2，邏輯像素375×667。按照這兩種尺寸來設(shè)計，都是比較主流的做法。可以兼顧短一些的iPhone 4s，大一點的6 plus也不會過于空曠。不過在切圖的時候要注意，由于iPhone 6 plus的3倍圖是由2倍圖放大而來，所以位圖要注意保證清晰。Android都說Android碎片化嚴重，但它現(xiàn)在反而比iOS好處理。因為如今的Android屏幕邏輯像素已經(jīng)趨于統(tǒng)一了：360×640，就看你設(shè)成幾倍了。想以xhdpi為準，就把DPI設(shè)成72×2=144。想以xxhdpi為準，就把DPI設(shè)成72×3=216。對于那些比較老的低端機，寬度是480px的那批，畫面確實會小一些，顯示內(nèi)容會更少。稍微留意一下，重要內(nèi)容盡量保持在界面中上部分。當然，這些機型不出一年就會被邊緣化，基本淘汰。現(xiàn)在能運轉(zhuǎn)的也是當作功能機在用，軟件多了必卡無疑，用戶體驗無從談起。不作考慮也是OK的。Web手機端網(wǎng)頁就沒有統(tǒng)一標準了，比較流行的做法是按照iPhone 5的尺寸來設(shè)計。倍率2，邏輯像素320×568。這樣的做法比較實在，倍率2的屏幕無論在iOS還是Android方面都是主流，而且又是2倍屏幕中邏輯像素最小的。所以圖片的尺寸可以保持在較小的水平，頁面加載速度快。當然，缺點就是在倍率3的設(shè)備上看，圖片不是特別清晰。如果追求圖片質(zhì)量，愿意犧牲加載速度，那么可以按照最大的屏幕來設(shè)計。也就是iPhone 6 plus的尺寸，倍率3，邏輯像素414×736?？偨Y(jié)移動端的尺寸比PC端復(fù)雜，關(guān)鍵就在倍率。但也正因為倍率的存在，把大大小小的屏幕拉回到同一水平線，得以保證一套設(shè)計適應(yīng)各種屏幕。站在這條水平線的角度看，會發(fā)現(xiàn)它很好理解。

Web前端開發(fā)工程師，主要職責是利用(X)HTML/CSS/JavaScript/Flash等各種Web技術(shù)進行客戶端產(chǎn)品的開發(fā)。完成客戶端程序(也就是瀏覽器端)的開發(fā)，開發(fā)JavaScript以及Flash模塊，同時結(jié)合后臺開發(fā)技術(shù)模擬整體效果，進行豐富互聯(lián)網(wǎng)的Web開發(fā)，致力于通過技術(shù)改善用戶體驗。網(wǎng)頁設(shè)計師就是為網(wǎng)站頁面進行設(shè)計并制作的工作人員，負責對網(wǎng)站整體表現(xiàn)風格的定位，對用戶視覺感受的整體把握；進行網(wǎng)頁的具體設(shè)計制作；產(chǎn)品目錄的平面設(shè)計；各類活動的廣告設(shè)計；協(xié)助開發(fā)人員頁面設(shè)計等工作。既是專業(yè)的設(shè)計師，又是靜態(tài)網(wǎng)站的開發(fā)工程師；總的來說網(wǎng)頁設(shè)計師不僅要懂頁面的設(shè)計、規(guī)化、排版、HTML代碼、FLASH動畫甚至還要多懂一些代碼。Web前端開發(fā)工程師對常用的一些JS框架了解，如jQuery、YUI等。掌握最基本的JavaScript計算方法編寫。對目前互聯(lián)網(wǎng)流行的網(wǎng)頁制作方法(Web2.0)HTML+CSS，以及各大瀏覽器兼容性有很大的了解。對前沿技術(shù)(HTML5+CSS3)的基本掌握。還要對IT其他編程語言有所了解如:PHP，Java，.net，有一些公司還要求懂一點SEO優(yōu)化。網(wǎng)頁設(shè)計師常用軟件Photoshop、Coreldraw、Flash、Fireworks、dreamweaver、其中photoshop主要是用來進行圖像處理的，把渲出來的圖通過PS使其更加具有真實感。

想了解他們之間的區(qū)別，先看一下兩個職業(yè)的簡單定義吧。網(wǎng)站開發(fā)工程師：簡稱Web Development Engineer主要負責網(wǎng)站后臺的編程開發(fā)，數(shù)據(jù)庫的管理。網(wǎng)頁設(shè)計師：為網(wǎng)站頁面進行構(gòu)圖，配色，排版，設(shè)計和視覺效果實現(xiàn)的工作人員，他們既是專業(yè)的設(shè)計師。區(qū)別：掌握的技能不同網(wǎng)站開發(fā)工程師：應(yīng)該掌握的技能主要包括：html div+css  javascript ajax  php/jsp/asp  mysql/sql  windows和 linux服務(wù)器搭建配置和日常操作等。網(wǎng)頁設(shè)計師：一般就有美術(shù)功底，要對網(wǎng)站的構(gòu)圖，配色，網(wǎng)站布局和排版等都要了解，要有很好的審美。會熟練操作Photoshop，Coreldraw,Frontpage,Dreamweaver網(wǎng)頁設(shè)計軟件來實現(xiàn)頁面視覺效果。    2.工作任務(wù)     網(wǎng)頁設(shè)計師：要對網(wǎng)站的構(gòu)圖，配色，網(wǎng)站布局和排版設(shè)計和實現(xiàn)。    網(wǎng)站開發(fā)工程師：網(wǎng)站后臺的編程開發(fā)，數(shù)據(jù)庫的管理，服務(wù)器安全防護，還有日常程序bug修改。   3.賦一張圖片（圖片來自網(wǎng)絡(luò)）總結(jié)：日常工作順序是網(wǎng)頁設(shè)計師把網(wǎng)頁效果圖制作出來，網(wǎng)站開發(fā)工程師按照平面效果圖來實現(xiàn)網(wǎng)站功能，數(shù)據(jù)庫設(shè)計創(chuàng)建?？傊W(wǎng)頁設(shè)計師和網(wǎng)站開發(fā)工程師是互相協(xié)作的，誰也離不開誰的。

網(wǎng)頁設(shè)計師應(yīng)該擁有的幾個證書Macromedia認證網(wǎng)頁設(shè)計師證書主辦機構(gòu)：Macromedia公司，擁有300萬開發(fā)和設(shè)計用戶，以及廣大的行業(yè)合作伙伴網(wǎng)絡(luò)，全球98%的web用戶都采用了Macromedia的軟件。培訓內(nèi)容：目前開設(shè)MacromediaFlashMX2004、DreamweaverMX2004、FireworksMX2004三個科目，每門科目代表了不同的應(yīng)用方向。學員通過了三門科目的考試后，才能獲得Macromedia認證網(wǎng)頁設(shè)計師證書。Adobe認證網(wǎng)頁設(shè)計師證書(ACCD)主辦機構(gòu)：美國Adobe公司是全球第二大桌面軟件公司，產(chǎn)品涉及圖形設(shè)計、圖像制作、數(shù)碼視頻和網(wǎng)頁制作等領(lǐng)域。培訓內(nèi)容：涉及PageMill3.0、ImageReady1.0、ImageStyler1.0、PhotoDeluxe3.0HE等軟件的應(yīng)用，其中，最核心部分是AdobeGoLive軟件應(yīng)用，該軟件是目前最強勢的排版設(shè)計工具和網(wǎng)站管理工具。CIW認證網(wǎng)頁設(shè)計師證書主辦機構(gòu)：CIW(CertifiedInternetWebmaster)以開發(fā)超越廠商背景的互聯(lián)網(wǎng)證書而聞名于世，在全球IT認證界具有一定的權(quán)威地位。培訓內(nèi)容：CIW中國認證網(wǎng)頁設(shè)計師課程設(shè)置上偏重于Web設(shè)計與制作，使學員能夠應(yīng)用獨特的設(shè)計理念、豐富動態(tài)的應(yīng)用程序及互動多媒體制作方式，創(chuàng)作出最為直觀的Web作品。CIW認證分成網(wǎng)頁制作專家、Flash動畫制作專家和圖像處理專家三個方向。CEAC認證網(wǎng)頁設(shè)計師證書(CCWD)主辦機構(gòu)：由國家信息產(chǎn)業(yè)部設(shè)立，由CEAC國家信息化培訓認證管理辦公室統(tǒng)一管理、實施，是國家級教育認證項目。培訓內(nèi)容：主要涉及Flash2004、Photoshop8.0、Dreamweaver2004、Fireworks2004、HTML語言、CSS樣式表、ASP后臺開發(fā)、留言板建立、論壇實例整合、網(wǎng)站架構(gòu)及信息資源等，學員完成培訓后能獨立完成網(wǎng)頁設(shè)計與網(wǎng)站建構(gòu)。哪些證書含金量較高■Macromedia證書MacromediaWeb設(shè)計師認證項目，是專為網(wǎng)頁設(shè)計制作人員、Web開發(fā)人員及Macro？鄄media產(chǎn)品愛好者度身定制的，是考核以上人員綜合應(yīng)用MacromediaFlash、Dreamweaver和Fireworks軟件進行專業(yè)、高效Web設(shè)計與制作能力的權(quán)威認證項目。該認證的針對性較強，其中的Macromedia互動媒體工程師認證偏重于多媒體應(yīng)用程序的設(shè)計制作，MacromediaWeb開發(fā)工程師認證偏重Inter？鄄net應(yīng)用程序、XML處理、Web服務(wù)等。由于Macromedia公司的軟件是網(wǎng)頁設(shè)計及多媒體制作領(lǐng)域應(yīng)用最為廣泛的軟件，因此，參加相關(guān)培訓，不僅能掌握最流行的Macromedia軟件操作技能，而且也大大增加了就業(yè)機會。推薦指數(shù)：★★★★★■Adobe證書由于ADOBE公司在平面設(shè)計及圖片處理軟件領(lǐng)域的權(quán)威地位，Adobe證書能證明持證者在獨立設(shè)計與制作動畫、靜態(tài)和動態(tài)網(wǎng)頁方面的出色能力。隨著企業(yè)對網(wǎng)頁制作要求的不斷提高，Adobe網(wǎng)頁設(shè)計師證書將成為這一領(lǐng)域最炙手可熱的證書。推薦指數(shù)：★★★★■CIW證書自1998年創(chuàng)建以來，CIW認證以迅猛之勢遍及100多個國家，目前已成為全球發(fā)展最快的綜合型IT認證培訓機構(gòu)。CIW證書獲得互聯(lián)網(wǎng)專家協(xié)會(AIP)、國際網(wǎng)站管理員協(xié)會(IWA)、國際互聯(lián)網(wǎng)證書機構(gòu)(ICII)、新加坡國家InfoComm資格中心等專業(yè)機構(gòu)的普遍認可。此外，由于CIW與IBM、HP、Intel等國際知名IT企業(yè)的密切合作，使CIW證書在全球IT業(yè)界具有極高的權(quán)威性。對國內(nèi)IT人士來說，擁有CIW證書，無疑將大大增加就業(yè)競爭力。推薦指數(shù)：★★★

　　如果你還是在校學生，那你得好好上課，大學的教材普遍來講都是知識面淺的。雖然很多知識看起來用處不大，學起來也很枯燥，讓你覺得浪費時間。但這些書本上最基礎(chǔ)的知識你都不能掌握，那你以后怎么追求更精湛的技術(shù)呢。所以不要逃課，把基礎(chǔ)知識掌握了，別小看這個基礎(chǔ)知識，它非常重要，基礎(chǔ)扎實是否也會決定你在一個職業(yè)能走多遠。　　我是畢業(yè)了后從文員轉(zhuǎn)到編輯再到技術(shù)員當然這期間工資就像是階梯一樣，雖然這差距也不是很大，都離不開那些曾經(jīng)被我遺落角落的專業(yè)課本。生活上的壓力迫使我這樣做，我知道自己要什么，當一個文員沒有追求，感覺過著30、40歲人的生活，接電話、發(fā)email、整理報表，每個月都有白領(lǐng)的工資...浪費的不僅僅是自己的青春，還有這大學幾年昂貴的學費。后來就愈來愈想掌握一門技術(shù)，想去培訓學校學習一段時間，但是現(xiàn)實是我沒有錢，閉關(guān)一個星期，重拾課本，再看看那些討厭的table，雖然out了，但是確實會發(fā)現(xiàn)很多基礎(chǔ)再基礎(chǔ)不過的東西，利用互聯(lián)網(wǎng)，不明白的就百度，作為一個過來人，我覺得我自己走了不少彎路，所以，有必要提醒你們一下，一定要明確自己的目標，擺正自己的位置，最好掌握一門技術(shù)?！　×私鈝eb前端　　Web前端開發(fā)是從網(wǎng)頁制作演變而來的，名稱上有很明顯的時代特征。在互聯(lián)網(wǎng)的演化進程中，網(wǎng)頁制作是Web1.0時代產(chǎn)物，那時網(wǎng)站的主要內(nèi)容是靜態(tài)的，用戶使用網(wǎng)站的行為也以瀏覽為主。2005年以后，互聯(lián)網(wǎng)進入Web2.0時代，各種類似桌面軟件的Web應(yīng)用大量涌現(xiàn)，網(wǎng)站的前端由此發(fā)生了翻天覆地的變化。網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術(shù)實現(xiàn)的。說得直白點就是美工photoshop，交互設(shè)計，flash，js，html+css。就小規(guī)模公司而言，一個技術(shù)員都得會這幾樣技能，這樣很鍛煉人的，慢慢的你就會成為公司的主力。大規(guī)模的公司把這些分得很細，所以，你可以精通一門，熟悉其他的，進軍大公司?！　【W(wǎng)頁開發(fā)工具　　學習web前端開發(fā)，網(wǎng)頁開發(fā)工具有FrontPage，會用 Word 的人很容易學會FrontPage。還有一個常用的是Dreamweaver。這兩種都是使用最多的HTML網(wǎng)頁制作工具，我使用的是Dreamweaver cs6,因為這套軟件提供了一套直觀的可視界面，融合了html5一些新的內(nèi)容。包括網(wǎng)格布局什么的。　　學習內(nèi)容　　HTML、CSS和JavaScript。html是內(nèi)容，css是表現(xiàn)，javascript是行為。前端開發(fā)的門檻其實非常低，與服務(wù)器端語言先慢后快的學習曲線相比，前端開發(fā)的學習曲線是先快后慢。所以，對于從事IT工作的人來說，前端開發(fā)是個不錯的初入點。也正因為如此，前端開發(fā)的領(lǐng)域有很多自學成“才”的同行。html是最基礎(chǔ)的，現(xiàn)在流行的是html5設(shè)計，先學會網(wǎng)頁布局。css是用來美化html頁面的為頁面提供布局和格式。最后再學javascript。如果你把每天看電影、看電視劇的時間用來學習，我想一個星期入門是沒有問題的?！　』A(chǔ)知識：　　1. html + css。這部分建議在 www.w3school.com.cn 上學習，邊學邊練，每章后還有小測試。之后可以模仿一些網(wǎng)站做些頁面。本站提供的個人博客模板www.yangqq.com/download/都是比較簡單的單頁，可以下載下來模仿自己做一個。理解css每個元素的屬性，樣式的實現(xiàn)不一定只有一種寫法，多想一想還有沒有什么需要改進的地方。　　2、JavaScript。不是所有的網(wǎng)頁都必須有js，但是要想實現(xiàn)一些超酷的功能和界面的時候，就需要涉及到j(luò)s。如果沒有其他編程語言的基礎(chǔ)的話，學起來可能要費些力，還是建議先在 w3school上學習。之后建議馬上看《javascript語言精粹》　　3、Photoshop、flash。熟悉會一點兒就行了，沒必要全部都學得精通，當然如果你在學習的過程中，發(fā)現(xiàn)你ps或者flash比較感興趣的話，也可以嘗試做美工這一行。　　4、html5和css3?？梢韵攘私庖幌?，然后再入手。畢竟IE的瀏覽器大多還不支持?！　?、瀏覽器兼容。懂web標準，熟練手寫 xhtml css3 并符合 符合w3c標準。代碼能兼容主流瀏覽器Firfox，Chrome、Safari、IE、Opera。雖然IE6很多都不兼容，但現(xiàn)在還使用的人還是有的。W3C驗證地址：http://jigsaw.w3.org/css-validator/ 通過驗證指定URI的CSS內(nèi)容，可以幫我們檢查一下有沒有錯誤?！　?、熟悉一門后臺編程語言 asp、php、jsp等　　web前端設(shè)計師前景　　遇到很多想換行的朋友，第一句就問，這行賺錢嗎？我相信一句話，沒有付出，是沒有回報的！前面已經(jīng)說過了，咱們這行門檻是很低的，所以薪資階段也不一樣。2000初入這行的現(xiàn)在還普遍，工作經(jīng)驗2年以上，有很多代表性作品的時候，工資在4000左右；高手級別的估計在6000左右，大師級別這個階段的薪資參考：10000以上(上海北京深圳為例)網(wǎng)頁設(shè)計師課程一般包括：Photoshop、Fireworks、用戶界面設(shè)計實操，xhtml、css、dreamweaver、網(wǎng)站架構(gòu)與網(wǎng)站策劃、flash動畫制作，域名與空間、ftp、dhtml、javascript、動態(tài)交互網(wǎng)站(asp、php、aja)。

前端開發(fā)工程師獨立出來主要就是做數(shù)據(jù)交互、后臺處理、SEO優(yōu)化等工作，要熟練各種腳本語言和運行環(huán)境，熟悉XML、SQL、ORACLE等數(shù)據(jù)庫，熟悉AJXA、Jquery、Slivelight、Struct2、CSS4、Html5等網(wǎng)站處理技術(shù)。網(wǎng)頁設(shè)計（web design，又稱為Web UI design，WUI design，WUI），是根據(jù)企業(yè)希望向瀏覽者傳遞的信息（包括產(chǎn)品、服務(wù)、理念、文化），進行網(wǎng)站功能策劃，然后進行的頁面設(shè)計美化工作。作為企業(yè)對外宣傳物料的其中一種，精美的網(wǎng)頁設(shè)計，對于提升企業(yè)的互聯(lián)網(wǎng)品牌形象至關(guān)重要。網(wǎng)頁設(shè)計一般分為三種大類：功能型網(wǎng)頁設(shè)計（服務(wù)網(wǎng)站&B/S軟件用戶端）、形象型網(wǎng)頁設(shè)計（品牌形象站）、信息型網(wǎng)頁設(shè)計（門戶站）。設(shè)計網(wǎng)頁的目的不同，應(yīng)選擇不同的網(wǎng)頁策劃與設(shè)計方案。網(wǎng)頁設(shè)計的工作目標，是通過使用更合理的顏色、字體、圖片、樣式進行頁面設(shè)計美化，在功能限定的情況下，盡可能給予用戶完美的視覺體驗。高級的網(wǎng)頁設(shè)計甚至會考慮到通過聲光、交互等來實現(xiàn)更好的視聽感受。網(wǎng)頁設(shè)計主要以Adobe產(chǎn)品為主，常見的工具包括FW、PS、FL、DW、CDR、AI等，其中DW是代碼工具，其他是圖形圖像和FL動畫工具。還有最近幾年Adobe新出的EdgeReflow、EdgeCode、Muse。

網(wǎng)頁設(shè)計和網(wǎng)頁編程不太一樣，但都需要會代碼吧！網(wǎng)頁設(shè)計應(yīng)該精通html語言，css和div布局的一些技術(shù)，和一些美化軟件的使用，像ps，flash等等，一般在一個網(wǎng)站開發(fā)中扮演前臺開發(fā)的角色；而網(wǎng)頁編程，真正要學會一些編程語言的，因為網(wǎng)頁編程要扮演后臺制作的角色，就是網(wǎng)頁中要實現(xiàn)的功能和一些后臺管理，所以必須要學會編程的，編程語言很多，c c++等！網(wǎng)頁設(shè)計要學會 Photoshop flash Dreamweaver 等等網(wǎng)頁編程要學會 visual studio 2008等一些編程軟件用來制作后臺管理！至于哪個好學，個人認為網(wǎng)頁設(shè)計比較好學！因為和語言聯(lián)系不大，所以邏輯性不是很強的！其實學什么都要認真，用心，努力的！祝你好運！

我就是做設(shè)計的，說實話還是建議你做變成，因為那個相對來說工資更高，剛畢業(yè)的也能有近3000，工作個一兩年，技術(shù)過硬的話可以拿個四五千、五六千，甚至做個項目經(jīng)理，有項目經(jīng)理補貼；我本身做設(shè)計已經(jīng)有四年了，現(xiàn)在工資也才五千多，而且是算上了每月的飯貼、交通補貼、項目補貼；而我們公司普通的程序員都是四五千，項目經(jīng)理都是一萬左右工資了有人說我們工作量沒程序員大，技術(shù)含量沒那個高，我要說的是那純屬扯淡，單單從設(shè)計頁面來說，我們費的腦子就比程序員大N倍，我們完全是要自己創(chuàng)作頁面出來的，而程序員呢？那些程序基本上都是有現(xiàn)成的，工資基本上就是每天復(fù)制粘貼，部分再做修改或者添加而已；要知道一般的公司做設(shè)計的人并不多的，而程序員卻是主要成員，每個項目設(shè)計人員都要參與，而程序員一般都是平攤?cè)蝿?wù)，輪工作量設(shè)計不必程序員少，論腦力活動，我們需要創(chuàng)意比程序員強很多倍，但是工資一般只有對方的一半或者一大半而已所以還是去做編程吧你，我是因為工作太忙，而已年紀也大了沒精力再去專門學編程了，在做個八九年設(shè)計，攢點錢回老家做生意去，到時候都快奔四了，還做設(shè)計就有點沒前途了

網(wǎng)頁設(shè)計分為兩大部分：一、單純的設(shè)計，也就是ps。二、就是網(wǎng)頁制作，前端開發(fā)div+css。一般來說大公司都是分的很細的，而小公司卻讓一個人做。不管做哪部分剛?cè)肼殨r都會有一個老師帶著也就是說給老師打下手，老師會分出來一部分內(nèi)容讓你去做。直到可以獨立完成為止。