浅谈网页布局技术的教学实践

李　敏

（广西机电职业技术学院，广西　南宁　530007）

浅谈网页布局技术的教学实践

李敏

（广西机电职业技术学院，广西南宁530007）

随着万维网联盟（World Wide Web Consortium，W3C）对互联网规范的致力推广，Div+CSS布局技术已成为网页设计和开发过程中重要的技术组成部分。在教学过程中，需要解决如何让学生对网页布局难点有深入理解并能学以致用的问题。文章对Div+CSS布局技术的教学方法和内容进行探讨。

网页布局；HTML CSS；教学

广西机电职业技术学院计算机信息管理专业将培养方向定位为网站设计与维护方向。现阶段主流网站都采用Div+CSS布局技术。Div+CSS技术的实现，使得网站的内容和样式完全分离，有利于网站的维护与修改。此技术所涵盖的内容丰富，实践操作时方式灵活多样。

1　网页布局前期课程的教学

对超文本标记语言（Hyper Text Markup Language，HTML）代码的熟悉程度是学生能否熟练掌握DIV+CSS布局技术的重要条件。而对于高职院校的学生而言，HTML代码中的各种标签，不同的格式是很难掌握并灵活使用的。因而，教师在不同课程的教学过程中，对HTML代码的讲解逐渐深入，是非常有必要的。

在第一学期开设的“Dreamweaver网页制作”的课程中，注重Dreamweaver软件的学习，要求学生熟练掌握使用表格布局网页结构，并使用菜单选项或工具，在表格中添加网页常用元素，并掌握层叠样式表（Cascading Style Sheets，CSS）的基础知识以及使用CSS修饰网页。学生在该课程中使用设计视图进行操作，简单、直观，学生易于接受。

在讲授“Dreamweaver网页制作”课程时，教师既要讲解软件中菜单选项、工具和面板的使用，在设计视图中出现的网页对象及其属性设置的效果；也需要讲解在代码视图中自动生成的对应HTML代码。让学生通过可视化界面操作，创建或设置的网页元素及其属性，建立与之相对应的HTML代码初步的联系。例如，教师在设计视图讲解时，按下键盘的键或+，都是回车的效果，只是行距有所区别；与此同时还需要切换至代码视图讲解自动生成的和
标签的语法结构。又例插入图像，在设计视图中，选择“插入”菜单的“图像”选项或单击插入面板的“图像”按钮，其属性则在属性面板中进行相关设置即可；而在代码视图中需要讲解标签及其属性的HTML代码。

2　网页布局课程的教学

在第二学期开设的“Div+CSS布局”的课程中，要求学生掌握HTML和CSS的基本语法，能够熟练地使用Div进行页面整体布局，并添加网页对象；能够使用CSS样式技术美化页面。Div+CSS布局技术相对于表格布局而言，存在布局方法不直观，不容易掌握的缺点，学生会因此在学习的过程中困难重重［1］。

HTML代码再加上CSS样式中多样的属性设置，内容繁多，不易记忆。在“Div+CSS布局”的教学中，教师需要对HTML代码的常用标签进行复习再练习，同时还需要让学生充分认识到，并不是只有DIV标签能作为容器来安排布局。其实在XHTML页面中，所用的标签大部分是容器，可被当作容器使用。页面上的每个容器都占有一定的位置，有一定的大小。页面上的每个容器都会影响其他容器的排布，它们相互作用，形成一个页面的布局。如 标签，对页面元素的布局会起到很大作用［2］。针对CSS样式，教师会利用Dreamweaver中设置CSS样式时，各种属性的英文显示界面，在不断练习中，强化学生对margin，padding这些属性的英文书写的印象，并且鼓励学生直接在代码视图直接编写HTML代码。

通过两门课程的学习，学生应该能够在利用现有图像素材和页面效果图，使用DIV标签采用盒模型在网页中排版定位；再使用CSS样式控制DIV标签和其他网页元素的样式。但是，大部分学生学习主动性不强，往往是在一个假期过后，就把50%的知识“还”给老师。培养学生网页前端开发的能力，应该加强实战练习，在练习中发现问题解决问题，进而考虑将Div+CSS布局的内容融入各学期的相关课程中。

3　网页布局技术在后续课程的使用

第三个学期开设专业课程“网页界面设计”。主要是通过学习网页色彩搭配，网页元素的设计、排版与布局，形象设计，广告传媒等多个方面的理论知识并结合实例练习，最终进行常见网站类型页面效果图的设计与制作。如何在课程中加入Div+CSS布局的内容呢？

前期的课程主要要求学生掌握Dreamweaver软件以及Div+CSS布局的技术，学生缺乏网页布局、色彩美学、美工设计等专业知识，导致制作的网页布局和版面不佳，缺乏设计美感。

