第一章网页基础.ppt

1、1,网页设计与制作,信息科学与工程学院,邹文玲 ,2,第1章 网页设计基础,3,1.1 网站与网页,1.1.1 网站与网页的概念 网页是WWW上的基本文档，是使用HTML等工具制作的用于展示特定内容的文件，通常以.htm或.html为扩展名。网页可以独立存在，但常常作为网站的一部分。 网站则是一组相关网页和有关文件的集合，通过“超链接”把这些网页和有关文件连接在一起，网站上的信息就是以网页的形式显示出来的。网站一般有一个特殊的网页作为浏览的起始点，称为主页（Homepage），主页大多是罗列网站的主要内容和一些最新的信息，用来引导用户访问其他网页。,4,1.1 网站与网页,1.1.2 WWW工

2、作原理 WWW是World Wide Web的缩写，也可以简写为W3、3W、Web等，译为“万维网”或“环球网”，它可以把全球与Internet连接的计算机多媒体信息通过超文本有机地结合在一起，为用户提供了图形化的信息传播界面网页。 WWW系统由WWW客户机（即运行于客户端的浏览器软件，如IE）、WWW服务器（也称WEB服务器）和超文本传输协议（HTTP）三部分组成。,5,1.1 网站与网页,1.1.2 WWW工作原理在WWW上提供信息的每台计算机称为Web服务器，网站通常位于Web服务器上，而浏览网站信息的称为客户机，WWW以客户机/服务器方式进行工作。实际工作过程是：当通过域名（IP地址）

3、访问网站或选择网页中的一个超链接时，WWW客户机就通过域名（IP地址）或把超链接所附的地址读出来，通过HTTP协议向相应的WEB服务器发出一个请求，要求相应的超文本文件，WEB服务器对请求进行处理：当网页中仅包含HTML文档，服务器直接使用HTTP协议将该文档发送到客户端机；如果HTML文档中还包含有JavaScript或VBScript脚本程序代码，这些代码也将随同HTML文档一起下载；如果网页中还嵌套有CGI或ASP程序，这些程序将由服务器执行，并将运行结果通过HTTP协议发送给客户机，最后由浏览器解释HTML文档，并将结果在客户端浏览器上显示，即我们看到的网页。,6,1.1 网站与网页,

4、1.1.2 WWW工作原理 详细工作过程如图1-1所示。,图1-1 WWW工作过程,7,1.1 网站与网页,1.1.2 WWW工作原理Web客户机与服务器之间通过超文本传送协议（Hypertext Transfer Protocol），即HTTP协议进行通信，其功能主要包括实现Web客户机与服务器的连接，发出带文件名的请求，接收文件，关闭连接等。 简单地讲，WWW是由无数的网页组合在一起的世界，这些网页依照超文本的格式写成。在WWW技术中，网络浏览（即访问网站）是获取或发发布信息的最重要的手段。,8,1.1 网站与网页,1.1.3静态网页和动态网页 1. 静态网页 静态网页是标准的HTML文件

5、，其文件扩展名是.htm或.html。它可以包含HTML标记、文本、Jave小程序、客户端脚本以及客户端ActiveX控件，但这种网页不包含任何服务器端脚本，该页中的每一行HTML代码都是在放置到Web服务器前由网页设计人员编写的，在放置到Web服务器后便不再发生任何更改，所以称之为静态网页。,9,静态网页和动态网页,2. 动态网页 动态网页使用ASP、PHP和CGI等程序生成，动态网页中的某些脚本只能在Web服务器上运行，而静态网页中的任何脚本都不能在Web服务上运行。当Web服务器接收到对静态网页的请求时，服务器将该页发送到请求浏览器，而不进一步的处理。当Web服务器接收到对动态网页的请求

6、时，它将做出不同的反映：服务器根据URL携带的参数通过应用服务软件（如IIS等）运行服务器端程序，产生的结果页面再返回客户端。应用服务软件与Web服务器软件一并安装、运行在同一台计算机上。,10,1.2 网站的基本结构,网站在计算机中的表示形式就是一个站点文件夹，里面包含一些文件夹和文件，包括网页文件或其他类型的文件。这些看起来单独存在的文件，实际上是通过超链接组织起来的。 超链接就是一个页面到另一个页面的链接，人们打开网站的主页后，通过点击上面的超链接就可以打开相应的网页。正是超链接的存在，才使网站成为一个整体。,11,1.2 网站的基本结构,按网页在网站中所处的位置可将网页分为主页和子页两

