web一阶段 day14

PS基础

1、PS简介

[Adobe Photoshop，简称“PS”]，是由Adobe 开发和发行的[图像处理软件]。

Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。

ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

2、常用快捷方式

2.1 文件

• 新建 ctrl+n

• 打开 ctrl + o

• 关闭 ctrl+w

• 保存 ctrl+s

• 另存 ctrl+shift+s

• 存储为web所用格式 ctrl+alt+shift+s

2.2 编缉

• 变换 ctrl+T

• 首选项——单位与标尺

2.3 图像

• 图像大小 crlt+alt+i

• 画布大小 crtl+ alt+c

• 裁剪

• 裁切

2.4 选择

• 反选 ctrl+shift+I

• 取消选择 ctrl+D

2.5 视图

• ctrl+R 标尺

• 清除参考线

• 清除切片

2.6 窗口

• 图层F7

• 信息面板 F8

• 扩展或功能

3、常用工具

3.1 移动工具

• 自动选择——图层【分组】

• 对齐

  • 选中图层——选择对齐方式

3.2 选区

• 新选区

• 是否羽化（提示0像素，某些同学会出现松开鼠标测量结果 不准确注意此处设置）

• 固定大小，固定比例

3.3 放大镜

• 放大、缩小画布（默认放大，配合alt缩小）

• ctrl+加号 ctrl+减号 缩放

• alt+鼠标滚轮滚动（ 向前放大，向后缩小）

3.4 抓手工具

• 移动画布

  任何工具下配合空格键（转换为抓手工具）

3.5 文字工具

• 查看文字大小、字体、颜色

• 复制、粘贴文字

3.6 切片工具

右键

编缉切片选

• 修改位置 x，y，修改大小 w，h

划分切片

• 右键划分切片（水平、垂直）

存储

• ctrl+alt+shift+s存储为web所用格式

• 所有用户切片

• 图片命名

• images文件夹

4、Cutterman插件

4.1 介绍

Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。

它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

4.2 下载

官网：Cutterman - 最好用的切图工具

4.3 安装

1. 下载对应工具的一键安装程序

2. 解压下载的安装包, 里面是一个可执行文件, 双击打开

3. 点击安装即可

4.4 启用

• 安装完成后重启PS, 从菜单栏 -> 窗口 -> 扩展里头打开

• 注：需要登录

  安装完成后重启PS, 从菜单栏 -> 窗口 -> 【扩展功能】-> 【cutterman】打开。

4.5 设置输出路径

4.6 一键切图

点击导出选中图层，可以自动输出所需的各种图片。

支持各种图片格式输出

多个图层合并、单独输出

固定尺寸输出

5、图片格式

在保证视觉效果的情况下，选择最小的图片格式与图片质量（通常选择 70-80 之间），以减少加载时间。

5.1 PSD

Photoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。

5.2 JPG

• 色彩丰富 【不支持透明】

• 压缩比高，生成文件体积小，

• 支持多种压缩级别可以控制文件大小

• 色彩丰富的图片（摄影图像（产品图，照片，渐变，banner图））

5.3 GIF

• 支持动画

• 支持透明（全透明）

• 颜色不够丰富，只支持256种颜色、文件小

• 适用于：色彩简单的logo/icon/动图

5.4 PNG

• 颜色丰富

• 支持alpha透明（全透明和全不透明，半透明）

• 早期的浏览器不支持PNG图像

• 适用于：透明背景图片【投影，发外光, 线条复杂（文字）】

5.5 WebP

谷歌（google）10年推出一种新型图片格式

• 文件小，支持有损和无损压缩，支持动画、透明

• 但并不是所有浏览器都支持 webp

• 兼容

项目规范

1、项目文件夹

• 根据项目名称创建项目文件夹。如：ushop

• html、css、img、js 文件均归档至项目名称目录中

• HTML 文件、根据页面内容以英文命名，首页或只有一个页面通常命名为index.html

• css 文件以英文命名

  • 公用样式通常命名为reset.css（常用的浏览器样式）

  • public.css（多个页面时的公共模块的样式，或多次重复使用字体、字号、间距等样式）

  • 首页通常命名为index.css, 其他页面依实际模块或功能需求命名

