Web前端第一阶段笔记总结（2018-8-14-2018-8-23）_web前端一阶段自我总结

【学习内容，目标】

• 理解什么是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执行，不大于就不执行