7、类。,12,1.2 网站的基本结构,1.2.1 网站的超链接结构 1. 线性网站线性网站采取网页之间依次相连的线性形式来浏览网页的内容，如图1-2所示，这种网站的结构非常简单。图1-2 线性结构,13,1.2 网站的基本结构,1.2.1 网站的超链接结构 2. 层次网站层次网站的结构方式类似于一棵树，主页为树的根，下面有树枝，树枝下面是叶子，如图1-3所示。网页分层排列，逐层向下链接。图1-3 树形结构,14,1.2 网站的基本结构,1.2.1 网站的超链接结构3. 网状网站网状网站是常用的一种网站结构，主页下面有若干子页，子页下面又有若干子页，这些网页还可以通过超链接访问主页或其他网页，如图

8、1-4所示图1-4 网状结构,15,1.2 网站的基本结构,1.2.2 动态网站的层次结构 根据动态网站的运行，可将网站分为以下3个层次，如图1-5所示。图1-5 动态网站的层次结构,16,1.2 网站的基本结构,1.2.2 动态网站的层次结构 第1层为Web服务器层，直接面向用户，为用户提供HTTP服务。 第2层为中间件层，是联系应用和后台数据库的桥梁。 第3层为数据库层，是整个网站动态数据内容存储的地方。,17,1.2 网站的基本结构,1.2.2 动态网站的层次结构 Web服务器上存在许多HTML文件，用户可以使用浏览器通过HTTP协议来访问并显示这些超文本页面。但是HTML文件仅仅是静态

9、的网页，不能动态更新，为了能动态访问网上的数据库资源，达到交互式的访问的目的，Web服务器中包括了CGI（公共网关接口），提供了与网上数据库资源连接的可能性。中间件可以实现Web服务器与数据库资源的连接。对于嵌入了数据库访问检索项的网页，中间件可以将检索项转换成SQL语句访问数据库，并将所需的数据库资源解释成浏览器可以解释的HTML页面供用户浏览。数据库资源可以经局域网或广域网与Web服务器连接。 另外，从站点的文件目录层次来看，网站内文件组织的第一层是站点文件夹，可以看成是站点的根目录；将网站内容分类后，放在站点文件夹下面的子目录，称为第二层；每个分类内容下面还有细节内容可以放在第二层目录的

10、下面，称为第三层。网站的目录结构设计主要考虑是否方便浏览者进行浏览，这需要网站的设计者对网站的内容在整体上进行规划。一般中小型的网站的层次不超过三层，层次过于复杂容易使浏览者不易查找到想要浏览的内容。,18,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素常见的网页由网站的logo、导航栏、图片、动画、按钮、文字、声音、表格、表单、超级链接等组成。,19,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素1. 网站的logo 通俗的说， logo就是为一个事物设计的标志或者图案，标志、徽标、商标。logo是现代经济的产物，它不同与古代的印记，现代标志承载着企业的无形资产，是企

11、业综合信息传递的媒介。 网页中的logo用来标识网站，Logo可以是中文、英文字母、符号或图案，也可以是动物或人物等。例如，新浪网用字母sina加眼睛作为Logo，体现网站的敏锐和动感的特色。Logo常被放在主页的醒目位置（网页的左上角或上方）。通常浏览者一看到logo就能知道是哪一个网站，在主页下面的其他页面设置与网站的logo超链接，单击logo就可以进入该网站。在网页上放置logo图片，可以使人们在打开多个网站浏览时知道正在浏览的是哪个网站的网页。,20,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素2. 导航栏 导航栏是设计者在规划好站点结构、开始设计主页时必须考虑的一项内

