“网页设计”课程中DIV+CSS布局技术教学.docVIP

“网页设计”课程中DIV+CSS布局技术教学 　　摘 要： DIV+CSS布局技术已经成为当下流行的网页布局技术，文章探讨了在“网页设计”课程的教学方法，该方法能够让学生利用HTML和CSS（层叠样式表）代码书写进行网页布局。 　　关键词： DIV+CSS布局； 网页设计； HTML； CSS 　　中图分类号：G642 文献标志码：A 文章编号：1006-8228（2013）09-59-02 　　0 引言 　　网页设计是高职计算机专业的一门专业基础课程，该课程重点讲解网页的布局技术。现阶段主流的网站都采用了DIV+CSS布局技术，如何开展这方面的教学是需要网页设计课程工作者进行研究与实践的。本文对此进行了探讨。 　　1 DIV+CSS布局简介 　　在以前的网页布局中大都采取表格布局，此种布局方法采用Dreamweaver软件的设计视图进行操作，在操作上虽然简单、直观，但是却存在诸多缺点：源代码存在大量的冗余代码、页面结构与表现混杂在一起不利于信息的检索、不利于网站的维护与修改[1]。 　　为了解决上述问题，DIV+CSS布局技术应运而生。DIV+CSS布局技术采用HTML中的div进行整体布局，之后采用CSS（Cascading Style Sheets）即层叠样式表进行网页的表现设定。这样的好处是：网站的内容与表现完全分离，网站的维护与修改更加容易，便于搜索引擎检索到自己的网站[2]。 　　但是DIV+CSS布局技术相对于表格布局而言也存在布局方法不直观，不容易掌握的缺点，学生会因此在学习的过程中困难重重，本文针对这些问题进行了探讨。 　　2 教学难点与重点的化解 　　2.1 让学生熟悉HTMl代码 　　进行DIV+CSS布局的前提是熟悉HTML代码的使用。对于高职院校的学生而言，软件的直观操作是他们容易接受的，而代码的书写是他们不容易接受的。所以在进行网页设计教学的过程中，我们利用课程前期的若干课时讲解Dreamweaver软件的使用，采用的布局方法是表格布局。此时主要采取Dreamweaver软件的设计视图进行操作，学生易于接受。不过在讲解的时候，不仅要讲解软件的使用，还要讲解相应自动生成的HTML代码，让学生通过界面操作建立的网页元素和相应的HTML代码建立起初步的对应关系。 　　例如：对于链接的使用，在设计视图中只需要选择网页上的图片或??字，之后在属性面板中的“链接（L）”中设置即可。在讲解的时候还需要把Dreamweaver切换到代码视图，讲解HTML代码中标签的语法结构。在学生自己做练习的时候，鼓励学生结合HTML代码进行操作，让他们对HTML代码有个初步的认知。 　　接下来对HTML代码进行综合的讲解与练习，让学生掌握基本HTML标签的使用。此时，可以特别提出div标签在以后布局中的作用，让学生初步认识DIV+CSS布局。 　　2.2 CSS的语法 　　之后讲解CSS的基本语法，重点是CSS选择器的使用。主要是让学生掌握以下四种选择器[3]： 　　⑴ id选择器，id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以#来定义。并且，id属性只能在每个HTML文档中出现一次。 　　⑵ 类选择器，类选择器以一个点号显示，使用了html标签的class属性。class属性可以在每个HTML文档中出现多次。 　　⑶ 标签选择器，针对某一个或某一组便签进行设定。 　　⑷ 通用选择器，用“*”表示，用来定义所有元素对象的样式。 　　对于以上知识的学习，不能停留在老师讲学生听的模式，而是要采取讲、练结合的方式。 　　此外对于层叠次序要让学生理解，当同一个HTML元素被不止一个样式定义时，究竟哪个样式起作用。优先级由高到低分别为：内联样式、内部样式表、外部样式表、浏览器缺省设置。其中，外部样式表使用频率最高；浏览器缺省设置对于没有设置样式表的元素起作用，每个浏览器的默认设置并不完全相同，要让学生注意。 　　2.3 CSS中框模型的理解 　　学生学习了HTMl代码和CSS的语法结构后，即完成了基本知识的学习。深入理解CSS中框模型是掌握DIV+CSS布局的关键。 　　框模型如图1所示。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。所以，一个元素的背景颜色，应用于由内容和内边距、边框组成的区域。在CSS中，width和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸[4]。 　　要理解框模型对于内边距和外边距的理解至关重要，但是学生往往在内、外边距的理解上存在困难。教师在讲解的