单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第1章 网页制作根本学问,生疏网站与网页,网页设计软件和制作技术,网站建设流程,网页设计的根本原则,1.1 生疏网站与网页,网页就是我们上网时在扫瞄器中看到的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。,另外，翻开某个网站时显示的第一个网页被称为网站的主页或首页，它可以说是网站的门户，通过它不仅可以了解网站的性质和内容，还可以访问网站中的其他页面。,1.1.1 网页的本质,我们看到的网页是由一组文件构成的，它们分别是网页文件扩展名为.html、.asp等、图像文件扩展名为.jpg、.gif等和Flash动画文件扩展名为.swf等。,1.1.2 网页的功能组成,从扫瞄者的角度看，网页中无非就是一些文字、图像、动画等。但从专业的角度来讲，网页中的元素各有其不同的作用，可以将他们分为站标、导航条、广告条、标题栏和按钮等，如以以下图所示。,站标,导航条,按钮,广告条,标题栏,1站标,站标也叫Logo，是网站的标志，其作用是使人观看它就能够联想到企业。因此，网站Logo通常承受企业的Logo。,Logo一般承受蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，固然也有很多是图文组合。,2导航条,假设网站内容不多，可依据网站风格尝试灵敏摆放导航条，也可以使用图片或Flash动画等制作导航条。,假设网站栏目很多，可以将导航条分为多排放置在Logo的下方或右侧。为便于观看，可为各排设置不同的底色。,导航条是链接到网站内主要页面的超链接组合，它可以引导扫瞄者轻松找到网站中的各个页面，导航条也因此而得名。,设计导航条时，应留意以下两点。,3广告条,广告条又称Banner，其功能是宣传网站或替其他企业做广告。Banner的尺寸可以依据版面需要来安排。,4标题栏,此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明白，大大地便利了扫瞄者。,标题栏可以是文字加不同颜色的背景，也可以是图片，这要依据网站的内容和规模来准备。,5按钮,在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，网页会实现相应的操作，比方页面跳转，或数据的传输等。,1.1.3 IP地址、域名与网址,1IP地址,虽然互联网上连接了不计其数的效劳器与客户机，但它们并不是杂乱无章的。每一个主机在互联网上都有唯一的地址，我们称这个地址为IP地址Internet Protocol Address。IP地址由4个小于256的数字组成，数字之间用点间隔。例如，“61.135.150.126”就是一个IP地址。,2域名,由于IP地址在使用过程中难于记忆和书写，人们又觉察了一种与IP地址对应的字符来表示地址，这就是域名。每一个网站都有自己的域名，并且域名是独一无二的。例如，我们只需要在扫瞄器地址栏中输入搜狐网站的域名“”，然后按回车键就可以访问搜狐网站了。,3网址,网址又叫URL，英文全称是“Uniform Resource Locator”，即统一资源定位符。它是网络上通用的一种地址格式，用于标识网页文件在网络中的位置。,一个完整的网址由通信协议名称、域名或IP地址、网页在效劳器中的路径和文件名4局部组成。,1.1.4 静态网页与动态网页,从大的方面讲，网页可分为静态网页和动态网页。通常是从制作技术的角度来区分静态网页和动态网页的，完全承受HTML技术制作的网页称为静态网页；使用HTML、编程语言和数据库共同完成，需要与效劳器实时交互的网页称为动态网页。,1.2 网页设计软件和制作技术,1.2.1 网站治理与网页制作软件,目前用于网站治理和网页制作的软件主要是Dreamweaver，其功能全面、操作灵敏、专业性强。另外，它还可以作为动态网站的开发环境。,在制作网页时，除Dreamweaver外还需要用到Fireworks、Flash、Photoshop等帮助软件。,1.2.2 HTML语言简介,1为什么要学习HTML,HTML是Hypertext Markup Language的首字母缩写，中文称作“超文本标记语言”。,HTML语言是网页制作的根底，目前Internet上的绝大多数网页都遵循HTML语言标准，或是由HTML语言进展而来。,2HTML语言的组成,HTML语言的核心是标签或者称为标记。也就是说，我们在扫瞄网页时看到的文字、图像、动画等在HTML文档中都是用标签来描述的。一个完整的HTML文档由标签开头并由标签完毕，全部的HTML代码都应写在标签与标签之间。,3HTML标签的类型与特点,实际上，学习HTML语言的过程也就是学习各种标签格式的过程。,1单标签,语法是：,2双标签,“双标签”由“始标签”和“尾标签”两局部构成，必需成对使用。语法是：内容,3标签属性,很多单标签和双标签的始标签内可以包含一些属性。语法是：,1.3 网站建设流程,1.3.1 网站筹划,1确定网站内容,建设网站要有目的性，首先要依据网站的性质和受众，确定网站内容和要实现的功能。,2规划网站构造,确定网站内容后，就要依据网站的内容来规划网站构造。网站构造有两层意思，一是规律构造，二是物理构造。,规律构造主要是指将网站内容划分成哪些栏目，实际上就相当于网页中的导航条，以以下图显示了某企业网站的规律构造图。,3确定网站要应用的技术,网站要应用的技术包括两个方面，一个是程序和数据库，另一个是运行环境。网站技术与网站的定位、功能和规章都是亲切相关的，对于网站的运营，网站的本钱，网站目标的达成都特殊关键。,1.3.2 收集网站素材,在开头动手制作网站之前，应事先收集好制作网站时要用到的素材，通常状况下，素材按来源可分为以下几种类型。,客户供给的素材：主要是与产品或企业相关的图像和文字，比方产品外观图像等。,网上收集的素材：主要是一些帮助性图像，这些图像的装饰性较强，比方背景图像等。,单独创作的素材：主要是整个页面中视觉面积最大、最有说服力的图像，比方广告图像、标题图片等。,1.3.3 设计和制作网站,所谓设计，就是依据网站的性质和内容确定网站的风格，然后依据已确定的风格，用图像处理软件如Photoshop、Fireworks等设计好网页效果图，并将设计好的效果图进展切割导出。,将切割好的图片导出后，就可以在Dreamweaver中组织网站内容了，包括输入文本、插入图片、动画等。,1.3.4 空间和域名申请,要使别人能通过互联网访问你的网站，就需要将其上传到效劳器上，并拥有一个属于自己的域名。这就需要申请虚拟空间和域名。,所谓虚拟空间，是指网站内容所占用的连接到互联网上的效劳器空间。目前，效劳商能够供给的虚拟空间模式有两种：主机托管和虚拟主机。,1.3.5 测试和公布网站,有了空间和域名后，就可以测试并公布网站了，网站测试一般包括效劳器稳定和安全测试、程序和数据库测试、网页兼容性测试等。,1.3.6 推广和维护网站,1网站推广,1注册到搜寻引擎,2交换广告条,3宣传,4网络广告,5报纸、杂志,目前，网站推广的方法主要有下面几种。,2网站维护,网站维护主要是指网站公布后内容的实时更新。严格来说，每一个网站都应当由专业的技术人员定期更新维护。互联网的最大优势就是信息的实时性，只有快速反映，准确报道，吸引更多的扫瞄者，才能保证网站的流量。,1.4 网页设计的根本原则,1.4.1 网页颜色的选择与搭配,设计网页时，可依据以下原则确定网页的背风光和主色调，并进展颜色搭配。,1网页背景颜色最好选择白色或黑色。,2可依据网站的性质确定网页的主色调，并且该主色调应贯穿于网站中的全部网页。,3设计网页时恰当地利用同类色、邻近色和比照色，可增加网页的层次感、丰富网页的颜色或突出某些重要内容如导航条或版块标题。,1.4.2 网页版式设计,版式是设计网页时要考虑的一个重要因素。总的来说，各种网页的布局都大同小异。例如，几乎全部网页的上部都有站标、导航条和广告条，中间是各个版块，下部为网站信息区。,站标,导航条,广告条,各个版块,信息区,1.4.3 网页尺寸,页面尺寸是网页设计中必需要考虑的一个问题。目前，我国大局部电脑的显示器是17英寸，其区分率通常为1024768像素。因此，为避开在扫瞄网页时需频繁拖动水平滚动条，最好将网页宽度设置为1002像素以内。同时，由于扫瞄者可以利用扫瞄器的垂直滚动条快速上下滚动网页，因此对网页的高度没有特殊的要求，用户可依据需要设置。,