Bootstrap响应式网站开发任务式教程课件 任务8 综合实战训练_第1页
Bootstrap响应式网站开发任务式教程课件 任务8 综合实战训练_第2页
Bootstrap响应式网站开发任务式教程课件 任务8 综合实战训练_第3页
Bootstrap响应式网站开发任务式教程课件 任务8 综合实战训练_第4页
Bootstrap响应式网站开发任务式教程课件 任务8 综合实战训练_第5页
已阅读5页，还剩18页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

综合实战:AI教育企业主页设计制作Bootstrap响应式网站开发项目:AI教育企业主页设计制作1

综合项目实训--企业主页页面设计制作项目展示

本项目是一个跨平台响应式的企业网站首页，简单介绍一下项目的基本功能、页面结构和项目的目录机构。

项目的基本页面PC端的页面效果如图所示。图

项目首页PC端页面效果

综合项目实训--企业主页页面设计制作项目展示使用Chrome的开发者工具，测试在iPad上的页面效果如图所示。测试在页面在手机上的页面效果如所示。图

项目首页iPad端页面效果图

项目首页手机端页面效果

综合项目实训--企业主页页面设计制作项目展示为了方便学习与项目的搭建，下面介绍项目的目录结构。“AI教育企业主页页面设计制作”作为顶级目录名称，也是项目的名称，在该目录下有3个目录：css、images和js，以及该项目的主页为index.html文件。“css”文件目录，在该目录下有一个文件index.css，用于添加自定义的样式代码。该目录下的“iconfont”文件夹，用于存放项目的引用的字体文件，其中bootstrap-icons.css文件为字体调用文件。“js”目录，用于存放项目的引用的JavaScript文件。“images”目录，用于存放项目的所需的图像文件。

综合项目实训--企业主页页面设计制作项目开发流程一个项目或产品的开发流程具体如下:1.产品创意结合公司发展方向及战略目标，提出产品创意。简而言之，要做一个什么产品，为什么要做这个产品。2.产品原型产品原型的设计包括功能、页面、最重要的是用户体验。该工作通常由产品经理完成。3.美工设计美工根据产品经理提供的原型图实现符合原型与审美的psd设计图。4.前端实现前端程师拿到美工设计好的psd图，负责具体的html、css静态页面的实现，实现JavaScript动态特效、动态数据的绑定和交互。5.后端实现实现数据处理、业务逻辑代码。6.测试、试运行、上线项目上线，然后测试发现问题，调试后上线运行。在上述六个步骤中，作为前端工程师大家主要关注第四部，前端实现的部分，对于其他步骤了解即可。

综合项目实训--企业主页页面设计制作项目分析index.html由多个模块组成，在网页中从上到下分别为顶部通栏、导航栏、轮播图、信息模块、预约模块、产品模块、新闻模块和合作伙伴模块，所有模块使用通栏布局。根据如图9-9所示效果，页面的基本构成分析如图所示。图

页面的结构功能分析标记了每个模块最外层盒子，其中header.ai_topBar的header表示<header>标签的class值为ai_topBar,完整的写法是<headerclass="ai_topBar">,这种描述方式是为了图形简洁自定义的表达方式，在后面遇到类似的描述依此类推。

综合项目实训--企业主页页面设计制作搭建基本页面框架首先需要配置页面的语言环境、字符编码和视口等，然后引人所需的CSS与JavaScript文件。需要引人的文件有:bootstrap.css、bootstrap-icons.css、index.css、bootstrap.bundle.min.js等。那么，index.html主页面中的框架代码如下：<!--指明当前页面的字符编码格式是utf-8--> <metacharset="utf-8"> <!--标准的视口设置--> <metaname="viewport"content="width=device-width,initial-scale=1"/> <!--引入bootstrap核心CSS文件--> <linkrel="stylesheet"href="css/bootstrap.css"/> <!--引入图标库文件--> <linkrel="stylesheet"href="css/iconfont/bootstrap-icons.css"/> <!--bootstrap的核心js文件--> <scriptsrc="js/bootstrap.bundle.min.js"></script> <!--引入自定义CSS文件--> <linkrel="stylesheet"href="css/index.css"/> <title>AI人工智能</title>

