第1章+网页设计概

CS第1章网页设计基础田兵软件工程系[e-mail]第1章网页设计概述学习目标：通过本章学习，掌握网页设计相关的基础知识和基本概念，熟悉网页的组成元素。了解网页设计可能用到的开发软件和常用技术，对网站的设计流程和网页制作原则有初步的了解和认识。WEBDESIGNSCst.hpu.edu.cn1.1网页中的基本概念互联网：简单地说，互联网是一个由各种不同类型和规模的、独立运行和管理的计算机网络组成的世界范围的巨大计算机网络——全球性计算机网络，它的英文名字叫internet。组成互联网的计算机网络包括小规模的局域网（LAN）、城市规模的区域网（MAN）以及大规模的广域网（WAN）等等。这些网络通过普通电话线、高速率专用线路、卫星、微波和光缆等线路把不同国家的大学、公司、科研部门以及军事和政府等组织的网络连接起来。WEBDESIGNSCst.hpu.edu.cn因特网：因特网(Internet)又称国际计算机互联网，是目前世界上影响最大的国际性计算机网络。•其准确的描述是：因特网是一个网络的网络(anetworkofnetwork)。它以TCP/IP网络协议将各种不同类型、不同规模、位于不同地理位置的物理网络联接成一个整体。•它也是一个国际性的通信网络集合体，融合了现代通信技术和现代计算机技术，集各个部门、领域的各种信息资源为一体,从而构成网上用户共享的信息资源网。它的出现是世界由工业化走向信息化的必然和象征。WEBDESIGNSCst.hpu.edu.cn万维网()万维网(WorldWideWeb，)是Internet提供的最重要的信息服务，由三部分组成：客户机、服务器和HTTP，它是促使Internet迅速发展和普及的重要技术。用户只要在页面上轻松点击链接，就可以转到相应的信息服务资源中去。多媒体的Web界面带来生动活泼的效果，简单和直观的操作手段给用户提供了很大的便利。是互联网的一部分。WEBDESIGNSCst.hpu.edu.cn1.1.2网页和网站网页是构成网站的基本元素，是承载各种网站应用的平台。网页，是网站中的任何一页面，通常是HTML（标准通用标记语言下的一个应用）格式（文件扩展名为html、或htm、或asp、或aspx、或php、或jsp等）。网页通常用图像档来提供图画，网页要使用网页浏览器来阅读。现在流行移动设备浏览网页。WEBDESIGNSCst.hpu.edu.cn网站通俗地讲，网站就是由网页组成的。网页可由文字、图像、动画、声音和程序等多种媒体信息链接组成，通过链接实现与其他网页或网站的关联和跳转。WEBDESIGNSCst.hpu.edu.cn静态网页与动态网页在网站设计中，纯粹HTML格式的网页通常被称为静态网页，静态网页每个网页都有一个固定的URL，且网页URL以.htm、.html、.shtml等常见形式为后缀。静态网页一经编写完成，其显示效果就确定了。在HTML格式的网页上，也可以出现各种动态的效果，但这些“动态效果”只是视觉上的，与动态网页是不同的概念。静态网站是指全部由HTML代码格式页面组成的网站，所有的内容包含在网页文件中。每个静态网页都有一个固定的网址，文件名均以htm、html、shtml等为后缀；静态网站是没有数据库的，也就是说网站发布之后上传到网上之后，您不可能在后台随时添加您想添加的产品新闻等。如果想添加新的东西您就需要找当时开发网站的人，当然您也可以自己修改，前提是您自己会修改。静态网站在网站制作和维护方面的工作量是比较大的，但是开发费用却相对要低。静态网页一经发布到服务器上，无论是否被访问，都是一个独立存在的文件。WEBDESIGNSCst.hpu.edu.cn动态网页：很多浏览者在浏览网页的时候都会看到页面上面有很多很炫很酷的动画、图片等，他们经常会问这样一个问题，动态网站是不是就是那些有动画的网站。其实这个想法是错误的，那些GIF或是FLASH都可以在动态或是静态网站上出现但会动并不代表是动态网站。动态网站可以实现交互功能，如用户注册、信息发布、产品展示、订单管理等等；动态网页并不是独立存在于服务器的网页文件，而是浏览器发出请求时才反馈网页；动态网页中包含有服务器端脚本，所以页面文件名常以asp、jsp、php等为后缀；动态网页由于需要数据库处理，所以动态网站的访问速度大大减慢；WEBDESIGNSCst.hpu.edu.cn首页，亦称主页或起始页是用户打开浏览器时默认打开的一个或多个网页。首页也可以指一个网站的入口网页，即打开网站后看到的第一个页面。大多数作为首页的文件名是index、default、main或portal加上扩展名。WEBDESIGNSCst.hpu.edu.cn3．浏览器中文名称：浏览器英文名称：browser定义：万维网(Web)服务的客户端浏览程序。可向万维网(Web)服务器发送各种请求，并对从服务器发来的超文本信息和各种多媒体数据格式进行解释、显示和播放。浏览器可以浏览web服务器上的HTML文件内容，并让用户可以交互的一种软件。网页浏览器主要通过HTTP协议与web服务器交互并获取网页。WEBDESIGNSCst.hpu.edu.cn4．URLURL(UniformResourceLocator，统一资源定位符)也被称为网页地址，是因特网上标准资源的地址，是用于完整地描述Internet上网页和其他资源的地址的一种标识方法。在Internet上所有资源都有一个独一无二的URL地址，这种地址可以是本地磁盘，也可以是局域网上的某一台计算机，更多的是Internet上的站点。简单地说，URL就是Web地址，俗称“网址”。例如。URL的格式：协议名：//主机名[：端口号]/[路径名/…/文件名]WEBDESIGNSCst.hpu.edu.cn5．Internet协议协议(Protocol)是关于信息格式及信息交换规则的描述。在信息技术中，协议就是—些特殊规则的集合，它被通信的接收方和发送方认可，接收到的信息和发送的信息均以这种规则加以解释。在网络的各层中存在着许多协议。接收方与发送方同层的协议必须一致，否则一方将无法识别另一方发出的信息，以这种规则规定双方完成信息在计算机之间的传送过程。WEBDESIGNSCst.hpu.edu.cn6．IP地址IP地址是网上的通信地址，是计算机、服务器和路由器的端口地址，每—个IP地址在全球都是惟一的，是远行TCP/IP的惟一标识。每台Internet上的计算机由一个独有的IP地址来惟一标识。目前Internet使用的是IPv4版本，IP地址是一个由32位的二进制数组成的号码，该号码分为4段，每段8位，每段取值范围为0~255。例如202.99.2.60。WEBDESIGNSCst.hpu.edu.cn7．HTTPInternet的基本协议是TCP/IP协议，然而在TCP/IP摸型最上层的是应用层(Applicationlayer)，它包含所有高层的协议。高层协议有文件传输协议FTP、电子邮件传输协议SMTP、域名系统服务DNS、网络新闻传输协议NNTP和HTTP协议等。WEBDESIGNSCst.hpu.edu.cn8．HTMLHTML是HypertextMarkupLanguage(超文本标记语言)的缩写，它是构成Web页面的主要工具，是用来表示网络上信息的符号标志语言。在万维网上，如果要向全球范围出版和发布信息，需要有一种能够被广泛理解的语言，即所有的计算机都能够理解的一种用于出版的“母语”。WEBDESIGNSCst.hpu.edu.cn1.2页面组成元素现在的网页已经不再是简单的文字和图像组合，而是添加了各种设计元素，这使网页变得更加丰富多彩。组成网页的最基本元素通常包括网站LOGO、BANNER、导航栏、文本和图像、动画、超级链接、表单和多媒体等。WEBDESIGNSCst.hpu.edu.cn1．LOGO网站LOGO，也叫网站标志。它是一个站点的象征，一般放在网站首页的左上角或显眼位置，访问者能明显地看到它。成功的网站标志有着独特的形象标识，在网站的推广和宣传中起到事半功倍的效果。如新浪用字母sina和大眼睛作为标志。WEBDESIGNSCst.hpu.edu.cn2．BANNERBANNER一般翻译为网幅广告、旗帜广告和横幅广告等。BANNER通常为一幅表现商家广告内容的图片，放置在广告商的页面上，是互联网广告中最基本的广告形式。横幅广告的标准尺寸是468*60像素，而弹出窗口广告一般为360*300像素。BANNER可以是使用GIF格式的图像文件，可以使用静态图形，也可用多帧图像拼接为动画图像。WEBDESIGNSCst.hpu.edu.cnBANNER的设计原则包括具有鲜明的色彩、语言具有号召力、文字的字体清晰和图形位置合适这4个方面。如图1.6所示为一个静态图形格式的BANNER。图1.6网站的BANNERWEBDESIGNSCst.hpu.edu.cn3．导航栏导航栏是用户在规划好站点结构、开始设计主页时必须考虑的一项内容。导航栏的作用就是让浏览者在浏览站点时，不会因为迷路而中止对站点的访问。事实上，导航栏就是一组超链接，这组超链接的目标就是本站点的主页以及其他重要页面。WEBDESIGNSCst.hpu.edu.cn4．文本和图像文本一直是人类最重要的信息载体和交流工具，网页中的信息也以文本为主。在网页中，虽然文字不像图像那样能够很快地引起浏览者的注意，但却能够准确地表达信息的内容和含义。网页设计与制作者还可以通过设置字体、字号、颜色、底纹和边框等属性来改变文本的视觉效果，通过不同格式的区别，突出显示重要的内容。WEBDESIGNSCst.hpu.edu.cn5．动画动画是构成网页的重要元素之一，目前，最常用的网页动画软件是Flash、ImageReady和GifAnimation等，使用较多的动画格式通常有GIF动画和SWF动画。动画能提供信息、展示作品、装饰网页、动态交互等，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果，甚至有的网站中的所有网页也全部都是用Flash完成。WEBDESIGNSCst.hpu.edu.cn6．超链接在网上用鼠标点击一段文字或一幅图片，就会有一个新的页面被打开，这就是超链接技术。超链接技术是流行起来的原因。链接源可以是带下划线的文本，也可以是图像或图像切片，甚至可以是一些不可见的程序代码。当链接源被鼠标单击激活后，其链接目的端将会显示在Web浏览器上，并根据目的端的类型不同选择以不同的方式打开。WEBDESIGNSCst.hpu.edu.cn7．表单表单通常用于填写申请或提交信息的交互页面，如电子邮箱、主页空间、QQ密码等申请页面以及论坛、留言簿等都是通过表单来实现交互的。通常表单的用途是：收集联系信息、接收用户要求、获得反馈意见、设置访问者签名、让浏览者输入关键字去搜索相关网页、让浏览者注册会员或以会员身份登录等。WEBDESIGNSCst.hpu.edu.cn8．声音和视频声音是多媒体网页的一个重要组成部分。从目前来看，网络上使用范围最广的音频格式主要有MP3、MIDI和WAV等。设计者在采用音频前需要考虑其用途、格式、文件大小、声音品质和浏览器兼容差别等因素。WEBDESIGNSCst.hpu.edu.cn1.3网站规划与网页设计我们所见到的网站，虽然在规模、内容和功能上各不相同，但网站设计制作的基本流程是相似的。从简单的个人网站到复杂的门户型网站，都遵循着一个基本的制作流程。同时，网站的定位、策划、创意和风格，网站的版面布局，网页的色彩应用及网页的艺术原则等都直接关系到网站的生存和效果评估。WEBDESIGNSCst.hpu.edu.cn1.3.1