1.网站规划与设计基础.ppt

第1章 网络规划与设计基础1.1 网页基础知识在动手制作网页之前，应该了解网络与Web的基础知识n网页：网页：是一种网络信息传输的载体，在网站中，供用户阅读的一个个页面，称之为“网页”，又称为Web页 nInternet：即国际计算机互联网，在中国也称“因特因特网网”，是由符合TCP/IP等网络协议的网络组成的互联网它是目前全世界最大的网络，包含着丰富多彩的信息，并提供方便快捷的服务n万维网万维网（World Wide Web）：万维网简称WWW，它也是建立在Internet上的一种网络服务它遵循HTTP协议 ，通过超文本和超媒体，将Internet上包括文本、声音、图形、图像、影视信号等各种类型的信息聚集在一起n浏览器浏览器：要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否则无法访问到网络中丰富的资源n目前常用的浏览器有目前常用的浏览器有:IE、、Firefox和Opera等n统一资源定位符统一资源定位符（URL）：是一种WWW上的寻址系统，用来使用统一的格式，来访问网络中分散各地的计算机上的资源n一个完整的URL地址，由通信协议、服务器名称、文件夹和文件名三部分组成。

n通信协议通信协议：它包括HTTP（超文本传输协议）、FTP（文件传输协议）、Gopher（Gopher协议）和News（新闻组）等 n超文本传输协议（HTTP）即超文本传输协议，是目前网络世界里应用最为广泛的一种网络传输协议，是为分布式超媒体信息系统设计的一个无状态、面向对象的协议n主机名主机名：指要访问服务器的Internet名称nIP地址：地址：IP地址是一组32位的数字号码，如“218.30.12.184”，这就是上网主机的地址 n域名：域名： IP地址是一长串的数字号码，这些数字难记又难以理解为了方便大家理解、记忆，便有了域名的概念n域名的范围要比主机名要大一个域名下可以有多个主机名，域名下还可以有子域名例如，域名www. good-下，有主机server1和server2，其主机全名就是server1.good-和server2.good-也就是常说的二级域名n域名前加上传输协议信息及主机类型信息就构成了网址（URL） nHTML：超文本标记语言(Hyper Text Markup Language) HTML严格来说并不是一种标准的编程语言，它只是一些能让浏览器能看懂的标记。

当网页中包含正常文本和HTML标记时，浏览器会“翻译”由这些HTML标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来n表单表单: 表单是用于填写申请或提交信息的交互页面如电子邮箱、主页空间、号码等的申请页面，以及论坛、聊天室、留言簿等n静态和动态网页：静态和动态网页：nHTML格式的网页通常被称为“静态网页静态网页”常见的静态网页以.htm、.html、.shtml等为后缀，每个网页都是一个独立的文件早期的网站一般都由“静态网页”构成的n在静态网页中，也会出现各种动态的效果，如.gif格式的动画、Flash、滚动字幕等，这些“动态效果”只是视觉上的，与动态网页并无直接联系n动态网页动态网页与静态网页是相对的，支持数据库，可以与用户进行交互常见的后缀不再是.htm、.html等静态网页的形式，而是.asp、.jsp、.php、.cgi等形式n动态网页可以是纯文字内容，也可以包含各种动画内容，这些只是网页具体内容的表现形式无论网页是否具有动态效果，采用动态网站技术生成的网页，都称为动态网页n区别的最简单方法就是在浏览器中打开，如果能正常显示，即为静态网页，否则就是动态网页。

