文章目录

一、PS 操作
- 1.1 基本操作
- 1.2 常见的图片格式
- 1.3 PS切图
- - 1.3.1 图层切图
  - 1.3.2 切片切图
  - 1.3.3 PS 插件切图
二、学成在线案例
- 2.1 准备素材和工具
- 2.2 案例准备工作
- 2.3 CSS 属性书写顺序(重点)
- 2.4 页面布局分析
- 2.5 确定版心
- 2.6 头部制作
- - 2.6.1 导航栏注意点
- 2.7 banner 制作
- 2.8 精品推荐小模块
- 2.9 精品推荐大模块
- 2.10 底部模块

一、PS 操作

1.1 基本操作

1.2 常见的图片格式

1.3 PS切图

PS 有很多的切图方式：图层切图、切片切图、PS 插件切图等。

1.3.1 图层切图

最简单的切图方式：右击图层 —> 导出 PNG 切片。

如果想切的图层由几部分组成，那么先合并图层，再右击图层 —> 导出 PNG 切片。

1.3.2 切片切图

利用切片选中图片

利用切片工具手动划出

导出选中的图片
文件菜单 —> 存储为 web 设备所用格式 —>选择我们要的图片格式 —>存储。

1.3.3 PS 插件切图

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

二、学成在线案例

学成网首页.psd
参考pink老师写的

2.1 准备素材和工具

学成在线 PSD 源文件。
开发工具 = PS（切图） + vscode（代码）+ chrome（测试）。

2.2 案例准备工作

我们本次采取结构与样式相分离思想：

创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。
study 目录内新建 images 文件夹，用于保存图片。
新建首页文件 index.html（以后我们的网站首页统一规定为 index.html )。
新建 style.css 样式文件。我们本次采用外链样式表。
将样式引入到我们的 HTML 页面文件中。
样式表写入清除内外边距的样式，来检测样式表是否引入成功。

2.3 CSS 属性书写顺序(重点)

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

2.4 页面布局分析

为了提高网页制作的效率，布局时通常有以下的布局流程：

必须确定页面的版心（可视区），我们测量可得知。
分析页面中的行模块，以及每个行模块中的列模块。其实页面布局，就是一行行罗列而成的。
制作 HTML 结构。我们还是遵循，先有结构，后有样式的原则。结构永远最重要。
开始运用盒子模型的原理，通过 DIV+CSS 布局来控制网页的各个模块。

2.5 确定版心

这个页面的版心是 1200 像素，每个版心都要水平居中对齐，可以定义版心为公共类：

.w {width: 1200px;margin: auto;
}

2.6 头部制作

2.6.1 导航栏注意点

注：第四个浮动盒子中图片和文字统一的垂直居中，相关知识还没讲，后面会讲。

2.7 banner 制作

2.8 精品推荐小模块

2.9 精品推荐大模块

2.10 底部模块

Day07——PS相关操作、学成在线案例相关推荐

CSS浮动、PS切图、学成在线案例前期准备
传统网页布局的三种方式网页布局的本质--用CSS来摆放盒子,把盒子摆放到相应位置 CSS提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序): 普通流(标准流) 浮动定位标准流所谓标准流 ...
9.----------------------------------------------------------------------------------------【学成在线案例】
文章目录 [学成在线案例]前端小抄(9) 一.准备素材和工具二.案例准备工作三.CSS属性书写顺序四.页面布局分析五.确定版心六.头部制作七.banner 制作八.精品推荐小模块九.精 ...
页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
CSS浮动/常见网页布局/清除浮动/学成在线案例
CSS 04 1. 浮动(float) 1.1 传统网页布局的三种方式网页布局的本质--用 CSS 来摆放盒子. 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列 ...
pink老师课程-学成在线案例资料
哔哩哔哩里面pink老师课程那里实操. 代码和图片在末尾总结 1.代码HTML结构要清晰,最好做好注释标明模块的开始和结束如:  <!--1.头部结束 ...
黑马程序员-学成在线案例-版权部份
黑马程序员-学成在线案例-版权部份一.设置大盒子因为上一层盒子没有设置高度且所有子集都浮动了,所以必须先清除上一标签的浮动.即添加clearfixcss 标签再设置一个版心wrapper css ...
前端网页项目-学成在线案例
典型的企业级网站目的是为了整体感知企业级网站布局流程,复习以前知识准备素材和工具: 学成在线PSD源文件开发工具=PS(切图)/cutterman插件+vscode(代码)+chrome(测试) ...
学成在线案例——黑马程序员pink老师\思路讲解\完整源代码
本文为跟随B站黑马程序员pink老师学习CSS时所写,文章讲解了学成在线首页的制作思路,并贴出了源代码,作为学习笔记分享给大家如有错误,欢迎指出.如有侵权,联系删除文章目录 1. 案例准备工作 2 ...
学成在线案例素材及代码
头部标签顶部一行案例分五个盒子: 顶部居中header大盒子,学成在线图片logo盒子,导航栏nav盒子, 搜索栏search盒子,用户user盒子 <div class="head ...

Day07——PS相关操作、学成在线案例