Web编程基础（HTML+CSS）项目实战教程 实训指导书 模块7、8 网站首页的设计制作、 企业级项目综合应用.doc

《WEB编程基础》实训指导书 模块7 网站首页的设置制作 实训任务指导书 【实训目的】 1. 掌握网页布局规划及绘制网页布局图； 2. 熟练使用DIV +CSS方式进行页面布局； 3. 熟练使用CSS修饰页面各个类型元素。 【实训内容】 实训任务1：DIV+CSS布局班级网站首页 【任务描述】 本任务旨在使学习者掌握整体网站的设计规划，使用DIV+CSS方式，对整张网页的页面布局。班级网站首页整体结构为上中下结构，其中上部区域为顶部导航条，中间区域为页面内容主体区，底部区域包括网站底部导航和版权信息，网页浏览效果如图教材248页7-14所示。 采用DIV+CSS方式对页面结构布局，页面结构效果如图教材248页7-15所示。 【实训任务指导】 1. 首先进行页面布局设计分析，整张网页为上中下结构，中间主体区分为上下两块，每一块又分为不等宽的左右结构。 2. 采用DIV +CSS方式自上而下铺出页面结构。 3. 考虑到页面元素初始化的样式定义，在网站中所有网页都有应用，将初始化样式单独定义为global.css文件。 实训任务2：使用DIV+CSS布局左中右页面结构 【任务描述】 使用DIV+CSS方式对左中右页面结构进行页面布局，页面效果如图教材252页7-16所示。 【实训任务