12、容。导航栏的作用就是要让浏览者在浏览站点时，不会因为迷路而中止对站点的访问。事实上，导航栏就是一组超级链接，这组超级链接的目标就是本站点的主页以及其他重要网页。在设计站点中的网页时，可以在站点的每个网页上都显示一个导航栏，这样，浏览者就可以方便地在站点的网页中浏览。 一般情况下，导航栏应放在较引人注目的位置，通常是在网页的顶部或一侧。导航栏既可以是文本链接，也可以是一些图像按钮。,21,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素 图1-6所示的就是将SOHU网站的logo和导航栏结合在一起情况。,22,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素 导航栏设计时要注

13、意以下几个问题： 1）内容分类要合理。如果导航栏分类不合理，可能会使浏览者找不到想要查看的内容。 2）清晰、醒目。便于浏览者找到相关内容，导航栏的位置大多放在主页的上方或左侧。 3）要突出本网站的主要内容和最新内容。 4）字体、颜色要基本统一。导航栏字体颜色的统一可以达到清晰、明了、美观的效果。,23,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素3. 图片 图片在网页中具有提供信息、展示作品、装饰网页、表达网页情调和风格的作用。使用图片要注意以下几个问题： 1）图片的数量和格式。图片在网页中的使用会使打开网页的速度变慢，因此网页中包含的图片不可过多，而且要注意图片的格式一般为GI

14、F或JPEG格式，这两种图片占用的空间不是很大，是现今网页中常用的两种图片格式。 2）图片的选择。放在网页中的图片一定要衬托网页的主题，要注意其大小、色彩与网页背景和其他网页元素的搭配。 3）图片的来源。图片最好是网页设计者自己拍摄、绘制或处理过的，也可以用网上的图片，但要注意版权问题。 4）图片的处理。对于图片处理，可以用Windows操作系统中的画图程序或现今流行的图片处理软件PhotoShop等来对图片进行处理，达到网页所需要的图片效果。,24,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素4. 动画和视频 适当的使用动画可以使网页增色，但和在网页中使用图片一样，不要过多的使

15、用动画，因为它会使浏览网页的人产生零乱的感觉，而且会分散浏览者的注意力，并增加打开网页的时间。同样，也要注意所选动画和网页主题相应，与网页整体的颜色搭配，使之与网页融为一体。动画可以从网上下载，当然也可以自己来制作。常用制作动画的软件有Macromedia Flash和Macromedia Fireworks，复杂的动画一般用前者，简单的动画一般用后者。网页中经常使用GIF动画，它最大的特点就是占用的空间小。人们常用Ulead Gif Animator软件来制作GIF动画，特别适合于网页中一些小动画的制作。 视频文件的格式也非常多，常见的有RealPlayer、MPEG、AVI和DivX等。视

16、频文件的采用让网页变得非常精彩而且有动感，网络上的许多插件也使向网页中插入视频文件的操作变得非常简单。,25,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素5. 按钮 网页中的按钮可以实现某种功能，如搜索、注册、登录、提交表单等。设计时要注意以下几点： 1）按钮的形状。通常同一栏目中的按钮大小要一致，形象直观。 2）立体按钮。在网页中，立体按钮也是经常被采用的，它可以增加网页的立体感。 3）颜色设计。按钮的颜色设计也要和网页整体的颜色搭配协调。 另外，常用的网页制作软件中提供了一些现成的按钮，比如Dreamweaver中就提供了一些成组按钮，但大多数按钮还是自己制作。利用Photo

17、Shop软件可以制作出精美的按钮，或者从网上下载素材再进行处理。,26,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素6. 文字 文本一直是人类最重要的信息载体与交流工具，文字也是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，当用户浏览时，可以很快的展现在用户面前。网页中的信息也以文本为主。 与图像相比，文字虽然不如图像那样能够很快引起浏览者的注意，但却能准确地表达信息的内容和含义。为了克服文字固有的给人带来死板不活泼的感觉的缺点，人们赋予了网页中的文本更多的属性，如字体、字号、颜色、底纹和边框等。通过不同格式的区别，突出显示重要的内容。此外，还可以在网页中设计各种各样

