高校网页设计课程:如何给新生讲解网页设计

2013-12-02 20:19:22  来源:伯乐在线 

网页制作Webjx文章简介:为高校新学生讲解网页设计。

互联网处在快速变革期。网页前端开发深受近年来不断改变的编码技巧和手段的影响。在2003年,一个合格的网页前端开发者需要了解HTML和CSS,他们也可能会一点Javascript(有可能是从别的地方复制粘贴来的)。他们所编写的网站会在桌面电脑上供人浏览。

但是2013年情况不一样了!现在,一个合格的前端开发者必须精通HTML、CSS、Javascript、jQuery,CSS预处理器,以及诸如响应式设计之类的新技术,他们还要考虑首先为移动端设计页面,各种设备查看网站时的情况。

既然网页前端开发这一行业已然改变,高等教育体系需要对讲一些基本的网页设计课程。问题是,如何教那些连HTML和CSS都不知道的学生, 好让他们以独立于设备的观念,使用响应式设计和移动端优先的原则来设计构造网站呢?

我已经在许多学术和商业的环境下教网页设计课程13年,也提出了一些在网页设计开发过程中,如何讲最基础的两项知识(图形设计以及HTML和CSS技术,译者注)的想法。关于这些想法的讨论十分重要, 因为讲解网页设计与开发的资源十分有限。由于时间紧迫,互联网发展迅速,那种每年一个个访问那些课程,用最新的材料更新课程的做法更加难以实施。

改善全职教授和兼职教员的合作有助于增强学生们的学习体验

兼职教员,是那些有着一份全职工作,并且兼职讲其他课程的教员。他们通常能制作专业的网站,同时也能有能跟上行业最新趋势和技术的资源。然而,缺少了接触宝贵教学法材料的便捷途径,兼职教员很难找到适合学生们消化吸收这些前沿资料的呈现方式。

同时,全职教师和教授们做的网站通常不会很专业(或者根本就不会做网站),他们需要满足工作时的其他需求,很难抽出时间跟上新趋势、新技术的发展。与兼职教员不同,这些教师教授对教学方法有很深入的研究,在网页设计的课程中,什么样的教学能起作用,什么样的教学不起作用,他们了解得一清二楚。兼职教员通常晚上或者周末教学,而全职教师们常常在白天上课,所以两个群体很少有交集。增进全职教师和兼职教员之间的合作,是增强学生体验, 提高教学质量的关键之一。两种教员都会为高等教育带来互补的价值和技能。

在这篇文章中,我主要关注两项课程:图形设计和HTML、CSS。其他的概念,像是网站规划、移动版优先原则、信息结构、可用性、以用户为中心的设计、Javascript和jQuery、内容管理系统(CMS)、都是很重要的,都可以考虑设为课程涵盖的范围。然而,这些议题通常都在高校的其他课程中有所涉及,所以这里并不会提到上述内容。

创造出设计

在大多数学校的网页设计课程中,学生们会上一堂课,学习使用Photoshop或者Fireworks,画出一张简单的网站布局图。学生们会从现有网站的截图开始,把内容和图片换成自己的部分,或者让一切从头开始。

这项课程的理念是非常明智的。一旦学生们掌握了使用软件的基本方法,课程将会激发对于可用性、色彩、布局、字体、页面留白、图片质量和位置等知识的讨论,而暂时不涉及代码的部分。这种做法能让学生们在脑海中形成网页的画面,无需过多地关注网页代码是怎么编写出来的。在学生们真正开始编写网页的时候,他们就可以在写一行代码之前弄明白自己想要的是什么了。

让学生们在接触代码之前先形成网页的概念是十分重要的

在课程中,常有学生对于(元素内容)超出画布以后的行为感到困惑。如果只设计了960像素宽的内容,那么当显示器为1200像素宽的时候,页面会发生什么呢?通常情况下,超出的部分会填充为背景色或者填充为重复的图案。学生们却很少问到显示区域宽度小于960像素后发生的事情。

在问及较窄屏幕的情况时,大多数学生会指出页面底部会出现横向滚动条,网站访客需要拓宽浏览器宽度才能看得到完整的页面。他们(这个时候)并不会考虑按钮在触屏设备上会不会很不好操作,文字大小在不同屏幕的显示屏上是否会有很大的变动。这样的教学方式倒是可以引导学生思考这些问题。

许多关注于响应式设计的工作室,不会去使用像在课上设计出的那种设计图,也不把这种图作为开发过程中的一部分。相反,他们更倾向使用基于HTML和CSS的设计图来展示客户端所看到的网站外观。那为什么还要向学生们讲图像式的设计图呢?

原因是,在开发过程的这个阶段,学生们不一定十分了解HTML和CSS,极端情况下甚至一点也不了解。从设计图上拿掉代码的部分以后,学生们所关注的,是包括图形设计和用户体验之类的设计原则。一旦他们学会了HTML和CSS以后,他们就再也不会使用图像式的设计图了。在学习基于图像来设计网页效果的过程中,他们学会了使用Photoshop/Fireworks,了解了使用这种设计环境的优点和缺点——这也是很有益的经验。

下面是一些可以布置给学生的任务,让他们可以为设备独立的设计工作做好准备:

设计一个12等分栏的页面

这项任务是讲解网格系统及其工作原理的最佳时机。让学生们基于网格设计布局能展示学生们对于这种设计的理解。

展示不同尺寸的设计

一个960像素宽的页面,在1200像素宽的时候会是什么样子的?320像素宽呢?767像素宽呢?让学生们在设计中使用同样的内容,在不同屏幕尺寸的环境下安排不同的布局。确保问到了“过渡”的问题——从767像素宽缩小到320像素宽的时候,布局又会有怎样的改变呢?

问一些图片的问题

顶部的大图片在从767像素宽拉伸到960像素的时候,如何保持同样漂亮的观感呢?屏幕尺寸在767像素和960像素之间的时候,图片又会发生什么呢?

鼓励学生思考触摸屏的行为

在屏幕尺寸较小的时候这一点尤为重要,并且现在桌面电脑和笔记本电脑也在逐渐地触摸化。这里可以鼓励学生思考适合手指粗壮人士的情况。

共3页: 上一页 1 [2] [3] 下一页
更多