网站规划与设计基础解析.ppt

1、网站设计与开发技术教程何耀耀何耀耀智能决策与风险分析研究所智能决策与风险分析研究所n课程介绍：以Dreamweaver 8 为开发环境，介绍Dreamweaver 8+ASP+Access模式的中小型数据库网站的开发与维护过程n教材：网站设计与开发技术教程 耿霞 邹婷婷 编著 人民邮电出版社 2009.2n参考教材：网站设计与开发 杨晓钟 等编著 机械工业出版社 2005.9n网页设计与制作（第3版）相万让 主编 人民邮电出版社 2012.2n网站开发与网页设计 张明 主编 清华大学出版社 2011.9第1章 网站规划与设计基础n1.1 网页基础知识n1.2 网站设计流程n1.3 网站页面设计

2、1.1 网页基础知识在动手制作网页之前，应该了解网络与Web的基础知识。n网页：网页：是一种网络信息传输的载体，在网站中，供用户阅读的一个个页面，称之为“网页”，又称为Web页。nInternet：即国际计算机互联网，在中国也称“因特因特网网”，是由符合TCP/IP等网络协议的网络组成的互联网。它是目前全世界最大的网络，包含着丰富多彩的信息，并提供方便快捷的服务。从信息资源的角度从信息资源的角度看，它是一个集各个部门、各个领域的各种信息资源为一体，供网上用户共享的信息资源。n万维网万维网（World Wide Web）：万维网简称WWW或web，它也是建立在Internet上的一种网络服务。它

3、遵循HTTP协议，通过超文本和超媒体，将Internet上包括文本、声音、图形、图像、影视信号等各种类型的信息聚集在一起。上图代表分布在世界各地的以统一格式存放的万维网资源。这些资源相互联结，成为一个“网”状结构。我们只要坐在计算机前，就可以调用世界任何地方的万维网资源。n伯纳斯伯纳斯-李于李于19891989年在欧洲年在欧洲粒子物理研究所提出了建立粒子物理研究所提出了建立一个全球超文本项目一个全球超文本项目万万维网，以此使人们都能顺利维网，以此使人们都能顺利地从网上获取并共享信息。地从网上获取并共享信息。WWW工作模式n浏览器浏览器：要想访问网络中的各种资源，还需要一个工具，那就是浏览器，负

4、责如何显示信息和向服务器发出请求。常用的浏览器有常用的浏览器有:IE、Firefox、maxthon、搜狗、搜狗和360等n服务器服务器：根据客户提出的需求(HTTP请求)，为用户提供信息浏览、数据查询、安全验证等方面的服务。nHTTP（超文本传输协议）：用于从WWW服务器传 输超文本到本地 浏览器的传送协议,是目前网络世界里应用最为广泛的一种网络传输协议，是为分布式超媒体信息系统设计的一个无状态、面向对象的协议。n统一统一资源定位符资源定位符（URL Uniform Resource Locator）：是一种WWW上的寻址系统，用来使用统一的格式，来访问网络中分散各地的计算机上的资源。一个完

