一、PS基础
PS简介
[Adobe Photoshop，简称“PS”]，是由Adobe 开发和发行的[图像处理软件]。
Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编 辑工作。
PS
[Adobe Photoshop，简称“PS”]，是由Adobe 开发和发行的[图像处理软件]。 Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。 ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。
1、常用快捷方式
文件
新建 ctrl+n
打开 ctrl + o
关闭 ctrl+w
保存 ctrl+s
另存 ctrl+shift+s
存储为web所用格式 ctrl+alt+shift+s
编缉
自由变换图像 ctrl+T
首选项——单位与标尺（更换ps单位）
图像
（改变）图像大小 crlt+alt+i
（改变）画布大小 crtl+ alt+c
裁剪
剪切（把图片空白处减掉空白）
选择
反选 ctrl+shift+I
取消选择 ctrl+D
视图
放大
缩小
ctrl+R 标尺
清除参考线
清除切片
窗口
图层F7
信息面板 F8
字符
扩展或功能
2、常用工具
移动工具
自动选择——图层或组
对齐
选中图层——选择对齐方式
-
选区
新选区
是否羽化（提示0像素，类似四个圆角）
固定大小，固定比例
标尺
显示|隐藏 ctrl + R 或 “视图”菜单--“标尺”
参考线
在标尺上按住鼠标左键拖拽，拉出参考线
水平参考线和垂直参考线的临时切换，需要按下alt键
删除参考线
在移动工具状态下，将参考线拖回到标尺。
在其他工具状态下，按住Ctrl键临时切换工具将参考线拖回到标尺
“视图”菜单--“清除参考线”
放大镜
放大、缩小（向里拽缩小，向外拽放大）
ctrl+加号 ctrl+减号 缩放
alt+鼠标滚轮滚动（ 向前放大，向后缩小）
抓手工具
移动图像
任何工具下配合空格键（转换为抓手工具）
文字工具
查看文字大小、字体、颜色
复制、粘贴文字
切片工具
存储
ctrl+alt+shift+s存储为web所用格式
裁剪工具 c 工具组内切换shift + c 在切片工具状态下，按住Ctrl键，临时切换为切片选择工具
保存切片 “文件”--“存储为web所用格式”（“导出”--“存储为web所用格式” 或 Ctrl + shift + alt + s）-- “预设”（选择jpeg高|gif|png),修改图片品质，单击“存储”--选择保存文件的位置，修改文件名，选择格式（仅限图像），切片（选中的切片（按住shift选择）或所有用户切片），设置--（其它--设置切片命名及方式）单击“保存”
所有用户切片
图片命名
images文件夹
怎么算选中切片？ 按shift快捷键，切片的边框变成黄色
所有切片：会切除很多图片
所有用户切片：切几张图片就显示几张图片
选中的切片：按住shift键，在很多张切图中只显示选中你切的图片
3、图层基础操作
选择图层
单击——选择单个图层
配合shift——连选
配合ctrl ——跳选
新建图层
ctrl+shift+n新建图层或点击图层菜单栏----新建图层
命名图层
点击图层右侧文字
复制图层
ctrl+j 复制选中的图层
alt+鼠标拖动 选中图层按alt,上下拖动--复制图层
显示隐藏图层
左键单击小眼睛
删除图层
选中图层-点击面板上的删除
选中图层-delete
锁定与解除锁定
（锁定图层后，用移动工具移动不了其图层）
编组与取消编组
crtl+g
ctrl+shift+g
上移、下移图层
ctrl+ ] 上移一层
ctrl+ [ 下移一层
ctrl+shift+] 置顶
ctrl+shift+[ 置底
合并图层
ctrl+e
图层不透明度
选中图层修改不透明度
查看不透明度
5、PXCook切图
PxCook（像素大厨）是一款切图设计工具软件。自2.0.0版本开始，支持PSD文件的文字，颜色，距离自动智能识别。
只能切psd图片
操作步骤：
1.安装2019版本ps
2.从PxCook官网下载PxCook插件 ：PxCook - 高效易用的自动标注工具,生成前端代码,设计研发协作利器
选择：支持 Windows/macOS标识，点击立即下载；
下载完成后安装，
3.Ps需要与PxCook连接，打开PxCook插件注册登录即可
4.重新启动PS
使用步骤：
1.把psd图片用Ps打开
2.打开PxCook插件：窗口--扩展功能--选择PxCook-切图
3.参数选择：
设备类型：Web iOS Android
设计图分辨率：1X（1倍） 2X（2倍）
4.导出切图
1.导出当前选中到本地
一次只能切一张
选中图层后点击导出当前选中到本地按钮即可
2.导出所有切图到本地
一次可以切多张
选择图层且点击标记为切图，最后点击导出所有切图到本地按钮即可
三、项目介绍
项目名称：
小U课堂
项目描述：
小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，视频详情、登录、注册页面、个人中心等静态页面的制作
项目页面
首页
列表页
详情页
其他
开发工具以及技术栈
开发工具
VScode Photoshop 主流浏览器
技术栈
利用 HTML5 + CSS3 布局
采取结构与样式相分离，模块化开发
项目规划与项目搭建
概述：基于项目页面效果图分析，创建项目文件目录。 分析页面公共模块，规划创建公共模块的样式表文件，如页面头部和底部，方便重复使用
文件目录
概述：根据项目名称创建项目文件夹,推荐用对应的英文单词命名。 html、css、img、js 文件均归档至项目名称目录中
目录示例
根据项目名称创建项目文件夹。如：小U课堂
html、css、images、js 文件均归档至项目名称目录中，基本文件在目录结构参考：
HTML 文件、根据页面内容以英文命名，首页或只有一个页面通常命名为index.html
css 文件以英文命名，
公用样式通常命名为reset.css（常用的浏览器样式），
public.css（多个页面时的公共模块的样式，或多次重复使用字体、字号、间距等样式），
首页通常命名为index.css, 其他页面依实际模块或功能需求命名
图片文件命名尽量与其模块样式名称保持关联，尽量使用小写命名
（如登录框的背景与图片：login_bg.jpg、login_user_ico.gif 等）
常用图片格式 gif 、png 、jpg
项目文件夹
样式类图片文件夹（images）
样式文件夹（css）
脚本文件夹（js）
asset---静态资源文件夹
字体类文件夹（fonts）
产品类图片文件夹（upload）
目录结构参考
工程项目：小U课堂 css----css文件夹 reset.css---重置样式 public.css---公共样式 index.css---首页的样式 login.css---登录页样式 list.css---列表页样式 js----js文件夹 images---图片文件夹 asset---静态资源文件夹 font---阿里矢量图标 页面 index.html-------首页 login.html-------登录页 register.html----注册页 list.html--------列表页 video.html-------视频播放页 ......
四、项目规范
概述：任何一个Web项目或者系统开发之前都需要定制一个开发约定和规则，这样有利于项目的整体风格统一、代码维护和扩展，只有每个开发人员 都按照一个共同的规范去设计、沟通、开发、测试、部署，才能保证整个开发团队协调一致的工作，从而提高开发工作效率，提升工程项目质量
1、书写风格（格式化规范）
HTML 书写规范
文档类型声明及编码：
统一为 html5 声明类型；
编码统一为 utf-8
书写规范：
书写时根据页面结构实现层次分明的缩进；
标签闭合
通常小写字母
语义化 HTML：
根据页面结构选择合适的标签，属性
如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用 p、结构简章重复的部分用 ul、li标签
页面中重要的图片内容要添加 alt=””替换文本，以便图片丢失时，用户可以根据替换文本了解页面内容
根据模块内容定义class和id名称，
如包含logo和搜索框等在内的头部标签用.header,包含联系信息，版权等的模块用footer或copyright.
合理嵌套HTML标签：
合理嵌套HTML标签，
ul和li是固定嵌套，ul直接子元素必须是li;
dl和dt,dd是固定嵌套，dl的直接子元素必须是dl和dd;
p标签不允许嵌套p标签;a标签不允许嵌套块级标签
尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能
保证结构与表现相分离：
CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。
在页面中尽量避免使用行内样式即 style=”…”或行间属性，尽量使用 class 或者 id
2、css 书写规范
书写代码前
（1）确定版心（页面有效区）
（2）考虑样式表规划，提高样式重复使用率；
书写风格（格式化规范）
推荐使用小写字母书写
保持代码缩进,每个属性声明末尾都要加分号
.box { height:100px; width: 50px; }
书写规范
合理使用id选择器，id选择器用于唯一的页面结构元素
合理使用全局意义的标签选择器
尽可能不使用通配符选择器
避免选择器嵌套层级过多
css 属性书写顺序：
建议遵循 :
特殊(文档流相关)属性 –> 盒模型 –> 装饰属性 –>内容排版相关
（1）文档流相关属性（display, position, float, clear, visibility,） （2）盒模型相关属性（width, height, margin, padding, border） （4）装饰性相关属性（background, opacity, cursor） （3）内容排版相关属性（color, font, line-height, text-align, text-indent, vertical-align）
3、图片规范
命名
尽量与其模块样式名称保持关联， 尽量使用小写命名（如登录框的背景与图片：login-bg.jpg、user-pic等）
五、页面TDK
也称网页三剑客
SEO是英文Search Engine Optimization的缩写，译为搜索引擎优化，是按照搜索引擎自然排名机制，优化调整站内和站外，提高或者保持网站在搜索引擎中关键词自然排名，以获得更多流量（带来更多的访问），达成网站销售及品牌建设的目标。
1、T-title网页标题
是搜索引擎了解网页的入口和对网页主题归属的最佳判断点
通常是网站名（产品名）- 网站的介绍 （尽量不要超过30个汉字）
可以作为收藏夹的名称
标题与页面内容相关，尽量简洁
例：
<title>小U商城-正品高价、品质保障、配送及时、愉快购物！</title>
2、D-description网页的描述内容
作用：简要说明我们网站主要是做什么的。
使用content属性提供网页的描述内容，但不要过长，否则搜索引擎会以“..."省略
description 作为网站的总体业务和主题概括
多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。
语法
<meta name="description" content="">
例:
<meta name="description" content="小U商城-专业的综合网上购物商城,销售烟酒、数码通讯、槟郎、家居百货、服装服饰、图书、食品等数万个品牌优质商品、便捷、诚信的服务，为您提供愉悦的网上购物体验!">
3 、K-keywords网页的关键词
搜索引擎可以根据关键词对文档进行分类
页面关键词，是搜索引擎的关注点之一。
keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式
使用content属性设置网页的关键词，关键词之间用英文逗号隔开
语法
<meta name="keywords" content="">
例：
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,小U">
注：对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备
4、设置网页标题栏或收藏夹图标
favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。
后缀名为：.icon ico
<link rel="icon" href="图标地址"> 图标地址必须与.html文件为同级目录 <link rel="icon" href="./xiaoULOGO.ico">
五、为什么要初始化CSS样式
因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。
类名命名参考
盒子：box
头部：header、hd
内容：content/container
页面主体：main
页脚：footer
版权：copyright
导航：nav，navbar导航条
子导航：subnav
侧栏：sidebar
栏目：column
文章：article
包装器、外框：wrapper
左右中：left / right / center
列表：list
栏目标题：title
更多：more
登录条：loginbar
标志：logo
广告：banner
友情链接：friendlink
热点：hot
新闻：news
下载：download
加入：join
指南：guild
服务：service
合作伙伴：partner
加入我们：join_us
菜单：menu
子菜单：submenu
搜索：search
标签页：tab
滚动：scroll
提示信息：msg（message）
小技巧、贴士：tips
标签：tag
工具条：tool, toolbar
箭头： arrow
下拉：drop 下拉菜单： dorp_menu