网页设计的基础知识.ppt

第2章 网页设计的基础知识,在学习网页设计的具体内容之前，首先要了解一下关于网页制作的基础知识。这些知识包括浏览器、网页中使用的元素、页面语言，以及各种软件在网页设计中所起的作用等。通过学习这些基础知识，可以对网页设计有一个整体上的了解。,2.1 浏览器,1IE浏览器 IE浏览器的全称是Internet Explorer，它是微软公司发布的免费浏览器。由于直接绑定在Windows操作系统之中，所以无须下载安装。根据发布时间的先后，有IE 4.0，5.0，5.5，6.0等很多版本。目前最新的是IE 7.0版本。如果更改浏览器的设置，则文本的显示效果会相应地改变。单击“查看”菜单，在打开的下拉菜单中选择“文字大小”选项，,2.1 浏览器,2Firefox浏览器 Firefox浏览器又称为火狐浏览器，是Mozilla基金会与众多志愿者所开发的，现在也有很多的使用者。目前使用较多的版本是Firefox 2.0，其显示效果如图2-2所示。,2.2 文本,1文本的显示 在网页中直接输入没有定义任何样式与属性的文本内容，其显示效果和浏览器的设置有关。,2.2 文本,2文本的格式 在网页中可以为文本设置各种格式，其中包括文本中字体的选择、字体的大小、文本的颜色、行高等（关于定义文本格式的详细内容，将在后面的章节中详细讲解）。下面是定义文本格式后的显示效果，如图所示。,2.3 图像,网页中使用的图像可以分为两个部分：一部分是起修饰作用的图像，一般在页面中起美化作用；另一部分是作为内容的图像，其中有些内容部分的文本内容，因为涉及到特殊的字体，所以也要用图像的方式来显示。下面进行详细讲解。,2.3.1 矢量图和位图,矢量图是使用数学公式计算来获得的图像格式，其优点在于即使将图像放大，依然能够清晰显示；其缺点在于难于表现色彩丰富的图像内容。在网页中，无法使用单独的矢量格式的图像。矢量图通常使用在Flash动画之中。下面是矢量图像和其放大后的效果和位图图像和其放大后的效果,2.3.2 网页设计中常用的图片格式,在网页中通常使用的图片格式有GIF格式和JPEG格式。其他的图片格式也可以在网页中使用，但会受到浏览器以及客户端环境的限制。具体内容如下所示。 1GIF格式 GIF（Graphics Interchange Format）格式即图形交换格式 2JPEG格式 使用JPEG格式的图片的好处同样在于各种浏览器都能很好地支持，同时可以很好地压缩图片，改善加载的速度。,2.3.3 使用图片,在网页中使用图片一般分为两种情况：一种是图片作为修饰部分；另一种是图片作为内容部分。作为修饰部分的图片，例如导航栏文字后面使用的背景等；作为内容出现的图片，例如网站中展示的产品的图片等。下面分别用实例来说明，作为修饰的图片和作为内容图片的作用和显示效果，具体内容如下所示。 1作为修饰的图像 2作为内容的图像,2.3 图像,网页中使用的多媒体包括音频文件、视频文件、Flash动画等内容，其中使用最多的是Flash动画。下面进行详细讲解。 1音频多媒体内容 在网页中，作为修饰的图像一般以背景的形式出现，以便使页面的表现和结构相分离。下面是一个在页面中使用修饰图片的示例，其显示效果如图所示。,2.3 图像,2作为内容的图像 在网页中，作为内容的图像一般都有自身的意义。例如用来展示产品的图像，或者用来进行导航的图像等。下面是在一个页面中使用内容图像的示例，其显示效果如图所示。,2.4 多媒体,网页中使用的多媒体包括音频文件、视频文件、Flash动画等内容，其中使用最多的是Flash动画。下面进行详细讲解。 1音频多媒体内容 在网页中音频文件可以直接作背景使用（只有IE浏览器支持此属性）。如果要在其他浏览器中使用音频文件，则需要使用播放器（关于多媒体的使用，将在后面的章节中详细讲解）。,2.4 多媒体,2Flash动画 在网页中使用的Flash动画非常多。Flash动画可以用来制作站点的片头、Logo、Banner、页面中的广告等内容（关于片头、Logo、Banner等概念，将在后面的章节中详细讲解）。Flash动画相对于其他格式的音频和视频文件，占用的空间更小，使用起来也更方便灵活。 3视频多媒体内容 在网页中无法直接播放视频内容（Flash动画除外）。如果要播放视频内容，必须使用相应的播放器。,2.5 结构语言,网页中使用的结构语言，一般为HTML和其升级版本XHTML。使用所见即所得的网页制作软件，例如Dreamweaver等，可以直接生成页面结构语言代码。 结构语言可以在Dreamweaver等软件的“代码”视图中看到，其显示效果如图所示。,2.6 脚本,脚本一般在网页中用来实现某种特殊的效果或功能。通常使用的是JavaScript和VBScript。使用Dreamweaver等网页制作软件，可以直接在页面中添加脚本。脚本一般用来完成一个或多个相应动作，例如响应鼠标等。,2.7 专家总结,通过网页基础知识的学习，可以了解网页中存在的各种内容，以及显