前端基础笔记13

# 一、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](https://baike.baidu.com/item/PSD/60413)文件的文字，颜色，距离自动智能识别。

*只能切psd图片*

#### 操作步骤：

1.安装2019版本ps

2.从PxCook官网下载PxCook插件 ：https://www.fancynode.com.cn/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）

#### 目录结构参考

```html

工程项目：小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个汉字）

- 可以作为收藏夹的名称

- 标题与页面内容相关，尽量简洁

例：

```html

 

```

### 2、D-description网页的描述内容

* 作用：简要说明我们网站主要是做什么的。

- 使用content属性提供网页的描述内容，但不要过长，否则搜索引擎会以“..."省略

- description 作为网站的总体业务和主题概括

- 多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

- 语法

```

```

例:

```html

```

### 3 、K-keywords网页的关键词

- 搜索引擎可以根据关键词对文档进行分类

- 页面关键词，是搜索引擎的关注点之一。

- keywords 最好限制为 6～8 个关键词，关键词之间用英文逗号隔开，采用 关键词1,关键词2 的形式

- 使用content属性设置网页的关键词，关键词之间用英文逗号隔开

- 语法

```html

```

例：

```html

 

```

注：对于我们前端人员来说，我们只需要准备好这三个标签，具体里面的内容，有专门的 SEO 人员准备

### 4、设置网页标题栏或收藏夹图标

favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持 favicon.ico 图标。

后缀名为：.icon  ico

```html

图标地址必须与.html文件为同级目录

```

 

# 五、为什么要初始化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

# 六、圣杯布局&双飞翼布局

概述：圣杯布局源于国外，双飞翼布局是经过淘宝UED优化对于圣杯布局的优化，都是经典的三栏式布局的解决方案

圣杯布局和双飞翼布局都是为了实现左右两栏固定宽度，中间部分自适应的三栏布局，不过两者实现的原理有 所不同

实现要点：

- 先加载中间列，结构中--左-右

- 显示结果是左-中-右

- 中间自适应，两侧列固定

## 圣杯布局

### 实现步骤

- 1）HTML结构中——先中间内容后侧边栏

- 2）两侧宽度固定，中间宽度设置100%

- 3）中间内容和左右两侧分别加浮动 float:left;

- 4) 将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到右边（margin-left: -右侧盒的宽度）

- 5）通过父盒将左右盒子的位置露出来（在父盒上设置padding: 0 右侧盒子宽度 0 左侧盒子宽度）

- 6）分别还原左侧盒和右侧盒

  * 将左侧列移动至对应位置（position:relative; 左侧盒设置left属性，值为-左侧盒宽度；）

  * 将右侧列移动至对应位置（position:relative; 左侧盒设置left属性，值为右侧盒宽度；）

- 7）父盒容器设置最小宽度，防止中间列消失

```html

   

   

   

   

   

   

       

center主体内容

       

left

       

right

   

```

## 双飞翼布局

双飞翼布局，始于淘宝 UED。如果把三栏布局比作一只鸟，可以把 main 看成是鸟的身体，left 和 right 则是 鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。

### 实现步骤

- 1）HTML结构中——先中间结构（主体结构中要有主体内容盒，主体内容盒里嵌套一个子盒）后侧边栏

- 2）两侧盒子固定宽度，中间主体结构盒宽度100%；

- 3）中间结构盒和左右两侧设置浮动 float: left;

- 4）将左侧盒子拉到最左边（margin-left: -100%），将右侧盒子拉到最右边（margin-left: -右侧盒宽度）

- 5）在中间主体结构盒的子盒上设置margin值将中间内容露出来（margin: 0 右侧边宽度 0 左侧边宽度）

```html

   

   

   

   

   

   

       

           

                main主体内容

           

       

       

left

       

right

   

```

# 四、文本溢出处理显示省略号