项目二 任务1 配置Bootstrap开发环境-【鹑首文化】HTML5+CSS3网页设计与制作配套电子课件PPT

HTML5+CSS3网页设计与制作 使用Bootstrap开源框架快速搭建响应式网页 项目二 本项目通过使用Bootstrap开源框架完成D清单网页的宣传单页的制作来学习Bootstrap前端开源框架。 Bootstrap一种可以高效完成页面制作的前端开源工具，虽然它会在一定程度上限制网页设计的实现，但其移动优先的响应式设计框架可以大幅提高制作效率，为设计者节省大量的时间。 项目目标 项目情境与项目1一致，唯一的区别是要求你在当天就要完成并上线。由于时间紧迫，公司明确可以使用Bootstrap等免费的前端开源框架辅助开发。 D清单页面效果图可查看项目1的项目情境。 项目情境 网页制作的一般流程如下： 项目开发的基本流程都是一致的。在本次项目中，你唯一不同的是使用了Bootstrap框架作为网页开发的技术，以达到快速开发的目的。 与前面的开发不一样的是，HTML标签（网页内容）和CSS样式设置是同步进行的。其实在实际的开发中，两种开发流程互有优劣，你可以选择你需要的方式进行。 为避免知识的重复讲解，分析需求和选用并配置开发环境在本项目中默认你已经完成了。我们将直接从学习并使用Bootstrap开始，逐步完成D清单网页的制作！ 项目分析 项目发布 需求分析 规划设计 实施 测试 交付 根据“移动优先”原则，我们需要制定项目完成的计划： 项目分析 时间段1 时间段2 时间段3 时间段4 时间段5 分析规划 实施 阶段1 移动端内容制作 阶段2 移动端格式制作 阶段3 响应式制作 测试与交付 D清单前端开发甘特图 时间 进度 任务 能够在学习Bootstrap帮助文档的基础上，下载Bootstrap文件并配置Bootstrap开发环境 能够编写基本的Bootstrap模板页面，为D清单页面后续开发做准备。 任务目标 任务1 配置Bootstrap开发环境 本次任务要求通过学习Bootstrap的文档和模板知识，下载并配置用于生产环境的Bootstrap，并编写Bootstrap模板，为后续的开发做准备。 任务描述 图2-1 Bootstrap开发环境配置后的模板代码和测试页面 任务1 配置Bootstrap开发环境 任务要求下载并配置好用于生产环境的Bootstrap文件，编写Bootstrap模板并进行测试，需要： 学习Bootstrap的由来和作用； 学习Bootstrap的文档结构和模板知识； 下载Bootstrap文档； 编写模板页面，同时使用该页面测试配置效果。 任务分析 任务1 配置Bootstrap开发环境 知识与技能准备 Bootstrap是由Twitter工程师推出的前端开发框架，是一款强大的开源前端开发工具包，具有强大的自定义功能，Bootstrap一经推出大受欢迎，国内也有不少网站开始使用Bootstrap开发。Bootstrap全部托管于Github（一个代码托管平台和开发者社区，开发者可以在Github上创建自己的开源项目并与其他开发者协作编码。创业公司可以用它来托管软件项目。开源项目可以免费托管，私有项目需付费），用户可以直接访问Github项目。Bootstrap在Github托管地地址：https://github.com/twbs/bootstrap。 知识与技能准备 1、认识Bootstrap Bootstrap是为所有开发者、所有应用场景而设计的。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。 Bootstrap包括如下特点： 1.1预处理脚本 虽然可以直接使用 Bootstrap 提供的 CSS 样式表，但是 Bootstrap 的源码是基于最流行的 CSS 预处理脚本Less（Less 是一门预处理语言，支持变量、mixin、函数等额外功能，本书不涉及此知识）和 Sass开发的。你可以采用预编译的 CSS 文件快速开发，也可以从源码定制自己需要的样式。 1.2一个框架、多种设备 通过Bootstrap已经写好的CSS 媒体查询（Media Query）样式，所有的网站和应用都能在Bootstrap的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备。 1.3特性齐全 Bootstrap提供了全面、美观的文档。你能找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细英文文档（网址http://getbootstrap.com）。 由于语言的关系，可以查阅Bootstrap中文网（非官网）的V3版本帮助文档（http://v3.bootcss.com）来详细了解，我们在后继的学习中会基于这个版本来开展。 知识与技能准备 2、Bootstrap文件 Boot