情境1书法家庄辉个人网站模板效果图的设计与制作

1、地址:北京百万庄大街22号 邮编:100037 编辑热线: (010) 88379739地址:北京百万庄大街22号 邮编:100037 编辑热线: (010) 8837973922 :100037 : (010) 88379739情境情境1：书法家庄辉个人网站模板效果图的设计与制作：书法家庄辉个人网站模板效果图的设计与制作 第四章第四章 网站的色彩与布局网站的色彩与布局 22 :100037 : (010) 88379739项目展示与项目目标项目展示与项目目标1项目展示与项目目标项目展示与项目目标 22 :100037 : (010) 88379739色彩的基本理论: RGB颜色 网页颜色主要

2、有网页颜色主要有3种基本颜色组成的，他们是红（种基本颜色组成的，他们是红（Red）、绿（）、绿（Green）、）、蓝（蓝（Blue），其他的颜色是由这），其他的颜色是由这3种颜色调和而成的。种颜色调和而成的。例如，黄例如，黄=红红+绿，紫色绿，紫色=红红+蓝，白色蓝，白色=红红+绿绿+蓝蓝用用3个十六进制数来表示红、绿、蓝个十六进制数来表示红、绿、蓝3种颜色的含量，组成一个种颜色的含量，组成一个6位的十六位的十六进制数，就是进制数，就是RGB颜色。颜色。例如，红色为例如，红色为FF0000，绿色为，绿色为00FF00，黄色为，黄色为FFFF00，白色为，白色为FFFFFF。 关键知识点一：色彩

3、的基本理论关键知识点一：色彩的基本理论 2. 项目资讯项目资讯22 :100037 : (010) 88379739色彩的基本理论: 色环 红 橙 黄 绿 青 蓝 紫 红 2. 项目资讯项目资讯关键知识点一：色彩的基本理论关键知识点一：色彩的基本理论 22 :100037 : (010) 88379739色彩的基本理论: 颜色的三要素 色相：即是颜色的相貌称谓，如红色、橙色、黄色、绿色等。色相：即是颜色的相貌称谓，如红色、橙色、黄色、绿色等。纯度：也称饱和度。彩度，是指颜色的鲜艳程度，即颜色的色素含量。如纯度：也称饱和度。彩度，是指颜色的鲜艳程度，即颜色的色素含量。如果纯度高，则色彩艳丽，否则

4、颜色淡灰。正红色、正黄色、正蓝色等都是纯度果纯度高，则色彩艳丽，否则颜色淡灰。正红色、正黄色、正蓝色等都是纯度极高的颜色，而灰色则是纯度最低的颜色。极高的颜色，而灰色则是纯度最低的颜色。明度：也称亮度，是颜色的明暗程度，是各色相中白色的含量。白色是明明度：也称亮度，是颜色的明暗程度，是各色相中白色的含量。白色是明度最高的色调，白色的明度为度最高的色调，白色的明度为100%，黑色的明度为，黑色的明度为0%。 关键知识点一：色彩的基本理论关键知识点一：色彩的基本理论 2. 项目资讯项目资讯22 :100037 : (010) 88379739颜色代表的含义颜色代表的含义 l红色红色是一种对视觉器官

5、产生强烈刺激的颜色，在视觉上容易引起注意，在心理上容易引起情绪高昂，能使人产生冲动，愤怒，热情，活力的感觉。红色的具体表现是：火、血、心、苹果、夕阳、婚礼、春节等。红色的抽象表现是：热烈、喜庆、危险、革命、女性等。 l橙色橙色 橙色也是一种对视觉器官产生强烈刺激的一种颜色，由红色褐黄色组成，比红色多些明亮的感觉，容易引起注意。橙色的具体表现是：橙子、柿子、桔子、橘子、秋叶、砖头、面包等。橙色的抽象表现是：快乐、温情、积极、活力、欢欣，热烈，温馨，时尚、食欲等。 l黄色黄色 黄色也是一种对视觉产生明显刺激的颜色，容易引起注意。黄色的具体表现是：香蕉、柠檬、黄金、蛋黄、帝王等。黄色的抽象表现是：光

