作為一個(gè)乙方公司的員工，在工作期間經(jīng)常受到甲方人員發(fā)來(lái)的各式各樣的網(wǎng)站設(shè)計(jì)稿，有PS（Photoshop）、AI（Illustrator）、CDR（CorelDRAW）等等。雖然什么樣的軟件都能開(kāi)發(fā)網(wǎng)站，但是作為行業(yè)通用符合大部分人使用習(xí)慣的還是PS+DW（Dreamweaver）配合設(shè)計(jì)+前端+程序開(kāi)發(fā)。網(wǎng)站建設(shè)主要分3個(gè)流程分別為頁(yè)面設(shè)計(jì)、前端制作、程序開(kāi)發(fā)；每個(gè)階段的分工人員和使用軟件也略有區(qū)別。

首先第一步進(jìn)行的是頁(yè)面設(shè)計(jì)（部分大型網(wǎng)站要先開(kāi)始做策劃和原型圖制作，但這個(gè)不是必要過(guò)程，所以這里不做過(guò)多的闡述）頁(yè)面設(shè)計(jì)我們主要用PS，經(jīng)常收到一些平面設(shè)計(jì)公司發(fā)來(lái)AI和CDR格式的設(shè)計(jì)稿，這種設(shè)計(jì)稿不是不能用，是用起來(lái)太麻煩，因這是矢量圖軟件，做矢量圖和印刷效果會(huì)很好，單位標(biāo)準(zhǔn)也是厘米等絕對(duì)長(zhǎng)度單位，但是網(wǎng)站就是展示在各種電子設(shè)備終端的，不需要印刷單位標(biāo)準(zhǔn)也是像素和屏幕分辨率是匹配的。如下圖新建一個(gè)網(wǎng)站設(shè)計(jì)首先在PS里面建一個(gè)文件。
 

作為PC端的網(wǎng)站寬度1200PX就足夠了，因目前最小的顯示器如筆記本也是1366px了，臺(tái)式顯示器低于1280px也基本沒(méi)有了，所以這個(gè)寬度各PC終端都能展示完。移動(dòng)終端還需要我們單獨(dú)再設(shè)計(jì)一個(gè)稿。



以上是2018.7—2018.12月近半年的終端分辨率統(tǒng)計(jì)，其中畫(huà)紅線的是PC端分辨率統(tǒng)計(jì)，沒(méi)畫(huà)紅線的是移動(dòng)端分辨率統(tǒng)計(jì)。所以PC端制作寬度1200px足以了，由于移動(dòng)端的雙倍分辨率所以移動(dòng)端750px也足以了。
其次當(dāng)頁(yè)面設(shè)計(jì)稿做好后就要做前端制作了，就是把PSD文件制作為HTML文件，這里前端用的軟件和程序開(kāi)發(fā)用的軟件是一直的都是DW（不過(guò)程序用的軟件更雜一些），移動(dòng)端興起后前端制作師的工作量就大大增加了，因同樣的設(shè)計(jì)稿前端要把稿件制作為兼容各種分辨率的html文件，因設(shè)計(jì)師的稿件是固定的，要兼容各種不同大小的顯示器，特別是不同內(nèi)核導(dǎo)致讀取代碼方式不一樣的瀏覽器，如：IE瀏覽器、谷歌瀏覽器（Chrome）、火狐瀏覽器（Firefox）和國(guó)內(nèi)的360瀏覽器等等。要做到完全兼容顯示效果一直，還是很需要水平的。制作界面如下圖：



最后是網(wǎng)站的程序開(kāi)發(fā)，程序開(kāi)發(fā)用的軟件就比較雜了，不過(guò)也有很多是用DW軟件寫(xiě)代碼的，其中代碼技術(shù)分為PHP、.NET、JAVA等等，方維開(kāi)發(fā)網(wǎng)站主要用PHP也是市場(chǎng)上開(kāi)發(fā)網(wǎng)站的一種主流技術(shù)。程序開(kāi)發(fā)的重點(diǎn)是要實(shí)現(xiàn)網(wǎng)站上的各種邏輯功能，如實(shí)現(xiàn)后臺(tái)可以更新網(wǎng)站上的信息、實(shí)現(xiàn)會(huì)員的注冊(cè)等等，還有一個(gè)重點(diǎn)就是系統(tǒng)安全，特別是一些涉及到金錢(qián)交易的商城網(wǎng)站，所以這種功能型網(wǎng)站開(kāi)發(fā)程序是一個(gè)重點(diǎn)也是一個(gè)難點(diǎn)！如下圖為程序開(kāi)發(fā)網(wǎng)站的軟件截圖



雖然開(kāi)發(fā)網(wǎng)站用什么軟件是沒(méi)有絕對(duì)的標(biāo)準(zhǔn)，但是還是建議用一些行業(yè)通用的軟件，畢竟網(wǎng)站的后期可能有新需求要二次開(kāi)發(fā)，以及在正在開(kāi)發(fā)的過(guò)程中需要同事的協(xié)助等等。大家統(tǒng)一標(biāo)準(zhǔn)才能事半功倍。