㈠ web前端開發設計圖
用coreldraw軟體的「度量」工具標註：
㈡ UI中的「切圖」是什麼意思為什麼要切圖
切圖是設計師交付給開發的產物之一，設計稿完成後，設計師需要將其切成便於製作成頁面的圖片。但因為開發經常需要不同平台不同尺寸的切圖，如果全部由UI來做，不僅費時費力，可能還會因為細微的差距造成開發不能很好的還原設計稿。
所以可以用摹客之類的專業工具來自動切圖。UI把Sketch、Adobe XD、PS的設計稿進行切圖標記，上傳至摹客後，開發就可以自主下載不同平台不同尺寸的切圖和使用了。
(2)前端設計稿是什麼樣的圖片擴展閱讀：
切圖用於完成html+css布局的靜態頁面，有利於交互，形成良好的視覺感。通俗來講，把一張設計圖利用到切片工具 把自己所需的切成一張張小圖，然後前端開發用DIV+CSS完成靜態頁面書寫，完成CSS布局。
切圖大家都有個誤區，覺得切圖就是把圖片切出來，其實並不完全是這樣，首先處理的是什麼類型的頁面圖片型（EDM 或活動著陸頁等）、圖文型（門戶網站或電商網站等）、界面型（Web App 等），把圖片切出來這個過程是叫切片。
㈢ 前端指什麼
前端指的是什麼？
前端工程師是 互聯網時代軟體產品研發中不可缺少的一種專業研發角色。
從狹義上講，前端工程師使用 HTML、CSS、JavaScript 等專業技能和工具將產品UI設計稿實現成網站產品，涵蓋用戶PC端、移動端網頁，處理視覺和交互問題。
從廣義上來講，所有用戶終端產品與視覺和交互有關的 部分，都是前端工程師的專業領域。
web前端包括哪些技術？
1 基礎技術
前端的三大基礎毫無疑問就是HTML、CSS和JS。我稱之為前端的骨、肉和魂。
先說「骨」——HTML。HTML,翻譯過來就是超文本標記語言，而不是江湖上的HOW TO ML。方向不能搞錯了，我們整的東西可是老少咸宜的。HTML學習最重要的標簽的學習，div、h1-h6、p、ul-li、strong、圖片、字體等，什麼內容用什麼框.
再說「肉」——CSS。CSS定義了HTML標簽的顯示外觀，氣質。主要掌握浮動，寬高設置、顯示屬性等
最後「魂」——Javascript。這是運行在瀏覽器上的腳本，但是現在javascript已經遠遠不是當年的那個js了，尤其Ecmascript6標准出來後，nodeJS 橫空出世，JS暴露出一統天下的野心，JS讓網頁變得靈活，其實現的每一個明裡暗裡的交互，其實是為了觸及您的靈魂，這也是其成為魂的原因。
而現在，CSS3和HTML5的發展，又將web推向下一個時代，一個更為豐富多彩的時代。
2 環境基礎
設備、瀏覽器以及工作原理
必須指出的是，html CSS JS都是運行在瀏覽器的，是由瀏覽器負責編譯和呈現的。所以必須了解瀏覽器的工作原理。但是瀏覽器千千萬萬，也不是每個都要去解剖，主要的有Chrome, Firefox, IE，Safari,Opera,國內的主瀏瀏覽器基本是基於chrome內核開發，做了一些更為接地氣的功能，了解下就可以了，主要有QQ瀏覽器，UC，網路瀏覽器，360瀏覽器，搜狗瀏覽器，獵豹瀏覽器等。
3 計算機基礎
計算機網路，http協議。既然是web必不可少需要知道計算機網路的知識，這對於網頁的載入和速度優化有很大的幫助，並且，我們做的不是靜態的頁面，而是動態的，所以必然涉及到與後台之間的數據的傳輸和存儲，這個是要掌握的。
必須懂：Ajax，必須會的工具：fiddler
4 流行框架
流行的前端UI框架：
Bootstrap、jQuery UI、Amaze UI
流行的前端框架：
jquery mobile
angular.Js
Vue.js
React.js
5 可視化組件
Echarts
tableau(收費)
6 新應用
針對移動化以及物聯網方向發展
7 錦上添花—
UI、 UX 、交互設計、 SEO（包括SEM） 、產品，更主要一個同理心。好的設計和交互才能帶來的好的體驗，贏得用戶。
SEO則在推廣層面，好的SEO讓我們以最低的成本，借力搜索引擎，獲得更加跟多的曝光機會，畢竟這是個酒香也怕巷子深的時代。
最後是產品，站在產品角度，融合（前後端）技術和商業，讓產品產生價值，實現價值。
㈣ UI設計稿交付給前端開發應該是什麼樣子的
最好的肯定是同步的設計稿，不僅能真實展示UI設計稿，還能解放設計師！
一個很方便的同步設計稿方式是，在sketch里做完設計後，可以用墨刀給sketch設計稿做自動標注，分享鏈接給開發哥哥，他們就可以查看標注了～
操作辦法：下載「墨刀sketch插件」並安裝，在sketch里選擇頁面導出到墨刀項目里，點擊「分享」獲取分享鏈接，發給開發，他們就能在「標注」處查看標注了。
這是我自己做一個設計稿分享給前端的效果圖：
㈤ 前端開發和後端開發有什麼區別
前端開發和後端開發的區別在於：
一、展示方式不同
1、前端開發主要做的是用戶所能看到的前端展示界面。
2、後端開發主要做的是邏輯功能等模塊，是用戶不可見的。
二、所用技術不同
1、前端開發用到的技術包括但不限於html5、css3、javascript、jquery、Bootstrap、Node.js 、AngularJs等技術。
2、後端開發 以java為例 主要用到的 是包括但不限於Struts spring springmvc Hibernate Http協議 Servlet Tomcat伺服器等技術。
(5)前端設計稿是什麼樣的圖片擴展閱讀：
公司對前後端人員招聘的要求：
Web前端：
1、精通HTML，能夠書寫語義合理，結構清晰，易維護的HTML結構；
2、精通CSS，能夠還原視覺設計，並兼容業界承認的主流瀏覽器；
3、熟悉JavaScript，了解ECMAScript基礎內容，掌握1到2種js框架，如JQuery；
4、對常見的瀏覽器兼容問題有清晰的理解，並有可靠的解決方案；
5、對性能有一定的要求，了解yahoo的性能優化建議，並可以在項目中有效實施；
Web後端：
1、精通jsp，servlet，javabean，JMS，EJB，Jdbc，Flex開發，或者對相關的工具、類庫以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，對Web開發的模式有較深的理解；
2、練使用oracle、sqlserver、mysql等常用的資料庫系統，對資料庫有較強的設計能力；
3、熟悉maven項目配置管理工具，熟悉tomcat、jboss等應用伺服器，同時對在高並發處理情況下的負載調優有相關經驗者優先考慮；
4、精通面向對象分析和設計技術，包括設計模式、UML建模等；
5、熟悉網路編程，具有設計和開發對外API介面經驗和能力，同時具備跨平台的API規范設計以及API高效調用設計能力；
㈥ 前端怎麼看設計稿
前端開發不包含ui設計部分，主要工作在於切圖、製作靜態頁面、製作特效、jq、ajax、與後台程序結合部分。
網頁設計一般包含整站網頁視覺方案，提供PSD或PNG格式的主要頁面預覽圖，高級一點的還會給出標准配色表，風格設計指南（內含一般性風格設計規格：設計理念，留白間距，按鈕樣式，使用場景）等附件。大公司一般還有交互設計師，主要關注人機界面的易用性和用戶友好性。
網頁設計一般包含整站網頁視覺方案，提供PSD或PNG格式的主要頁面預覽圖，高級一點的還會給出標准配色表，風格設計指南（內含一般性風格設計規格：設計理念，留白間距，按鈕樣式，使用場景）等附件。大公司一般還有交互設計師，主要關注人機界面的易用性和用戶友好性。
㈦ 網頁設計好後的切圖是什麼意思呢
切圖就是把用設計軟體設置好的圖片切成相應的大小，切圖後再把圖片上傳就可以可以加快顯示速度，不用等整個圖片都下載以後顯示。
PS切圖步驟：
1、打開PS，然後點擊切片工具。