网页设计的教学设计

1、网页的设教目：、掌握网页元素和网页构件的使用：、能进行简单的网页设计；教重：网页构件的使用；网页设计；教难：网页的设计；课： 时导：今天我们进入第六章网页的设计与制作的学习成功的网站不仅仅在于它的内容的多少的交互功能多强， 设计也是关键的一项，它决定了网站的艺术美是否能吸引浏览者的眼球。新：一网元的成打开 2007 年国中小学信息技术大赛中获奖作品鄱阳湖鹤生看并总结网页的组成元素有？文字、图 片、动画、声音、超链接等。一般情况下，网页都应该具备这三种元素，但是也有的网页只有其中的两种，甚至只有一种。有的网页就是 为了展示一篇文章，那么这个网页就没有必要放置图像；有的网页只用于显示一幅大尺寸的照

2、，也可以没有文字 说明；而有的网页纯粹就是提供资料，就不必设置超链接，这样，这个网页就成为网络中某一信息链终点， 即只有别的网页链接它。过渡：同学们想不想自己也做个网站呢？想做网站前提则是先设计网站，规划网站的主题，画草图。二网设现在给大家 钟的时间设计一个学校网站的主页，内容包括网页的主题、思考内容 怎样突出的网页的主题 网页的框架结构及特点 以什么色调为主及作用图、文有何讲究Angel 网页Music 网网版设的觉素为了增强人们对网页的注意程度，提高对于网页内容的理解程度，从而影响人们的思想和行为我们必须按照 人的视觉生理和心理特征，去设计我们的网页版式，以达到最佳的设计诉求。我们先来看一

3、下的视线移动规律： 人的视线沿水平方向运动比沿垂直方向运动快而且不易疲劳。 视的变化习惯于从左到右，从上到下和顺时针方向运动。 当线沿既不水平也垂直的斜线方向移动时在水平方向上约 45o 的围视线为从到右 移动，在垂直方向左右约 45o 的围内，视线为从上到下移动。符合视觉规律 文字横向编排由于人眼的视线横向移动比竖向移动快而且不易疲劳，因此将文字尽量横向排布，除非一些有殊设计要 求的版式或书法字体的版式。同时，页面尽量保持横向尺寸固定，竖向尺寸不固定，目的是使们能连续不间断地 浏览页面。需要注意的是，应避免页面左右、上下都能滚动，这会给浏览者带来极大的不便。 重要信息置于最佳视觉区”在进行网

4、页版式设计时，要考虑将最重要的信息或视觉流程的停留上安排在注目价值高的位置，就是“最佳 视觉区域于人们习惯于将线从左到右、从上到下移动，因而视区中的不同位置注目程度不同。版面中的不同区域会产生不同的注目程度给人的心理感受也不同它们给人的心理感受也是不的；上部有 轻快、上升、积极、愉悦之感；下部有沉重、稳定、压抑、消沉之感；左侧感觉轻松、舒展、由、主动；右侧感 觉庄重、局限、拘谨、被动。因此，在进行网页版式设计时，应考虑将重要信息或视觉流程的留点安排在页面的 “最佳视域”内。、避免视觉疲劳 限制网页长度尽可能将网页限制在 1 屏内，即满屏，浏览者不需要拖动滚动条就可以看到下面的导航信息。页面宜过

5、长，一 般控制在 13 屏，尽量不超过 屏 文字大小适中、行距合理在网页设计时应提供浏览者定制字体大小的功能。 位置的一致减少交互的次数，按照人的阅读习惯，固定导航的位置。免去用户去找导航的麻烦。 适量安排多媒体元素网页中的动画不是越多越好，而是要形成动静相宜的效果，因此需要适量安排多媒体元素，并意主次关系。 合理配色如果将大篇幅极亮的文字设计在极暗的背景上，容易因视觉长时间过分紧张而产生疲劳。因此注意网页的配色， 使其适合浏览者长期浏览。网设的成素（一式计网页的版式设计就将文字形图像色动视频等网页界面的传达要素根据特定的容和主题， 在网页所限定的范围内，运用造型元素和形式原理进行视觉的关联，

