基于案例教学法的CSS+DIV网页表单圆角的制作

开篇：润墨网以专业的文秘视角，为您筛选了一篇基于案例教学法的CSS+DIV网页表单圆角的制作范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

摘 要：CSS+DIV是目前网页设计中所使用的核心技术，如何引导学生更好的掌握这门技术，本文提出案例教学法，学生通过设计网页表单圆角这个案例，进而掌握css+div的各项知识点，避免以往先学习代码，而不知其用的痛苦，让学生体会在乐中学习。

关键词：案例教学法 CSS+DIV 样式选择器

中图分类号：G712 文献标识码：A 文章编号：1673-9795（2013）04（b）-0168-01

随着现代网页设计技术的发展，CSS+ DIV成为网页设计中的核心技术，如何制作精美的网站，本文旨在引导学生分析网页表单圆角案例，运用CSS+DIV知识点完成设计。

1 案例教学法

案例教学法由美国哈佛商学院提出，是一种以案例为基础的教学法，通过学生间的相互讨论或研究，提高学生的学习兴趣，从而培养学生主动学习的能力。本文用CSS+DIV制作表单圆角案例，形成学生思考和分析问题的能力，从而提高学生制作网页的技能。

案例教学法以注重学生的基本能力为基础，避免单纯理论知识的学习，在实践过程中，可以鼓励学生进行单独的思考和创造，提高学生学习的积极性。

2 表单

表单（Form）作为网页与用户接触最直接、最频繁的页面元素，其在网站用户体验中占有最重要的位置。而表单也常常用于用户注册、登录、投票等功能，用于吸引新用户，留住新用户的重要工具。设计一个表单很简单，但设计一个用户体验高，漂亮的表单却并不易。如果表单设计用户体验不高，无疑将会对网站用户粘性大大降低。

3 设计过程

3.1 展示案例，启发思考

把此案例效果图展示给学生，吸引学生的注意力，激发学生探究学习案例的热情，让学生带着例子去探讨课本上的理论知识，为学生学习理论知识打下坚实的基础。

3.2 探究讨论案例，解决问题

根据表单圆角的案例，让学生展开分析和讨论在案例中所用到的理论知识，分析表单的布局结构、分析实现的代码，学生试着写出CSS代码，并预览调整，测试优化页面。

3.3 总结和点评

教师通过学生完成的案例进行总结和点评，分析不同学生在案例中存在的优、缺点，有针对性的进行深入的分析，对出现的问题从不同角度和方法，与学生共同找出最佳解决方案。最后对此案例所涉及的理论知识和代码进行全面的总结：

3.3.1 网页设计的核心概念

（1）CSS+DIV布局：利用CSS样式控制DIV标签的位置来实现网页的布局。

（2）盒模型：盒模型是CSS的基础，它认为页面上的每个元素都被看作一个矩形，这个矩形由内容、填充（padding）、边框（border）和边距（margin）构成。

（3）位置控制（position）属性：位置控制属性可以确定元素在网页中的位置，分为静态定位（static）、相对定位（relative）和绝对定位（absolute）。

（4）浮动（float）属性：浮动属性是CSS布局中很重要的属性，用于控制元素左右移动，分为不浮动（none）、左浮动（left）和右浮动（right）。

（5）选择器：CSS的主要作用就是将一系列的样式规则应用于文档中，使得文档中应用了这个规则的内容实现某种样式。这一系列的样式规则就叫做选择器。文档用了不同的选择器，就呈现不同的样子。选择器主要分为标签选择器、类选择器和ID选择器。

（6）显示与可见性：显示（display）一般用在改变属性（如导航），增加交互（如标签），显示分为块元素（block）、行内元素（inline）和无（none）。可见性分为可见（visible）和隐藏（hidden）。

（7）常用CSS属性：常用的CSS属性包括字体（font）属性、背景（background）属性、边框（border）属性、边距（margin）属性、填充（padding）属性和列表（list）属性。

3.3.2 代码

网页表单设计的主代码及解释如下：

4 结语

CSS+DIV方法实现网页设计已成为当前网页设计的一种趋势，本文旨在通过案例教学法使学生更好的掌握CSS+DIV的基础知识，激发学生学习的兴趣，调动学习的主动性，制作出更漂亮的网页。

参考文献

[1] 谢学峰.基于DIV+CSS的网页设计技术[J].计算机光盘软件与应用，2011（11）：82，84.

[2] 曾顺.精通CSS+DIV网页样式与布局[M].北京：人民邮电出版社，2007.

[3] 李烨.别具光芒DIV+CSS网页布局与美化[M].北京：人民邮电出版社，2008.