而通过“网页界面设计”课程的深入学习，逐步让学生掌握所缺的专业知识，又已具备了一定的布局技术水平，需要充分地结合起来。通过实例练习，学生制作出网页效果图；教师讲授切片、图像导出等相关知识；通过导出的图像，在Dreamweaver中进行Div的布局，CSS样式美化，并最终完成网页。在Div布局的授课中，教师要求学生对各类标签的使用和CSS样式的设置等做到更规范、更有效。例如，在命名ID和类名时，要定义有意义的名称；不要过度地使用Div标签；将CSS样式存放成不同的*.css文件，以便各级页面、样式的统一管理等。

学生通过一系列操作的完成，了解到各环节都是相互影响或是相辅相成的。例如，网页效果图细节不注意，切图后导出图像，尺寸不一，容易产生混乱的布局效果；图像格式使用哪一种导出格式，会影响到图像在浏览器的浏览效果甚至显示；CSS样式可以实现水平填充的渐变背景，因而在效果图只需要切一张细长的、有渐变效果的图片即可，有效地控制网页文件量。通过这样一系列的练习，能将“Dreamweaver网页制作”“Div+CSS布局”和“网页界面设计”3门课程，所要求掌握的技能付诸实践。从学生的反应来看，实践效果较好，有效地避免学生“学一门忘一门”的情况。

第四和第五学期开设专业课程“专业项目Ⅰ”和“专业项目Ⅱ”。这两门课程综合性强、实用性强。主要是通过综合如网页三剑客、Photoshop，Javascript等课程所学，重点培养学生Web前端网页制作的技能。在实际教学中，以案例为主线，以项目网站建设为目标，以工作过程进行课程内容整合［3］。每个项目网站都体现了一个完整网站的建设过程，在网站建设的过程中把静态网页开发的知识和技能融入教学中，将学习目标和工作目标有机地结合在一起［4］。随着行业对制作HTML5和CSS3技术人才的需求增多，在课程中会添加使用HTML5和CSS3布局以及JavaScript和jQuery特效的制作，浏览器bug（电脑系统中未被发现的缺陷或问题）和bug修复，解决浏览器兼容性及优化等实用技巧。并且要求学生完全使用WebStorm进行HTML5的编辑。

以课程其中一个项目网站为例。将广西金沛教育的官方网站（http：//www.gxjpjy.com/）进行页面改版。网站各级页面存在版式过长，插图变形，使用表格布局等问题。按照网页设计的基本流程，只要求学生完成首页和二级页面。将课程分解为7个子项目：重新规划网站，整理素材，分析并重新设计，制作效果图，布局美化各级网页并链接，添加特效，测试。总计32课时。

将HTML5和CSS3的新知识融入项目中。要求学生整合原网站所有素材，重新规划并设计制作效果图。然后在布局网页部分，要求所有网页使用HTML5布局，并在WebStorm中编写代码。教师指导学生在网页中添加多种CSS3新增的效果。比如将网页元素制作为圆角，制作多重页面背景、下拉菜单，给相关图片添加鼠标悬停的过渡效果，给标题添加阴影等。经过整个流程的实践操作，学生基本上都解决了原网站页面存在的问题，且较原网站，页面效果、动态效果、交互效果要优。

网页布局仍然是实践项目网站的重要部分。随着5个学期网页布局知识的持续学习和不断地练习，学生不再是看着网页效果图无从下手的状态，基本上都能独立完成各级页面的整体布局。但是，学生对细节往往容易忽略或者缺乏对细节的处理技巧。例如，表单对象文本框、菜单和按钮的美化；项目列表符号设置为图像后，与列表项中文字的垂直方向对齐效果；多种链接对象的定位和美化效果设置，等等。对于市面上的网站中典型的页面效果、样式效果，在课堂上也向学生介绍其制作技巧。

通过对教学内容及教学方法的改革，学生的网页布局技能得到了循序渐进地训练。布局由一张网页到整个网站，网站项目由简单到复杂，HTML，CSS代码由陌生到熟悉，技能由生疏到熟练。网页布局知识在各个学期的渗透，使学生既掌握了坚实的理论知识，又增强了实际动手能力，从而在今后的工作中能够学以致用，解决实际问题。

［1］孟庆轩.“网页设计”课程中DIV+CSS布局技术的教学［J］.计算机时代，2013（9）：59-60.

［2］闻立鸥.基于DIV+CSS的技能实训教学实践［J］.中国现代教育装备，2014（15）：84-86.

［3］张学林，段珊，胡波，等.案例教学法在网页设计与制作教学中的应用［J］.改革开放，2009（6）：17.

［4］冯燕.“网页前端开发”课程整体教学设计研究［J］.高教学刊，2015（15）：83-84.

Analysis on the teaching practice of Web page layout technology

Li Min
（Guangxi Technological College of Machinery and Electricity， Nanning 530007， China）

With the dedicating promotion ofW3C（World Wide Web Consortium）to the Internet standard， Div + CSS layout techniques has become an important part of technology in processes of web design and development. In the process of teaching， we need solve the problem of how to make students deeply understand the diffculties of web page layout and being able to apply their knowledge. In this paper， Div + CSS layout techniques of teaching methods and contents were discussed.

web page layout； CSS HTML； teaching

李敏（1980— ），女，广西陆川，讲师；研究方向：HTML5，UI设计。