第2章网站规划与设计.ppt

《第2章网站规划与设计.ppt》由会员分享，可在线阅读，更多相关《第2章网站规划与设计.ppt（68页珍藏版）》请在三一文库上搜索。

1、,第2章 网站规划与设计,网站分类 门户网站 如：新浪 政府网站 学校和科研机构网站 企业网站 新闻媒体网站 如：中国新闻网、CCTV 论坛型网站 展示宣传型网站 个人网站 如：吴山明教授个人网站http:/,网页的类型 1、静态网页 2、动态网页 1ASP 2. ASP.NET 3JSP 4PHP,2.2网站建设的整体规划,企业电子商务网站结构图,2.2网站建设的整体规划,汉阳教育信息网站结构图,2.2网站建设的整体规划,2.1 网站结构 1归类站点内容 2项目放置的位置 3导航草图设计 4创建设计草图,2.2 网页页面布局 1网页设计和布局原则 2网站命名和标志 网站命名应遵循以下的原则：

2、 （1）体现网站的主题，凝练，概括性强。 （2）合法、合情并合理。 （3）字数不要太多，一般控制在6个字以内。 （4）有个性，体现一定的内涵，可给浏览者更多的视觉冲击力和空间想像力,3网页的色彩 网页的色彩是树立网站形象的关键因素之一。在搭配网页色彩时，要注意色彩的鲜明性、独特性、合适性和联想性。 4网页的文字 注意以下基本原则: （1）不要使用超过3种字体类型，否则网页看起来将显得杂乱，没有主题。 （2）不要用太大的字，因为版面空间非常宝贵和有限，粗陋的大字体不能带给浏览者更多的信息 （3）最好不要使用不停闪烁的文字。 （4）标题的字体比正文要稍大一些，颜色也应有所区别。,4定位网站的CI形

3、象 1、设计网站的LOGO 2、网站宣传词,5网页版面和布局 网页布局主要有以下3种结构。 型结构 T型结构 三型结构,1.3.1 网页布局工具 1Dreamweaver 2Frontpage 1.3.2网页美化工具 1图像处理软件:Photoshop,Fireworks 2动画制作软件 :FLASH,Swish、Ulead GIF Animator,Ulead Cool 3D、3D Flash Animator、Xara3D,网站的开发流程 不同的单位和个人要开发网站的种类，要求不同，所以思路，进程都不尽相同。我们在练习时所做的“网站”从前期规划到后期完成的过程与商业界的性质不同。例如商界，

4、包括有关单位或个人的很严格的网络建设结款方式。,网站制作合同款项通常分两期支付。 第一期款项：合同签定后当日，客户需支付合同金额的50%作为定金。 第二期款项：整个网站制作项目完成，客户依据验收标准验收，验收合格或超过验收期限截止日，由客户在其后的三日内支付合同金额的50%，同时需要将网站移至客户的服务器空间。,从整体来说动态或功能性网站的建设，大致分为三个阶段： 第一，分析阶段 第二，实现阶段 第三，发布阶段 第四，不断的修改,第一，分析阶段 详细的说为需求分析阶段，包括站点的规划，HTML内容及如何实现这些内容。 第二，实现阶段 这一阶段可以说是关键阶段，它是衡量整个网站的决定性阶段。具体

5、包括美术设计，制作良好的页面视觉效果。不同的网站性质及风格要求的颜色搭配也不同。所以要准备好这些工作；根据设计和站点的结构先制作好静态站点；根据页面和设计结构设计数据库，进行相关的数据库操作，生成查询集，静态内容编码成动态内容。根据客户反馈修改上一版本；,第三，发布阶段 重新分析获得的需求，根据需求调整设计。根据客户反馈修改上一版本，根据日志进行排错和测试，演示，反馈。 第四，不断的修改 不断的修改演示直到客户满意符合客户所要求的标准，最后客户验收为正式发布阶段。完成的每一阶段每一步都要经过客户的确认，根据需求分析调整设计。,211 网站的工作原理 1.概述 网站的一般工作原理是指 Web 服

