第一部分：基础知识

网页设计第一部分：基础知识初识网页

网页一般又称为HTML（HyperTextMarkupLanguage）文件，英文名称为WebPage，是一种可以在WWW上传输，能被浏览器认识并翻译成页面，进而显示出来的文件。通常看到的网页，大都是以.htm或.html后缀结尾的文件。除此之外，网页文件还有以.cgi、.asp、.php、和.jsp等后缀结尾。根据生成的方式，网页大致可分为静态网页和动态网页两种。1．静态网页静态网页是网站建设初期经常采用的一种形式。网站建设者把内容设计成静态网页，访问者只能被动地浏览网站建设者提供的网页内容。其特点如下：网页内容不会发生变化，除非网页设计者修改了网页内容。不能实现和浏览网页的用户之间的交互，信息流向是单向的，即从服务器到浏览器。服务器不能根据用户的选择调整返回给用户的内容，静态网页的浏览过程如下图所示。浏览器Web服务器HTTP请求HTTP应答图1静态网页浏览2．动态网页所谓动态网页是指网页文件里包含了程序代码,通过后台数据库与Web服务器进行信息交互,由后台数据库提供实时数据更新和数据查询服务。这种网页的后缀名称一般根据不同的程序设计语言而有所不同，如ASP文件的后缀为.asp，JSP文件的后缀为.jsp。动态网页能够根据不同时间和不同访问者而显示不同内容。如常见的BBS、留言板和聊天室通常用动态网页实现。动态网页的制作比较复杂，需要用到ASP、PHP、JSP和ASP.NET等专门的动态网页实现技术。动态网页的浏览过程如下图所示。浏览器HTTP请求HTTP应答图2动态网页浏览数据库程序Web服务器

以电影网站的播放页面为例，一个电影网站上千部电影，而且每一部电影的集数不只一集，如果一部电影一个播放页面，制作及维护就会非常麻烦，而且服务器的空间放这些页面也是个问题。因此这类网站均为动态网站形式，当用户选择某个电影或某一集时，相当于提出了请求，动态程序判断用户请求后根据请求内容从数据库中获得所需内容反馈给用户，页面可始终公用一个，哪一天看着页面不合适，修改这么一个就可以了，不用修改每个单独的静态页面。由此可见动态网页占用的服务器空间少，容易更新维护，对管理员来说非常方便。

动态网站举例：/

3.动态网页和静态网页

网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。如果网页上只包含有GIF动态图片或Flash动画或JS的动态效果，而不具备与后台数据库交互功能的网页并不是动态网页，还属于静态网页。静态网页是动态网页的基础，学习网页设计的前提是首先掌握静态网页制作，然后再进行动态网页技术的学习。

3.网页的基本构成不同性质的网页，构成的基本元素是不同的。一般地，网页的构成包括网页标题、网页标志、网页Banner、导航栏、主内容区、页脚版权信息等，如下图所示。网页标题网页的标志网页的Banner网页导航主内容区版权信息网页标题网站中的每一个页面都有标题，用来提示该页面的主要内容。标题在浏览器标题栏中，它的作用是引导访问者清楚地知道所要浏览的网站内容，不至于迷失方向。网页导航栏导航栏是网页设计中的重要部分，又是整个网站设计中较独立的部分。一般来说，网站中的导航栏在各个页面中出现的位置比较固定，而且风格较为一致。

