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

网站设计与开发技术教程何耀耀智能决策与风险分析研究所课程介绍：以Dreamweaver8为开发环境，介绍Dreamweaver8+ASP+Access模式的中小型数据库网站的开发与维护过程教材：网站设计与开发技术教程耿霞邹婷婷编著人民邮电出版社2009.2参考教材：网站设计与开发杨晓钟等编著机械工业出版社2005.9网页设计与制作（第3版）相万让主编人民邮电出版社2012.2网站开发与网页设计张明主编清华大学出版社2011.9第1章网站规划与设计基础1.1网页基础知识1.2网站设计流程1.3网站页面设计1.1网页基础知识在动手制作网页之前，应该了解网络与Web的基础知识。网页：是一种网络信息传输的载体，在网站中，供用户阅读的一个个页面，称之为“网页”，又称为Web页。Internet：即国际计算机互联网，在中国也称“因特网”，是由符合TCP/IP等网络协议的网络组成的互联网。它是目前全世界最大的网络，包含着丰富多彩的信息，并提供方便快捷的服务。从信息资源的角度看，它是一个集各个部门、各个领域的各种信息资源为一体，供网上用户共享的信息资源。万维网（WorldWideWeb）：万维网简称，它也是建立在Internet上的一种网络服务。它遵循HTTP协议，通过超文本和超媒体，将Internet上包括文本、声音、图形、图像、影视信号等各种类型的信息聚集在一起。上图代表分布在世界各地的以统一格式存放的万维网资源。这些资源相互联结，成为一个“网”状结构。我们只要坐在计算机前，就可以调用世界任何地方的万维网资源。万维网之父伯纳斯-李于1989年在欧洲粒子物理研究所提出了建立一个全球超文本项目——万维网，以此使人们都能顺利地从网上获取并共享信息。工作模式浏览器：要想访问网络中的各种资源，还需要一个工具，那就是浏览器，负责如何显示信息和向服务器发出请求。常用的浏览器有:IE、Firefox、maxthon、搜狗和360等服务器：根据客户提出的需求(HTTP请求)，为用户提供信息浏览、数据查询、安全验证等方面的服务。HTTP（超文本传输协议）：用于从服务器传输超文本到本地浏览器的传送协议,是目前网络世界里应用最为广泛的一种网络传输协议，是为分布式超媒体信息系统设计的一个无状态、面向对象的协议。统一资源定位符（URLUniformResourceLocator）：是一种上的寻址系统，用来使用统一的格式，来访问网络中分散各地的计算机上的资源。一个完整的URL地址，由通信协议、服务器名称、文件夹和文件名三部分组成。通信协议：//服务器名称【：通信端口编号】/文件夹/…/文件名http、telnet(远程登录）、ftp(文件传送)、mailto(电子邮件地址）Gopher(查询服务)、file(本地文件)、newsUsenet（网络新闻组）表明后面的字符串是网络上的计算机名称计算机域名：端口号可有可无，文件路径具体指出要访问的文件名称URL的组成格式服务类型://主机IP地址或域名/资源在主机上的路径。例如：。其含义如下：①http://：代表超文本传输协议，通知microsoft.com服务器显示Web页，可缺省；②：代表一个Web(万维网)服务器；③Microsoft.com：这是装有网页的服务器的域名，或站点服务器的名称；④China：为该服务器上的子目录，即文件夹；⑤Index.htm：index.htm是文件夹中的一个HTML文件(网页)。IP地址和域名系统IP地址是32位的二进制数值，用于在TCP/IP通讯协议中标记每台计算机的地址。IP地址有两种表示形式：二进制和点式十进制（常用的），一个32位IP地址的二进制是由4个8位域组成。即11000000101010000000000100000110（192.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地址范围为：192.0.0.0－223.255.255.254。A类地址⑴A类地址第1字节为网络地址，其它3个字节为主机地址第1个字节的，第1个字节的最高位固定为0。⑵A类地址范围：1.0.0.1—126.255.255.254⑶A类地址中的私有地址和保留地址：①10.X.X.X是私有地址（所谓的私有地址就是在互联网上不使用，而被用在局域网络中的地址）。范围（10.0.0.0-10.255.255.255）②127.X.X.X是保留地址，用做循环测试用的。B类地址⑴B类地址第1字节和第2字节为网络地址，其它2个字节为主机地址，第1个字节的前二位固定为10。⑵B类地址范围：128.0.0.1—191.255.255.254。⑶B类地址的私有地址和保留地址①172.16.0.0—172.31.255.255是私有地址②169.254.X.X是保留地址。如果你的IP地址是自动获取IP地址，而你在网络上又没有找到可用的DHCP服务器。就会得到其中一个IP。C类地址⑴C类地址第1字节、第2字节和第3个字节为网络地址，第4个个字节为主机地址。另外第1个字节的前三位固定为110。⑵C类地址范围：192.0.0.1—223.255.255.254。⑶C类地址中的私有地址：192.168.X.X是私有地址。(192.168.0.0-192.168.255.255)D类地址⑴D类地址不分网络地址和主机地址，它的第1个字节的前四位固定为1110。⑵D类地址范围：224.0.0.1—239.255.255.254E类地址⑴E类地址也不分网络地址和主机地址，它的第1个字节的前五位固定为11110。⑵E类地址范围：240.0.0.1—255.255.255.254IP地址类地址格式起始位范围最大网络数网络中最大主机数AN.H.H.H01-12612616,777,214BN.N.H.H10128–19116,38465,534CN.N.N.H110192–2232,097,152254IPv6简介当前在Internet上使用的IP地址是在1978年确定的协议，它由4段8位二进制数构成。由于Internet协议的当时版本号为4，因而称为“IPv4”。IPv4的地址长度是32位（bit），理论上可以支持多达1600万个网络，容纳四十多亿台主机（232=4,294,967,296），但由于IP对地址进行了分类，分成A、B、C等类地址，实际可用的网络数和主机数远小于上述数目。IPv6的格式：地址长度是128位（bit），8段的16位十六进制数表示，中间用“：”来隔开。比如：60A7:9BA5:FFF0:87B5:FFFF:FFF3:BAFF:88A2域名：IP地址是一长串的数字号码，这些数字难记又难以理解。为了方便大家理解、记忆，便有了域名系统的概念。域名系统(DNS):是一个分层的名字管理查询系统，主要提供Internet上主机ip地址和主机名相互对应关系的服务。域名格式为：计算机主机名.机构名.网络名.最高层域名域名的范围要比主机名要大。一个域名下可以有多个主机名，域名下还可以有子域名。例如，域名下，有主机server1和server2，其主机全名就是server1.163.com和server2.163.com。也就是常说的二级域名。域名前加上传输协议信息及主机类型信息就构成了网址（URL）常见的一级域名域名含义域名含义域名含义域名含义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地址与域名地址两者相互对应，保持全网统一。如：“合肥工业大学”的域名是，IP地址是61.132.138.212。（2）一台主机的IP地址是唯一的，域名数可以有多个。HTML：超文本标记语言(HyperTextMarkupLanguage)。HTML严格来说并不是一种标准的编程语言，它只是一些能让浏览器能看懂的标记。当网页中包含正常文本和HTML标记时，浏览器会“翻译”由这些HTML标记提供的网页结构、外观和内容的信息，从而将网页按设计者的要求显示出来。表单:表单是用于填写申请或提交信息的交互页面。如电子邮箱、主页空间、QQ号码等的申请页面，以及论坛、聊天室、留言簿等。静态和动态网页：HTML格式的网页通常被称为“静态网页”。常见的静态网页以.htm、.html、.shtml等为后缀，每个网页都是一个独立的文件。早期的网站一般都由“静态网页”构成的。在静态网页中，也会出现各种动态的效果，如.gif格式的动画、Flash、滚动字幕等，这些“动态效果”只是视觉上的，与动态网页并无直接联系。动态网页与静态网页是相对的，支持数据库，可以与用户进行交互。常见的后缀不再是.htm、.html等静态网页的形式，而是.asp、.jsp、.php、.cgi等形式。动态网页可以是纯文字内容，也可以包含各种动画内容，这些只是网页具体内容的表现形式。无论网页是否具有动态效果，采用动态网站技术生成的网页，都称为动态网页。区别的最简单方法就是在浏览器中打开，如果能正常显示，即为静态网页，否则就是动态网页。超级链接:这是网页制作中经常要用到的概念，指的是页面对象之间的连接关系。导航条：导航条能十分有效地实现超级链接功能。发布：将制作好的网页上传到服务器的过程即是发布，也称为上传或上载。网站的分类：专业角度：专业型网站和个人网站内容角度：（1）娱乐与休闲类(2)文学与艺术类（3）计算机与Internet类(4)体育与游戏类（5）工商经济类（6）公司企业类(7)新闻与媒体类(8)教育与科技类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．页面风格设计模块