网络信息制作与发布.ppt
《网络信息制作与发布.ppt》由会员分享,可在线阅读,更多相关《网络信息制作与发布.ppt(73页珍藏版)》请在三一办公上搜索。
1、2023/7/7,网络信息制作与发布,第四章 Web艺术设计,2023/7/7,第四章 Web艺术设计,主要内容:,本章主要介绍Web设计所需的美学原理和设计法则,具体涉及到影响网页观感的色彩、文字、图像、导航元件以及版面设计等方面的知识。,2023/7/7,4.1 Web设计环境,在进行网页设计和制作的过程中,了解网络的相关技术以及访问者的外在条件(如访问者的访问速度、计算机平台、使用何种浏览器等)是十分重要的。这些因素将影响你设计的Web文件大小和设计复杂程度。,2023/7/7,4.1 Web设计环境,4.1.1 Web的技术环境,1.关于浏览器的技术2.关于屏幕分辨率的技术3.关于带宽
2、的技术,2023/7/7,关于浏览器的技术,网页设计者首先面临的问题是如何使网页在不同浏览器中都能正常显示。由于每种浏览器对HTML文件标签的解释都不同,导致对HTML文件的显示方式的解释存在差异。因此设计者应尽量在多种浏览器环境中测试自己的工作,以便对用户使用的浏览器提出要求或说明。,2023/7/7,关于浏览器的技术,(1)采用可兼容的技术 尽量使设计的网页可以在各种浏览器中使用。不使用最新版本的HTML规范编码,便于与各种版本的浏览器兼容。(2)采用最新的技术设计 这就要求用户采用最新的浏览器,还要有能够显示特殊媒体类型的增强插件,这样才能跟上设计者的步伐。(3)采用对用户指定特定浏览器
3、的方式,2023/7/7,关于浏览器的技术,总之,在对浏览器的选择上,可以采用一种能促进渐进开发的策略。例如:在创建站点时使用前一个旧版本的HTML来编码,然后慢慢向其中加入一些增强特性,不断向最新版本靠近,使用户使用新旧版本的浏览器都可访问。若要加入一些需要插件支持的动画或特殊效果,则要使用大多数浏览器都支持的开发工具。,2023/7/7,关于屏幕分辨率的技术,显示器的屏幕分辨率:是指显示器屏幕所能显示的象素总数,这一指标是由显示器和显示卡的性能决定的。通常用水平和垂直方向的象素数目的乘积表示。如:800600。随着计算机显示器和显示卡性能的提高,在网页设计中,很多人已经将800600作为基
4、本的分辨率。,2023/7/7,关于宽带的技术,因此网站设计者应在不同的连接速度下进行浏览测试,以获得在不同的连接速度下浏览网页的真实情况。在设计时应尽量简化页面,少使用图形或将图形大小限制在1015KB范围之内。,2023/7/7,4.1 Web设计环境,4.1.2 Web的媒体环境,规划Web站点时应考虑以下几点:1.计算机屏幕的形状2.要有足够的对比度以利于用户阅读3.屏幕分辨率比印刷品低得多,2023/7/7,4.1 Web设计环境,4.1.3 Web的设计流程,1.Web设计的两个阶段2.Web设计的一般步骤3.Web站点的主要类型,2023/7/7,Web设计的两个阶段,Web的设
5、计流程通常包含两个阶段:第一阶段:了解客户需求,然后根据不 同的网站类型进行创意,同时与技术人 员沟通,了解设计所需的技术难度,确 定方案。第二阶段:制作出页面样例,与客户交 流征求意见,然后修改,直到确认,由 制作人员协助完成设计。,2023/7/7,Web设计的一般步骤,1.首先要明确网站的性质和目的。2.要分析网站的用户。3.确定页面的结构和框架。4.应在不同机器、浏览器和不同速度下测试网页,及早查处所出现的问题。,2023/7/7,4.2 Web设计元素,4.2.1 色彩,1.色彩基础2.色彩感觉3.色调和色彩搭配4.计算机色彩5.网页色彩搭配的原则6.搭配技巧,2023/7/7,色彩
6、基础,1.颜色的产生2.色彩的属性 色相、饱和度、明度(亮度)3.色彩的三原色和色环 三原色:红、黄、蓝 色环:暖色、中性色、冷色 同类色、邻近色、对比色、互补色,2023/7/7,色彩感觉,1.心理感觉:冷暖、轻重、软硬、华丽朴素、积极消极2.颜色的联想,2023/7/7,色调和色彩的搭配,1.色调2.配色 色相搭配 明度搭配 饱和度搭配 整体色调,2023/7/7,计算机色彩,1.色彩模式:RGB、CMYK、Lab2.色深:颜色数2色深位数3.混色4.网络安全色:25628,2023/7/7,网页色彩搭配的原则,1.色彩的合理性2.色彩的独特性3.色彩的艺术性,2023/7/7,搭配技巧,
7、1.非彩色的搭配2.彩色的搭配3.网页色彩掌握的过程 单色五彩缤纷标准色单色,2023/7/7,4.2 Web设计元素,4.2.2 文本,网页中的文本有两种状态:HTML文本和图形文件格式的文字图像。1.字体2.字号和字距,2023/7/7,字体,网页字体也是网页的主要组成部分,是信息的重要载体。字体的分类:1.英文字体2.中文字体3.衬线和字族,2023/7/7,字号和字距,字号的大小有以下三种标定方法:号数制:从初号、一号到八号,有16种之多。号数越大,字体越小。级数制:从8级到96级,级数越大,字体越大。点数制:从5磅到72磅,有21种之多。磅数越大,字体越大。点数制是世界流行的计算字体
8、的标准单位。,2023/7/7,字号和字距,网页文字的字号变化宜少不宜多。选择少量的字体和字号会使页面看起来显得更干净。如果在网页设计中使用了一种用户没有安装的字体,则浏览器将用缺省字体显示。(PC中的英文缺省字体是:Time New Roman)。,2023/7/7,字号和字距,字距和行距 字距:字与字之间的距离。行距:行与行之间的距离。字距与行距之间的比例关系:行距至少要大于字距。加宽字距和行距有轻松、疏朗之感。行与行之间要考虑适当增加空白,以便阅读。,2023/7/7,字号和字距,文字块的形状由编排形式决定,在版面设计中,主要有如下编排方式:两边对齐左(或右)对齐中间对齐图文绕排,202
9、3/7/7,字号和字距,网页中每一页的文字应尽量完整每一页应有清晰的标题尽量少用闪烁字在文字使用上要特别注意易读性和趣味性一般网页文字字体是稳定的,阅读要求识别轻松,浓淡适宜。,2023/7/7,小结,光的三原色是什么?P108颜色分为哪两种?P179 色彩的属性是什么?P179WINDOWS的操作系统中缺省的中文字体有哪些?P191,2023/7/7,4.2 Web设计元素,4.2.3 图像与VI设计,1.网页图像和文件格式2.选择图形工具3.网页中的图像4.网页版面中图像的编排5.视觉标识设计,2023/7/7,网页图像和文件格式,数字图像类型1.位图:又称为栅格图像。是用小方形 栅格(即
10、象素)组成的图像,与分辨 率有关。2.矢量图:由矢量定义的直线或曲线组 成的图像。矢量图形与分辨率无关。,2023/7/7,网页图像和文件格式,图像文件格式基础知识1.GIF2.JPG3.PNG3.BMP,2023/7/7,网页图像和文件格式,GIF是为网络图形传送而设计的,采用了无损压缩技术,色深为8位。GIF还有两个重要特点:透明和交错显示。JPG是适合于照片和连续灰度图像的最佳格式,色深24位(真彩色)。适合具有丰富细节的图片。PNG(便携式网络图形格式)是专为Web设计,但由于缺乏浏览器支持,一直未能普及。,2023/7/7,网页图像和文件格式,BMP格式是Windows中的标准图像文
11、件格式,有压缩和不压缩两种形式。TIF最早是为了存储扫描仪图像而设计。也是PC中使用最广泛的图像文件格式。TGA是Truevision公司为其显卡开发的一种图像文件格式,现已成为数字化图像,,2023/7/7,网页图像和文件格式,Web图像的应用:统一的格式 速度的限制,2023/7/7,选择图形图像设计工具,Adobe公司的PhotoshopAdobe的ImageReady是一个微型的Photoshop版本,后来被集成到了Photoshop中。Adobe的Illustrator是一个高端的绘图工具。Macromedia公司的Firework是一款集图形处理和文本处理于一体的功能强大的应用软件
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网络 信息 制作 发布

链接地址:https://www.31ppt.com/p-5446199.html