• 图片文件命名尽量与其模块样式名称保持关联，尽量使用小写命名

  • （如登录框的背景与图片：login_bg.jpg、login_user_ico.gif 等）

  • 常用图片格式 gif 、png 、jpg

目录结构参考

---/html/
|---- /user/                    与用户相关的页面  
|---- /user/login.html          登录页
---/css/
|---- /reset.css                 重置浏览器样式    
|---- /page                        其他页面的css
|---- /page/pagename.css         单独某个页面的css
|---- /common.css                  css通用样式库
---/js/
|---- /lib                      公用组件
|---- /lib/jquery.2.2.3.min.js  调用jq库文件 
|---- /page                          其他页面的js
|---- /page/pagename.js         单独书写的js
|---- /common.js                公用方法
---/img/
|---- /page                     其他页面对应的图片
|---- /page/wap                 手机端图片夹
|---- /page/wap/wap_icon.png    手机端图标
|---- /logo.png                 公用图片

2、HTML 书写规范

2.1 文档类型声明及编码

• 统一为 html5 声明类型

• 编码统一为 utf-8

2.2 书写规范

• 书写时根据页面结构实现层次分明的缩进

• 标签必合

• 属性值必须用双引号包括

• 通常小写字母

2.3 语义化 HTML

• 根据页面结构选择合适的标签

  • 如标题根据重要性用 h1-h6不同等级的标签标记 、段落标记用p，结构简章重复的部分用 ul、li标签

  • 页面中重要的图片内容要添加 alt=“”替换文本，以便图片丢失时，用户可以根据替换文本了解页面内容

• 根据模块内容定义class和id名称

  • 如包含logo和搜索框等在内的头部标签用.header,包含联系信息，版权等的模块用footer或copyright

2.4 合理嵌套HTML标签

• 合理嵌套HTML标签，

  • ul和li是固定嵌套，ul直接子元素必须是li;

  • dl和dt,dd是固定嵌套，dl的直接子元素必须是dl和dd;

  • p标签不允许嵌套p标签;a标签不允许嵌套

  • a标签和其他交互性元素比如button

• 尽可能的控制元素嵌套层级，不合理的嵌套会影响页面性能

2.5 保证结构与表现相分离

• CSS表现层和JavaScript表现层分别归属于独立的.css和.js文件。

• 在页面中尽量避免使用行内样式即 style=“”或行间属性，尽量使用 class 或者 id

3、css 书写规范

3.1 编码

编码统一为 utf-8

3.2 书写代码前

1. 确定版心（页面有效区）

2. 考虑样式表规划，提高样式重复使用率

3. 提前沟通页面中模棱两可的需求和交互效果，方便后续合理布局

4. 布局时考虑后续交互效果处理的便利性，必要时预留出交互效果中涉及到的样式类（如鼠标点击后的样式等）

3.3 书写代码时

1. 添加注释：应该为大区块样式添加注释 ，小区块适量注释

2. class 与 id 的命名

   • 命名要语义化、简明化

   • CSS命名时要加前缀如：.zg_top{}

   • 常用命名方法一：样式名称由小写英文、数字和 _ 来组合命名，如 top_left、top_nav;

   • 避免使用中文拼音，尽量使用简易的单词组合

   • 常用命名方法二：首字母大写，驼峰式命名，如：topNav

3. 代码格式

4. 保持代码缩进与格式

5. 建议单行书写

6. 选择器

• 尽可能不使用通配符选择器 *

• 合理使用id选择器（页面中唯 一的元素，如头部，底部）

• 避免使用标签限定id或者类选择器

  • 如：div#test { } p.box {}

• 避免层集嵌套

3.4 css 属性书写顺序

• 建议遵循：

• 特殊(文档流相关)属性 –> 盒模型 –> 装饰属性 –>内容排版相关

  1. 文档流相关属性（display、 position、float、clear、 visibility）

  2. 盒模型相关属性（width、 height、margin、padding、border）

  3. 装饰性相关属性（background、opacity、cursor）

  4. 内容排版相关属性（color、font、line-height、text-align、text-indent、vertical-align）

• 书写代码过程中要兼容兼容问题，对熟知的兼容问题在书写代码过程中一并处理。

3.5 类名命名参考

