网页界面设计运用论文范文第1篇
关键词：网页设计 色彩设计 色相环
1 关于色彩的研究
1，1色彩的要素
色彩是自然美、生活美、艺术美的重要组成部分，是人类知觉及记忆建构的基础单位之一，在资讯的传达上也扮演着重要的角色。自然界的色彩是丰富的，漆黑的夜晚、蓝色的天空、绿色的树叶、红色的苹果……但是最基本的色有三种，即红、黄、蓝，称为“三原色”，其它的色彩都是由这三种色调和而成。
现实生活中的色彩分有彩色系和无彩色系两个范畴。无彩色系指黑、白及各种明度的灰三种，除此以外的色彩，无论其灰艳、明暗程度如何，均属于有彩色系。
视觉所感知的任何一种彩色现象，都具备三个基本特征：色相、明度和纯色。非彩色只有明度属性。色相，指的是色彩的名称，亦称“色度”。这是色彩最基本的特征，是一种色彩区别于另一种色彩的最主要的因素。不同特征的色彩，代表了不同的色相。明度，也叫亮度、光度，指的是色彩的明暗或深浅程度。各种色彩都可以通过加白或加黑作明度色阶变化，纯度，指色彩的鲜艳程度，又称彩度、饱和度、艳度。纯度高的色彩纯，鲜亮。纯度底的色彩暗淡，含灰色。当一种色彩加入无彩色时都会不同程度地减弱该色相的鲜艳程度。
1，2色环理论
在对色彩的认知中，有很多值得思考的问题，许多科学家都曾尝试去了解颜色的物理特质，而且对于颜色理论有所贡献。
在研究色彩时，通常是用色环而不是用呈直线排列的光谱来表现色相的系列。处于可见光谱的两端的颜色一红色与紫色，被巧妙地连接起来，使色相序列显现出循环的形式，这就构成了色环。目前的色彩研究中，常用的是由瑞士色彩学家约翰·伊顿创立的12色相环，又称“伊顿色相环”见图1。在色相环中，可以表现出微妙而柔和色相过渡节奏。色相环上的色彩排列次序包含着色彩协调的基本途径。这种协调是以色相的渐次变化来实现的，有着非常鲜明的优点，可以直观地展示着色彩规律，把本是复杂的东西简化得十分通俗。构成原理是由红黄蓝三原色开始，两个原色相加出现间色，再由一个问色加一个原色出现复色，这样由原色、间色、复色组成了一个有规律的12种色相的色相环。色相环上包含了完全饱和的颜色和一些含有较多白、灰或黑的不饱和色，可作为渲染、色调和阴影的变化。
在图1中，井然有序的色相环让使用的人能清楚地看出色彩平衡、调和后的结果，颜色间的相互关系如相似色、互补色、暖色、冷色也一日了然。在网页色彩设计中，有效利用色环会给科学准确地定位色彩搭配有重要的作用。
2 门户网站配色技术
针对门户网站网页界面色彩设计，所做的色彩喜好及意象调查分析结果表明，影响色彩意象有三个因素：美丑因素、明暗因素及兴奋沉静因素。美丑因素受到色彩三属性全面的影响：明暗因素则受到明度的影响最大;而兴奋沉静因素则受色相与彩度的影响最大。
2，1色彩设计的一般标准
针对色彩评价的调查表明，不存在绝对统一色彩审美的唯一标准。但在设计时仍然有一些原则是可以遵循的。可以视之为一般条件下的一般标准。
2，1，1色彩与用户审美的统一
在网页设计之前，对页面所面对的用户以及对用户的审美倾向等问题要有清楚的定位。不同用户群体对色彩的接受存在很大的差别，色彩会因不同的性别、年龄、生活环境、种族等不同的因素，引发不同程度的生理与心理共鸣，不管是正面或负面。因此，对于门户网站颜色，一定要配合用户的心理或生理需求进行组合、搭配及设计。当在选定颜色组合时，必须考虑到所选择的颜色是否能引起适当的回响。符合接受者审美倾向的配色会激发阅读兴趣，在一定程度上有利于信息的传播。
2，1，2色彩与内容的统一
包彩与界面主要信息内容应有内在的联系，通过色彩倾向和色彩联想，突出主要内容，同时在用户的情绪上引发共鸣。
2，1，3色彩与功能的统一
色彩与信息传播功能需求要达成统一。利用色彩的视觉心理效果可以有效地促进信息的接受程度。
2，1，4色彩与构图功能的统一
色彩的美感是在构图的基础上表现出的一种总体感觉。构图本身就是～种表现形式，具有一定的形式美感，如重心的安定感，布局的均衡感，元素的条理与节奏等。色彩的美感正是由构图的这些形式要素统一体现出来的。在构图中要注意色彩的平衡，把握好轻重、明暗等关系，从而达到视觉上色彩力度的平衡状态，引起视觉的快感，激发人的情感与之呼应，给人以美的感受。
2，2网站设计的标准色彩
网站“标准色彩”指能体现网站形象和延伸内涵的色彩。一般来说，一个网站的标准色彩不超过三种，标准色彩要用于网站的标志、标题、主菜单、主页块等，给人以整体统一的感觉。
门户网站由于其地位的特殊性，所以在界面色彩设计时，一定要以科学的色彩理论为指导，以敏锐的感觉去发现，以高超的配色技巧去完成。
网页界面设计运用论文范文第2篇
摘要：DIV+CSS是目前最流行的网页制作技术，但学习起来枯燥，不宜熟练掌握。为了提高教学质量，提升学习效果，进而使学生由浅入深、循序渐进地掌握这门技术，本论文通过教学方法的选用、知识点、技能点实践环节的设计和考核方式的设计等方面的探索，经过教学实践，总结出一些经验。
关键词：DIV+CSS教学设计
引言：
网页设计课程是一门实践技能很强、技术手段不断更新的技能课，随着网络技术的飞速发展，在XHTML网站设计标准中，已不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。最直接的特点就是，代码冗余小，网页打开速度快。结构和表现分离了，只需改变css就可改变网页的风格，而内容不变，这样维护和升级的成本降低了。对于初学者，常常被枯燥的代码和编写语言搞得焦头烂额，要收到显著的教学效果，教学方法尤其显得重要。
一、教学方法设计
教学方法是一门课程的教学中，教师为了完成既定的教学任务，实现教学目标，而在教学过程中运用的教学方式和手段。面对课程知识点和实操强的特点，可突出以下几种教学方式。
强调记笔记。记笔记有助于对学习内容的理解。记笔记的过程也是一个积极思考的过程，可调动眼、耳、脑、手一齐活动，促进了对课堂讲授内容的理解。尤其越是逻辑性强的课程越需要一个良好的学习习惯，而这正是高职学生所欠缺的。因此，面对这种特点的学生，教学方法中一定要注重有意识让学生建立良好的学习习惯。从第一节课就开始提出记笔记的明确要求，并纳入到平时作业成绩考核中，让学生不得不先重视起来。不定期地在课上练习和课后作业中引入笔记的内容，让学生明显意识到课上记了笔记，平时注重积累，做练习就会提高效率，事半功倍，否则，按时完成作业都相对费劲。有一个现象叫“飞轮效应”.为了使静止的飞轮转动起来，一开始我们必须使很大的力气，一圈一圈反复地推，每转一圈都很费力，但是每一圈的努力都不会白费，飞轮会转动得越来越快.达到某一临界点后，便无须再费更大的力气，飞轮依旧会不停地快速转动。因此，培养学生好的学习习惯也是一样，开始教师和学生可能都会很累，但只要坚持不懈，学生就会逐渐养成稳定良好的学习习惯，看上去很累的学习就会变得自然轻松。老师也会越教越轻松。
鼓励原则。美国作家马克·吐温说过：“一句好听的赞辞能使我不吃不喝活上三个月。”这句话夸张地描述了表扬的魅力所在。有时，一个赞许的目光能使人鼓起勇气，信心百倍。对于这个观点，在多年的教学生涯中，相信许多老师都受益匪浅。当前，DIV+CSS已经成为制作网页的一种技术潮流和趋势，学习者也必须不断提高自己的技能来适应这种变化。各种XHTML标签和CSS属性在实际的操作中，往往问题层出不穷，令学生头疼不已，如果在这个时候，不及时加以鼓励，就会导致教学效果半途而废。因此，一定要在学生面对问题时，主动与其一起思考，提出解决该问题的关键点，让学生自己尝试，而不是直接告诉答案，教学效果不言而喻。学生会认为是自己经过艰苦思考而最终战胜了困难，自信心增强，也就有了继续学习下去的动力。
循序渐进。面对高职学生，想要取得好的教学效果，循序渐进的教学方法必不可少。在课堂教学中，不要放过任何一个看上去非常简单的问题，有些小问题往往不简单，可以延伸出许多知识点，只有熟练掌握学会举一反三才能更加自如地运用该门技术。要选定一个难易度适中的网站，既不能太难模仿，使学生产生畏难抵触心理，又不能太简单，而达不到巩固教学内容的目的。学生在“模仿”课环节，对指定的网站首页和其他主要网页进行模仿还原，该网站的各类素材可以直接使用，对于页面在尺寸、色彩、外观上也可以相同。对于这种特定的、明确的任务，学生往往会表现出极大的热情。
对比较学法。制作一个简单的网页，尤其运用以前的TABLE布局技术，上手很快，容易实现，大部分初学者一旦学习了表格布局技术，就很容易依赖，而不愿意去尝试DIV+CSS技术了。面对这种问题，就要适时运用对比教学法，例如通过制作一个“简单相册”的小例子，让学生分别运用TABLE技术和DIV+CSS技术制作，完成之后，让学生观察代码有何不同。可以明显看出，table时代，一个页面表格嵌套10个以上是非常普遍的事情，从而页面代码冗长，杂乱无章。然后紧接着提出迅速更新页面的风格，让学生继续尝试完成。通过实践，学生就可以清晰得出结论，DIV+CSS技术的优势，内容和形式分离，更新页面风格，只需要改动CSS文件就像换件衣服一样简单容易。DIV+CSS技术制作“简单相册”代码如下：
<style>
div，body，img，ul，li，p，a{ margin：0；padding：0}
.base{ margin：0 auto；width：530px}
ul{ list-style-type：none；width：530px}
li{ float：left；margin：0 5px；}
img{ width：150px；height：100px；border：1px solid #CCCCCC}
p{ font：\"宋体\"；font-size：9px；text-align：center}
h1{ font-size：24px；text-align：center}
</style>
<body>