网页设计的要点十篇

发布时间:2024-04-26 06:37:15

网页设计的要点篇1

随着计算机技术的不断改革与创新,计算机课程教学不断的改革与发展。目前,大多数企业、个人单位都通过网站向外界宣传产品、优惠活动等,网站的开发就需要网页设计师来进行排版设计,网页设计的发展带动了高校的教育改革,不断的开设《网页设计与制作》这门课程,《网页设计与制作》是艺术院校计算机教学中实践操作性强、综合性较强的专业课程,其需要多门计算机学科知识综合起来,才能完成网页设计课程体系,如:photoshop、CorelDraw、HtmL语言、CSS、JavaScript语言,从而进行网页设计。

1艺术院校计算机课程教学现状分析

随着计算机互联网的发展,网络已普及到家家户户,艺术院校的学生对计算机基础知识也有了很大的提高,加强学生的计算机基础知识和计算机能力的培养,对艺术院校的教学具有重要作用。目前,艺术院校计算机课程教学仍然存在不足,虽然艺术院校的大部分专业开设了photoshop教学课程、CorelDraw课程、网页设计等课程,但是,艺术院校开设的专业只涉及网页设计的几门学科,如计算机图形图像专业,其开设了photoshop、CorelDraw、Flash等课程,却没有涉及到HtmL、JavaScript语言课程,课程教学的不足,容易导致学生的设计操作能力、专业能力不强,学生只能掌握基本的操作,而不能满足更高的操作水平。

2艺术院校计算机《网页设计》课程教学存在的不足

2.1网页设计教学缺乏知识的连贯性

对于艺术院校的学生,大多数都存在于被动的学习知识,而没有主动的练习操作,而《网页设计》这门课程是一门实践性强、操作能力强的学科,所涉及的内容知识也比较多,若老师只是单方面的进行教学,只对学生进行示范操作,或学生只是模仿操作练习,这样的教学方式不仅不能激发学生的学习兴趣,也不能培养学生的创造性。若教学的课程内容较为分散,老师没有对教学内容进行整理、没有整合知识的连贯性,学生则很难掌握知识要点。

2.2缺乏编程基础知识

《网页设计》这门课程不仅需要图形图像处理软件,也需要网页设计的后台编程软件,如:JavaScript语言、CSS,编程语言是一门复杂的知识,但与CorelDraw、Flash等设计软件的原理是一样的。对于动态网页的设计,其需要编程基础来实现,学生若不了解动态网页的设计、编程基础,则很难设计出具有美观、产品个性的网页界面。网页的设计理念需要实践操作能力来实现,实践操作技术也为网页设计提供了需求,但是,没有很好掌握动态网页设计基础知识,如新闻网站系统,其需要添加多行表格,从而对其添加内容,如果没有充分了解网站设计软件的基本功能,则很难实现添加多行表格的功能。

3基于网站数据库功能模块化的网页设计要点课程教学

网站数据库的实现主要是通过access数据库、aSp编程语言来实现的,同时也需要Dreamweaver、Flash、photoshop、Fireworks等软件来编排、设计,根据美观、人性化的界面设计及色彩搭配的美观,进行网页的设计。网站数据库主要实现新闻网站系统、公司产品展示网站系统、会员网站系统、访客留言系统网站等模块,通过学习aSp的工作环境、系统网站的实现动态流程,学生能很好的了解动态网页的设计原理和动态效果。

3.1网站数据库功能模块化的设计流程

网站数据库功能模块教学,是以网页界面设计为基础,进而更深层的网页设计教学,以Dreamweaver建立动态网页界面,通过access软件建立数据库的连接,从而实现动态功能的构建,例如:新闻网站系统的构建,如图1所示。

3.2网站数据库的网页设计在教学中的应用

网站数据库是基于aSp技术和access数据库建立的,由于aSp技术简单易学,不需要用CompiLe进行编译,直接在windows的记事本上就可以直接编辑,对学生来说,aSp技术的开发是一个很好的应用,学生无需安装任何插件,就可以使用任何浏览器浏览aSp生成的页面,并且也方便连接。而access数据库,对于网站的设计,有利于建立数据库的连接,其具有简单易学、易用、操作简单、数据接口灵活等功能,因此,学生可以通过学习access数据库,就可以逐步了解网页设计的基础知识,也很好的掌握数据库的连接与aSp技术的连贯性。通过学习网站数据库的设计,由于开发的软件简单易学,连贯性较强,不仅可以激发学生的学习热情,也能提高学生的实践操作能力,教师应注重知识的连贯性,积极引导学生进入教学情境中,从而提高网页设计课程教学质量。

3.3网站数据库实现新闻系统功能

要实现新闻网站系统的功能,需要根据其功能需求实现网站系统的设计,其一般包括前台和后台的管理,因此,在进行网页设计时,根据后台的需求,即后台实现新闻的、公告,新闻的修改、删除等。而新闻网站的前台,是指用户浏览的页面,即网页界面,前台需要实现用户能正常浏览网页的新闻信息、或资讯标题,因此,学生只需要把这些信息、需求进行规划设计,并合理进行排版,从而将新闻信息、业界动态的信息集中在一个管理系统的新闻网站应用程序中,以保证新闻系统的完美性和规范性。

4网站数据库功能模块化课程教学意义

网页设计教学是一门实践性强、操作能力强、综合性较强的学科,在教学过程中,应理论知识与实践相结合,在网页设计教学中,学生应多练习,多操作,熟悉各种编排、编程软件,从而达到网页设计教学的目的。第一,网站数据库功能模块化教学注重培养学生的实践操作能力,从而培养学生的职业能力,因此,教师应积极引导学生灵活运用知识,整理知识的连贯性,安排的教学内容应与社会发展需要结合,以社会需要为导向,科学合理化的整理教学内容,利用任务驱动的教学方式来加强学生对网页设计的学习,从而加强学生的实践操作能力。第二,网站数据库教学不仅培养学生的操作能力,也是多学科结合的教学方法,不仅培养学生的鉴赏能力和艺术性,也培养学生的应用能力和思考能力。通过有效结合艺术专业的审美优势和计算机语言技术优势,学生在进行网页设计教学中,学生能根据页面的艺术性进行设计,同时也会考虑界面的实用性和价值观,从而设计出具有创新、有价值的网页设计界面,多学科的教学方式,有利于提高学生的综合素质。第三,网站数据库模块化的网页设计教学也是艺术学院学生就业需求的导向,社会不仅需要专业人员,也需要综合能力较强的人才,通过学习网页设计,注重学生在操作过程中的学习情绪、学习态度、团队合作及协调沟通能力,从而对学生全面的进行考核。因此,进行网站数据库模块化的网页设计,为计算机基础课程教学增添了生机和活力,不仅锻炼了学生的操作能力和实践能力,也拉近了与社会人才需要的距离,达到了计算机基础课程的教学目标。

网页设计的要点篇2

网页设计能够综合文字、图片以及色彩等视觉元素将信息进行有效传递,在满足浏览者要求的同时能够创造出比较和谐的视觉效果,也可说视觉元素在网页设计中的运用具有非常重要的作用。本文分析了网页设计中视觉元素的作用并进一步研究了网页设计中视觉元素的运用策略。

关键词:

网页设计中;视觉元素;运用

随着近些年来互联网信息科技的发展,人们浏览网页的需求不断增加,而且对网页的要求也逐渐加大,为了改变人们的使用需求,网页在实际设计中需要逐步改变原有的风格,从而使网页在视觉表达效果上出现多样化特点。尤其是图像、文字以及色彩等视觉元素在网页设计中的运用,为网页注入了新的活力,使网页具有更加鲜明的特色,更加吸引人们的眼球,也使信息的传播更加快捷,成为信息传播的重要途径。但是在当前的网页设计中出现了网页质量参差不齐的情况,除了一些大型网站在社就上比较考究外,小型网站在设计上并不考究,甚至出现了视觉冲击,无法充分展现出网页的优势,而要优化网页设计离不开视觉元素,视觉元素不仅可以使网页设计更钾丰富多彩,而且使人们更加快捷的接收信息。因此也可以说视觉元素在网页设计中的运用具有非常重要的作用。

