第1章--网页设计基础知识.ppt

第1章网页制作基础网站作为新媒体，具有很多与传统媒体不同的特征与特性，在开始制作网页之前，需要对网站的设计有全面的了解和认识。这一章首先介绍网页的基本概念及构成要素，帮助大家理解网页的特点与结构；接下来学习网站建设的基本流程，了解网站是如何从无到有的；此外，网页版式与风格设计是建设一个成功网站的关键，学习基本的规律有助于设计出更美观、实用的网站。1.1网页与网站基础知识由于互联网具备同时传送文字、动画、图形、声音等多媒体的能力，使之成为当今最流行的媒体。而形式各异、内容繁杂的网页是这些信息的载体。那么什么是网页？什么是网站？网页与网站究竟有哪些异同？网页包含哪些基本构成元素？1.1.1认识网页与网站网页（WebPage）实际上是一个文件，网页经由网址（URL）来识别与存取。当浏览者输入一个网址或单击某个链接，在浏览器中显示出来的就是一个网页。网站（WebSite）是各种各样网页的集合，有的网站内容众多，如新浪、搜狐等门户网站；有个网站只有几个页面，如个人网站。在构成网站的众多网页中，有一个页面比较特殊，称为首页（HomePage）。例如，当浏览者输入搜狐网站地址“”后出现在第一个页面，即sohu网站的首页，如图1.1所示。浏览者可以根据首页的导航进入其他页面，了解更多内容。1.1.1认识网页与网站1.网页的浏览过程启动浏览器程序后，在浏览器的地址栏中输入一个网页地址，该地址称为URL，浏览器便向该URL所指向的Web服务器发出请求。Web服务器收到请求后，把URL转换成服务器上真实的路径文件名。如果URL指向的是普通网页，Web服务器直接将它送给浏览器；如果HTML文档中包含脚本程序，服务器也将其随HTML代码一同传送回浏览器，并在浏览器中执行；如果HTML文档中嵌有CGI程序，Web服务器则运行CGI程序，调用数据库服务器或其他服务器得到所需数据，并将结果整合后传送至浏览器，这样用户就可以访问网页了。1.1.1认识网页与网站2.网页的分类按表现形式分为：静态网页和动态网页。静态网页是以HTML语言编写，以.htm.html.shtml.xml等为后缀名的网页；动态网页是以数据库技术为基础，由在服务器端运行的程序动态生成的网页，其后缀名一般为：.asp.php.jsp等。区别：根据网页程序是在客户端运行还是在服务器端运行来区分。在客户端运行的网页属于静态网页；在服务器端运行，由不同参数生成不同内容的网页属于动态网页。按位置分为：主页和内页。1.1.2网页的基本构成元素虽然网页种类繁多，形式内容各有不同。但网页的基本构成要素大体相同，包括标题（Logo）、导航、文本、图片、动画、超链接、表单、音视频等，如图1.2所示。网页设计就是要将上述构成要素有机整合，表达出美与和谐。网页的基本概念1.域名一个网站的网址，由网络域名管理组织在全球进行统一分配、管理，经申请后可得到。2.URL统一资源定位符，指明了查找信息时所采用的通信协议和需要查找的网址。3.HTTP超文本传输协议，用于从Web服务器传输超文本到本地浏览器的传输协议。4.HTML超文本标记语言，采用简洁的标签命令，通过对文字、图像、多媒体等对象的属性设置，建立具有文本、图像、超链接等元素的复杂网页。网页的基本概念5.网页浏览器它是把网页服务器或本地文件系统中的HTML文件正确翻译、显示出来，并让用户与网页交互的一种软件。6.CGI公共网关接口，可以使HTML文件在客户机和服务器之间建立一种交互，使信息查询、信息反馈、访问数据库等一系列灵活、复杂的操作可以实现。7.超链接具有将网站中的不同页面链接起来的功能。8.导航条相当于网站的主目录，链接着各个基本页面，起到网页浏览指路航标的作用。网页的基本概念9.表单用于在网页中申请某些服务或提交某些信息。10.站点是管理网页文档的场所。站点内的网页可以集中进行管理，共享模板、库项目等资源。11.发布将制作好的网页上传到Web服务器的过程为发布网页。1.2网站建设的基本流程规范的网站建设应遵循一定的流程，主要由规划设计阶段、实施发布阶段、评价阶段组成，各个阶段的具体环节如图1.3所示。1.3网页版式设计网页的版式设计是网页设计的核心，主要内容包括网页整体布局设计和导航样式的设计。本节将介绍常见的几种网页布局，以及网页导航设计应遵循的原则。1.3.1网页布局网页布局是网页设计的基础，目前网页的布局主要可归为三大类型：分栏式结构、区块分布式结构、无框架局限式结构。1．分栏式结构2．区域分布式结构3．无框架局限式结构1.3.2导航设计导航是网页设计中不可或缺的基础元素之一。导航就如同一个网站