网页版面布局设计教学之我见

2016-10-20 08:10刘艳秋
中学教学参考·理科版 2016年7期
关键词:色彩搭配

刘艳秋

[摘 要]在网页设计与制作课程中,网页的版面布局设计是至关重要的一个方面,要设计网页版面,确立主题是设计之本,还要讲究布局的形式和色彩的搭配。

[关键词]确立主题 布局形式 色彩搭配 版面布局

[中图分类号] G71 [文献标识码] A [文章编号] 16746058(2016)210123

网页设计与制作课程中,网页的版面布局设计是至关重要的一个方面,它关系到一个网页在欣赏者第一眼看到时,能否合“眼缘”,能否留下深刻的印象和驻足的欲望。针对页面的版面布局设计,结合实践应用,笔者有了一些自己的心得和见解,从以下几个方面做一个简单的总结。

一、网站主题的确立是设计之本

一个网站最终要设计成什么样子,主要还是由网站的主题来决定的,主题就是网站的灵魂,也是网站设计的第一步,只有主题明确了,设计者才能围绕这个主题去打开思路,寻找设计灵感。

二、版面布局的形式

在确立了网站主题之后,网站的设计也就有了大概的风格和方向了,接下来要做的就是设计网页的版面。从理论上来说,版面布局的方法不拘一格,没有固定的方式和方法,即使同样的主题同样的素材,不同的人根据各自的理解和解读可以设计制作出不同风格的页面效果来。但不管是哪种布局方法,大概不外乎以下几类。

一种是按頁面的区域分布划分,可以分为“T”形、“口”型、“三”型等几种形式。从这几个形象的字面表达上,我们不难想象出分别是一种什么样的布局形式。

一种常见的是对称样式的,当然所谓的对称并不是一对一的绝对对称,那样看起来会比较呆板,可以通过上下或左右结构划分以及色彩的合理搭配形成一种对称的效果。

还有一种是现在比较常用的所谓“豪华”型版面形式,首页设计成一个比较漂亮的海报或者是制作成优美的flash影片。这样的版型设计在广告及宣传类型的网页中比较常见,突出特点是制作比较新颖,画面漂亮,视觉冲击比较强。

当然,要做出一个完整漂亮的网页,靠单一的版面布局样式是不够的,往往是几种样式的综合运用。在实践教学过程中,学生大多比较喜欢第三种样式的网页,但也只是作为欣赏之用,要做出这么有冲击力的效果,不光需要时间还需要有一定的专业功底,经常是几种工具软件齐上阵做出来的。

三、网页版面的色彩搭配

协调,是网页版面色彩搭配的基本原则,既不能太单一,也不要搞得太花哨,把整个页面弄得像个调色板一样,要合理搭配,达到“总体协调,局部对比”的效果。在色彩的运用和搭配上,学生得具备一定的审美观,懂得色彩的一些基础知识。对于色彩在设计中的搭配技巧,则需要通过不断的实践以及经验的积累慢慢悟出来。这种领悟不是靠讲解理论就能够懂得的,很多来源于生活。笔者在讲课过程中曾经举过这样一个例子:假设我们要分别制作一个清明节、一个中秋节、一个国庆节的网页,让学生自己选择以上三个节日网站的主色调。学生通过讨论之后最终制定了几种方案,清明节的主色调选用灰色,通过有点哀伤的灰色而不是太沉重的黑色,来表达这个节日人们对先人的怀念和哀悼之情;用金黄色来烘托中秋节家人团聚时和和美美的温暖氛围;而国庆节他们选择用热烈的大红色调来表达全国人民举国同庆的壮观和庄严。像这些不能单纯地靠理论知识去灌输,而是要通过日常生活中所见所得的引导,让学生自己去领悟和体会。

四、网页版面布局表格嵌套的问题

页面的版面设计方法比较常用的有表格层、框架、模板等。最简单也是最基本的方法就是表格布局法。在实践教学中,这种方法因为简单,界面清晰,学生接受起来比较容易,也多数用这种方法做页面。但就是这种简单的方法在设计过程中也会遇到一些小问题。

1.插入表格及表格的嵌套。在页面总体布局的时候,我们一般用的是直接插入固定宽度的一个表格,当然宽度由页面的宽度来决定。而页面内部的一些小的分区域,一般用嵌套表格,也就是在表格内再套表格的方式,且是用百分比的形式,这样嵌套的表格会自动去适应外部表格的变化。

2.表格嵌套中的小问题。开始的时候学生不理解为什么要用百分比的形式嵌套表格,笔者结合“青岛西海岸旅游网站”的主页设计进行了讲解。在制作页面的导航条时,直接用插入固定宽度的表格,而不是嵌套表格。因为导航项目并不一定都是字数一样的,在输入的过程中,由于宽度不统一,表格会自动变宽,而且调整其中的一个单元格的宽度时,会影响到其他的单元格,所以控制起来比较麻烦,很难统一导航内容的宽度,做出来的导航条很不整齐,影响整体美观。而利用百分比的形式再嵌套一个表格之后,这个嵌套的表格会自动适应原来上一层表格的宽度,明显的效果是制作出来的导航条宽度是平均分配的,看起来比较规整,比原来直接插入一个表格的效果好很多。

通过以上几个方面的设计及实现,一个基本的网页版面的框架已经出来雏形了,接下来主要的工作就是往这个框架里面添加网页元素,逐步丰富网页内容。那将会涉及更深更广的内容,还需要学生不断去学习和探索。

(责任编辑 陈剑平)

猜你喜欢
色彩搭配
基于情感化的亲子装创意研究
色彩搭配在儿童服装设计中的应用研究
浅谈艺术设计中UI界面设计及应用
色彩搭配对人物形象设计的影响论述
分析包装色彩搭配对平面设计的影响