第1章 WEB项目开发过程

1Web项目开发过程《Web案例开发》第1章2课程介绍1课程性质《Web基础综合课程设计》是计算机科学与技术专业的集中实践教学项目，本课程是学生学习完《Web编程基础》课程后，进行的一次全面的综合训练。3课程介绍2先修及后续课程先修课程：web编程基础、程序设计综合课程设计预修知识建议：平面与动画设计工具（进一步深入学习）后续课程：Web数据库应用程序开发相关课程4课程介绍3总体目标：通过本课程的学习，学生将掌握相关Web产品的界面设计，制作标准优化的代码，增加交互动态功能，改善用户体验等Web前端综合开发技术，培养学生基于Web工程的程序设计开发思想，使学生初步具备Web前端开发一线工程师应有的知识、能力与基本职业素养，同时为学生进一步学习Web数据库应用程序开发打好基础。5课程介绍4能力目标：通过本课程的教学，使学生具有以下几个方面的能力：（１）初步平面设计能力：包括设计与网站风格统一的网页广告、网页效果图等；（２）网页制作能力：包括网页效果图的切分，网页的访问效率控制，网站目录控制，网页架构和布局，W3C网页标准，网页前端的后期维护；（３）交互设计能力：包括网页与用户的交互，网页展现的特效，后台数据的前台展现，网页交互的效率。6课程介绍5课程内容第1章第2章第3章第4章第5章7课程介绍6教学方法设计1）以学生为主体，采用项目教学，由3位学生组成开发小组，分三个不同岗位针对不同案例，指定某一岗位作为组长（或负责人），轮流换岗，轮值项目负责人，明确分工、团结合作，模拟项目开发流程，依据开发环节进行岗位任务分解，并在各个开发环节撰写开发文档，最终形成课程设计报告。要求：在开学前两周，完成分组，每组2-3人，并由课代表将分组情况上报给任课教师。8课程介绍（2）答辩部分以“开发小组”为单位自愿申请，在每个案例结题后一周内向任课教师申请答辩，每次申请组数不超过总数的1/3；如果“组数”超过，以申请时间为准，进行资格审查。9课程介绍7考核方式采取平时成绩与期末考试相结合的方法。总成绩（100%）=平时成绩（15%）+期末成绩（85%）平时成绩=实验1（5%）+实验2（5%）+实验3（5%）期末成绩（85%）=答辩（10%）+报告1（25%）+报告2（25%）+报告3（25%）10课程介绍8主要工具dreamweavercs3photoshopcs3firefox3.5IETesterIIS服务器11课程介绍9本课程推荐参考书1．王成良主编.web开发技术及其应用.北京：清华大学出版社2．(美)JasonCranfordTeague著，李静等译.CSS、DHTML和Ajax快速上手.北京：机械工业出版社3．顾正刚主编.网站规划与建设.北京：机械工业出版社4．徐敏，韩宝玉，刘改主编.网站前台设计项目实战.北京：北京理工大学出版社5．相关网站（自己查：素材，模板，技术）12课程介绍10学习方式第3，4，5章分项目组学习（2-3人）以自主学习为主上机作业提交（电子稿或打印稿）关注网络课程中的要求内网：10.0.0.15外网：220.189.219.2013第一章WEB项目开发过程教学目的要求理解WEB应用程序理解WEB项目开发团队组成、岗位分布及职责掌握WEB开发的流程掌握WEB编码规范分析掌握网站规划书的编写141.1WEB应用程序概述WEB应用程序的基本架构一个网站或一个虚拟目录可以看作一个Web应用程序。Web应用程序的开发技术主要是两个方面，客户端开发技术和服务器端开发技术。151.2Web开发团队结构示意图开发大型基于Web的系统需要有一个具有不同技能、知识和能力的人组成的团队。参加开发Web应用系统的人员分为七类领导层人物前期中期后期161.3WEB项目开发过程网站开发流程前端开发后台开发在项目开始实施之前应该有一个工作步骤，即工作流程171.3WEB项目开发过程Web工程过程Web项目开发过程也称Web工程，该过程活动贯穿Web生命周期，从应用概念的生成到开发、发布、不断的优化和完善。181.3WEB项目开发过程YogeshDeshpande和SteveHansen（澳大利亚）在1998年提出了Web工程的概念.使用一个过程和系统的方法来开发高质量的基于Web的系统.Web工程与传统的软件工程的主要区别：（1）大部分基于Web的系统强调的是信息的含量,是面向文档的,包含静态或动态网页；传统软件工程强调的是系统功能的完善,一些数据交互功能，是面向功能的.191.3WEB项目开发过程（2）基于Web的系统关注视觉和感觉,强调感官舒服.虽然软件界面设计也逐渐纳入了软件工程的研究领域,但与基于Web的应用系统相比,传统的软件界面是以简单为美的原则,而基于Web的应用系统则在多种程度上与多媒体结合,强调颜色搭配、动画飞扬.201.3WEB项目开发过程（3）大多数基于Web的系统是内容驱动的,通常,基于Web的系统开发还包括内容提交的开发.而传统的软件开发是功能驱动的或过程驱动的.（4）用户形式的多样性.大多数基于Web的系统必须迎合具有不同技术和能力的用户,复杂化人机接口、用户界面和信息递交.而传统的软件系统的用户群体是可以圈定在某个范围之内的,可以根据这个群体定制用户界面和人机接口.211.3WEB项目开发过程（5）大多数基于Web的系统必须在短期内开发完成.所以,Web工程很难应用传统软件工程中使用的形式化方法和测试技术.（6）Web比通常意义上的软件开发使艺术、技术和科学在更大范围内结合.开发基于Web的系统的人员在技能、知识方面比传统的软件开发所需要的更加广泛,人员类型更多.221.3WEB项目开发过程1.3.1Web分析——需求分析需求分析是指理解用户需求，就软件功能与客户达成一致，估计软件风险和评估项目代价，最终形成开发计划的一个复杂过程。需求分析的任务解决做什么的问题,就是要全面地理解用户的各项要求,并准确地表达所接受的用户需求.231.3WEB项目开发过程需求分析阶段的工作,可以分为四个方面:问题识别从系统角度来理解软件,确定对所开发系统的综合要求,并提出这些需求的实现条件,以及需求应该达到的标准.包括：功能需求(做什么)；性能需求(要达到什么指标)；环境需求(如机型,操作系统等)；可靠性需求(不发生故障的概率）；安全保密需求；用户界面需求；资源使用需求(软件运行是所需的内存,CPU等)；软件成本消耗与开发进度需求；预先估计以后系统可能达到的目标.241.3WEB项目开发过程分析与综合逐步细化所有的软件功能,找出系统各元素间的联系,接口特性和设计上的限制,分析他们是否满足需求,剔除不合理部分,增加需要部分.最后,综合成系统的解决方案。251.3WEB项目开发过程制订规格说明书即编制文档,描述需求的文档称为软件需求规格说明书.请注意,需求分析阶段的成果是需求规格说明书(好象软考曾经考过这个问题),向下一阶段提交.评审对功能的正确性,完整性和清晰性,以及其它需求给予评价.评审通过才可进行下一阶段的工作,否则重新进行需求分析。261.3WEB项目开发过程1.3.2Web设计网站结构—（标志、色彩、色系、字体等）——网站布局271.3WEB项目开发过程1.3.3Web开发（1）分析拆分效果图、记录颜色、尺寸、及图片大小（2）绘制HTML页面布局结构图（3）编写页面DIV结构代码（4）编写页面CSS代码281.3WEB项目开发过程1.3.4Web测试（1）功能测试链接测试表单测试Cookies测试设计语言测试哪种版本的HTML等。不同的脚本语言，例如Java、Javascrīpt、ActiveX、VBscrīpt或Perl等也要进行验证。数据库测试291.3WEB项目开发过程（2）性能测试连接速度测试负载测试压力测试（3）可用性测试导航测试图形测试内容测试整体界面测试301.3WEB项目开发过程（4）客户端兼容性测试平台测试市场上有很多不同的操作系统类型，最常见的有Windows、Unix、Macintosh、Linux等。在Web系统发布之前，需要在各种操作系统下对Web系统进行兼容性测试。浏览器测试311.3WEB项目开发过程（5）安全性测试登陆测试Web应用系统是否有超时的限制，也就是说，用户登陆后在一定时间内（例如15分钟）没有点击任何页面，是否需要重新登陆才能正常使用。321.3WEB项目开发过程1.3.5Web发布Web发布阶段主要是把开发完成，经过初步测试的Web应用系统传送到Web站点上，供用户浏览和使用。1.3.6Web更新、支持和管理Web系统是需要经常更新的。这种更新包括细微的变化到大规模的变化，可以是页面内容的刷新、也可以是整个页面结构框架的更新(例如：整个主页结构的变化、增加或变更一个栏目).331.4WEB编码规范（1）XHTML规范（2）CSS规范（3）JS规范341.4WEB编码规范（1）XHTML规范在HTML中，所有的元素必须彼此正确地嵌套biThistextisboldanditalic/i/bXHTML元素必须被关闭pThisisaparagraph/p空标签也必须使用结束标签，或者其开始标签必须使用/结尾，br/，hr/。元素必须小写XHTML规范定义：标签名和属性对大小写敏感。pThisisaparagraph/pXHTML文档必须拥有一个根元素所有的XHTML元素必须被嵌套于html根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下：htmlhead.../headbody.../body/html351.4WEB编码规范（2）CSS规范文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；361.4WEB编码规范常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link信息框：manage……371.4WEB编码规范文档的结构化书写页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：divid=”mainMenu”ulliahref=”#”首页/a/liliahref=”#”介绍/a/liliahref=”#”服务/a/li/ul/div381.4WEB编码规范行间注释直接写于属性值后面，如：.search{border:1pxsolid#fff;/*定义搜索输入框边框*/background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/}整段注释分别在开始及结束地方加入注释，如：/*===搜索条===*/.search{border:1pxsolid#fff;background:url(../images/icon.gif)no-repeat#333;}/*===搜索条结束===*/391.4WEB编码规范（3）JavaScript规范一个程序可能会被许多人阅读或修改。所有的JavaScript代码都是暴露给公众的。应该保证其质量。保持整洁很重要。JavaScript文件缩进每行长度避免每行超过80个字符。注释变量声明，命名语句空白用空行来将逻辑相关的代码块分割开可以提高程序的可读性。空格应在以下情况时使用：401.5网站规划书（1）建设网站前的市场分析相关行业的市场是怎样的，市场有什么样的特点，是否能够在互联网上开展公司业务。市场主要竞争者分析，竞争对手上网情况及其网站规划、功能作用。公司自身条件分析、公司概况、市场优势，可以利用网站提