响应式网页设计

响应式网页设计

本课程是响应式网站开发与设计专项课程的一部分

位教师：Professor Matthew Yee-King

访问权限由 New York State Department of Labor 提供

88,084 人已注册

5个模块

深入了解一个主题并学习基础知识。

1,946 条评论

3 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

96%

大多数学生喜欢此课程

5个模块

深入了解一个主题并学习基础知识。

1,946 条评论

3 周完成

在 10 小时一周

灵活的计划

自行安排学习进度

96%

大多数学生喜欢此课程

您将获得的技能

要了解的详细信息

可分享的证书

添加到您的领英档案

作业

29 任务¹

AI 评分请参见免责声明

授课语言：英语（English）

了解顶级公司的员工如何掌握热门技能

了解关于 Coursera for Business 的更多信息

Petrobras, TATA, Danone, Capgemini, P&G 和 L'Oreal 的徽标

积累特定领域的专业知识

本课程是响应式网站开发与设计专项课程专项课程的一部分

在注册此课程时，您还会同时注册此专项课程。

向行业专家学习新概念
获得对主题或工具的基础理解
通过实践项目培养工作相关技能
获得可共享的职业证书

该课程共有5个模块

在本课程中，您将学习如何应用交互设计和人机交互的概念来设计和构建一个交互式的专业网站。您将学习如何使用响应式网格布局使网页设计适应不同的屏幕尺寸。您还将学习如何添加导航和其他设计元素，以及如何使用 JavaScript 对象和模板来分离数据和显示内容。

课程结束时，您将能够： 1.解释为什么用户需要知道他们在哪里、可以去哪里以及网页上有什么 2.创建网页的线框模型 3.识别网页的关键功能元素 4.使用 Bootstrap 组件实现网页设计 5.使用 JavaScript 数据结构（如数组和对象）定义网页中使用的数据 6.使用 Handlebars 模板库将数据转换为 HTML 7.使用 JavaScript 事件监听器为模板添加交互性在本课程中，您将完成： 1 个网站设计作业，完成时间约为 1 小时 1 个编程作业，完成时间约为 1 小时 4 个测验，每个测验完成时间约为 20 分钟多个练习测验，每个测验完成时间约为 5 分钟参加或完成本在线课程不会获得伦敦大学课程的学分。

在本课程中，您将学习如何应用交互设计和人机交互的概念来设计和构建一个交互式的专业网站。您将学习如何使用响应式网格布局使网页设计适应不同的屏幕尺寸。您还将学习如何添加导航和其他设计元素，以及如何使用 Java Script 对象和模板来分离数据和显示内容。

涵盖的内容

3篇阅读材料

欢迎来到 "响应式网页设计 "的第一个模块。在本模块结束时，你将能够理解可用性和用户体验的基本概念，并通过导航条告诉用户可以去哪里。此外，你还能通过有效的布局告诉用户这里有什么，并了解创建无障碍网站的高层次要求。希望你喜欢这个模块！

涵盖的内容

8个视频6篇阅读材料7个作业1次同伴评审

8个视频总计44分钟

概述 1分钟
可用性和用户体验 2分钟
你能去哪儿？ 6分钟
这里有什么？ 3分钟
无障碍环境 5分钟
设计指南 11分钟
设计实例 16分钟
摘要 0分钟

6篇阅读材料总计60分钟

讲座幻灯片 10分钟
本课的 URL 10分钟
本课的 URL 10分钟
讲座幻灯片 10分钟
本课的 URL 10分钟
讲座幻灯片 10分钟

7个作业总计184分钟

网页设计原则总结测验 30分钟
可用性和用户体验 30分钟
你能去哪儿？ 4分钟
这里有什么？ 30分钟
无障碍环境 30分钟
设计指南 30分钟
设计实例 30分钟

1次同伴评审总计120分钟

您最喜爱的网站的设计原则 120分钟

欢迎来到 "响应式网页设计 "的第二个模块。在本模块结束时，您将能够建立一个基本的 Bootstrap 网站，并使用标题和面包屑轨迹建立可折叠、响应式的 Bootstrap 导航栏，还能使用响应式网格建立多个布局。我们还将学习安装 Bootstrap 主题。请尽情享受！

涵盖的内容

9个视频7篇阅读材料8个作业1次同伴评审

9个视频总计67分钟

概述 1分钟
基本的 Bootstrap 设置 7分钟
你能去哪儿？ 7分钟
可折叠导航栏 9分钟
建设网站 13分钟
我在哪里？ 11分钟
响应式网格 15分钟
Bootstrap 主题 4分钟
摘要 1分钟

7篇阅读材料总计70分钟

本模块的代码 10分钟
本课的 URL 10分钟
基本 Bootstrap 启动代码（包括图像） 10分钟
本课的 URL 10分钟
本课的 URL 10分钟
本课的 URL 10分钟
本课的 URL 10分钟

