设计高手与理工学霸合体！这样的 workshop 你见过吗？

文丨雷诺

2015级视觉传达设计专业（中德合作办学项目）学生

本学期 中德项目开设了网页开发基础 workshop

它让我们这些对代码一无所知的设计专业学生

仿佛“打开了新世界的大门”

从程序小白到制作第一个属于自己的网页

6周时间 我们这样度过

第一次了解到，打开一个网页需要这些步骤...

1

输入链接

2

域名解析：把链接解析成对应的IP地址

例

域名：北京师范大学珠海分校

IP地址：珠海市香洲区唐家湾镇金凤路18号

3

建立TCP连接

浏览器访问对方服务器测试信号是否正常

试探发送链接请求发送正式请求

4

服务器响应HTTP请求

5

浏览器解析HTML代码生成网页

在此步骤中，老师简单介绍了编程的操作原理及HTML, CSS 等编程语言。编程语言就好比给骨架结构穿上衣服，能够让代码活起来，有他们的独立的行为动作。经过老师深入浅出的讲解，大家还明白了怎样用开发者工具去检查已有的高端网页代码，去学习他们所用到的逻辑思维。

大家耳熟能详的错误代码，原来是这些意思...

404 NOT FOUND

浏览器不能找到你所要求的文件

导致访问请求失败

例：学校每学期抢课时间，服务器流量过大

导致崩溃时可能出现 404 not found

500 SERVER ERROR

服务器错误

（对方网页程序设计师程序BUG了）

例：鹿晗和关晓彤宣布恋人关系，新浪微博

后台崩溃了，好长一段时间之后才恢复

在上手练习之前，老师特别讲解了一些常用代码让我们记住，后面的实践环节就比较得心应手了。

最关键，最令人期待的环节——制作网页

Step 1 剖析网页结构

通过谷歌浏览器打开想要做出的示例效果，使用开发者工具选取元素，再查询代码，理解其基础结构，最后使用已学到的常见代码去实现。整个过程中，结构逻辑贯穿始终。

Step 2 动画制作

老师指导我们运用代码实现鼠标悬停、动画移动缩放等常见的动画效果。

Step 3 检查代码错误

将敲好的代码链接复制到谷歌浏览器中，通过开发者工具去检查。哪些代码未实现，就要从中寻找出原因，在实践纠错过程中一点点理解代码的逻辑思维。抱着想要达到不同效果的心态，每个人的代码逻辑似乎各不相同，经过老师的一一指导，最终呈现的效果令人满意。

我们的作品