n超级链接超级链接:这是网页制作中经常要用到的概念，指的是页面对象之间的连接关系 n导航条：导航条：导航条能十分有效地实现超级链接功能 n发布：发布：将制作好的网页上传到服务器的过程即是发布，也称为上传或上载 1.2 网站设计流程n网站建设是一项复杂的工程，因此，在建立一个网站之前，必须进行统筹的安排和规划 网站设计的基本流程为：n需求分析n整体规划n网站详细设计n申请域名和空间n发布站点 n网站的推广宣传 1.2.1 需求分析需求分析主要是客户对整个项目大的计划、时间要求和资金预算等1．项目立项接到客户的业务咨询，经过双方不断的接洽和了解，并经过基本的可行性讨论之后，初步达成制作协议，这时就需要将项目立项一般的做法就是成立一个专门的项目小组，小组成员包括项目经理、网页设计人员、程序员、测试员项目的实现主要是由项目经理来负责的2．客户需求说明书需求说明书一般包含一下几点：（1）正确性：每个功能必须清楚地描写交付的功能2）可行性：确保在当前的开发能力和系统环境下可以实现每个需求3）必要性：功能是否必须交付，是否可以推出实现，是否可以在经费不足是放弃4）简明性：不要使用专业的网络术语。

5）检测性：开发完毕，客户可以根据需求进行检测1.2.2 整体规划 （1）网站需要实现哪些功能；（2）网站开发使用什么软件，在什么样的硬件环境下进行；　 （3）需要多少人，多长时间；（4）需要遵循的规则和标准有哪些 同时需要写一份总体规划说明书，包括：　（1）网站的栏目和板块；　（2）网站的功能和相应的程序；　（3）网站的链接结构；　（4）如果有数据库，进行数据库的概念设计；　（5）网站的交互性和用户友好设计1.2.3 网站详细设计1．整体形象设计　在程序员进行详细设计的同时，网页美工开始设计网站的整体形象和首页整体形象设计包括标准字、Logo、标准色彩、广告语等首页设计包括版面、色彩、图像、动态效果、图标等风格设计，也包括banner、菜单、标题、版权等模块设计2．页面风格设计模块布局宗旨在于方便访问者浏览，所以首页上面设置一条导航栏，其下是主题动画，在主题动画下设置版内导航条大致页面布局力求风格统一、内容丰富如今的多媒体Web网页具有强大的交互功能，多种媒体方式如文字、图片、动画、声音等同时存在文字是一种简洁有效的媒体，输入方便，处理速度快，在网速较慢的情况下适合用文字进行大面积布局。

图片可以给人以较为直观的感受，以及更为感性的认识，其缺点是下载速度慢，在网速慢的情况下不宜大面积运用3．颜色调配设计网页制作中页面颜色的调配相当重要，由网页美工进行整个网站的美工设计各板块采用与网站首页同一色系的颜色，整个板块内部也尽量保持风格一致4．网站调试方案对于网站调试，尽量采用边制作边调试，即采用本机调试与和上传服务器调试的方法，因为网站在单机和服务器上运行有很大的区别，所以很有可能在上传服务器之后，出现在单机上不能浏览的一系列问题观察速度、兼容性、交互性等，发现问题及时解决并记录下来1.2.4 申请域名和空间1．申请域名的形式目前，申请域名有两种形式：一种是收费的，一种是免费的实际上，大多数域名是收费的，免费的域名已经越来越少了提供收费域名的ISP（Internet Service Provider，即Internet服务提供商）很多域名申请成功后，有的ISP还附加提供一定的主页空间，可以直接上传要发布的网页采用收费域名的最大优点是服务有保障，功能比较齐全免费域名只提供域名，不提供主页空间，因此这种域名实际上只提供一种转向功能，不能真正发布网页2．申请域名在申请注册之前，用户必须先检索一下自己选择的域名是否已经被注册，最简单的方式就是上网查询。

