web前端开发技术与实践-多媒体章开发工具.pptx

Web前端开发技术与实践第2章：开发工具阮晓龙/河南中医学院管理信息工程学科河南中医学院网络信息中心2015.91

本章主要内容开发工具综述原型设计工具开发工具调试工具代码托管工具项目管理系统2

1.开发工具综述Web前端开发工具根据开发的阶段和用途不同，可分为:Web设计工具Web开发工具Web管理与维护工具Web调试工具3

4

2.原型设计工具原型设计是将页面的模块、元素、人机、交互的形式，利用线框描述的方法，将功能更加具体、生动的进行表达。原型划可分为以下3种类型：纸原型：画在文档纸、白板上的设计原型、示意图，便于修改和绘制，不便于保存和展示。低保真原型：基于现有的界面或系统，通过电脑进行一些加工后的设计稿，示意更加明确，能够包含设计的交互和反馈，但在美观、效果等方面欠佳。高保真原型：包括产品演示Demo或概念设计展示，视觉上与实际产品等效，体验上也与真实产品接近。52.1什么是原型设计

6原型设计的传统流程

2.原型设计工具简介Axure是目前最受关注的原型设计工具，可以通过组件的方式帮助网站或软件设计师快速建立带有注释的原型，并凭借自定义的可重用元件、动态面板以及丰富的脚本建立能够展示基本功能或页面逻辑的动态演示文件。Axure借鉴Office的界面，为用户提供了丰富的组件样式，通过该工具能够创建低保真、高保真甚至接近于实际效果的界面。72.2原型设计工具-AxureRP

2.原型设计工具主要特点快速建构概念原型利用Axure几何形状、文字物件等可快速建立逼真的网站或APP原型。建立格线系统，精确实现汇入图片、建立色块、改变物件形状和半透明填色等各种视觉表现的概念。呈现逼真互动效果提供下拉选单、动态内容、状况逻辑设定、计算、动态Hide/ShowLayer效果等互动物件与功能。模拟AJAX/Flash动态效果，可以为客户提供一个真实网站的意象。82.2原型设计工具-AxureRP

9现场演示：在Windows7系统平台上安装AxureRPPro7.0。AxureRP软件界面和基本使用方法。使用AxureRP实现百度登录页（或其他页面）的原型设计。

3.开发工具开发工具的作用：用于对HTML、CSS和JavaScript程序的编写。将设计好的信息更好地呈现出来。目前基本上所有的软件开发IDE工具，均能够较好的支持Web前端开发的需求。103.1开发工具的作用

3.开发工具简介AdobeDreamweaver是第一个针对专业网页设计师特别发展的视觉化网页开发工具，可用于设计并部署极具吸引力的网站和Web应用程序。利用Dreamweaver可以轻而易举地制作出跨越平台限制和跨越浏览器限制的网页，并提供强大的编码环境及基于标准的WYSIWYG（所见即所得）设计界面。113.2网站开发工具-AdobeDreamweaver

3.开发工具主要特点最佳的制作效率：用最快速的方式将Fireworks或Photoshop等文件移至网页上，且使用检色吸管工具选择显示器上的颜色可设定最接近的网页安全色。网站管理：网站地图可快速制作网站雏形、设计、更新和重组网页。无可比拟的控制能力：该软件是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。所见即所得：整合动态式出版视觉编辑及电子商务功能，用户不需要透过浏览器就能预览网页。样板和XML：将内容与设计分开，应用于快速网页更新和团队合作网页编辑。123.2网站开发工具-AdobeDreamweaver

13现场演示：在Windows7系统平台上的安装AdobeDreamweaverCS6。AdobeDreamweaverCS6的软件界面和基本操作方法。创建站点。创建网页。

3.开发工具简介NetBeans是一个为软件开发者而设计的自由、开放的IDE（集成开发环境），包括建立桌面应用、企业级应用、Web开发和Java移动应用程序开发、C/C++，甚至Ruby。NetBeans可以帮助开发人员编写、编译、调试和部署Java应用，并将版本控制和XML编辑融入其众多功能之中。NetBeans可以非常方便的安装于多种操作系统平台，包括Windows、Linux、MacOS和Solaris等操作系统。143.3网站开发工具-OracleNetbeans

3.开发工具主要特点功能全面的Web应用开发环境：开发者可通过页面检查、CSS样式编辑器和JavaScript编辑器、调试器等工具来提升开发效率。NetBeansHTTP监视器：开发者可以通过HTTP监视器来监视请求、HTTPheader、cookies、会话、servlet上下文及客户端/服务器端参数，并将其输出到一个日志中进行查看。代码自动完成：在NetBeans使用中，可以