高二第四课网页的美化技术- cookie605的日志- 网易博客企业库|免费b2b网站

高二第四课网页的美化技术- cookie605的日志- 网易博客

高二第四课　网页的美化技术

2010-06-09 01:31:46 阅读9 评论0 字号：大中小

第四课　网页的美化技术

学习目标：初步掌握网页美化的基本原理。

学习重难点：网页的排版布局与色彩搭配。

学习方法：讲解＋练习

学习内容：

一、网页美化的构成

　　网站设计的目的在于把需要表达的信息以恰当的方式组织并呈现在网上，设法吸引人们的关注，并为浏览者提供方便的访问。而网页制作是属于平面设计的一种，其页面的美化工作主要由排版布局和色彩搭配两个组成部分。

　　要实现页面的美化、网站的统一风格，我们需要通过不断观摩和学习才能掌握。

　　下面几个例子就是很不错的网页美化的效果，我们参考分析一下，并分别对网页的排版布局和色彩搭配展开讨论。

再分析一下下面两个网页的特点：

　（点击打开大图）

　　这几个页面我们主要是分析一下他们的版面结构和色彩搭配。

二、网页的版面设计

　　网页的版面效果在吸引访问者浏览网页中起了重要的作用，网页的版面设计主要是进行网页的风格设计和版面布局设计，一个色彩搭配合理、版面布局清新的网站会让访问者留恋往还。
　　 1.风格设计
　　风格是指网站的整体形象给浏览者的综合感受。有的严肃计策，有的清爽温馨　，有的深沉厚重，有的生动活泼，有的古朴典雅，有的豪迈奔放。风格设计与主题是密不可分的，是为突出主题服务的。
　　一种风格的形成需要从多方面着手设计，包括网页布局的整体造型、色彩的搭配、字体图片的样式设置、网站的标志设计等，同一个网站的各网页之间应保持风格一致。
　　 2.版面布局设计
　　网页要呈现的内容很多，概括起来可分为标题信息、栏目信息、内容信息、附加信息等，需要进行合理的放置，让人看起来井井有条，主次分明。
　　一个网页的版面通常以屏幕中央最能引人注意，屏幕上方紧随其后，屏幕的左右侧通常放置不太重要或固定信息，附加信息（如版权信息）一般放在最下方。
　　版面布局的整体造型和色彩搭配的灵活运用也会影响人们的注意力，产生不同的视觉效果。版面布局没有{jd1}统一的方法，应视需要而定，有创意的布局会给人以耳目一新的感觉。

三、页面的色彩搭配

1、网页色彩的选择

　　不同的颜色会给人们不同的心理感受，设计网页时，要结合主题的需要选择不同的色彩。
　　■红色：是一种激奋的色彩，能使人产生喜庆、热情、活力的感觉。　
　　■绿色：介于冷暖两种色彩的中间，显得和睦、宁静、健康、安全，它和金黄、淡白搭配，可以营造优雅舒适的气氛。
　　■橙色：也是一种激奋的色彩，具有轻快、欢欣、热烈、温馨、时尚的效果。
　　■蓝色：是{zj1}凉爽、清新、专业的色彩，它和白色混合，能体现柔顺、淡雅、浪漫的气氛。
　　□白色：让人产生洁白、明快、纯真、清洁的感觉。
　　■黑色：使人产生深沉、神秘、寂静、悲哀、压抑的感觉。
　　■灰色：让人联想到中庸、平凡、温和、谦让、中立和高雅的感觉。

　　每种色彩在饱和度、透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春、旺盛的视觉意境，而蓝绿色则显得幽静、阴深。

2、网页色彩搭配的原理

　　1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。

　　2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。

　　3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。

　　4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

　　在网页配色中，不要将所有的颜色都用到，尽量控制在三种色彩以内，背景色和前景文字的对比尽量要大，以便让文字看起来更清晰。

参考站点：

四、网页模板集锦

　　以下是一些网页模板的下载链接，这些模版的色彩和布局都已经设计好，如果有需要我们可以借来根据自己的站点主题对其进行修改，套用：

　　 1）
　　 2）
　　 3）
　　 4）

　　这几节课的内容比较多，同学们可以从中分别挑选几个来练习，没有练习的请同学课后花些时间练一练。同时，这方面的素材在互联网上有很多，同学们要学习更多的技巧、{tx}可以到网上去搜索。

<#--{zx1}日志--> <#--推荐日志--> <#--引用记录--> <#--相关日志--> <#--推荐日志--> <#--推荐阅读--> <#--相关文章--> <#--历史上的今天--> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构-->

郑重声明：资讯【高二第四课网页的美化技术- cookie605的日志- 网易博客】由发布，版权归原作者及其所在单位，其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实，请读者仅作参考，并请自行核实相关内容。若本文有侵犯到您的版权，请你提供相关证明及申请并与我们联系（qiyeku # qq.com）或【在线投诉】，我们审核后将会尽快处理。

—— 相关资讯 ——