网页设计基础

网页设计基础第1章网页设计基础随着Internet的迅速发展与普及，人们通过浏览网页可方便地获取信息，并且越来越多的个人、公司、企业、政府和学校建立了自己的网站。一个完整的网站并不是由一个单独的软件制作而成的，它需要多方面的配合。所以在建立网站之前，首先要了解各种网络的基础知识、网页制作的技术，网页布局、网页配色，以及涉及的软件。1.1Internet的基础知识Internet译为“因特网”，也称为国际互联网或互联网，它是指通过TCP/IP协议将世界各地的网络连接起来实现资源共享，并提供各种应用服务的全球性计算机网络。它是当今世界上最大、最流行的计算机网络，是信息社会的基础，在人类社会的各个领域中起着重大的作用。1.1.1Internet提供的服务类型Internet拥有不计其数的网络资源，用户可以在Internet上获得所需的任何信息。人们最熟悉的常用功能有网络信息浏览（WWW）、电子邮件（E-mail）、新闻组（NewsGroup）、文件传输（FTP）、远程登录（Telnet）、电子公告板（BBS），以及Internet提供的其他丰富多彩的服务。提示：intranet与Internet是不同的两个概念。intranet译为“内联网”，通常称为企业网，是指将Internet的概念与技术应用到企业内部信息管理和交换业务中，形成企业内部网络。1.1.2万维网和浏览器万维网（WorldWideWeb，WWW）也可以简称为Web、W3、3W等，它是基于“超文本”的信息查询和信息发布的系统。Web就是以Internet上众多的Web服务器所发布的相互链接的文档为基础，组成的一个庞大的信息网，它不仅可以提供文本信息，还可以包括声音、图形、图像以及动画等多媒体信息，它为用户提供了图形化的信息传播界面——网页。InternetExplorer（IE）是微软公司开发的Web浏览器，可以搜索、查看和下载Internet上的各种信息。“超文本”使用了一种被称为HTML的文件格式，任由浏览者在Web上通过跳转或者“超链接”从某一个页面跳到其他页面。除了IE浏览器外，其他常用的浏览器还有Firefox（火狐）浏览器、Opera浏览器、谷歌浏览器（GoogleChrome）等。1.2IP地址和Internet域名网页设计基础全文共14页，当前为第1页。与Internet相连的任何一台计算机（称为主机）都有唯一的一个网络地址，简称为IP地址。在Internet中域名可以通过域名系统（DomainNameSystem，DNS）映射为IP地址，方便人们记忆站点。网页设计基础全文共14页，当前为第1页。1.2.1IP地址该地址由32位二进制数组成。，该地址就称为这台主机的IP地址。IP地址是在Internet网络中为每一台主机分配的由32位二进制数组成的唯一标识符，例如，某台主机的IP地址是00001010010000010101011111011100。为了便于记忆，通常又把32位二进制数分成四个字节段，每字节段8位，用小数点将它们隔开，然后把每一字节段数都转换成相应的十进制数，称为点分十进制数。例如，这台主机用点分十进制数表示为20。因此，最小的IP地址值为，最大的地址值为55。IP地址又分为A类、B类、C类、D类和E类。常用的有A类（~55）、B类（55~55）、C类（55~55）和D类（55~55）。每一个IP地址包括两部分：网络地址和主机地址，如图1-1所示。图1-1四类IP地址例1-1根据IP地址判断其网络类别、网络地址和主机地址。若已知主机的IP地址为33，请确定该主机所在网络的类别、网络号及它的主机号。分析：(1)把四组十进制数转变为四字节32位的二进制数。四组十进制数33对应32位二进制数11001010110001000000000010000101。(2)确定网络类别。第一字节是11001010，则它的前三位进制数为110，所以该主机所在网络的类别是C类。(3)确定网络地址。C类网的前三个字节是它的网络地址，即202.196.0。(4)确定主机地址。C类网的主机地址是第四字节，所以它的主机地址是10000101。结论：该主机所在网络的类别是C类，网络号为201.196.0，主机号为133。1.2.2域名系统网页设计基础全文共14页，当前为第2页。由于IP地址是数字标识，使用时难以记忆和书写，因此在IP地址的基础上又发展出一种符号化的地址方案，来代替数字型的IP地址。每一个符号化的地址都与特定的IP地址对应，这样网络上的资源访问起来就容易得多了。这个与网络上的数字型IP地址相对应的字符型地址，就被称为域名。例如，清华大学的IP地址为00