导航栏的位置一般有4种：页面的左侧、右侧、顶部和底部。有时候在同一个页面中运用了多种导航栏，比如在顶部设置了主菜单，而在页面左侧设置了折叠式的折叠菜单，同时又在页面底部设置了多种链接，这样便增强了网站的可访问性。当然并不是导航栏在页面中出现的次数越多越好，而是要合理地运用，使页面总体协调一致。网页的标志网页的标志是一个站点的象征，也是一个站点是否正规的标志之一。一个好的标志可以很好地树立公司的形象。网页标志一般放在网站的左上角。通常有3种尺寸：88×31（像素）、120×60（像素）和120×90（像素）。网页的BannerBanner是横幅广告，是互联网广告中最基本的广告形式。Banner可以位于网页的顶部、中部或底部的任意一处，一般横向贯穿整个或者大半个页面。常见的尺寸是480×60（像素）或233×30（像素），Banner可使用静态图像文件也可以使用动画图像，除普通的GIF动画格式外，Flash能赋予Banner更强的表现力和交互内容。主内容区网页的主内容区是网页的主要内容显示区域。页脚版权信息页脚是防置网站版权信息的地方，可以放置一些联系方式或其他的导航栏目。认识网站网站也称为站点，英文名称为WebSite，是指具有独立域名、独立存放空间的集合，这些内容可能是网页，也可能是程序或其它文件。通俗地说网站就是在互联网上一块固定的面向全世界发布消息的地方。放置到指定的网站空间中（服务器或虚拟主机），通过域名（也就是网站地址）进行访问。衡量一个网站的性能，通常从网站空间大小、网站连接速度、服务器主机配置、主机性能等几个方面考虑。网站的分类网站按内容进行分类可分为门户网站、垂直网站、地方网站；而其中垂直网站又可分为新闻网站、娱乐网站、体育网站、科技网站、游戏网站、生活服务网站和教育职业网站等。网站按服务进行分类，可分为内容提供、搜索引擎、即时通信、电子商务、在线娱乐等。网站按使用群体的不同进行分类。可分为门户网站、导航网站、电子商务网站、企业网站、政府部门网站和个人网站等。网页制作中的专业术语网站服务器（Web服务器）：也称为WWW服务器，是专门提供网上信息浏览服务的高性能计算机。上网所浏览的网页必须存放在网站服务器中才能供人们访问浏览。Browser（浏览器）：浏览器（Browser）就是指在电脑上安装的，用来显示指定文件的程序。常用的浏览器有IE6.0，IE7.0，IE8.0，Firefox,Opera等。HTTP协议：HTTP是HyperTextTransferProtocol的缩写，也就是超文本传输协议，专门用于从WWW服务器传输超文本标记语言（HTML--HyperTextMarkupLanguage）写的文件，也就是我们通常说的网页，通过这个协议，我们可以浏览网络上的各种信息，在浏览器上看到丰富多彩的文字与图片。这就是网页地址都是以“http：//”开头的原因。IP地址：Internet上有无数台计算机要通过网络相互连通，为了能够准确地访问每台电脑，就必须指定一个唯一的识别标记。主机在Internet上的唯一标志称为IP地址（Internet

Protocol

Address）。它是一串4组由圆点分割的数字组成的，其中每一组数字都在0－256之间，如：0－255．0－255．0－255．0－255．0－255；如，202．202．96．33就是一个主机服务器的IP地址。域名：IP地址是数字化的，比较难记，所以人们提出了一种新方法来代替这种，即“域名”地址。域名由几个英文单词组成，如具有一定的意义，其中cn代表中国，com代表商业网，sina代表新浪，www代表万维网（WorldWideWeb）,整个域名合起来就代表新浪站点。域名地址和IP地址实际上是一回事，只是形式上不同而已。在访问一个站点的时候，可以输入该站点IP地址也可以输入域名地址。这里就存在一个域名地址和对应的IP地址相互转换的问题，这些信息实际上是存放在域名服务器中，当输入一个域名地址时，域名服务器就会搜索其对应的IP地址，然后访问到该地址所表示的站点。URL(UniformResourceLocator--统一资源定位器)：是专为标识Internet网上资源位置而设的一种编址方式，我们平时所说的网页地址指的即是URL，它一般由三部分组成（传输协议：//主机IP地址或域名/地址资源所在路径和文件名）,如洪恩在线-电脑乐园的URL为：/pc/index.htm其中http超文本传输协议(HyperTextTransferProtocol)