18、的文字列表，以清楚地表达一系列的项目。以上这些功能的运用都给网页中的文本赋予了新的生命力。,27,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素7.声音 声音是多媒体网页的一个重要组成部分。当前存在着一些不同类型的声音文件，可使用多种不同的方法将这些声音添加到网页中。在决定添加的声音文件的格式和添加方式之前，需要考虑的因素包括需添加声音的用途、格式、文件大小、品质，以及浏览器差别等。不同的浏览器对声音文件的处理方法是非常不同的，彼此之间很可能不兼容。 用于网络的声音文件的格式非常多，常用的有MIDI、WAV、MP3和AIF等，设计者在使用这些格式的文件时，需要加以区别。很多浏览器不

19、用插件也可以支持MIDI、WAV和AIF格式的文件，而MP3和RM格式的声音文件则需要专门的浏览器播放。 一般来说，不要使用声音文件作为背景音乐，因为那样会影响网页下载的速度。可以在网页中添加一个打开声音文件的链接，让播放音乐变得可以控制。,28,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素8.表格 通常使用表格来控制网页中信息的布局方式。这包括两方面：一是使用行和列的形式来布局文本和图像，以及其他的列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。,29,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素 9.表单 网页中的表单通常用来接收浏览者在浏

20、览器端的输入，然后将这些信息发送到设计者设置的目标端。这个目标既可以是文本文件、Web页、电子邮件，也可以是服务器端的应用程序。表单的用途如下： 1）收集联系信息 2）接收用户要求 3）收集订单、出货明细表和收费清单 4）获得反馈意见 5）设置来宾签名簿 6）让浏览者输入关键字，以在站点中搜索相关的网页 7）让浏览者注册为会员，并以会员身份登录站点 表单由具有不同功能的表单域组成。最简单的表单也要包含一个输入区域和一个提交按钮。浏览者填写表单的方式通常是输入文本、选中单选按钮与复选框，以及从下拉列表中选择选项等。,30,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素 根据表单功能与

21、处理方式的不同，通常可以将表单分为用户反馈表单、留言簿表单、搜索表单和用户注册表单等类型。图1-7所示的是用户注册雅虎邮箱的表单部分内容。,31,1.3 网页设计的基本理念,1.3.1 网页包括的主要元素10.超级链接 超级链接技术可以说是万维网流行起来的最主要的原因。超级链接是从一个网页指向另一个目的端的链接，这个目的端通常是另一个网页，但也可以是一幅图片、一个电子邮件地址、一个文件(如多媒体文件、文档或其他任意文件)、一个程序或者本网页中的其他位置。其载体通常是文本、图片或图片中的区域，也可以是一些不可见的程序脚本。 当浏览者单击超级链接时，其目的端将显示在Web浏览器上，并根据目的端的类

22、型以不同方式链接。例如，当指向一个AVI文件的超级链接被单击后，该文件将在媒体播放软件中打开；如果单击的是指向另一个网页的超级链接，则该网页将显示在Web浏览器上。,32,1.3 网页设计的基本理念,1.3.2 网页的布局 网页的布局，即安排网页中各个元素的位置，和摆放其他事物一样，要注意布局的平衡和整体感，达到重点突出、方便浏览、整齐有序、美观大方的效果。布局要尽量避免呆板和零乱，根据网页内容的需要，合理进行网页布局。,33,1.3 网页设计的基本理念,1.3.2 网页的布局 1. 网页布局类型 常用的网页布局类型有：对称型、偏置型、标题正文型、混合型等。 1）对称型。是一些大型网站所采用的

23、类型，即网页的最上面是网站的标题及横幅图片（动画），下面是网站的主要内容，左右分列两竖条内容（如一些指向其他页面的超链接），中间展示网站的主要内容或最新内容，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是使用最多的一种网页布局类型。如图1-8所示。,图1-8 对称型网页布局,34,35,1.3 网页设计的基本理念,1.3.2 网页的布局 2）偏置型。这种结构与对称型结构只是形式上的区别，其实很相近，上面是标题及横幅图片（动画），左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的基本信息。 如图1-9所示。,图1-9偏置型网页布局,36,37,1.3 网页

