0 《页面制作》课程学习指南

0.1 微专业介绍

WEB前端

WEB系统:server,client(客户端,一般为浏览器),跑在浏览器中的内容就是用WEB前端技术开发的。UI,user interface。

前端发展史

  • web1.0 以内容网页为主(官网)
  • web2.0 AJAX 1998年出现,真正广泛接受,在2005年,googlemap, gmail等出现,UI和一般应用没有太大区别。
  • web3.0 出现:Html5 04、05年;熟知:10年乔布斯的对于flash思考的文章;兴起:基于Html5应用的出现。

WEB系统协作流程

策划-交互-视觉-前端-后端-测试
现在一般视觉、前端、后端一起进行。

前端工程师工作职责

把视觉稿和交互稿通过前端开发实现为UI。交互稿通过线框图反映系统的信息架构和流程,主要包含逻辑。视觉稿,即设计,长成什么样子,空间、配色、图片、图标等等。
把视觉稿转化为UI称为页面制作。
把交互稿转化为UI称为页面逻辑开发。

技能要求

页面制作:PS, HTML, CSS。PS切图,HTML实现页面结构,CSS实现样式。
页面逻辑开发:Javascript, DOM编程。

课程设计

页面制作:PS,HTML,CSS
Javascript程序设计:Javascript
DOM编程艺术:DOM
页面架构和产品前端架构:培养前端工程师而不是程序猿

课程体系

Html入门和CSS基础到页面制作,Javascript入门到Javaccrip程序设计;
页面制作到页面架构,页面制作和Javascript程序设计到DOM编程艺术;
页面架构和DOM编程艺术到产品前端架构。

1 Photoshop切图

1.1 工具、面板、视图

1.1.1 什么是切图

由设计稿,一般是psd文件,作素材切出,产出物为png、jpg等文件。

1.1.2 为什么要切图

给网页提供图片素材。

  • Html: img
  • CSS: background

1.1.3 如何切图

  • 使用PS工具
  • 使用背景图
  • 图片合并方案
  • 浏览器兼容

1.1.4 PS首选项设置

标尺、文字,像素 px

1.1.5 面板

工具、选项、信息F8、图层F7、历史记录
保存工作区

1.1.6 切图常用工具

移动、矩形选框、魔棒、裁剪+切片、缩放、取色器

1.1.7 辅助视图

视图菜单下开启:

  • 对齐
  • 标尺Ctrl+R
  • 显示-参考线Ctrl+;
  • 注意显示额外内容Ctrl+H

1.2 测量、取色

1.2.1 获取信息

  • 尺寸信息 width: 200px; 测量
  • 颜色信息 color: #ffcc00; 取色

1.2.2 测量

所有数字都要测量

  • 宽度、高度
  • 内边距、外边距
  • 边框
  • 定位
  • 文字大小
  • 行高
  • 背景位置

矩形选框工具&信息面板
测量时尽可能放大

添加到选区:shift;从选区减去:alt;与选区交叉:shift+alt。

1.2.3 取色

所有颜色都要取色

  • 边框色
  • 背景色
  • 文字色

拾色器&吸管工具

取色工具巧用:确定背景色是否是纯色
魔棒工具:确定是否是线性渐变

1.3 切图

切图及切图的各种操作:隐藏文字(独立图层和非独立图层的不同操作方法)、png8和png24格式的切图方式、可平铺背景的切图方式及活动页的切图方式

1.3.1 切图之前

哪些是需要切出来的?

修饰性的(一般用在background属性)

  • 图标、logo
  • 有特殊效果的按扭、文字等
  • 非纯色的背景

内容性的(一般用在img标签)

  • Banner、广告图片
  • 文章中的配图

内容性的从服务器端获取的话,只用img占位,不用切图。

切出来的图片,需要保存为哪种类型?

  • 内容性的一般存为jpg(一般也会做压缩)
  • 修饰性的一般存为png24(IE6不支持半透明)或png8

png24 & png8 都支持全透明,png24支持半透明,图片质量较高

1.3.2 切图

隐藏文字只留背景
若文字为独立图层,隐藏文字图层;
若文字和背景合并,平铺背景覆盖文字:矩形选框工具,自由变换,当背景复杂时使用移动工具+alt

保存为png24:

  • 移动工具选中所需图层(按Ctrl多选)
  • 右键合并图层(Ctrl+E)
  • 再右键复制图层到新文件或直接拖至已有文件(新建:Ctrl+N)

保存为png8:
带背景切:

  • 合并可见图层(shift+ctrl+E)
  • 矩形选框工具选择内容
  • 魔棒工具去除多余部分:从选区中减去,按alt

可平铺背景的切图

  • 用矩形选框工具选取一块区域
  • 复制粘贴到新文件中,平铺文件充满文件的宽x或高y。

1.3.3 切片工具

适用于可以一刀切的活动页

  • 拉参考线
  • 选择切片工具
  • 点击“基于参考线的切片”按扭
  • 保存(全选切片,统一设置存储格式)

1.4 保存

1.4.1 存储所需内容

  • Ctrl+C Ctrl+N Ctrl+V
    or拖动内容至新文件
  • 存储为WEB所用格式(alt+shift+ctrl+s)

1.4.2 保存类型一

当图片色彩丰富且无透明要求时
建议保存为JPG格式并选择合适的品质。80

1.4.3 保存类型二

当图片色彩不太丰富时无论有无透明要求
请保存为PNG8格式
杂边:无;扩散选为无仿色;颜色:256。

1.4.4 保存类型三

当图片有半透明要求
请保存为PNG24格式

1.4.5 保存类型四

为保证图片质量
保留一份PSD,在PSD上进行修改
源文件,有利于后期维护,不会丢失信息

1.5 修改、维护

1.5.1 修改与维护 一

要继续放更多的图片?
更改画布大小,注意定位

1.5.2 修改与维护 二

移动图标

  • 若图标为独立图层,移动工具
  • 若图标为非独立图层,选区、移动工具

1.5.3 修改与维护 三

要减小画布到指定区域

  • 选定选区
  • 裁剪

注意事项:
PNG8默认颜色是索引颜色,为避免丢失颜色信息,修改为RGB颜色模式:图像-模式。

1.6 图片优化与合并

如何在代码中使用我们切出的图片呢

1.6.1 使用背景图

使用背景图代码

1.6.2 图片合并方案

Sprite拼图:把多个图片如几个图标放到一个图当中
Sprite拼图好处:
减少网络请求,提升网页加载速度

1.6.3 图片优化合并

大小和质量

  • 平衡与取舍
  • 压缩工具:
    无损 Minimage
    有损 TinyPng

合并:

  • 排列
    图片之间必须保留空隙
    排列方式:横向与纵向
  • 分类
    把同属于一个模块的图片进行合并
    把大小相近的图片进行合并
    把色彩相近的图片进行合并
    综合以上方式合并

合并推荐

  • 只本页用到的图片合并
  • 有状态的图标合并
    比如鼠标移过状态变化的图标

1.6.4 浏览器兼容方案

  • IE6不支持PNG24半透明
    存2份:
    sprite.png 24
    sprite_ie.png 8
  • CSS3&切图