Close Banner

响应式网站设计基础(中/英)

在任何设备上提供极佳体验

中级

大约 2 个礼拜

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

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

开始免费课程

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

大约 2 个礼拜

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

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

课程概述

在这门课程里,你将与 Google 的 Pete LePage 一起学习响应式设计的基础知识!你将创建自己的响应式网页,并且可以在任何设备上正常显示,无论是手机、平板电脑还是桌面设备或任何其他设备。

首先,你将学习响应式网站需要具备什么条件,以及一些适用于各种设备的常见响应式设计模式。然后,你将学习如何使用视口标记和 CSS 媒体查询创建自己的响应式布局。在此期间,你将学习添加大型和小型断点,并优化文本以便于阅读。此课程提供中文版本。

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

为什么学习这门课程?

人们浏览网络的方式瞬息变化——越来越少的用户会坐在大型显示器前用键盘和鼠标访问网络了。更多情况下,人们使用手机、平板电脑、穿戴式设备、电视等设备浏览网络。将网站设计成响应式网站后,无论用户使用的是何种设备,网站都能正常显示。

在整个课程中,你将创建一个网站,可以在手机、平板电脑和桌面显示屏上正常显示。

先修要求

你应该会阅读和编写 HTML 及 CSS。同时,还会使用浏览器开发者工具(我们使用的是 Google Chrome,但其他现代浏览器的开发者工具也足以完成这门课程里的所有任务)检查和修改网站。

如果你不熟悉 HTML 和 CSS,或者需要复习,请学习我们的HTML 和 CSS 入门课程。

对于这门课程,你不需要编写 JavaScript 代码。

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

你将学习什么内容?

项目

搭建作品集网站

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

学习计划

概览

这门课程由 5 节课组成。第一节课会概述响应式设计,并介绍一种方式来帮助你从桌面优先设计思路转变成响应式设计。第 2、3、4、5 节课将介绍重要的响应式设计理论概念,并且会布置大量的练习,帮助你运用所学的知识。

第 1 课:为什么要响应式

什么是响应式网络设计,为何重要?我们的设计应面向何种设备?如何充分利用每种设备的特性向用户提供绝佳的体验?你还需要准备好开发环境。

涉及内容:

  • 什么是响应式设计?
  • 为什么响应式设计适用于任何设备?
  • 在浏览器中进行远程调试和模拟

第 2 节课:从小屏幕开始

最佳开始方式是从小屏幕起步,然后逐步扩大。在这节课里,我们将介绍让网站在小屏幕上实现最佳效果的关键组件,包括设置视口、添加内容并根据视口调整内容大小。你将开始构建家乡网站项目,确保该网站在小屏幕上能完美呈现。

涉及内容:

  • 为什么从小屏幕开始,然后逐步扩展到大屏幕?
  • 什么是视窗(viewport)?
  • 根据视窗调整内容大小
    • 避免使用固定大小的内容
  • 什么是触摸对象,为何触摸对象要大

第 3 课:逐步扩大

针对小屏幕优化网页后,现在该思考下如何在大屏幕上正常显示这些网页了。你将学习如何使用 CSS 媒体查询添加断点,从而根据屏幕尺寸或其他设备特性更改布局。

涉及内容:

  • CSS 媒体查询
  • 什么是断点,如何选择断点
  • 使用CSS Flexbox 修改布局

第 4 课:常见响应式模式

现在你已经掌握了响应式设计基本知识,将学习各大网站使用的一些常见布局设计模式,并将这些模式运用到实践中,使用这节课介绍的模式为平板电脑和桌面设备布局创建断点。

涉及内容:

  • 最灵活的模式
  • 列内容往下排模式
  • 布局切换模式
  • 屏幕以外的空间利用模式

第 5 课:优化

学习小型断点策略,了解如何调整元素的外边距和内边距,并增大字体大小,使其在特定布局中看起来更自然。你还将学习处理表格和实现最佳文本显示效果的策略。学完这节课后,你将最后一次改进家乡网站,添加更多断点,使网站体验更出色。

涉及内容:

  • 小型断点
  • 优化文本布局
    • 字体大小
    • 最佳行长
  • 响应式表格,以及处理这些表格的策略

讲师与合作伙伴

Cameron Pittman

Cameron Pittman

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

Pete LePage

Pete LePage

Pete 是 Google 的一名技术推广工程师,负责协助 Web 开发人员,使他们的工作更容易。在 Web 基础和 Google Web 开发者视频等项目中,他主要负责确保开发人员获得他们所需的工具与技能,来建立响应性高的网站与应用及打造出众的用户体验。

官方微信公众号二维码

优达学城(Udacity)微信