Web前端第一阶段笔记总结(2018-8-14-2018-8-23)

【学习内容,目标】

  • 理解什么是web,什么是前端,软件架构分类,以及网站的分类
  • 项目开发的流程(一个完整的项目,并不是一个人的页面)
  • 简单使用PS中切片,裁剪,抠图等功能
  • 使用XMind梳理网站业务流程
  • 使用Axure进行原型图的设计,目的了解网页的基本结构,为html学习打基础
  • 建立审美观,从网站布局结构配色方面分析

【什么是web应用】

1、什么是web?详细

web本意是蜘蛛网和网的意思,在互联网中是需要用浏览器浏览的网页

2、什么是web应用?

web应用就是应用在web上的应用,就是b/s架构模式

【b/s,c/s模式应用】

1、b/s Browser/Server 浏览器/服务器详细

2、c/s Client/Server 客户端/服务器详细

区别:详细

b/s 方便,不需要下载,跨平台,主要利用远程服务器来处理业务
c/s 考虑跨平台问题,在本地就能处理,数据是可以保存在本地

【什么是前端】

  • 只要是用户能看到的,在移动端,pc,tv,车载,都是前端做的详细

【网站的开发流程】

1、需求分析—明白要做什么(用户有什么需求-以及是否能够实现)(产品经理)(售前开发工程师)
2、设计—做成什么样(确定软件到底实现哪些功能)(UI工程师,美工)
3、编码—具体实现(软件开发工程师:前端开发工程师,后台开发工程师,架构师)
4、测试—测试实现效果(测试工程师) 上线(实施工程师) 5、维护—维护应用,更新版本(运维工程师

【需求分析包括】

  • 网站类型分析
  • 用户群体分析
  • 市场价值及竞品分析
  • 业务功能分析
  • 业务流程分析

【网站分类】

  • 网站类型:推广展示、机构企业、电子商务、多媒体、综合门户、搜索引擎
  • 网站技术:固定分辨率、瀑布流、响应式

    瀑布流:好多定宽的列,每一列里面的小项目高度不一样。
    响应式:适配不同分辨率的设备
    固定:网页的宽度是固定的

  • 结构类型:封面型、国字型、拐角型、左右结构,上下结构

  • 布局类型:流式布局、水平布局、垂直布局

【流程】

针对用户考虑

用户年龄、选择素材、网站布局、颜色搭配、用户体验、功能是否便捷

竞品分析考虑

主要业务功能是否同样满足用户
独有的特殊功能的核心竞争力
用户操作及体验度是否优化
网站性能是否更加快捷
用户对于网站的依赖程度及习惯度

业务功能分析

  • 1、分析有多少个页面,他们之间的关系
  • 2、分析每个页面都有什么功能(功能模块/业务模块)
  • 3、每个功能具体的操作(流程图)

【XMind的使用】

  • 建立分支 enter
  • 建立子主题 tab
  • 流程图箭头: ctrl+l

【开发软件】

浏览器 chrome firefox IE
编辑器 webstrom
素材处理软件 ps
流程图、思维导图 XMind
原型图、流程图 Axure

【axure】

线框图,流程图,原型图
页面区: 添加、删除、修改页面名称
元件库
母版: 公共部分设计
检视:属性 、说明 、样式
概要:所有元件的目录

设计的思路

  • 一定是从大到小
  • 先确定分辨率(尺寸)
  • 放缩工作区
  • ctrl+滚轮(缩放)
  • F5预览

低保真

  • 只有架构,结构,草图,或者有简单的链接,企业备案
  • 对于咱们:理解网页是怎么搭建结构。
  • 讨论网页结构
  • 给设计是参考

中保真

  • 有框架,有链接,有简单的动态效果
  • 给客户看的
  • 给设计师
  • 给程序员

高保真

  • 和上线的东西几乎完全一样
  • 竞标
  • 给设计师看
  • 给程序员看

【网站开发者工具的使用】

  • 网页上右键-检查
  • F12
  • FN+F12

【UI给我们的设计稿】

  • png图片
  • ps工程图,psd工程图
  • 工具图

【关于图片】

GIF

  • 占内存小
  • 质量低
  • 支持动画
  • 支持透明度
  • 用于小动图

JPG

  • 占内存一般
  • 质量一般
  • 不支持动画
  • 不支持透明度
  • 用于产品图、banner图、经常换的图

PNG

  • 占内存大
  • 质量高
  • 不支持动画
  • 不支持透明度
  • 用于logo图,常年不换的小图标,透明的

    PNG8与PNG24详细区别

PNG24颜色值多,质量越好,占内存大,支持全透明与半透明
PNG8颜色值少,质量一般,占内存一般,支持全透明

【PS】

快捷键

  • 关闭辅助线———-ctrl+H
  • 放缩图片————-ctrl+加号|减号
  • 左右移动 ————ctrl+滚轮 按住空格,抓取图片
  • 窗口标尺 ————ctrl+R
  • 信息栏—————–F8 或者 窗口信息栏画勾
  • 图层——————–F7 或者 窗口图层画勾
  • 移动工具————–v
  • 选框工具————–m
  • 魔棒工具————–w
  • 切片工具————–c
  • 变形——————–ctrl+t

套图工具

M——圈住图片——Ctrl+C——Ctrl+N——确认——Ctrl+V——Ctrl+S

撤销

  • 一次:Ctrl+Z
  • 多次:Ctrl+Alt+Z

切片工具

保存:ctrl+shift+alt+s
注意:选择所有用户切片

从psd图片中获取素材

  • psd图是由很多图层组合而成
  • 图层与图层是由层级关系
  • 选择移动工具-选择图层和自动选择

【交互】

动态面板

  • 做一些交互效果可以用
  • 透明的

事件

  • 用户的操作:详细

轮播图

  • 页面一加载完,轮播图自动播放
  • 鼠标一上去,会暂停,会显示两个按钮
  • 当移开的时候会继续播放,按钮会小时
  • 点击两个按钮会播放

注:出现问题,鼠标移动到左右按钮的时候,出现的闪烁的效果
解决办法:
1、把左右按钮和动态面板组合到一起,把移入移出事件加给组上面
2、添加热区

回到顶部

  • 一直固定在某个位置—>把按钮变成动态面板–>右键固定到某个位置
  • 刚开始没有,刚页面的滚动距离大于某个值的时候出现
  • 当滚动距离>=100 按钮显示
  • 当滚动距离<100 按钮隐藏
  • 点击的时候滚上去,添加点击事件,让滚动到某个地方,在顶部设置一个热区

热区是透明的

鼠标悬停

  • 添加鼠标移入事件:改变图片的尺寸
  • 添加鼠标移出事件:改回图片的尺寸

就实现了鼠标放上去图片变大的效果

购物车

数值从0开始变

  • 先设置全局变量:项目-全局变量-自定义一个-设置数值为0
  • 添加点击事件-设置变量值-勾选定义的变量-点击fx-变量+1
  • 在设置文本-勾选组件-fx设置为变量名
  • 减法时添加判断条件>0执行,不大于就不执行

你可能感兴趣的:(Web前端第一阶段笔记总结(2018-8-14-2018-8-23))