每天我們開啟電腦，看到各種各樣的Web前端頁面。你知道他們是如何製作的嗎？為了讓頁面更具有規範性，讓使用者更加方便，在製作頁面過程中必須遵循一定的設計流程。在這裡就為大家詳細介紹一下製作一個Web前端頁面的設計流程及注意事項。

一：確定網站主題

　　每個網站都有自身以及對使用者的定位。針對網站定位確定網站的主題是整個網站運營的核心。一般從網站建設的目標、網站使用者群體、網站產品內容以及企業服務四個方面確定網站主題。此外還需要注意，每個頁面不但要承載整體企業的定位，同時還要側重其中某一個特定主題。

　　二：網站整體規劃

　　為了提高使用者體驗以及提高網站在搜尋引擎收錄率，在網站建設初期最好能夠理清網站機構，增加不同頁面之間的關聯性，從而更好規劃頁面的佈局以及網站功能。一般情況下，產品經理在設計網站初期就會提供完整的業務邏輯圖，設計師和前端工程師根據業務邏輯架構完成相關頁面的設計開發。需要重點考慮的內容包括：網站的功能、網站的結構、拌麵佈局等等。尤其在網站功能需求較多的情況下，網站整體規劃更加重要。

　　三、整合素材

　　在網站整體架構完成後，就可以開始整合收集素材了。網站開發和網站內容籌備同步進行，可以大大提高網頁開發的效率。主要收集的素材包括文字素材（一般由公司內容運營提供相應的文字素材，需要注意的是，這些文字素材的準確性以及版權非唯一性）、圖片素材（現在很少有純文字性的網站，往往需要大量的圖片素材，甚至還有視訊素材等）。

　　四、網站開發與動態效果

　　前端頁面開發主要用到HTML、CSS、JavaScript技術。在確定網站結構以及頁面設計圖齊全的情況下，前端開發工程師就可以進行頁面開發了。這個過程中主要完成頁面搭建以及動態效果實現。

　　此外在前端頁面設計過程中還需要有一些常規的注意事項：頁面解析度設定，在設計網頁時，頁面的寬度儘量不要超過螢幕的解析度，否則頁面可能無法完全展示；注意頁面版心位置。目前比較流行的螢幕寬度解析度一般1200PX~1920px，為了適配不同解析度的顯示器，一般設計班型寬度在1000Px~1200Px之間。

　　這就是為大家分享的Web前端頁面製作流程以及注意事項。在不同的公司中，前端工程師的崗位職責是不同的，甚至在某些大型網際網路公司中，部分前端工程師僅僅做其中一個環節，即使如此作為前端工程師還是要多多學習大前端的技術知識，才能更好的適應企業人才需求。

您問的前端是指web前端嗎？app那種叫移動端，小程式用到的技術和web前端一致。前端工程師在工作流程中需要對接上游的UI設計師和下游的後端工程師，具體來說就是把UI給的效果圖還原成頁面，需要編寫HTML和css程式碼，也可以用框架和元件庫快速搭建頁面，佈局方式也有了less，sass等擴充套件版的css。而重點在於和後端工程師的對接，需要把api資料渲染到頁面和傳送api請求給後端，最重點在於處理各種觸發事件，如使用者點選某個頁面元素後需要執行的邏輯流程等

如果是遊戲的話，前端也叫客戶端，主要做的內容就是使用遊戲引擎做表現。比如棋牌遊戲客戶端根據服務下發的牌型資料畫出對應的圖片。當然這個只是業務邏輯部分，如果能力好一些的就是優化遊戲效能，搭建遊戲框架。不管前端還是後端，只要用心做，都有很多東西可以積累。

webh5，小程式等，前後端只是在應用開發中因為分工不同而出現的不同職位。現在網際網路開發都採用前後端分離的開發模式，前端一般負責頁面的展示和頁面互動，後端負責資料和邏輯的處理