购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

1.1 熟悉网页设计概念

网站是互联网上一个信息小站,网页是互联网上显示的信息页面,如果说网站是一本书,那么网页就是生活中的一页书,是展示信息的最小单元。在网页中包含文字、图像、多媒体等内容,通过这些内容向浏览者传达一定的信息。

1.1.1 网页和网站

网站就是由网页组成的,网页是构成网站的基本元素,是承载各种应用的平台。一个网站如果没有网页,将是一个空站,如果只有域名和虚拟主机而没有制作任何网页的话,任何人都无法访问网站。

实际上,网页就是一个文件,通常是HTML格式,文件扩展名一般为.html或.htm,也可以是.asp、.aspx、.php或.jsp等。网页存放在世界某个角落的某一台计算机中,而这台计算机必须是与互联网相连的。网页经由网址(URL)来识别和存取,当在浏览器输入网址后,该网页文件会被传送到你的计算机上,然后再通过浏览器解释网页的内容,再展示到面前。

网站是指在互联网上,根据一定的规则,使用HTML等语言制作的,用于展示特定内容的网页集合。简单地说,网站就像布告栏一样,人们可以通过网站来发布自己想要公开的信息,或者利用网站来提供相关的服务。人们可以通过网页浏览器来访问网站,获取自己需要的信息,或者应用网络服务。

在网站中,有一个网页比较特殊,当人们在浏览器地址栏中输入网站的网址后,会首先看到这个页面,通常被称为主页(或称首页),首页类似图书中的目录,具有导航作用,如图1.1所示。

图1.1 在浏览器中显示的首页效果

1.1.2 网页类型

网页可以分为多种类型,但是由于分类方法不同,也会有不同的类型,根据是否使用了服务器技术,人们把网页分为静态网页和动态网页。简单说明如下。

1.静态网页

静态网页一般以.html或.htm为文件扩展名,通过网页设计工具一次性设计,只能够通过手工方式更新页面信息,信息更新速度相对比较缓慢。

注意:现在很多网站管理系统,或者大型网站都会提前把动态网页生成静态网页,以便提高网站访问速度,我们称这种静态网页为伪静态。

简单概括来说,静态网页具有下面几个特点:

静态网页每个网页都有一个固定的URL,且网页URL以.htm、.html、.shtml等常见形式为后缀,而不含有“?”。

网页内容一经发布到网站服务器上,无论是否有用户访问,每个静态网页的内容都是保存在网站服务器上的,也就是说,静态网页是实实在在保存在服务器上的文件,每个网页都是一个独立的文件。

静态网页的内容相对稳定,因此容易被搜索引擎检索。

静态网页没有数据库的支持,在网站制作和维护方面工作量较大,因此当网站信息量很大时完全依靠静态网页制作方式比较困难。

静态网页的交互性较差,在功能方面有较大的限制。

2.动态网页

动态网页是通过网页脚本语言自动处理、自动更新的页面,例如,论坛中的帖子就是通过网站服务器运行程序,自动处理信息,按照流程更新网页。动态网页一般以.asp、.aspx、.php或.jsp为文件扩展名。

注意:常见网页中包含的动态效果,网页中嵌入了动画,这样的页面不能称为动态网页,可以称为特效网页,或者多媒体页面。

动态网页具有下面几个特点:

动态网页以数据库技术为基础,可以大大减少网站维护的工作量。

采用动态网页技术的网站可以实现更多的功能。例如,用户注册、用户登录、在线调查、用户管理、订单管理等。

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

动态网页中的“?”对搜索引擎检索存在一定的问题,搜索引擎一般不可能从一个网站的数据库中访问全部网页,或者出于技术方面的考虑,搜索蜘蛛不去抓取网址中“?”后面的内容,因此采用动态网页的网站在进行搜索引擎推广时需要做一定的技术处理才能适应搜索引擎的要求。

3.动态网页类型

实际上,不同扩展名的动态网页文件分别代表了不同的服务器技术。只要开发动态网站,用户就需要先指定一种服务器端技术,目前实现动态网页的服务器技术主要包括CGI、ASP/ASP.NET、PHP和JSP等。简单说明如下。

CGI

CGI(Common Gateway Interface)是一种通用的网关接口,是外部程序与网页服务器之间的标准编程接口。用户可以使用不同的语言编写CGI程序。例如,Visual Basic、Delphi或C/C++等。可以将已经写好的CGI代码放在网页服务器的计算机上运行,再将其运行结果通过网页服务器传输到客户端的网页浏览器上。事实上,由于CGI技术比较低级,普通用户在编写代码时会比较困难而且效率低,而且每一次修改程序都必须将CGI程序编译成可执行文件,因此现在很少再有用户使用。

ASP

ASP(Active Server Pages)是在CGI技术基础上由微软公司开发的一种快速、简便的服务器技术,由于它的学习门槛比较低,初学者很容易学习,且功能强大,一经推出就受到了众多专业人士的好评,凭借微软公司强有力的技术支持,可以说是很多中小型网站建设中最为流行的技术之一。

ASP.NET

ASP.NET是微软公司在ASP基础上推出的一种服务器技术,它全面采用效率较高的、面向对象的方法来创建动态Web应用程序。在原来的ASP技术中,服务器端代码和客户端HTML混合、交织在一起,常常导致页面的代码冗长而复杂,程序的逻辑难以理解,而ASP.NET就能很好地解决这个问题,而且能与浏览器独立,且可以支持VB.NET、C#、VC++.NET、JS.NET等4种编程语言。

PHP