是web服务器域名地址pc是网页所在路径index.html是相应的网页文件。FTP:文件传输协议，是FileProtocol的缩写，用FTP协议登录到FTP服务器。可以显示该服务器上的文件及目录清单，并且能够向FTP服务器上传或下载文件。FTP支持多种文件类型和文件格式的传输，包括ASCII和二进制文件。Banner（横幅广告）：横幅广告是互联网广告中最基本的广告形式。它是一个表现商家广告内容的图片，放置在广告商的页面上，尺寸是480×60像素，或233×30像素；一般是Gif格式的图像文件，可以使用静态图形，也可用多帧图像拼接为动画图像；除普通Gif格式外，新兴的RichMediaBanner（富媒体广告）能赋予Banner更强的表现力和交互内容，但一般需要用户使用的浏览器插件支持（Plug-in）。Banner一般翻译为网幅广告、旗帜广告、横幅广告等。Click（点击次数）：用户通过点击广告而访问广告主的网页，称点击一次。点击次数是评估广告效果的指标之一。Cookie：Cookie电脑中记录用户在网络中行为的文件。网站可通过Cookie来识别用户是否曾经访问过该网站。当浏览某些Web站点时，这些站点会在用户的硬盘上用很小的文本文件存储一些信息，这些文件就称为Cookie。Cookie中包含的信息与浏览者的爱好有关Database（数据库）：Database通常指的是利用现代计算机技术，将各类信息有序地分类整理，便于查找和管理。在网络营销中，指利用互联网收集用户个人信息，并存档、管理，例如姓名、性别、年龄、地址、电话、兴趣爱好、消费行为等。KeyWord（关键字）：KeyWord是用户在搜索引擎中提交的文字，以便快速查询所需内容。常用网页制作软件网页过程中常用制作软件包括网页编辑软件，图像处理软件、动画处理软件。网页编辑软件MicrosoftFrontPage：由微软公司推出,目前用到的版本有FrontPage2003、FrontPage2007、FrontPage2010等。它的特点是简单易用，容易上手，而且与IE、Word等软件结合的很好。缺点是兼容性差，对于复杂的动态网页设计能力有限。Dreamweaver：由Macromedia公司推出，比较经典的版本有ＤreamWeaverMX2004、ＤreamWeaver8等。被Adobe公司收购后推出ＤreamWeaverCS3、CS4、CS5三个版本。它的特点是操作方便，代码简洁，面板设计丰富多样、对动态网页编程与设计给予了很好的支持，以及与Fireworks，Flash，Photoshop等软件能紧密的结合。UltraEdit-32：代码编辑工具，主要编辑ASP等动态网页。图像处理软件做网页需要有一定的平面设计基础。如果设计者只会写程序，没有一定的界面设计功底，即便你的程序编写得再好，没有美观的界面为依托，还是没有人愿意来看你的网页，就像一件衣服一样，衣料再好，样子不好看也不会有人去买。在制作网页过程中常用的图像处理软件有：Photoshop，网页设计者必须精通的一个图形处理工具。Imageready，在用Photoshop将界面设计完成后，切换到Imageready中进行界面分割处理，快速完成由图到网页的过渡。不过凡事有利弊，要学会灵活运用。ACDSee，目前最流行的数字图像处理软件，它能广泛应用于图片的获取、管理、浏览、优化，甚至和他人进行分享。Fireworks，制作网页的高级辅助工具，可以进行动画制作，图像优化，热点、切片和轮替按钮，文件导入和导出，无须学习代码即可创建具有专业品质的网页图形和动画，例如变换图像和弹出菜单等。动画制作软件网页的动画一般分为两种，即GIF动画和Flash动画。这两种动画都可以通过Flash软件来完成，而GIF动画有很多种工具可以实现，Flash的文字动画也有专门的工具，这些工具对于想做出好的动画，又不能熟练使用Flash的制作者提供了极大的方便。Flash：Flash是交互式矢量图和Web动画的标准，网页设计者使用Flash能创建漂亮的、可改变尺寸的动画，可以创建极其紧密的导航界面、技术说明以及其他奇特的效果。Swish：在此工具中做好文字动画后可以导出为.swf格式的文件，再导入到Flash中进行进一步的处理，让Flash更生动，更炫目多彩。UleadGIFAnimator：友立公司出版的动画GIF制作软件，内建的Plugin有许多现成的特效可以立即套用，可将AVI文件转换成动画GIF文件，而且还能将动画GIF图片最佳化，能将放在网页上的GIF动画减肥，以便让人能够更快速地浏览网页。硕思闪客精灵：支持将SWF文件导出成FLA文件，帮助丢失FLA文件的影片作者重新获得FLA文件，从而可以再编辑。硕思闪客之锤：是一款具有专业水准的动画制作工具。它支持图形设计、运动动画、引导线、遮罩效果、流声音和事件声音、帧标记、设置电影剪辑、按钮等符号。文字动画特效制作SwishZone：特效中有许多细节结合使用能得到非常炫的效果，直接预览，能直接导出为SWF文档格式。GIF动画制作GIFMovieGear3.0：GIF动画制作软件，几乎有需要制作GIF动画的编辑功能它都有，无须再用其他的图形软件辅助。网站设计的学习内容从网站设计需要掌握和运用的知识分析，可分为内容组织、美工设计、页面编辑、网站编程4个方面内容。内容组织：确定网站的内容和功能，制定网站的目标和组织网站的信息资源，绘制网站内容组织框架结构图，根本目的是通过构建网页之间的有机信息联系，帮助用户找到信息，即进行信息构建（IA）。美工设计：根据网站布局框架图，进行页面风格和美观设计。常用软件有Photoshop、Fireworks、Flash等。页面编辑：根据美工设计图进行页面代码化编辑，常用软件有Dreamweaver、FrontPage，常用技术有HTML、XHTML、CSS等。网站编程：进行脚本编写和功能模块实现，即实现网站所需功能及网站内容的便捷式管理和更新。常用技术有asp、php、jsp、、c#、Ajax、java、Delphi、Perl等动态网站编程技术。信息构建（IA）

