第1章网页设计概论.ppt
《第1章网页设计概论.ppt》由会员分享,可在线阅读,更多相关《第1章网页设计概论.ppt(82页珍藏版)》请在三一文库上搜索。
1、第1章 网页设计概论,本章主要内容,网页设计基础知识 网页设计相关的多媒体技术 HTML基础,1.1 网页设计基础知识,1.1.1 Internet与Web 1.1.2 网页、网站与主页 1.1.3 网站分类与赏析 1.1.4 网页色彩与布局,Internet 与 WWW,Internet又称国际互联网,是一个把分布于世界各地不同结构的计算机网络通过各种传输介质互相连接起来的网络。 Internet上的信息资源极为丰富,分为信息资源和服务资源两类。它的主要功能包括:网上信息查询、网上交流、电子邮件、文件传输和远程登录。,WWW 与浏览器,World Wide Web简称WWW或Web 基础:超
2、文本标记语言(Hypertext Markup Language ,HTML)与超文本传输协议(Hypertext Transfer Protocol,HTTP) 服务:提供Internet信息查询服务的浏览系统。 Web采用客户机/服务器工作模式 所有的客户端和Web服务器统一使用TCP/IP协议,统一分配IP地址,使得客户端和服务器的逻辑连接变成简单的点对点连接。 在WWW工作过程中,用户所使用的本地计算机是运行Web客户程序的客户机,通过Internet访问分布在世界各地的Web服务器。用户浏览Web上的信息需要使用Web浏览器。,WWW 与浏览器,网页、网站与主页(1),网页(Web
3、Page),也称为Web页,是用户通过浏览器在Internet中看到的页面。,网页:由HTML语言(超文本标记语言)编写的集文本、图片、声音和动画等信息元素为一体的页面文件。,网页、网站与主页(2),网页(Web Page),也称为Web页,是用户通过浏览器在Internet中看到的页面。,网页:由HTML语言(超文本标记语言)编写的集文本、图片、声音和动画等信息元素为一体的页面文件。,Web网页采用超文本格式。它包含有文本、图像、声音、视频;还含有指向其他Web页或页面本身某特定位置的超链接;网页的元素还包括动画、表单、程序,网页、网站与主页(3),从文件角度讲,网页通常是一种由HTML语言
4、编写的文本文件,网页文件又称HTML文件,其扩展名为.html或htm。,在浏览器中选择【查看】【源文件】命令,即可打开一个网页文件并看到网页的源代码。,网页、网站与主页(4),编辑网页的操作步骤如下: 选择【开始】【程序】【附件】【记事本】命令,启动“记事本”程序。 在记事本中输入HTML代码 保存文件。 双击文件图标,即可打开该文件,看到所示的页面。,网站(Website)又称为站点或Web站点。 网站是指根据一定的规则,使用HTML等工具制作的用于展示特定内容的相关网页的集合,网页、网站与主页(5),主页是进入网站的门户,是整个网站的第一页。一般命名为index.html文件。 主页上通
5、常会有整个网站的导航目录,所以主页也是一个网站的入口或者说主目录。,网站分类与赏析,1门户类网站 网址: 2企业信息类网站 网址: 3教育类网站 网址:www.employment.harvard.edu 4产品信息类 网址:,网页色彩与布局,网页色彩的应用 “中国瓷器”网站 http:/ “北美工艺品展” http:/ “多媒体设计”网站 http:/,网页布局的基本概念 页面尺寸:网页的尺寸和显示器大小及分辨率有关。 分辨率为1024768,页面的显示尺寸为1007600像素; 分辨率为800600,页面的显示尺寸为780428像素; 分辨率为640480,页面的显示尺寸为620311像素
6、。,网页布局,页面布局类型,国字型 也称为“同”字型或“口”字型,http:/。 拐角型 去掉“国”字型布局的最右边的部。http:/。 “三”字型 又称为上中下型,是一种简洁明快的艺术性网页布局。http:/ “川”字型 :/ 封面型 也称为“POP”型。http:/ Flash型,1.2 多媒体素材基础,1.2.1 颜色的基本概念 1.2.2 图像的色彩模式 1.2.3 图像的基本属性 1.2.4 图像文件的格式 1.2.5 计算机动画概述,1.2.1 颜色的基本概念,1颜色的三要素 亮度 指颜色的明暗程度,是光作用于人眼时所引起的明亮程度的感觉,它与被观察物体表面的光线反光系数有关。 色
7、相(或色调)是指颜色的相貌,是人眼看到的一种或多种波长的光时所产生的彩色感觉,它反映颜色的种类和基本特性。 饱和度也常称为纯度或彩度。是色彩的鲜艳度或深浅程度,是由颜色掺入白色光的程度决定的。,1.2.1 颜色的基本概念,2三基色原理 三基色,它们相互独立,其中任意色均不能由其他两色混合产生。自然界常见的各种彩色光,都可由三种颜色相互独立的光组成。 有两种基色系统,一种是加色系统,其三基色是红(Red)、 绿(Green)、蓝(Blue),另一种是减色系统,其三基色是青色(Cyan)、品红(Magenta)和黄色(Yellow)。 不同比例的三基色光相加得到的彩色称为加色混合。 其规律如下:
8、红色+绿色=黄色 红色+蓝色=品红 绿色+蓝色青色 红色+绿色+蓝色白色,1.2.2 图像的色彩模式,色彩模式是指在计算机上打印或显示图像时表示颜色的数字方法,1灰度模式 该模式只有灰度色(图像的亮度),没有彩色。在灰度色图像中,每个像素都以8位或16位表示,取值范围在0(黑色)255(白色)之间。,1.2.2 图像的色彩模式,2RGB模式 RGB模式是工业界的一种颜色标准,通过对红、绿、蓝三个颜色通道的变化以及它们之间的相互叠加来得到各式各样的颜色。这个标准几乎包括了人类视力所能感知的所有颜色,是目前应用最广的颜色模式之一。 网页制作中使用最广泛的是RGB色彩模式的十六进制显示模式。即用3个
9、00FF的十六进制数来表示组成颜色的红、绿、蓝色的数值。例如:000000表示黑色,FFFFFF表示白色,FF0000表示红色,0000FF表示蓝色,总共有224种颜色。,1.2.2 图像的色彩模式,3CMY模式 计算机屏幕显示彩色图像时采用的是RGB模式,而在打印时 一般需要转换为CMY模式。 CMY模式是使用青色(Cyan)、品红(Magenta)、黄色(yellow)3 种基本颜色按一定比例合成色彩的方法。CMY采用相减混色模型。 注意: 等量的CMY混合后并不能产生完备的黑色或灰色。因此,在印刷时常加一种真正的黑色(Black),这样CMY模式又称为CMYK模式。 CMYK色彩不如RG
10、B色丰富饱满,在Photoshop中会导致运 行速度比采用RGB色慢或部分功能无法使用。,1.2.2 图像的色彩模式,4HSB模式 HSB模式是基于人类感觉颜色的方式建立起来的,对于人的眼睛来说,能分辨出来的是颜色的色相、饱和度和亮度,而不是RGB模式中各基色所占的比例。HSB颜色就是根据人类对颜色分辨的直观方法,将自然界的颜色看作由色相(Hue)、饱和度(Saturation)、亮度(Brightness)组成。 5Lab模式 Lab颜色模式通过A、B两个色调参数和一个光强度来控制色彩,A、B两个色调可以通过-128+128之间的数值变化来调整色相,其中A色调为由绿到红的光谱变化,B色调为由
11、蓝到黄的光谱变化,光强度可以在0100数值范围内调节。,1.2.2 图像的色彩模式,6安全色 图像在网络发布时,色彩的显示可能会受到浏览器端的操作系统和浏览器的影响,同一种颜色也会在不同的浏览器中显示出不同的亮度或者色相。我们把在不同操作系统和浏览器中显示效果一致的216中颜色称为网络安全色。 辨别一种颜色是否是网络安全色的方法是看其颜色值,任何由00、33、66、99、CC或者FF组合而成的颜色都是Web安全色。例如:003366、0066FF等。通常在Photoshop中颜色拾取框中可以直接选取的颜色都是Web安全色。,1.2.3 图像的基本属性,1图形与图像 数字图像的种类有两种:图形和
12、图像 图形又称矢量图形、几何图形或矢量图,是经过计算机运算而形成的抽象化结果,由具有方向和长度的矢量线段构成。计算机在显示图形时从文件中读取指令并转化为屏幕上显示的图形效果。,1.2.3 图像的基本属性,1图形与图像 图像又称点阵图像或位图图像,是指在空间和亮度上已离散化的图像。一幅图划分为M行N列,行与列的交叉处为一个像素,每个像素点用若干个二进制位表示该像素的颜色和亮度,因此,在计算机中对应于该像素点的值是它的亮度或颜色等级,像素的颜色等级越多则图像越逼真,位图图像及其放大后的效果,1.2.3 图像的基本属性,2图像分辨率 分辨率是用于度量图像单位长度数据量的参数,其高低直接影响图像的质量
13、。分辨率通常表示为ppi(pixel per inch,像素/英寸)和dpi(dot per inch,点/每英寸)。计算机显示领域用ppi度量分辨率,而dpi用于打印、印刷领域等。,1.2.3 图像的基本属性,显示分辨率 显示分辨率是指数字化的图像经过计算机显示系统,如显示卡、显示器描述时,屏幕呈现出横向和纵向像素的个数。单位是ppi,其值是横向像素纵向像素。常见的标准显示分辨率有800600像素、1024768像素、12801024像素等。 扫描分辨率 扫描分辨率是指每英寸扫描到的点,单位是dpi。它表示一台扫描仪输入图像的细腻程度,数值越大扫描的图像转化位数字图像越逼真,扫描仪的质量越高
14、。 打印分辨率 打印分辨率是打印机输出图像时采用的分辨率,单位是dpi。同一台打印机可以使用不同的打印分辨率,打印分辨率越高,图像输出质量越好。,1.2.4 图像文件的格式,1BMP格式 BMP(Bitmap)是Microsoft公司为其Windows系列操作系统设置的标准图像文件格式。BMP文件格式具有以下特点:每个文件存放一幅图像,可以多种颜色深度保存图像(如16色、256色、24位真彩色模式)。 BMP文件可以使用行程长度编码(RLC)进行无损压缩,也可不压缩。不压缩的BMP文件是一种通用的图像文件格式,几乎所有Windows应用软件都能支持,但文件较大。,1.2.4 图像文件的格式,2
15、GIF格式 GIF(Graphics Interchange Format)格式文件为网络传输和BBS用户使用图像文件提供方便。目前,大多数图像软件都支持GIF文件格式,它特别适合于动画制作、网页制作以及演示文稿制作等领域。GIF文件格式具有以下特点:采用无损压缩的方式,产生的文件很小,下载速度快,但最多只支持256种颜色。,1.2.4 图像文件的格式,3JPEG格式 JPEG(Joint Photographic Experts Group)格式文件用有损压缩方式去除冗余的图像和彩色数据,在获得极高压缩率的同时能展现十分丰富和生动的图像,换句话说,就是可以用最少的磁盘空间得到较好的图像质量。
16、因此,JPEG文件格式适用于在Internet上传输图像。 4TIF格式 由Aldus和Microsoft公司联合开发的,最初用于扫描和桌面出版业,是一种工业标准格式。它被许多图形图像软件所支持。文件有压缩和非压缩两种形式,非压缩的TIF文件可独立于软件和硬件环境。,1.2.4 图像文件的格式,5PNG格式的图像文件 PNG(Portable Network Graphic)图像是网络传输中的一种无损压缩图像文件格式,可以保存灰度模式、索引颜色模式、图层、帧等图像信息,在大多数情况下,它的压缩比大于GIF格式图像,利用Alphs通道可以调节图像的透明度,可提供16位灰度图像和48位真彩色图像。
17、 6PSD格式的图像文件 PSD图像是著名的图像处理软件Photoshop中使用的一种标准图像格式文件,可以不同图层分别存储,从而能够保存图像处理的每一个细节部分,便于图像的编辑和再处理。,1.2.5 计算机动画概述,分类 根据动画的性质和运动方式,计算机动画可分为,逐帧动画(又称帧动画)、实时动画(又称算法动画)和矢量动画。按照动画的表现形式分类,可以分为二维动画、三维动画和变形动画3大类。 逐帧动画是指构成动画的基本单位是帧,许多帧组成一幅动画。逐帧动画借鉴传统动画的概念,每帧的内容不同,当连续播放时,通过一帧一帧显示动画的图像序列形成动画视觉效果。逐帧动画具有非常大的灵活性,几乎可以表现
18、任何想表现的内容。逐帧动画主要用在传统动画片的制作、网页的制作、以及电影特技的制作方面。,1.2.6 音频与视频基础,常见的音频文件格式 声音文件又称为音频文件,用来记录自然声和计算机等电子设备产生的声音。 声音文件分为两大类:一类是采用WAV格式的波形的音频文件;另一类是采用MIDI格式的乐器数字化接口文件。对于WAV格式文件,通过数字采样获得声音素材;而对于MIDI格式文件,则通过MIDI乐器的演奏获得声音素材。,1.2.6 音频与视频基础,视频文件的格式 视频文件可以分为两大类,其一是影像文件,例如常见的VCD。影像文件一般可达几MB至几十MB甚至更大。 其二是流式视频文件,它是随着国际
19、互联网的发展而诞生的,例如在线实况转播,就是建立在流式视频技术之上的。 AVI文件是由Microsoft公司开发的一种数字音频与视频文件格式,被大多数操作系统直接支持。它将视频和音频混合交错地存储在一起,调用方便、图像质量好。但AVI文件没有限定压缩标准,不同压缩标准生成的AVI文件,必须使用相应的解压算法才能将其播放出来,而且文件体积过于庞大。 MOV文件是Apple公司开发的一种音频、视频文件格式。MOV格式支持25位彩色,支持领先的集成压缩技术,提供了150多种视频效果,并配有提供了200多种MIDI兼容音响和设备的声音装置,包含了基于Internet应用的关键特性,具有跨平台、存储空间
20、要求小的技术特点。 另外还有MPEG、DAT、RM、ASF、WMV等格式的文件。,1.3 HTML基础,1.3.1 HTML文档基本结构 1.3.2 HTML的基本结构标记 1.3.3 文字与段落排版标记 1.3.4 多媒体标记 1.3.5 超链接标记 1.3.7 框架标记,1.3.1 HTML文档基本结构,1HTML简介 HTML是Hypertext Markup Language(超文本标记语言)的缩写,它是构成Web页面的符号标记语言。通过HTML将所需要表达的信息按某种规则写成HTML文件,并将这些HTML文件翻译成可以识别的信息,就是所见到的网页。,2一个简单的HTML实例 【案例1
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 概论
链接地址:https://www.31doc.com/p-2251740.html