❶ 关于前端代码的合并和压缩，我该怎么处理
除了让二次开发者直接修改你标准产品的代码，还有另外一种思路：
提高自己代码的扩展性（会有一些难度），让二次开发者通过相关的扩展API来实现个性化需求。
这样他不需要修改你的代码，所以他开发的代码不压缩、你的标准代码压缩这两个就不矛盾了。
想象一下你使用压缩版的angularjs时，自己开发的代码一定是压缩的么？场景是类似的
❷ PS-前端切图教程（切jpg图和切png图）
转发自： PS-前端切图教程（切jpg图和切png图） - xing.org1^ - 博客园 (cnblogs.com)
———————-------------------------------------------------------------------- PS切图步骤说明 ————————————————————————————————
一共分两大项：切jpg图、切png图。
我用的是PS CC 版本，教程中用到的除了界面和摆放位置不一样外，其他应该和低版本的都一样了。
一、 切JPG图
1．打开ps导入图片的步骤是铁定的了
2．选择左边工具栏里的“切片工具”
事先自己没用过或上一次ps工具使用时没有使用过“切片工具”的，打开ps工具栏里默认是“裁剪工具”的图标
你可以鼠标左键点住“裁剪工具”不松手，他会在右边展开（我这是工具栏在ps界面左侧的情况下）这一组的所有工具，在里边选择“切片工具”即可
我图中之所以框选了两个工具，是因为后期还要用到“切片选择工具”，这里先认识一下他的位置在哪。
3．用“切片工具”切出想要的范围，框选范围就像平时用qq的截图工具一样。
如下，我需要这个小图标，我就框选了他。
框选中：
框选后：
如果你框选好了松开了鼠标，他还是这种黄色的边线，你把“切片工具”移到附近，他还能调整框的大小范围。
但是如果你框选了好几个了，想改前边已经框选好的：
像如上这样，要知道，ps切片工具最近一个选区的切片是用黄色框包裹的，其他前边切得都是蓝色边线，这时候你再用“切片工具”去调整蓝色边线的选区是动不了的。
这就要用上“切片选择工具”了
4．“切片选择工具”调整范围：
切片选择工具就在“切片工具”的下边，寻找方法见上解。点击选择要调整的切片蓝线，待其变成黄色后，调整范围。
切片选择工具只能选择并调节范围，不能切片。
5．切好后保存
保存方法：文件——存储为web所用格式【快捷键ctrl+shift+alt+s】
在弹出的【存储为web所用格式】对话框中，下拉选择框选择JPEG格式
按需求更改质量（低、中、高、非常高、最佳。这五个模式）
点击存储后弹出【将优化结果存储为】的对话框
选择存放位置、设置文件信息——
一般存储时，ps会自动建立一个images文件夹，你要找到刚才自己设定的位置中，找images文件夹，在她里边才有你刚才切好的图。
命名文件名
“格式“——仅限图像
在“切片”那里，可以选择是存储全部切片还是只存储选中的切片，
一般默认就存储全部切片就好了，有时候只需要一小块切片时，可以选择存储选中的切片，他会只保存一张你当前切得图，这样省的自己去一大堆切片中捡出来自己要用的了。
二、 切PNG图
切透明图的核心理念是，你要把不需要的背景图给隐藏掉，只让需要的留下来，底部背景变成像马赛克那样的样式。
1．打开ps拖进来你要切的psd或者tif文件，
一定得是带图层的。
2．先选择移动工具
3．并在顶部选项栏里勾选自动选择，
4．下拉框里选择图层
若没有选项栏或者图层栏的：
在菜单栏点击窗口——选项。打了对勾后就能调出工具对应的选项面板了。
5．然后用“移动工具”点击你不需要的背景图，ps会自动选中该背景所在的图层，
6．你在图层面板中，把对应这层的左边小眼睛关掉就好了，让背景图先隐藏起来。
有时候设计会有好几层，他为了光效或者其他效果做了好几层不同透明度的背景叠加在你要切的东西后边，
你就用移动工具（快捷键v【英文输入法下按v就可以锁定移动工具】）点击它然后关掉它，有几层就多做几步，直到你不需要的背景全部隐藏掉。
但是良心的设计一般会把背景都放到一个图层中，你找到一层背景，所有的都和他在一个组里边，你把组的小眼睛关掉即可
7．然后切片工具切出你要的那个图标
8．保存：文件-存储为web所用格式(ctrl+shift+alt+s)
9．选择png-8/png-24格式，看你对图标的要求了
PNG8”是指8位索引色位图，“PNG24”是24位索引色位图；
png8：
每一张“png8”图像，都最多只能展示256种颜色，所以“png8”格式更适合那些颜色比较单一的图像，
例如纯色、logo、图标等；因为颜色数量少，所以图片的体积也会更小；
png24：
每一张“png24”图像，可展示的颜色就远远多于“png8”了，最多可展示的颜色数量多大1600万；
所以“png24”所展示的图片颜色会更丰富，图片的清晰度也会更好，图片质量更高，当然图片的大小也会相应增加，
所以“png24”的图片比较适合像摄影作品之类颜色比较丰富的图片；
这是二者的区别，根据自己的需求选择吧。
10．然后就是一定要勾选透明度，其他默认设置就好。
Png-8的透明度位置
Png-24的透明度位置
11．”保存全部切片“或者“保存选中切片”
这里还要说明一个问题，有时候一个页面中，我用切片工具选出好几张png图标准备切，然后保存的时候也选择png格式都没问题，
但是到了选择保存位置这个对话框里，选择的是“保存所有切片“，
最后保存出来的图片，只有最后切得那张或者说切片工具选中的那张是png的，其他就都存成jpg格式了，背景是白色底
！！所以切png的图，还是建议，一张一张“保存选中切片”比较好。
或者你的图标与白色底差别大的话，你也可以不计较，让他保存成jpg后再去ps中魔棒抠图也好，不过这样比较麻烦不是。
有的说，背景图和图标每分图层咋办？那咋办？找设计吧。要不你自己选取工具扣吧，扣好了另存为png也是一种办法
三、 其他技巧 ：
1．Ctrl+ +号放大图片，
2．ctrl-缩小
3．按住空格，鼠标图标变成抓手工具，移动页面
四、重磅彩蛋！！！还有一个吊炸天的方法——针对单一小icon切成png的
“移动工具”点击图标，选中图标所在的图层；
右击该图层，选择“转换为智能对象”；（ps这时候没反应，不要大惊小怪，是你看不到而已）
接着再次在这个图层上，右击——“编辑内容”
对话框点击确定
ps就自动生成一个新的文件，只有那个icon，而且是透明的哦！
很神奇有么有！
很省力有么有！
1秒搞定有没有！
以下是图解：
这是点击一个小图标
选中图标后的图层面板
右键点击该图层选择“转换为智能对象”
没转换前的图层样式：
转换后的图层样式：
所以别说“我转换了ps没反应”这样的话了，是有的，你不仔细看看不到
接着再右击——“编辑内容”
点击“确定”
看，他就新建了一个“形状8”的页面，放的是我的png的小图标，
最后你保存为png也好，“存储为web所有格式”也好，自由发挥吧。
这个方法可能只能保存一个图标，
有的人说我好几个图：例如文字+图片都有咋弄？
那就切图呗！
那还要纠结的话那就合并图层吧！
❸ 界面图怎么跟代码合拼一个APP软件的呢
这个问题应该是问如何将前端UI布局样式和后端数据结合起来生成一个完整的APP软件。
制作一款的APP软件简易的流程如下：
1、首先结合需求设计出原型图
可以用PS、AI、Sketch等工具画出完整的APP原型图，画出每一个页面
2、利用各类APP前端语言，编写对应的APP界面
如可以使用vue、react编写webapp，非原生方式UI app，也可以用Java或ObjectC编写安卓或苹果APP UI
3、APP显示数据会由后端编程语言编写成接口API提供
4、结合编好的前端UI APP联调API数据接口让数据显示在前端APP
那么这样的一个流程后就形成了一个APP软件
❹ XD 怎么配合前端切图
切图本应该是前端工程师的工作吧，设计师切的图往往不专业，他们不知道把图片压缩，不知道把图片合并，更不知道给图片更好命名，这样前端拿到切图还是要重新处理。优秀的设计师会把图层分类做的很好，图层按照模块化设计，很方便前端工程师来使用的。不会切图的前端不是合格的前端。图层乱七八糟的设计师也不是个合格的设计师
❺ 前端图片处理
我的理解应该是生成图片的时候，在不影响图片质量的情况下，尽量用体积小的格式，比如在不透明的情况下尽量把图片保存成png格式。
在css中有一种技术叫做图片精灵，就是把一些背景图做成集合的形式。图片只需加载一次。
最后网上好像是有插件（浏览器也有插件）可以对图片进行压缩处理。
❻ 前端如果有成千上万的页面该如何处理
一、图片处理
1. 图片：大小的控制与使用
以淘宝为例，你搜索的所有产品的列表页面，每个产品都有一个概略图（小图），
点开一个产品的页面可以看到产品展示图（中图），点击图片后可以看到原始图（大图），如果上面提到的三个页面都用用户上传的原始图，仅用控制显示大小，页面性能如何，可想而知，用PC机还好，如果用户用移动设备加3G网络访问，5分钟也打不页面，就是打开了，流量也用完了。
所以我们说为你的网站针对不同的情况不同的页面，采用不同的图像文件，当然屏幕分辨率也要考虑进去，如果有人用iphone打开和ipad打开，就不需要显示像PC机上那么大的图片了，只要适应设备就可以了，那你可能要问怎么做。
通过CSS Media Querises,可以轻松做到，你可以访问http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ 了解更多信息：
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
2. 压缩
传送图像的时候单单控制适当的尺寸往往是不够的。不少文件格式在不失真的前提下可以被压缩很多。有一类应用程序可以达到这个效果。比如Photoshop有个很好的功能叫做Save for Web and Devices，还有我个人觉得多用PNG是个可以考虑的方案
3. Sprite
增加应用程序性能的方法之一，是减少到服务器的请求数。每一个新图像代表一个请求数。有一个办法是将几个图片合并成一个，合并之后的图像叫做一个sprite，这个功能在淘宝你也会发现，在CSS中改变背景层的位置，就能准确的把特定部分的图像显示出来。比如Twitter Bootstrap利用sprites来制作内部图标，访问http://getbootstrap.com/2.3.2/ 你会了解更多
在CSS中，你可以参照以下方式，显示你喜欢的sprite部分：
.icon-edit {
background-image: url("../img/glyphicons-halflings-white.png
");
background-position: -96px -72px;
}
4. 超高速缓存
浏览器超高速缓存十分好用。尽管有时在开发过程中会导致一些非常有趣的情况，但它确实有助于提高你的网站的性能。所有浏览器的超高速缓存下来的内容包括图片、JavaScript或者CSS。有几种方法可以控制缓存，建议你阅读相关文章。
5. 预读取
HTML 5有一个很好的功能叫做预读取，它让浏览器提前下载你马上需要用到的资源：
<link rel="prefetch" href="/images/background.jpg">
6. 数据URI方案/内联图像
几年前我曾开发了一个简单的网页，只包含一个HTML文件夹，但当然里面应该还包括一些我需要的图像。数据URI方案帮助我解决了问题。我们的想法是将图像转换成一个base64编码的字符串，并将其放置在src属性中的img标签里，例如：
Html代码
<img src="data:image/png;base64,//8/==" alt="Red dot">
通过这种方法，你的图像实际上在HTML中并保存了一个HTTP请求。你的图像越大的话，字符串就越长。
❼ web前端什么是雪碧图
雪碧图被运用在众多使用了很多小图标的网站上。
相对于把每张小图标以.png格式文件的形式引用到页面上，使用雪碧图只需要引用一张图片，对内存和带宽更好。
❽ 织梦CMS如何合并logo和banner
亲:你是遇到有logo,而且有banner在同一个网页开头这样的情况了,一般这样的情况有二种,一是以Logo为网页前端部分,然后下面是横幅了,可以以图片格式的banner也可以动画样式的?针对这样的情况,首先把Logo加进去,然后再设置banner就可以形成一个完整的画面了,如果是Logo和banner在代码里调用的,可以在代码里却除动态或你不希望展现的就可以了,然后再把调用的图片从ftp里删除,这样就得到你希望的效果了.