6、务器与客户端浏览器交互的基本原理，简单的说就是网站服务器上的文件和数据库最终成为客户所看到的页面的过程。实质上这个过程就是解决下面三个问题的过程：,(1)网站的数据如何变成页面数据网站程序解决。 (2) 如何根据用户请求将指定的数据体送达客户端Internet解决。 (3) 客户端如何将页面数据显示为页面（所谓页面就是图形界面上的文本、图像、图形的集合）浏览器解决。,2.网站程序的运行 这里的“网站程序”指网站的脚本、脚本解析程序、公用组件和数据库系统的集体。如果网站全是静态页面，当然就不存在脚本和组件的问题了。这些程序相互协作，将原始的网站数据（文件形式或数据库形式）解释（或者说：变换）成特

7、定编码格式的用户数据。,网页里最常见的编码格式有：HTML, GIF, BMP, PNG, MIDI （“正规”名称为 text/html, image/gif, image/bmp, image/png, audio/mid）。对任何一次客户请求，一旦解释完毕，程序在本次连接中的使命也就结束了。其过程如图2-1所示。,图2-1 浏览器访问服务器示意图,WWW工作原理示意图,图 基于Web的浏览器/服务器B/S(Browser/Server)结构示意图,2.2 Web服务器的安装与配置 2.2.1 IIS简介 IIS是Internet Information Server的缩写，它是微软公司主

8、推的服务器， IIS与WindowNT Server完全集成在一起，因而用户能够利用Windows NT Server和NTFS（NT File System，NT的文件系统）内置的安全特性，建立强大、灵活而安全的Internet和Intranet站点。,IIS支持HTTP（Hypertext Transfer Protocol，超文本传输协议），FTP（Fele Transfer Protocol，文件传输协议）以及SMTP协议，通过使用CGI和ISAPI，IIS可以得到高度的扩展。 IIS支持与语言无关的脚本编写和组件，通过IIS，开发人员就可以开发新一代动态的、富有魅力的Web站点。II

9、S不需要开发人员学习新的脚本语言或者编译应用程序，IIS完全支持VBScript，JScript开发软件以及Java，它也支持CGI和WinCGI，以及ISAPI扩展和过滤器。,IIS的设计目的是建立一套集成的服务器服务，用以支持HTTP，FTP和SMTP，它能够提供快速且集成了现有产品，同时可扩展的Internet服务器。 IIS的安装，管理和配置都相当简单，这是因为IIS与Windows NT Server网络操作系统紧密的集成在一起，另外，IIS还使用与Windows NT Server相同的SAM（Security Accounts Manager，安全性账号管理器），对于管理员来说，

10、IIS使用诸如Performance Monitor和SNMP（Simple Nerwork Management Protocol，简单网络管理协议）之类的NT已有管理工具。,IIS支持ISAPI，使用ISAPI可以扩展服务器功能，而使用ISAPI过滤器可以预先处理和事后处理储存在IIS上的数据。 用于32位Windows应用程序的Internet扩展可以把FTP，SMTP和HTTP协议置于容易使用且任务集中的界面中，这些界面将Internet应用程序的使用大大简化，IIS也支持MIME（Multipurpose Internet Mail Extensions，多用于Internet邮件扩

11、展），它可以为Internet应用程序的访问提供一个简单的注册项。,IIS的一个重要特性是支持ASP。IIS 3.0版本以后引入了ASP，可以很容易的张贴动态内容和开发基于Web的应用程序。 对于诸如VBScript，JScript开发软件，或者由Visual Basic，Java，Visual C+开发系统，以及现有的CGI和WinCGI脚本开发的应用程序，IIS都提供强大的本地支持。,2.2.2 IIS的安装与配置 IIS 目前最新版本为6.0，在Windows 2003 Server操作系统中默认安装。如果没有安装Windows 2003，可以选择IIS5.0，它可以在Windows X

