《DIV+CSS布局技术在网页设计教学中的实践应用》-工学论文，计算机论文-论文范文参考-科学狗论文网

标题

DIV+CSS布局技术在网页设计教学中的实践应用

范文

周挺

摘要：《网页制作与设计》是中职计算机类专业的一门课程，DIV+CSS页面布局教学在这门课程中有着非常重要的现实意义和地位，学生往往习惯表格布局，对于DIV+CSS页面布局的应用无法很好理解和掌握，该文就如何在教学中有效应用DIV+CSS布局技术展开具体阐述。

关键词：DIV+CSS布局;网页设计;教学实践

中图分类号：G642? ? ? ? 文献标识码：A

文章编号：1009-3044（2021）10-0221-02

Abstract："Web page making and design" is a course for computer majors in secondary vocational schools. The teaching of DIV + CSS page layout has a very important practical significance and position in this course. Students are often used to table layout， and they can't understand and grasp the application of DIV + CSS page layout well. This paper expounds how to effectively apply DIV + CSS layout technology in teaching.

Key words：DIV + CSS layout; web design; teaching practice

1 引言

DIV 全称division意为“区分”，CSS全称为Cascading style Sheets，中文译作“层叠样式表单”。DIV+CSS，简单地说，就是以用DIV标签在HTML页面上进行布局，然后用CSS样式表对网页的字体、颜色、背景和其他效果进行更加精确的控制。

中职计算机网页设计课程教学引入DIV+CSS页面布局有着与时俱进的意义，它的教学进度安排在表格布局之后具有一定的科学性，学生不仅具备了表格布局的基础，而且通过对比，学生对DIV+CSS的优点会有更加明确的辨别。

2 DIV+CSS布局技术在网页设计教学中的应用

2.1 “画一画”盒模型布局的网页结构（整体布局）

在网页布局中最常用的布局方式是“上中下”，要设计一张网页，首先要引导学生分析网页结构，本网页由“logo、导航栏、位置栏、主体页、版权信息”等板块组成，我们用盒模型来布局网页。

我们先介绍盒模型，盒模型是将网页上每个HTML元素看作一个长方形的盒子，这是网页设计上的一大创新。CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒模型。

在实际教学时，会发现学生在面对一张效果页面时茫然失措、无从下手，原因是对页面的布局不清晰，因此要引导学生在草图上敢于划分，在明确盒子数量和位置后，插入DIV标签。要注意DIV标签是成对出现，该案例中的DIV代码框架如下：

随便看

科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。