工业互联网产业联盟项目分析

《物联网Web前端开发基础》课程

工业互联网产业联盟项目分析【任务7-5】页面建设的准备工作需求分析学习完上面的理论知识，小伟决定开始尝试制作“工业互联网产业联盟”页面了。在制作该页面之前，小伟需要做一些页面建设的准备工作，主要包括网站素材整理、页面结构分析、定义基础样式，具体介绍如下。【任务7-5】页面建设的准备工作网站项目工业互联网产业联盟页面制作该怎样制作工业互联网产业联盟页面呢？【任务7-5】页面建设的准备工作网站素材整理首先打开网站根目录“工业互联网产业联盟项目”，在根目录下新建“images”文件夹，用于存放网站所需的图像文件。然后使用AdobeFireworksCS6的“切片”工具进行切图，最后将导出工业互联网产业联盟页面中的素材图片，存储在站点中的“images”文件夹中。【任务7-5】页面建设的准备工作页面结构分析—HTML结构分析工业互联网产业联盟页面结构比较简单，从上到下可以分为头部模块、导航模块、banner模块、简介模块、特色模块和页脚模块六部分【任务7-5】页面建设的准备工作页面结构分析—CSS样式分析页面中的各个模块居中显示，宽度为980px，因此，页面的版心为980px。另外，页面中的所有字体均设置为微软雅黑，大小为14px，a链接访问前和访问后的文字颜色均设置为#fff，字体大小为16px，这些可以通过CSS公共样式进行定义。【任务7-5】页面建设的准备工作页面结构分析—JavaScript效果分析在该页面中，“banner”模块实现了焦点图切换效果，并通过定时器控制切换的时间间隔，“简介”模块的图片通过滚动的方式展现，并定义了图片滚动的速度及滚动方向等，特色模块的内容则通过tab栏切换的效果展示。【任务7-5】页面建设的准备工作定义基础样式——页面布局<!--headbegin--><divclass="head"></div><!--headend--><!--navbegin--><divid="nav"></div><!--navend--><!--bannerbegin--><divclass="banner"></div><!--bannerend--><!--introductionbegin--><divid="introduction"></div><!--introductionend--><!--featuresbegin--><divid="features"></div><!--featuresend--><!--footerbegin--><divid="footer"></div><!--footerend-->【任务7-5】页面建设的准备工作定义基础样式——公共样式/*重置浏览器的默认样式*/*{margin:0;padding:0;list-style:none;outline:none;border:0;background:none;}/*全局控制*/body{font-size:14px;font-family:"微软雅黑";}a:link,a:visited{color:#fff;text-decoration:none;}a:hover{text-decoration:none;}【任务7-5】页面建设的准备工作定义基础样式——引入js文件<scripttype="text/