2023年网站规划与设计基础（教学课件）.ppt

第1章 网络规划与设计根底 1.1 网页根底知识 在动手制作网页之前，应该了解网络与Web的根底知识。网页：是一种网络信息传输的载体，在网站中，供用户阅读的一个个页面，称之为“网页，又称为Web页。Internet：即国际计算机互联网，在中国也称“因特网，是由符合TCP/IP等网络协议的网络组成的互联网。它是目前全世界最大的网络，包含着丰富多彩的信息，并提供方便快捷的效劳。万维网万维网World Wide Web：万维网简称：万维网简称WWW，它，它也是建立在也是建立在Internet上的一种网络效劳。它遵循上的一种网络效劳。它遵循HTTP协协议议，通过超文本和超媒体，将，通过超文本和超媒体，将Internet上包括文本、声上包括文本、声音、图形、图像、影视信号等各种类型的信息聚集在一起。音、图形、图像、影视信号等各种类型的信息聚集在一起。浏览器：要想访问网络中的各种资源，还需要一个工具，浏览器：要想访问网络中的各种资源，还需要一个工具，那就是浏览器，否那么无法访问到网络中丰富的资源。那就是浏览器，否那么无法访问到网络中丰富的资源。目前常用的浏览器有目前常用的浏览器有:IE、Firefox和和Opera等等 统一资源定位符统一资源定位符URL：是一种：是一种WWW上的寻址系上的寻址系统，用来使用统一的格式，来访问网络中分散各地的统，用来使用统一的格式，来访问网络中分散各地的计算机上的资源。计算机上的资源。一个完整的一个完整的URL地址，由通信协议、效劳器名称、文地址，由通信协议、效劳器名称、文件夹和文件名三局部组成。件夹和文件名三局部组成。通信协议：它包括通信协议：它包括HTTP超文本传输协议超文本传输协议、FTP文件传输协议文件传输协议、GopherGopher协议协议和和News新闻组新闻组等。等。超文本传输协议超文本传输协议HTTP即超文本传输协议，是目前即超文本传输协议，是目前网络世界里应用最为广泛的一种网络传输协议，是为网络世界里应用最为广泛的一种网络传输协议，是为分布式超媒体信息系统设计的一个无状态、面向对象分布式超媒体信息系统设计的一个无状态、面向对象的协议。的协议。主机名：指要访问效劳器的主机名：指要访问效劳器的Internet名称。名称。IP地址：地址：IP地址是一组地址是一组32位的数字号码，如“位的数字号码，如“218.30.12.184，这就是上网主机的地址。这就是上网主机的地址。域名：域名：IP地址是一长串的数字号码，这些数字难记又难以理解。为地址是一长串的数字号码，这些数字难记又难以理解。为了方便大家理解、记忆，便有了域名的概念。了方便大家理解、记忆，便有了域名的概念。域名的范围要比主机名要大。一个域名下可以有多个主机名，域名下域名的范围要比主机名要大。一个域名下可以有多个主机名，域名下还可以有子域名。例如，域名还可以有子域名。例如，域名 good-site 下，有主机下，有主机server1和和server2，其主机全名就是，其主机全名就是server1.good-site 和和server2.good-site。也就是常说的二级域名。也就是常说的二级域名。域名前加上传输协议信息及主机类型信息就构成了网址域名前加上传输协议信息及主机类型信息就构成了网址URL HTML：超文本标记语言：超文本标记语言(Hyper Text Markup Language)。HTML严格来说并不是一种标准的编程严格来说并不是一种标准的编程语言，它只是一些能让浏览器能看懂的标记。当网页语言，它只是一些能让浏览器能看懂的标记。当网页中包含正常文本和中包含正常文本和HTML标记时，浏览器会“翻译标记时，浏览器会“翻译由这些由这些HTML标记提供的网页结构、外观和内容的信标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来。息，从而将网页按设计者的要求显示出来。表单表单:表单是用于填写申请或提交信息的交互页面。表单是用于填写申请或提交信息的交互页面。如电子邮箱、主页空间、如电子邮箱、主页空间、QQ号码等的申请页面，以及号码等的申请页面，以及论坛、聊天室、留言簿等。论坛、聊天室、留言簿等。静态和动态网页：静态和动态网页：HTML格式的网页通常被称为“静态网页格式的网页通常被称为“静态网页。常见的静态网页。常见的静态网页以以.htm、.html、.shtml等为后缀，每个网页都是一个独立的文等为后缀，每个网页都是一个独立的文件。早期的网站一般都由“静态网页件。早期的网站一般都由“静态网页构成的。构成的。在静态网页中，也会出现各种动态的效果，如在静态网页中，也会出现各种动态的效果，如.gif格式的动画、格式的动画、Flash、滚动字幕等，这些“动态效果、滚动字幕等，这些“动态效果只是视觉上的，与动态只是视觉上的，与动态网页并无直接联系。网页并无直接联系。动态网页与静态网页是相对的，支持数据库，可以与用户进行交动态网页与静态网页是相对的，支持数据库，可以与用户进行交互。常见的后缀不再是互。常见的后缀不再是.htm、.html等静态网页的形式，而等静态网页的形式，而是是.asp、.jsp、.php、.cgi等形式。等形式。动态网页可以是纯文字内容，也可以包含各种动画内容，这些只动态网页可以是纯文字内容，也可以包含各种动画内容，这些只是网页具体内容的表现形式。无论网页是否具有动态效果，采用是网页具体内容的表现形式。无论网页是否具有动态效果，采用动态网站技术生成的网页，都称为动态网页。动态网站技术生成的网页，都称为动态网页。区别的最简单方法就是在浏览器中翻开，如果能正常显示，即为区别的最简单方法就是在浏览器中翻开，如果能正常显示，即为静态网页，否那么就是动态网页。静态网页，否那么就是动态网页。超级链接超级链接:这是网页制作中经常要用到的概念，这是网页制作中经常要用到的概念，指的是页面对象之间的连接关系。指的是页面对象之间的连接关系。导航条：导航条能十分有效地实现超级链接功导航条：导航条能十分有效地实现超级链接功能能。发布：将制作好的网页上传到效劳器的过程即发布：将制作好的网页上传到效劳器的过程即是发布，也称为上传或上载。是发布，也称为上传或上载。1.2 设计流程 网站建设是一项复杂的工程，因此，在建立一个网站之前，必须进行统筹的安排和规划。设计的根本流程为：需求分析 整体规划 网站详细设计 申请域名和空间 发布站点 网站的推广宣传 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申请域名的形式 目前，申请域名有两种形式：一种是收费的，一种是免费的。实际上，大多数域名是收费的，免费的域名已经越来越少了。提供收费域名的ISPInternet Service Provider，即Internet效劳提供商很多。域名申请成功后，有的ISP还附加提供一定的主页空间，可以直接上传要发布的网页。采用收费域名的最大优点是效劳有保障，功能比较齐全。免费域名只提供域名，不提供主页空间，因此这种域名实际上只提供一种转向功能，不能真正发布网页。2申请域名 在申请注册之前，用户必须先检索一下自己选择的域名是否已经被注册，最简单的方式就是上网查询。国际顶级域名可以到国际互联网络信息中心InterNIC :/的网站上查询，国内顶级域名可以到中国互联网络信息中心CNNIC :/ 的网站上查询。在域名查询框内输入想要查询的域名，如guangming ，单击提交。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网站导航站点：现在国内有大量的网址导航类站点，如 :/hao123 、:/265 等，在这些导航类网站做链接也能带来大量的流量。4付费广告 5在专业论坛上发表文章、消息 6发布邮件 1.3 页面设计 1.3.1 网页的根本元素 1.3.2 网页布局 1.3.1 网页的根本元素 在设计网页之前，首先应该认识一下构成网页的根本元素，只有这样，才能在设计中得心应手，根据需要合理地组织和安排网页内容。网页的根本元素包括：1文本 2图片 3多媒体音频、视频、动画 4超链接：超链接：超链接技术是WWW流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接。5导航栏导航栏：导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超链接，这组超链接的目标就是本站点的主要及其他主要网页。6表格表格：在网页中，表格用来控制网页中信息的布局方式，包括两个方面