对于美工设计和网站编程我们在后面的课程中都会有涉及，在这里对于信息构建（IA）做以简要介绍。

1975年美国的建筑师沃尔曼(RichardSaulWurman)创造性地提出了InformationArchitecture一词，并在1976年召开的美国建筑师协会全国会议上将它公布于世。他强调要把复杂的信息以一种易于理解的方式描述出来，满足人们的信息需求。从事IA设计的人员被称为信息建筑师(InformationArchitect)，沃尔曼明确指出信息建筑师的工作任务：(1)组织数据中的固有模式、化复杂为明晰；(2)创建信息结构或地图，令他人找到通向知识的个人路径。在具体实践中信息建筑师们会履行下列职责：(1)收集和定义信息用户的需求内容，用户需求功能的要求并且帮助定义信息产品的视觉外观；(2)在可理解层次去组织信息，通常会利用网站地图、内容地图或信息模型。这包括发展受控词汇和辞典；(3)在屏幕层次决定内容位置与交互。要在最终设计之前添加原型导航、内容关系与用户交互。通常最后要形成一份书面的技术说明书；(4)进行用户研究（访问、观察、统计研究、市场分割研究等等）和可用性测试（启发式评估、用途分析、用户测试等等）。IA并没有自身的传统、标准与文化，它是从一系列背景领域中诞生的。这些领域包括计算机科学、图书馆学、信息学、知识管理、图形设计、交互设计、信息设计、可用性研究、认知科学、图形设计、品牌策略、社会科学等等。这些都是IA的基础学科，IA不断从这些学科中吸取知识构筑自身的理论与实践体系。网站建设流程在网站建设时，需要进行网站定位、申请网站域名、申请服务器空间、确定网站主题、网站制作、网站发布与上传、后期更新与维护、网站推广几个步骤。第一步：网站定位网站定位就是确定网站的形式，明确网站的主要功能与特点，常用的网站主要分以下几类：综合门户网站主要特点是功能强大、内容丰富、信息齐全，网站有着强大的功能与美观的页面。这类网站开发是一个庞大的项目，需要专业的开发团队来完成。在网站开发的学习与工作中，可以学习这类网站的网页风格和功能模块。这类网站的代表有新浪、搜狐、网易。第一步：网站定位新闻资讯网站是一种可以发布大量的新闻与图片内容的网站。用户可以方便的查看这些新闻资讯的内容，这类网站主要开发内容是网站的美术设计与网站内容的管理功能。这类网站的代表有人民网、新华网、央视国际网站。第一步：网站定位公司宣传网站此类网站是开发工作中最常见的网站类型。企业借助网站推广企业形象、树立企业品牌、发布企业产品。企业网站的设计重点是精美的网页和企业产品的发布管理功能。这类网站有：金山软件、中企动力等。第一步：网站定位娱乐网站娱乐网站是一种很常用的网站形式，此类网站的设计非常灵活，可以使用各种个性化的色彩和布局，此类网站代表有：新浪娱乐、激动网、E视网等。电子商务网站此类网站常包括产品、广告、购物、市场推广等。设计重点是网站的产品管理功能和用户的交互功能。代表有：易趣、淘宝、拍拍等。第一步：网站定位网址导航网站此类网站的内容是将常用的网站链接整理到一个网站上，方便用户使用。这类网站的开发重点是网站链接与分类管理。代表有：网址之家、网址大全、265上网导航。第一步：网站定位下载网站下载网站可以方便地为用户提供各种资料下载，此类网站的开发重点是资料的管理与分类，著名的下载网站有霏凡软件、天空软件、百度MP3下载等。搜索引擎网站是为用户提供内容搜索功能的网站，主要内容是实现网站的搜索与内容管理功能，这类网站的代表有百度、谷歌、雅虎等。第一步：网站定位个人网站个人网站也叫个人主页，是网络中个人宣传类的网站，其形式非常灵活，可以包含不同的内容，个人网站的内容没有特别规则，可以根据个人喜好，进行各种发挥。第二步：申请网站域名域名是由国际域名管理组织和国内的相关机构统一管理的，很多域名服务商可以代理域名的注册业务，较著名的域名服务商有：中资源（）、西部数码（）、中国万网（）、新网（）、中国数据()、武汉数据（）第三步：申请服务器空间访问网站的过程实际就是用户计算机和服务商进行数据链接和数据传递的过程，这就要求网站必须存放在服务器上才能被访问，一般的网站，不是使用一个独立的服务器，而是在网络公司租用一个一定大小的存储空间来支持网站运行，这个租用的网站存储空间就是服务器空间。第三步：申请服务器空间不同的服务器空间的主要区别是支持网站的程序和支持的数据库不同，常用的服务器空间可能分别支持下面这些不同的网站程序：