一、网页设计中视觉元素的作用

网页设计中的视觉元素主要包括图片、色彩以及文字等三大部分,主要是因为这三种元素都是人的眼睛能够直接接收到的元素,也正是由于视觉元素在网页设计中的融入,使网页设计更加的丰富多彩。视觉元素在网页设计中发挥着非常关键的作用,主要有以下几个方面:

1、视觉元素能够技法人们浏览网页的欲望

网页设计的诗视觉元素具有注视性等特点,这种特点的优势就是能够使网页设计更加受人们关注,这也是视觉元素中的基本特点,在网页设计中融入视觉元素就能够使人能更加快捷的获取与了解信息,使信息的更加明了,并使网页的内容更加丰富多彩,引起人们对网页的关注,激发人们想要去了解网页以及浏览网页的兴趣与欲望,从而实现网页设计的根本目的。

2、更好的适应外部环境的变化

网页设计中的视觉元素具有适应性特点,这也是网页设计中视觉元素的特色所在,正是由于视觉元素具有适应性,从而使网页更好的适应时展的特征,随着数字信息技术的改革与发展,给网页设计的环境带来了很大的改变,但是网页视觉元素是随着外界环境的变化而不断升级变化的,也只有在随和时展不断增加新的资料以及元素,才能够是网页更加的适应时代的发展,才能够获得更多的浏览量。

3、加深人们对网页的记忆

加深人们对网页的记忆主要是由于视觉元素中的注视性以及适应性共同作用形成的。视觉元素能够刺激人们的眼球,吸引人们去阅读网页中的内容,在阅读浏览过程中就会使人们对这些视觉元素加强记忆,同时视觉元素随着时代的不断变化发展又会有新的元素融入到视觉元素中,更进一步引起人们的关注,在这两种特点的共同作用下形成了视觉元素的记忆性特色,加深人们对网页的记忆。

二、网页设计中视觉元素的运用策略

1、文字的运用

文字是网页设计视觉元素中的基本元素,尤其是汉字是我国独特的视觉元素符号,可以表达出独特的信息,汉字在网页设计中占据很大部分比例,也使网页设计中的视觉质量有了很大程度的提升。在网页设计中为了增强汉字在网页中的有效性,在对汉字的运用中要去掉不必要的装饰,更加方便人们阅读,从而使网页的整体效果得到提升。文字在运用设计的过程中,要根据网站信息的内容以及特点出发考虑对文字进行设计,文字的设计风格要与实际的网站内容相符合不能够出现对立或者是脱节的情况,比如说:政府网站具有严肃大气的特点,这就需要在文字设计时利用文字的简洁大气的特征,而教育类网站在文字的使用中具有需要具有清新典雅的特点,商业网站中的文字就要根据商品特点等进行设计,从而利用文字特有的个性特征,以增强人们的的视觉冲击效果,给人们留下深刻的印象。因为文字的特点较多,比如说:有字体、字形等,给网页设计者带来很大的选择空间,在设计者进行网页设计时就要精心的编排与设计,利用文字的特点去增强网页的视觉美感,给人们留下比较深刻的印象。

2、图片的运用

图片作为重要的视觉元素在网页设计中扮演者非常重要的角色,网页在设计中对图片的运用也是非常重要的,图片与文字相比较,图片所激发的诗视觉效果要比文字的视觉效果更加强烈,而且图片所产生的视觉效果是立杆见影的,会给人们留下较为深刻的印象,在设计者在选择图片过程中要尽量使字节数较小的图片,主要是由于图片的大小会影响图片的传输效果,如果图片字节数少就会极大的缩短下载的时间,从而使浏览者能够在打开网页的过程中就能够看到图片,提升浏览者的满意度,另外在图片的编排位置、数量以及形式等方面也要引起设计者的重视,从而增强网页的整体视觉效果。图片能够提升网页的视觉效果,在网页中发挥着非常关键的作用,但是图片也具有一定的劣势,图片不能够准确的表达出信息内容,需要文字的辅助才能够发挥出更好的效果。

3、色彩的应用

色彩也是一种重要的视觉元素,在网页设计中也发挥着无可替代的作用,色彩这种视觉元素本身就具有非常独特的性质,充分的利用色彩能够增强网页视觉整体效果,在色彩的运用中设计者要注意以下两点内容:首先是色彩的主色调要根据网页整体主题思想来定位,再配上与主色形成对比的彩色字体,让人们在浏览网页的过程中感觉到清晰顺畅,这样也能更好的突出文字信息,图片在色彩的选择上也要以同色系的色彩为主,以更好的增强网页的整体效果。其次,在背景色的选择上,最好要与主色性相同或者是对比度较低的颜色,从而更加便于图片与文字的搭配,更好的识别文字。

总之,文字、图片以及颜色在网页设计中的运用,不仅提升了网页的质量,而且是网页设计更加的丰富多彩,更符合现代人的需求,但是视觉元素在网页设计中运用是一项非常复杂的艺术,对设计者的审美以及技能有较高的要求,因此,这就需要设计者在实际设计中不断对视觉元素进行改革创新以提升网页的整体效果。

作者:张涛吴倩展庆召单位:石家庄信息工程职业学院

网页设计的要点篇3

1.1网页设计的概念

网页设计是伴随计算机互联网产生的视听设计,结合文字、色彩、图形图像、版式等对于网页版面的编排。网络设计者通过自身的创造性思维,对网页的结构进行艺术上的规划与设计,使网页给人留下深刻的印象,让人过目不忘。

1.2网页设计的视觉特点

传统纸媒对现在的网页设计有一定的影响,版式设计上符合人们的阅读习惯,读者往往习惯上下滚动页面进行阅读,所以排字以横向排列为主,方便读者阅读,而且对于关键词汇可以用其他色彩进行突出设计,使人们在阅读的时候对文视觉元素在网页设计中的功能阮翔国家新闻出版广电总局831台321100章重点内容有所把握。对于网页设计一般采用网络样式,也可以进行自由样式的设计,给人们新鲜感,不会使读者产生审美疲劳,但多样性的同时,要注意不能违背整体的设计风格,需要符合网页设计中视觉效果的特点。

1.3网页版式设计的视觉要素

网页设计是在一个空间有限的页面内,将文字、图形、图案、链接等元素进行规划和排版,将这些视觉元素合理的安排,使它们可以相互协调,并且表达出指定的信息。网页设计者可以通过不同的设计,突出不一样的重点,根据不同的用意,使用不同的视觉元素,这些元素就形成了人们可见的视觉区域。

2视觉元素的呈现深受网页布局的影响

2.1常见的网页布局

现在的网页布局虽然没有明确的分类,但是网页风格类型却是多种多样的。

(1)大多数的网站选用国字型布局,这是最常见的一种布局,明确的主次关系

(。2)拐角型布局,这种布局是将一些相关信息的链接或者文字信息,放在网页的左边或者右边,意思相似的内容放在一起,可以使读者一目了然

(。3)上下框架型布局,这种布局的特点是将网页设计的内容和中心标题区分。

(4)封面型布局,这种布局的特点是在网站显著的位置,设计引人注意的图案或者是动画特效,点击链接可以简单进入相应的界面。

2.2网页布局的方法

网页在设计之前是空白的,像是一张白纸,需要网页设计者通过自身的想象力和创造能力,将一切元素组合到一起,然后具有自己的风格。首先,网页设计者要有独特的构思,要有一定的创意,创意的好坏直接影响设计的质量,优秀的创意可以在激烈的市场环境下胜出,可以给浏览者留下深刻的印象,并且与其他网站区别开。然后要将网页的整体框架勾画出来,把标题和主要内容先设计到网页中,使大概的轮廓呈现出来。最后进行细化,把具体内容和图形、动画等元素进行规划和设计,布局规划要符合人们的浏览习惯。

3网页设计中视觉元素的功能与审美性

3.1视觉元素的功能和审美性

