计算机时代２０１３年第９期 ・ ５９ ・ ‘‘ 网页设计’’课程中Ｄ Ｉ Ｖ＋ＣＳＳ布局技术的教学 孟庆轩 （北京现代职业技术学院，北京１０１３００） 摘要：ＤＩＶ＋ＣＳＳ布局技术已经成为当下流行的网页布局技术，文章探讨了在“网页设计”课程的教学方法，该方法能够 让学生利用ＨＴＭＬ和ｃｓｓ（层叠样式表）代码书写进行网页布局。 关键词：ＤＩＶ＋ＣＳＳ布局；网页设计；ＨＴＭＬ；ＣＳＳ 中图分类号：Ｇ６４２ 文献标志码：Ａ 文章编号：１ ００６—８２２８（２０１ ３）０９—５９—０２ Ｔｅａｃｈｉｎｇ ｏｆ ＤＩＶ＋ＣＳＳ ｌａｙｏｕｔ ｔｅｃｈｎｉｑｕｅｓ ｉｎ”、Ⅳｅｂ ｄｅｓｉｇｎ”ｃｏｕｒｓｅ Ｍｅｎｇ Ｑｉｎｇｘｕａｎ （Ｂｅｉｊｉｎｇ Ｍｏｒｄｅｎ Ｖｏｃａｔｉｏｎａｌ ａｎｄ乃如ｎ如 Ｃｏｌｌｅｇｅ，Ｂｅｉｊｉｎｇ １０１３００，Ｃｈｉｎａ） Ａｂｓｔｒａｃｔ：ＤＩＶ＋ＣＳＳ ｌａｙｏｕｔ ｔｅｃｈｎｉ￣ｅｓ ｈａｓ ｂｅｃｏｍｅ ａ ｐｏｐｕｌａｒ ｗｅｂ ｐａｇｅ ｌａｙｏｕｔ ｔｅｃｈｎｉｑｕｅ ｃｕｒｒｅｎｔｌｙ．Ｔｈｅ ｔｅａｃｈｉｎｇ ｍｅｔｈｏｄ ｉｎ”Ｗｅｂ ｄｅｓｉｇｎ”ｃｏｕｒｓｅ ｉｓ ｄｉｓｃｕｓｓｅｄ ｉｎ ｔｈｉｓ ｐａｐｅｒ，ａｎｄ ｉｔ ｃａｎ ｍａｋｅ ｓｔｕｄｅｎｔｓ ｍａｓｔｅｒ ｔｈｅ ｌａｙｏｕｔ ｍｅｔｈｏｄ ｗｉｔｈ ＨＴＭＬ ａｎｄ ＣＳＳ（Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔ）ｃｏｄｅ． Ｋｅｙ ｗｏｒｄｓ：ＤＩＶ＋ＣＳＳ ｌａｙｏｕｔ；Ｗｅｂ ｄｅｓｉｇｎ；ＨＴＭＬ；ＣＳＳ ０引言 而代码的书写是他们不容易接受的。所以在进行网页设计教学 网页设计是高职计算机专业的一门专业基础课程，该课程 的过程中，我们利用课程前期的若干课时讲解Ｄｒｅａｍｗｅａｖｅｒ软 重点讲解网页的布局技术。现阶段主流的网站都采用了ＤＩＶ＋ 件的使用，采用的布局方法是表格布局。此时主要采取 ＣＳＳ布局技术，如何开展这方面的教学是需要网页设计课程 Ｄｒｅａｍｗｅａｖｅｒ软件的设计视图进行操作，学生易于接受。不过 工作者进行研究与实践的。本文对此进行了探讨。 在讲解的时候，不仅要讲解软件的使用，还要讲解相应自动生 成的ＨＴＭＬ代码，让学生通过界面操作建立的网页元素和相应 １ ＤＩＶ＋ＣＳＳ布局简介 的ＨＴＭＬ代码建立起初步的对应关系。 在以前的网页布局中大都采取表格布局，此种布局方法采 例如：对于链接的使用，在设计视图中只需要选择网页上 用Ｄｒｅａｍｗｅａｖｅｒ软件的设计视图进行操作，在操作上虽然简 的图片或文字，之后在属性面板中的“链接（Ｌ）”中设置即可。 单、直观，但是却存在诸多缺点：源代码存在大量的冗余代码、 在讲解的时候还需要把Ｄｒｅａｍｗｅａｖｅｒ切换到代码视图，讲解 页面结构与表现混杂在一起不利于信息的检索、不利于网站的 ＨＴＭＬ代码中＜ａ＞标签的语法结构。在学生自己做练习的时 维护与修改 。 候，鼓励学生结合ＨＴＭＬ代码进行操作，让他们对ＨＴＭＬ代码 为了解决上述问题，ＤＩＶ＋ＣＳＳ布局技术应运而生。ＤＩＶ＋ 有个初步的认知。 ＣＳＳ布局技术采用ＨＴＭＬ中的ｄｉｖ进行整体布局，之后采用 接下来对ＨＴＭＬ代码进行综合的讲解与练习，让学生掌握 ＣＳＳ（Ｃａｓｃａｄｉｎｇ Ｓｔｙｌｅ Ｓｈｅｅｔｓ）即层叠样式表进行网页的表现设 基本ＨＴＭＬ标签的使用。此时，可以特别提出ｄｉｖ标签在以后 定。这样的好处是：网站的内容与表现完全分离，网站的维护 布局中的作用，让学生初步认识ＤＩＶ＋ＣＳＳ布局。 与修改更加容易，便于搜索引擎检索到自己的网站 。 ２．２ ＣＳＳ的语法 但是ＤＩＶ＋ＣＳＳ布局技术相对于表格布局而言也存在布局 之后讲解ＣＳＳ的基本语法，重点是ＣＳＳ选择器的使用。主 方法不直观，不容易掌握的缺点，学生会因此在学习的过程中 要是让学生掌握以下四种选择器 ： 困难重重，本文针对这些问题进行了探讨。 （１）ｉｄ选择器，ｉｄ选择器可以为标有特定ｉｄ的ＨＴＭＬ元素 ２教学难点与重点的化解 指定特定的样式。ｉｄ选择器以”＃”来定义。并且，ｉｄ属性只能在 ２．１让学生熟悉ＨＴＭｌ代码 每个ＨＴＭＬ文档中出现一次。 进行ＤＩＶ＋ＣＳＳ布局的前提是熟悉ＨＴＭＬ代码的使用。对 （２）类选择器，类选择器以一个点号显示，使用了ｈｔｍｌ标签 于高职院校的学生而言，软件的直观操作是他们容易接受的， 的ｃｌａｓｓ属性。ｃｌａｓｓ属性可以在每个ＨＴＭＬ文档中出现多次。 收稿日期：２０１３—７ １５ 作者简介：孟庆轩（１９８２），男，北京市顺义区人，硕士，主要研究方向：计算机三维动画制作，数据仓库技术。 ・ ６２ ・ Ｃｏｍｐｕｔｅｒ Ｅｒａ Ｎｏ．９ ２０１ ３ 示各院系的学生人数，需要再次添加学号字段，并且设置其总 计行为计数，交叉表行为行标题 ，如图３所示。 所在院系 ｛生别 字段： 表： ｔＳｔｕｄ 总计： 分组 交叉表： 行标题 蝈 ｌ静 中行标题字段必须通过计算得到，设置为“年级：ｌｅｆｔ（［学号】，４）”。 在交叉表查询中值字段可以是表达式。某企业数据库中 人数：学号 学号之计数：学号 ｔＳｔｕｄ ｔＳｔｕｄ 工资表包括：员工ＩＤ、基本工资、住房补贴、保险和岗位工资等 字段，部门人员表中有员工ＩＤ、姓名、职位、部门ＩＤ字段，部门 表中有部门ＩＤ和部门名称字段ｍ 。用交叉表查询统计不同部 ｔＳｔｕｄ 分缎 列标题 计数 行标题 计数 值 图３带小计项的查询设计网格 门男女职工年工资支出，则设置字段行为“年工资支出：ｓｕｍ （［基本工资】＋【住房补贴】＋【保险】＋【岗位工资Ｊ） ｌ２”，总计行为 “表达式”，交叉表行为值。 以上几个简单案例能够帮助学生正确理解交叉表中行字 段、列字段和值字段的作用，并且能够区分交叉表查询和总计 ３结束语 本文对交叉表查询的教学过程进行探讨，通过采用阶梯式 查询。 ２．２交叉表查询向导 教学法，设计由易到难的教学案例，对查询结果进行对比分析， 利用交叉表查询向导可以在系统的提示下，快速地创建一 帮助学生理解交叉表查询中三类字段的作用，并帮助学生能够 设计较为复杂的交叉表查询，从而提高交叉表查询的教学效果。 参考文献： 【１】南丽丽．阶梯式教学法在Ｃ语言教学中的应用【Ｊ】．计算机教育， ２００８．７：７５－７６ 个交叉表查询，但是不能使用条件和自定义字段。 ２．３带条件的交叉表查询 统计各院系男女、生中入学成绩超过５２０分的人数，需要设 置入学成绩字段的总计行为“条件” ，但是交叉表行为空，如图 ４所示 字段： 所在院系 性别 表： ｔｓ挑ｄ ｔｓｔｕｄ 总计： 分组 分组 【２】梁华，陈振，张波．案例驱动的ＡＣＣＥＳＳ程序谩计教学改革【Ｊ 汁算机 教育，２０１１．２：２６—２９ 学号之计 入学成绩 ｔＳｔｕｄ ｔＳｍｄ 【３】刘淑娴，阿里甫・库ｔｒ，班，李晓华．简单案例为ｉ线的教学模式在Ｃ语 言教学中的应用【Ｊ】．计算机教育，２０１１ ４：８９—９４ 【４】李严．（＜Ａｃｃｅｓｓ数据库程序设计》教学方法的辑究【Ｊ】．吉林省教育学院 学报，２０１０．１０：１４５—１４６ 交叉表： 行标题 稍 序： 条件： 列标题 计数 值 条件 ＞５２Ｏ 【５】纪澍琴，刘威，王宏志ｉ编．Ａｃｃｅｓｓ教据库应用基础教程【Ｍ】．北京邮电 大学出版社，２００７ 图４带条件的查询设计网格 ２．４交叉表查询中表达式的使用 【６】佘国计算机等级考试命题研究组．全国计算机等级考试上机考试与 题库分析一二级Ａｃｃｅｓｓ［Ｍ］：￣￣京邮电大学出版社，２０１１． 利用交叉表查询，统计各年级男、女生的人数，学号字段的 前４位表示年级 ，年级作为行字段，性别作为列字段。该查询 【７】楚艳萍，程普．Ａｃｃｅｓｓ交叉表查询研究【Ｊ】．福建电脑，２０１Ｏ．９： １７４—１７５鄹 （上接第６０页） ｛ ｍａｒｇｉｎ：Ｏ； ｐａｄｄｉｎｇ：Ｏ； ３结束语 如上所述，我们采用循序渐进的教学方法先让学生熟悉 ＨＴＭＬ代码，为进行ＤＩＶ＋ＣＳＳ布局教学打下基础；之后讲解 ＣＳＳ基本语法、框模型、浮动、块状元素与内联元素，其中框模型 的理解最为重要。此外，本文还总结了学生所遇到的布局要点。 ） 对于ｄｉｖ、图片等元素的水平居中，ＣＳＳ没有设定单独的属 性，需要利用左外边距和右外边距的设定来达到水平居中的效 果。不过在使用前，需要将内联元素转化为块状元素： ＃Ｎａｖ，＃Ｃｏｎｔｅｎｔ，＃Ｆｏｏｔｅｒ（ ｍａｒｇｉｎ—ｌｅｆｔ：ａｕｔｏ； 本文给出的方法为学生尽快掌握ＤＩＶ＋ＣＳＳ布局提供了帮助。 参考文献： ［１】郭军军，常用网页布局对比研究【Ｊ】．信息技术，２０１２．１１：１０８—１１０ 【２１郑宁宁．浅析ＤＩＶ＋ＣＳＳ网页设计技术【Ｊ】．山东堵农业管理干部学院 学报，２００８．６：１６９—１７０ ｍａｒｇｉｎ—ｒｉｇｈｔ：ａｕｔｏ； ） ３】袁红霞．适用ＤＩＶ＋ＣＳＳ设计网站布局 ．科技咨询，２０１２．３３：２２ 对于文字的定位而言，ＣＳＳ提供了文字水平居中的ｔｅｘｔ—ａｌｉｇｎ 【４】梁静琳．ＤＩＶ＋ＣＳＳ布局技术在网页设计中的应用［Ｊ】．武沮工程职业 属性，而对于文字的垂直居中并没有提供相应的屙陆。文字的 【垂直居中可以通过ｌｉｎｅ—ｈｅｉｇｈｔ属性来完成。当文字所在的元 素的高与行间的距离一样时，可以达到文字水平居中的效果： ＃１ｉｎｋ｛ ｈｅｉｇｈｔ：３８ｐｘ； ｌｉｎｅ—ｈｅｉｇｈｔ：３８ｐｘ； 技术学院学报，２００９．３：４２—４３ 【５１梁小芳网页布局中的浮动与定位应用研究【Ｊ】．广东教育学院学报， ２０１０．６：８０－８１ ｆ６】林婷婷．以Ｄｉｖ＋ＣＳＳ思想引导学生学习编写网页的新教法【Ｊ】．科技信 息．２００９．１１：４６０ ） １７１ ｗ３ｓｃｈｏｏｌ线教程，ｈ卸： ．ｗ３ｓｃｈｏ。ｉ．ｃｏｒｒ１．ｃｎ／ｉｎｄｅｘ．ｈｔｍｌ 匿