main 页面主体 tag 标签 msg message 提示信息 tips 小技巧 vote 投票 friendlink友情链接 title 标题 summary 摘要 login_bar 登录条 search_input 搜索输入框 hot 热门热点 search 搜索 search_output 搜索输出和搜索结果相似 search_bar 搜索条 search_results 搜索结果 copyright 版权信息 branding 商标 logo 网站LOGO标志 site_info 网站信息 site_info_legal 法律声明 site_info_credits 信誉 join_us 加入我们 partner 合作伙伴 service 服务 regsiter 注册 arr arrow 箭头 guild 指南 site_map 网站地图 list 列表 home_page 首页 sub_page 二级页面子页面 tool, toolbar 工具条 drop 下拉 dorp_menu 下拉菜单 status 状态 scroll 滚动 tab 标签页 left right center 居左、中、右 news 新闻 download 下载

项目介绍

1、项目名称

小U课堂

2、项目描述

小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、在线练习，精品课程、视频详情、登录、注册页面、个人中心等静态页面的制作。

3、项目页面（预览）

• 首页

• 列表页

• 详情页

• 其他

• 开发工具以及技术栈

  • 开发工具

    • VScode Photoshop 主流浏览器

  • 技术栈

    • 利用 HTML5 + CSS3布局

• 采取结构与样式相分离，模块化开发

项目规划与项目搭建

概述：基于项目页面效果图分析，创建项目文件目录。 分析页面公共模块，规划创建公共模块的样式表文件，如页面头部和底部，方便重复使用。

1、文件目录

概述：根据项目名称创建项目文件夹，推荐用对应的英文单词命名。 html、css、img、js 文件均归档至项目名称目录中。

1.1、目录示例

• 项目文件夹

  • 样式类图片文件夹（images）

  • 样式文件夹（css）

  • 字体类文件夹（fonts）

  • 脚本文件夹（js）

  • 产品类图片文件夹（upload）

  ----webset
  ​
  - ---/html/
    |---- /user/                    与用户相关的页面  
    |---- /user/login.html          登录页
    ---/css/
    |---- /base.css                 重置浏览器样式    
    |---- /page                        其他页面的css
    |---- /page/pagename.css        单独某个页面的css
    |---- /common.css                  css通用样式库
    ---/js/
    |---- /lib                      公用组件
    |---- /lib/jquery.2.2.3.min.js  调用jq库文件 
    |---- /page                          其他页面的js
    |---- /page/pagename.js         单独书写的js
    |---- /common.js                公用方法
    ---/img/
    |---- /page                     其他页面对应的图片
    |---- /page/wap                 手机端图片夹
    |---- /page/wap/wap_icon.png    手机端图标
    |---- /logo.png                 公用图片

2、样式文件

2.1、公共样式(common.css)

说明：有些样式和结构在很多页面都会出现，如页面头部和底部，此时，可以把这些结构和样式单独作为一个公共模块，方便重复使用。

2.2、初始化样式（reset.css）

• 解释为什么要重置浏览器样式

• 总结重置样式

项目模块化开发

将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点。

• 首页整体画块分析

• 首页头部画块分析、布局讲解

• 首页【同步课程模块】布局讲解，渗透margin负值的应用

• 在线练习页【选项卡】模块讲解

• 登录、注册弹框讲解

网站favicon

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

1、制作favicon图标

1. 把图标切成 png 图片

2. 把 png 图片转换为 ico 图标，这需要借助于第三方转换网站，例如比特虫：制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net

2、使用favicon图标

1. favicon图标放到网站根目录下

2. HTML页面引入favicon图标

网站TDK

SEO是英文Search Engine Optimization的缩写，译为搜索引擎优化，是按照搜索引擎自然排名机制，优化调整站内和站外，提高或者保持网站在搜索引擎中关键词自然排名，以获得更多流量（带来更多的访问），达成网站销售及品牌建设的目标。

1、description（网站描述）

简要说明我们网站主要是做什么的。

description 作为网站的总体业务和主题概括，多采用“我们是…”、“我们提供…”、“×××网作为…”、“电话：010…”之类语句。

2、title(网站标题)

• 是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。

• 通常是网站名（产品名）- 网站的介绍（尽量不要超过30个汉字）

3、keywords（关键字）

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

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

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