1.2 网站配色方案（课件）-高一《网页设计与制作（Dreamweaver CC》同步精品课堂（电工版2021）

网页设计与制作（Dreamweaver CC） 第三版 网站配色方案 网页设计基础 网站配色方案 1.2 学习任务描述： 通过在记事本和Dreamweaver中使用HTML代码制作网页，介绍HTML代码的常用标记，以及使用HTML代码制作简单网页的方法。 1、色彩的基础知识 色彩是网站最主要的组成部分，页面的色彩处理得好，可以锦上添花，达到事半功倍的效果。色彩一般分为无彩色和有彩色两大类。无彩色是指黑、灰、白等不带颜色的色彩，有彩色是指红、黄、蓝带颜色的色彩。 网站配色方案 1.2 （1）色彩 色相：指色彩的相貌，也就是各种颜色的区别，是色彩最显著的特征。 明度：指色彩本身的明暗程度，简单来说，就是色彩的程度 纯度：指色彩本身的鲜艳程度，又称为饱和度。 网站配色方案 1.2 （2）色彩的感觉 红色：最引人注目的色彩，具有强烈的感染力，象征热情、喜庆、幸福，是节日和庆祝活动的常用色。 绿色：是与大自然的生命一致的色彩，象征平静、健康、健全、和谐和安全e 蓝色：使人联想到天空、海洋，给人以爽朗、清凉的感觉，象征平静、稳定、和谐、 黄色：给人明朗、愉快的感觉，象征光明、希望、咼贵、愉快。 网站配色方案 1.2 橙色：介于红色与黄色之间，可以营造一种温馨的氛围，象征温馨、时尚、轻快。 紫色：是一种优雅、高贵、充满灵性并能激发创造力的颜色，象征优雅、高贵、神秘、忧郁。 白色：给人以干净、整洁的感觉，象征纯洁、天真、轻松、神圣。 黑色：是一种比较经典的色彩，象征严肃、神秘、威严、深沉、压抑。 灰色：是一种可以衬托任何色彩的颜色，象征温和、谦让、平凡、考究。 2．色彩的搭配原则 网站配色方案 1.2 （1）网页色彩搭配时，要善用单色、对比色、邻近色和同类色。 （2）网页要用与众不同的色彩，不同类型的网站配以不同的色彩，从而表达不同的情感诉求。 （3）色彩要和网站的内容、文化氛围相符，以便更好地突出网站的特色。 （4）网页配色时，尽量把颜色控制在三种之内，以免使页面产生“乱”的效果。 3.常见的配色方案 网站配色方案 1.2 （1）儿童类网站：常运用幸福感强烈、温情、智慧和希望的黄色：干诤、清澈的蓝色；有朝气、健康、自然的绿色；温馨、活泼、有朝气的橙色。 （2）教育类网站：常运用平静、清澈的蓝色或代表希望的绿色。 （3）企业类网站：常运用沉稳、冷静、严谨、成熟的冷色调蓝色，给人一种稳定感，使访问者容易建立对网站的信任。 （4）购物类网站：常运用红色、黄色、橙色等暖色调渲染氛围，让访问者感觉到轻松愉快。 （5）旅游休闲类网站：常运用代表大自然、健康和希望的绿色，以及代表天空、海洋的干净、清澈的蓝色。 网页设计常用的软件 1.网页设计开发软件 （1）文本编辑器 制作网页通常使用HTML、 HTML文档可以使用多种文本编辑器进行编辑，如记事本、word、写字板、UltraEdit等。其中，UltraEdit是一套功能强大的文本编辑器，可以编辑文本、十六进制、ASCII码，具有HTML标签颜色显示、搜索、替换及无限制的还原功能，但不具各所见即所得功能，适合编辑HTML文档源代码，也称为源代码编辑器。 网站配色方案 1.2 网页设计常用的软件 1.网页设计开发软件 （2）FrontPage FrontPage是微软公司出品的一款网页制作入门级软件，使用方便、简单，会使用word 就能制作网页，所见即所得是其特点。FrontPage结合了设计、HTML预览三种显示模式，相对于其他专业设计软件，其功能简单，不适合制作复杂的动态网页，适合初学者使用。 网站配色方案 1.2 网页设计常用的软件 1.网页设计开发软件 （3）Dreamweaver Dreamweaver是由Adobe公司推出的一款所见即所得的网页编辑器，支持最新的web技术，包含HTML检查、HTML格式控制，也支持可视化网页设计，能够处理Flash和Shockwave 等媒体格式，是当前流行的网站设计工具。 （4）HBuilderX HBui1derX是一款支持HTML5的Web开发工具。HBuilderX体积小、启动快，提供较全的语法库和浏览器兼容性数据，让使用者不再为浏览器的兼容问题而烦恼。 网站配色方案 1.2 网页设计常用的软件 2.网页美化工具 （1）Photoshop Photoshop是由Adobe么司开发的一种图形图像软件，是目前取好、、设计软件之一其功能完善、性能稳定、使用方便，是美化网页的常用工具。 网站配色方案 1.2 网页设计常用的软件 2.网页美化工具 （2）Fireworks Fireworks是一款专门为网络图形设计的图形编辑软件，大大简化了网络图形设计的工作难度。无论是专业设计师还是业