关于《网页设计》这门课

欢迎

你现在看到的是湖南大学设计艺术学院《网页设计》课程教学小站，站点主要收录老师讲课的课件和其他学习资源，主要内容如下（持续更新中）：

• HTML基本介绍(1小时)
• CSS基本介绍（1小时）
• 选择器（2小时）
• 背景与图像（1小时）
• 字体（1小时）
• display模式（1小时）
• 尺寸控制（1小时）
• 定位与堆叠（2小时）
• 按钮（2小时）
• 分栏与布局（2小时）
• 响应式设计与media query（2小时）
• JavaScript与jQuery简介（2小时）
• 动态效果（2小时）
• 翻转卡片（2小时）
• 鼠标跟随（2小时）
• 标签页（2小时）
• 下拉菜单（2小时）
• 走马灯（2小时）
• 折叠列表（2小时）
• icon font（2小时）

为了更好地学习和分享，任何人都可以自由访问这里的学习资源。作为一个简单的教学小站，内容疏漏之处在所难免，如果你发现这里有任何错误的地方，请联系袁翔老师修改。此外，为了保证网页浏览体验，推荐使用Chrome浏览器。

学习这门课程能做什么

如果把网站的设计工作分为“前端”和“后端”两个部分，那么本课程主要针对“前端”。

前端关注用户与网站信息的交互方式，比如信息数据如何呈现、用户如何导航、如何操作等等。前端设计会考虑大量用户因素，通常是一个“以用户为中心”的设计过程。

后端更多地考虑网络服务器通信的技术解决方案，比如如何接受和反馈请求，如何优化数据的存储、查询等等。

一般来说，前端工作主要由交互设计师、视觉设计师和前端开发人员合作完成。

• 交互设计师：负责网站的信息架构，以及每个页面上各种元素的交互行为（UI Pattern）
• 视觉设计师：负责图形、颜色、排版、动态效果等
• 前端开发人员：负责编写代码与脚本，利用HTML，CSS，JavaScript等将页面按设计要求实现出来。

在许多IT企业中，前端设计开发会被划分为交互设计、视觉设计和前端开发三类岗位，在某些企业中分工甚至会更细致。但在本课程中，你将被要求同时扮演这三类角色，独自应对三种不同的工作。之所以本课程要这样做，是因为不论你未来打算专注于哪个岗位，要想把工作做好，都必须对其他的工作非常熟悉！

这门课教什么

这门课将教你如何从零开始设计开发交互式网页。需要说明的是，尽管这门课的名字是《网页设计》，但从这门课中学到的知识和技能并不局限于网页。Web作为一个开放的、标准的平台，已经被广泛地接入到各类APP、消费电子设备或互动展示装置当中。这些应用或产品依赖HTML5来渲染自身的用户图形界面。更重要的是，许多设计师所使用的交互原型设计工具也是基于HTML5的。因此，本课的内容其实是从事交互设计与图形界面设计等工作所必需掌握的技术基础。

课程主要包括三个大块：

• HTML标记语言，组成网页的基础骨架
• CSS层叠样式表，让网页变漂亮的秘方
• JavaScript脚本语言，用于为网页添加互动性

除此以外，课程还会重点讨论网页的布局设计，特别是“响应式设计”（Responsive Design）的应用与挑战。

这门课不会教你：

• 相关工具软件的每一个细节和使用技巧
• 如何画出漂亮的图标、组件或页面

准备哪些工具

在本课程的学习过程中，我们希望你能同时“扮演”交互设计、视觉设计和前端开发三个角色，这也意味着你可能会用到下列工具：

除此以外，你还需要一台笔记本电脑（请不要对机房的电脑抱有任何幻想）。

学习形式

Learning by doing!

课上老师会讲授和演示，课上课下均会安排大家动手实践。为了让大家更好的理解网页设计，本课的大部分课件都是以“网页形式”制作的（就像你们现在看到的这样）。

随着学习的深入，你可以自己动手修改网页的内容，这些课件就是你们的实验田。

课外学习资源

互联网是学习网页设计的首选!课堂排第二！

• http://www.w3school.com.cn/
• http://www.webplatform.org
• http://study.163.com/course/introduction.htm?courseId=171001#/courseDetail

希望大家能利用课外的时间到这些网站预习一下。