网络信息制作与发布

关于宽带的技术
因此网站设计者应在不同的连接速 度下进行浏览测试，以获得在不同的连 接速度下浏览网页的真实情况。
在设计时应尽量简化页面,少使用图 形或将图形大小限制在10－15KB范围之 内。
2020/6/13
4.1 Web设计环境
4.1.2 Web的媒体环境 规划Web站点时应考虑以下几点： 1.计算机屏幕的形状 2.要有足够的对比度以利于用户阅读 3.屏幕分辨率比印刷品低得多
2020/6/13
网页中的图像
• 照片类 • 绘画类
2020/6/13
网页版面中图像的编排
（1）图像的选择与剪裁 （2）图像形状的变化 （3）虚实的变化
2020/6/13
视觉标识设计（VI设计）
视觉标识（VI：Visual Identity） 是指通过视觉语言的运用来树立形象 和传播信息。其应用一直是CIS（ Corporate Identity System：企业 识别系统）的基础和最直接的表现形 式。CIS的策划和运作往往以VI来表 现，是CIS的一部分。
字体的分类： 1. 英文字体 2. 中文字体 3. 衬线和字族
2020/6/13
字号和字距
字号的大小有以下三种标定方法： • 号数制：从初号、一号到八号，有16种之多。
号数越大，字体越小。 • 级数制：从8级到96级，级数越大，字体越大
。 • 点数制：从5磅到72磅，有21种之多。磅数越大
，字体越大。点数制是世界流行的计算字体的 标准单位。
2020/6/13
色彩基础
1.颜色的产生 2.色彩的属性 色相、饱和度、明度（亮度） 3.色彩的三原色和色环 三原色：红、黄、蓝 色环： 暖色、中性色、冷色 同类色、邻近色、对比色、互补色
2020/6/13
色彩感觉 1.心理感觉：冷暖、轻重、软硬、华丽朴素、积
极消极 2.颜色的联想
2020/6/1由很多静态画面 序列连续地播放形成的。计算机的 动画和传统的动画原理基本上是一 样的，只是有些名词叫法不同。 帧（Frame）：每个动画单元 帧速率（fps：Frame per second ，指一秒钟动画所包含的帧数）是 动画概念的一项重要指标
2020/6/13
2020/6/13
视频
计算机上使用的是数字视频（电视电影视 频是模拟信号），它是将传统的模拟视频片断 捕捉并进行转换而成（如：VCD），下面介绍 有关视频格式和视频嵌入技术方面的知识。
2020/6/13
视频
MOV格式 AVI格式 RM（Real Media）格式 ASF格式
2020/6/13
视频
2020/6/13
字号和字距
• 网页文字的字号变化宜少不宜多。 • 选择少量的字体和字号会使页面看起来显得更
干净。 • 如果在网页设计中使用了一种用户没有安装的
字体，则浏览器将用缺省字体显示。（PC中 的英文缺省字体是：Time New Roman）。
2020/6/13
字号和字距
字距和行距 • 字距:字与字之间的距离。 • 行距：行与行之间的距离。 • 字距与行距之间的比例关系：行距至少要大于
2020/6/13
网页图像和文件格式
BMP格式是Windows中的标准图像文 件格式，有压缩和不压缩两种形式。
TIF最早是为了存储扫描仪图像而设 计。也是PC中使用最广泛的图像文件格 式。
TGA是Truevision公司为其显卡开 发的一种图像文件格式，现已成为数字 化图像，
2020/6/13
网页图像和文件格式
轻松，浓淡适宜。
2020/6/13
小结
1. 光的三原色是什么？P108 2. 颜色分为哪两种？P179 3. 色彩的属性是什么？P179 4. WINDOWS的操作系统中缺省的中文字体有
哪些？P191
2020/6/13
4.2 Web设计元素
4.2.3 图像与VI设计 1. 网页图像和文件格式 2. 选择图形工具 3. 网页中的图像 4. 网页版面中图像的编排 5. 视觉标识设计
2020/6/13
网页图像和文件格式
GIF是为网络图形传送而设计的，采 用了无损压缩技术，色深为8位。GIF还 有两个重要特点：透明和交错显示。
JPG是适合于照片和连续灰度图像的 最佳格式，色深24位（真彩色）。适合 具有丰富细节的图片。
PNG（便携式网络图形格式）是专为 Web设计，但由于缺乏浏览器支持，一直 未能普及。
2020/6/13
关于屏幕分辨率的技术
显示器的屏幕分辨率：是指显示器 屏幕所能显示的象素总数，这一指标是 由显示器和显示卡的性能决定的。通常 用水平和垂直方向的象素数目的乘积表 示。如：800600。
随着计算机显示器和显示卡性能的 提高，在网页设计中，很多人已经将 800600作为基本的分辨率。
2020/6/13
将视频/音频文件嵌入到HTML的方法 • 链接：这种方式就像放置任何其它链接
一样。 • 嵌入：采用这种方法可以对网络上的视
频文件边下载边播放，或者可以让视频 信息与其它内容出现在同一页面。但是 这要求用户端有相应的插件（Plug in ）才能播放。
2020/6/13
虚拟现实（VR）
虚拟现实（Virtual Reality）是一项 与多媒体技术密切相关的边缘技术。
2020/6/13
4.1 Web设计环境
4.1.1 Web的技术环境 1.关于浏览器的技术 2.关于屏幕分辨率的技术 3.关于带宽的技术
2020/6/13
关于浏览器的技术
网页设计者首先面临的问题是如何使网 页在不同浏览器中都能正常显示。由于每种 浏览器对HTML文件标签的解释都不同，导 致对HTML文件的显示方式的解释存在差异。 因此设计者应尽量在多种浏览器环境中测试 自己的工作，以便对用户使用的浏览器提出 要求或说明。
2020/6/13
4.1 Web设计环境 4.1.3 Web的设计流程 1. Web设计的两个阶段 2. Web设计的一般步骤 3. Web站点的主要类型
2020/6/13
Web设计的两个阶段
Web的设计流程通常包含两个阶段： 第一阶段：了解客户需求，然后根据不 同的网站类型进行创意，同时与技术人 员沟通，了解设计所需的技术难度，确 定方案。 第二阶段：制作出页面样例，与客户交 流征求意见，然后修改，直到确认，由 制作人员协助完成设计。
2020/6/13
音频
网上使用的音频格式文件大部分经过压缩，主要有： • MIDI格式 • RA（Real Audio）格式 • MP3 （MPEG1 Player 3）格式 • MP4格式： • VQF格式： • WMA格式： • WAV（Wave From Audio File）格式： • AIF格式： • AU格式：
2020/6/13
Web设计的一般步骤
1.首先要明确网站的性质和目的。 2.要分析网站的用户。 3.确定页面的结构和框架。 4.应在不同机器、浏览器和不同速度下测试网
页，及早查处所出现的问题。
2020/6/13
4.2 Web设计元素
4.2.1 色彩
1. 色彩基础 2. 色彩感觉 3. 色调和色彩搭配 4. 计算机色彩 5. 网页色彩搭配的原则 6. 搭配技巧
HTML是面向二维的，而VRML（Virtual Reality Modeling Language，虚拟现实 建模语言) 是一个开放的、面向三维的、 可扩充的三维场景描述语言。
2020/6/13
4.2 Web设计元素
4.2.6 导航和交互设计
交互式设计就是在无序且繁 琐的信息之间创造一个具有吸引 力的、高效的浏览路线，给人以 极大的自由度去创造和选择他们 想要的信息，并轻易地了解整个 系统与组织的内容。
2020/6/13
关于浏览器的技术
总之，在对浏览器的选择上，可以采 用一种能促进渐进开发的策略。
例如：在创建站点时使用前一个旧版 本的HTML来编码，然后慢慢向其中加入一 些增强特性，不断向最新版本靠近，使用 户使用新旧版本的浏览器都可访问。若要 加入一些需要插件支持的动画或特殊效果， 则要使用大多数浏览器都支持的开发工具。
2020/6/13
视觉标识设计（VI设计）
1.设计网站的标志 2.选择网站的标准色彩 3.选择网站的标准字体 4.构思网站的广告词
2020/6/13
4.2 Web设计元素
4.2.4 动画 网页中的插图可以像电视动画一样
真实生动，有人用情景化设计来描绘将 来的网页设计。
无论人或动物的视觉，总是先注意 到运动着的东西。因此，很多广告公司 都将自己的网络广告做成动画的形式， 以便获得最大的宣传效果。
2020/6/13
关于浏览器的技术
（1）采用可兼容的技术 尽量使设计的网页可以在各种浏览器中使用。 不使用最新版本的HTML规范编码，便于与各 种版本的浏览器兼容。
（2）采用最新的技术设计 这就要求用户采用最新的浏览器，还要有能够 显示特殊媒体类型的增强插件，这样才能跟上 设计者的步伐。
（3）采用对用户指定特定浏览器的方式
Web图像的应用： 统一的格式 速度的限制
2020/6/13
选择图形图像设计工具
• Adobe公司的Photoshop • Adobe的ImageReady是一个微型的
Photoshop版本，后来被集成到了 Photoshop中。 • Adobe的Illustrator是一个高端的绘 图工具。 • Macromedia公司的Firework是一款集 图形处理和文本处理于一体的功能强 大的应用软件。
网络信息制作与发布
第四章 Web艺术设计
2020/6/13
第四章 Web艺术设计
主要内容： 本章主要介绍Web设计所需的美学原理和设
计法则，具体涉及到影响网页观感的色彩、文字、 图像、导航元件以及版面设计等方面的知识。