每天成长一点---WEB前端学习入门笔记

WEB前端学习入门笔记

　　从今天开始，本人就要学习WEB前端了。
　　经过老师的建议，说到他每天都会记录下来新的知识点，每天都是在围绕着这些问题来度过，很有必要每天抽出半个小时来写一个知识总结，及时对一天工作的一个小结，也是对自己知识的一个梳理，之前特别喜欢记在本子上，不过长期的不用，就会发现记在本子上很容易就忘，所以后面开始写博客。首先，它并不单单是对自己的一些技术心得的总结亦或是一些技术讨论，更重要的是对自己不断学习提高的一种要求和检验，一种技术沉淀。其次，通过技术博客我们可以彼此分享一些技术经验，让有类似问题的同学不在迷茫。同时老师也建议我们这样做，我感觉这样非常好，因为我本身就是一只小小小小鸟————菜鸟，就是0基础，而课堂那短短的几个小时并不能教得了多少，所以更需要自己多多查找资料和及时通过总结成笔记加深印象来使自己成长，但是笔记总结只写给自己看，总觉得实在达不到提高的目的。因为自己看不到自己需要提高的地方，只有不断分享，让别人指点，甚至挨骂，才能了解不足。所以希望我以后能够坚持下来认真写博客，并且能得到大家的指点。
　　我的座右铭是：每天进步一点点，每天成长一点点。

好了，下面开始进入正题，今天老师讲的内容不多，主要讲一些WEB前端工程师的就业前景和发展方向之类云云，后面才开始讲了一点点前端切图所需掌握的ps基础知识。
课堂教的不多，下面都是我自己查阅资料和上网所得并总结的。

介绍一些我找到的有用的学习网站：

● w3school 在线教程 http://www.w3school.com.cn/
● 菜鸟教程 http://www.runoob.com/
● 脚本之家 http://www.jb51.net/
● 博客园 http://www.cnblogs.com/
● segmentfault技术论坛 https://segmentfault.com/
● CSDN博客 http://www.csdn.net/?ref=toolbar
● 慕课网 http://www.imooc.com/
● jQuery WeUI http://jqweui.com/
● Veda 原型 http://www.nowamagic.net/
● HTML5中文门户 http://html5cn.org/
● 前端网 http://www.qdfuns.com/
● 前端开发博客 http://caibaojian.com/
● cavin blog js http://www.j--d.com/
● HTML5验证器(可识别对错) http://html5.validator.nu
● 工具the HTML5 Live DOM Viewer验证：http://livedom.validator.nu
● 在线HTML5大纲分析器： http://gsnedders.html5.org/outliner

扩展网站

● Linux公社 http://www.linuxidc.com/index.htm
● 千图网 http://www.58pic.com
● 花瓣网 http://www.huaban.com
● Bootstrap中文站 http://www.bootcss.com
● Bootstrap英文站 http://www.getbootstrap.com
● Lufylegend游戏引擎 http://www.lufylegend.com
● Jquery在线手册 http://jquery.cuishifeng.cn
● 认识webGL http://www.jj51.com/
● 好例子网 http://www.haolizi.net/example/view_8913.html

浏览器：
Google Chrome 浏览器 占浏览器市场的22%、 IETester 测试工具
Mozilla Firefox 火狐浏览器、世界之窗、360浏览器、搜狗浏览器、猎豹浏览器、UC浏览器、百度浏览器、QQ浏览器、Opera浏览器
市面上有很多的浏览器，一些不太规范的浏览器在显示效果上面可能和其他的浏览器会有差异。针对这种情况，我们需要做到统一。也就是兼容。

我们开发一个网站的时候，大概是以下流程：
业务员/产品经理 ==> 跑业务
设计师 ==> 设计一个图片。
前端工程师 ==> 把设计稿做成一个静态的网页。
后台程序员 ==> 把静态的网页动态化。

