《网页设计与制作教程HTML+CSS+Bootstrap》课件 项目九创建网站菲菲服饰

项目九创建网站“菲菲服饰”

（Bootstrap应用）项目简介Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机，Bootstrap包含了十几个可重用的组件，用于创建下拉菜单、按钮、按钮下拉菜单、导航、路径导航、分页、排版、缩略图、警告对话框、进度条图像等，利用Bootstrap的框架，可以快速设计出具有丰富动态效果的前端网页。项目目标本项目以“菲菲服饰”网站开发为例，利用Bootstrap框架来实现具有丰富动感效果、视觉突出的时尚型网站建设。帮助初学者理解Bootstrap的概念和作用，认识Bootstrap框架结构，了解Bootstrap组件构成。学会引用Bootstrap组件的方法，利用Bootstrap技术设计制作动态十足的“菲菲服饰”网站，体验Bootstrap框架的强大功能。工作任务根据“菲菲服饰”网站设计与制作的要求，基于工作过程，以任务驱动的方式，利用Bootstrap技术完成整个网站的设计和制作，实现下拉菜单、路径导航、分页、排版、缩略图等现代网站元素，保持整个网站的风格协调一致。（1）了解Bootstrap的概念和作用；（2）认识Bootstrap框架结构和组件构成；（3）在网页制作中引用Bootstrap组件的方法；（4）利用Bootstrap技术设计制作具有丰富动态效果的网页；（5）整理基于Bootstrap制作网站的一般流程。任务一制作网站首页通过以下两个步骤的操作实践来认识Bootstrap框架的概念和作用，了解Bootstrap框架中页面布局、导航条、图片轮播等组件和插件的用法，初步完成“菲菲服饰”网站首页的制作：1．设计“菲菲服饰”网站结构；2．制作“菲菲服饰”网站首页。

任务二

制作网站首页《菲菲服饰》网站“首页效果图任务目标按照网站需求分析，建立站点文件夹，并在Dreamweaver2021中建立站点，通过“菲菲服饰”网站首页设计和制作，帮助初学者理解Bootstrap的概念和作用，学会Bootstrap组件中下拉菜单、导航条等组件引用方法和修改方法，完成网站首页的制作。知识准备知识准备一

了解Bootstrap的概念和作用2011年开始，Twitter的设计师MarkOtto和JacobThornton合作开发了一个基于HTML、CSS、JAVASCRIPT的框架，包含了丰富的Web组件，包括：下拉菜单、按钮组、按钮下拉菜单、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等。使用这些组件，可以快速的搭建一个漂亮、功能完备的网站。Bootstrap目前使用较广的是版本v3和v4，其中v3的版本是3.4.1，v4的版本是4.4.1，Dreamweaver2021中同时集成了Bootstrap的这两个版本供用户选择使用（默认使用4.4.1，对于初学者，建议使用成熟稳定的3.4.1版本）。知识准备二Bootstrap栅格系统和文字排版1、栅格系统（GridSystem）默认的Bootstrap栅格系统提供一个宽940像素的12列格网。这意味着页面默认宽度是940px，最小的单元宽度是940/12px。Bootstrap能够使得网页可以更好地适应多种终端设备（如平板电脑、智能手机等）。知识准备二Bootstrap栅格系统和文字排版1、栅格系统（GridSystem）流式栅格系统（Fluidgridsystem）。它使用百分比，而不是固定的像素来确定页面的宽度。布局（Layout），是创建页面基础模板的布局。Bootstrap提供两种布局方式，包括固定（Fixed）和流式（Fluid）布局。工作原理栅格系统通过一系列包含内容的行和列来创建页面布局。知识准备二Bootstrap栅格系统和文字排版2．文字排版排版（Typography），它囊括标题（Headings），段落（Paragraphs），列表（lists）以及其他内联要素。Bootstrap提供了三种标签来表现不同类型列表：<ul>表示无序列表，<ulclass="unstyled">表示无样式的无序列表；<ol>表示有序列表；<dl>表示描述列表，<dlclass="dl-horizontal">表示竖排描述列表。知识准备三

重要组件：按钮（Button）Bootstrap提供多种样式的按钮，同样通过CSS的类来控制，包括btn、btn-primary、btn-info、btn-success等不同颜色的按钮。知识准备四

重要组件：导航条（Navbar）Bootstrap提供了各种样式的导航条，导航条的基础类是.navbar，至于导航条在顶部或底部，用.navbar-fixed-top与.navbar-fixed-bottom来设置。在navbar中使用form要素，比如.navbar-form。可以支持响应式操作，通过.nav-collapse或者直接.collapse类实现。知识准备四