国际顶级域名可以到国际互联网络信息中心InterNIC（）的网站上查询，国内顶级域名可以到中国互联网络信息中心CNNIC（）的网站上查询在域名查询框内输入想要查询的域名，如，单击提交 3．申请网站空间（1）虚拟主机：虚拟主机是指使用特殊的技术，将一台服务器分为很多台“虚拟”服务器，并拥有共享的IP地址，但是都具有自己独立的域名2）服务器托管：如果具有较大的访问量，或者需要很大的服务器空间，那么虚拟主机就不能满足要求，可以采用将自己的服务器存放在ISP网络中心机房，借用其网络通信系统接入Internet，这样就能避免独立机房的建设，并享受良好的网络带宽服务1.2.5 发布站点网站建设好之后，在发布以前还需要进行下列准备：（1）保证让所有现有的浏览器均能较好地展示网页2）注册到搜索引擎3）针对搜索引擎进行优化，例如，确定几个关键字和详细的页面描述4）优化性能，缩小页面大小5）如果没有自己的服务器和域名，还需要申请域名和网上空间 当所有的准备工作都完成之后，就需要将程序和页面进行整合并进行内部测试如果网站功能测试无误，就可以正式发布网站了发布时需要注意如下4点：（1）服务器是否支持网站所采用的脚本语言。

2）服务器是否支持文件的写操作3）服务器支持什么样的数据库？如Access、SQL Server、MySQL等4）如果是远程服务器，那么网站的上传还需要利用远程FTP工具进行传输1.2.6 网站的推广宣传（1）登录搜索引擎（2）交换链接（3）登录网站导航站点：现在国内有大量的网址导航类站点，如、等，在这些导航类网站做链接也能带来大量的流量4）付费广告（5）在专业论坛上发表文章、消息（6）发布邮件1.3 网站页面设计n1.3.1 网页的基本元素n1.3.2 网页布局1.3.1 网页的基本元素n在设计网页之前，首先应该认识一下构成网页的基本元素，只有这样，才能在设计中得心应手，根据需要合理地组织和安排网页内容n网页的基本元素包括·：n1．文本．文本n2．图片．图片n3．多媒体音频、视频、动画．多媒体音频、视频、动画n4．．超超链链接接：：超链接技术是WWW流行起来的最主要的原因它是从一个网页指向另一个目的端的链接 n5．．导导航航栏栏：导航栏的作用就是引导浏览者游历站点事实上，导航栏就是一组超链接，这组超链接的目标就是本站点的主要及其他主要网页 n6．．表表格格：在网页中，表格用来控制网页中信息的布局方式，包括两个方面：一是使用行和列的形式来布局文本和图像及其他列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。

n7．．表表单单：网页中的表单通常用来接受用户在浏览器的输入，然后将这些信息发送到用户设置的目标端这个目标可以是文本文件、网页、电子邮件，也可以是服务器端的应用程序表单一般用来收集联系信息，接收用户要求，获得反馈意见，设置来宾签名簿，让浏览者注册为会员并以会员的身份登录站点等n表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮，站点浏览者填写表单的方式通常是输入文本，选中单选按钮或复选框，以及从下拉列表中选中选项等n根据表单功能与处理方式的不同，通常可以将表单分为用户反馈表单、留言簿表单、搜索表单和用户注册表单等类型n8．．其其他他常常见见元元素素：网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、JAVA特效、ActiveX等各种特效它们不仅能点缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用1.3.2 网页布局n网页是否精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图片的处理等因素外，还有一个非常重要的因素：网页的布局 页面版面和布局n根据网站内容的整体风格，设计版面布局设计者可以参考其他优秀的网站，调用自己的各种知识储备，特别是艺术方面的知识。

这时设计者用笔在纸上粗略地勾画出布局的轮廓常见的网页布局结构有：nT型结构n同字结构n川字结构n三字结构n单一结构nFlash 型网页排版布局的原则n在实际构思和设计的过程中，设计者还必须掌握以下5项原则1）平衡性（2）对称性（3）对比性（4）疏密度（5）比例网页制作工具（1）网页布局工具nDreamweavernFrontpage（2）网页美化工具n图像处理软件:Photoshop,Fireworksn动画制作软件 :FLASH,Swish、Ulead GIF Animator,Ulead Cool 3D、3D Flash Animator、Xara3D 本章小结n本章介绍了网页设计与制作的基本概念和基本知识、常用的网页制作工具、网站的基本结构和网页布局等内容通过本章的学习使读者对网页的设计与制作过程有一个概貌性的了解 n本章结束。