网站开发技术与网站建设流程.ppt

网站开发技术与技术应用实例,主讲：陈建辉Email:TEL:18961777234http:/,第一章：Web的基本概念,Web,World Wide Web的简称，简写成WWW，意思是遍布世界的网。Web将世界各地的各种信息资源有机地组织起来,形成一个统一的Web网络。Web是基于超文本的、具有友好用户界面的信息查询工具和信息发布平台，是由Web服务器和其中存放的文档和文档之间的链接构成的庞大信息网，是通过超链接到其它Web服务器页面上的文本和图形界面。,常用的浏览器,Internet Explorer(简称IE)由微软公司基于Mosaic(查看Mosaic)开发的网络浏览器。IE是计算机网络使用时必备的重要工具软件之一，在互联网应用领域甚至是必不可少的。内置了一些应用程序，具有浏览、发信、下载软件等多种网络功能。360浏览器,360安全浏览器拥有全国最大的恶意网址库，采用先进的恶意网址拦截技术，可自动拦截挂马、欺诈、网银仿冒等恶意网址Firefox 开放源码的浏览器，适用于Windows,Linux和MacOSX平台，主要特性有：它体积小,速度快;标签式浏览;禁止弹出式窗口；自定制工具栏；扩展管理；更好的搜索特性。,常用的浏览器,MyIE 国人制作的浏览器软件，不但支持所有的IE功能而且还有很多自己的特色功能，广告过滤，窗口过滤功能，页面的各种保存方式，内置了多种中英文分类搜索引擎，Opera一个华丽的浏览器，必须安装的浏览器，也是一款不是基于IE核心的独立浏览器。,Web网络上有大量的Web服务器，服务器上有海量的信息资源。人们必须通过一个网络空间地址，通过浏览器在服务器上顺利地找到某些信息。Web网络上用URL来描述、查找和存取各种信息资源。,关于URL,Uniform Resource Location,“统一资源定位符”。通俗地说，URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上。URL采用URL可以用一种统一的格式来描述、查找和存取各种信息资源。包括文件、服务器的地址和目录等。在实际应用中，人们可以把URL看作一个指针，用来指定Internet网上一个具体的网络空间地址。,URL由下列三个部分组成：,ULR地址格式如下：,协议：/主机名/地点/文件名第1，2部分之间用“：/”符号隔开，第2,3部分用“/”符号隔开。第1，2部分不可缺少，第3部分可省略。如：http:/:80/pub/HXWZ.rar如：ftp:/,第二章：Web模型,2种类型,静态网页html,动态网页asp/aspx/php/jsp,1静态网页,定义HTML直接书写的网页称为“静态网页”，它是实实在在保存在服务器上的文件，每个网页都是一个独立的文件。静态网页特点：每个网页都有一个固定的URL，且网页URL以.htm,.html,.shtml等常见形式为后缀。内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的。内容相对稳定，容易被搜索引擎检索。没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时，完全依靠静态网页制作方式比较困难。交互性差，在功能方面有较大的限制。,1静态网页,当用户浏览器通过URL或包含URL的超链接元素向Web服务器请求网页内容时，服务器只是将原设计好的静态HTML文档传送给用户浏览器,2.动态网页,动态网页 不等于“动态效果”，动态网页也可以是纯文字内容的，也可包含各种动画的内容。动态网页的主要特征：以数据库技术为基础，可大大降低网站维护的工作量；采用动态网页技术的网站可实现更多的功能，如用户注册、用户登录、在线调查、用户管理、文章管理等。动态网页实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页；动态网页中的“？”对搜索引擎检索存在一定问题。,采用动态网页生成的动态网站有如下优点：,自动更新 无需手动更新HTML文档，便会自动生成新的页面，可节省工作量。交互性 网页会根据用户的要求以及选择而动态改变和响应，将浏览器作为客户端界面。举例:点播电视连续剧(不同集,不同位置)因时因人而变 即当不同的时间，不同的人访问同一个网址时会产生不同的页面。举例:学生成绩查询,一般地，动态网页的实现都采用B/S三层体系结构。B/S三层体系结构在数据管理层Sever和用户界面层Client增加了一层结构，称为“中间件”Middleware，使整个体系结构成为三层。三层结构是伴随着中间件技术的成熟而兴起的，核心概念是利用中间件将应用在逻辑上分为表示层、业务逻辑层和数据存储层三个不同的处理层次。这种三层结构在层与层之间相互独立，任何一层的改变不会影响其它层的功能。作为构造三层结构应用系统的基础平台，中间件：负责客户机与服务器、服务器与服务器间的连接和通信；实现应用与数据库的高效连接；提供一个三层结构应用的开发、运行、部署和管理的平台。,工作过程 在B/S体系结构系统中，用户通过浏览器向分布在网络上的许多服务器发出请求，服务器对浏览器的请求进行处理，将用户所需信息返回到浏览器。而其余的，如数据请求、加工、结果返回以及动态网页生成、对数据库的访问和应用程序的执行等工作全部由Web Server 完成。,当客户机通过URL向Web服务器请求下载信息时，在Web服务器上要运行嵌入在网页中的脚本程序，脚本程序通过SQL查询调用数据库服务器中存储的数据，数据库服务器执行查询操作，将结果返回到Web服务器，产生特定格式的HTML文件。这样当客户端浏览器通过URL请求信息到显示信息完毕，客户端接收到的HTML文件中的内容实际上是由数据库提供的。这样使得处理更加灵活，自由度更大。,第三章：常用Web开发技术,静态语言HTML,脚本语言JavaScript,动态网页技术asp/phpaspx/jsp,IMAGEFW PSFlashCSS+DIVAJAX等,1静态语言HTML,Hyper Text Mark-up Language,超文本标记语言，是表示网页的一种规范或者是一种标准，它通过标签来定义网页内容的显示。具有超链接功能，使各个网页之间可以相互链接起来，这样网页与网页之间的链接就构成了网站，而网站与网站的链接就构成了多彩的WWW。不需要任何专门软件来建立HTML页面，只需一个文字处理器，如记事本，或写字板等，以及HTML的工作常识。,HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部、主体两大部分。,HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入，这也是WWW盛行的原因之一,，其主要特点如下：1 简易性，HTML版本升级采用超集方式，从而更加灵活方便。2 可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。3 平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上，这也是WWW盛行的另一个原因。用什么可以编辑HTML？,HTML其实是文本，它需要浏览器的解释，HTML的编辑器大体可以分为三种，,1 基本编辑软件，使用WINDOWS自带的记事本或写字版都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样浏览器就可以解释执行了。2 半所见即所得软件，这种软件能大大提高开发效率，它可以使你在很短的时间内做出Homepage，且可以学习HTML，这种类型的软件主要有HOTDOG，还有国产的软件网页作坊。3 所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，这类软件主要有DREAMWEAVER。,更先进难懂的技术XHTML?,XHTML中的X是可扩展的意思，XHTML就是可扩展的超文本标记语言，它比HTML有更严格的要求。如果说HTML是汉语，那么XHTML就是标准普通话。对于现在才刚刚开始学习网页设计的朋友，直接学习XHTML是最佳的选择。事实上它也属于HTML家族，并且它是基于XML的，对比以前各个版本的HTML，它具有更严格的书写标准、更好的跨平台能力。由于某些需要，XHTML将以前版本的HTML能够实现的一些功能交给了CSS，这意味着你将需要学习两种技术。但是这确实是Web未来发展的潮流。,HTML元素参考手册,附件,举例演示,欢迎来到江南大学！Hello!欢迎来到江南大学！,2脚本语言JavaScriptJS,JavaScript一种描述性语言，可被嵌入HTML的文件之中。通过JavaScript可以做到响应用户的需求事件，如表单的输入。通过JavaScript，当一位使用者输入一项信息时，它不需要通过网络传送到服务器进行处理再传回结果的过程，而是可以直接在客户端进行事件的处理。JavaScript是纯面向对象式的网页式脚本语言。它除了包含像数组对象、数学对象等核心对象之外，当然也象一般语言一样包含操作数、控制流程等结构组件。,2脚本语言JavaScriptJS,JavaScript最初的确是受Java启发而开始设计的，而且设计的目的之一就是“看上去像Java”2，因此语法上有很多类似之处，许多名称和命名规范也借自Java。但是实际上，JavaScript的主要设计原则源自Self和Scheme,2脚本语言JavaScriptJS,开发工具javascript程序是纯文本的，且不需要编译，所以任何纯文本的编辑器都可以编辑javascript文件。在Dreamweaver 中不仅有很好的代码高亮，还有较全的代码提示和错误提示，相比其他编辑器来说是十分强大的。,Javascript加入网页有两种方法,1、直接加入HTML文档 这是最常用的方法，大部分含有Javascript的网页都采用这种方法，如：document.writeln(这是Javascript！采用直接插入的方法！);,Javascript加入网页有两种方法,如果已经存在一个Javascript源文件（通常以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。其基本格式如下：,3.动态网页技术ASP,Active Server Pages,活动服务器页面一个编程环境，在其中可以混合使用HTML、脚本语言、以及组件来创建服务器端的功能强大的Internet应用程序。也可通过在HTML页面中加入脚本命令来创建一个HTML用户界面，并且，还可以通过使用组件包含一些商业的逻辑规则。组件可被脚本程序调用，也可由其它的组件调用。,与HTML相比，ASP网页具有以下特点：,与HTML相比，ASP网页具有以下特点：（1）利用ASP可以实现突破静态网页的一些功能限制，实现动态网页技术；（2）ASP文件是包含在HTML代码所组成的文件中的，易于修改和测试；（3）服务器上的ASP解释程序会在服务器端执行ASP程序，并将结果以HTML格式传送到客户端浏览器上，因此使用各种浏览器都可以正常浏览ASP所产生的网页；（4）ASP提供了一些内置对象，使用这些对象可以使服务器端脚本功能更强。例如可以从web浏览器中获取用户通过HTML表单提交的信息，并在脚本中对这些信息进行处理，然后向web浏览器发送信息；,（5）ASP可以使用服务器端ActiveX组件来执行各种各样的任务，例如存取数据库、发送Email或访问文件系统等。（6）由于服务器是将ASP程序执行的结果以HTML格式传回客户端浏览器，因此使用者不会看到ASP所编写的原始程序代码，可防止ASP程序代码被窃取。(7)方便连接ACCESS与SQL数据库.(8)开发需要有丰富的经验,否则会留出漏洞,让黑客利用进行注入攻击.ASP也不仅仅局限于与HTML结合制作WEB网站，而且还可以与XHTML和WML语言结合制作WAP手机网站。但是其原理也是一样的。,ASP-工作原理,当在Web站点中融入ASP功能后，将发生以下事情：1、用户向浏览器地址栏输入网址，默认页面的扩展名是.asp。2、浏览器向服务器发出请求。3、服务器引擎开始运行ASP程序。4、ASP文件按照从上到下的顺序开始处理，执行脚本命令，执行HTML页面内容。5、页面信息发送到浏览器。,ASP-IIS的安装与配置,a.安装IIS 若操作系统中还未安装IIS服务器，可打开“控制面板”，然后单击启动“添加/删除程序”，在弹出的对话框中选择“添加/删除Windows组件”，在Windows组件向导对话框中选中“Internet信息服务（IIS）”，然后单击“下一步”，按向导指示，完成对IIS的安装 b.启动Internet信息服务（IIS）Internet信息服务简称为IIS，单击Windows开始菜单-所有程序-管理工具-Internet信息服务（IIS）管理器，即可启动“Internet信息服务”管理工具.,4.动态开发技术-ASP.net,ASP.NET的前身ASP技术ASP.net不仅仅是 Active Server Page(ASP)的下一个版本,而且是一种建立在通用语言上的程序构架，能被用于一台Web服务器来建立强大的Web应用程序。ASP.net提供许多比现在的Web开发模式强大的优势。,4.动态开发技术-ASP.net,ASP.net构架是可以用Microsoft（R）的Visual S开发环境进行开发，WYSIWYG（What You See Is What You Get所见即为所得）的编辑。这些仅是ASP.net强大化软件支持的一小部分。ASP.NET 在 2.0 版时，功能已大致底定，成为 Web 应用程序的基础架构，微软开始在 ASP.NET 2.0 上开发扩充的功能，包括 AJAX 的支持、MVC架构的支持以及更容易开发出数据库应用的架构。,PHP是一种应用广泛、功能强大的脚本语言。特点：免费高效易学易用，功能强大跨平台PHP5中对面向对象进行了重大改进,5.动态开发技术PHP,PHP的特性包括：,开放的源代码：所有的PHP源代码事实上都可以得到。PHP是免费的。php的便捷性:php十分便捷，学习简单 基于服务器端：由于PHP是运行在服务器端的脚本,可以运行在UNIX、LINUX、WINDOWS下。嵌入HTML：因为PHP可以嵌入HTML语言，所以学习起来并不困难。简单的语言：PHP坚持脚本语言为主，与Java和C+不同。效率高：PHP消耗相当少的系统资源。图像处理：用PHP动态创建图像 面向对像：在php4,php5 中，面向对象方面都有了很大的改进，现在php完全可以用来开发大型商业程序。PHP 相对于其他语言，编辑简单，实用性强，更适合初学者。,技术应用,1，伪静态 2，静态页面生成 3，数据库缓存 4，过程缓存 5，div+css w3c标准 6，大负荷 7，分布式 8，jquery框架集成 Javascrpt框架 9，flex AS10，桌面程序应用,PHP应用,1、web开发。网站：企业网站、门户网站等。SOHU、163许多大型网站选用php开发。软件：开发基于B/S结构的应用软件。如办公OA、CRM等。Google、百度、网易、新浪、搜狐、阿里巴巴、奇虎、eBay、腾讯、Yahoo、金山等的各大网站都采用了PHP开发。2、编写桌面应用程序使用 PHP-GTK 来编写这样的程序，需要安全GTK支持环境。,PHP运行环境,一 Windows/Linux系统上：1、Apache服务器的安装。2、PHP引擎的安装。3、MYSQL数据库二 Linux系统上：1、nginx。2、PHP引擎的安装。3、MYSQL数据库三 Windows系统上：1、IIS2、PHP引擎的安装。3、MYSQL数据库,Apache2.2的安装1,双击安装文件，开始安装！单击next，进行安装。,Apache2.2的安装2,填写网络名、服务名、管理员地址。选择第一项，for all user，项目为80。,Apache2.2的安装3,选择典型安装！,Apache2.2的安装4,选择典型安装！,Apache2.2的安装5,点击change选择安装路径，这里选择了D:ccopenapache22,Apache2.2的安装6,点击下一步，等待完成安装，即可。,Apache2.2的安装7,安装成功之后，可以屏幕右下角看到羽毛的图标。Apache默认的安装，在点用80端口，如果你的机器这个端口已经被点用，将无法启动。解决办法：找到apache的安装目录，打开conf/httpd.conf这个文件。用记事本打开即可，找到Listen 80 这行代码，将80改成其它端口，这里改为了：Listen 8009然后，启动Apache服务，即可。,Apache2.2的安装8,打开浏览器，输入：http:/localhost:8090看到，如下界面，到此，Apache就安装好了。,PHP5的安装1,双击安装文件。点击next,PHP5的安装2,点击，Browse选择安装路径，这里选择了d:ccopenphp5,点击next,PHP5的安装3,选择方才安装的确良Apache版本，这里是Apache2.2x Module，点击next,PHP5的安装4,这里，要选择apache安装目录下的conf文件夹，然后一路next即可完成安装。,55,PHP 常用开发工具 1,5.1 PHP 代码开发工具1.EditPlus简单阐述：速度快，支持多种语言的语法加亮，有project概念，但并不好用。无SCC（Source Code Control，源代码控制）集成，但仍是个优秀的编辑器。,56,PHP 常用开发工具 2,PHP 代码开发工具Zend Studio For Eclipse简单阐述：优秀的IDE,各个功能丰富，Zend的拳头产品，带有CVS集成，项目管理也较为丰富，是目前商业应用最广泛的开发工具之一。,57,PHP 常用开发工具 3,网页设计工具DreamWeaver简单阐述：作为网页三剑客之一的DreamWeaver，在网站的设计与开发上与FrontPage各有优缺点，界面和FrontPage虽有差别，但若对其中一个比较熟悉后，对另一个的学习就会事半功倍，这里也就不再赘述。,PHP基本语法,例子 1-1.一个介绍性的范例Example,PHP页面的解释,php页面你好！;echo 欢迎来到江南大学;?apache服务器处理页面的原理：普通的html、javascript、css代码原样输出；php代码，将由php引擎解释，最终输入html代码。一般地，apache对*.htm或者*.html文件，不作php解释，所以将原样输出。所以，在普通的.htm、.html页面中，不能写php代码。,LAMP技术,LAMP是Linux+Apache+Mysql+PHP四项技术的缩写，一组常用来搭建动态网站或者服务器的开源软件，本身都是各自独立的程序，但是因为常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台。,PHP学习大纲,熟悉HTML、CSS、Javascript，能用Photoshop或者是其他软件切图及组合成Div+Css，能做完整的网页，对网页标签、属性比较熟练 熟悉PHP的语法，能用PHP写简单的程序，或算法 能将PHP结合HTML写一些简单的页面和处理程序 了解MySQL，并对掌握常用的SQL语句的使用，了解基本的数据表设计 PHP结合MySQL独立写一个简单的CMS，或者是其他程序，在这个过程中不断的巩固PHP知识 了解一些常用的开源软件，并研究里面的功能及编码设置，熟悉其数据库设计思路及编码技巧，汲取其精华为己用 使用开源软件快速开发一些项目，逐渐的形成自己的编程思想 深入了解项目的需求分析，数据库原理及数据库设计思想 会用一些项目的辅助软件 学会使用框架进行敏捷开发 了解一些常见的服务器配置方案（Linux下和Windows下）,PHP资料,PHPChina 开源社区门户 PHP100中文网 中国PHP联盟,6.动态开发技术-JSP,JSP(Java Server Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件(*.jsp)。用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。,6.动态开发技术-JSP,JSP技术使用Java编程语言编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。,JSP可用一种简单易懂的等式表示为：HTML+Java=JSP。,JSP技术的强势,（1）一次编写，到处运行。除了系统之外，代码不用做任何更改。（2）系统的多平台支持。基本上可以在所有平台上的任意环境中开发，在任意环境中进行系统部署，在任意环境中扩展。（3）多样化和功能强大的开发工具支持。Java已经有了许多非常优秀的开发工具，而且许多可以免费得到，并且其中许多已经可以顺利的运行于多种平台之下。,JSP技术的弱势,（1）与ASP一样，Java的一些优势正是它致命的问题所在。正是由于为了跨平台的功能，为了极度的伸缩能力，所以极大的增加了产品的复杂性。（2）Java的运行速度是用class常驻内存来完成的，所以它在一些情况下所使用的内存比起用户数量来说确实是“最低性能价格比”了。从另一方面，它还需要硬盘空间来储存一系列的.java文件和.class文件，以及对应的版本文件。,JSP运行环境,Tomcat是Apache软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。由于有了Sun 的参与和支持，最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现，Tomcat 5 支持最新的Servlet 2.4 和JSP 2.0 规范。因为Tomcat 技术先进、性能稳定，而且免费，因而深受Java 爱好者的喜爱并得到了部分软件开发商的认可，成为目前比较流行的Web 应用服务器。,7.ASP/ASPX/PHP/JSP比较,1.ASP Web 市场占有率第一，简单易学，成本也不高，但代码的效率和扩展性都不好，所以主要是一些小站点 2.PHP Web 方面市场占有率第二，也比较容易学习，资源较多，Alexa前10中有近半的使用的主要Web呈现都是PHP 3.JSP Web 方面几乎没有地位，无论大站小站都几乎没有Jsp的（就算有也都转成其它的了），但在企业级开发方面占有半壁江山 4.ASP.NET Web方面比较优秀，Alexa前10有3个站点以ASP.NET为主流开发技术，在企业级开发方面与Java平分秋色，而且有着最优秀的IDE工具Visual Studio和最全面的文档库MSDN,运行环境比较,ASP-WIN2000/XP/2003/2008的IIS 数据库：ACCESS+SQLSERVERASP.net-WIN2000/XP/2003/2008的IIS 数据库：SQLSERVER+ACCESSPHPwindows+iis+mysql+PHP Linux+apache+mysql+PHPwindows+apache+mysql+PHP,主要运行环境比较,JSP windows 2000/xp/20003+jdk+Tomcat+数据库(Access+MySql+Oracle+SqlServer)LINUX+jdk+Tomcat+数据库(MySql+Oracle),开发技术其他应用,备课系统家校通成绩系统数字图书馆数字资源库视频点播学习系统,8.其他开发技术,Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。,AJAX,AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。,Ajax（Asynchronous JavaScript+XML）的定义 基于web标准（standards-based presentation）XHTML+CSS的表示；使用 DOM（Document Object Model）进行动态显示及交互；使用 XML 和 XSLT 进行数据交换及相关操作；使用 XMLHttpRequest 进行异步数据查询、检索；使用 JavaScript 将所有的东西绑定在一起。类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括：Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象，也不支持XSLT。,CSS+DIV,DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。,使用DIV+CSS布局网站的优点和缺陷,一、使页面载入得更快 由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。二、降低流量费用 页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。三、修改设计时更有效率 由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。,使用DIV+CSS布局网站的优点和缺陷,四、保持视觉的一致性 DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。五、更好地被搜索引擎收录 由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中正文部分更为突出明显，便于被搜索引擎采集收录。六、对浏览者和浏览器更具亲和力 我们都知道网站做出来是给浏览者使用的，对浏览者和浏览器更具亲和力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。,使用DIV+CSS布局网站的优点和缺陷,CSS网页布局的副作用：一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。,使用DIV+CSS布局网站的优点和缺陷,三、虽然说DIV+CSS解决了大部分浏览器兼容问题，但是也有在部分浏览器中使用出现异常，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。,使用DIV+CSS布局网站的优点和缺陷,四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。,图片处理等,Photoshop fireworks 在学习程序开发的同时，我们也应该适当的学习下网页中图片的处理，FLASH的制作等,第四章：常用Web开发工具,网站制作常用工具：Dreamweaver fireworks FLASH Photoshop 开发工具：记事本(notepad)，Dreamweaver，zend studio，Visual Studio，editplus 其他制作小工具：ColorSPY配色 ReplaceKing文本替换SwishMax等,Dreamweaver,Dreamweaver,Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。目前版本为Dreamweaver CS5,第六章：校园网站建设流程,1.网站建设的整体规划,在网站建设的全过程中，网站的整体策划及其开发是一个重要的环节，也是网站成功与否的重要因素。因为一个网站在建设前前后后要耗费大量的资金和人力，一旦在内容、主题定位有偏差，以后再想更改过来是很困难的。这是采用什么样的技术也无法弥补的。,1.网站建设的整体规划,网站的规划是对网站功能、结构、内容、外观等方面的总体规划，而整个网站的规划与建设，大致上可以分为：策划、设计、制作、运行维护四个阶段。,2、网站的初期策划,网站的主题定位网站的视觉形象网站发展的目标,3.网站内容与功能的设计,（1）网站内容的分类（2）网站内容的设计（3）网站功能的设计（4）确定分组及分组的名称（5）确定网站的风格（6）建立网站的结构层次图（7）定义导航,（1）网站内容的分类,静态内容：网站的静态内容是指网站内容中相对不变的部分，它的作用是维持整个网站的风格，给访问者一个熟悉的浏览环境。动态内容：网站的动态内容是网站中的主体部分，经常更新的内容，也是访问者主要浏览的内容，它以交互方式呈现。一般说来，新闻、评论文章、发布的各种信息、供下载的软件、书籍、音乐、图片、视频等都属于动态内容的范围。,（2）网站内容的设计,进行网站内容设计时应考虑的方面很多：及时得到用户的反馈信息，并对网站内容加以修改；随时修改和更新；网站的内容结构必须清晰；注意突出网站的形象；网页应由多种成分组成，但图像和多媒体信息的使用要适中；注意网页的结构应使用户方便浏览；在页内增加其他网站的链接；尽量增加内容精彩的文章；注意要为主页加一个描述性的标题。总之，对网站内容的设计，应尽量周密细致，做好创意。,（3）网站功能的设计,网站建设目标和网站发挥的功能是紧密相连的。不同的网站有不同的功能，如：提供各种信息库查询、咨询、服务。提供各类信息新闻发布，校园展示。提供校园在线服务信息提供各项办公事务的发布提供各功能性系统备课，成绩管理等提供各类远程教育服务等。,（4）确定分组及分组的名称,当我们已经确立了网站的目标、主题和总的功能，就可以制定、修改相应的网站功能清单。注意：每组内容和所需的功能应该一一对应。将已经分好组的内容清单和功能清单，重新交给有关人员，请他们提出修改意见，并将各组确定一个组名。然后将所有意见汇总，最终确定各个分组和分组的名称，这是作为网站主要部分的分类和分类名称的基础。,通常网站的栏目包括以下几大类：形象展示类栏目。核心服务类栏目。互动类栏目。新闻类栏目。倾斜服务类栏目。栏目的名称要简短、直接、通俗。,（5）确定网站的风格,网站风格指通过一定的颜色以及图案组合、布局安排等设计，从而体现出网站的思想和倾向，也是网站访问者直接对网站产生的感受。它包括了网站的美工设计，网站内容的感受和印象。网站的风格是由网站的内容和功能决定的，不同的网站应以不同的风格来体现。具体制作时主要有四方面工作：设置页面的布局；设置背景颜色或者图案；设置文本的颜色；设置链接点的颜色。,（6）建立网站的结构层次图,网站的结构层次图是一种有关网站结构、组织方式的示意图。各主要内容或题目的详细内容将被列在其下的副标题中。当访问者点击标题、题目或副标题时，相应的网页就会出现在屏幕当中。以这种方式组织起来的信息可以使访问者迅速找到所需信息的位置。,（7）定义导航,导航系统主要由以下几种方式构成：导航栏目（导航条）小型导航条（局部导航）导航目录（站点地图）,三网站结构的设计,网站的结构可以分为网站的物理结构和逻辑结构。网站的物理结构是指网站文件的物理存储结构，也就是网站文件在服务器上的存储方式。网站的逻辑结构是网站在运行时抽象出来的拓扑结构，它是建立在物理结构之上的。,1网站的物理结构,网站的物理结构体现为网站在服务器上的目录结构。通常网站的物理结构不应太复杂，层次也不应太多，应根据网站文件的功能、地位和大致的逻辑结构来建立树状的目录结构。目录结构的好坏对于站点的维护、内容的更新、未来的扩充和移植有着重要的影响。,应注意的事项有：不要将所有的文件放在根目录下。按栏目内容建立子目录。在每一个主目录下建立独立的images目录。目录的层次不可太深，一般3层以内。全局的资源应该放在根目录下的 Global目录中。不要使用中文目录。不要使用过长的目录名。尽量使用意义明确的目录名及文件名。,2网站的逻辑结构,网站的逻辑结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上，但可以跨越目录结构，即它是超链接方式。一般超链接结构有3种方式：树状结构；星状结构；混合链接结构。,四网站建设的技术实现,1域名选择 2.网站硬件、软件平台的选择 3网站应用软件开发工具的选择,1域名的注册,COMCN其他,2.网站硬件、软件平台的选择,（1）网站的组成 从逻辑上看，一个网站至少包含计算机、网络接入设备、操作系统、WWW服务器、主页面信息，这是构成网站的最小配置。对于大型网站，还可以包括局域网、大型存储设备、数据库存储检索系统、Mail服务器、FTP服务器、应用服务器、控制系统、群集系统、安全系统、备份系统以及研发维护系统等等。选择接入方式和接入设备,系统软件的选择：系统软件包括网络操作系统、Web服务器软件、后端数据库软件。网络操作系统有Windows2003/2008、Unix、Linux；Web服务器软件有微软公司的IIS、Apache，TOMCAT；数据库软件有SQL、MySQL、MSSQL等。,3网站应用软件开发工具的选择,ASPPHPASP.NETJSPHTML,五网站技术人员的构成,根据网站规模的不同，相应需要的组成人员也不同,六网站制作过程,资料的收集、静态页面的设计制作、图片设计、程序开发以及信息采集等工作,七网站的维护,在网站开发过程中，不要认为一旦网站投入运行，网站的建设工作就已经完成。我们只能说网站已投入运行，而永远不能说它已被完全建好。网站不同于其它媒体，网站可持续的时间是不确定的，随着时间的推移，它们所使用的开发工具、技术都有待更新。我们需要制定网站维护的工作计划，这包括在服务器系统推出新的数据时检查网站的所有页面；还包括在网站的搜索引擎上进行