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

任务实施步骤二制作“设计师”网页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#home1data-toggle=tab，同样，将“2021”前ahref=Product.html修改为ahref=Product.html#paneTwo1data-toggle=tab。(七) 任务拓展制作无锡科学技术职业学院《科技处在线》网站，首页效果如图所示。首页用到的素材图片，在项目九的任务拓展包内提供。首页的基本格局5部分组成，第一部分是logo区，第二部分是网站导航栏，第三部分是网站图片轮播展示区，第四部分是网站图文信息展示区，第五部分是版权说明，宽度1000像素，居中对齐。各栏请根据需要自行设定。请使用Bootstrap框架完成此网站首页的制作。任务拓展制作《科技处在线》网站*第*页《网页设计与制作教程

（HTML+CSS+Bootstrap）》项目九创建网站“菲菲服饰”

（Bootstrap应用）项目简介Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机，Bootstrap包含了十几个可重用的组件，用于创建下拉菜单、按钮、按钮下拉菜单、导航、路径导航、分页、排版、缩略图、警告对话框、进度条图像等，利用Bootstrap的框架，可以快速设计出具有丰富动态效果的前端网页。项目目标本项目以“菲菲服饰”网站开发为例，利用Bootstrap框架来实现具有丰富动感效果、视觉突出的时尚型网站建设。帮助初学者理解Bootstrap的概念和作用，认识Bootstrap框架结构，了解Bootstrap组件构成。学会引用Bootstrap组件的方法，利用Bootstrap技术设计制作动态十足的“菲菲服饰”网站，体验Bootstrap框架的强大功能。工作任务根