网页设计是指利用互联网,可以将信息快速、准确、简洁地传达给用户。审美是指通过视觉,欣赏、领会事物或艺术品的美。随着网络的普及,对网页的要求越来越高,网页设计的审美性也随之产生。对于网页的审美是指用户对网页设计中的各个视觉元素的感受。网页设计的文字、色彩和图案等元素都应遵照视觉美的规律,各元素之间要相互协调,突出内容的主题,对于网页设计中的视觉元素要有统一的风格,并满足人们的审美。

3.2网页设计中视觉元素的功能和审美性的具体表现

人们对互联网的应用越来越频繁,网络已经融入了生活中的方方面面,无论是工作还是学习都离不开网络。通过网络,可以实现资源共享、网络检索、网络购物,下载自己所需的资料等很多功能。在网页设计上需要重点突出视觉性,方便用户浏览到需要的内容。而且,在网页浏览内容过程中,用户可以发表自己的评论和观点,对信息进行反馈,使信息传播变成双向性。

3.3视觉元素在不同网站上的功能和审美性存在的差异

随着电子商务的普及,在网络上购物已经变成十分普遍,各种各样的购物网站相继出现,但是大部分网页结构过于单调,颜色单一,对于重点并不突出。公共服务网站,存在较多的信息,统一的风格,清晰的结构,没有过多的修饰,比较正式可信。个人网站颜色明亮,个性特点鲜明,富有活力。视觉元素应用在不同类型的网站,给人们带来的视觉体验是完全不相同的。

4结语

网页设计的要点篇4

关键词 网页设计 课程整合 课程体系 课程设置

1引言

“计算机网页设计”是近年来计算机专业领域发展最快和应用最广泛的课程之一,当今社会急需培养掌握计算机网页设计、面向不同应用层次的专业人才。因此,学生对这门课程教学的要求越来越高。面对众多的网页设计技术和课程,如何为各类学生开设好“计算机网页设计”课程,需要我们积极思考。

作者根据在大、中专学校讲授“计算机网页设计”课程的切身体会,结合自身多年企业网站开发设计的实际经验,就目前如何面向各类院校不同层次的学生开设“计算机网页设计”方面的课程进行探讨。

2“计算机网页设计”课程体系分析

“计算机网页设计”作为一种专业技能的培养,不是作为一门课程孤立存在的,它要靠多门学科的知识给予支撑。它们相互渗透和依赖,因此构成一个科学的、完整的课程体系。

根据图1所示,如果暂不考虑网页设计涉及到艺术类的课程外,我们可以把“计算机网页设计”的相关课程大致分为三类:“计算机网页图形图像、动画设计”课、“静态网页开发与设计”课、“网站管理和动态网页开发与设计”课,如表1所示。

其中,动态网页设计的课程,内容和方向比较明确,学习难度大,可根据学生的知识结构层次和培养方向选择开设。

3根据培养目标进行课程内容的整合

面对如此众多的网页设计课程,如何有针对性、有选择,又最有效地为学生开设计算机网页设计课程,应达到怎样的培养目标,根据培养目标进行怎样的课程整合,这是本文要说明的主要问题。

3.1知识速成型课程整合

“计算机网页设计”是一个学科体系,但作为一个普通学生,不可能花大量的时间用在学习图形设计、程序设计等知识上,他们想用最短的时间掌握简单又实用的网页设计技能,以应对日常的工作。基于这种想法,我们可以将计算机网页设计课程整合成两门课程:

(1)photoshop

(2)Frontpage

这种课程整合是以Frontpage为教学主线,中间集中花一两周讲述或授课中穿插讲述photoshop知识。由于Frontpage与word同出一宗(word是新生入学后必学的一门计算机基础课程),界面十分相似,学生学习起来很容易上手,因此,Frontpage是学生学习网页设计入门的最佳课程。Frontpage课程教学的重点在于:编辑网页、超级链接、使用表格、运用框架、应用组件等。在网页设计中,必然会涉及到图片的处理,而photoshop是图片处理普及率很高的工具之一,是网页设计者必须掌握的一个软件工具。photoshop课程教学内容偏重于图像尺寸大小设置、格式转变、简易GiF制作、工具箱的使用等。通过这两门课程,学生可以掌握网页设计的基本技能,能够对一些结构简单的网页进行设计。

3.2网页设计师型课程整合

学生的需求层次不仅仅局限于制作简单的网页,越来越多的学生更希望在国际互联网上拥有自己的一片天地,在网页设计方面追求技术与艺术的完美结合。因此,网页设计师型课程整合应运而生。网页设计师岗位要求工作人员不仅了解网页或者网站的目标、对象、定位、风格要求、功能等基本需求,还要将效果图变成具体的页面,所以网页设计师要精通设计和制作。我们将网页设计师的课程整合为三门课程:

(1)Dreamweaver

(2)Fireworks

(3)Flash

Dreamweaver、Fireworks、Flash是macromedia公司的旗舰产品,号称“网页设计三剑客”。这种课程整合是以Dreamweaver为教学主线,中间集中三至五周讲述Fireworks和Flash知识。这三门课程对于非计算机专业学生而言,学习起来存在一定的难度。Dreamweaver课程授课内容重点为:HtmL基础构建、网站的开发、页面设计制作、动态广告效果、网站的文件上传与维护、可视化的网页设计和网站管理工具、可视化网页设计、图像编辑、处理Flash、Shockwave等媒体格式和动态HtmL、基于团队的web创作。Fireworks课程授课重点为:网页图形图像制作及优化、GiF动画、动态网页及菜单、创建网络相册、制作网页上很流行的阴影、立体按钮等效果。Flash授课内容重点为:网页动画制作及设计艺术、动态按钮设计、动态加载页面。通过这三门课程的学习,学生可以掌握网页设计师岗位技能要求,对一些中小型企业网站进行独立的设计和开发。但要达到一个熟练的程度,还需要在长期的实践训练中巩固和运用。

3.3程序开发型课程整合

目前各类院校的计算机实验条件普遍较好,学生对于静态网页设计软件自学起来相对容易。由于网页设计的主流技术在于动态网页的开发与设计,学生在实践中也碰到诸如用户注册、用户登录、在线调查、用户管理、订单管理等动态网页,这些功能仅仅有静态网页制作技术是无法实现的,因此程序开发型网页设计课程整合正是为有一定的静态网页基础的学生开设的。程序开发型网页设计课程整合为三门课程:

(1)HtmL超文本语言

(2)网络数据库的应用

(3)动态网页开发技术

这种课程整合以动态网页开发技术课程为教学主线,授课前集中一周讲述HtmL超文本语言的知识,授课中期涉及到web数据库访问时,则集中两周讲述网络数据库的知识。动态网页开发技术可选择aSp、、JSp、pHp等交互语言来教学,建议选取aSp作为教学内容,原因是aSp为微软新一代开发动态网页的技术,具有开发简单、功能强大等优点,可以非常直观简易地实现复杂的web应用,十分适合初学者学习。动态网页开发技术――aSp授课内容重点为:运行环境的调试、VBScript、JavaScript、aSp内置对象、aSp组件、aDo技术、aSp的调试及效率、web应用程序案例。HtmL超文本语言授课内容重点为:HtmL基本结构、页面布局、文字设计、列表、表格、超级链接、多媒体效果、框架。网络数据库的应用课程可选用SQL2000作为教学内容,它可以很好地与aSp技术结合,其授课内容重点为:建立数据库、删除数据库、建立表、删除表、建立索引、创建存储过程、创建触发器、结构化查询语言。通过这三门课程的学习,学生可以掌握一些交互式网站建设的基本技术,可设计和开发出简单的web应用程序,如留言板、BBS、聊天室、注册系统、查询系统等。

3.4网站管理员型课程整合

无论静态网页或是动态网页,最终都要上传到互联网,供用户访问,并且需要不定期对网站进行更新和维护。网站管理涉及到多种技术,既要懂得一般性网页设计,还要懂得网站的建设和维护。因此,网站管理员型网页设计课程可整合为两门课程:

(1)Dreamweaver

(2)网站建设与管理

