网页设计与制作项目式教程（HTML+CSS）课件02.前端开发工具及流程.pptx

网页设计与制作项目式教程（HTML+CSS）项目一Web前端开发基础

任务1.3前端开发工具项目实施新知学习1：常见的前端开发工具1．HBuilderX（1）编辑器——编辑文件的主要区域，可以在垂直和水平方向上并排打开任意数量的编辑器。（2）项目管理器——包含诸如资源管理器之类的不同视图，可在处理项目提供帮助。（3）工具栏——显示了常用工具。（4）状态栏——有关打开的项目和编辑的文件的信息。（5）控制台——可以在编辑器区域下方显示不同的面板，以获取输出或调试信息，错误和警告或集成终端。面板也可以向右移动以获得更多垂直空间。（6）迷你地图——显示在窗口右侧，提供了源代码的高级概述，这对于快速导航和理解代码很有用。（7）预览窗口——显示了正在编辑的网页预览的结果。

任务1.3前端开发工具项目实施新知学习1：常见的前端开发工具2．EditPlus

任务1.3前端开发工具项目实施新知学习1：常见的前端开发工具3．AdobeDreamweaver

任务1.3前端开发工具项目实施新知学习1：常见的前端开发工具4．SublimeText

任务1.3前端开发工具项目实施新知学习1：常见的前端开发工具5．VisualStudioCode

任务1.3前端开发工具项目实施新知学习2：浏览器工具IE浏览器Edge浏览器GoogleChrome浏览器MozillaFirefox浏览器Safari浏览器Opera浏览器

任务1.3前端开发工具项目实施新知学习2：浏览器工具1．IE浏览器IE（InternetExplorer）是微软公司推出的一款网页浏览器。在IE7之前，将其直译为“网络探路者”，但在IE7之后官方便直接称其为“IE浏览器”。在很长的一段时间内，网页普遍使用的技术，IE浏览器都是最快提供支持的浏览器，所以其网页交互性更强，视觉效果更吸引人，竞争对手被远远甩下。但随着Firefox、Chrome、Safari等浏览器的先后问世和不断进步，用户有了对比和选择，IE浏览器大量市场份额被抢占。目前，在Windows10中，微软公司用Edge取代了IE。

任务1.3前端开发工具项目实施新知学习2：浏览器工具2．Edge浏览器Edge浏览器是由微软公司开发的一款现代浏览器，它于2015年推出，并在Windows10操作系统中取代了IE浏览器。Edge浏览器具备注重安全的浏览模式、实时笔记、阅读器模式和集成的Cortana个人助手等功能。除此之外，Edge浏览器还具有流畅的无缝切换实验室功能，并且能够将搜索结果集成到浏览器的新标签页中。

任务1.3前端开发工具项目实施新知学习2：浏览器工具3．Chrome浏览器Chrome浏览器是一款由谷歌公司开发的网页浏览器。它具有快速、简单、安全等特点，并且支持多个平台，包括Windows、macOS、Android和iOS。Chrome浏览器的特点之一是拥有强大的扩展程序库，用户可以根据自己的需求自由地选择和安装各种扩展程序。此外，谷歌公司还在不断改进其智能搜索功能，使用户在搜索时可以更快、更准确地找到所需信息。

任务1.3前端开发工具项目实施新知学习2：浏览器工具4．Firefox浏览器Firefox浏览器是由Mozilla开发的一款自由、开源的浏览器。它提供了许多对用户友好的功能，比如标签、书签管理、广告拦截等。Firefox浏览器的动态主题功能是其最大的特点之一，它可以根据用户选择的背景图片和颜色，自动生成一个定制的浏览器主题。另外，Firefox也对用户隐私极为重视，提供了多种隐私保护选项，比如私人浏览模式和追踪保护功能等。

任务1.3前端开发工具项目实施新知学习2：浏览器工具5．Safari浏览器Safari浏览器是由苹果公司开发的一款浏览器，专为macOS和iOS设计。它的界面非常简洁，功能也非常实用，支持标签定位、书签、RSS订阅等。Safari浏览器具有功能强大的阅读模式，用户可以在一些网页的文字和图片中将选择的内容分离出来，方便阅读。此外，Safari浏览器还拥有一些独特的功能，比如图标缩略图、历史记录视觉化等。

任务1.3前端开发工具项目实施新知学习2：浏览器工具6．Opera浏览器Opera浏览器是一款由挪威OperaSoftwareASA公司制作的支持多页面标签式浏览的浏览器，可以在Windows、macOS和Linux这3个操作系统上运行，它也是一款功能丰富、运行速度快、安全可靠的浏览器。Opera浏览器的Turbo模式可以使浏览器在网络速度较慢的情况下快速加载网页。此外，Opera浏览器还具