网页设计教学论文范文

所属栏目：计算机应用论文
发布时间：2013-12-11 15:19:28  更新时间：2013-12-11 15:25:27

　　网页设计是高职计算机专业的一门专业基础课程，该课程重点讲解网页的布局技术。现阶段主流的网站都采用了DIV+CSS布局技术，如何开展这方面的教学是需要网页设计课程工作者进行研究与实践的。本文对此进行了探讨。

　　摘要：DIV+CSS布局技术已经成为当下流行的网页布局技术，文章探讨了在“网页设计”课程的教学方法，该方法能够让学生利用HTML和CSS（层叠样式表）代码书写进行网页布局。

　　关键词：DIV+CSS布局,网页设计,HTML,CSS

　　1DIV+CSS布局简介

　　在以前的网页布局中大都采取表格布局，此种布局方法采用Dreamweaver软件的设计视图进行操作，在操作上虽然简单、直观，但是却存在诸多缺点：源代码存在大量的冗余代码、页面结构与表现混杂在一起不利于信息的检索、不利于网站的维护与修改[1]。

　　为了解决上述问题，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；

　　}

　　对于div、图片等元素的水平居中，css没有设定单独的属性，需要利用左外边距和右外边距的设定来达到水平居中的效果。不过在使用前，需要将内联元素转化为块状元素：

　　#Nav，#Content，#Footer{

　　margin-left：auto；

　　margin-right：auto；

　　}

　　对于文字的定位而言，css提供了文字水平居中的text-align属性，而对于文字的垂直居中并没有提供相应的属性。文字的垂直居中可以通过line-height属性来完成。当文字所在的元素的高与行间的距离一样时，可以达到文字水平居中的效果：

　　#link{

　　height：38px；

　　line-height：38px；

　　}

　　3结束语

　　如上所述，我们采用循序渐进的教学方法先让学生熟悉HTML代码，为进行DIV+CSS布局教学打下基础；之后讲解CSS基本语法、框模型、浮动、块状元素与内联元素，其中框模型的理解最为重要。此外，本文还总结了学生所遇到的布局要点。本文给出的方法为学生尽快掌握DIV+CSS布局提供了帮助。

　　参考文献：

　　[1]郭军军，常用网页布局对比研究[J].信息技术，2012.11：108-110

　　[2]郑宁宁.浅析DIV+CSS网页设计技术[J].山东省农业管理干部学院学报，2008.6：169-170

　　[3]袁红霞.运用DIV+CSS设计网站布局[J].科技咨询，2012.33：22