这种课程的整合是以网站建设与管理课程为教学主线,授课前几周讲述Dreamweaver知识。网站建设与管理的授课主要内容为:域名、ip地址、网页空间、iiS的设置与管理、建设Ftp服务器、建立虚拟目录、安装DnS服务器、安全管理技术、CGi交互技术等,其中iiS的设置与管理是网站建设与管理的重要内容。Dreamweaver授课的主要内容为:定义站点、页面设置、文图编辑、首页、子页、表格、框架、导航条、网页、可视化网站管理。通过这两门课程的学习,学生可以掌握网站建设和网站管理的基本技术,能处理网站运行中出现的一些简单问题,可独立完成一个中小型网站网页设计、建站、管理、维护工作。

3.5版面设计师型课程整合

网页追求版面美观,是为了更好地传播网页信息。作为一个初学网页设计的人,一般不会关心是否使用与主题相符的字体和图形,这往往是造成网页丧失可观赏性的主要原因。随着对网页设计技术感兴趣的学生越来越多,如何能制作美观、层次分明的网页页面,成为很多网页设计爱好者的一个热门话题。在版面设计元素中,图像是很重要的一个组成部分,网站整体的版面设计效果直接取决于所设计的图像效果,因此,我们在设计版面设计师型网页设计课程时,偏重于网页图像图形方面的教学,版面设计师型课程可整合为三门课程:

(1)photoshop

(2)CorelDraw

(3)Fireworks

这种课程的整合是以网页版面设计内容为教学主线,每门课程花4周左右的时间讲述,剩余6~8周则是结合3门课程进行版面设计案例练习与讲解。photoshop的主要授课内容为:绘画工具、创建选区、通道与蒙版、图层应用、滤镜效果、切片。CorelDraw的主要授课内容为:绘图基础、基本设置、绘图工具、基本绘图、填充对象与高级绘图、文字与排版、排列与管理对象。Fireworks的主要授课内容为:文档基本操作、图像的绘制及修改、颜色的调整及填充、位图文件处理、图层与蒙层、图像优化、热点、切片和轮替按钮技术等。通过这三门课程的学习,结合课程案例的练习和课程设计,学生可以掌握网页版面设计要点,明确网页版面设计的步骤,设计出有一定特点和较为专业的网页。

4结束语

这些课程整合措施在我院实施了两年,一方面是运用在选修课上,另一方面运用在一些网络课程专业,如市场营销、电子商务、海关业务等,我们开设与专业相关的一些网页设计课,收到不错的教学效果,学生均反映很好。但“计算机网页设计”毕竟是一门新型的学科体系,每个学校均有自身的实际情况,如何更加科学和合理地开设课程和整合课程,需要广大教育工作者不断探索和创新。

参考文献

[1]韩陵宜.高职院校“网页制作”课程教学的探讨[J].电脑知识与技术,2005,6.

网页设计的要点篇5

关键词:网页设计;图片视觉;网页浏览;视觉研究

网页能否有好的发展,不仅体现在好的创意上,也体现在网页的设计上,好的网页设计可以吸引网民的眼球,提高浏览量,但是我国目前网页中的图片视觉效果依然停滞不前,没有太大的发展,在图片的浏览上,缺乏灵活性,图片设计方面没有创意,网页设计人员的技术得不到提高,图片的视觉效果很差。

一、网页视觉设计的原则

要想有展现出完美完美的图片视觉效果,需要了解网页视觉设计的原则,依据原则进行图片设计,从而达到是事半功倍的效果,在设计网页的时候,为了使网页中的图片与内容合为一体,遵循形式美与内容美,要从以下几点出发:

(一)比例尺寸得当,对称均衡适度

合理的比例是美的前提。比例得当不仅适用于绘画,同样也适用于网页设计。在网页设计中,要想把握好比例,需要做好组版元素间和谐的关系。把握好比例尺寸,可以以中心线为轴线,这样做出来的网页图片,带给人一种大方、稳定、端庄的感觉,既体现了秩序的原则,又给人高贵的美。在网页设计中,点线面是很注重的要求之一,首先要在平面中找到平衡点,让绝食产生舒服的感受,接着要找到对称的部位,最后要以整个尺寸为基调,找到平衡点。

(二)动静变化有序,节奏韵律明快

网页中的动态和静态的变化是根据三维空间和图片的比例等因素体现出来的。同种元素因为布局与层次的变化会造成不同的视觉体验。在网页设计中,对空间的要求是很高的,需要考虑动态与静态的结合,节奏韵律的快慢。在网页的设计中,运用动静结合的方式,给人生动活泼的视觉感受,对节奏韵律把握明确,可以增加网页图片的感染力,同时又可以渲染气氛,展开联想。

(三)繁简互衬,多样统一

网页设计,需要考虑好网页的内容和图片版面,既不能使网页看起来太过繁杂,也不能使网页太过简单。在设计网页的时候,可以针对内容的多少进行合理的排版,同时也可以通过色彩搭配来对网页中的内容和图片进行分开。对网页的合理布置,使网页看起来繁简互衬,又能够使整体多样统一,各个元素独立而统一.按照视觉艺术的原则,给人以美的感受。

(四)图形

在网页设计中,图形的设计也是很重要的,图形和图片的比例需要恰到好处。图形是图片的缩小化,它可以帮助网页中的文字更加清晰,使整个网页看起来更加的美观和立体。小的图形在视觉上给人带来一种清新可爱的感觉。对图片的位置和形式的合理的布置,可以使网页更加美观大方。

二、提高网页设计图片视觉的方法

网页设计需要遵循形式美和内容美的有机结合,需要比例尺寸上把握得当,动静变化有序,节奏韵律明快,繁简互衬,多样统一的原则,同时也要做好图形的设计,要想提高网页设计图片视觉,就要从以下几点来进行:

(一)单项视觉流程

网页设计的单项视觉流程是指对网页中的图形、文字和符号等在平面上进行不同方向的变化,可以表现为横向、纵向和斜向这几种形式,然后对其进行构图。单项视觉流程在操作起来简单,同时也能够使网页的平面结构看起来更加的清楚直观,能够直接明了地升华主题,在视觉上给人鲜明的层次感,表现出单项视觉流程的稳定、端庄的效果,具有坚定、直观的感觉。

(二)反复视觉流程

网页设计的反复视觉流程是把相似或者同样的视觉元素进行三次或者三次以上的编排,使网页的图片画面有规律、有节奏、有秩序。运用反复视觉流程,给人的视觉带来冲击性,同时有体现出了网页图片的韵律美、节奏美和秩序美,给人眼前一亮的感觉。

(三)曲线视觉流程

网页设计的曲线视觉流程只要根据人眼来回摆动舒适感的舒适感进行设计,人们的眼睛可以依据弧线的运动变化方式来观看网页中的图片。其中曲线视觉流程主要包括了弧线形(c形)视觉流程和回旋线形(s形)视觉流程。弧线形(c形)视觉流程给人饱满的感觉,具有明确的方向感和扩张感,回旋线形(s形)视觉流程给人流畅,柔美的感觉,使图片生动起来,有很强的动感美和节奏美。虽然曲线视觉流程不如单项视觉流程看起来直观,但是却有飘逸美。

(四)焦点视觉流程

网页设计的焦点视觉流程主要是用焦点来吸引人们的眼球,聚集浏览者的目光。焦点视觉流程为了更好的吸引人们的眼球,往往还要用鲜明的颜色来对焦点进行强化,与网页图片的背景形成对比,同时也会别出心裁的设计焦点,分从从焦点的形式、焦点的层次和焦点与图片的结构进行。焦点视觉流程通常是以图形为主要元素,形成视觉磁场。

三、结语

随着信息科技的不断发展强大,图片对网页的影响也是极其重要的,快节奏的生活,使人们更加倾向于借助图片来获得自己想要的信息。因此只有遵循网页图片的设计原则,分别从单项视觉流程、反复视觉流程、曲线视觉流程和焦点视觉流程出发,才能更好地发挥出图片的价值,给社会大众带来美的感受。

参考文献

[1]刘青玲.图片优势效应在网页设计中的研究与应用探讨[J].科技创新与应用,2015,(21):86.

[2]林欢,谭浩,赵江洪.图片优势效应在网页设计中的应用[J].包装工程,2014,35(18):13-16+24.

