【学习内容，目标】
- 理解什么是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执行，不大于就不执行