基础前端知识

一、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个汉字）

• 可以作为收藏夹的名称

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

例：

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

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

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

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

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

• 语法

例:

3 、K-keywords网页的关键词

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

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

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

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

• 语法

例：

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

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

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

后缀名为：.icon ico

图标地址必须与.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）父盒容器设置最小宽度，防止中间列消失

​

    
    
    
    
    

​

    

        
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 左侧边宽度）

    
    
    
    
    




    

        

            

                main主体内容
            
        
        
left
        
right
    

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