网页设计教学中DIV+CSS布局的运用论文

网页设计教学中DIV+CSS布局的运用论文

　　一、引言。

　　随着时代的发展进步，网络计算机技术的飞速发展进步，网页设计领域也有了极其广泛的发展空间，各个院校都开设了网页设计这一学科的教学，为培养这方面更多的人才对推动我国网页设计专业的发展进程作出重要的贡献。目前，在我国网页设计这一学科的教学过程中，教学使用的软件一般都是 Dre-amweaver,这一软件在设计网页的时候，网页布局法最常用的就是 Table 页面布局以及 DIV + CSS 页面布局这两种，本文就深入了解分析 DIV + CSS 页面布局法这一页面布局法解决传统表格布局法的不足之处，利于后期的网页维护和修改工作的进行，简化了代码，从而减少了网络资源的浪费。由于 DIV + CSS 布局在当今社会的应用中受到广泛的欢迎，因此，我国各院校也应重视这一布局法在网页设计教学中的应用，改变传统网页设计教学课堂的教学氛围，提高教学质量，从而对提高学生的能力起到深远的作用。

　　二、DIV + CSS 布局。

　　（ 一） 传统的网页页面布局法。在传统的网页设计教学过程中，使用的页面布局法主要是表格页面布局和框架布局。表格布局法的优势在于可以随意设置单元格的高度和宽度，还可以实现嵌套，能让网页中的.各元素都摆放在预期的地方； 它的操作简单易行，可以完成各种版式的布局。但是它也存在很多缺点，比如说在设计复杂的网页时候，HTML 文档内容将会特别多，这样浏览器在加载完表格再显示页面的过程中，要消耗很长的时间，此外，表格布局法还可能使 HTML 文档的内部结构混乱，其页面的维修和修改工作也特别困难。

　　（ 二） 含义。DIV 是一种容器性质的元素，它的存在是为HTML 文档内容提供结构和背景，它是由起始标签 < div > 和结束标签 < /div > 之间的内容构成的。CSS 就是层叠样式表，主要是用来设计网页的排版和风格的，使网页变得更加丰富。

　　CSS 由两个主要部分组成： 选择器和声明，其中选择器的使用需要改变样式的元素； 声明则是由一个属性一个值组合成的，属性和值需要用冒号来隔开，声明和声明之间需要用分号来隔开。如果要将网页页面上的元素实现一对一的控制，就需要使用 CSS 选择器，常用的有标签选择器、类选择器、id 选择器、群组选择器以及后代选择器这几种，它们都有着各自的优点和缺点。

　　（ 三） 布局原理。DIV + CSS 页面布局法是 WEB 设计的标准，它和以往的表格页面布局法有着明显的不同之处，可以实现网页页面内容和表现分离，其中 DIV 是用来完成网页的框架结构，CSS 是用来美化网站的样式，它们的共同使用可以将网站进行重构，使网站进一步实现标准化，简化 HTML 文档内容的代码，有利于网站结构的搭建。

　　三、网页设计教学过程中 DIV + CSS 布局法的应用路径。

　　（ 一） DIV + CSS 布局法的优点。

　　1. 使网页结构实现标准化。由于传统的表格页面布局法使用过程中，网页垃圾代码过多，用于装饰的样式和页面布局代码的混合导致页面结构不美观，此外，表格页面布局中的多层嵌套、单元格的合并与拆分这些对一个单元格的调整工作，都会影响到其余单元格的表现效果。但是 DIV + CSS 页面布局法很好地解决了这一问题，在页面布局设计的时候，使用 DIV 盒子来确定大小，其边框局、间距等多种属性都可以进行数值上的调整，这就使网页页面的结构塑造性极强。

　　2. 使网页内容和样式相分离。DIV + CSS 页面布局法的使用，解决了以往网页风格不统一的问题，有利于更新和网页维修修护工作的进行。DIV（ 网页内容） 和 CSS（ 样式） 的相互分离，一般是通过将页面内容放到 HTML 文档文件中而样式则放在单独的 CSS 文件里，当需要进行网页内容修改时候，只需要对 HTML文件改动，对网页页面效果修改时候，则只需要对 CSS 文件中的内容进行修改即可，大大节省了工作的时间和人力的消耗。DIV+ CSS 页面布局法将网页内容和样式的分离，对网页的更新工作带来极大的便利，此外，还可以实现网页风格的相互统一。

　　3. 优化搜索引擎。网页设计中的搜索引擎主要是针对网页内容也就是文字、代码完成的，而传统的表格页面布局法中使用的页面代码过多，搜索引擎工作很难完成。但是 DIV + CSS 页面布局法中的网页代码简洁，在进行搜索引擎工作的时候，只需要将被搜索的内容从 HTML 文档中的代码进行搜索即可，搜索引擎只需要输入搜索内容的关键词，减少了繁复的搜索内容，提高了搜索引擎工作的效率，减少了大量的工作时间。

　　（ 二） DIV + CSS 布局在网页设计中的具体应用路径。DIV+ CSS 这一布局法在网页设计学科的教学过程中有着重要的作用，但是其技术性较高，操作困难，这就需要老师在教学过程中通过以下路径提高教学质量。

　　1. 教学内容。目前，我国多数网页设计课程采用的教材在DIV + CSS 布局这方面的讲解都是从含义讲起，再分析字体、表格、图像等属性，内容散乱无章，学生学起来也显得十分困难。因此，应该从教学内容的制定上实现创新，教学内容由简单到困难，不断深入了解其具体含义。教学内容困难度的由浅及深，可以使学生在轻松愉悦的氛围中学习，激发学生的学习兴趣，这样网页设计这一学科的教学质量才能得到进一步的提高，学生自身的知识能力水平也将得到大幅度的进步。

　　2. 教学方法。随着社会的发展进步，我国教学事业也得到了飞速的进步，教学理念都发生了巨大的改变，在当今教学活动中，应该彰显学生在课堂中的主体地位。这就需要从教学方法开始作出改变。传统的网页设计课程都是通过老师控制学生电脑演示设计过程来完成的，这种讲课方法学生无法亲自动手参与到课堂教学中，老师讲完后让学生自己输入代码，学生就被动输入代码，这样学生的思维得不到培养，教学质量也将受到限制。因此，老师应该创新教学方法，充分利用先进的多媒体技术，不再操作学生的电脑，让学生自己动手，自主思考问题，这样教学质量才能得到提高。

　　3. 教学评价。传统的网页设计教学考核主要是通过试卷完成的，这不符合这一学科的特征，因此，老师要在教学评价上实现创新，可以通过综合课程设计以及期末机房考试这两部分实现对学生的考核，既可以检查学生平常上课中综合案例的掌握情况，又可以检测学生的网页设计情况，教学评价体系的创新对推动学生的学习有着重要的作用。

　　四、结语。

　　总体说来，在当今社会形势下，各院校都要综合考虑社会市场对网页设计领域人才的需求以及这一学科自身的特点，制定合理的教学内容、教学方法，提高学生的综合素质，重视 DIV +CSS 布局在网页设计教学过程中的应用，使学生充分掌握这一技术。

　　【参考文献】

　　[1]黄玉春，陈霞。 DIV + CSS 布局在网页设计教学中的应用研究[J]. 电脑知识与技术，2013,10

　　[2]王爱菊，杨金川。 DIV + CSS 布局在《网页制作》课程中的教学改革探究[J]. 无线互联科技，2015,5