8个作业总计240分钟

在代码中实现设计原则总结测验 30分钟
基本的 Bootstrap 设置 30分钟
你能去哪儿？ 30分钟
可折叠导航栏 30分钟
建设网站 30分钟
我在哪里？ 30分钟
响应式网格 30分钟
Bootstrap 主题 30分钟

1次同伴评审总计120分钟

使用导航栏 120分钟

欢迎来到 "响应式网页设计 "的第三个模块本模块结束时，您将能够将页面结构与页面内容分开，使用 JavaScript 对象，使用 Handlebars 实现 JavaScript 模板，并能够使用相同的模板显示不同的数据，以及使用不同的模板显示相同的数据。最后，我们将学习使用 Bootstrap 模版。希望您喜欢这个模块！

涵盖的内容

8个视频5篇阅读材料7个作业1次同伴评审

8个视频总计49分钟

概述 1分钟
分离结构和内容 7分钟
JavaScript 对象 7分钟
使用手柄的 JavaScript 模板 7分钟
将数据放入模板 6分钟
使用相同模板显示不同数据 8分钟
使用不同模板显示相同数据，使用 Bootstrap 模态 12分钟
摘要 1分钟

5篇阅读材料总计50分钟

该模块的 URL 10分钟
本课的 URL 10分钟
源代码 10分钟
源代码 10分钟
源代码 10分钟

7个作业总计210分钟

在网站摘要测验中添加内容 30分钟
分离结构和内容 30分钟
JavaScript 对象 30分钟
使用手柄的 JavaScript 模板 30分钟
将数据放入模板 30分钟
使用相同模板显示不同数据 30分钟
使用不同模板显示相同数据，使用 Bootstrap 模态 30分钟

1次同伴评审总计60分钟

编辑模板 60分钟

欢迎来到 "响应式网页设计 "的第四个模块。在本模块结束时，你将能够在数组中存储对象并用模板显示它们，还能从数组中动态显示单张图片。我们还将研究如何实现搜索功能，并通过使用复杂的数据结构，在不同模板之间进行切换。请尽情享受

涵盖的内容

8个视频4篇阅读材料7个作业1次同伴评审

8个视频总计60分钟

概述 1分钟
JavaScript 数组 5分钟
将对象存储在数组中并通过模板显示出来 6分钟
动态显示数组中的单个图像 8分钟
执行搜索功能 13分钟
完整图库的数据结构 7分钟
为画廊编写模板 7分钟
在图库中切换显示屏 13分钟

4篇阅读材料总计40分钟

本模块的源代码 10分钟
本课的 URL 10分钟
源代码 10分钟
画廊的源代码 10分钟

7个作业总计210分钟

构建全图库应用程序总结测验 30分钟
JavaScript 数组 30分钟
将对象存储在数组中并通过模板显示出来 30分钟
动态显示数组中的单个图像 30分钟
执行搜索功能 30分钟
完整图库的数据结构 30分钟
为画廊编写模板 30分钟

1次同伴评审总计60分钟

动物画廊 60分钟

获得职业证书

将此证书添加到您的 LinkedIn 个人资料、简历或履历中。在社交媒体和绩效考核中分享。

位教师

授课教师评分

(111个评价)

Professor Matthew Yee-King

University of London

24 门课程 433,795 名学生

Dr Kate Devlin

University of London

3 门课程 239,748 名学生

提供方

University of London

Goldsmiths, University of London

人们为什么选择 Coursera 来帮助自己实现职业发展

Felipe M.

自 2018开始学习的学生

''能够按照自己的速度和节奏学习课程是一次很棒的经历。只要符合自己的时间表和心情，我就可以学习。'

Jennifer J.

自 2020开始学习的学生

''我直接将从课程中学到的概念和技能应用到一个令人兴奋的新工作项目中。'

Larry W.

自 2021开始学习的学生

''如果我的大学不提供我需要的主题课程，Coursera 便是最好的去处之一。'

Chaitanya A.

''学习不仅仅是在工作中做的更好：它远不止于此。Coursera 让我无限制地学习。'

学生评论

5 stars
69.21%
4 stars
22.09%
3 stars
5.85%
2 stars
1.43%
1 star
1.38%

显示 3/1946 个

已于 Jan 13, 2017审阅

This course gave me the skill needed to create web pages with interaction and handlebars-based as well.It's a great course and a good well to improve everyone skills in web development.

已于 Nov 16, 2015审阅

Brilliant - would be even better if the grading can somehow be automated in addition to peer review. This way lazy submitters who finish before course completion can also get a grade.

已于 Jun 1, 2020审阅

This course went into a lot more detail on the javascript end with a look at arrays and handlebars.js which introduces templates. I enjoyed this module, it was suitably challenging.

查看更多评论