PHP(Hypertext Preprocessor,超文本预处理器)是一种HTML内嵌式的语言,PHP与微软的ASP很相似,都是一种在服务器端执行的嵌入HTML文档的脚本语言,语言的风格类似于C语言,现在被很多的网站编程人员广泛地运用。由于PHP源代码是开放的,所有的PHP源代码事实上都可以得到。同时PHP技术又是免费的,因此深受一些用户欢迎。

JSP

JSP(Java Server Pages)是Sun公司推出的网站开发技术,是将纯Java代码嵌入HTML中实现动态功能的一项技术。目前,JSP已经成为ASP的有力竞争者。

与ASP技术非常相似,JSP和ASP都是在HTML代码中嵌入某种脚本并由语言引擎解释执行程序代码,它们都是面向服务器的技术,客户端浏览器不需要任何附加软件的支持。两者最明显的区别在于ASP使用的编程语言是VBScript之类的脚本程序,而JSP使用的是Java。此外,ASP中的VBScript代码被ASP引擎解释执行,而JSP中的脚本在第一次执行时被编译成Servlet并由Java虚拟机执行,这是ASP与JSP本质的区别。

4.静态网页与动态网页比较

静态网页和动态网页各有特点,网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少,如果网站功能比较简单,内容更新量不是很大,采用纯静态网页的方式会更简单,反之要采用动态网页技术来实现。

动态网页的程序都是在服务器端运行,最后把运行的结果返回到客户端浏览器上显示。而静态网页是事先制作好的,直接通过服务器传递给客户端浏览器浏览。

静态网页和动态网页主要根据网页制作的语言来区分。

静态网页使用语言:HTML,如图1.2所示。

动态网页使用语言:HTML+ASP、HTML+PHP或HTML+JSP等,如图1.3所示。

静态网页是网站建设的基础,静态网页和动态网页之间并不矛盾,为了网站适应搜索引擎检索的需要,即使采用动态网站技术,也可以将网页内容转化为静态网页发布。

图1.2 静态网页显示的网址

图1.3 动态网页显示的网址

动态网站也可以采用静动结合的原则,适合采用动态网页的地方用动态网页,如果必须使用静态网页,静态网页相关图片则可以考虑用静态网页的方法来实现。在同一个网站上,动态网页内容和静态网页内容同时存在也是很普遍的。

1.1.3 网页构成

网页内可以包含很多内容,如文本、图像、动画等内容,这些信息构成了网页的基本内容,如图1.4所示。实际上网页包含的元素是很多的,有些元素可以直观地看到,而有的元素可能看不到,只有通过代码才能够看到。具体说明如下。

1.文本

网页信息主要是以文本为主的。这里指的文字是文本文字,而并非图片中的文字。在网页中可以通过字体、大小、颜色、底纹、框等选项来设置文本的属性。中文文字常用宋体、9磅或12像素大小、黑色即可,颜色不要太杂乱。大段文本文字的排列,建议参考一些优秀的杂志或报纸。

图1.4 组成网页内容的各种元素

2.图像

网页丰富多彩主要是因为图像的缘故。网页支持的图像格式包括JPG、GIF和PNG等格式。常用图形包括:

Logo图标,代表网站形象或栏目内容的标志性图片,一般在网页左上角。

Banner广告,用于宣传站内某个栏目或者活动的广告,一般以GIF动画形式为主。

图标,主要用于导航,在网页中具有重要的作用,相当于路标。

背景图,用来装饰和美化网页。

3.动画

网页中一般会包含大量动画,这些动画能够活跃网页气氛,增加网页包含的信息量。网页动画包含很多类型,如SWF动画、GIF动画、脚本动画等,简单说明如下:

SWF动画,使用Flash软件制作的动画效果。一般用来制作Banner广告,或者大型、宽幅广告,或者制作特效按钮。也有一些网站完全使用SWF制作完成。

GIF动画,GIF动画实际也是图像,不过显示为动态效果,一般通过图像编辑软件制作。一般用来制作各种动态图标,对网页进行修饰。

脚本动画,一般使用JavaScript语言编写的特效,如灯箱广告,Tab栏目切换,鼠标特效,变形动画、移动动画、渐隐渐显动画,或者卷帘文字等。

4.链接

超链接是网站的灵魂,它是从一个网页指向另一个目的端的链接,如指向另一网页或者相同网页上的不同位置。超链接可以指向一幅图片、一个电子邮件地址、一个文件、一个程序或者也可以是本页中的其他位置。超链接的载体可以是文本、图片或者是Flash动画等。超链接广泛地存在于网页的图片和文字中,提供与图片和文字相关内容的链接,在超链接上单击鼠标左键,即可链接到相应地址(URL)的网页。有链接的地方,鼠标指上时默认会变成小手形状。可以说超链接正是网页的最大特色。

5.导航条

导航条是一组超链接,方便用户访问网站内部各个栏目。导航条可以是文字,也可以是图片,还可以使用Flash来制作。导航条可以显示多级菜单和下拉菜单效果。

6.表格

表格在网页中的作用非常大,它可以用来布局网页,设计各种精美的网页效果,也可以用来组织和显示数据。

7.表单

表单主要用来收集用户信息,实现浏览者与服务器之间的信息交互。

8.其他元素

除了上面几个网页基本元素,在页面中可能还包括音频、视频、框架等各种构成元素。 7QUqjdu+Aj2y7WW0dre1TLioTMn9XVJCkJNbINO6zLsJCdRfN2p+sXIud9404Ds0

点击中间区域
呼出菜单
上一章
目录
下一章
×