网页设计的要点篇6

【关键词】网页;导航;设计

导航系统是网页中不可缺少的一部分,它是指通过一定的技术手段,为网站的访问者提供一定的途径,使其可以方便地访问到所需的信息,网站的浏览者通过导航系统了解站点内容分类,并使用导航系统上的链接浏览站点的相关内容。导航系统主要包括:全局导航、局部导航、站点地图、搜索引擎、面包屑等。随着网站设计发展网页中导航系统的表现形式也多种多样,包括文字、图片、图标及Flas。导航系统的发展也是经历了一定的过程,从最开始的纯文本导航系统到标签化导航系统,然后又发展到了可以切换的导航系统,到现在我们使用的Flash导航,现在的导航系统不仅仅体现在了技术的发展也体现了网页中艺术性及易用性设计。

一、网页中导航系统的作用

通常在浏览网页时,网页中需要有一个清晰的导航系统很重要。导航系统就像指南针,指引浏览者去浏览他们想要获知的信息。通过导航系统的层次结构可以展现网站的内容,告诉浏览者浏览的起点及浏览的方向,通过导航系统明确引导功能,浏览者才能更有效率地进行网页浏览。导航系统是网页设计的重要目标,导航系统的清晰度设计对网页中的信息架构、用户使用影响重大。网站导航的主要功能是引导用户方便地访问网页内容,同时导航系统的设计也是评价网站专业度、可用度及可信度的重要指标。同时对搜索引擎优化也有重要作用。网站导航的重要作用是便于用户快速找到所需要的内容,导航系统首先引导用户查找信息,通过主导航,次导航以及分类便于用户快速找到所需的信息;其次清晰整个网站的目录结构和链接间的关系,层次结构分明,便于访问者理解;再次导航容易形成地图,特别是面包屑导航,让用户了解所在网站中的位置。

二、网页中导航系统设计

随着网络的普及,网页的设计越来越普及,导航系统是网页中的关键要素,在如今的一个好的网站在现在的激烈竞争中求生存及发展,首先要有一个优秀的导航系统,如何能有一个优秀的导航系统呢?这就需要设计者在设计网页的同时要注意网页导航系统易用性、艺术性设计。

1.网页中导航系统的艺术性

在浏览网页时,我们打开页面首页给我们的第一印象是网页美不美观,如果美观才能留住浏览者的视线,如果不美观那浏览者就不会花很多时间来浏览本网页。网页中的导航系统的设计包括了色彩、文字及图标等元素。

网页导航系统中色彩的表现主要是通过网页色彩对人心理的影响。网页色彩总是在不知不觉中发挥心里作用,左右用户的情绪和心态。针对不同的网页进行不同的情感创意,部署适合主题的色彩是值得我们重视的。网页中所使用的色彩,会使用户产生联想,诱发各种情感,使心理发生变化。如果使用色彩激发人的情感,应该遵循一定的规律。色彩的冷凝感觉,不仅表现在固定的色相上,而且在比较中还会显示其相对的倾向性。

在网页设计中除了可以用网页中的色彩表现网页的主题及个人情感,而且还可以使用文字,所以说导航系统中不仅色彩设计重要而且文字还很重要。字体选择是一种感性、直观的行为。但是,无论选择什么字体,都要依据网页的总体设想和浏览者的需要粗体字强壮有力;细体字高雅细致。在同一页面中,字体种类少,版面雅致,有稳定感;字体种类多,则版面活跃,丰富多彩。关键是如何根据页面内容来掌握这个比例关系。最适合网页正文显示的字体是12磅。如果字体。如果字体较大,通常会影响整个页面的美感;如果字体较小,虽然容易产生整体感和精致感,但可读性较差。页面里的正文部分是由许多单个文字经过编排组成的群体,要充分发挥这个群体形状在版面整体布局中的作用。它的排列方式有四种:两端对齐、居中对齐、左对齐及右对齐。一般制作网页时使用左对齐方式,这是根据浏览者的浏览习惯有关。

导航系统中图标的设计不仅要有艺术性还要符合网页的主题。导航系统中图标赋予了它的实际意义。它不仅仅是用来装饰,图标和文字结合起来提高了导航系统的整体效果。使得网页增添了艺术效果。

2.网页中导航系统的易用性

清晰明确的导航系统首要是以人为本,以易用性的、便捷的操作为基本设计原则。一个优秀的网页不仅要美观使人赏心悦目,而且浏览者在使用导航系统的时候可以轻松自然,明确清楚。以最少的点击次数获得最多的结果是网页导航系统设计的一个基本原则。制作网页导航系统要层次清晰、简明易懂、使用简捷便利。

如今的网页中设计导航系统存在如下的问题:第一在网页中导航系统层次不明确,使得浏览者对站点中的内容不明确,不能及时找到所需的信息。第二在网页导航系统中添加了与本网站内容不相关的内容,这就降低了网页导航系统的指引性。第三有些页面为了别出心裁没有按照人常规的思维来做页面的导航系统,使得浏览者在打开页面时,首先去固定思维的位置找导航系统,但是没有找到,这就使得浏览者识别受阻,感觉其易用性不强。第四这也是页面中致命的弱点就是当找到导航系统,但是点击浏览以后与导航系统中的内容不匹配,这就降低了网页的可信度。第五网页的导航系统不醒目,尤其在设计导航系统是一定要注意色彩的搭配及与主题的协调。以上问题都阻碍了网页中导航系统的功能的充分发挥,所以在设计者设计导航系统时一定要注意导航系统的易用性。

三、导航系统遵守的原则

通过上面所讲的关于导航系统设计时不仅要注意导航系统的艺术性设计还要注意它在页面中的易用性,所以我们设计页面中的导航系统一定要注意如下原则:

>导航结构清晰,突出重点,包含关键词;

>导航目录采用文字来链接的方式,通俗的说尽量使用文字,如果需要使用图标或者图片其中要有文字性的内容,不能只使用图标,这就使得浏览者不能了解其功能;

>每个页面的超链接尽量不要超过140个;

>目录采用静态化或伪静态,URL和目录名字产生关联,提高分词匹配;

>每个导航下的内容布局要有相关性和原创性;

>每个目录的导入链接和导出链接需要做好协调,提升目录权重,有利于收录和抓取。

四、结束语

随着现在网站设计师对网页设计中导航系统的越来越重视,导航系统在页面中的功能被强化,导航系统在页面中不仅体现了它的艺术性还体现了它的易用性,使得在设计更加的人性化。

【参考文献】

[1]谭岚丹.网站设计中导航系统的艺术性[J].大众文艺,2011(12).

[2]杨亦艺.对人性化网站设计的探讨[J].中南林业科技大学学报(社会科学版),2012(06)

网页设计的要点篇7

关键词:互联网;网页界面;艺术设计

网页界面艺术设计是伴随着计算机互联网络的产生而形成的艺术设计新课题,是网页设计者以所处时代所能获取的技术和艺术经验为基础,依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动,必然要成为设计艺术的重要组成部分,并随着网络技术的发展而发展。表面上看,它表面上看,它不过是关于网页版式编排的技巧与方法,而实际上,它不仅是一种技能,更是艺术与技术的高度统一。?网页设计包括风格定位、版面编排、色彩处理、浏览方式、链接功能等诸多方面,其中色彩处理有着举足轻重的作用。色彩既是网页作品的表述语言,又是视觉传达的手。所以首先要了解一个问题那就是:

1制作网页包括具体都包括哪几部分呢?

1.1图形、图像处理制作网页界面艺术设计,提到界面还有艺术,那在网页上插入一些精美、适当的图片是必要的,否则,不会有人去浏览你的页面,因此,在设计网页之前,就应搜集或制作一些好看、适用的图片。提到图形、图像处理,大家都会想到的软件是photoshop这个软件,对,这个软件是进行图形、图像处理的软件,但是,它不是专门的处理网络图像的软件,photoshop这个软件会用到去进行一些平面的图形图像,我们网络的图形、图像处理用的是Fireworks软件,它可以制作出传输较快的gif格式的图片,占的空间也比较小,一般大小也就是KB,而photoshop制作出来的是jpg格式的位图,并且是有损压缩,象素大了图像就清晰,但这样的话上传到网上会影响浏览速度,象素小了就会出现模糊或者马赛克小方格,所以我们采用的是Fireworks软件进行处理图形、图像。