12、P或者Windows 2000操作系统中安装。 对开发者而言，IIS的各个版本之间的区别并不大。这里将介绍在Windows XP操作系统中IIS5.0的安装配置。,1.IIS安装 在安装操作系统的时候，IIS并没有默认安装到操作系统中，因此读者还必须要单独安装。安装步骤如下： （1）首先进入控制面板，选择“安装或删除程序”， （如图2-2所示）单击“添加或删除程序”后，进入“添加或删除程序”对话框，单击“添加/删除Windows组件（A）”弹出“Windows组件向导”对话框。如图2-3所示。 （2）选中“Internet信息服务（IIS）” ，然后单击 “详细信息”按钮，出现“Interne

13、t信息服务（IIS）”对话框。选中“万维网服务”，然后单击 “详细信息”按钮，进入“万维网服务”对话框。,图2-2控制面板,图2-3 Windows组件向导,图2-4 Internet信息服务（IIS）,（3）选中所有选项，然后单击“确定”按钮，进入“Windows组件向导”对话框，然后单击“下一步”按钮，进行安装配置（注：中途需要插入“Windows XP”的安装光盘），直到安装完毕。如图2-4所示。从进度表上，可以看出安装进度。耐心等待几分钟，即可安装成功。如图2-5所示。单击“完成”即可。 此时，再打开“Windows组件向导”对话框，会发现Internet信息服务（IIS）的复选框已被

14、选中，说明IIS已经安装。如图2-6所示。（注意：此方法是检验Internet信息服务器是否安装成功的办法之一，下面给出另一种方法）,（4）在安装完毕以后，需要测试服务器是否安装成功，打开浏览器，然后输入http:/localhost或者http:/127.0.0.1如果连接成功显示出“欢迎使用Windows XP Server Internet服务”界面。,图2-5 “完成”提示向导,图2-6 Windows组件界面,2.启动Internet信息服务（IIS） Internet信息服务简称为IIS，单击Windows开始菜单-所有程序-管理工具-Internet信息服务（IIS）管理器，即可

15、启动“Internet信息服务”管理工具，如图2-7所示。,图2-7 Internet信息服务（IIS）管理器,3.IIS配置 IIS相对于PWS来说，需要更多的设置。在进行管理设置之前，首先要进入管理界面。打开控制面板，双击打开“管理工具”，然后选择“Internet信息服务”，双击图标，进入管理工具界面。树型结构“默认网站”已经被展开，可以看到下面有很多字节点，每一个字节点就是一个应用程序或者是一个虚拟路径。,在Web服务器提供服务之前，首先要启动服务，这可以通过工具栏上面的按钮来实现，也可以通过菜单实现。在“Internet信息服务”窗口中，右键单击“默认网站”，会弹出快捷菜单。如果要对

16、服务器进行各种设置，则可以通过“属性”菜单项来设置。,接下来的任务就是设定虚拟路径了。虚拟路径可以通过多种方式来设定，只有设定了虚拟路径后，才可以通过URL来访问资源。 最简单的设定虚拟路径的办法，就是把自己的网页或者目录拷贝到服务器的根目录下，默认的服务器根目录是“C:Inetpubwwwroot”。当然每次都拷贝文件到根目录，是很麻烦的，因此还有一种设置虚拟路径的方法。,在“Internet信息服务”窗口中，单击菜单“新建“，选择”虚拟目录（V）“选项，弹出创建向导对话框，单击“下一步”按钮，输入虚拟目录别名后单击“下一步”按钮，输入虚拟目录的路径，设置以后，可以通过虚拟别名来访问里面的文

17、件，用户可以通过“浏览”按钮来选择目录。 接着单击“下一步”按钮，进行权限设置，为了保证网站的安全，只需要选择前3个选项就可以了。接着单击“下一步”按钮，单击“完成“按钮，便可完成虚拟路径的设定。完成设置以后，用户就可以通过虚拟路径http:/localhost或者http:/127.0.0.1来访问了。,虚拟路径设置只的网站管理的开始，要对网站进行更加详细的设置，还需要通过“默认网站 属性”菜单项来实现，单击“属性”菜单后会弹出设置对话框。在该属性页中，不需要过多的设置，通常采用默认值。 其中最重要的一个选项就是“TCP端口”选项，用户可以在其中设定其他的值。通常HTTP协议默认的端口是80