6、从而将涉及意图以视觉形表现出来。版式设 计将各元素组合配置，使页面内容一目了然，并获得悦目的视觉效果。在设计时，需要运用统、对比、对称、均 衡、节奏、韵律等形式原理，来构造出和谐、流畅、自然的网页界面幅现出对比和调和的网页的页面， 让学生体会网页板式构成的类型：、骨骼型 也栏，是一种规范的、理性的设计形式，类似于报刊的板式。常见的骨骼型有竖向的和横向 的通栏、双栏、三栏、四栏等，这种版式给人以和谐、理性的美。这种版式常用于公司网站的计示面， 学生意会）、国字型 口型同字型、回字形都归属于此类，是一些大型网站所喜欢的类型，即最上面是网站的标题、 导航以及横幅广告条，接下来就是网站的主要内容，左右

7、分列一些小条内容，中间是主要部分最下面是网站的一 些基本信息、联系方式、版权声明等。这种布局的优点是充分利用版面，信息量大，缺点是页拥挤，不够灵活。 （展页，生据计理分优点重分）、框架型 有右架型、上下框架型和综合框架型，这种版式常用语功能型的网站，如邮箱、论坛、博客 等（展示页面，学生意会）、中轴型 沿面中轴将图片、文字做水平或垂直方向的排列，给人稳定、平静、蓄、舒畅的感觉 示页面，学生意会）可能有差异，不同的色彩对人产生的心理效应更不同。不同地域、文化、年龄、性格、兴趣等同因素， 是决定色彩感受异同的根源这从人类社会数年来的发展所有的高级情感的角度来谈一下不同彩的象征意义 和心理暗示。 网

8、页主色调是绿色，铺盖面积比较大。于高亮度的颜色会给人过轻、没分量的感觉，因此设计师采 用起辅助效果的黑色，镇住轻飘的感觉，起到了很好的平衡作用。如果黑色出现在左上角，会高亮 度的绿色产生很强的对比，不适合以健康为主题的表达，设计师把深绿色放置在右上角，形成彩均 衡的做法是十分明智的。主色调是掌握整个网页色彩气氛的主要因素，而辅色面积小，起强调或缓冲调和的作用。起强作用 的辅色是空间中动感和活力的来源，还可以因其色彩“点”的作用使主色在整个网页中得到连。辅 色一般为醒目突出的色彩。网页配色准则色彩和所表达的内容气氛相适合，选择色彩要和你网页的内涵相关联。所使用的色彩产生的联不能与所 表达的基调相

9、违背。遵循色彩适应性原则，避免可能发生的视觉混淆。配色的运用因人而异，要为追求色彩的和 谐与稳定。 背景与文字如果一个网站用了背景颜色，必须要考虑到背景颜色的用色与前景文字的搭配等问题。一般的站侧 重的是文字，所以背景颜色可以选择纯度或者明度较低的色彩，文字用较为突出的亮色，让人一了然。 为了让浏览者对网站留有深刻的印象，有些网站设计了独特的背景、同类色调 同色调能增强网页的统一效果。网页中基调有大面积的同类色产生，改变同类色彩的明度、 纯度构成千变万化的色彩效果。、蓝色调 强精密性、稳重型、科技型的网站，多采用蓝色调。因为深蓝色传清高的感情色彩，是科 技时代的代表色彩网页，生意会）、动感色调

10、 娱、体育、儿童网站等多数需要表现出活泼、动感的视觉效果，尽量是用鲜艳的颜色会稳 妥些，避免使用严肃、庄重的黑色，加入一些白色，会是页面具有单纯、明亮的感觉页学生意会）、时尚色调 表时尚感，可以采用冷色调，并搭配少量暖色作为点缀，当页面色彩过于丰富时，可以通 过白色来缓解网，学生会）、高雅色调 这网站可用紫色、褐色、土黄色等来营造高雅氛围。对比色的调和对比色的调和方法有：提高或降低对比色的纯度，在对比色之间插入分割色（金、银、黑、白灰等 用双方面积大小不同的处理方法，对比色之间加入相近的类似色。黑在绘画和艺术设计中它是可以任何颜色相配的极色。它体现了高贵、高雅、消极、悲伤、沉稳、沉闷、 死亡、

