DW的边距设置与网页布局.docxVIP

《DW的边距设置与网页布局》教学设计 一、教学目标： 1.了解网页的基本结构； 2.了解网页布局相关内容。 二、学习者特征分析： 随着互联网技术的发展，学生对网页的访问次数不断增加，但对网页的设计与制作技术并不是十分了解，内容的编排与放置的位置不能轻松自如地进行，甚至有时不能精准调控，为网页设计与制作增加了难度。 三、教学重点、难点： 重点：各部分的位置关系； 难点：精准确定位置 四、教学方法： 合作学习、探究学习、实践 五、教学过程： 1.引入： 先通过学生访问一些网站的相关网页，对相关网页的设计风格及形式有一些大概的了解和认识。 注重形式，不注重内容，为本节课的后续内容服务。 提问：你访问的网页对你留下哪些深刻印象？它的设计理念新颖吗？有一定的美感吗？ 学生在浏览的同时，会不时地、有意识地关注相关内容。 设计意图：网页设计对学生的要求是多方面的，而学生并不是都有基础，一开始需要借鉴、学习，把学来的东西再内化为自己的知识，从而达到学习的目的。 2.传授新知： Margin-top Margin-top Margin-bottom Margin-left Margin-right Border-top Border-bottom border-left border-right padding-top padding-left padding-right content 内容 padding-bottom padding-bottom 一个页面被分成几块，每块分别存放不同的内容，因此，在网页设计与制作过程中，对这些知识的了解是十分必要的，可以精准把控网页元素的位置。 Margin 页边空白；白边。Margin是css（层叠样式表）语法，用于声明设置所有当前或指定元素所有外边距的宽度，或设置各边上外边距的宽度。Margin属性可以单独改变元素的上、下、左、右边距，也可以一次改变所有的属性，接受任何长度单位、百分数值甚至负值。 任务：要想实现如下图效果，该如何做呢？ 按照一般的网页设计方法，不太好实现这样的效果，我们可以用css编写如下代码，用以实现以上图形效果。 head body div class=box1p class=wz欢迎来到DW世界！/p/div /body style .box1 { border:60px solid pink; border-top-color:#666; border-left-style:double; border-bottom-color:#CCC; padding:20px; } .wz { text-align:center; } /style /head 通过练习，学生可以掌握这些基本的操作，还可以进行知识的迁移，把相关知识应用于其它网页设计与制作过程中。 拓展：上图中线条和颜色进行相应更改，内、外边距适当增加。 六、总结、评价 对课堂内容总结评价 学生先是进行自评和互评，然后指导学生采用有效策略对内容的准确性、指向的目的性作出合理判断。