24、设计的基本理念,1.3.2 网页的布局 3）标题正文型。网页最上面是网页的标题，下面是正文，比如一些文章页面或注册页面等就是这种类型。如图1-10所示。,图1-10标题正文型网页布局,38,1.3 网页设计的基本理念,1.3.2 网页的布局 4）混合型 具有混合型风格的网页往往兼具以上几种网页风格的特点。此外，用户也可以根据需要自己设计适合自己的网页布局，以达到显示或发布信息的目的。,39,1.3 网页设计的基本理念,1.3.2 网页的布局 2. 网页布局的平衡 网页设计是一门艺术。当用户浏览布局平衡的网页时，会感觉网页是一个整体，看起来也比较舒服，否则构成页面的元素会显得零散。 常用的方法有

25、对称平衡和辐射平衡。1）对称平衡。对称是最常见、最自然的平衡手段，这种方式通常用来设计比较正式的页面。如果在页面正中间划一条垂直向下的直线，会发现页面的两边的布局是基本对称的。非对称其实并不是真正的“不对称”，而是一种层次更高的“对称”，如果把握不好页面就会显得乱，因此使用起来要慎重，更不可用的过多。 2）辐射平衡。这也是一种常见的平衡手段，页面中的元素以某一个点为中心展开就可以构成辐射平衡。如有的页面的正中是一个大大的logo，外侧环绕着多个链接。,40,1.4 网站开发工具,1.4.1 网页编辑工具 网页最初是通过编写HTML代码来实现的，HTML语言可以在文本编辑软件中编写，如记事本、写

26、字板、Word、EditPlus等。由于HTML代码繁琐，难以掌握和调试，不适合业余网页制作人员使用，因此人们发明了网页编辑器，即现在使用的网页制作工具，常用的有Microsoft FrontPage、Macromedia Dreamweaver等。,41,1.4 网站开发工具,1.4.1 网页编辑工具 1. FrontPage FrontPage 是由Microsoft公司推出的新一代网页制作工具，它通过直观的网页制作和管理方法使我们能够更加方便快捷地创建和发布网页，简化了大量的工作。FrontPage 除了适用于非专业的网页制作人员外，对于专业网页制作人员来说，可以减少其编写HTML代码的

27、工作量，提高制作网页的速度；而对于网站管理者来说，则便于处理那些导入、导出、删除、更名和进行故障诊断以找出失效链接等操作。另外，FrontPage与Office家族的其他成员界面相似，操作简单，为使用者带来极大的方便，十分适合初学网页设计的人员使用。可以说，FrontPage可以满足多数用户制作网页的需要。,42,1.4 网站开发工具,1.4.1 网页编辑工具 2. Dreamweaver Dreamweaver是Macromedia公司推出的网页编辑软件，与Fireworks、Flash一起，被人们喻为“网页制作三剑客”。Dreamweaver是建立Web站点和应用程序的专业工具，它采用多种

28、先进的技术，易学、易用。只要掌握初步知识，再加上自己的创意，便可高效地创作出独具特色的网页。,43,1.4 网站开发工具,1.4.2 图像、动画制作工具 1. PhotoShop PhotoShop是由Adobe公司出品的著名的图形图像处理软件，非常适合进行Web图像处理和设计，也是广告、出版等平面美术设计的首选软件，它功能完善、性能稳定、使用方便。PhotoShop具有以下特点：可以灵活调整图像的色彩层次，对图形进行变换；有近百种滤镜，能充分展现设计者的设计风格；具有“动作”（Actions)，可对图像处理操作进行有效控制；具有图像传送功能；历史选项记录下最近改变图像的每一个操作，可以跳到最

29、近操作的任一状态，继续编辑等。 目前，PhotoShop的常用版本为PhotoShop 7.0，PhotoShop CS2等。,44,1.4 网站开发工具,1.4.1 网页编辑工具 网页最初是通过编写HTML代码来实现的，HTML语言可以在文本编辑软件中编写，如记事本、写字板、Word、EditPlus等。由于HTML代码繁琐，难以掌握和调试，不适合业余网页制作人员使用，因此人们发明了网页编辑器，即现在使用的网页制作工具，常用的有Microsoft FrontPage、Macromedia Dreamweaver等。,45,1.4 网站开发工具,1.4.2 图像、动画制作工具 1. Photo

