网页设计的前台技术.ppt

第1章网页设计的一般步骤,在学习制作网页的各种软件之前，首先要了解网页设计的一般步骤。这将有助于总体上把握网页设计的流程。网页设计的一般步骤包括：需求分析、制作页面效果图、切图、制作静态Web页面、添加程序、发布Web站点、推广和维护等几个方面。下面将逐一对各个步骤进行讲解。,1.1需求分析,1InternetInternet的中文名称是“互联网”或者“国际互联网”。它来源于美国国防部高级研究计划局DARPA（DefenseAdvancedResearchProjectsAgency）的前身ARPA建立的ARPAnet，是由各种不同类型和规模的计算机网络（包括局域网、地域网，以及大规模的广域网等）构成的全球范围的计算机网络。在Internet中的各个计算机之间，可以方便地交换信息。,1.1需求分析,2域名域名是用来标识Internet上相应资源的一个名称。在Internet中有成千上万的计算机，为了标识每台计算机，为每台计算机分配了一个地址，这个地址就叫做计算机的IP地址。IP地址是由二进制数来表示的，长32位。由于IP地址难于记忆和书写，所以在Internet中使用一种字符型的地址来标识各种资源，这个字符型的地址就叫做域名。,1.1需求分析,3空间空间是指用来存放制作好的网站的磁盘空间。在发布网站时，可以使用提供相应服务的公司的空间，也可以使用自己计算机上的空间。其区别在于稳定性和速度存在着差异。一般在提供网站建设服务的公司中，需求分析的部分会有相应的人员负责，网页设计人员只需要分析需求人员提供的文档，并和需求人员具体沟通，即可完成这个部分工作。,1.2制作页面效果图,1制作效果图的软件用来制作效果图的软件并没有明确的规定，可以使用各种图形制作和处理的软件。现在通常使用的软件是Photoshop（关于使用Photoshop的内容，将在后面的章节中详细讲解）和Fireworks。在制作效果图时，使用的软件对最终效果并没有影响，所以一般只需要精通一种软件即可。,1.2制作页面效果图,制作好的效果图可以保存成各种格式，其中主要包括GIF格式、JPEG格式、PNG格式等。各个图片格式之间的区别，将在后面的章节中详细讲解。下面是一个制作完成的效果图的示例，其显示效果如图所示（关于该效果图的详细制作过程，将在后面的章节中详细讲解）。,完成后的效果图,1.3制作Flash动画,在网页中使用的多媒体内容主要为Flash动画。因为Flash动画内容可以在页面中直接使用（在浏览器中也可以屏蔽Flash动画内容的显示），而其他的多媒体内容都需要在客户端安装相应的播放器来支持。,1.4切图,在制作静态页面之前，要对效果图进行切片。切片的目的是制作页面中使用的修饰图片。对效果图进行切片，可以在Photoshop（或者与之相关联的软件ImageReady）中进行，也可以在Fireworks中进行。下面是一个在Photoshop中切图的示例，其显示效果如图所示。,1.5制作静态Web页面,静态Web页面是指使用HTML等语言制作的，不能和服务器进行交互的页面。制作静态Web页面，是为了使网页制作的分工更加明确。制作静态页面时，通常使用的软件是Dreamweaver。制作的静态页面一般是HTML页面，文件的后缀名为.html。制作完成后的HTML页面，可以直接在IE等浏览器中查看其显示效果。,1.6添加程序,添加程序的目的是使页面能够和服务器中的资源进行交互，一般要涉及对数据库的操作。添加程序后的页面处理和显示信息的效率会更高，更加容易维护。根据使用的程序语言不同，网页中使用的程序可以分为ASP程序、ASP.NET程序、JSP程序、PHP程序等。使用不同的程序，对完成网页的功能并不影响。,1.7发布Web站点,客户对网页的所有功能和页面都确认后，就可以正式发布制作好的站点了。发布站点的过程就是将本地的站点文件上传到购买或者设定的空间上去。通常使用FlashFXP等上传下载软件来完成。,1.8推广和维护,网站的推广和维护也是网站建设中相当重要的部分。针对站点的性质和不同的需求，推广和维护的方法也不尽相同。其中推广的方法包括百度、Google等搜索引擎上的推广、相关论坛推广、邮件推广等。维护的情形要视站点的复杂程度和规模，指定专人或请制作站点的公司一并维护。,1.9专家总结,在具体学习网页制作技巧之前，总体地了解站点的制作步骤，有助于了解使用软件制作网页在整个站点制作中的位置，同时避免了一些混淆的概念，便于区分网页设计和制作、网站程序开发、网站使用之间的区别。通过本章的学习，可以知道网页制作只是整个站点中的一个很小的部分，一个站点的最终形成和使用，还需要做大量其他的工作。,第2章网页设计的基础知识,在学习网页设计的具体内容之前，首先要了解一下关于网页制作的基础知识。这些知识包括浏览器、网页中使用的元素、页面语言，以及各种软件在网页设计中所起的作用等。通过学习这些基础知识，可以对网页设计有一个整体上的了解。,2.1浏览器,1IE浏览器IE浏览器的全称是InternetExplorer，它是微软公司发布的免费浏览器。由于直接绑定在Windows操作系统之中，所以无须下载安装。根据发布时间的先后，有IE4.0，5.0，5.5，6.0等很多版本。目前最新的是IE7.0版本。如果更改浏览器的设置，则文本的显示效果会相应地改变。单击“查看”菜单，在打开的下拉菜单中选择“文字大小”选项，,2.1浏览器,2Firefox浏览器Firefox浏览器又称为火狐浏览器，是Mozilla基金会与众多志愿者所开发的，现在也有很多的使用者。目前使用较多的版本是Firefox2.0，其显示效果如图2-2所示。,2.2文本,1文本的显示在网页中直接输入没有定义任何样式与属性的文本内容，其显示效果和浏览器的设置有关。,2.2文本,2文本的格式在网页中可以为文本设置各种格式，其中包括文本中字体的选择、字体的大小、文本的颜色、行高等（关于定义文本格式的详细内容，将在后面的章节中详细讲解）。下面是定义文本格式后的显示效果，如图所示。,2.3图像,网页中使用的图像可以分为两个部分：一部分是起修饰作用的图像，一般在页面中起美化作用；另一部分是作为内容的图像，其中有些内容部分的文本内容，因为涉及到特殊的字体，所以也要用图像的方式来显示。下面进行详细讲解。,2.3.1矢量图和位图,矢量图是使用数学公式计算来获得的图像格式，其优点在于即使将图像放大，依然能够清晰显示；其缺点在于难于表现色彩丰富的图像内容。在网页中，无法使用单独的矢量格式的图像。矢量图通常使用在Flash动画之中。下面是矢量图像和其放大后的效果和位图图像和其放大后的效果,2.3.2网页设计中常用的图片格式,在网页中通常使用的图片格式有GIF格式和JPEG格式。其他的图片格式也可以在网页中使用，但会受到浏览器以及客户端环境的限制。具体内容如下所示。1GIF格式GIF（GraphicsInterchangeFormat）格式即图形交换格式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。使用Dr