，对应的域名为。网页设计基础全文共14页，当前为第2页。对于用户来说，使用域名比直接使用IP地址方便多了，但对于Internet内部数据传输来说，使用的还是IP地址。域名到IP地址的转换就要通过域名系统来解决。每个组织都有一个域名服务器，域名服务器实际上就是装有域名系统的主机，在其上面存有该组织所有上网计算机的域名及其对应的IP地址。当某个应用程序需要将一个计算机域名翻译成IP地址时，这个应用程序就与域名服务器建立连接，将计算机域名发送给域名服务器，域名服务器检索并把正确的IP地址送回给应用程序。下面以清华大学的域名（）来分析一下域名的构成：www是为用户提供服务的主机类型；tsinghua代表清华大学；edu代表教育科研网；cn代表中国。域名的结构是一种分层次结构，根据域的大小，从小到大用“.”分隔。按照Internet的组织模式，域名有两种分类方法：一种是按照机构进行分类，如表1-2所示。另一种是按国家和地区进行分类，如cn（中国）、us（美国）、hk（香港）等。表1-1机构域名表1.2.3统一资源定位器客户机与Web服务器的交互是通过超文本传输协议（HTTP）来完成的，用户要查询的某一台Web服务器是通过统一资源定位器(UniformResourceLocator，URL)来指定的。URL是一个指定因特网或内联网服务器中目标定位位置的格式化字符串，与在计算机中根据指明的路径查找文件类似，它是在WWW中浏览超文本文档时保证准确定位的一种机制。它既可指向本地计算机硬盘上的某个文件，也可指向Internet上的某一个网页。也就是说，通过URL可访问Internet上任何一台主机或者主机上的文件和文件夹。它包含有被访问资源的类型、服务器的地址、文件的位置等，也被称为“网址”。URL一般格式如下：访问协议：//主机域名或IP地址［：端口号］/路径/文件名1.访问协议访问协议是指获取信息的通信协议，由主机提供的服务类型而定。最常用服务类型如表1-2所示。网页设计基础全文共14页，当前为第3页。表1-2常用的服务类型及特征网页设计基础全文共14页，当前为第3页。2.主机域名或IP地址主机域名是要访问的服务器的名字服务器在网络中的位置，也可是服务器的IP地址。3.端口号每种访问协议都有默认的端口号，通常省略，所有WWW服务器应用程序的默认端口号都内定为80。4.路径由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。注意：Windows系统的主机不区分URL大小写，但是，Unix/Linux系统的主机区分大小写。http：//可省略，有时候www也可省略。1.3网页浏览原理Web技术经历了重大演变。最早的网页仅仅是由静态文档构成，用户浏览时只能被动接受网页内容。这与传统媒体相比没有什么变化。随着网络技术的发展，不仅可以在网页中嵌入程序，而且可以在运行过程中向网页添加动态内容，用户可以与网页进行交互，实现了全新的媒体形式。

1.3.1静态网页纯粹HTML格式的网页通常被称为静态网页，即以.htm、.html、.shtml、.xml等为后缀的文档。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF动画、Flash动画、JavaScript或VBScript特效等，这些“动态效果”只是视觉上的，它仍然不具备与客户端进行交互的功能。静态网页的特点简要归纳如下：静态网页每个页面都有一个固定的URL，且网页的URL以.htm、.html、.shtml等常见形式为后缀。网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。静态网页的内容相对稳定，因此容易被搜索引擎检索。静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难。静态网页的交互性较差，在功能方面有较大的限制。网页设计基础全文共14页，当前为第4页。静态网页的浏览过程如图1-2所示。网页设计基础全文共14页，当前为第4页。图1-2静态网页浏览过程1.3.2在服务器端运行的程序、网页和组件等属于动态网页，它们会随不同客户、不同时间返回不同内容的网页。动态网页是以.asp、.aspx、.php、.jsp等为后缀的文档。常用的动态网页技术有ASP、ASP.NET、PHP、JSP等。动态网页的特点简要归纳如下：