18、，因此用户输入“URL：http:/”和输入“URL：http:/：80”的结果是一样的。在计算机中安装了两个服务器的时候，通常不能使用相同的端口号，需要改掉另外一个服务器的端口号，这样两个服务器都可以提供服务了。,如前文所述，IIS安装后，系统自动创建了一个默认的Web站点，该站点的主目录默认为C:Inetpubwww.root。 用鼠标右键单击“默认Web站点”，在弹出的快捷菜单中选择“属性”，此时就可以打开站点属性设置对话框，（如图2-8所示）在该对话框中，可完成对站点的全部配置。,图2-8 默认网站属性,单击“主目录”标签，切换到主目录设置页面，（如图2-9）该页面可实现对主目录的更改

19、或设置。注意检查启用父路径选项是否勾选，如未勾选将对以后的程序运行有部分影响。（如图2-10），主目录配置-选项。,图2-9 主目录设置页面,图2-10 父目录设置页面,设置主页文档 单击“文档”标签，可切换到对主页文档的设置页面，（如图7）主页文档是在浏览器中键入网站域名，在未制定所要访问的网页文件时，系统默认访问的页面文件。常见的主页文件名有index.htm、index.html、index.asp、index.php、index.jap、default.htm、default.html、default.asp等。,IIS默认的主页文档只有default.htm和default.asp，

20、根据需要，利用“添加”和“删除”按钮，可为站点设置所能解析的主页文档。 启动与停止IIS服务 在Internet信息服务的工具栏中提供有启动与停止服务的功能。单击 可启动IIS服务器；再单击 则停止IIS服务器。,2.3 网站开发工具 2.3.1 静态网页制作工具 2.3.2 动态网页编程工具,在网站设计中，HTML格式的网页，通常被称为静态网页。有人以为网页能动起来就是动态，没有动画就是静态，其实不应该这样理解，静态网页是相对于ASP、JSP等数据库网页的，那些网页的页面上可以有访问者和服务器的数据互相交换，所以称之为动态，HTML静态网页就不同，这样的网页只是在页面上显示一些文本图象等信息

21、，并不与访问者交换信息，所以称之为静态网页，同动态网页比较起来，静态网页的功能是很简单的。早期的网站一般都是由静态网页制作的，且每个网页都是一个独立的文件。,从视觉效果上静态网页与动态网页的区别是：在HTML格式的网页上，也可以出现各种动态的效果，例如：GIF格式的动画，FLASH，滚动字幕等等。然而，这些“动态效果”只是视觉上的，要区分开动态网页的概念。,静态网页制作技术是一种通过HTML标记语言,按照一定的格式整合各种媒体,如图片、文字、声音等,结合Web服务器实现信息网络发布的技术。 常见的静态网页制作工具有FrontPage、Dreamweaver 、Flash.等。之所以推荐Drea

22、mweaver有以下原因： Macromedia公司的Dreamweaver以其强大的功能和方便的操作，赢得了越来越多的网页制作专业领域人士的青睐。,Dreamweaver是当前最流行的网页设计软件，它提供可视化的网页开发环境，具有所见即所得的功能。而FrontPage也有自身的缺点，比如表格定位不准确，使用模板创建的网页显得单调和呆板，所以，它只能作为业余网页制作者的选择。在这种情况下，我们选择了Dreamweaver做为我们的网页制作工具，最新的版本是8.0。在第三章我们将详细介绍。,2.3.2 动态网页编程工具 动态HTML（即 DHTML），所谓动态网页就是采用动态HTML制作出来的具