30、Shop PhotoShop是由Adobe公司出品的著名的图形图像处理软件，非常适合进行Web图像处理和设计，也是广告、出版等平面美术设计的首选软件，它功能完善、性能稳定、使用方便。PhotoShop具有以下特点：可以灵活调整图像的色彩层次，对图形进行变换；有近百种滤镜，能充分展现设计者的设计风格；具有“动作”（Actions)，可对图像处理操作进行有效控制；具有图像传送功能；历史选项记录下最近改变图像的每一个操作，可以跳到最近操作的任一状态，继续编辑等。 目前，PhotoShop的常用版本为PhotoShop 7.0，PhotoShop CS2等。,46,1.4 网站开发工具,1.4.2 图

31、像、动画制作工具 2. Fireworks Fireworks是由Macromedia公司开发的图形处理工具，是第一套专门为制作网页图形而设计的软件，它能够自由导入多种格式的图像并对其进行处理，可以辨认矢量文件中的绝大部分标记和PhotoShop文件中的图层；还能够自动切割图像，设计者可以把绘制的图像放到导出预览界面中，通过更改导出设置来优化图像格式，使之更适合在网页中使用，也可以使用动画生成工具来制作动态图像及其链接。Fireworks的程序不大，却可以用较少的步骤生成小而质量较高的图像用于网页之中。,47,1.4 网站开发工具,1.4.2 图像、动画制作工具 3. Flash Flash是

32、由Macromedia公司开发的矢量图形编辑和动画创作的专业软件，是一种交互式动画设计工具，用它可以将音乐和图像融合在一起制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作领域，功能强大，广泛应用于网页动画制作、游戏、MTV等。它建立了Web交互式矢量图形和动画的工业标准，采用了网络流式媒体技术，突破了网络带宽限制，可以在网上迅速传输，同时由于矢量图形不会因为缩放而导致图像失真而在Web上得到广泛应用。,48,1.4 网站开发工具,1.4.3 网站数据库开发工具 数据库管理系统是网站建设重要的组成部分。常用的网站数据库管理系统有Microsoft Access、SQL Server等

33、，前者一般用于中小型网站开发，后者用于较大的网站开发。Microsoft Access是Microsoft公司开发的Microsoft Office套件中的一个组件，具有操作简单，易学易用的特点，但对于较大的网站开发，常用的数据库管理系统是SQL Server。现在常用的版本SQL Server 2000是一个能够同时支持数千个用户的企业级服务器关系数据库管理系统，每天处理上百种事务，可管理超过200 GB的数据库。SQL Server 2000有许多重要的新特性，主要包括以下内容： 1改善了可伸缩性，以及与Windows NT服务器的兼容； 2对于大型的I/O有更好的性能； 3稳定的记录位置

34、允许更多的索引； 4查询能够被更多的索引速度判断所支持； 5简化的数据结构提供更好的质量； 6更好的可扩展性，使今后的版本能够更完善地发展。,49,1.4 网站开发工具,1.4.4 网站开发脚本工具 为了使网页具有良好的交互性（浏览者可以浏览信息，也可以向网站提供信息），网站开发离不开脚本工具。常用的脚本工具有JavaScript和VBScript。 1. JavaScript JavaScript语言的前身是LiveScript。自从Sun公司推出了Java语言后，Netscape公司引进了Java程序概念，将LiveScript重新设计，改名为JavaScript。 JavaScript是

35、一种基于对象和事件驱动并具有安全性能的脚本语言，主要用于网页特效制作，可以嵌入HTML语言中，当浏览器检索到时，对其进行解释执行，实现交互、动态的网页功能。它有网页代码容量小，语法简单，跨平台执行能力强等特点，是首选的脚本语言工具。 2. VBScript VBScript是MicroSoft公司开发的Visual Basic程序设计语言的子集，其语法与VB基本相同。微软的IE浏览器对VBScript和JavaScript均支持，VBScript脚本语言，也是ASP的默认语言，本书采用的脚本就是VBScript。,50,1.4 网站开发工具,1.4.5 网站的发布工具 网页制作完成后，要将网页

