首页 > Web前端工程师 > 从PSD到HTML的PC端实战
从PSD到HTML的PC端实战
  • 从PSD到HTML的PC端实战

  • 主讲 : 小小小
  • 本课程以Studeon官网为例,讲解如何把PSD源文件转化成网页,让学员快速掌握切图的基本流程和方法。
  • ¥79.00 ¥129.00 ¥78.00
  • 立即购买 Pro会员免费学

    9人学习时长 : 7.7 小时有效期 : 180 天 有效期自支付成功后开始计算,到期后仍可观看课程视频和图文,但不再享受问答和作业批改服务。Pro用户可享受无视有效期权限,随时随意轻松看。单课购买用户需关注课程有效期,合理安排学习计划。

课程概览

切图是前端工程师需要掌握的基本技能。本课程以Studeon官网(http://demo.cssmoban.com/cssthemes3/cpts_181_ff/index.html)为例,真实模拟一线互联网公司,手把手教你从PSD源文件转化成HTML,并详细讲解了整个过程中可能遇到的问题和切图技巧。

适合人群

1.具备HTML+CSS基础
2.会简单使用Photoshop
3.适合刚入职或者需要项目经验的初中级前端工程师

学习收获

1.掌握如何把设计稿还原成网页
2.加深对HTML+ CSS的理解和运用
3.学会做一个项目的思路
4.掌握PS切图的基础技法
5.学会一些简单的页面效果

常见问题

Q:如果有问题,我去哪里咨询?
A:关于课程的任何问题,都可以点击“右下角”的在线客服,我们会有专人为您解答。

Q:『有效期』是什么?
A:『有效期』从订单支付成功后开始计算,到期后仍然可以观看课程视频和图文,但不再享受问答和作业批改等服务。

Q:VIP价格是什么?
A:购买过极客学院 VIP 会员的用户,可享受职业学院课程 VIP 价格,这个价格会比现价有一定的优惠。

Q: 有的章节的知识我已经会了,可以跳过吗?
A: 可以,整个课程采用自由学习方式,不设置每个课时的前后限制要求。

Q: 课程的视频提供下载么?
A: 我们的课程视频进行加密处理,暂时不支持下载。

从PSD到HTML的PC端实战

主讲:小小小

本课程以Studeon官网为例,讲解如何把PSD源文件转化成网页,让学员快速掌握切图的基本流程和方法。

第 1 部分 开门篇 45 分钟

第 1 节 课程简介 28 分钟
课程简介
开发流程
开发工具
第 2 节 Studeon官网分析 17 分钟
从设计角度分析
从前端角度分析

第 2 部分 Studeon官网Home页面 292 分钟

第 1 节 顶部header和banner区域搭建 76 分钟
header左边搭建
header剩余搭建
banner区域搭建
第 2 节 content区域搭建 150 分钟
content上部分搭建
content中间部分搭建
content下部分搭建
第 3 节 footer区域搭建 66 分钟
footer区域搭建(上)
footer区域搭建(中)
footer区域搭建(下)

第 3 部分 Studeon官网Protfolio页面 26 分钟

第 1 节 Protfolio页面搭建 26 分钟
Protfolio页面搭建

第 4 部分 Studeon官网Features页面 13 分钟

第 1 节 Features页面搭建 13 分钟
Features页面搭建

第 5 部分 Studeon官网Blog页面 60 分钟

第 1 节 Blog页面搭建 60 分钟
Blog页面左区域(上)
Blog页面左区域(中)
Blog页面左区域(下)
Blog页面右区域

第 6 部分 Studeon官网Contact页面 20 分钟

第 1 节 Contact页面搭建 20 分钟
Contact页面搭建

第 7 部分 课程总结 7 分钟

第 1 节 课程总结 7 分钟
课程总结
本课程源码
作业:重构一个Garage电商的Home页
重构一个Garage电商的Home页

学员服务

  • 作业批改
  • 有问必答

主讲老师

  • 小小小

    极客学院布道师

    国内早期IT讲师,从事Web前端工作多年,参与过流量达千万级别的大型项目,项目实战经验非常丰富,目前在某知名电商公司任职。