23、有动态效果的网页。动态网页，就是放在服务器端的一些执行脚本。而Web服务器起到了一个连接这些脚本和浏览者的作用。 Web服务器首先接受浏览者的浏览请求及提交的要求信息，然后根据这些请求，执行相应的动态网页脚本，完成特定的操作，并生成相应的网页页面，再将这些页面发送给浏览者，从而实现一个完整的Web应用操作过程。用户通过浏览器接收的，是通过Web服务器对服务器端的脚本进行处理后生成的网页文件，脚本程序代码是不会出现在服务器端的。,HTML是编写网页的语言，但是，仅用HTML是不能编写出动态网页的。所以，我们下面提到另外几种技术 CGI、ASP、JSP和PHP。,（1）CGI CGI是公用网关接口

24、（Common Gateway Interface）的缩写，它是用于Web服务器和外部应用程序之间信息交互的标准接口。更明确地说，CGI仅是在WWW服务器上可执行的程序代码，它的工作就是控制信息要求而且产生并传回所需的文件，提供同客户端HTML页面的接口。,（2）ASP ASP是Active Server Pages(活动服务器网页)的缩写，是微软推出的用以取代CGI的技术。简单来说，ASP是一套服务器端的脚本运行环境。通过ASP可以结合HTML网页、ASP指令和ActiveX元素建立动态、交互、高效的Web服务器应用程序。 ASP优于CGI的地方是不用学习一门专门的编程语言来创建CGI应用程

25、序，它提供了创建交互页的简便方法，只需将一些简单的指令嵌入到HTML文件中，就可以从表单中收集数据。ASP还可以利用ADO(Active Data Object,微软开发的一种数据访问模型)方便地访问数据库，使得开发基于WWW的应用系统成为可能。,ASP的特点有： 使用VBScript、JavaScript等简单的脚本语言，并结合HTML语言，即可完成网站的应用程序的编写。 不需编译，直接在服务器端执行。 ASP设计的网页与浏览器无关，只要用户端使用的浏览器能执行HTML码就可以了，而这是几乎所有浏览器都满足的。 有一定安全性。,（3）JSP JSP（Java Server Page）是Sun

26、公司推出的新一代网站开发语言。JSP可以在Serverlet和JavaBean的支持下，完成功能强大的站点程序。 JSP的特点有： 1将内容的产生和显示进行分离 2强调可重用的群组件 3采用标识简化页面开发,（4）PHP PHP是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C、Java和Perl语言的语法, 并结合PHP自己的特性,使WEB开发者能够快速地写出动态产生页面。它支持目前绝大多数数据库。 还有一点，PHP是完全免费的，用户可以从PHP官方站点(http: /)自由下载。 PHP的特点有：,PHP可以编译成与许多数据库相连接的函数。PHP支持多种主流与非主流的数据库，如：Ada

27、bas D、DBA、dBase、dbm、filePro、Informix、InterBase、mSQL、MySQL、Microsoft SQL Server、Solid、Sybase、ODBC、oracle、oracle 8、PostgreSQL等。,其中，PHP与MySQL是现在绝佳的组合，它们的组合可以跨平台运行。我们还可以自己编写外围的函数去间接存取数据库。通过这样的途径当我们更换使用的数据库时，可以轻松地修改编码以适应这样的变化。 PHPLIB就是最常用的可以提供一般事务需要的一系列基库。但PHP提供的数据库接口支持彼此不统一，比如对Oracle、 MySQL、Sybase的接口，彼此

28、都不一样。这也是PHP的一个弱点。,目前在国内ASP应用最为广泛。 如前面介绍，ASP是微软公司开发的代替CGI脚本程序的一种应用,它可以与数据库和其它程序进行交互，是一种简单、方便的编程工具。ASP的网页文件的格式是.asp，现在常用于各种动态网站中。 本书选择最为常用的ASP技术开发基于Web的应用程序。ASP技术的相关脚本语言将在后面章节中介绍。,2.4 小结 本章主要介绍了网站的工作原理、开发流程、Web服务器的安装与配置以及网站的开发工具。静态网页制作工具主要有Dreamweaver, frontpage等，动态编程工具主要有ASP、JSP、PHP等。书中分析了它们的区别，读者可以根据情况选择自己的编程工具。,2.5思考与练习 1. 网站的开发流程是什么？ 2. 如何安装与配置IIS服务器？ 3. 常用的静态网页制作工具有哪些？,