动态网页以数据库技术为基础，可以大大减少网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等。

动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时，服务器才会返回一个完整的网页。

采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求

网页设计基础全文共14页，当前为第5页。动态网页的浏览过程如图1-3所示。网页设计基础全文共14页，当前为第5页。图1-2静态网页浏览过程提示：动态网站也可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。

1.3.3网页制作语言网页制作语言主要有以下几种：HTML：是一种利用标记（tag）来描述字体、大小、颜色及页面布局的语言。XML：是一种定义语言，任何人、任何行业都可以遵循这些法则，定义各种标识来描述信息中的所有元素，然后通过一种被称为分析程序的小型程序进行处理，使信息能“自我描述”。ASP：由微软公司提供的开发动态网页的技术，提供了VBScript或JavaScript两种脚本引擎，主要用于网络数据库的查询和管理。ASP.NET：也是微软公司提供的开发动态网页的技术，是一种已经编译的、基于.NET环境，可以使用任何与.NET兼容的语言（如C#、VB.NET）构造Web应用程序。PHP：是一种在服务器端运行，在HTML文档中嵌入的脚本语言。JSP：是一项基于Java语言的动态网页技术标准，为创建可支持跨平台和Web服务器的动态页面提供了简洁而有效的工具，并逐渐成为动态网页的主流开发工具。。（6）VRML：用于描述三维的物体及其连接的网页格式。网页设计基础全文共14页，当前为第6页。网页设计基础全文共14页，当前为第6页。1.3.4网页制作软件一个网页实际就是一个普通的文本文件，使用最简单的纯文本编辑软件（如记事本、EditPlus），或者专业的网页制作软件（如Dreamweaver、FrontPage）都可以进行编辑制作。表1-3列出了一些常用的网页编辑软件、素材制作软件和常用工具软件等。表1-3网页制作常用的软件用途编辑网页Dreamweaver、ForntPage图像编辑制作Fireworks、Photoshop、CorelDraw音乐编辑录音软件AudioEditor、GoldWave、CoolEditPro动画编辑软件Flash、GIFAnimator、COOL3D屏幕抓图软件HySnapDXDeamweaver：Deamweaver是针对专业网页设计师开发的网页制作软件，利用它可以轻松制作出跨平台限制和跨越浏览器限制的充满动感的网页。由于Deamweaver具有所见所得的优点，也非常适合网页设计的初学者。FrontPage：FrontPage是由微软公司推出的网页制作工具。它使网页制作者能够更加方便、快捷地创建和发布网页，具有直观的网页制作和管理方法，简化了大量的工作。Flash：

