网站美工设计基础 第1章21世纪网页设计的审美传播 第1章21世纪网页设计的审美传播 学习目标 本章侧重介绍网站美工的基本理论、基础知识、基本技 能和方法，了解网站和网页的基本设计思想，使学习者掌握 色彩基础知识、平面构成、版式及剑意等相关的内容。在完 成基础知识教学任务的同时，着重提高学习者对网页设计的 认识和理解。 学习要求 掌握：网页与平面构成、网页与色彩之间的相互关系。 理解：美术基础知识在网页制作过程中的重要作用。 了解：美术基础知识在网页制作过程中不可或缺的地位。 09-0130珠海城市职业技术学院珠海广播电视大学杨晓安冈D☒
网站美工设计基础 第1章21世纪网页设计的审美传播 09-01-30 珠海城市职业技术学院珠海广播电视大学 杨晓安 学习目标 本章侧重介绍网站美工的基本理论、基础知识、基本技 能和方法，了解网站和网页的基本设计思想，使学习者掌握 色彩基础知识、平面构成、版式及创意等相关的内容。在完 成基础知识教学任务的同时，着重提高学习者对网页设计的 认识和理解。 学习要求 掌握：网页与平面构成、网页与色彩之间的相互关系。 理解：美术基础知识在网页制作过程中的重要作用。 了解：美术基础知识在网页制作过程中不可或缺的地位。 第1章 21世纪网页设计的审美传播
网站美工设计基础 第1章21世纪网页设计的审美传播 ■1.1网页概述 ■1.2网页设计与美术基础知识 ■本章实训 08-0130珠海城市职业技术学院信息与工程系杨晓安冈☑D】
网站美工设计基础 第1章 21世纪网页设计的审美传播 08-01-30 珠海城市职业技术学院信息与工程系 杨晓安 1．1 网页概述 1．2 网页设计与美术基础知识 本章实训
网站美工设计基础 第1章21世纪网页设计的审美传播 1.1网页概述 ■在现代生活中，互联网络所起的作用是巨大和 不可限量的。目前全世界有150多个国家和地区 的数万个区域已被互联网络连在了一起，而众 多的网站是集最新、最快、覆盖面最广的网络 信息平台，已作为21世纪最为广泛的大众传播 媒介走进千家万户，走近人们的身旁。网页是 构成网站的基本元素，是承载各种网站应用的 平台。 08-0130珠海城市职业技术学院信息与工程系杨晓安
网站美工设计基础 第1章 21世纪网页设计的审美传播 08-01-30 珠海城市职业技术学院信息与工程系 杨晓安 1．1 网页概述 在现代生活中，互联网络所起的作用是巨大和 不可限量的。目前全世界有150多个国家和地区 的数万个区域已被互联网络连在了一起，而众 多的网站是集最新、最快、覆盖面最广的网络 信息平台，已作为21世纪最为广泛的大众传播 媒介走进千家万户，走近人们的身旁。网页是 构成网站的基本元素，是承载各种网站应用的 平台
网站美工设计基 第1章21世纪网页设计的审美传播 网络信息的特点 ■网络已经成为全新的大众传播媒体一成为集交流、传播 信息为一体的信息工具。虽然网络是集音频、视频、文字 传输为一体的多媒体媒介，但网络信息最主要的特点在于 它的交互性和可选性。 ■交互性：人们通过网络平台相互快速传递的大流量信息； ■可选性：人们不仅可以根据自身需要和兴趣随时提取和观 看网上信息，还可以随时任意切换信息界面，从不同层次 了解需要的信息，甚至还可以把人们对信息的各种交流意 见进行即时编辑和反馈，从而以最大效率提供给用户最便 捷、最趋完善的服务。 ■在包容巨大信息量的网络系统中，展示给我们的是最能吸 引人们注意力的窗口一网页。 08-01-30珠海城市职业技术学院信息与工程系杨晓安
网站美工设计基础 第1章 21世纪网页设计的审美传播 08-01-30 珠海城市职业技术学院信息与工程系 杨晓安 网络信息的特点 网络已经成为全新的大众传播媒体——成为集交流、传播 信息为一体的信息工具。虽然网络是集音频、视频、文字 传输为一体的多媒体媒介，但网络信息最主要的特点在于 它的交互性和可选性。 交互性：人们通过网络平台相互快速传递的大流量信息； 可选性：人们不仅可以根据自身需要和兴趣随时提取和观 看网上信息，还可以随时任意切换信息界面，从不同层次 了解需要的信息，甚至还可以把人们对信息的各种交流意 见进行即时编辑和反馈，从而以最大效率提供给用户最便 捷、最趋完善的服务……。 在包容巨大信息量的网络系统中，展示给我们的是最能吸 引人们注意力的窗口——网页
网站美工设计基础 第1章21世纪网页设计的审美传播 网页 ■网页是网站在计算机上提供给人们浏览的一个信 息窗口，是集音频、视频、文字传输为一体的多 媒体界面。 ■在实际使用中，网页又可分为一级网页、二级网 页、三级网页...如图1一1,1一2,1—3所示。 http://www.51yala.com/ http://www.cnta.gov.cn/ ■一般意义上来说，网页主要由文字和图像两个方 面的因素组成。 08-0130珠海城市职业技术学院信息与工程系杨晓安
网站美工设计基础 第1章 21世纪网页设计的审美传播 08-01-30 珠海城市职业技术学院信息与工程系 杨晓安 网页 网页是网站在计算机上提供给人们浏览的一个信 息窗口，是集音频、视频、文字传输为一体的多 媒体界面。 在实际使用中，网页又可分为一级网页、二级网 页、三级网页……如图1—1，1—2，1—3所示。 http://www.51yala.com/ http://www.cnta.gov.cn/ 一般意义上来说，网页主要由文字和图像两个方 面的因素组成
网站美工设计基础 第1章21世纪网页设计的审美传播 中国旅游网 回中国依而调中钢旅希绿点中网花斋地周中网家蕾第一门户一微南[懂h】 风 a】8·日a·8 安的irs省看rsei,”口 回中华人民其和图网家装影与一原善值h 地址a]1ttp:/w,.51rLa.en/ 0日☒·日回·☒ 务)Yindews Yindews Hedi.投同 中 象a 中华人民共和 出口光济出口出口选项附 中华人民共和国国家旅游局 赶快加盟站 四鞋广内家国省中圆青年放行社 周川监影九来爱龙道山于山 字新国行业动立地方新日庄外打道拉现的吐刊其守区位正乐吃伤计与则务不线粉你赠乐多统旅管迪的的验 吕 新属中心布价格快 图片新回 住点新闻 今天是0020全D》w入关程子 拥有大众旅游卡全国百家景 国家旅薄局深入学习实践科学发展观活动 特·上海世会为比利时脑 盖用户注围 我依新在美车应急处置和善后处 S0￥57 司29©8参312168.1257字节4803 08-01-30珠海城市职业技术学院信息与工程系杨晓安 W✉D
网站美工设计基础 第1章 21世纪网页设计的审美传播 08-01-30 珠海城市职业技术学院信息与工程系 杨晓安 中国旅游网
网站美工设计基础 第1章21世纪网页设计的审美传播 1. 1.1文字 文字是网页中最常用的页面因素之一。利用多种编辑软件 对网页中的文字，进行任意编排和切换处理，借以传达作者的 设计意图和创作目的。 ◆ 文字的种类很多，常用标准印刷体或者公认艺术字体。 在标题、正文、说明文字的设计中，为了突出某一点，设 计者不仅要对文字实体进行放大或缩小其字距空间，还常常将 其与图形周围的空间构成视觉一体化一虚拟的空间。善用空 间非常重要，因为空间的运用除了衬托主体外，还有隔离干扰 因素、凸现主体的作用。要使文字编排充满活力、增强其艺术 感染力，与内容紧密结合，编排中虚中有实、实中有虚、虚实 相生，使页面的视觉张力得以延伸，相互派生、相互融洽。只 有在空间的骨架上完美地安排好虚空间的血肉，才能使字体编 排的弹性和视觉张力得以展示，产生强烈的艺术效果。 0801-30珠海城市职业技术学院信息与工程系杨晓安 ☑✉D阿
网站美工设计基础 第1章 21世纪网页设计的审美传播 08-01-30 珠海城市职业技术学院信息与工程系 杨晓安 1．1．1 文 字 文字是网页中最常用的页面因素之一。利用多种编辑软件 对网页中的文字，进行任意编排和切换处理，借以传达作者的 设计意图和创作目的。 文字的种类很多，常用标准印刷体或者公认艺术字体。 在标题、正文、说明文字的设计中，为了突出某一点，设 计者不仅要对文字实体进行放大或缩小其字距空间，还常常将 其与图形周围的空间构成视觉一体化——虚拟的空间。善用空 间非常重要，因为空间的运用除了衬托主体外，还有隔离干扰 因素、凸现主体的作用。要使文字编排充满活力、增强其艺术 感染力，与内容紧密结合，编排中虚中有实、实中有虚、虚实 相生，使页面的视觉张力得以延伸，相互派生、相互融洽。只 有在空间的骨架上完美地安排好虚空间的血肉，才能使字体编 排的弹性和视觉张力得以展示，产生强烈的艺术效果
网站美工设计基础 第1章21世纪网页设计的审美传播 ■使用文字字体列表选择字体，主副标题及栏目标题均采用 艺术字体，使文字清晰醒目，美观实用；使用“格式”下 拉列表设置字体和文字大小；使用艺术字设置和选择字体。 5E 日▣区 货8因细巴的四0 正文+-号，-号，B目毫扫A 中华人共 ,业为直蓝。以 1112·3·4151·817 角中华人民共和国国家旅游局 美田珠海 美丽珠海 美丽珠海 买话调数出無费话设诗8贤及：出语用 美丽珠海 1图片据细 生点斯加 国家擦游局深入学习实我料学发展观话动 美丽珠海。 昌圳酒在添江香候雨产业发果大出上的满话 关于我 1页1节1/1位置46厘米 08-0130珠海城市职业技术学院信息与工程系杨晓安
网站美工设计基础 第1章 21世纪网页设计的审美传播 08-01-30 珠海城市职业技术学院信息与工程系 杨晓安 使用文字字体列表选择字体，主副标题及栏目标题均采用 艺术字体，使文字清晰醒目，美观实用；使用“格式”下 拉列表设置字体和文字大小；使用艺术字设置和选择字体
网站美工设计基础 第1章21世纪网页设计的审美传播 1.1.2图像 图像也是网页中最常用的页面因素之一。由 于用途不同，网页中的图像编辑软件与文字编辑 软件有所不同，一般采用Dreamweaver对插入 页面的图像进行各种处理，还可以使用 Fireworks.或者Photoshop对图像进行编辑和优 化。不断出现的新软件会更有针对性，操作上会 更简洁，从而让使用者可以更深刻地理解艺术与 技术完美结合，创造出精品，更深层次地体验网 络与影像时代的精彩。 08-0130珠海城市职业技术学院信息与工程系 杨晓安
网站美工设计基础 第1章 21世纪网页设计的审美传播 08-01-30 珠海城市职业技术学院信息与工程系 杨晓安 1．1．2 图 像 图像也是网页中最常用的页面因素之一。由 于用途不同，网页中的图像编辑软件与文字编辑 软件有所不同，一般采用Dreamweaver对插入 页面的图像进行各种处理，还可以使用 Fireworks或者Photoshop对图像进行编辑和优 化。不断出现的新软件会更有针对性，操作上会 更简洁，从而让使用者可以更深刻地理解艺术与 技术完美结合，创造出精品，更深层次地体验网 络与影像时代的精彩
网站美工设计基 第1章21世纪网页设计的审美传播 使用Photoshop处理的例子 ■图1一7使用Photoshopx对选择区域进行剪裁、复制和粘 贴制做出新的页面； ■图1一8使用Photoshop对图像进行色彩调整，可以对冷、 暖色调，色值、饱和度等进行随意调整； ■彩图1适当对图片色调进行处理，使气氛更加浓郁； ■彩图2适当提高了饱和度、对比度； ■彩图3示意一般用途的色彩和色调调整，突出食品网站的 “新鲜感”； ■彩图4调整色阶、色调、饱和度和明暗度； ■彩图5示意特殊用途的色彩和色调调整，置换颜色、去除 彩色、反转颜色、控制色彩平衡等。 08-01-30殊海城市职业技术学院信息与工程系杨晓安
网站美工设计基础 第1章 21世纪网页设计的审美传播 08-01-30 珠海城市职业技术学院信息与工程系 杨晓安 使用Photoshop处理的例子 图1—7使用Photoshop对选择区域进行剪裁、复制和粘 贴制做出新的页面； 图1—8使用Photoshop对图像进行色彩调整，可以对冷、 暖色调，色值、饱和度等进行随意调整； 彩图1适当对图片色调进行处理，使气氛更加浓郁； 彩图2适当提高了饱和度、对比度； 彩图3示意一般用途的色彩和色调调整，突出食品网站的 “新鲜感”； 彩图4调整色阶、色调、饱和度和明暗度； 彩图5示意特殊用途的色彩和色调调整，置换颜色、去除 彩色、反转颜色、控制色彩平衡等