文丨雷诺
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 检查代码错误
将敲好的代码链接复制到谷歌浏览器中,通过开发者工具去检查。哪些代码未实现,就要从中寻找出原因,在实践纠错过程中一点点理解代码的逻辑思维。抱着想要达到不同效果的心态,每个人的代码逻辑似乎各不相同,经过老师的一一指导,最终呈现的效果令人满意。
我们的作品
领取专属 10元无门槛券
私享最新 技术干货