ASP：使用Windows系统和IIS服务器。

PHP:使用Linux系统或Windows系统，使用Apache网站服务器。

.NET：使用Windows系统和IIS服务器。

JSP：使用Windows系统和Java的网站服务器第三步：申请服务器空间不同的服务器空间可能支持不同的数据库，常用的服务器空间支持数据库有以下几种：Access：常用于ASP网站SqlServer2000：常用于ASP网站或.NET网站。Mysql：常用于PHP或JSP网站Oracle：常用于JSP网站第四步：确定网站主题网站的主题是指一个网站在建设中需要完成的任务和要实现的设计思想。这是网站开发的一项重要工作，相关的设计思想需要在这个过程完成，设计思想需要书写设计文档。第五步：网站制作包括网页平面设计图设计，网页页面设计，网站功能模块实现等。这部分内容为这一学期里重点掌握的内容部分。第六步：网站发布与上传网站完成设计与调试后，需要上传到租用的服务器空间中才能被www上的用户访问。网站发布就是把自己计算机中的网站内容发布到网络上服务器空间的过程。上传一般选择FTP软件进行，常用的FTP软件有LeapFTP、CuteFTP、SmartFTP等。图4为CuteFTP上传的截图。图4CuteFTP连接建立图4CuteFTP的使用举例：http://www.3v.cm/用户名：qazwsx-123密码：789456123第七步：后期更新与维护网站完成设计和上传后，还要定期对网站的内容进行更新和维护，否则一成不变的内容很难吸引浏览者。网站在运行的过程中还可能出现一些错误和问题，因此也需要分析错误原因修正错误，解决问题。第八步：网站推广新网站在发布后并不会有很多人访问，要提高网站的知名度就需要对网站进行推广，网站推广分自由推广和付费推广两种。自由推广和相关的站点交换友情链接。在论坛、博客、留言板上发