36、存放到网站上，以供Internet用户访问、浏览。对于本地站点，可以直接将网页存放到相应站点目录下；对于远程站点，可以通过网页制作工具上传到服务器，如FrontPage 具有的发布站点功能和Dreamweaver具有的站点管理器，都可以将站点文件上传，也可以通过FTP工具将网站文件上传到相应网站。FTP工具有很多，常用的有leapFtp、CuteFtp等。其中CuteFtp功能完善，性能稳定，支持断点续传，如果一次上传不完，可以停下来，下次打开该程序，它会自动续传。,51,1.5 网站的设计开发,网站设计涉及的知识面很广泛，要建设一个好的网站，不仅需要有网站开发技术知识，还需要网站设计人员了解

37、平面设计、信息传播、心理学等方面的知识。这些方面在网站设计中要全面综合考虑，所以一个好的网站往往需要有多方面知识的人员配合完成。一个好的网站要以先进的网页制作技术与平面设计艺术结合作为展示手段，以合理的结构层次和准确的链接关系为依托，将充实、明确、有价值的内容展现在浏览者的面前。 在网页设计之前，要对网站进行需求分析，分析网站的建设目的，确定网站的类型与规模，明确网站的功能，从而确定网站的内容，对网站内容进行分类，确定网站的信息结构，设计网站的各个模块，进而确定网页设计，达到网站建设的目标。,52,1.5 网站的设计开发,1.5.1 网站开发基本流程 1.网站整体规划 在网站开发之前，首先要根

38、据用户或者网站建站者的需求，确定要开发的网站的主题或类型（如个人网站、企业网站、官方网站、娱乐网站等）并进行整体规划；进行网站的整体规划也就是组织网站的内容和设计其结构。组织网站的内容可以从两个角度来考虑。从设计者的角度来考虑，可以依据被描述对象的组织机构、类别划分等来组织内容；从浏览者的角度来考虑，就应该将各种素材依据浏览者的需要进行内容分类，以便浏览者可以快捷地获取所需要的信息及其相关内容。,53,1.5 网站的设计开发,2.需求分析和详细设计 根据要开发网站的主题或类型，确定网站的主体内容，对内容进行分类，规划出网站的整体结构，并书写需求分析报告。需求分析报告主要包括：功能需求、性能需求

39、、系统开发运行环境、功能模块，规划页面设计和布局、确定静态网站还是动态网站、确定采用的开发网页的工具（FrontPage、Dreamweaver等）及采用的编程语言（ASP、JSP、ASP.net等），确定采用的数据库管理系统(ACCESS、SQL Server 2000等)等。做好需求分析是进行网站设计的第一步。在做好需求的基础上，进行详细设计，书写详细设计说明书，这是进行网站开发的依据。,54,1.5 网站的设计开发,3. 网站开发的实施过程 1）资料的收集和整理 根据详细设计中的要求，进行网站开发所需资料的收集和整理。资料包括网页中的文本、背景图片、前景图片、动画、按钮、视频等。可以先将

40、文本资料编辑成Word文档，在设计相关的网页时插入。图片、动画、按钮、视频可以在网络上收集，但要注意版权问题。可以对引用的网上资料进行声明或对其进行处理以适合自己的网页。也可以自己制作，如绘制图片、拍摄照片、制作动画和按钮等。 2）制作主页及其他页面 主页是浏览者看到的第一个页面，其设计的好坏对浏览者是否继续浏览本网站具有重要的作用。主页设计主要包括两个方面：一是内容安排是否合理，二是页面设计是否美观大方。 根据网站的整体规划和详细设计中确定的各个网页的内容及网页布局，综合网页技术、网页视觉、图片处理和界面设计来完成其他页面的设计。设计时也要注意内容安排和界面美观，还应该注意页面的设计要与主页

