1在AdobePhotoshopCC中打开设计好的PS图片文件 2按键盘快捷键CtrlR调出参考线功能 3在标尺上按住鼠标左键拉出辅助线到相应位置 4选择切片工具，或键盘快捷键C，激活切片功能点击基于参考线的切片，软件自动将辅助线条之间分割成若干切片注放大检查辅助线位置会更精准5选择菜单文件存储为web格式。

1打开图片，复制图层，关闭背景图层，用“魔术橡皮擦工具”擦除背景2“文件存储为web所用格式存储”，“将优化结果存储为仅限HTML”，保存3打开“我的图片”，找到刚才保存的HTML格式文件，完成。

HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配这里以移动端响应式网站为例，讲述如何制作响应式网页1选定基本设计尺寸，一般以1080为基准确定响应式web设计的应用场景之后，和美工或设计师沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局。

1找到切片工具 2按网页的布局切图 3输出存储为WEB格式 4进入对话框调整网页切图的质量大小 选择就点击存储按钮 文件就生成了，注意存储输出的路径完成了，浏览器里可以预览了 重点ps切图要画质清楚文件质量就大了，网页打开速度慢。

图片切片使用图像编辑软件将设计稿切割成多个小图片HTML5和CSS编写HTML代码来结构化网页内容，使用CSS来控制网页样式和布局，将切割后的图片元素嵌入到网页中角色与沟通网页设计师提供设计稿，并与前端开发人员沟通设计细节和期望效果前端开发人员负责实现设计稿的切图和网页构建，确保网页在。

做一个逐帧动画必不可缺的就是需要一张等间距的“动画分解逐帧图片png”，之后我们就可以通过修改 backgroundposition 来完成一个“逐帧动画”当然我们也可以通过设置特殊的图片，来完成一些特殊的效果5CSS3 动画CSS3应该是动画家族里绝对不会被遗忘的一名成员这里我们定义它为 擅长于平面层。

1 前端页面重构主要内容为PC端网站布局Photoshop 工具及切图H5移动端网页布局HTML5+CSS3新特性与交互学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配 PC 端移动端平板设备等2 前后端网页交互主要内容为JavaScript语法全面进阶ES6 到 ES10 新语法实践jQuery 应用。

学习企业前端技术岗位需求的HTML5技术，HTML5培训课程体系可以看下图课程方向就明白需要学习什么现在，前端开发工程师的职责，不是只有切图制作网页这么简单了，学习课程必须完全覆盖行业内岗位需求，才能轻松胜任WEB前端移动端混合应用开发工作，拒绝UI设计Web前端制作一步到位的综合设计课程，其实这种。

一HTML5基本组成1HTML5=HTML+CSS+JavaScript 2HTML指的是结构结构是在整个网页中有标题列表图片等CSS是样式样式是标题文字的字体大小颜色字体图片大小某个块的背景色或背景图等JS是行为行为是在网页上四处飘动的广告图片滚动浏览图片时鼠标移动到图片时，放大缩小图片。

使用PS切片工具进行切图的教程如下1 打开图片 首先，在PS软件中打开你需要进行切片的图片可以通过快捷键Ctrl+O来打开文件对话框，然后选择并双击需要编辑的图片2 选择切片工具 在工具栏中找到裁剪工具的图标，右键点击该图标，从弹出的菜单中选择“切片工具”3 手动切片 使用切片工具，在图片。

分析如下1首先下载安装Dreamweaver，打开后，新建一个网页，一般选择“HTML”建立网页选择“经典”界面，有助于我们更便捷使用这个软件2下面选择这三个界面，代码拆分设计，一般默认设计界面，对于新手这个功能具有可视化，能更好的制作网页3下面我们来制作网站站点，在电脑上建一个文件作为根目录我们所建网站的所有。

三学习路径 1Html基础 2CSS基础 3HTML5 4JavaScript 5CSS3 6jQuery 然后项目实战，找个网页从静态页面写起，切图之类的公司有相关的Html5项目，直接拿来学习更好四相关书籍 可以找一些不错的html5相关书籍来学习，理论知识也需要掌握，而且书籍可以做一些笔记，重点难点可以标记。

HTML5其实只是前端开发中重要的一部分技术，是现在前端开发的标准组件，特别是在移动端的特效开发游戏开发，以及APP的开发方向上非常流行web前端是一个做有关网页的一个概述，是一个网页view层的总得称呼前端开发，简单来说，就是把平面效果图转换成网页，把静态转换成动态它的工作包括了切图。

对于零基础的人而言，要怎么学习web前端呢？1 前端页面重构主要内容为PC端网站布局Photoshop 工具及切图H5移动端网页布局HTML5+CSS3新特性与交互学习目标是完成PC端网站布局，可实现响应式布局，一套代码适配 PC 端移动端平板设备等2 前后端网页交互主要内容为JavaScript语法全面。

5 Webflow 简介Webflow是设计网站内容管理软件和服务器的工具，特别适合没有代码基础但想要设计和开发网站的设计师功能在视觉画布中使用HTMLCSS和Javascript的所有功能，可视化编辑既时尚又直观，降低了学习难度同时，Webflowuniversity也提供了很多深入的教程6 Mobirise 简介Mobirise是一款适合。

3切图 定稿之后就可以切图了，并移交给前段开发了，移交给前端开发之前必须确定每一块area的用色和尺寸大小，必要时美工还需要和前端进行沟通4制作静态网页模板 待到美工提供所有开发原型和素材后，前端就可以出静态网页模板了，并加入页面效果，这一步才把原型真正搬上浏览器5静态转动态 通过。