1.2动画制作网页界面艺术设计,肯定也少不了动画的加入,并且还要有艺术气息在里面,这就要求我们的设计者要有艺术修养和对颜色的综合把握了,在没有FLaSH软件之前,用的是Golive这个软件,再后来就用传统的做法,在html中嵌入Java程序编写的动画,但这要求设计者要对Java语言熟悉。随着软件的发展,如今有了许多制作动画的软件,二维的、三维的等等,如现在我们用的FLaSH软件,用它制作的动画,小巧迷人,只需作为一个.swf格式文件导出,再导入到网页编辑器里就可以了。

1.3文本的编写一般是采用在网页中用html语言中的标签编写,也可以用网页编辑工具的“所见即所得”功能直接写入文字,如:Dreamweaver软件或者Frontpage软件等都可以进行文本的编写。还有一点要注意的就是,显示文本的时候,设计者的机器上装了很多漂亮的字体,设计的时候采用了,但是等上传到网上以后,别人在浏览的时候,如果别人机器上没有安装字体,那就显示不出来我们采用的漂亮样式字体,因此,在考虑网页界面艺术设计的基础上,我们是把文字提前在photoshop或Fireworks可以将字体先选择自己喜欢的样式,然后转换栅格化图片再用切片切成小块,分别进行优化。输出的格式可以为gif或jpeg,再导入到Dreamweaver进行具体编辑,做链接可以用图片特有的属性进行热区链接,这样就完成我们想要的字体样式效果了,就不会出现字体样式显示不出来的情况啦。

1.4框架的应用框架是网页的常用形式,它可以使网页更为清晰,可以把不同的页面超链接到同一框架中,使的页面更加紧凑。一般框架用在小说浏览页面,或者介绍图书章节的部分,或者教学网页用到的的框架比较多。

1.5表格的应用表格是网页中用处最广泛的,可以布局,定位等等,它是网页中最活跃的元素。它的应用可以使用网页更加灵活。表格(table)是页面中的重要元素,是页面排版的主要手段。我们可以设定表格的宽度、高度、边框、背景色、对齐方式等参数。很多时候,我们将表格的边框设为0,以此来定位页面中的元素,或者籍此确定页面中各元素的相对位置。我们知道:浏览器在读取网页html源代码时,是读完整个table才将它显示出来的。如果一个大表格中含有多个子表格,必须等大表格读完,才能将子表格一起显示出来。我们在访问一些站点时,等待多时无结果,按“停止”按钮却一下显示出页面就是这个原因。因此,我们在设计页面表格的时候,应该尽量避免将所有元素嵌套在一个表格里,而且表格嵌套层次尽量要少。在使用Dreamweaver制作网页时,会自动在每一个td内添加一个空字符。如果单元格内没有填充其它元素,这个空字符会保留,在指定td的宽度或高度后,可以在源代码内将其删去。

2色彩的运用

网页界面艺术设计离不开色彩的应用,当打开一个网站的时候,给用户留下第一印象的既不是网站丰富的内容,也不是网站合理的布局,而是网站的色彩,尤其是在体现界面的时候,色彩对人的视觉效果非常明显,一个网站设计的成功与否,在某种程度上取决于设计者对网页界面设计颜色的运用和搭配。

网页界面设计是一种审美活动,成功的设计作品一般都很艺术化。但艺术只是设计的手段,而并非设计的任务。设计的任务是要实现设计者的意图,而并非创造美。网页界面页面设计的任务,是指设计者要表现的主题和要实现的功能。站点的性质不同,设计的任务也不同。从形式上,可以将站点分为以下三类:第一类是资讯类站点,像新浪、网易、搜狐等门户网站。这类站点将为访问者提供大量的信息,而且访问量较大。因此需注意网页界面设计页面的分割、结构的合理、页面的优化、界面的亲和等问题。第二类是资讯和形象相结合的网站,像一些较大的公司、国内的高校等。这类网站在设计上要求较高,既要保证资讯类网站的上述要求,同时又要突出企业、单位的形象。第三类则是形象类网站,比如一些中小型的公司或单位。这类网站一般较小,有的则有几页,需要实现的功能也较为简单,页面设计的主要任务是突出企业形象。这类网站对设计者的美工水平要求较高。

3网页界面的优化

网页设计的要点篇8

一、移动互联网网页设计特点

移动互联网载体是手机,从界面角度来看,桌面网页设计的分辨率大都是1024以上,而手机的分辨率因型号不同各异,一般只有320,最多也就是800的分辨率,从物理角度来看,这基本上是移动互联网页的最高值。要在足够小的屏幕里让你看到想要的东西,是一件非常难的事。基于这个出发点,大部分移动互联网网页设计的比较简单和实用。移动互联网比起传统的网页具备较强的实时性。我们可以第一时间把身边发生的事情通过手机到互联网上,在此基础上推动了诸如手机人人网、手机微博等社区化移动互联网站的加速发展。

二、移动互联网网页设计中现存问题

1.移动互联网网页分辨率难以衡量目前市场是的手机型号各式各样,屏幕种类令郎满目,规格不等,分辨率从320—800像素都有,这些因素给移动互联网网页设计带来不同程度的难度,设计师很难针对一种或几种手机型号进行设计,只能通过对主流手机进行界面设计,这种设计完全依赖于UC浏览器来自动转换分辨率的设计导致了网页文字错位,页面杂乱,严重降低了用户满意度。

2.网页设计缺乏规划性由于目前移动互联网页面设计受到移动终端的条件限制,设计师设计出的页面往往过于简单,甚至出现文字堆积的状态,整个页面毫无设计感。于此同时,由于移动互联网处于刚起步阶段,很多设计师还不够成熟,设计出的页面缺乏色彩规划,要么颜色过于单调,要么花里胡哨。移动互联网站同时也有电脑桌面网站,由于受到手机条件限制,很多移动互联页面趋于简单,移动互联网站与桌面网站缺乏统一性。

3.网页载入速度慢受到移动互联网速度的影响,再加上很多网站并非是专门设计的wap站点,在访问一个网站时,大量的图片和视觉效果加载缓慢,使用户丧失耐心,用户体验度大打折扣。

三、基于用户体验的移动互联网页设计原则

1.简洁、易操作、避免输入

鉴于手机屏幕狭小,要做好页面设计,简洁便成了必然的要求。简洁并不单指设计的不拥挤,同时还包括页面板式和图形图像的简练概括。就现行的手机屏幕而言,页面上一行的字数最多能容纳14个中文字符,所以,移动互联网页面的板式结构要相对简单,呈现形式最好单列布局。由于屏幕太小,不足以观察到页面中细微的设计,所以图像的设计要以简洁为主,要让用户对页面内容一目了然,而花里胡哨的设计只会干扰用户的视觉。良好的用户体验下的设计应当遵循少即是多的原则,简单的交互、清晰的提示和反馈,少而精确的用户请求,从简单、易操作中准确的满足用户需求。另外,还应尽可能的减少用户输入,避免给用户增加负担。图1

2.信息扁平化原则

所谓信息扁平化原则,就是指减少信息层次关系,用户用最少的页面跳转操作找到想要的东西。现在大多数移动互联网页面设计信息结构都以深度为主,整个信息结构的链接呈现树状结构,用户想找到自己想要的信息,要一层一层的点击链接,这样导致用户操作的复杂性,在每一次页面跳转是,都会损失掉用户的流量,严重影响到用户使用。在这种情况下信息的扁平化显得尤为重要。我们可以通过增加tab将并列的信息显示在同一个界面内,以减少页面的跳转;增加流程的便捷通道,如图(1),在页面a中增加到达C的快捷方式,虽然在程序上讲C还是第4层,但对于用户而言C却变成了第3层,这样无疑就增强了用户体验度。3.增强交互性和通用性移动互联网页面设计要加强交互性的设计。使用手机浏览网页的过程实际上就是用户与页面进行交流的过程,因此良好的交互设计是提升用户体验的重要因素。另外,移动互联网页设计师应充分考虑各种型号手机屏幕大小,不能单单依靠UC浏览器来自动调整页面布局和大小,要增强页面设计的通用性。

