网页设计基础
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
实验一网页设计基础(4课时)
实验目的:
了解网页中基本元素
了解网页设计常用工具
了解网页常见的布局类型
了解网页配色方案
了解网页图像和文字的设计原则
实验内容:
1、搜索下面一些关键词:网页元素、网页工具、网页布局、网页配色、网页(或网站)设计原则、网页(或网站)设计流程)、主页(或首页)设计,从搜索结果中学习掌握相关知识,并回答问题:
①网页由哪些基本元素构成?
网页元素包括,文字、图片、音频、动画、视频。文字,符合排版要求。图片、音频、动画、视频,符合网络传输及专题需要,需要精选。
②有哪些常见的网页布局类型?
网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型
①1、“国”字型:也可以称为“同”字型,是一些大型网站所喜欢的类型,即最上面是网站的标题
以及横幅广告条,接下来就是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。
②2、拐角型:这种结构与上一种其实只是形式上的区别,其实是很相近的,上面是标题及广告横幅,
接下来的左侧是一窄列链接等,右列是很宽的正文,下面也是一些网站的辅助信息。在这种类型中,一种很常见的类型是最上面是标题及广告,左侧是导航链接。
③3、标题正文型:这种类型即最上面是标题或类似的一些东西,下面是正文,比如一些文章页面或
注册页面等就是这种类。
④4、左右框架型:这是一种左右为分别两页的框架结构,一般左面是导航链接,有时最上面会有
一个小的标题或标致,右面是正文。我们见到的大部分的大型论坛都是这种结构的,有一些门户网站也喜欢采用。这种类型结构非常清晰,一目了然。
⑤5、上下框架型:与上面类似,区别仅仅在于是一种上下分为两页的框架。
⑥6、综合框架型:上页两种结构的结合,相对复杂的一种框架结构,较为常见的是类似于“拐角型”
结构的,只是采用了框架结构。
⑦7、封面型:这种类型基本上是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小
的动画,放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果说处理的好,会给人带来赏心悦目的感觉。
⑧8、Flash型:其实这与封面型结构是类似的,只是这种类型采用了目前非常游戏行的Flash,与
封面型不同的是,由于Flash强大的功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。
⑨9、变化型:即上面几种类型的结合与变化,比如本站在视觉上是很接近拐角型的,但所实现的
功能的实质是那种上、左、右结构的综合框架型。
③网页配色方案是怎样的?包括网页不同色彩代表什么含义?色彩搭配要注意哪些原则?
配色方案:单色(法):它有一个单独的颜色打底,我们只需要调整其色度并着手设计即可。单一色彩看起来典雅漂亮,且容易将纯色融合在内。但是要通过单一色彩组合来创建吸引眼球的设计却不是一件容易事。
色彩补充法:一个冷色系和一暖色系的色彩相搭。例如,你的标题是暗黑色的,但内容可以是白色的。这也是网站设计使用最多的方法。
三色组合法:顾名思义,该方法使用色轮中等色度距离的三种色彩搭配。
四色组合法:与三色组合相同,四色组合法使用了四种色彩搭配。模拟法:这种方法借用了色轮中的邻近的三个色彩,比如说,紫色、红色和橙色。
不同色彩含义:一、红色的色感温暖,性格刚烈而外向,是一种对人刺激性很强的色。红色
容易引起人的注意,也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
1、在红色中加入少量的黄,会使其热力强盛,趋于躁动、不安。
2、在红色中加入少量的蓝,会使其热性减弱,趋于文雅、柔和。
3、在红色中加入少量的黑,会使其性格变的沉稳,趋于厚重、朴实。
4、在红中加入少量的白,会使其性格变的温柔,趋于含蓄、羞涩、娇嫩。
二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中,
最为娇气的一种色。只要在纯黄色中混入少量的其它色,其色相感和色性格均会发生较大程度
的变化。
1、在黄色中加入少量的蓝,会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失,趋于
一种平和、潮润的感觉。
2、在黄色中加入少量的红,则具有明显的橙色感觉,其性格也会从冷漠、高傲转化为一种有
分寸感的热情、温暖。
3、在黄色中加入少量的黑,其色感和色性变化最大,成为一种具有明显橄榄绿的复色印象。
其色性也变的成熟、随和。
4、在黄色中加入少量的白,其色感变的柔和,其性格中的冷漠、高傲被淡化,趋于含蓄,易
于接近。
三、蓝色的色感冷嘲热讽,性格朴实而内向,是一种有助于人头脑冷嘲热讽静的色。蓝色
的朴实、内向性格,常为那些性格活跃、具有较强扩张力的色彩,提供一个深远、广埔、平静
的空间,成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个
性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色,均不会对蓝色的性格构成较
明显的影响力。
1、如果在橙色中黄的成份较多,其性格趋于甜美、亮丽、芳香。
2、在橙色中混入小量的白,可使橙色的知觉趋于焦躁、无力。
四、绿色是具有黄色和蓝色两种成份的色。在绿色中,将黄色的扩张感和蓝色的收缩感相中庸,
将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、
恬静、潢足、优美的色。
1、在绿色中黄的成份较多时,其性格就趋于活泼、友善,具有幼稚性。
2、在绿色中加入少量的黑,其性格就趋于庄重、老练、成熟。
3、在绿色中加入少量的白,其性格就趋于洁净、清爽、鲜嫩。
五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
1、在紫色中红的成份较多时,其知觉具有压抑感、威胁感。
2、在紫色中加入少量的黑,其感觉就趋于沉闷、伤感、恐怖。
3、在紫色中加入白,可使紫色沉闷的性格消失,变得优雅、娇气,并充满女性的魅力。
六、白色的色感光明,性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色
中加入其它任何色,都会影响其纯洁性,使其性格变的含蓄。
1、在白色中混入少量的红,就成为淡淡的粉色,鲜嫩而充满诱惑。
2、在白色中混入少量的黄,则成为一种乳黄色,给人一种香腻的印象。
3、在白色中混入少量的蓝,给人感觉清冷、洁净。
4、在白色中混入少量的橙,有一种干燥的气氛。
5、在白色中混入少量的绿,给人一种稚嫩、柔和的感觉
6、在白色中混入少量的紫,可诱导人联想到淡淡的芳香
色彩搭配原则
在选择网页色彩时,除了考虑网站本身的特点外还要遵循一定的艺术规律,从而设计出精美的网页。
1.色彩的鲜明性:
如果一个网站的色彩鲜明,很容易引人注意,会给浏览者耳目一新的感觉。
2.色彩的独特性:
要有与众不同色彩,网页的用色必须要有自己独特的风格,这样才能给人浏览者留下深刻的印象。
3.色彩的艺术性:
网站设计是一种艺术活动,因此必须遵循艺术规律。按照内容决定形式的原则,在考虑网站本身特点的同时,大胆进行艺术创新,设计出既符合网站要求,又具有一定艺术特色的网站。
4.色彩搭配的合理性:
色彩要根据主题来确定,不同的主题选用不同的色彩。例如,用蓝色体现科技型网站的专业,用粉红色体现女性的柔情等。