6、明、快乐、豪华、注意、活力、色情、快乐，希望，智慧等。 2. 项目资讯项目资讯22 :100037 : (010) 88379739颜色代表的含义颜色代表的含义 l绿色绿色 绿色是对视觉器官的温和，所以一般人都知道眼睛疲劳的时候，看着绿色有调节和恢复的作用，介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。绿色的具体表现是：草、植物、竹子、森林、公园、地球、安全信号等。绿色的抽象表现是：新鲜、春天、有生命力、和平、安全、年轻、清爽、环保。 l蓝色蓝色蓝色是对视觉器官的刺激较弱，在光线不足的情况下不易辨认，具有缓和情绪的作用。所以情绪的波动

7、时，看着蓝天和海洋，可以让人心情平静，它和白色混合，能体现柔顺，淡雅，浪漫的气氛。蓝色的具体表现是：水、海洋、天空、游泳。蓝色的抽象表现是：稳重、理智、高科技、清爽、凉快、自由等。 2. 项目资讯项目资讯22 :100037 : (010) 88379739颜色代表的含义颜色代表的含义 l紫色紫色 紫色由蓝色和红色组成，对视觉器官的刺激正好综合强弱，形成中性色彩。紫色的具体表现是：葡萄、茄子、紫菜、紫罗兰、紫丁香等。紫色的抽象表现是：神秘、优雅、女性化、浪漫、忧郁等。 l褐色褐色 褐色是橙色中加入了一定比例的蓝色或黑色所形成的暗色，对视觉器官刺激较弱。褐色是橙色中加入了一定比例的蓝色或黑色所形

8、成的暗色，对视觉器官刺激较弱。褐色的具体表现是：麻布、树干、木材、皮革、咖啡、茶叶等。褐色的具体表现是：麻布、树干、木材、皮革、咖啡、茶叶等。褐色的抽象表现是：原始、古老、古典、稳重、男性化等。褐色的抽象表现是：原始、古老、古典、稳重、男性化等。 2. 项目资讯项目资讯22 :100037 : (010) 88379739l白色白色 白色的自然日光是由多种有色光组成的，白色是光明的颜色。白色的具体表现是：光，白天、白云、雪、兔子、棉花、护士、新娘等。白色的抽象表现是：纯洁、干净、善良、空白、光明、寒冷等。 黑色黑色 黑色对视觉器官的刺激最弱。黑色对视觉器官的刺激最弱。黑色的具体表现是：夜晚、头

9、发、木炭、墨、煤等。黑色的具体表现是：夜晚、头发、木炭、墨、煤等。黑色的抽象表现是：罪恶、污点、黑暗、恐怖、神秘、稳重、科技、高贵、不安全、黑色的抽象表现是：罪恶、污点、黑暗、恐怖、神秘、稳重、科技、高贵、不安全、 深沉，神秘，寂静，悲哀，压抑等。深沉，神秘，寂静，悲哀，压抑等。 l灰色灰色灰色是白色与黑色的组成，对视觉器官刺激微弱。灰色的具体表现是：金属、水泥、砂石、阴天、乌云、老鼠等。灰色的抽象表现是：柔和、科技、年老、沉闷、暗淡、空虚、中性、缺乏生命力、中庸、平凡、温和、谦让、中立和高雅的感觉。 2. 项目资讯项目资讯关键知识点一：色彩的基本理论关键知识点一：色彩的基本理论 22 :10

10、0037 : (010) 883797392. 项目资讯项目资讯关键知识点二：网页配色的原则关键知识点二：网页配色的原则 1）强调特色，个性鲜明）强调特色，个性鲜明 2）总体协调，局部对比）总体协调，局部对比 22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点二：网页配色的原则关键知识点二：网页配色的原则 3）遵循艺术规则，合理搭配）遵循艺术规则，合理搭配22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点三：网页的配色方法关键知识点三：网页的配色方法 1）底色与图形要协调）底色与图形要协调 使用暖色配色的网站 使用冷色配色