41、的风格保持统一，并确定各页面之间的连接关系。,55,1.5 网站的设计开发,4. 网站的测试 在制作好网页后，不能立即就发布站点，还需对站点进行测试。站点测试可根据浏览器种类、客户端要求以及网站大小等要求进行测试，通常是在本地站点或将站点移到一个模拟调试服务器上对其进行测试或编辑。测试是在网站发布之前，对网站的需求分析、设计模块和编码的最终复审，是保证网站质量的关键步骤。,56,1.5 网站的设计开发,5. 将网站发布到Web服务器 在设计完网站的内容且测试无误后，就可以将网站发送到Web服务器。发布站点之前需在Internet的相应服务器上申请一个主页空间，以指定网站或主页在Internet

42、上的位置；如果制作的是本单位局域网的网页，只需要在服务器上划出一块空间存放网站的文件，并指定网站或主页在局域网上的位置。 网页发布通常使用FTP（远程文件传输）软件上传网页到服务器中申请的网址目录下，这样速度较快，也可使用Dreamweaver或FrontPage中的发布站点命令进行上传。,57,1.5 网站的设计开发,6. 网站的更新与维护 在初步规划网站时，就应该考虑日后的扩展问题。在网站的使用期间，可能又会出现各种各样的问题，这就需要网站维护人员进行长期的更新和维护工作，以保证网站的正常运行。,58,1.5 网站的设计开发,1.5.2 网站和网页设计的基本原则 网站和网页的设计既是一项复

43、杂的技术也是一门艺术。设计良好的网站不但提供丰富的信息，而且给用户带来愉悦的浏览体验。以下是网站和网页设计的一些基本原则。 1.目标明确，重点突出 首先要明确信息发布者的性质与用途，并了解主要浏览对象以及其进行的操作，做到有的放矢。然后，对发布的信息要分清主次，面面俱到可能使浏览者难以找到有用的信息，不能达到预期的目的。 2.主题鲜明，层次清晰 要做到主题鲜明，首先要设计好网站的主页。主页的设计要简洁，内容不宜过多，应该在主页上建立分类栏目。网页需要有层次清晰的结构，尤其是内容较多的网页，可以根据内容进行归类，分成多个栏目，便于阅读。,59,1.5 网站的设计开发,1.5.2 网站和网页设计的

44、基本原则 3.合理设置栏目 制作网页前，要先规划好，确定合理的栏目和板块。栏目的安排要紧扣主题，既要考虑网页内容的分类，又要方便浏览，并能对浏览者起到较好的导航作用。 4.正确定位整体风格 网站的整体风格是指站点的整体形象给浏览者的综合感受。整体风格是非常抽象的概念，包括网站的标志、色彩、字体、标语、版面布局、内容价值等诸多因素，需要结合整个站点进行定位。对于栏目内容跨度较大的网站，可以考虑针对不同栏目采用不同的风格。 5.页面布局合理 网页设计要针对所要表达的信息进行合理的布局，好的页面布局能使浏览者首先对网页内容的结构有一个清晰的认识。可以使用表格辅助页面元素的布局，也可以使用特定的布局框

45、架。页面布局要注意保证重点内容放置在屏幕中间的重点位置。,60,1.5 网站的设计开发,1.5.2 网站和网页设计的基本原则 6.色彩搭配，和谐统一 色彩是影响整体风格的关键因素。不同的色彩搭配产生不同的效果，并可能影响到浏览者的情绪。一般来说，一个网站的标准色彩以不超过三、四种为宜，以使页面色彩丰富而又协调统一。 7.多媒体功能使用得当 除了文字信息外，网站中图片、声音、动画以及视频等多媒体信息的使用是网页上最重要的内容。它们的使用可以丰富画面，使页面更加形象生动。但这些文件都不应该太大，以减少网页的下载时间，提高用户浏览信息的速度。,61,总结,网页、网站、网页（WWW)的工作原理 认识网页的基本组成元素：logo、导航栏、日期、图片、动画、视频、按钮、文字、声音、表格、表单、超级链接、导航栏、版权信息等 认识网页的布局 了解制作网页的常用软件 掌握网站开发的流程和设计的基本原则,62,网页中的常用术语,万维网（www） 浏览器 统一资源定位符（URL） 文件传输协议（FTP） IP地址 域名 超级链接 超级文本标记语言（HTML）,63,本章结束,