重要插件：图片轮播（Carousel）Bootstrap图片轮播（Carousel）插件是一种灵活的响应式的向站点添加轮番显示内容的方式。并且内容也足够灵活，可以是图像、内嵌框架、视频或者其他想要放置的任何类型的内容。任务实施步骤一准备网站基本架构1．在D盘建立站点目录“fffs”及其子目录images。2．打开Dreamweaver2021，打开“站点”菜单，选择“新建站点”，使用“站点设置对象”定义站点，站点名“菲菲服饰”，站点文件夹“fffs”。任务实施步骤一准备网站基本架构3．打开“文件”菜单，选择“新建”，对话框内选择“新建文档”，文件类型“HTML”，框架选择“Bootstrap”，去掉“包含预构建布局”勾选，单击“创建”。任务实施步骤二制作网站首页1．添加“导航条”。任务实施步骤二制作网站首页2．添加“网站logo”。任务实施步骤二制作网站首页3．添加“图片轮播”。任务实施步骤二制作网站首页4．添加网站“联系方式”。任务实施步骤二制作网站首页5．添加网站“版权说明”。任务二

制作“设计师”子网页通过以下两个步骤的操作实践来认识Bootstrap框架下拉菜单、导航条、标签、小图标等组件的使用，完成“菲菲服饰”网站中“设计师”网页的制作，效果如图所示。1．设计“菲菲服饰”网站的“设计师”网页结构；2．制作“菲菲服饰”网站的“设计师”网页。任务二制作“设计师”子网页《菲菲服饰》网站“设计师”效果图任务目标根据网站需求分析，通过“菲菲服饰”网站“设计师”网页的设计和制作，帮助初学者更深入了解Bootstrap的组件中下拉菜单、导航条、标签、小图标等组件使用方法和代码、参数修改方法，完成“设计师”网页的制作。知识准备知识准备一重要组件：标签（Label）标签是一个很好用的页面小元素，Bootstrap具有多种颜色标签。知识准备知识准备二重要组件：小图标（Glyphicons）Bootstrap提供的200个字体图标，每个图标对应一个class，部分图标如图所示。在使用时，只需要包含glyphicon和对应的class即可。任务实施步骤一

设计“设计师”网页结构1．打开“文件”菜单，选择“新建”，在对话框内选择“新建文档”，文件类型“HTML”，框架选择“Bootstrap”。任务实施步骤一

设计“设计师”网页结构2．打开“文件”菜单，选择保存，将新建文档保存为“Designer.html”。“设计师”网页的结构比较简单，上部是导航条，中部是设计师个人介绍资料，下部是版权说明栏。任务实施步骤二制作“设计师”网页1．添加“导航条”。任务实施步骤二制作“设计师”网页2．添加“网站logo”。任务实施步骤二制作“设计师”网页3．添加“设计师简介”。任务实施步骤二制作“设计师”网页4．添加网站“版权说明”。任务三

制作“产品展示”子网页通过以下二个步骤的操作实践来认识Bootstrap框架下拉菜单、导航条、缩略图等组件的使用，完成“菲菲服饰”网站中“产品展示”网页的制作，网页效果如图9.3.1所示。1．设计“菲菲服饰”网站“产品展示”网页结构。2．制作“菲菲服饰”网站“产品展示”网页。任务三制作“产品展示”子网页《菲菲服饰》网站“产品展示”效果图任务目标根据网站需求分析，通过“菲菲服饰”网站2020年、2021年服装产品展示网页的设计和制作，帮助初学者更深入了解Bootstrap的组件中下拉菜单、导航条、缩略图等组件使用方法和代码、参数修改方法，完成服装产品展示网页的制作。知识准备知识准备一

重要插件：标签页（Tab）标签页插件可以在网页中添加快速的、动态的tab和pill，带过滤效果、下拉菜单的选项卡功能，可以切换显示本地内容，来实现过渡页面内容的效果。知识准备知识准备二重要组件：缩略图（Thumbnails）缩略图，可以作为图片、视频、文字的格网结构展示。实现默认形式的Bootstrap缩略图，只需要简单的thumbnails标签。知识准备知识准备二重要插件：模态框（Modal）模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。任务实施步骤一设计产品展示网页结构1．打开“文件”菜单，选择“新建”，在对话框内选择“新建文档”，文件类型“HTML”，框架选择“Bootstrap”。任务实施步骤一

设计“设计师”网页结构2．打开“文件”菜单，将新建的文档保存为“Product.html”。产品展示网页的结构比较简单，上部是导航条，中部是要展示的产品，下部是版权说明栏。任务实施步骤二制作产品展示网页1．添加“导航条”。任务实施步骤二制作“设计师”网页2．添加“网站logo”。任务实施步骤二制作“设计师”网页3．添加“产品展示标签页”任务实施步骤二制作“设计师”网页修改完成的效果如图任务实施步骤二制作“设计师”网页实现点击服装图片，用弹窗形式，展示该服装基本信息任务实施步骤二制作“设计师”网页两个TAB完成后的效果如图任务实施步骤二制作“设计师”网页4．添加网站“版权说明”。任务实施步骤二制作“设计师”网页5．添加导航条“产品展示”超链接。在“实时视图”中，单击“产品展示”，再弹出下拉菜单中单击“2020”，在代码区对应位置，将“2020”前<ahref="Product.html">修改为<ahref="Product.html#home1"data-toggle="tab">，同样，将“2021”前<ahref="Product.html">修改为<ahref="Product.html#