11、的网站 2）需要考虑整体色系）需要考虑整体色系22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点三：网页的配色方法关键知识点三：网页的配色方法 3）善用色彩的调和）善用色彩的调和 4）善用色彩的对比）善用色彩的对比 22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点四：网页版式布局的要点关键知识点四：网页版式布局的要点 1）实用功能）实用功能网页内容的主次一定要从网页的版式上体现出来，网页设计要突出重点内容。网页内容的主次一定要从网页的版式上体现出来，网页设计要突出重点内容。网页的导航一定要清晰，这和网页的版式设计有着非常

12、重要的联系。网页的导航一定要清晰，这和网页的版式设计有着非常重要的联系。网页的版式布局设计决定了网页的布局，布局合理和逻辑性也是网页版式设网页的版式布局设计决定了网页的布局，布局合理和逻辑性也是网页版式设计的要点。计的要点。2）审美功能）审美功能网页的版式要具有整体性、一致性，总体来讲就是统一。网页的版式要具有整体性、一致性，总体来讲就是统一。要合理地划分整个页面，安排页面各组成元素，即分割。要合理地划分整个页面，安排页面各组成元素，即分割。通过合理运用矛盾和冲突，使设计更加富有生机和活力，即对比。通过合理运用矛盾和冲突，使设计更加富有生机和活力，即对比。当然再次也要考虑是功能优于形态？还是形

13、态优于功能？当然再次也要考虑是功能优于形态？还是形态优于功能？22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点五：网页布局类型的确定方法关键知识点五：网页布局类型的确定方法 1）把内容放入自己喜欢的网页类型中某科技有限公司网站某科技有限公司网站服务理念服务理念网站动画网站动画网站导航网站导航文档搜索文档搜索服务动态服务动态专家指导专家指导技术研讨技术研讨关爱关爱社会社会分类显示分类显示友情链接友情链接版权信息版权信息某企业网站的结构布局图 22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点五：网页布局类型的确定方法关键知

14、识点五：网页布局类型的确定方法 1）把内容放入自己喜欢的网页类型中淮信科技有限公司培训中心的网站 22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点五：网页布局类型的确定方法关键知识点五：网页布局类型的确定方法 2）草绘出几个不同的网页类型的模板 22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点五：网页布局类型的确定方法关键知识点五：网页布局类型的确定方法 2）草绘出几个不同的网页类型的模板 22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点五：网页布局类型的确定方法关键知识点五：网页

15、布局类型的确定方法 2）草绘出几个不同的网页类型的模板 22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点五：网页布局类型的确定方法关键知识点五：网页布局类型的确定方法 2）草绘出几个不同的网页类型的模板 22 :100037 : (010) 883797392. 项目资讯项目资讯关键知识点五：网页布局类型的确定方法关键知识点五：网页布局类型的确定方法 2）草绘出几个不同的网页类型的模板 22 :100037 : (010) 883797393. 项目计划与决策项目计划与决策 无名山人作品集（白色） 大小99665 背景褐色国画效果动画 大小996185 背

16、景褐色网站导航文字白色背景褐色宽160px书法家作品宽836px，高度可变，作品居中，作品大小440 x*440px，画布大小480 x*480px（文字白色，背景褐色）22 :100037 : (010) 883797394. 项目实施项目实施 水平65px水平250px水平896px水平160px22 :100037 : (010) 883797394. 项目实施项目实施 22 :100037 : (010) 883797394. 项目实施项目实施 a） b） 22 :100037 : (010) 883797394. 项目实施项目实施 22 :100037 : (010) 883797394. 项目实施项目实施 a） b） C） d） e） f） 22 :100037 : (010) 883797394. 项目实施项目实施 22 :100037 : (010) 883797394. 项目实施项目实施 22 :100037 : (010) 883797394. 项目实施项目实施 添加导航文字的效果 22 :100037 : (010) 883797394. 项目实施项目实施 给导航文字添加小方框符号 22 :100037 : (010) 883797394. 项目实施项目实施 22 :100037 : (0