网页设计的要点篇9

关键词:网页设计;排版与布局;原则;方法

前言

随着我国信息时代的不断发展,人们主要通过网络来获取相关信息,网络的作用也日益凸显,而网页作为网络的重要展现形式,其在设计过程中的排版与布局会直接影响一个网页的浏览量。因此,对网页设计中排版与布局研究有着重要意义。

一、网页设计中的排版与布局的原则

排版与布局是网页设计中的重要组成部分,其主要目的是让信息页面更加美观,使信息内容更加合理且条理清晰,让浏览者得到更好的客户体验。因此,在进行网页排版与布局的过程中,为达到预期效果应遵循一定原则:首先,纵观全局,整体规划。通过对页面的文字和图片进行整体平衡,并融入趣味内容,实现页面的和谐统一;其次,突出网页主题。即利用网页版面的主次关系,将具有较高价值的信息放在版面上部位置,起到重点突出的作用;再次,版面恰当装饰。即在不影响网页功能的前提下,对网页予以简单装饰,做到疏密有度、图文并茂;最后,遵循色彩原则。为了让一个网页在众多网页中脱颖而出,在对网页进行排版设计的过程中,应对页面色彩进行合理组合,形成强烈的视觉冲击力,以引起浏览者的重点关注[1]。

二、网页设计中的排版与布局的内容

网页设计中排版与布局主要是对文字和图像进行版式设计,使两者合理组合,向浏览者准确传递相关信息的同时展现页面美感。其基本内容主要包括网页标题设计、网页文字编排、网页图文结合及页面设计的节奏感。其中网页标题一般被放在网页最上方且位置居中,根据不同需求还可使用图片予以装饰,而剩余页面文字则根据网页的具体需要以点、线、面等方式进行合理编排。不过通篇的文字叙述易使浏览者产生厌烦感,进而放弃阅读,于是页面内容文字还应配图说明,通过图文结合的形式,依据不同网页类别将相关图片与文字进行灵活搭配,使页面内容变得更加生动活泼,从而激发浏览者的阅读兴趣,充分发挥网页传递信息的作用[2]。

三、网页设计中的排版与布局的方法

在进行网页设计之前,首先,要对页面的表达内容予以整体规划,通过简洁明了的布局排版方法对主要信息予以重点突出。其次,合理控制页面主色调,即主色彩控制在五种之内,并确定一种为主色调,其它几种只起到烘托作用即可。最后,注重字体的设置。整体页面的字体在三种以内,且大小适中,同时对标题与正文的字体大小和颜色加以区分。

四、网页设计中的排版与布局的常见类型

目前,网站种类众多,从形式上划分主要包括门户类、形象类、电子商务类、企业类和政府类等,尽管不同种类的网站对网页版面要求也不尽相同,但网页排版与布局的常见类型也就几种。(一)排版的主要类型。排版的基本类型大致被分成十类,其中最为常见的有以下三种:一是满版型。满版型的整个页面被图像占满,采取图像为主、文字为辅的排版设计,使页面具有开阔之感;二是分割型。分割型是把页面进行上下分割或者左右分割,然后将文字和图片分别在两个不同区域,形成直观的视觉感受;三是倾斜型。倾斜型是将文字和图片做倾斜式编排,使页面整体形成视觉冲击效果。(二)布局的主要类型。常见的布局类型有t型、口字型和同字型,其中t型是指页面的顶部为标语和横幅部分,左下方和右下方分别分布着主菜单和详细内容。这种布局模式能使整个页面主次分明、清晰明了,但也缺乏一定灵活性,显得相对枯燥。而口字型的最大优势则是可以充分利用版面,将主题内容放在中间位置,在其上下左右分别放入横条广告、菜单、内容导航、友情链接等内容,整个布局类似一个口字型。这种布局在国外站点较为常见,在国内的使用率相对较低。除此之外,还有一种同字型布局,这种布局一般设有大标题和小标题,其位置均在页面上方,相应内容被布置在左右两侧,而页面下方通常情况下会被留白,即使有内容也多为网站基础信息及网站制造方。

五、结论

综上所述,网页设计中的排版与布局影响着网页的成败,为不断满足人们对网络的需求,网页设计人员应针对不同类型的内容采取相应的排版与布局方式,进而提高网页质量和优化网页视觉效果,为人们带来更好的浏览体验。

参考文献

[1]王树琴.网页设计中元素定位和布局问题的研究[J].中国新通信,2013,(13):65-66.

网页设计的要点篇10

关键词:网页设计与制作;教学内容;教学方法

中图分类号:G642文献标识码:a文章编号:1009-3044(2012)08-1864-03

"webpageDesignandmaking"Curriculumteachingmethodexploration

FanYi-hong

(electronicinformationengineeringCollege,HenanUniversityofScienceandtechnology,Luoyang471003,China)

abstract:webpagedesignandmakingcoursehasthecharacteristicsofstrongpracticalityandwideknowledge,howtoimprovetheteachingeffectofthecourseisthequestionthatshouldbesolvedurgently.accordingtotheauthor’spracticalteachingexperience,thepaperconductstheresearchandthesummaryfromtheaspectofthecourseobjectives,coursecontent,teachingmethod,curriculumpractice,trainingandotherteachinglinks,anditachievedgoodresultsinactualteaching。

Keywords:webpagedesignandmaking;Contentofcourses;teachingmethod

随着计算机网络技术的迅猛发展和网络应用的日益广泛,internet在人们的生活、学习和工作中的地位显得越来越重要,上网冲浪已经成为现代人生活的一个重要部分。信息技术的高速发展,使人们通过网络来个人或者企业的信息、推广企业产品已成为一种流行的趋势。网页已经成为信息共享和传播的主要载体,掌握网页的制作和网站的管理等内容已成为现代人必备的一种技能。

《网页设计与制作》是软件技术、计算机多媒体技术、计算机网络技术、信息技术、信息管理、计算机应用等专业公共的必修课程,也是许多高校的公共选修课,具有实践性强和知识面广的特点。该课程要求学生掌握HtmL语言、CSS+DiV、JavaScript语言、photoshop图像处理、flas制作等基本知识,为后继课程《动态网页设计》、《计算机网络》等打下牢固基础,因此该课程具有知识点多、操作性强的特点。如何提高《网页设计与制作》课程的教学质量,是亟待解决的问题。根据近年来对网页课程的讲授经验,笔者从课程目标、课程内容、教学方法、课程实践、课程实训等几个教学环节对该课程进行了一些研究和总结。

1理论教学

1.1课程目标

《网页设计与制作》课程内容包括HtmL、CSS+DiV、JavaScript、photoshop、Flash,本课程的教学目标是:

1)使学生掌握HtmL基本知识,熟练掌握静态网页制作技能;

2)使学生能够掌握流行的CSS+DiV网页设计技术,适应网页设计社会最新需求;

3)使学生能够用photoshop进行网页效果图的设计并能够切图输出;

4)使学生能够用Flash进行网页动画的简单设计;

5)使学生能够掌握JavaScript简单程序设计,能够实现网页的各种动态效果。

1.2课程内容

1.2.1HtmL网页设计

重点包括网页设计基础知识、用HtmL设置文本和图像、列表、超链接与框架、表格、表单、网页制作工具Dreamweaver的基本操作,网站管理、Dreamweaver模板等。在进行课程设计时,突出HtmL代码的教学,而对制作网页的工具Dreamweaver则着重于操作能力和动手能力的培养。“知其然,知其所以然”是我们的目标。

1.2.2DiV+CSS网页设计

DiV+CSS是目前网页的主流布局方式,DiV+CSS网页设计技术使得网页的表现与内容相分离,提高了页面浏览速度,并且使得网站易于维护和改版,因此,在网页设计教学中DiV+CSS成为核心的内容,并将对传统的网页设计教学产生较大的影响。

