第一部分基础知识.

网页设计第一部分：基础知识初识网页网页一般又称为HTML（HyperTextMarkupLanguage）文件，英文名称为WebPage，是一种可以在上传输，能被浏览器认识并翻译成页面，进而显示出来的文件。通常看到的网页，大都是以.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服务器以电影网站的播放页面为例，一个电影网站上千部电影，而且每一部电影的集数不只一集，如果一部电影一个播放页面，制作及维护就会非常麻烦，而且服务器的空间放这些页面也是个问题。因此这类网站均为动态网站形式，当用户选择某个电影或某一集时，相当于提出了请求，动态程序判断用户请求后根据请求内容从数据库中获得所需内容反馈给用户，页面可始终公用一个，哪一天看着页面不合适，修改这么一个就可以了，不用修改每个单独的静态页面。由此可见动态网页占用的服务器空间少，容易更新维护，对管理员来说非常方便。动态网站举例：://动态网页和静态网页网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。如果网页上只包含有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服务器）：也称为服务器，是专门提供网上信息浏览服务的高性能计算机。上网所浏览的网页必须存放在网站服务器中才能供人们访问浏览。Browser（浏览器）：浏览器（Browser）就是指在电脑上安装的，用来显示指定文件的程序。常用的浏览器有IE6.0，IE7.0，IE8.0，Firefox,Opera等。HTTP协议：HTTP是HyperTextTransferProtocol的缩写，也就是超文本传输协议，专门用于从服务器传输超文本标记语言（HTML--HyperTextMarkupLanguage）写的文件，也就是我们通常说的网页，通过这个协议，我们可以浏览网络上的各种信息，在浏览器上看到丰富多彩的文字与图片。这就是网页地址都是以“http：//”开头的原因。IP地址：Internet上有无数台计算机要通过网络相互连通，为了能够准确地访问每台电脑，就必须指定一个唯一的识别标记。主机在Internet上的唯一标志称为IP地址（InternetProtocolAddress）。它是一串4组由圆点分割的数字组成的，其中每一组数字都在0－256之间，如：0－255．0－255．0－255．0－255．0－255；如，202．202．96．33就是一个主机服务器的IP地址。域名：IP地址是数字化的，比较难记，所以人们提出了一种新方法来代替这种，即“域名”地址。域名由几个英文单词组成，如具有一定的意义，其中cn代表中国，com代表商业网，sina代表新浪，代表万维网（WorldWideWeb）,整个域名合起来就代表新浪站点。域名地址和IP地址实际上是一回事，只是形式上不同而已。在访问一个站点的时候，可以输入该站点IP地址也可以输入域名地址。这里就存在一个域名地址和对应的IP地址相互转换的问题，这些信息实际上是存放在域名服务器中，当输入一个域名地址时，域名服务器就会搜索其对应的IP地址，然后访问到该地址所表示的站点。URL(UniformResourceLocator--统一资源定位器)：是专为标识Internet网上资源位置而设的一种编址方式，我们平时所说的网页地址指的即是URL，它一般由三部分组成（传输协议：//主机IP地址或域名/地址资源所在路径和文件名）,如洪恩在线-电脑乐园的URL为：其中http超文本传输协议(HyperTextTransferProtocol)服务器域名地址pc是网页所在路径index.html是相应的网页文件。FTP:文件传输协议，是FileProtocol的缩写，用FTP协议登录到FTP服务器。可以显示该服务器上的文件及目录清单，并且能够向FTP服务器上传或下载文件。FTP支持多种文件类型和文件格式的传输，包括ASCII和二进制文件。常用网页制作软件网页过程中常用制作软件包括网页编辑软件，图像处理软件、动画处理软件。网页编辑软件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