基于案例教学法的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] 曾顺.精通网页设计padding是什么意思css+div网页样式与布局[m].北京：人民邮电出版社，2007.
[3] 李烨.别具光芒div+css网页布局与美化[m].北京：人民邮电出版社，2008.

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。