5-3智慧家居项目分析.pptx

《物联网Web前端开发基础》课程 通信技术专业教学资源库（物联网应用技术专业） 深圳职业技术学院 智慧家居项目分析 【任务5-7】页面建设准备工作 需求分析 学习完HTML的基础知识，小伟决定开始尝试制作“智慧家居”页面了。在制作“智慧家居”页面之前，小伟需要做一些页面建设的准备工作，主要包括网站素材整理、页面结构分析、定义基础样式，具体介绍如下。 【任务5-7】页面建设准备工作 【任务5-7】页面建设准备工作 网站素材整理 首先打开网站根目录“智慧家居项目”，在根目录下新建“images”文件夹，用于存放网站所需的图像文件。 然后使用Adobe Fireworks CS6的“切片”工具进行切图，最后将导出智慧家居页面中的素材图片，存储在站点中的“images”文件夹中。 【任务5-7】页面建设准备工作 页面结构分析—HTML结构分析 智慧家居页面从上到下可以分为5个模块。 【任务5-7】页面建设准备工作 页面结构分析—CSS样式分析 仔细观察页面的各个模块，可以看出，各模块居中显示，宽度为980px，因此，页面的版心为980px。另外，页面中的所有字体均设置为微软雅黑，字体为14px，a链接访问前和访问后的字体大小为16px，文字颜色为#fff，这些可以通过CSS公共样式进行定义。 【任务5-7】页面建设准备工作 定义基础样式——页面布局 【任务5-7】页面建设准备工作 定义基础样式——公共样式 智慧家居项目分析 1.网站素材整理 2.页面结构分析 3.定义基础样式 通信技术专业教学资源库（物联网应用技术专业） 深圳职业技术学院 谢谢