响应式图片(中/英)

文件更小、加载速度更快

中级

大约 2 个礼拜

6小时每周 (按照自己的节奏)

由以下企业参与制作:
加入成千上万的全球学员

开始免费课程

加入课程
免费
可享受
课程视频
实战练习与参考项目指导
中级

大约 2 个礼拜

6小时每周 (按照自己的节奏)

由以下企业参与制作:
加入成千上万的全球学员
观看响应式图片(中/英)课程介绍
观看视频

课程概述

你知道吗?加载网页时,平均 60% 以上的流量都来加载图片。

在这门课程里,你将学习如何在现代网络环境中使用图片,以便你的图片在任何设备上都看起来效果更棒,并且快速加载。

在学习期间,你将掌握各种技能和技巧,能够轻松地将响应式图片整合到你的开发流程中。学完这门课程后,你将能够开发可以适应不同的视口尺寸及使用场景的图片。此课程提供中文版本。

喜欢这门课程?你可以继续学习“前端开发工程师”纳米学位!

为什么学习这门课程?

快速加载和自适应内容可以提高转化率。网络上的图片远不止 <img> 这么简单。srcset 等属性、使用 CSS 的标记技巧、字体和内嵌图片以及全新的 <picture> 元素现在可以帮助你为用户打造最棒的体验。这门课程将帮助你制作最高品质的图片,同时图片大小非常小。

先修要求

你应该掌握简单的 HTML、CSS 和 JavaScript。具有图片制作和处理工具使用经验更佳。

查看使用优达学城的技术要求

你将学习什么内容?

项目

搭建作品集网站

你将使用 HTML 和 CSS 将设计原型变为一个真正的网页。你将开发一个响应式网页,显示你在前端开发课程中将完成的每个实战项目的图像、描述和链接。

学习计划

第 1 课:准备工作

在开始制作自适应图片之前,你需要先调试移动设备。这节课将帮助你熟悉开发者工具和移动调试功能。

第 2 课:单位、格式和环境

如果没有衡量标准,何来优化?在这节课里,你将对比网络上的各种图片,并使用不同的单位来衡量这些图片。

同时,你还将设置开发环境,以便响应式图片完全整合到你的工作流程中。

学完这节课后,你将开始构建响应式博客项目,并有机会将学到的响应式图片知识运用到实践中!

涉及内容:

  • 图片大小
  • 文件类型
  • 自动化工具

第 3 课:带标记的图片

并非所有图片都必须是 .JPG 或 .PNG 格式。这节课将学习使用标记(例如 CSS)和图标字体来创建响应式图像。虽然标记非常强大,因为它们本身就是响应式的,但是经常体积极小,比传统图片体积要小得多!

学完这节课后,你将用标记技巧来替代外部图片,并利用字体图标向响应式博客项目中添加社交媒体图标!

涉及内容

  • CSS 技巧
  • 内连图片
  • Unicode
  • 图标字体

第 4 节课:完全响应式

最后精彩时刻到了!在这节课里,你将使用新的 <picture> 元素使你的图片完全自适应!在此期间,你将用到 srcset 和 sizes 属性。同时还将学习为什么 alt 属性对于视力受损的用户很重要。

学完这节课后,你将通过实施 <picture> 在各种屏幕宽度和像素比的设备上清晰展示的图片,创建一个完全自适应的博客项目。

涉及内容:

  • <picture>
  • sizes 属性
  • srcset 属性
  • alt 属性

讲师与合作伙伴

Cameron Pittman

Cameron Pittman

Cameron 是一位充满激情的教育工作者和程序员,非常热爱网页开发。他专门为优达学城创建编程类课程。来此之前,他曾是西雅图创业公司 LearnBIG 的内容主管和网页开发者。他在田纳西州纳什维尔的一所高中教了四年课程,主要教物理和化学。在此期间,他率先利用视频游戏“传送门 2 (Portal 2)”来讲述物理知识。Cameron 荣获了范德堡大学物理和天文学本科学位,并获得贝尔蒙特大学的教育学硕士学位。

Sam Dutton

Sam Dutton

Sam Dutton 是 Google 的一名开发大使。他还每月在 medianews.me 上发布媒体技术简报,并负责维护 simpl.info,后者主要提供最简单的 HTML、CSS 和 JavaScript 示例。Sam 出生在南澳大利亚,在悉尼上的大学,从 1986 年起一直定居在伦敦。他设计并编写了大量的网站,包括之前版本的 itn.co.ukdeccaclassics.com

官方微信公众号二维码

优达学城(Udacity)微信