目录
PS切图
切图的准备工作
工具介绍
版本选择
缓存路径更改
默认单位修改
Photoshop预设
常用工具
图层面板的使用
借助辅助线辅助切图
裁切详解
字体设置
总结
切图的优化
快捷键的使用
切图辅助工具
宣传页项目
前端开发流程
相关工具
开发前的准备工作
页面内容和样式
开发技巧
居中法小结
网页动态效果
CSS动画背景知识
CSS实现动画的两种方式
动画效果测试脚本工具
测试脚本小结
CSS动画小结
网页交互效果
作业
要点
总结
待改进
改进思路
成品图
前端开发的大部分时间里都需要做网页重构,即把设计师提供的设计稿还原成网页代码,还原代码的过程就是切图+码代码
切图不仅是一门技术活,还是一门手艺活,要力求实用和低功耗
Photoshop
PhotoshopCS4
最好不要存在C盘,使用久了会使系统内存负重太大
编辑-菜单-首选项-性能,将暂存盘改为除了C盘之外的其他盘
网页中元素使用的默认单位是px,用Photoshop切图最好单位也设置为px
编辑-菜单-首选项-单位与标尺,将标尺和文字的单位都修改为像素
视图-标尺,窗口-段落/图层/信息/工具
启用选择工具时,左上角的自动选择工具可以选择对图层进行操作,也可以对一组图层进行操作,图层中一个文件夹代表一个组
启用裁剪工具时,信息中显示选取的宽度和高度
启用字体工具并将光标点击至效果图中有文字的地方,字符信息中显示字体和字体颜色、大小、行高等信息
放大缩小图层:Alt+滚轮
撤销操作:Ctrl+Alt+Z
合并图层:Ctrl+E
点击图层面板中,不需要显示的图层左边的眼睛,可以隐藏这些图层
要使图层覆盖在另一个图层上面,可以交换图层面板中图层排列的顺序
网页设计师设计网页时往往有个视野宽度在0~1200px之间,并且是居中的,视野区外往往是一些不重要的内容
如何借助辅助线辅助切图?
启用移动工具拉取辅助线到合适的位置,再用裁剪工具,这时候裁剪区就会自动吸附到辅助线上
如何裁剪出背景为透明的可供使用的logo图?
新建一个透明图层,将裁剪出来的logo图拖拽到该透明图层上,点击图像-裁切,基于-透明像素,就能把没有颜色的区域都裁减掉
制作一个背景为透明的包含多图层的图片时,可以先合并图层再进行拖拽,也可以直接用裁剪工具裁剪下来,再进行拖拽
存储的格式
切片工具可以一次性裁剪多个图片并一键生成,裁切完成后,点击文件-存储为Web所用格式,存储。它会自动生成一个images的文件夹,里面是我们刚刚裁切的图片,但是它的效率很低,因为实际开发中往往不需要切那么多图,用css样式就可以实现同样的效果。
如果我们电脑中没有设计稿上应用的字体,可以将这个字体下载下来,打开控制面板-字体,将字体文件拖拽进去,就成功在我们电脑上安装好新的字体,这时只需重启Photoshop就可以使用这个字体了。
3秒定律
如果用户加载一个网页超过3秒,那么他就会关闭这个网页,导致我们丢失流量。
由于图片也要耗费资源,因此网页开发中图片越少越好。
利用样式平铺效果颜色代替图片
一些图片如果是自身的平铺图,就只需将宽度设置为1px并存储,在css中引用时设置实际宽度来进行平铺即可。
能够用css样式实现的效果,就不用图片来显示。
雪碧图的制作
使用“雪碧图”能够减少资源的耗费,将要使用的多个图片集中在一个背景为透明的png上,再用定位手段来显示我们想要的区域,这样一来,图片资源就只需加载一次。
字体图标的使用
以文字的形式代替图片的使用,现在很多图标库可以实现很多图片,就可以代替图片的使用。
实际开发过程中,敏捷开发才是第一生产力,要学会使用快捷键,这样可以加快开发速度,提高开发效率。
操作类快捷键
删除图层:delete
合并图层:Ctrl+E
工具类快捷键
移动:V
裁切:C
快捷键失效
可能是一些快捷键被输入法软件和QQ程序占用
Markman
可以帮助我们快速测量图中的颜色、字体代销、字体和文字之间的间距
TinyPNG
用于压缩png图片的大小
前端自动化
与中高级前端有关,可以快速生成雪碧图
产品经理做需求分析→视觉交互做视觉设计、交互动画设计→前端开发做前端静态页开发、动画效果开发
编辑器:subline3
标注工具:pxcook
切图工具:Photoshop
视觉设计稿PSD
设计图标注
PS切图
雪碧图(http://alloyteam.github.io/gopng/)
从大到小
BEM开发模式
BEM代表块(Block),元素(Element),修饰符(Modifier)
模块(没有前缀,多个单词用 - 连接)
元素(元素在模块之后,可以有多个层级,以__连接)
修饰(某元素、或者某模块特别的状态,必须有一个状态名和状态值,使用 _ 连接)【比如某个标签的高亮状态】
文字垂直居中
将文字行高设置为与容器的高度一致
.item{
height:38px;
line-height:38px;
}
块元素垂直居中于父元素
给父元素设置为相对定位,子元素设置为绝对定位,距离顶部top50%的高度,margin-top为负的元素高度的一半
.father{
position:relative;
}
.child{
position:absolute;
height:38px;
top:50%;
margin-top:-19px;
}
块元素水平居中
.item{
width:38px;
margin:0 auto;
}
用鼠标点击模拟页面模块切换
用添加、移除class名的方法在给元素设置动画始末状态的样式
两种遍历,遍历对象{ },遍历数组[ ]
获取元素querySelector(一个元素)
字符串截取substr、字符串替换replace
构建复杂动画
CSS伪类的使用及触发动画效果
帧动画定义→帧动画使用
背景图覆盖模式
.bg{
background-size:cover;
}
载入页面时,导航栏自上而下飘至视口顶部
先用transform中的translate把导航栏的默认样式设置为距离顶部为负的导航栏本身的高度。载入页面时,给导航栏添加init样式,仍用transform中的translate设置为与顶部的距离为0。用transition实现两个样式的过渡效果,并将导航栏的position设置为fixed,z-index在最高层。
.header__wrap{
width: 100%;
height: 60px;
position: fixed;
margin: 0 auto;
background:linear-gradient(rgba(0,0,0,.8),rgba(255,255,255,0));
z-index: 999;
}
.header__wrap{
transition: all 1s;
transform: translate(0,-60px);
}
.header__wrap_animate_init{
transform: translate(0,0);
}
.header__wrap_animate_done{
transform: translate(0,0);
}
.header__wrap_status_black{
background-color: rgba(0,0,0,.5);
}
由于刚载入时,并不会发生滚动条滚动事件,也就不会去调用onscroll中第一屏的done函数,因此要使页面一加载完成就播放第一屏的动画,需要先将第一屏的元素事先设置成init状态,然后在js文件中调用第一屏的done函数。
//载入页面时将所有屏幕设置为init状态,除了screen-1
window.onload=function(){
for(k in screenAnimateElements){
if(k==='.screen-1') continue; //第一屏不在这里初始化,而是在css中加上init样式,并通过setTimeout来切换成done
setScreenAnimateInit(k);
}
//获取滚动条高度
var top=document.body.scrollTop;
//第一屏
if(top>0&&top<1*640-150){
playScreenAnimationDone('.screen-1');
switchNavItemsAcitve(0);
navTip.style.left=40+'px';
}
//...
}
//调用setTimeout函数,载入页面0.2s后将第一屏由init切换成done(init是在css文件中设置好了的)
setTimeout(function(){
playScreenAnimationDone('.screen-1');
},200)
其实有一个更简单的方法,直接把第一屏播放的条件由top>0改成top>=0,就可以不需要再单独去调用第一屏的done函数,也不需要在初始化时在css中单独去给第一屏元素设置init,而是像其他屏一样在载入时就用init函数去初始化。
window.onload=function(){
for(k in screenAnimateElements){
if(k==='.screen-1') continue; //第一屏不在这里初始化,而是在css中加上init样式,并通过setTimeout来切换成done
setScreenAnimateInit(k);
}
var top=document.body.scrollTop;
//top>=0就可以在页面刚载入时就将init切换成done
if(top>=0&&top<1*640-150){
playScreenAnimationDone('.screen-1');
switchNavItemsAcitve(0);
navTip.style.left=40+'px';
}
//...
}
在css文件中给第一个元素设置status_active样式(文字highlight),并且用将滑动门设置在第一个元素的位置。
不在css文件中设置也可以,只要top=0就会调用switchNavItemsActive(0)来设置也能达到同样的效果。
window.onload=function(){
for(k in screenAnimateElements){
if(k==='.screen-1') continue; //第一屏不在这里初始化,而是在css中加上init样式,并通过setTimeout来切换成done
setScreenAnimateInit(k);
}
var top=document.body.scrollTop;
if(top>=0&&top<1*640-150){ //重点是这里的top=0
playScreenAnimationDone('.screen-1');
switchNavItemsAcitve(0); //文字highlight
navTip.style.left=40+'px'; //滑动门滑至第一个元素的位置
}
//...
}
/* 播放屏内的元素动画的函数 */
var playScreenAnimationDone=function(screenCls){
//播放动画,改init为done
var screen=document.querySelector(screenCls); //获取当前屏对象
var animateElements=screenAnimateElements[screenCls]; //需要设置动画的元素
for (var i=0;i=0&&top<1*640-150){
playScreenAnimationDone('.screen-1');
switchNavItemsAcitve(0);
navTip.style.left=40+'px';
}
else if(top>=1*640-150&&top<2*640-150){
playScreenAnimationDone('.screen-2');
switchNavItemsAcitve(1);
navTip.style.left=(40+1*101)+'px';
}
else if(top>=2*640-150&&top<3*640-150){
playScreenAnimationDone('.screen-3');
switchNavItemsAcitve(2);
navTip.style.left=(40+2*101)+'px';
}
else if(top>=3*640-150&&top<4*640-150){
playScreenAnimationDone('.screen-4');
switchNavItemsAcitve(3);
navTip.style.left=(40+3*101)+'px';
}
else{
playScreenAnimationDone('.screen-5');
switchNavItemsAcitve(4);
navTip.style.left=(40+4*101)+'px';
}
}
var setJump=function(i,lib){
var item=lib[i];
item.onclick=function(){
document.body.scrollTop=i*640; //滚动条高度的写入
}
}
for(var i=0;i
//获取滑动门元素
var navTip=getElem('.header__nav-tip');
//初始位置有偏移,先进行调整
navTip.style.left=40+'px';
var setTip=function(index,lib){
lib[index].onmouseover=function(){
//鼠标滑入,定位至相应的导航标签
navTip.style.left=(40+index*101)+'px';
}
//鼠标移出,找到当前页面对应的导航标签,将滑动门移至该标签下
var activeIndex=0;
lib[index].onmouseout=function(){
for(var i=0;i-1)
{
activeIndex=i;
break;
}
navTip.style.left=(40+activeIndex*101)+'px';
}
}
//给每个导航元素添加滑动事件
for(var i=0;i
滑动门的位置是用navTip.style.left来控制的,它与active的不同之处在于:鼠标滑入时会跟着鼠标走,即获取当前鼠标移入的导航标签(传入函数的index),修改navTip.style.left,使滑动门滑动到鼠标所指的位置,当鼠标移出又回到当前屏对应的导航标签(遍历导航标签,找到当前设置了active样式的元素,记下其索引值,并修改navTip.style.left),由于这些操作都是对navTip.style.left进行修改,所以每次滑动门只会在一个位置,不会出现多个滑动门。而active只根据scrollTop来确定当前屏幕。
希望通过滚动条、导航、大纲进入某个屏幕时,都能重新播放动画,而不是只能有一次init→done,过后就不再生效
滚动条每到一个屏幕区域时,就将其他屏幕再次设置为init状态,只有当滚动条再次移动到这些屏幕区域时,才将init状态改为done状态。个人觉得这样做有点麻烦,但是目前没有想到更好的方法。