5、整的URL地址，由通信协议、服务器名称、文件夹和文件名三部分组成。通信协议：/服务器名称【：通信端口编号】/文件夹/文件名http、telnet(远程登录）、远程登录）、ftp(文件文件传送传送)、mailto(电子邮件地址）电子邮件地址）Gopher(查询服务查询服务)、file(本地文件本地文件)、news Usenet（网络新闻组）（网络新闻组）表明后面的字符串表明后面的字符串是网络上的计算机是网络上的计算机名称名称计算机域名：端口号计算机域名：端口号可有可无，文件可有可无，文件路径具体指出要路径具体指出要访问的文件名称访问的文件名称URL的组成格式 n:/。n例如：http:/ htt

6、p:/：代表超文本传输协议，通知服务器显示Web页，可缺省；n www：代表一个Web(万维网)服务器；n M：这是装有网页的服务器的域名，或站点服务器的名称；n China：为该服务器上的子目录，即文件夹；n Index.htm：index.htm是文件夹中的一个HTML文件(网页)。IP地址和域名系统地址和域名系统IPIP地址是地址是3232位的二进制数值，用于在位的二进制数值，用于在TCP/IPTCP/IP通讯协议中标通讯协议中标记每台计算机的地址。记每台计算机的地址。IPIP地址有两种表示形式：二进制和地址有两种表示形式：二进制和点式十进制（常用的）点式十进制（常用的）一个一个3232

7、位位IPIP地址的二进制是由地址的二进制是由4 4个个8 8位域组成。即位域组成。即11000000 11000000 10101000 00000001 00000110 10101000 00000001 00000110（192.168.1.6192.168.1.6）。）。IP地址被分为地址被分为A、B、C、D、E五类五类，其中，其中D、E为两类特殊为两类特殊地址。地址。A类网络的类网络的IP地址范围为地址范围为 0.0.0.0-127.255.255.255；B类网络的类网络的IP地址范围为：地址范围为：128.0.0.0-191.255.255.255；C类网络的类网络的IP地址范围

8、为：地址范围为：192.0.0.0223.255.255.254。A类地址类地址 A类地址第类地址第1字节为网络地址，其它字节为网络地址，其它3个字节为主机地址第个字节为主机地址第1个字节个字节的，第的，第1个字节的最高位固定为个字节的最高位固定为0。A类地址范围：类地址范围：1.0.0.1126.255.255.254 A类地址中的私有地址和保留地址：类地址中的私有地址和保留地址：10.X.X.X是私有地址（所谓的私有地址就是在互联网上不使用，是私有地址（所谓的私有地址就是在互联网上不使用，而被用在局域网络中的地址）。而被用在局域网络中的地址）。范围（范围（10.0.0.0-10.255.2

9、55.255）127.X.X.X是保留地址，用做循环测试用的。是保留地址，用做循环测试用的。B类地址类地址 B类地址第类地址第1字节和第字节和第2字节为网络地址，其它字节为网络地址，其它2个字节为主机地址，个字节为主机地址，第第1个字节的前二位固定为个字节的前二位固定为10。B类地址范围：类地址范围：128.0.0.1191.255.255.254。B类地址的私有地址和保留地址类地址的私有地址和保留地址 172.16.0.0172.31.255.255是私有地址是私有地址 169.254.X.X是保留地址。如果你的是保留地址。如果你的IP地址是自动获取地址是自动获取IP地址，而地址，而你在网络

10、上又没有找到可用的你在网络上又没有找到可用的DHCP服务器。就会得到其中一个服务器。就会得到其中一个IP。C类地址类地址 C类地址第类地址第1字节、第字节、第2字节和第字节和第3个字节为网络地址，第个字节为网络地址，第4个个字个个字节为主机地址。另外第节为主机地址。另外第1个字节的前三位固定为个字节的前三位固定为110。C类地址范围：类地址范围：192.0.0.1223.255.255.254。C类地址中的私有地址：类地址中的私有地址：192.168.X.X是私有地址。是私有地址。(192.168.0.0-192.168.255.255)D类地址类地址 D类地址不分网络地址和主机地址，它的第类

11、地址不分网络地址和主机地址，它的第1个字节的前四位固定个字节的前四位固定为为1110。D类地址范围：类地址范围：224.0.0.1239.255.255.254E类地址类地址 E类地址也不分网络地址和主机地址，它的第类地址也不分网络地址和主机地址，它的第1个字节的前五位固个字节的前五位固定为定为11110。E类地址范围：类地址范围：240.0.0.1255.255.255.254IPIP地址类地址类地址格式地址格式起始位起始位范围范围最大网络最大网络数数网络中最网络中最大主机数大主机数AN.H.H.H01-12612616,777,214BN.N.H.H10128 19116,38465,53

12、4CN.N.N.H110192 2232,097,152254 IPv6简介简介 当前在当前在InternetInternet上使用的上使用的IPIP地址是在地址是在19781978年确年确定的协议，它由定的协议，它由4 4段段8 8位二进制数构成。由于位二进制数构成。由于InternetInternet协议的当时版本号为协议的当时版本号为4 4，因而称为，因而称为“IPv4IPv4”。IPv4IPv4的地址长度是的地址长度是3232位（位（bitbit），理论上可以支持），理论上可以支持多达多达16001600万个网络，容纳四十多亿台主机（万个网络，容纳四十多亿台主机（2 23232=4,2

13、94,967,296=4,294,967,296），但由于），但由于IPIP对地址进行了分类对地址进行了分类，分成，分成A A、B B、C C等类地址，实际可用的网络数和主机等类地址，实际可用的网络数和主机数远小于上述数目数远小于上述数目。IPv6的格式：的格式：地址长度是地址长度是128位（位（bit），8段的段的16位十六进制数表示，位十六进制数表示，中间用中间用“：”来隔开。来隔开。比如：比如：60A7:9BA5:FFF0:87B5:FFFF:FFF3:BAFF:88A260A7:9BA5:FFF0:87B5:FFFF:FFF3:BAFF:88A2n域名：域名：IP地址是一长串的数字号码

14、，这些数字难记又难以理解。为了方便大家理解、记忆，便有了域名系统的概念。域名系统域名系统(DNS):是一个分层的名字管理查询系统，主要提供是一个分层的名字管理查询系统，主要提供Internet上主机上主机ip地址和主机名相互对应关系的服务。域名地址和主机名相互对应关系的服务。域名格式为：格式为：计算机主机名计算机主机名.机构名机构名.网络名网络名.最高层域名最高层域名域名的范围要比主机名要大。一个域名下可以有多个主机名，域名下还可以有子域名。例如，域名下，有主机server1和server2，其主机全名就是和。也就是常说的二级域名。域名前加上传输协议信息及主机类型信息就构成了网址（URL）常见

15、的一级域名常见的一级域名域名 含义域名含义域名含义域名含义com商业商业组织组织net网络技网络技术组织术组织fr法国法国sg新加坡新加坡edu教育教育机构机构org非盈利非盈利性组织性组织hk香港香港tw台湾地台湾地区区int国际性国际性组织组织gov政府部政府部门门jt意大利意大利uk英国英国mil军队军队 cn中国中国kr韩国韩国jp日本日本常见的二级域名：常见的二级域名：edu(教育）、教育）、net（电信网（电信网)、ca（科研网）（科研网）、org（团体）、（团体）、gov（政府）、（政府）、com（商业）、（商业）、mil(军队）军队）注注：（1）IP地址与域名地址两者相互对应，

16、保持全网统一。地址与域名地址两者相互对应，保持全网统一。如：如：“合肥工业大学合肥工业大学”的域名是的域名是，IP 地址是地址是61.132.138.212。（2）一台主机的）一台主机的IP地址是唯一的，域名数可以有多个。地址是唯一的，域名数可以有多个。nHTML：超文本标记语言(Hyper Text Markup Language)。HTML严格来说并不是一种标准的编程语言，它只是一些能让浏览器能看懂的标记。当网页中包含正常文本和HTML标记时，浏览器会“翻译”由这些HTML标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来。n表单表单:表单是用于填写申请或提交信息的交互

17、页面。如电子邮箱、主页空间、QQ号码等的申请页面，以及论坛、聊天室、留言簿等。n静态和动态网页：静态和动态网页：nHTML格式的网页通常被称为“静态网页静态网页”。常见的静态网页以.htm、.html、.shtml等为后缀，每个网页都是一个独立的文件。早期的网站一般都由“静态网页”构成的。在静态网页中，也会出现各种动态的效果，如.gif格式的动画、Flash、滚动字幕等，这些“动态效果”只是视觉上的，与动态网页并无直接联系。n动态网页动态网页与静态网页是相对的，支持数据库，可以与用户进行交互。常见的后缀不再是.htm、.html等静态网页的形式，而是.asp、.jsp、.php、.cgi等形式

18、。动态网页可以是纯文字内容，也可以包含各种动画内容，这些只是网页具体内容的表现形式。无论网页是否具有动态效果，采用动态网站技术生成的网页，都称为动态网页。n区别的最简单方法就是在浏览器中打开，如果能正常显示，即为静态网页，否则就是动态网页。n超级链接超级链接:这是网页制作中经常要用到的概念，指的是页面对象之间的连接关系。n导航条：导航条：导航条能十分有效地实现超级链接功能。n发布：发布：将制作好的网页上传到服务器的过程即是发布，也称为上传或上载。n网站的分类：网站的分类：专业角度：专业型网站和个人网站专业角度：专业型网站和个人网站内容角度：内容角度：（1）娱乐与休闲类）娱乐与休闲类(2)文学与

19、艺术类文学与艺术类（3）计算机与）计算机与Internet类类(4)体育与游戏类体育与游戏类（5）工商经济类）工商经济类（6）公司企业类）公司企业类(7)新闻与媒体类新闻与媒体类(8)教育与科技类教育与科技类1.2 网站设计流程n网站建设是一项复杂的工程，因此，在建立一个网站之前，必须进行统筹的安排和规划。网站设计的基本流程为：需求分析整体规划网站详细设计申请域名和空间发布站点 网站的推广宣传 1.2.1 需求分析需求分析主要是客户对整个项目大的计划、时间要求和资金预算等。1项目立项接到客户的业务咨询，经过双方不断的接洽和了解，并经过基本的可行性讨论之后，初步达成制作协议，这时就需要将项目立项

20、。一般的做法就是成立一个专门的项目小组，小组成员包括项目经理、网页设计人员、程序员、测试员。项目的实现主要是由项目经理来负责的。2客户需求说明书需求说明书一般包含一下几点：（1）正确性：每个功能必须清楚地描写交付的功能。（2）可行性：确保在当前的开发能力和系统环境下可以实现每个需求。（3）必要性：功能是否必须交付，是否可以推出实现，是否可以在经费不足时放弃。（4）简明性：不要使用专业的网络术语。（5）检测性：开发完毕，客户可以根据需求进行检测。1.2.2 整体规划 （1）网站需要实现哪些功能；（2）网站开发使用什么软件，在什么样的硬件环境下进行；（3）需要多少人，多长时间；（4）需要遵循的规则

21、和标准有哪些。同时需要写一份总体规划说明书，包括：（1）网站的栏目和板块；（2）网站的功能和相应的程序；（3）网站的链接结构；（4）如果有数据库，进行数据库的概念设计；（5）网站的交互性和用户友好设计1.2.3 网站详细设计1整体形象设计在程序员进行详细设计的同时，网页美工开始设计网站的整体形象和首页。整体形象设计包括标准字、Logo、标准色彩、广告语等。首页设计包括版面、色彩、图像、动态效果、图标等风格设计，也包括banner、菜单、标题、版权等模块设计。2页面风格设计模块布局宗旨在于方便访问者浏览，所以首页上面设置一条导航栏，其下是主题动画，在主题动画下设置版内导航条。大致页面布局力求风格

22、统一、内容丰富。如今的多媒体Web网页具有强大的交互功能，多种媒体方式如文字、图片、动画、声音等同时存在。文字是一种简洁有效的媒体，输入方便，处理速度快，在网速较慢的情况下适合用文字进行大面积布局。图片可以给人以较为直观的感受，以及更为感性的认识，其缺点是下载速度慢，在网速慢的情况下不宜大面积运用。3颜色调配设计 网页制作中页面颜色的调配相当重要，由网页美工进行整个网站的美工设计。各板块采用与网站首页同一色系的颜色，整个板块内部也尽量保持风格一致。4网站调试方案 对于网站调试，尽量采用边制作边调试，即采用本机调试与和上传服务器调试的方法，因为网站在单机和服务器上运行有很大的区别，所以很有可能在

23、上传服务器之后，出现在单机上不能浏览的一系列问题。观察速度、兼容性、交互性等，发现问题及时解决并记录下来。1.2.4 申请域名和空间1申请域名的形式目前，申请域名有两种形式：一种是收费的，一种是免费的。实际上，大多数域名是收费的，免费的域名已经越来越少了。提供收费域名的ISP（Internet Service Provider，即Internet服务提供商）很多。域名申请成功后，有的ISP还附加提供一定的主页空间，可以直接上传要发布的网页。采用收费域名的最大优点是服务有保障，功能比较齐全。免费域名只提供域名，不提供主页空间，因此这种域名实际上只提供一种转向功能，不能真正发布网页。2申请域名在申

24、请注册之前，用户必须先检索一下自己选择的域名是否已经被注册，最简单的方式就是上网查询。国际顶级域名可以到国际互联网络信息中心InterNIC（http:/）的网站上查询，国内顶级域名可以到中国互联网络信息中心CNNIC（http:/）的网站上查询。在域名查询框内输入想要查询的域名，如，单击提交。3申请网站空间（1）虚拟主机：虚拟主机是指使用特殊的技术，将一台服务器分为很多台“虚拟”服务器，并拥有共享的IP地址，但是都具有自己独立的域名。（2）服务器托管：如果具有较大的访问量，或者需要很大的服务器空间，那么虚拟主机就不能满足要求，可以采用将自己的服务器存放在ISP网络中心机房，借用其网络通信系统

25、接入Internet，这样就能避免独立机房的建设，并享受良好的网络带宽服务。1.2.5 发布站点网站建设好之后，在发布以前还需要进行下列准备：（1）保证让所有现有的浏览器均能较好地展示网页。（2）注册到搜索引擎。（3）针对搜索引擎进行优化，例如，确定几个关键字和详细的页面描述。（4）优化性能，缩小页面大小。（5）如果没有自己的服务器和域名，还需要申请域名和网上空间。当所有的准备工作都完成之后，就需要将程序和页面进行整合并进行内部测试。如果网站功能测试无误，就可以正式发布网站了。发布时需要注意如下4点：（1）服务器是否支持网站所采用的脚本语言。（2）服务器是否支持文件的写操作。（3）服务器支持什

26、么样的数据库？如Access、SQL Server、MySQL等。（4）如果是远程服务器，那么网站的上传还需要利用远程FTP工具进行传输。1.2.6 网站的推广宣传（1）登录搜索引擎（2）交换链接（3）登录网站导航站点：现在国内有大量的网址导航类站点，如http:/、http:/等，在这些导航类网站做链接也能带来大量的流量。（4）付费广告（5）在专业论坛上发表文章、消息（6）发布邮件1.3 网站页面设计n1.3.1 网页的基本元素n1.3.2 网页布局1.3.1 网页的基本元素n在设计网页之前，首先应该认识一下构成网页的基本元素，只有这样，才能在设计中得心应手，根据需要合理地组织和安排网页内容

27、。n网页的基本元素包括：1文本文本2图片图片3多媒体音频、视频、动画多媒体音频、视频、动画n4超链接：超链接：超链接技术是WWW流行起来的最主要的原因。它是从一个网页指向另一个目的端的链接。n5导航栏导航栏：导航栏的作用就是引导浏览者游历站点。事实上，导航栏就是一组超链接，这组超链接的目标就是本站点的主要网页。n6表格表格：在网页中，表格用来控制网页中信息的布局方式，包括两个方面：一是使用行和列的形式来布局文本和图像及其他列表化数据；二是可以使用表格来精确控制各种网页元素在网页中出现的位置。n7表单表单：网页中的表单通常用来接受用户在浏览器的输入，然后将这些信息发送到用户设置的目标端。这个目标

28、可以是文本文件、网页、电子邮件，也可以是服务器端的应用程序。表单一般用来收集联系信息，接收用户要求，获得反馈意见，设置来宾签名簿，让浏览者注册为会员并以会员的身份登录站点等。表单由不同功能的表单域组成，最简单的表单也要包含一个输入区域和一个提交按钮，站点浏览者填写表单的方式通常是输入文本，选中单选按钮或复选框，以及从下拉列表中选中选项等。根据表单功能与处理方式的不同，通常可以将表单分为用户反馈表单、留言簿表单、搜索表单和用户注册表单等类型。n8其他常见元素其他常见元素：网页中除了以上几种最基本的元素之外，还有一些其他的常用元素，包括悬停按钮、JAVA特效、ActiveX等各种特效。它们不仅能点

29、缀网页，使网页更活泼有趣，而且在网上娱乐、电子商务等方面也有着不可忽视的作用。1.3.2 网页布局n网页是否精彩，能否吸引浏览者，除了色彩的搭配、文字的变化、图片的处理等因素外，还有一个非常重要的因素：网页的布局。页面版面和布局n根据网站内容的整体风格，设计版面布局。设计者可以参考其他优秀的网站，调用自己的各种知识储备，特别是艺术方面的知识。这时设计者用笔在纸上粗略地勾画出布局的轮廓。常见的网页布局结构有：T型结构口字结构pop字结构三字结构单一结构Flash 型n T型布局型布局就是指页面顶部为横条网站标志就是指页面顶部为横条网站标志+广告条，下方左面广告条，下方左面为主菜单，右面显示内容的

30、布局，因为菜单条背景较为主菜单，右面显示内容的布局，因为菜单条背景较深，整体效果类似英文字母深，整体效果类似英文字母“T”,所以我们称之为所以我们称之为“T”形布局。这是网页设计中用的最广泛的一种布局形布局。这是网页设计中用的最广泛的一种布局方式。这种布局的优点是页面结构清晰，主次分明。方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人如果细节色彩上不注意，很容易让人看之无味看之无味。“三三”型布局型布局这种布局多用于国外站点，国内用的不多。特点是页面上这种布局多用于国外站点

31、，国内用的不多。特点是页面上横向两条色块，将页面整体分割为三部分，色块中大多放横向两条色块，将页面整体分割为三部分，色块中大多放广告条。广告条。POP布局布局 以一张精美图片作为页面的设计中心。常用于以一张精美图片作为页面的设计中心。常用于时尚类站点，比如时尚类站点，比如ELLE.com。优点显而易见：。优点显而易见：漂亮吸引人。缺点就是速度慢。漂亮吸引人。缺点就是速度慢。型布局型布局n所谓的这种结构是指页面顶部为所谓的这种结构是指页面顶部为“网站标志网站标志+广告条广告条+主菜单主菜单”,下方左面和右面为链接、广告或其他一些内下方左面和右面为链接、广告或其他一些内容容,下方的中间部分是主题内

32、容的布局下方的中间部分是主题内容的布局,其整体效果类似其整体效果类似于符号于符号pai。这种布局的优点是充分利用版面。这种布局的优点是充分利用版面,信息量信息量大大;缺点是页面拥挤缺点是页面拥挤,不够灵活。不够灵活。口型布局口型布局n与与型布局类型类似，但是它是页面上下各有一个广告条，型布局类型类似，但是它是页面上下各有一个广告条，左面是主菜单，右面是友情链接，中间是主要内容。这种左面是主菜单，右面是友情链接，中间是主要内容。这种布局的优点是充分利用版面、信息量大。缺点是页面拥挤，布局的优点是充分利用版面、信息量大。缺点是页面拥挤，不够灵活。不够灵活。网页排版布局的原则n在实际构思和设计的过程

33、中，设计者还必须掌握以下5项原则。（1）平衡性（2）对称性（3）对比性（4）疏密度（5）比例主页设计应避免的一些问题 没有联系地址 下载速度慢 缺乏导航功能 页面缺乏针对性 色彩不协调 自动播放音乐文件 大量使用表格 大量使用动态图像 站点内容不及时更新 网页制作工具（1）网页布局工具DreamweaverFrontpage（2）网页美化工具图像处理软件:Photoshop,Fireworks动画制作软件:FLASH,Swish、Animator,Ulead Cool 3D、3D Flash Animator等本章小结n本章介绍了网页设计与制作的基本概念和基本知识、常用的网页制作工具、网站的基本结构和网页布局等内容。通过本章的学习使读者对网页的设计与制作过程有一个概貌性的了解。作业：1.P10.第3题1 简述网页的基本元素和特点，并结合具体网页进行分析。2 列举几种网站布局的类型？3 B类网络的最大主机数是多少？