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

《物联网Web前端开发基础》课程 工业互联网产业联盟项目分析 【任务7-5】页面建设的准备工作 需求分析 学习完上面的理论知识，小伟决定开始尝试制作“工业互联网产业联盟”页面了。在制作该页面之前，小伟需要做一些页面建设的准备工作，主要包括网站素材整理、页面结构分析、定义基础样式，具体介绍如下。 【任务7-5】页面建设的准备工作 【任务7-5】页面建设的准备工作 网站素材整理 首先打开网站根目录“工业互联网产业联盟项目”，在根目录下新建“images”文件夹，用于存放网站所需的图像文件。 然后使用Adobe Fireworks CS6的“切片”工具进行切图，最后将导出工业互联网产业联盟页面中的素材图片，存储在站点中的“images”文件夹中。 【任务7-5】页面建设的准备工作 页面结构分析—HTML结构分析 工业互联网产业联盟页面结构比较简单，从上到下可以分为头部模块、导航模块、banner模块、简介模块、特色模块和页脚模块六部分 【任务7-5】页面建设的准备工作 页面结构分析—CSS样式分析 页面中的各个模块居中显示，宽度为980px，因此，页面的版心为980px。另外，页面中的所有字体均设置为微软雅黑，大小为14px，a链接访问前和访问后的文字颜色均设置为#fff，字体大小为16px，这些可以通过CSS公共样式进行定义。 【任务7-5】页面建设的准备工作 页面结构分析—JavaScript效果分析 在该页面中，“banner”模块实现了焦点图切换效果，并通过定时器控制切换的时间间隔，“简介”模块的图片通过滚动的方式展现，并定义了图片滚动的速度及滚动方向等，特色模块的内容则通过tab栏切换的效果展示。 【任务7-5】页面建设的准备工作 定义基础样式——页面布局 !-- head begin-- div class=head/div !-- head end-- !-- nav begin-- div id=nav/div !-- nav end-- !-- banner begin-- div class=banner/div !-- banner end-- !-- introduction begin-- div id=introduction/div !-- introduction end-- !-- features begin-- div id=features/div !-- features end-- !-- footer begin-- div id=footer/div !-- footer end-- 【任务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文件 script type=text/javascript src=js/js07.js/script 工业互联网产业联盟项目分析 1.网站素材整理 2.页面结构分析 3.定义基础样 谢谢