《web开发案例ch》PPT课件.ppt

第1页,课程介绍,1 课程性质 WEB开发案例是计算机科学与技术专业的集中实践教学课。 本课程是学生学习完WEB编程基础课程后，进行的一次全面的综合训练。,第2页,课程介绍,2 课程目标 强化下述几方面的能力 平面设计能力：包括设计与网站风格统一的网页广告、网页效果图等； 网页制作能力：包括网页效果图的切分，网页的访问效率控制，网站目录控制，网页架构和布局，W3C网页标准，网页前端的后期维护； 交互设计能力：包括网页与用户的交互，网页展现的特效，后台数据的前台展现，网页交互的效率。,第3页,课程介绍,4 课程内容,第1章,第2章,第3章,第4章,第5章,第4页,课程介绍,5 考核方式 总评成绩=期末成绩（85%）+平时成绩（15%） 平时成绩=实验1（5%）+实验2（5%）+实验3（5%） 期末成绩=报告1（25%）+报告2（25%）+报告3（25%）+答辩成绩（10%）,第5页,课程介绍,6 主要工具 dreamweaver cs3 photoshop cs3 firefox 3.5 IETester IIS 服务器,第6页,课程介绍,7 本课程推荐参考书 1王成良主编.web开发技术及其应用.北京：清华大学出版社 2(美)Jason Cranford Teague著，李静等译. CSS、DHTML和Ajax快速上手.北京：机械工业出版社 3顾正刚主编. 网站规划与建设.北京：机械工业出版社 4徐敏，韩宝玉，刘改主编. 网站前台设计项目实战.北京：北京理工大学出版社 5 相关网站（自己查：素材，模板，技术）,第7页,课程介绍,8 学习方式 第3，4，5章分项目组学习（3人） 以自主学习为主 上机作业提交（电子稿或打印稿） 关注网络课程中的要求 内网：10.0.0.15 外网：220.189.219.20,第8页,第一章 WEB项目开发过程,教学目的要求 理解WEB应用程序 理解WEB项目开发团队组成、岗位分布及职责 掌握WEB开发的流程 掌握WEB编码规范 分析掌握网站规划书 的编写,第9页,1.1 WEB应用程序概述,WEB应用程序的基本架构 一个网站或一个虚拟目录可以看作一个Web应用程序。Web应用程序的开发技术主要是两个方面，客户端开发技术和服务器端开发技术。,第10页,1.2 Web开发团队结构示意图,开发大型基于Web的系统需要有一个具有不同技能、知识和能力的人组成的团队。参加开发Web应用系统的人员分为七类,领导层人物,前期,中期,后期,第11页,1.3 WEB项目开发过程,网站开发流程,前端开发,后台开发,在项目开始实施之前应该有一个工作步骤，即工作流程,第12页,1.3 WEB项目开发过程,Web工程过程 Web项目开发过程也称Web工程，该过程活动贯穿Web生命周期，从应用概念的生成到开发、发布、不断的优化和完善。,第13页,1.3 WEB项目开发过程,Yogesh Deshpande和Steve Hansen（澳大利亚）在1998年提出了Web工程的概念. 使用一个过程和系统的方法来开发高质量的基于Web的系统. Web工程与传统的软件工程的主要区别： （1）大部分基于Web的系统强调的是信息的含量,是面向文档的,包含静态或动态网页；传统软件工程强调的是系统功能的完善, 一些数据交互功能，是面向功能的.,第14页,1.3 WEB项目开发过程,（2）基于Web的系统关注视觉和感觉,强调感官舒服.虽然软件界面设计也逐渐纳入了软件工程的研究领域,但与基于Web的应用系统相比,传统的软件界面是以“简单为美“的原则,而基于Web的应用系统则在多种程度上与多媒体结合,强调颜色搭配、动画飞扬.,第15页,1.3 WEB项目开发过程,（3）大多数基于Web的系统是内容驱动的,通常,基于Web的系统开发还包括内容提交的开发.而传统的软件开发是功能驱动的或过程驱动的. （4）用户形式的多样性.大多数基于Web的系统必须迎合具有不同技术和能力的用户,复杂化人机接口、用户界面和信息递交.而传统的软件系统的用户群体是可以圈定在某个范围之内的,可以根据这个群体定制用户界面和人机接口.,第16页,1.3 WEB项目开发过程,（5）大多数基于Web的系统必须在短期内开发完成.所以,Web工程很难应用传统软件工程中使用的形式化方法和测试技术. （6）Web比通常意义上的软件开发使艺术、技术和科学在更大范围内结合.开发基于Web的系统的人员在技能、知识方面比传统的软件开发所需要的更加广泛,人员类型更多.,第17页,1.3 WEB项目开发过程,1.3.1 Web分析需求分析 需求分析是指理解用户需求，就软件功能与客户达成一致，估计软件风险和评估项目代价，最终形成开发计划的一个复杂过程。 需求分析的任务 解决“做什么“的问题,就是要全面地理解用户的各项要求,并准确地表达所接受的用户需求.,第18页,1.3 WEB项目开发过程,需求分析阶段的工作,可以分为四个方面: 问题识别 从系统角度来理解软件,确定对所开发系统的综合要求,并提出这些需求的实现条件,以及需求应该达到的标准. 包括：功能需求(做什么)； 性能需求(要达到什么指标)； 环境需求(如机型,操作系统等)； 可靠性需求(不发生故障的概率）； 安全保密需求； 用户界面需求； 资源使用需求(软件运行是所需的内存,CPU等)； 软件成本消耗与开发进度需求； 预先估计以后系统可能达到的目标.,第19页,1.3 WEB项目开发过程,分析与综合 逐步细化所有的软件功能,找出系统各元素间的联系,接口特性和设计上的限制,分析他们是否满足需求,剔除不合理部分,增加需要部分.最后,综合成系统的解决方案。,第20页,1.3 WEB项目开发过程,制订规格说明书 即编制文档,描述需求的文档称为软件需求规格说明书.请注意,需求分析阶段的成果是需求规格说明书(好象软考曾经考过这个问题),向下一阶段提交. 评审 对功能的正确性,完整性和清晰性,以及其它需求给予评价.评审通过才可进行下一阶段的工作,否则重新进行需求分析。,第21页,1.3 WEB项目开发过程,1.3.2 Web设计 网站结构网站CI形象设计（标志、色彩、色系、字体等）网站布局,第22页,1.3 WEB项目开发过程,1.3.3 Web开发 （1）分析拆分效果图、记录颜色、尺寸、及图片大小 （2）绘制HTML页面布局结构图 （3）编写页面DIV结构代码 （4）编写页面CSS代码,第23页,1.3 WEB项目开发过程,1.3.4 Web测试 （1）功能测试 链接测试 表单测试 Cookies测试 设计语言测试 哪种版本的 HTML 等。不同的脚本语言，例如 Java 、 Javascrpt 、 ActiveX 、 VBscrpt 或 Perl 等也要进行验证。 数据库测试,第24页,1.3 WEB项目开发过程,（2）性能测试 连接速度测试 负载测试 压力测试 （3）可用性测试 导航测试 图形测试 内容测试 整体界面测试,第25页,1.3 WEB项目开发过程,（4）客户端兼容性测试 平台测试 市场上有很多不同的操作系统类型，最常见的有 Windows 、 Unix 、 Macintosh 、 Linux 等。 在 Web 系统发布之前，需要在各种操作系统下对 Web 系统进行兼容性测试。 浏览器测试,第26页,1.3 WEB项目开发过程,（5）安全性测试 登陆测试 Web 应用系统是否有超时的限制，也就是说，用户登陆后在一定时间内（例如 15 分钟）没有点击任何页面，是否需要重新登陆才能正常使用。,第27页,1.3 WEB项目开发过程,1.3.5 Web发布 Web发布阶段主要是把开发完成，经过初步测试的Web应用系统传送到Web站点上，供用户浏览和使用。 1.3.6 Web更新、支持和管理 Web系统是需要经常更新的。这种更新包括细微的变化到大规模的变化，可以是页面内容的刷新、也可以是整个页面结构框架的更新(例如：整个主页结构的变化、增加或变更一个栏目).,第28页,1.4 WEB编码规范,（1）XHTML规范 （2）CSS规范 （3）JS规范,第29页,1.4 WEB编码规范,（1）XHTML规范 在 HTML 中，所有的元素必须彼此正确地嵌套 This text is bold and italic XHTML 元素必须被关闭 This is a paragraph 空标签也必须使用结束标签，或者其开始标签必须使用/结尾，。 元素必须小写 XHTML 规范定义：标签名和属性对大小写敏感。 This is a paragraph XHTML 文档必须拥有一个根元素 所有的 XHTML 元素必须被嵌套于 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下： . . ,第30页,1.4 WEB编码规范,（2）CSS规范 文件命名规范 全局样式：global.css； 框架布局：layout.css； 字体样式：font.css； 链接样式：link.css； 打印样式：print.css；,第31页,1.4 WEB编码规范,常用类/ID命名规范 页 眉：header 内 容：content 容 器：container 页 脚：footer 版 权：copyright 导 航：menu 主导航：mainMenu 子导航：subMenu 标 志：logo 标 语：banner 标 题：title 侧边栏：sidebar 图 标：Icon 注 释：note 搜 索：search 按 钮：btn 登 录：login 链 接：link 信息框：manage ,第32页,1.4 WEB编码规范,文档的结构化书写 页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如： 首页 介绍 服务 ,第33页,1.4 WEB编码规范,行间注释 直接写于属性值后面，如： .search border:1px solid #fff;/*定义搜索输入框边框*/ background:url(/images/icon.gif) no-report #333;/*定义搜索框的背景*/ 整段注释 分别在开始及结束地方加入注释，如： /*=搜索条=*/ .search border:1px solid #fff; background:url(/images/icon.gif) no-repeat #333; /*=搜索条结束=*/,第34页,1.4 WEB编码规范,（3）JavaScript规范 一个程序可能会被许多人阅读或修改。所有的 JavaScript 代码都是暴露给公众的。应该保证其质量。保持整洁很重要。 JavaScript文件 缩进 每行长度 避免每行超过 80 个字符。 注释 变量声明，命名 语句 空白 用空行来将逻辑相关的代码块分割开可以提高程序的可读性。空格应在以下情况时使用：,第35页,1.5 网站规划书,（1）建设网站前的市场分析 相关行业的市场是怎样的，市场有什么样的特点，是否能够在互联网上开展公司业务。 市场主要竞争者分析，竞争对手上网情况及其网站规划、功能作用。 公司自身条件分析、公司概况、市场优势，可以利用网站提升哪些竞争力，建设网站的能力(费用、技术、人力等)。,第36页,1.5 网站规划书,（2）建设网站目的及功能定位 为什么要建立网站，是为了宣传产品，进行电子商务，还是建立行业性网站?是企业的需要还是市场开拓的延伸? 整合公司资源，确定网站功能。根据公司的需要和计划，确定网站的功能：产品宣传型、网上营销型、客户服务型、电子商务型等。 根据网站功能，确定网站应达到的目的作用。 企业内部网(Intranet)的建设情况和网站的可扩展性。,第37页,1.5 网站规划书,（3）网站技术解决方案 根据网站的功能确定网站技术解决方案。 采用自建服务器，还是租用虚拟主机。 选择操作系统，用unix，Linux还是Window2000/NT。分析投入成本、功能、开发、稳定性和安全性等。 采用系统性的解决方案(如IBM，HP)等公司提供的企业上网方案、电子商务解决方案?还是自己开发。 网站安全性措施，防黑、防病毒方案。 相关程序开发。如网页程序ASP、JSP、CGI、数据库程序等。,第38页,1.5 网站规划书,（4）网站内容规划 根据网站的目的和功能规划网站内容，一般企业网站应包括：公司简介、产品介绍、服务内容、价格信息、联系方式、网上定单等基本内容。 电子商务类网站要提供会员注册、详细的商品服务信息、信息搜索查询、定单确认、付款、个人信息保密措施、相关帮助等。 如果网站栏目比较多，则考虑采用网站编程专人负责相关内容。 注意：网站内容是网站吸引浏览者最重要的因素,第39页,1.5 网站规划书,（5）网页设计 网页设计美术设计要求，网页美术设计一般要与企业整体形象一致，要符合CI规范。要注意网页色彩、图片的应用及版面规划，保持网页的整体一致性。 在新技术的采用上要考虑主要目标访问群体的分布地域、年龄阶层、网络速度、阅读习惯等。 制定网页改版计划，如半年到一年时间进行较大规模改版等。,第40页,1.5 网站规划书,（6）网站维护 服务器及相关软硬件的维护，对可能出现的问题进行评估，制定响应时间。 数据库维护，有效地利用数据是网站维护的重要内容，因此数据库的维护要受到重视。 内容的更新、调整等。 制定相关网站维护的规定，将网站维护制度化、规范化。,第4