一：了解什么是WEB前端
【web】本意是蜘蛛网和网的意思，顾名思义在互联网中是需要用浏览器浏览的网页。
【网页】分为多种类型，针对不同的人群有不同类型的网站
【WEB前端】就是指用户能看到的东西，例如移动端，pc，tv，车载，都是前端做的。
【网站的开发流程】
1.需求分析---用户想要什么样的界面，要做什么内容，是否能实现其效果。
2.设计---要做成什么样的界面，需要实现软件的哪些功能。
3.编码---需要通过软件开发工程师（前端开发工程师，后台开发工程师，架构师）完成。
4.测试---测试软件运行的效果，是否有还没解决的BUG，测试完成后软件上线。
5.维护---维护应用，更新版本。
二：网站的具体开发
需要的软件：
1.【Xmind】网站流程图、思维导图
2.【Axure】网站原型图、流程图、网站效果简单实现
3.【PS】网站所需素材图片处理
4.【编辑器】webstrom
5.【浏览器】chrome、 firefox、IE
【Xmind】
Xmind软件快捷键请参照：Xmind快捷键
软件下载地址：https://www.xmind.cn/?ref=baidupc
【Axure】
思路：先确定分辨率，布局的框架一定是从大到小。
原型图:低保真（只有结构、草图以及一点简单的链接，企业备案）、中保真（有框架，有链接，有简单的动态效果）、高保真（和上线的样子、功能几乎完全一样）
Axure功能分布：
页面区：添加、删除、修改页面名称
元件库：母版、公共部分设计
检视：属性（写交互）、说明（写备注）、样式（写元件具体的样子）
概要：（所有元件的目录）
Axure功能展示：
元件库
页面
事件编辑器
图片文字样式设置界面
Axure常用快捷请参考：https://www.axure.com.cn/1793
软件下载地址：https://www.axure.com.cn/3510
【PS】
关于图片格式区别
GIF：很小、质量低、支持动画显示、支持透明
JPG：大小一般（有损失、失真）、不支持动画和透明，一般用于产品图以及banner图
PNG：高质量，文件大，不支持动画、一般用于logo和常年不换的小图标，支持透明。
提示：PNG8和PNG24的区别
PNG8:颜色值少、质量相对PNG24较小、大小一般，支持全透明。
PNG24：颜色值多、质量相对PNG8较大、支持全透明或者半透明。
【PS软件的基本使用】
关闭辅助线 ctrl+h 、放缩图片 ctrl+加号|减号、左右移动 ctrl+滚轮 按住空格，抓取图片、 标尺：窗口标尺 ctrl+r、 信息栏：f8 或者 窗口信息栏画勾， 图层： f7 或者 窗口图层画勾。
1
2
3
4
5
6
7
关于PS软件的具体学习：http://shida66.com/route/6.html
PS软件下载：http://xiazai.zol.com.cn/detail/15/146785.shtml
【编辑器webstrom】：。。。等下一阶段学习之后再来与大家分享吧。。。
浏览器：个人觉得谷歌，火狐比较好用，用于测试。
三：第一阶段结束总结
其实也是菜鸟刚入门，了解了一些最最最最基础的东西，甚至连最最最最基础的东西都还没有完全掌握，还需要下来慢慢分析，慢慢咀嚼这些天来老师所传授的知识。上面只是这段时间时间以来学习的主要内容，如有错误或者更好的还请各路大神多多指教！！！！今天的随手记就到这里，谢谢大家。
网友评论