该部分重点知识包括CSS基本语法、用CSS设置文本、图像样式、用CSS设置超链接与导航、用CSS设置表格和表单样式、CSS盒子模型、盒子的浮动与定位、CSS+DiV布局方法剖析。教学中通过大量的实际应用,反复的练习,使学生真正掌握CSS+DiV的精髓,并体会其在设计网页方面的优越性。

1.2.3photoshop图像处理

重点包括photoshop基本工具的用法,选区操作、图层操作、图像变换、色彩调整、文字操作、绘画工具、通道、路径、融合、图层样式、文字样式及滤镜等,目的在于能够用photoshop设计美观、清新大方的网页效果图并且能把网页效果图切片导出。注重学习工具的使用和图片的处理方法。

课堂教学中应注意培养学生的创新意识,突出“网页设计重在创意”的理念。尤其对于动漫广告等专业要发挥学生们美术方面优势,将计算机技术与美术相互渗透和融合,将网页作品当作一份具有生命力的完美艺术品。1.2.4Flas制作

重点包括层的概念,工具的使用,逐帧动画制作、运动渐变动画制作、形状渐变动画制作、引导动画制作、遮罩动画制作,元件的使用,基本动作的使用,在网页中使用Flash的目的是让网页变得更加生动形象,因此在学习技术的同时更要注意网页动画的组织形式,与网页协调。

1.2.5JavaScript程序设计

JavaScript是目前web客户端开发的主要编程语言,也是ajax的核心技术之一。该部分重点知识包括JavaScript编程基础,变量、数据类型和表达式,流程控制,函数,对象编程,文档对象模型与事件驱动,窗口、文档和表单对象,级联样式表(CSS)技术,动态对象和Cookies及安全等,JavaScript中的XmL、ajax技术以及JavaScript实用技巧与高级应用。

1.3教学方法

该课程的教学实践性较强,知识覆盖面广,在教学中要极大的激发学生的参与性,锻炼学生的动手能力,培养学生的学习兴趣。注意引导学生学习理论与实践相结合,将理论应用于实践。

教学过程中大胆运用模块教学法、案例教学法等教学手段,充分调动了学生的积极性和创造性,教学效果明显提高。

1.3.1模块教学法

根据教学内容的不同特点,将整个《网页设计与制作》课程的教学分为五个阶段,第一阶段使学生熟悉并掌握HtmL语言;第二阶段重点在于CSS样式表以及CSS+DiV布局方法;第三阶段在于利用photoshop进行网页效果图的制作,并将图片切片输出;第四阶段在于利用Flash制作动画;第五阶段在于JavaScript程序设计;每一阶段要给据内容不同、重点不同采用不同的教学方法。比如在第一阶段,要学生学会并熟记HtmL标记的用法,这就要通过大量小实例练习;在第二阶段主要进行页面整体布局的练习,学习如何把整个网页分成不同层次的块,然后再学习每一块的设计方法,只有通过全面的练习,才能掌握丰富多彩的网页设计方法;第五阶段则主要学习最新流行的网页效果的设计,重点在于网页程序的设计。每一阶段的教学内容完成后,在机房组织小测验,以实现分阶段达标,最终使学生完成该门课程的学习任务。

1.3.2案例教学法

在课堂上采用案例教学法,通过精心挑选案例,明确提出需要掌握的知识点及操作技能,以案例带动知识点,贯穿整个教学过程。比如在讲解HtmL的标记时,图片的路径学生很容易出错,通过一些小实例讲解该标记在网页实际设计中要注意的问题,学生就很容易掌握;HtmL基本标记学完后,通过一个综合实例――具有多个网页的网站的设计,综合应用HtmL语法,达到复习和融会贯通的效果;再比如在讲解JavaScript程序设计时,理论的讲解贯穿在许多流行的JavaScript实例中讲解,极大地提高了学生的学习积极性。

2课程实践

2.1实验题目的设计

结合理论教学,设计配套的实验题目,对巩固课堂效果具有重要的作用。对于上文提到的五个阶段,分别设计相应的实验题目。

2.1.1HtmL网页设计

实验1HtmL基本标记练习、实验2框架与超链接、实验3表格练习、实验4表单练习、实验5HtmL综合实例。

2.1.2DiV+CSS网页设计

实验1CSS文字排版、实验2CSS网页布局、实验3背景设置、实验4CSS导航菜单设计、实验5综合实例。

2.1.3photoshop图像处理

实验1图层的实验、实验2选区的练习、实验3图像的绘制练习、实验4图像的编辑练习、实验5文本的应用、实验6综合实例。

2.1.4Flas制作

实验1Flash多种工具的使用、实验2变形动画的制作、实验3运动动画的制作、实验4引导(路径)动画的制作、实验5逐帧动画的制作、实验6综合实例。

2.1.5JavaScript程序设计

实验1JavaScript程序设计案例、实验2用JavaScript制作网页特效、实验3JavaScript内置函数和对象、实验4JavaScript事件处理、实验5Dom操作实例。

2.2自学模式的创建

为学生创建良好的自学环境。我们建立了该课程的课程网站,学生可以下载教师的多媒体课件、实验指导、相关学习文档、视频讲座资料等,课程网站还提供大量的题库,包括选择题、填空题、判断题、问答题、设计题,学生登录后可以自由练习,从而达到了消化课堂所讲知识点、提高学习效果、激发学习兴趣的目的。这种做法丰富了教学手段,开辟了学生自学天地。

2.3参与教师科研,以研促学

鼓励和吸收成绩优秀的学生参与教师的科研活动,以科研促教学。学院自行开发的学院网站、学生评教系统、教务管理系统等都有学生参与,同时,学院的许多活动开展后,都安排学生设计相应的网站,这样使得该课程的教学水平不断提高。

2.4成立网页兴趣小组,拓宽知识面

组织成立网页课程的兴趣学习小组,具体活动包括:

1)举办讲座:资深开发人员的经验报告,网页知识讲座;

2)举办竞赛:我院已成功举办两届网页与flash设计大赛。

这些活动的开展深受广大师生的好评,激发了学生对网页设计技术的兴趣,培养了学生的动手能力和创新能力。

3课程实训

网页的制作不仅要求制作者有熟练的网页制作技术,还要有一定的艺术设计能力,因此在掌握网页设计基本技术的基础上,课程实训主要培养学生设计能力、创作能力和对所学知识的综合运用能力,学生需要独立完成一个表达特定主题的网站,要求参加实训的学生在规定的时间完成网页效果图的设计并切图输出,最终在Dreamweaver中布局成网页。

实训主要内容包括素材的搜集、网页整体布局设计,网页代码的编写、调试。实训时间是32学时,实训结束后,学生不仅要提交设计报告、photoshop制作的网页效果图和网页代码,还要进行现场答辩,这些对学生都是很好的锻炼。最后教师根据学生所交作品的效果、原创性、复杂性等情况进行成绩的评定。

平时实验课上学生总是按教师给定的素材,给定的效果进行实验,主要注重的是设计方法和网页代码的学习,在实训中,素材需要学生自己搜集,效果图需要自己制作,网站的制作方法自己确定。这就要求他们上网查询大量的资料,遇到问题想办法解决,学生带着问题进行学习和探索,培养了学生的探索创新能力。

课程实训不仅巩固了学生网页代码的设计能力,更是从网站策划、网页的界面设计,网站的风格、配色、布局、photoshop软件的应用等多方面对学生进行了训练,为学生能够做出美观而又实用的网页打下了牢固的基础。

4结束语

明确的教学目标、丰富的教学内容、科学的教学方法、有效的教学手段大大增强了学生主动参与学习的积极性。随着网页技术的进一步发展和进步,网页设计与制作课程的教学还必须与时俱进,不断的改革和创新,教师只有不断的学习新的教学理论,掌握现代化的教学手段,才能胜任高效教育工作,为社会培养高素质的技术应用型人才。

参考文献:

[1]李伟,邓红涛,曹传东.《网页设计》课程实践性教学改革与创新研究[J].改革与创新,2011(12):103-104.