网页设计教学论文范文

　　为了解决上述问题，DIV+CSS布局技术应运而生。DIV+CSS布局技术采用HTML中的div进行整体布局，之后采用CSS（CascadingStyleSheets）即层叠样式表进行网页的表现设定。这样的好处是：网站的内容与表现完全分离，网站的维护与修改更加容易，便于搜索引擎检索到自己的网站[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.2CSS的语法

　　之后讲解CSS的基本语法，重点是CSS选择器的使用。主要是让学生掌握以下四种选择器[3]：

　　⑴id选择器，id选择器可以为标有特定id的HTML元素指定特定的样式。id选择器以"#"来定义。并且，id属性只能在每个HTML文档中出现一次。

　　⑵类选择器，类选择器以一个点号显示，使用了html标签的class属性。class属性可以在每个HTML文档中出现多次。

　　⑶标签选择器，针对某一个或某一组便签进行设定。

　　⑷通用选择器，用“*”表示，用来定义所有元素对象的样式。

　　对于以上知识的学习，不能停留在老师讲学生听的模式，而是要采取讲、练结合的方式。

　　此外对于层叠次序要让学生理解，当同一个HTML元素被不止一个样式定义时，究竟哪个样式起作用。优先级由高到低分别为：内联样式、内部样式表、外部样式表、浏览器缺省设置。其中，外部样式表使用频率最高；浏览器缺省设置对于没有设置样式表的元素起作用，每个浏览器的默认设置并不完全相同，要让学生注意。

　　2.3CSS中框模型的理解

　　学生学习了HTMl代码和CSS的语法结构后，即完成了基本知识的学习。深入理解CSS中框模型是掌握DIV+CSS布局的关键。

　　框模型如图1所示。元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。所以，一个元素的背景颜色，应用于由内容和内边距、边框组成的区域。在CSS中，width和height指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸[4]。

　　要理解框模型对于内边距和外边距的理解至关重要，但是学生往往在内、外边距的理解上存在困难。教师在讲解的时候，可以在页面中输入一个div标签，在这个div标签里输入一些文字，并添加背景颜色。先将它的内边距和外边距都设为0，宽和高都设为40px，让学生观察相应的结果。将它的内边距设为20px，让学生看看发生了什么；之后将这个div标签的外边距设为20px，看看发生了什么。通过以上的讲解，学生对于框模型会有一个清晰的认识。

　　2.4CSS中的浮动

　　浮动布局是进行DIV+CSS布局的主要方式，采用float属性的元素可以形成一个块级框向左或向右浮动。

　　div标签可以把网页页面划分为若干个独立的部分，便于网页页面的布局和组织。但是采用div标签的默认行为往往无法达到自己所需要的布局效果。如图2所示，当需要把Content部分划分为Left和Main两个独立的部分进行布局时，就需要为相应的div标签采用浮动。当然，不管是向左浮动还是向右浮动，都会影响div标签的两边，从而打破了原有的文档流，所以对于后续的div标签，当需要取消浮动时需要采用clear属性[5]。浮动布局是DIV+CSS布局的主要形式，必须让学生掌握。教学实践发现，学生对于浮动的概念是能够理解的，但是在使用上存在问题。比如：对于上面的例子而言，有一部分学生在添加浮动属性的时候，只给id属性为Left的div标签添加了浮动，忽略了id属性为Main的div标签对于浮动的需要。针对此问题，教师在讲解时需要耐心，并且边讲解边演示，加深学生的认知。

　　2.5块状元素与内联元素

　　块级元素：一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度（width）高度（height）起作用。常见块状元素为div和p。

　　内联元素：内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度（width）和高度（height）不起作用。常见内联元素为“a”。

　　块级元素和内联元素的转化通过display属性来完成。

　　块级元素和内联元素是DIV+CSS布局中的重要概念，对于它们的理解，学生只要掌握了框模型就很容易理解。所以，在讲解块级元素和内联元素时，重点是关注它们的不同，并复习一下框模型即可。

　　2.6DIV+CSS布局要点

　　学习完以上部分，即完成了DIV+CSS布局的主要知识的学习，之后学生就可以进行布局练习了。对于初学者而言，一些布局要点还是需要教师指出的，本人总结了如下两点。

　　⑴针对网页层次结构，给每个元素准确命名：网页的布局都是从整体到细节，在布局前需要根据页面情况将页面划分为若干了独立的部分，并通过div标签进行布局。对于每个独立部分需要设定直观的名字，便于css代码的书写和以后的维护[6]。

　　⑵对于不同浏览器而言，对于相同的HTML标签设置了不同内边距和外边距数值，为了保证在不同的浏览器中取得同样的布局效果，需要清除浏览器默认的内边距与外边距。

　　margin：0；

　　padding：0；

　　}