一個切圖仔的工做平常

時間 2019-11-19

標籤一個平常简体版

原文原文鏈接

1.拿到公司設計師給的PSD圖（PC端給的是1920px的設計稿，移動端給的750px的設計稿）。javascript

2.本身新建一個項目目錄（默認有css，js,images文件夾以及一個index.html文件）。css

3.分析設計圖，使用PS切圖工具進行切圖（分析哪些內容須要切成圖片，設計稿的圖標，能夠向設計師要這些圖標的SVG圖，或者到http://www.iconfont.cn/阿里巴巴矢量圖網站找相應的圖標svg，將全部的svg圖標轉換成字體圖標到網站https://icomoon.io/app/#/select，生成的文件中將fonts文件夾和style.css放入項目目錄裏）。html

4.切的圖片須要透明的選擇png-24格式，顏色多樣且不須要透明的選擇jpg品質60，切出來的所有圖片在https://tinypng.com/網站上進行PNG和jpg的圖片壓縮。（PNG-8和PNG-24的區別，PNG-8適合顏色比較單一的圖片如純色，logo，圖標相對圖片大小比較小；PNG-24適合顏色比較豐富的圖片相對圖片大小比較大,如今幾乎選用png-24）。html5

5.html文件java

　PC端爲主的響應式網站模板jquery

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>網站標題</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="Keywords" content="網站關鍵字">
    <meta name="Description" content="網站描述">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!--[if lt IE 9]>
        <script src="js/vendor/html5shiv.js"></script>
        <script src="js/vendor/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<!--[if lt IE 9]>
<p class="browserupgrade">您的瀏覽器版本過舊，請到<a href="http://browsehappy.com/">這裏</a>更新，以得到最佳的體驗</p>
<![endif]-->
　　<!--網站主體內容-->
    <script type="text/javascript" src="js/vendor/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="js/vendor/jquery.placeholder.min.js"></script>
    <script type="text/javascript" src="js/vendor/fastclick.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</body>

</html>

　移動端爲主的模板(微信，支付寶)web

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="yes" name="apple-touch-fullscreen">
    <meta content="telephone=no, address=no" name="format-detection">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=750">
    <script type="text/javascript" src="js/vendor/mobile-util.min.js"></script>
    <title>標題</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
    <!-- 主體內容 -->
    <script src="js/vendor/zepto.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

6.css文件（重置樣式：normalize.css，公共樣式：common.css，頁面樣式：index.css）ajax

7.js文件（依賴js:vendor文件夾--jq，zepto,fastclick,mobile-util,jquery.placeholder,html5shiv,respond;公共js：common.js，頁面js：index.js）chrome

8.根據設計稿，後端

　　---書寫html主體結構

　　---CSS書寫（盒子模型，定位，flex佈局，百分比，圓角，行高，背景圖片）

　　---JS書寫（jq插件使用，click，導航切換，show,hide,for,length,tap,find,addClass,removeClass,text,indexOf,parseFloat,split,hasClass,Number,toFixed）

9.完成全部html，css,js後，對css和js進行壓縮。

10.項目打包交付給後端人員。

一個純靜態頁面產出的切圖仔（不涉及數據交互，不須要寫ajax）