《Web前端开发》课程理论教学部分 第三讲:Web开发工具 学时计划:2学时理论,1学时实验 (实验一:Web开发与测试工具的使用) 教学大纲: 1、开发工具概述 2、Web设计工具 3、Web开发工具 4、Web升级与管理工具 5、Web开发的基本流程 6、Web学习资源和学习建议 7、现场演示 8、讨论与思考 本讲主要介绍在Web开发中经常使用的工具软件,并介绍Web开 发的基本流程,帮助读者更好地参与到Web开发的具体工作中,并培 养团队合作意识。 最后,对Web开发的初学者推荐部分学习书籍、学习资源,并对 学习提出了一些建议。 开发工具综述 Web前端开发涉及的内容很多,也很宽泛,在每个层面上都有相 应的工具。中国自古有句话“工欲善其事,必先利其器”,选择合适 的开发工具,能够帮助读者更快速、更高效的学习、实施Web前端开 发 Web前端开发工具根据开发的阶段和用途不同,基本上可以分为 四类:Web设计工具、Web开发工具、Web升级管理与维护工具、Web 开发的SDK类资源。 Web前端的开发工具虽然具有IDE的基本特征,在很多地方也将 这些开发工具称为Web开发的IDE工具,但是我个人并不赞同这些观 1《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs.51xuewebcn
1 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 《Web 前端开发》课程理论教学部分 第三讲：Web 开发工具 学时计划：2 学时 理论，1 学时 实验 （实验一：Web 开发与测试工具的使用） 教学大纲： 1、开发工具概述 2、Web 设计工具 3、Web 开发工具 4、Web 升级与管理工具 5、Web 开发的基本流程 6、Web 学习资源和学习建议 7、现场演示 8、讨论与思考 本讲主要介绍在 Web 开发中经常使用的工具软件，并介绍 Web 开 发的基本流程，帮助读者更好地参与到 Web 开发的具体工作中，并培 养团队合作意识。 最后，对 Web 开发的初学者推荐部分学习书籍、学习资源，并对 学习提出了一些建议。 一、开发工具综述 Web 前端开发涉及的内容很多，也很宽泛，在每个层面上都有相 应的工具。中国自古有句话“工欲善其事，必先利其器”，选择合适 的开发工具，能够帮助读者更快速、更高效的学习、实施 Web 前端开 发。 Web 前端开发工具根据开发的阶段和用途不同，基本上可以分为 四类：Web 设计工具、Web 开发工具、Web 升级管理与维护工具、Web 开发的 SDK 类资源。 Web 前端的开发工具虽然具有 IDE 的基本特征，在很多地方也将 这些开发工具称为 Web 开发的 IDE 工具，但是我个人并不赞同这些观
点 Web设计工具 Web设计工具主要用于进行Web平面设计、3D设计、原型设计 Web设计工具并不是专业的设计工具,而是数字设计工具在Web上的 应用。因此,Web设计工具所介绍的工具软件是通用的设计软件,只 是进行Web设计时常用的工具。 2.1Web设计工具 (1) Adobe Photoshop 软件介绍 Photoshop是 Adobe公司旗下最为出名的图像处理软件之一。它 除了是一个很好的图像编辑软件外,还广泛应用在图像、图形、文字 视频、出版各方面。 支持平台: Windows、MAC 相关链接: Adobe Photoshop学习入门 http://www.adobe.com/support/photoshop/gettingstarted/index.html Photoshop官方网站 http://www.adobe.com/photoshop (2)Adobe Fireworks 软件介绍 Fireworks是 Adobe推出的一款网页作图软件。它可以加速Web 设计与开发,是一款创建与优化Web图像和快速构建网站与Web界面 原型的理想工具。特别是在制作GIF动画方面,有着出色的表现。 支持平台 Windows、MAC 相关链接 Fireworks官方网站 http://www.adobe.com/fireworks 2《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
2 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 点。 二、Web 设计工具 Web 设计工具主要用于进行 Web 平面设计、3D 设计、原型设计。 Web 设计工具并不是专业的设计工具，而是数字设计工具在 Web 上的 应用。因此，Web 设计工具所介绍的工具软件是通用的设计软件，只 是进行 Web 设计时常用的工具。 2.1Web 设计工具 （1）Adobe Photoshop 软件介绍： Photoshop 是 Adobe 公司旗下最为出名的图像处理软件之一。它 除了是一个很好的图像编辑软件外，还广泛应用在图像、图形、文字、 视频、出版各方面。 支持平台： Windows、MAC 相关链接： Adobe Photoshop 学习入门： http://www.adobe.com/support/photoshop/gettingstarted/index.html Photoshop 官方网站： http://www.adobe.com/Photoshop （2）Adobe Fireworks 软件介绍： Fireworks 是 Adobe 推出的一款网页作图软件。它可以加速 Web 设计与开发，是一款创建与优化 Web 图像和快速构建网站与 Web 界面 原型的理想工具。特别是在制作 GIF 动画方面，有着出色的表现。 支持平台： Windows、MAC 相关链接 Fireworks 官方网站： http://www.adobe.com/fireworks
(3) Adobe Illstrator 软件介绍: Adobe illustrator软件可以帮助您为任何项目创建独具匠心的 矢量图稿。软件通过精良的绘图工具、具有表现力的自然画笔、各种 省时功能提供精准度和强大功能,为全球设计专业人士所青睐。 Illustrator是出版、多媒体和在线图像的工业标准矢量插画软 件。无论是生产印刷出版线稿的设计者和专业插画家、生产多媒体图 像的艺术家、还是互联网页或在线内容的制作者,都会发现 I1 Lustrator不仅仅是一个艺术产品工具。该软件为您的线稿提供无 与伦比的精度和控制,适合生产任何小型设计到大型的复杂项目。 支持平台 Windows、MAC 相关链接 Illustrator官方网站 http://www.adobe.com/illustrator (4) Microsoft Expression Design 软件介绍 Expression Design is a tool for creative professionals and developers who want to build graphics for application user interfaces, the web, or any other medium 支持平台: Windows XP、 Windows vista、 Windows7 相关链接 官方网站: http://www.microsoft.com/expression/#design (5) 3D Studio MAX 软件介绍: 3 Studio max,常简称为3 ds max或MAX,是 Autodesk公司开 发的基于PC系统的三维动画渲染和制作软件。其前身是基于DOS操 作系统的3 D Studio系列软件,最新版本是2011。3 ds max广泛应用 3《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ bs. 51xueweb cn
3 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn （3）Adobe Illstrator 软件介绍： Adobe Illustrator 软件可以帮助您为任何项目创建独具匠心的 矢量图稿。软件通过精良的绘图工具、具有表现力的自然画笔、各种 省时功能提供精准度和强大功能，为全球设计专业人士所青睐。 Illustrator 是出版、多媒体和在线图像的工业标准矢量插画软 件。无论是生产印刷出版线稿的设计者和专业插画家、生产多媒体图 像的艺术家、还是互联网页或在线内容的制作者，都会发现 Illustrator 不仅仅是一个艺术产品工具。该软件为您的线稿提供无 与伦比的精度和控制，适合生产任何小型设计到大型的复杂项目。 支持平台： Windows、MAC 相关链接 Illustrator 官方网站： http://www.adobe.com/illustrator （4）Microsoft Expression Design 软件介绍： Expression Design is a tool for creative professionals and developers who want to build graphics for application user interfaces, the web, or any other medium. 支持平台： Windows XP、Windows Vista、Windows 7 相关链接： 官方网站： http://www.microsoft.com/expression/#design （5）3D Studio MAX 软件介绍： 3D Studio Max，常简称为 3ds Max 或 MAX，是 Autodesk 公司开 发的基于 PC 系统的三维动画渲染和制作软件。其前身是基于 DOS 操 作系统的 3D Studio 系列软件，最新版本是 2011。3ds Max 广泛应用
于广告、影视、工业设计、建筑设计、多媒体制作、游戏、辅助教学 以及工程可视化等领域。 支持平台: Windows、MAC 相关链接 官方网站 http://usa.autodeskcom/3ds-max (6) MAYA 软件介绍: Maya是美国 Autodesk公司出品的世界顶级的三维动画软件,应 用对象是专业的影视广告,角色动画,电影特技等。Maya功能完善, 工作灵活,易学易用,制作效率极高,渲染真实感极强,是电影级别 的高端制作软件。 支持平台: Windows、MAC 相关链接 官方网站 http://usa.autodeskcom/maya/ (7) Painter 软件介绍: Painter是数码素描与绘画工具的终极选择,是一款极其优秀的 仿自然绘画软件,拥有全面和逼真的仿自然画笔。它是专门为渴望追 求自由创意及需要数码工具来仿真传统绘画的数码艺术家、插画画家 及摄影师而开发的。它能通过数码手段复制自然媒质( Natural media) 效果,是同级产品中的佼佼者,获得业界的一致推崇。 支持平台: indows、MAC 相关链接 中文官方网站 http://www.corel.com/corel/product/indexjsppid=prod4030123 4《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/ht/ 51xueweb. cn
4 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 于广告、影视、工业设计、建筑设计、多媒体制作、游戏、辅助教学 以及工程可视化等领域。 支持平台： Windows、MAC 相关链接： 官方网站： http://usa.autodesk.com/3ds-max/ （6）MAYA 软件介绍： Maya 是美国 Autodesk 公司出品的世界顶级的三维动画软件，应 用对象是专业的影视广告，角色动画，电影特技等。Maya 功能完善， 工作灵活，易学易用，制作效率极高，渲染真实感极强，是电影级别 的高端制作软件。 支持平台： Windows、MAC 相关链接： 官方网站： http://usa.autodesk.com/maya/ （7）Painter 软件介绍： Painter 是数码素描与绘画工具的终极选择，是一款极其优秀的 仿自然绘画软件，拥有全面和逼真的仿自然画笔。它是专门为渴望追 求自由创意及需要数码工具来仿真传统绘画的数码艺术家、插画画家 及摄影师而开发的。它能通过数码手段复制自然媒质(Natural Media) 效果，是同级产品中的佼佼者，获得业界的一致推崇。 支持平台： Windows、MAC 相关链接： 中文官方网站： http://www.corel.com/corel/product/index.jsp?pid=prod4030123
2.2原型设计工具 2.2.1什么是原型设计? 用户怎么说的,并不代表他们怎么想。在实际的工作中往往发现, 用户对于可以图形化的沟通交流更容易理解。随着互联网产品的迭代 的加快和用户需求的复杂性,通过原型的方式进行沟通,能够快速的 提高产品设计的效率,提高交流的准确性和便捷性 原型设计往往是定位于概念设计或整个设计流程初期的一个过 程。随着项目大小、时间周期等,开发人员往往会根据需求确定纸原 型、低保真原型、高保真原型等不同质量的内容作为输出 项目启动 开发送代 概念设 用户访谈 头风热 视觉设计 交互设计 Prototy 风格设计 倩量分析 界面设计一 图3-1原型设计的传统流程 具体来讲可以将原型划分为3类 ①纸原型:顾名思义,就是画在文档纸、白板上的设计原型、示 意图。便于修改和绘制,不便于保存和展示。因此想有效的利用纸原 型,我们就需要注意纸原型的承载。 ②低保真原型:通常是基于现有的界面或系统,通过电脑进行 定的加工后的设计稿,示意更加明确,能够包含设计的交互和反馈, 美观、效果等欠佳。可以理解为介于纸面原型和高保真原型之间的输 出的统称,往往也可以作为需求设计稿输出。 ③高保真原型:属于原型设计的终极武器。包括产品演示Demo 或概念设计展示。视觉上与实际产品等效,体验上也与真实产品接近 而为了达到完整的效果,很大程度上就要求交互设计师对视觉审美的 能力。只有从视觉、体验两方面同时打动客户,在能最终赢得客户的 5《网页设计与网站规划》讲稿/河南中医学院互联网应用技术研究所/htp/ bs. 51xueweb cn
5 《网页设计与网站规划》讲稿 / 河南中医学院互联网应用技术研究所 / http://labs.51xueweb.cn 2.2 原型设计工具 2.2.1 什么是原型设计？ 用户怎么说的，并不代表他们怎么想。在实际的工作中往往发现， 用户对于可以图形化的沟通交流更容易理解。随着互联网产品的迭代 的加快和用户需求的复杂性，通过原型的方式进行沟通，能够快速的 提高产品设计的效率，提高交流的准确性和便捷性。 原型设计往往是定位于概念设计或整个设计流程初期的一个过 程。随着项目大小、时间周期等，开发人员往往会根据需求确定纸原 型、低保真原型、高保真原型等不同质量的内容作为输出。 具体来讲可以将原型划分为 3 类： ①纸原型：顾名思义，就是画在文档纸、白板上的设计原型、示 意图。便于修改和绘制，不便于保存和展示。因此想有效的利用纸原 型，我们就需要注意纸原型的承载。 ②低保真原型：通常是基于现有的界面或系统，通过电脑进行一 定的加工后的设计稿，示意更加明确，能够包含设计的交互和反馈， 美观、效果等欠佳。可以理解为介于纸面原型和高保真原型之间的输 出的统称，往往也可以作为需求设计稿输出。 ③高保真原型：属于原型设计的终极武器。包括产品演示 Demo 或概念设计展示。视觉上与实际产品等效，体验上也与真实产品接近。 而为了达到完整的效果，很大程度上就要求交互设计师对视觉审美的 能力。只有从视觉、体验两方面同时打动客户，在能最终赢得客户的 图 3-1 原型设计的传统流程