基于DIV CSS网页布局的教学难点探讨

龙源期刊网 http://www.qikan.com.cn

基于DIV+CSS网页布局的教学难点探讨

作者：贾英霞

来源：《无线互联科技》2015年第12期

摘要：DIV+CSS网页布局是目前主流的网页布局方式，而浮动、定位、浏览器兼容等技术是网页布局中的难点，也是网页设计教学中学生认为的难点。文章通过对这些教学难点的探讨，以期能给网页设计课程的教学带来帮助。 关键词：DIV；CSS；网页设计

网页设计课程是中职学校计算机类专业的一门主干课程，为了满足社会对网页设计人才的技术要求，从教学思想上要更新观念，其教学内容和教学方法也要与时俱进，让学生掌握DIV+CSS这种主流的网页布局技术，加强学生的实践动手能力，力求使学生更能适应当今市场的需求。 1 引言

采用DIV+CSS布局页面已是网页设计的主流，多数大型门户网站都使用该方式进行网页的布局排版。以前的表格布局方式几乎被淘汰，从应用实践上看，DIV+CSS布局方式实现了网页的内容和表现形式相分离，有利于网站的维护，利于SEO优化，加快了网页的加载时间，用户体验较好。 2 DIV+CSS布局概述

DIV+CSS布局技术采用HTML中的DIV标签进行整体布局，之后采用CSS（Cascading Style Sheets）即层叠样式表进行网页的表现设定。用DIV将页面进行分块，搭建网页的整体结构，用CSS定位添加样式，如：加入边框、背景等创建网站表现，达到美化网页效果。实质就是使用HTML对网站进行标准化重构，使用CSS将表现与内容相分离。 3 几个教学难点

用DIV+CSS来布局网页是目前主流的网页布局方式，而盒模型、浮动、定位、浏览器兼容等技术是网页布局中的难点，也是网页设计教学中学生认为较难理解掌握的关键技术。 3.1 盒模型

盒模型是DIV+CSS网页布局的核心，任何HTML元素都可以看作是一个盒子，用CSS布局网页主要就是通过CSS定义的不同大小的盒子与盒子嵌套来布局网页。网页由许多个盒子通过不同的排列方式（并列、上下或嵌套）堆积而成，这些盒子之间会产生互相影响。所以既要理解盒子本身的构成，又要理解盒子与盒子之间的关系。其中填充、边框和边界是盒子的3