11、邪恶、明确和坚定。网页设计中黑色的使用常常能达到四两拨千斤的作用，使与之邻近界面信息成为视觉 的焦点。白 黑色相对的颜色，同样也是极色，可以与任何颜色相配。它常给人以纯洁的、完美的、正义的不可 触及的、不可接近的、不可解释的、整洁的、神圣的、空洞的、无限的、沉默等心理暗示。灰也是一种可以与任何颜色相配颜色。灰色的色彩意象，在商业设计中，灰色具有柔和，高雅的意象，而 且属于中间性格，男女皆能接受，所以灰色也是永远流行的主要颜色，使用灰色时，大多利用同的层次变化组合 或他配其他色彩，才不会过于素、沉闷，而有呆板，僵硬的感觉。 红在绘画和艺术设计的范畴里红往往给人以力量活的愉悦高度的感觉红传达着热量

12、力、 友好、喜庆和个人魅力。红色有些时候用来做心理上的警示。 蓝蓝在视觉上往往给人一种被动、静谧、深邃、寒冷、潮湿、谨慎、忧郁、宗教、科技、冷静与智的 感觉。瑞士的两个色彩心理学专家对蓝色已有以下定:种透彻的、女性化的颜色，可以制造安静、松弛的气氛。 反之，它会引起人梦幻、童话、整洁、清爽的感觉。3.色人们常常通过黄色联想到:太阳、温暖、自由、年轻、快乐、开放、奇特、乐观等等人们使用黄色往往 是在心理上寻求一种朝气和活力、自主、自由不被拘束、幸运而舒适的感觉。 4.绿色绿色常使人联想起自然、和谐、安静、坚定和生命。绿色具有黄色和蓝色的某些特征，色环上色偏 近黄色时，绿色就变得温暖、稚嫩、活泼、

13、健康而无危害性。如果再加进一些白色，就会给人一种女性的柔和与 轻盈的感觉。 5.橙色橙色也像绿色一样具有其他两种原色的特征。橙色常给人的感觉:快乐、开放、大方、亲密、直、 热烈、温暖、秋天、无拘束、有活力和感情洋溢。人的行动在橙色的氛围里没有任何拘束，因橙色很大程度上代 表了温暖和真挚的感情。 6.紫色紫色令人联想到昏暗、神秘、深刻、内向、高贵、悲伤、禁止、魅力、暧昧、不可靠等等。它同绿色、 橙色一样，具有相邻的两个原色的部分特征。紫色越深，则反映出的效果越呆板、严格、不近情，并给人以强烈 的神秘感。棕色它常被人视为一种坚固的、诚实的、亲切、稳定和安全的颜色。它让人联想到脚下的土地、结耐用 的

14、物件、动物皮毛的温暖、几近于平淡和无聊、随和、豪放、古典与怀旧、爱的严肃和值得信。（三字编排与设计要达到网页文字传达的有效性，必须重视文字编辑的整体效果，是网页文字能给人以清晰的视印象，避免页 面繁杂零乱，减去不必要的转世变化，使人易认、易懂、易读。网页文字的设计不能为了艺术型而编辑，忘记了 文字本身是传达内容和表达信息的主题。网页字体与字体编排在网页设计中，字体的处理与色彩、版式、图形等其他设计元素的处理一样非常关键。从艺术角度可以将字 体本身看成是一种艺术形式，它在个性和情感方面对人们有着很大影响。网页文字设计技巧 1.提高可读性（1让你想表达的内容清晰、醒目，让浏览者一开始就可以明白你的

15、意思。（2避免使用不清晰的字体，否则容易使阅览者产生反感和麻烦。（3注意恰当的选择你所需要的字体，适当采用虚实对比、大小对比。（4注意文字编排方向，注意安排阅览者的视线，适当运用直线与曲线编排。（5根据视觉流程的原理，通常将重点放在右边。 2. 精位置（1注意文字的对齐、适当拉来间距、适当安排行距。（2注意图文交错，既不要影响图形的观看，也不能影响文字的阅览。（3文字不要顶天立地，也不要支持边角 3. 营视觉美感文字作为网页形象要素之一，具有传达感情的功能，因而它必须具有视觉上的美感，能够给人美的 感受。字型设计良好，组合巧妙的文字能使人感到愉快，留下美好的印象，从而获得良好的心反应。反之，则