Flash是一种二维动画设计软件，被大量应用于网页矢量动画的设计。由于Flash可以包含动画、视频、演示文稿和应用程序，并且它的文件非常小，因此Flash目前已经成为了Web动画的标准。Firworks：Firworks是一种创建与优化Web图像和快速构建网站与Web界面原型的理想工具。Firworks可以用最少的步骤生成最小但是质量很高的JPEG和GIF图像，这些图像可以直接用于网页。作为一种为网页设计而开发的图像处理软件，Fireworks能够制作切图和生成鼠标动态感应的JavaScript按钮，并且具有矢量图和位图图像编辑功能等，这些都是其他网页图像处理软件所不具备的。Photoshop：Photoshop是由Adobe公司开发的图形处理软件，它是目前公认的最好的通用平面设计软件。Photoshop除了具有图像处理功能外，还含有许多能让用户把图像有效地保存为Web格式的功能。AudioEditor：AudioEditor是Ulead公司MediaStudioPro6.5中的一个专门进行波形文件编辑的软件。它操作简单，并允许可视化编辑声音，并且可以进行混音、淡入、淡出、反向、缩减和转换等功能。1.4网站规划与网页设计在设计网页之前，应该对自己的网站有一个总体的策划和设计，明确网站的主题。根据网站的主题进一步设计网页的整体风格、网页的色彩搭配、网页的布局和层次结构等内容。1.4.1网站定位网页设计基础全文共14页，当前为第7页。只有确定了网站的主题和浏览网页的对象，才能在网页内容选取、美工设计、划分栏目各方面尽力做到合理，并吸引祝更多的眼球。网页设计基础全文共14页，当前为第7页。确定了网站的主题和浏览群，就可以来创意网站的风格了。一个好的创意加上一定基础的美工，会使网站收到意想不到的效果，大大增加网站的回头率。风格（style）是非常抽象的概念，往往要结合整个站点来看，而且不同的人的审美观都不同，对于风格的喜好也不同。不管用什么风格，风格永远是为主题服务的，也就是要让它做好衬托气氛的任务。整体网站应该使用统一的风格，包括背景颜色、字体颜色大小、导航栏、版权信息、标题、注脚、版面布局，甚至文字说明使用的语气这些方面都要注意前后一致，或者说前后协调。1.4.2网站结构一个网站是由许许多多的网页组成的，这些网页的组织方式就是网站的结构。网站的结构可以大致分为三种基本类型：层次结构、线性结构、网状结构。层次结构：我们平时看到的一些软件的在线帮助或者教学文档都属于层次型结构站点，这种网站结构的优点是层次分明、结构清晰，访问者很清楚自己需要寻找的内容在什么位置。线性结构：线形结构的站点一般只能确定某个链接和下一个链接之间的必然联系，它们之间是有序的线形排列关系，就好像一个工厂生产线的工艺流程一样。这种结构的站点适合用来组织某种流程式的网页结构。网状结构：网状结构也是现在使用最多的一种网站结构，尤其是在大型的门户站点中，该结构几乎是无处不在，只要是一个页面中的内容和其他页面有某种联系，就将它们之间制作成超链接，访问者可以在网站中随意跳转浏览。1.4.3网页布局和网页1．网页结构布局网页结构布局是根据网页内容结构的划分来设计的，最常见的结构布局方式包括国字型，拐角型和左右框架型。（1）国字型网页布局网页设计基础全文共14页，当前为第8页。国资型也称为“同”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等、这种结构是网上最常见的一种结构类型，如图1-3所示。网页设计基础全文共14页，当前为第8页。图1-3国字型网页（2）拐角型网页布局网页设计基础全文共14页，当前为第9页。拐角型结构与国字型结构只是形式上的区别，其实是很相近的，上面是标题和广告横幅，接下来的左侧是一窄列链接，右列是很宽的正文，下面也是一些网站的辅助信息，如图1-4所示。网页设计基础全文共14页，当前为第9页。图1-4拐角型网页（3）左右框架型网页布局网页设计基础全文共14页，当前为第10页。这是一种左右分为两页的框架结构，一般左侧是导航链接，有时最上面会有一个小的标题或标志，右侧是正文。很多大型的论坛都是这种结构的，有一些企业的网站也喜好采用这种结构。这种类型结构清晰，一目了然，如图1-5所示。网页设计基础全文共14页，当前为第10页。图1-5左右框架网页2．网页配色网页设计是一种特殊的视觉设计，它对色彩的依赖性很高，色彩设计同时还是网站风格设计的决定因素之一。色彩在网页上是“看得见”的视觉元素。网页色彩总的应用原则应用是“总体协调，局部对比”，即网页的整体色彩效果应该是和谐的，只有局部的、小范围的地方可以有一些强烈色彩的对比。在色彩的运用上，可以根据网页内容的需要，分别采用不同的主色调。因为色彩具有象征性，例如，嫩绿色、翠绿色、金黄色、灰褐色就可以分别象征着春、夏、秋、冬。其次还有职业的标志色，例如，军警的橄榄绿，医疗卫生的白色等。色彩还具有明显的心理感觉，例如，冷、暖的感觉，进、退的效果等。另外，色彩还有民族性，各个民族由于环境、文化、传统等因素的影响，对色彩的喜好也存在着较大的差异。充分运用色彩的这些特性，可以使网页具有深刻的艺术内涵，从而提升网页的文化品位。下面介绍几种色彩选配方案：暖色调：即红色、橙色、黄色、褐色等色彩的搭配。这种色调的运用，可使主页呈现温馨、和煦、热情的氛围。冷色调：即青色、绿色、紫色等色彩的搭配。这种色调的运用，可使主页呈现宁静、清凉、高雅的氛围。网页设计基础全文共14页，当前为第11页。对比色调，即把色性完全相反的色彩搭配在同一个空间里。例如，红和绿，黄和紫、橙和蓝等。这种色彩的搭配，可以产生强烈的视觉效果，给人亮丽、鲜艳、喜庆的感觉。当然，对比色调如果用得不好，会适得其反，产生俗气、刺眼的不良效果。这就要把握“大调和，小对比”的重要原则，即总体的色调应该是统一和谐的，局部的地方可以有一些小的强烈对比。网页设计基础全文共14页，当前为第11页。提示：如果是针对特殊人群的网站（如个人网站、儿童网站等），网页结构布局不一定要完全按照前面介绍的三种形式设计，可以设计得更活泼些，能够突出个性化的特色，网页的配色也可以更大胆一些，如图1-6所示。（a）个人网站（b）儿童网站1.4.4网页图形和图像是人们非常乐于接受的信息载体，是网页中除了文字外最重要的组成部分。一副图画可以形象生动地表示大量的信息，具有其他媒体无法比拟的优点。图像在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。因此了解图形图像的相关知识对于网页设计是非常必要的。网页设计基础全文共14页，当前为第12页。图形图像的基本概念网页设计基础全文共14页，当前为第12页。像素记录图像的基本单位，也是组成“位图”的最小单位，像素数量越多越能够表现图像极细微的部分。例如，800×600=48万像素。分辨率分辨率指图像中存储的信息量。这种分辨率有多种衡量方法，典型的是以每英寸的像素数（PPI）来衡量。图像分辨率和图像尺寸（高宽）的值一起决定文件的大小及输出的质量，该值越大图像文件所占用的磁盘空间也就越多。图像分辨率以比例关系影响着文件的大小，即文件大小与其图像分辨率的平方成正比。如果保持图像尺寸不变，将图像分辨率提高一倍，则其文件大小增大为原来的四倍。（3）图像图像是由扫描仪、摄像机等输入设备捕捉实际的画面产生的数字图像，即由像素点阵构成的位图。图像用数字任意描述像素点、强度和颜色。描述信息文件存储量较大，所描述对象在缩放过程中会损失细节或产生锯齿。分辨率和灰度是影响显示的主要参数。图像适用于表现含有大量细节（如明暗变化、场景复杂、轮廓色彩丰富）的对象，如照片、绘图等，通过图像软件可进行复杂图像的处理以得到更清晰的图像或产生特殊效果。图形图形是指由外部轮廓线条构成的矢量图，即由计算机绘制的直线、圆、矩形、曲线、图表等。图形用一组指令集合来描述图形的内容，如描述构成该图的各种图元位置维数、形状等。描述对象可任意缩放不会失真。适用于描述轮廓不很复杂，色彩不是很丰富的对象。矢量图形与分辨率无关，可对其独立进行移动、缩放、旋转和扭曲等变换，而不会改变其外观品质。提示：图形和图像这两个概念是有区别的。与图像不同，在图形文件中只记录生成图的算法和图上的某些特点，也称矢量图。在计算机还原时，相邻的特点之间用特定的很多段小直线连接就形成曲线，若曲线是一条封闭的图形，也可靠着色算法来填充颜色。它最大的优点就是容易进行移动、压缩、旋转和扭曲等变换，主要用于表示线框型的图画、工程制图、美术字等。图形只保存算法和特征点，所以相对于位图（图像）的大量数据来说，它占用的存储空间也较小。但由于每次屏幕显示时都需要重新计算，故显示速度没有图像快。另外，在打印输出和放大时，图形的质量较高而点阵图（图像）常会发生失真。颜色模式RGB颜色：RGB颜色模式是工业界的一种颜色标准，是通过对红(red)、绿(green)、蓝(blue)三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色的。

RGB色彩模式使用RGB模型为图像中每一个像素的RGB分量分配一个0~255范围内的强度值。例如，纯红色R值为255，G值为0，B值为0；灰色的R、G、B三个值相等（除了0和255）；白色的R、G、B都为255；黑色的R、G、B都为0。RGB图像只使用三种颜色，就可以使它们按照不同的比例混合，在屏幕上重现16777216种颜色。网页设计基础全文共14页，当前为第13页。CMYK颜色：CMYK是一种基于