PHP学习的大致基础内容：
photoshop：切图布局和资源来源
html：网页结构
css：美化网页
javascript和jQuery：让网站动起来（特效：在百度中搜反转 旋转 闪烁 抖动 跳跃 黑洞可以出特效）
php：让网站活起来（支付宝，登陆交流）

HTML5Web前端设计学习的大致基础内容：
(1)photoshop：切图布局和资源来源
(2)html：网页结构
(3)css：美化网页
(4)响应式布局(PC端实战)、移动端实战、Bootstrap和sass
(5)javascript和jQuery：让网站动起来（特效：在百度中搜反转 旋转 闪烁 抖动 跳跃 黑洞可以出特效）
(6)H5游戏开发 核心技术：canvas + javascript
(7)前段架构师：前段自动化工具 + 架构理念 + Angular 框架
(8)APP 开发 核心技术：Dcloud + 本地存储 + （HTML5+） 服务器开发
作为初学者，我比较喜欢用的编辑器是Sublime Text 3 和 HBuilder，下面介绍下一些实用的快捷键
Sublime Text 3 快捷键

● Ctrl+G：跳转到第几行
● Ctrl+Shift+V：粘贴并缩进
● Ctrl+D 选中光标所占的文本，继续操作则会选中下一个相同的文本
● Ctrl+J 合并选中的多行代码为一行
● Ctrl+L 选中整行，继续操作则继续选择下一行
● Ctrl+Shift+Enter 在上一行插入新行
● Ctrl+X：删除当前行
● Ctrl+Shift+F：查找并替换
● Ctrl+M 光标移动至括号内结束或开始的位置
● Ctrl+Shift+M：选中当前括号内容，重复可选着括号本身
● Ctrl+/：注释当前行
● Alt+F3：选择所有相同的词
● Alt+Shift+数字：分屏显示
● Ctrl+Shift+[ 选中代码，按下快捷键，折叠代码
● Ctrl+Shift+] 选中代码，按下快捷键，展开代码
● Ctrl+Alt+↓ 向下添加多行光标，可同时编辑多行
● Ctrl+Shift+↓ 将光标所在行和下一行代码互换
● Shift+Tab 向左缩进
● F6 单词检测拼写
HBuilder 快捷键：不同于Sublime，HBuilder自带插件很多，功能强大的同时却运行有点卡。
快捷键与sublime也有很多不同（特别是不要按Ctrl+Shift+V、这并不是粘贴缩进，一旦按了很容易卡死程序）。
● 折叠代码：'Ctrl+Alt+-'
● 合并下行：'Ctrl+Alt+j
● Ctrl+d 删除一行
因为刚开始学习，只是做一些简单的页面和知识点检验。相对于suSublime Text 3，HBuilder过卡，所以我比较喜欢Sublime Text，
HBuilder只用了十几次，很多快捷键还不知道，不过你们喜欢用这个的话可以百度一下的。

PS总结
网页常用的图片格式(目前最常用的是JPG和GIF):需要强调说明的是我们在web页面上所使用的图像都是位图
jpg/jpeg
一般情况下都会使用jpg的方式保存图片。jpg保存的图片会进行压缩。会产生少量色彩的丢失。共支持16000种颜色

gif
支持动态图片。也会对图片进行压缩。压缩比率比jpg更小。支持透明图片。共支持256种颜色

png
能最大限度地完整的保存图片。也支持透明图片,不支持动态图片。 需要切透明图时一般使用PNG
png-8 ：共支持256种颜色
png-24：共支持16000种颜色

实际应用
什么时候应该使用PNG
1、图像上颜色较少，并且主要以纯色或者平滑的渐变色进行填充。
2、具备较大亮度差异以及强烈对比的简单图像（如“立刻购买”按钮中的背景和文字）。
什么时候应该使用JPG
对于写实的摄影图像或是颜色层次非常丰富的图像采用JPG的图片格式保存一般能达到最佳的压缩效果。