综合项目实训--企业主页页面设计制作 <body> <!--顶部栏开始--> <headerclass="ai_topBar"></header> <!--导航栏开始--> <navclass="ai_nav"></nav> <!--轮播图开始--> <div></div> <!--工具推荐开始--> <divclass="ai_tools"></div> <!--课程报名开始--> <divclass="ai_course"></div> <!--培训模块开始--> <divclass="ai_train"></div> <!--新闻模块开始--> <divclass="ai_news"></div> <!--合作伙伴开始--> <footerclass="ai_partner"></footer> </body>

综合项目实训--企业主页页面设计制作顶部栏模块的分析与实现顶部栏模块在PC端的页面效果如图所示。1.顶部栏的分析图

顶部栏页面效果当鼠标悬停到“掌上AI课堂”上时，会显示一个二维码，鼠标移开时二维码消失，这里假设该二维码用于浏览“AI课堂”信息，页面效果如图所示。图

顶部栏二维码效果

综合项目实训--企业主页页面设计制作

根据图分析，页面布局与结构分析如图所示。图

顶部栏页面结构设计

顶部栏的所有内容放置在一个<header>容器内，在<header>容器内放置.container布局容器，在.container类所在容器中放置.row容器，之后将顶部栏分为4个部分div.col-md-2、div.col-md-5、div.col-md-2、div.col-md-3。其中，在第一个div.col-md-2中放置a元素和二维码，需要考虑文字后的下拉图标使用字体图标实现；div.col-md-5中包含字体图标与文本；div.col-md-2中包含a超级链接；最后的div.col-md-3中放置两个超级链接a元素，使用Bootstrap的按钮样式实现。

综合项目实训--企业主页页面设计制作导航栏模块的分析与实现导航栏模块在PC端的页面效果如图所示。1.导航栏的分析图

导航栏PC页面效果在iPad上的页面效果如图所示。图

导航栏iPad页面效果

综合项目实训--企业主页页面设计制作导航栏模块的分析与实现在手机上的页面效果如图所示1.导航栏的分析a)导航栏汉堡效果b)展开后的效果图

导航栏手机页面效果

综合项目实训--企业主页页面设计制作导航栏模块的分析与实现根据图的分析，页面布局与结构分析如图所示。1.导航栏的分析导航栏使用Bootstrap提供的响应式导航栏模块，所有内容放置在nav标签内，同时需要在nav标签内放置div.container布局容器，整个导航需要分为两部分dov.nav-header和div.collapse。

综合项目实训--企业主页页面设计制作轮播图模块实现1.轮播栏的分析演示

综合项目实训--企业主页页面设计制作信息和课程报名模块的分析与实现信息和课程报名模块在PC端的页面效果如图所示。1.模块分析图

信息和课程报名模块PC页面效果

综合项目实训--企业主页页面设计制作信息和课程报名模块的分析与实现根据图的分析，页面布局与结构分析如图所示。图

信息和课程报名模块页面结构设计

综合项目实训--企业主页页面设计制作培训模块的分析与实现产品模块每行在PC端展示3种产品，PC端的页面效果如图所示。1.培训模块分析图

产品模块PC页面效果演示

综合项目实训--企业主页页面设计制作培训模块的分析与实现根据图的分析，页面布局与结构分析如图所示。1.模块分析图

产品模块页面结构设计

综合项目实训--企业主页页面设计制作新闻和合作伙伴模块的分析与实现新闻与合作伙伴模块PC端的页面效果如图所示。1.模块分析图

新闻与合作伙伴模块PC页面效果

综合项目实训--企业主页页面设计制作新闻和合作伙伴模块的分析与实现根据图的分析，新闻与合作伙伴模块页面布局与结构分析如图所示。1.模块分析图

新闻与合作伙伴模块页面结构设计新闻与合作伙伴模块将结构设计如下。新闻模块中的每个页签使用了字体图标。每一条新闻内容在一个li标签内，并包含a元素。在li中的a元素直接设置了字体图标。使用媒体查询，设置iPad和手机的不同显示

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论