一:了解什么是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 或者 窗口图层画勾。
关于PS软件的具体学习:http://shida66.com/route/6.html
PS软件下载:http://xiazai.zol.com.cn/detail/15/146785.shtml
【编辑器webstrom】:。。。等下一阶段学习之后再来与大家分享吧。。。
浏览器:个人觉得谷歌,火狐比较好用,用于测试。
三:第一阶段结束总结
其实也是菜鸟刚入门,了解了一些最最最最基础的东西,甚至连最最最最基础的东西都还没有完全掌握,还需要下来慢慢分析,慢慢咀嚼这些天来老师所传授的知识。上面只是这段时间时间以来学习的主要内容,如有错误或者更好的还请各路大神多多指教!!!!今天的随手记就到这里,谢谢大家。