根据经验我们在页面中使用的商品图片、采用人像或者实物素材制作的广告Banner等图像更适合采用JPG的图片格式保存。
由此可见在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。一般层次丰富颜色较多的图像采用JPG存储，而颜色简单对比强烈的则需要采用JPG还是PNG但也会有一些特殊情况，例如有些图像尽管色彩层次丰富，但由于图片尺寸较小，上面包含的颜色数量有限时，也可以尝试用PNG进行存储。而有些矢量工具绘制的图像，由于采用较多的滤镜特效也会形成丰富的色彩层次，这个时候就需要采用JPG进行存储了。

另外还有一个原则就是用于页面结构的基本视觉元素，如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储，这样才能更好的保证设计品质。而其他一些内容元素，如广告Banner、商品图片等对质量要求不是特别苛刻的，则可以用JPG去进行存储从而降低文件大小。

PS快捷键：
♠ 空格+鼠标左键 -> 拖动,临时使用抓手工具 ♠ ALT+鼠标滚轮 ->放大缩小
♠ ctrl+shift+alt+s -> 保存切图 　　　　   ♠ ctrl+d ->取消选择
♠ F8 ->控制面板信息　　　　　　　　　　  ♠ shift+鼠标左键 ->保存切图时多选
♠ 双击切图 ->更改切图信息　　　　　　　　 ♠ 【F12】 ->把文件恢复到打开时的状态
♠ ALT+点击小眼睛 ->所选图层背景透明 　　 ♠ alt+鼠标左键 ->隐藏所选图层的其他图层(重新操作一次恢复)
♠ ctrl+R -> 标尺 　　　　　　　　　　　　 ♠ ctrl+h ->隐藏/显示选区
♠ 量长度 ->吸管工具里有个标尺工具　　　　 ♠ ctrl+T ->自由变化(可以确定中心点位置)
♠ 【Shift + F7】或【Ctrl + Shift + I】- 选择→反选
♠ 【Ctrl】- 临时使用移动工具　　　　　　　♠ 【Alt】 - 临时使用吸色工具
♠ 【Ctrl + R】- 显示/隐藏标尺　　　　　　 ♠ 【Ctrl + ;】- 显示/隐藏参考线
♠ 【Ctrl + "】- 显示/隐藏网格 　　　　　　 ♠ 【Ctrl + 1】- 以 100% 显示图像

一般所需的切图：背景图，logo，广告图，小标签，艺术字，文字与图像相互指向

保存切图的要点：保存文件时使用一般使用“选中的切片”，若想一次性保存所有图片除了可以
选择所有图片保存外还可以直接使用“所有切片”，但选择这个时需要确保你
切的所有图都没有多余的，不然多出来的图会造成冗余（保存文件时会自动
创建一个images文件夹）

PS抠图
个人觉得作为前端切图必备技能之一，抠图还是要掌握的，下面给出一些如何抠图的网站作为学习。
抠图教程大全 http://www.68ps.com/zt/koutu/
PS学习网 http://www.ps-xxw.cn/shiyongjiqiao/1119.html
Photoshop抠图方法大全 http://www.3lian.com/edu/2014/07-24/157912.html

还有一种比较简单的方法，不过要安装美图秀秀才能用，而且网页版无抠图功能
http://jingyan.baidu.com/article/adc81513301eb9f722bf737b.html

　　最后，引用学姐“闲云远岫”的一段文字以结束今天的博文笔记，后面但凡在网上看到哪些好的网站或者资源之类的，及时写下来到博客上与博友分享；课堂上有什么点滴体会，赶紧三言两语记在本子上，空余时间整理一下，发到博客上与博友交流；遇到什么困惑，也写到博客上，让博友们为我指点迷津；生活中的快乐，写到博客上，让博友们快乐着我的快乐；与同学们之间的有趣故事，写到博客上，让博友们和我一同体验学习之乐.....
　　哦，对了。我很喜欢看些有关前端的书，我也有些电子书资源和网站，后面会分享出来，各位如果有什么好的网站或者资源，可以的话分享出来最好不过了。就把网址放在下面评论也行，还有就是，太高深的就不要发了，最好是比较适合我一个新手看的最好。英文版什么的就更不要了。