16、使 人看后心里不愉快，视觉上难以产生美感，甚至会让观众拒而不看，这样势必难以传达出作者表现出的意图和构 想。注意改变文字的位置和大小，适当调节字间距。对于段落文字的处理应注意，字体加大后段落之间的距离也 应该随之调整。小字体同样应用这一规则，不过是相反的。 4.富于创造性设计时，应从字的形态特征与组合上进行探求，不断修改，反复琢磨，这样才能创造出富有个的文 字，使其外部形态和设计格调都能唤起人们的审美愉悦感受。加入感受在字体里面，对文字的小、间距、透明度 做些调整，就会是完全不同的效果了。差别就在这里，也许只是一点小改动，但是需要你思考却更多。有时候对 文字的笔画做特殊的加工处理往往会产生一些

17、意想不到的效果这的处理是带有创造性的同时人性化的味道 也会更浓一些。这是电脑字体所无法替代的效果，带给观看者的感受自然会要强烈的多。网页文字设计方法 笔突变笔画突变是指在局部的某个或者某些笔画上采用不同于正常笔画的形态造型，突出文字内涵和征。 添形象添加形象主要是通过在汉字局部笔画上添加与汉字表义相关的图像或图形来增加汉字的表意功个笔画换成有意义或有趣地图形，会使整个视觉活跃起来，海尔网页火字的设计 。 笔连接笔画相连是通过一组文字笔画上的连贯来表达文字间的关系，增强一组文字的视觉感染力。 会及象形会意及象形是指通过对所设计的汉字字意的深刻内涵加以挖掘，以象形或者会意的形态来传达字的 信息 。

18、表面装饰字体的表面装饰是通过对文字笔画的局部或者整体装饰，来增强文字传达的效果和感染力。（四形像的创意与设计图形图像能将信息传达得更具体、真实、直接、易于理解，从而高效率高质量的表达设计理念使网页充满强烈的 感情色彩。在网页中合理的应用图形图像，能够形成视觉信息的中心，有利于重要信息的传构成要素点线、面点、线、面是平面设计的基本元素和主要视觉语言，是一切构成设计中最基本的造型要素，存于任何造型设 计之中。作为视觉形式的语言，构成网页设计图形图像的最基本的要素是点、线、面，通常被们称为构成三要 素。在网页设计时，运用组合、对比、均衡、节奏、统一等构成方法将它们进行安排，互相补，互相衬托，就 可以

19、创造出形式多样，引人注目的网页，从而将网站的信息有效地传达给浏览者。 1.点点必须要以视觉的表现为前提，因此点是一种具有空间位置的视觉单位，而且有大小不同的面和不 同的外观特征以及属性。点可分为规则点和不规则点两类，如圆点、方点、三角点属于规则点而锯齿点、泥点、 雨点则属于不规则点。点无一定的大小和形状，点的概念是相对的，是与周围的视觉元素相比较而言的。只要与周围他造型 要素共同比较时具有凝聚视觉的作用，都可以称为点。点的判断完全取决于它所在的空间的相关系上面，越小的 形体越能给人点的感觉，点的面积变大就成了面。 2.线任何形态都可以通过线的界定而确定下来。因此在网页设计中，线的布局安排主要体现在线的间分 割上。线的分割产生各种比例的面。在利用线进行页面分割时，既要考虑各形态元素彼此间支的形状，又要注意 空间所具有的联系，保证良好的视觉秩序感，这就要求被划分的空间有相应的主次关系、呼应系和形式关系，以 此来获得整体和谐的视觉空间。网页中的图文在直线的空间分割下，会得到清晰、条理的秩序，同时求得统一和谐的因素。而过不 同比例的空间分割，页面各空间将会产生对比与节奏感。线框的限定使网页中的动感与情感获得相应的稳定