菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王涛-20221019-CSS项目实战1 [打印本页]

作者: 黑桃K 时间: 2022-10-20 00:17
标题: 王涛-20221019-CSS项目实战1
CSS项目实战
* 创建项目文件夹

* 1.shopping：项目文件夹
* 2.css：样式文件夹
* 3.upload：样式类的图片文件夹
* 4.image：产品类的图片
* 5.fonts：字体类的文件夹
* 6.js：脚本文件夹
* 制作favicon.icon图案

* 1.先将所需制作的favicon.icon图标的图片切成png格式
* 2.在网页中将图片转换成icon图标
* 3.将favicon.icon图标放在项目的根目录下
* 4.引入图标
* SEO优化

* SEO代表搜索引擎优化，是一种利用搜索引擎的规则提高网站再有关搜索引擎内的自认排名的方式
* SEO优化的三大标签（TDK）

* title（网站标题）：尽量不超过30个字
* description（网站描述）：多采用“我们是....”、“我们提供....”、“xx网站作为....”之类的描述语
* keywords（关键字）：限制为6-8个字，关键字之间用英文逗号隔开
* bsse.css重构网页格式

PS的基本操作
* 常见的图片格式

* 1.jpg：对颜色信息保留比较完好，产品类图片经常会使用jpg的格式
* 2.gif：gif图片格式最多能储存256色，通常来展示简单的图形和字体，但是可以保留透明背景和动画效果
* 3.png：介个jpg和gif的优点，存储形式丰富，也可以做透明背景，切图的时候有限png格式
* 4.psd：Photoshop的专用格式，可以存放图层，通道，遮盖等多种设计稿，前端人员可以之间从上面复制文字，获取图片和测量大小
* 基本操作

* 在文件中可以打开psd文件来进行操作
* Ctrl+r: 可以打开标尺，右击标尺，可以选择标尺单位
* Ctrl+加号可以放大视图 Ctrl+减号可以缩小视图
* 按住空格键可以拖动视图
* 选中矩形选框工具，可以选择视图的部分区域来查看相应的像素值
* 切图

* 先选择切片工具
* 选择切片区域
* 点击文件导出
* 存储图片
* cutterman插件的使用、

* 1、先安装cutterman插件
* 2、重启ps，找到cutterman插件
* 3、使用cutterman进行图层合并导出
* 图层合并

* 1、选中所需合并的图层
* 2、ctrl+e合并图层，右键点击图层导出即可

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)