2024年3月6日发(作者：)

ＤＩＶ－｛－ＣＳＳ技术在网页布局中的应用研究　文章编号ｆ１００３—５８５０（２０１２）０４—００６４—０３　ＤＩＶ＋ＣＳＳ技术在网页布局中的应用研究　杨米娜　（山西建筑职业技术学院，太原０３０００１）　摘要：表格布局是网页教学中页面布局的入门方法，而ＤＩＶ＋ＣＳＳ是目前网页设计中比较流行的一种页面布局方式。针对网　页布局的应用变化，介绍了ＤＩＶ＋ＣＳＳ布局方式的使用方法，并通过一些实例说明ＤＩＶＷＣＳＳ布局的基本用法及使用技巧，同时提　出了引入ＤＩＶ十ＣＳＳ布局引起的网页设计教学的变化。　关键词：ＤＩＶ，ＣＳＳ，网页布局，页面设计　中图分类号：ＴＰ３９３．０９２　文献标识码：Ａ　Ａｐｐｌｉｅｄ　Ｓｔｕｄｙ　ｏｆ　ＤＩＶ＋ＣＳＳ　ｉｎ　Ｗｅｂ　Ｐａｇｅ　Ｄｅｓｉｇｎ　ＹＡＮＧ　Ｍｉ—ｎａ　（Ｓｈａｎｘｉ　Ａｒｃｈｉｔｅｃｔｕｒａｌ　Ｃｏｌｌｅｇｅ，Ｔａｉｙｕａｎ　０３０００１，Ｃｈｉｎａ）　Ａｂｓｔｒａｃｔ：Ｔａｂｌｅ　ｐａｇｅ　ｌａｙｏｕｔ　ｉｓ　ｔｈｅ　ｐｒｉｍａｒｙ　ｍｅｔｈｏｄ　ｏｆ　ｗｅｂ　ｐａｇｅ　ｌａｙｏｕｔ　ｉｎ　ｗｅｂ　ｔｅｅｈｉｎｇ，ａｎｄ　ａｔ　ｐｒｅｓｅｎｔ　ｔｈｅ　ＤＩＶ＋ＣＳＳ　ｉｓ　ａ　ｐｏｐｕｌａｒ　ｗｅｂ　ｐａｇｅ　ｌａｙｏｕｔ　ｍｅｔｈｏｄ　ｉｎ　ｗｅｂ　ｐａｇｅ　ｄｅｓｉｇｎ．Ｉｎ　ｔｈｉｓ　ｐａｐｅｒ　ｗｅ　ｄｉｓｃｕｓｓ　ｔｈｅ　ｕｓａｇｅ　ｏｆ　ＤＩＶ　＋ＣＳＳ　ｐａｇｅ　ｌａｙｏｕｔ　ａｃｃｏｒｄｉｎｇ　ｔｏ　ｔｈｅ　ａｐｐｌｉｃａｔｉｏｎ　ｃｈａｎｇｅ　ｏｆ　ｗｅｂ　ｐａｅ　ｌａｙｏｕｔ．Ｂｙ　ｓｏｍｅ　ｅｘａｍｐｌｅｓ　ｗｅ　ｅｘｐｌａｉｎ　ｔｈｅ　ｕｓｅ　ｓｋｉｌｌ　ｏｆ　ＤＩＶ＋ＣＳＳ　ｐａｇｅ　ｌａｙｏｕｔ，ｍｅａｎｗｈｉｌｅ　ｗｅ　ｐｕｔ　ｆｏｒｗａｒｄ　ｔｈｅ　ｃｈａｎｇｅｓ　ｏｆ　ｗｅｂ　ｐａｇｅ　ｄｅｓｉｇｎ　ｔｅａｃｈｉｎｇ　ｃａｕｓｅｄ　ｂｙ　ｉｎｔｒｏｄｕｃｉｎｇ　ＤＩＶ＋ＣＳＳ　ｐａｇｅ　ｌａｙｏｕｔ．　Ｋｅｙ　ｗｏｒｄｓ：ＤＩＶ，ＣＳＳ，ｗｅｂ　ｐａｇｅ　ｌａｙｏｕｔ，ｗｅｂ　ｐａｇｅ　ｄｅｓｉｇｎ　在网页设计教学中，一般学习网页设计软件　从实际应用情况来看，ＤＩＶ＋ＣＳＳ的优势十分明　显，已获得业内广泛认可和应用，并成为一种网页设计　标准。相应的，在网页设计教学中引用ＤＩＶ＋ＣＳＳ也　已是趋势，对传统网页设计教学产生了较大的影响。　Ｄｒｅａｍｗｅａｖｅｒ的使用方法，使用Ｄｒｅａｍｗｅａｖｅｒ设计页　面时，表格（Ｔａｂｌｅ）页面布局技术和ＤＩＶ＋ＣＳＳ布局技　术是使用最多的布局方法。　对于网页制作初学者来说，由于表格布局比较简　单、制作速度快、容易控制，是一种很好的入门方法。基　于表格布局的以上优点，现在很多网络公司给客户制　作网站（在客户没有要求使用ＤＩＶ＋ＣＳＳ的情况下）　１　ＤＩＶ＋ＣＳＳ简介　Ｉ．１　ＤＩＶ简介　ＤＩＶ是ＨＴＭＬ中的一个容器性质的元素，用来　为ＨＴＭＬ文档内大块（ｂｌｏｃｋ—ｌｅｖｅ１）的内容提供结构　还在使用表格布局网页。　随着网络技术的不断发展，早期的表格布局方式　越来越不能适应新的要求。随着Ｗｅｂ　２．０标准化设计　理念的普及，基于ＤＩｖ＋ＣＳＳ的布局方式开始流行，　小到个人网站、大到门户网站均采用Ｄ１Ｖ＋ＣＳＳ进行　网页布局。ＤＩＶ＋ＣＳＳ布局方法弥补了表格布局的不　足，实现了表现与内容的分离，便于维护和修改，大大　简化了代码，减少网络带宽资源浪费。　和背景的元素。ＤＩＶ的起始标签＜ｄｉｖ＞和结束标签　＜／ｄｉｖ＞之间的所有内容都是用来构成这个块的，其　中所包含元素的特性由ＤＩＶ标签的属性来控制，或者　是通过使用样式表格式化这个块来进行控制。　１．２　ＣＳＳ简介　ＣＳＳ是英语Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ（层叠样式表）　的缩写，它是一种用来表现ＨＴＭＬ或ＸＭＬ等文件样　＊　收稿日期：２０１１—１２—０５，修回日期：２０１２—０２—１８　＊＊　杨米娜，女，１９７９年生。讲师，研究方向：计算机应用。　

第２５卷第４期　电脑开发与应用　式的标记性语言，用于网页的排版和风格设计，可以弥　补ＨＴＭＬ的不足，使Ｗｅｂ变得更丰富。在使用表格布　局时，也曾接触和应用到ＣＳＳ。　２　ＣＳＳ的使用方法　２．１　ＣＳＳ基本语法　ＣＳＳ规则由两个主要的部分构成：选择器，以及　一条或多条声明。它的基本语法为：选择器（ｓｅｌｅｃｔｏｒ）　｛属性（ｐｒｏｐｅｒｔｙ）：值（ｖａｌｕｅ））。　选择器通常是需要改变样式的ＨＴＭＬ元素。每　条声明由一个属性和一个值组成。属性是希望设置的　样式属性（ｓｔｙｌｅ　ａｔｔｒｉｂｕｔｅ），每个属性有一个值，属性　和值被冒号分开。如果要定义多个声明，则需要用分号　将每个声明分开。　例：ｂｏｄｙ（ｍａｒｇｉｎ：　Ｏｐｘ；　ｆｏｎｔ—ｓｉｚｅ：１２ｐｘ；　ｂａｃｋｇｒｏｕｎｄ—ｃｏｌｏｒ：＃ｆｆｄ８ｄ９；）　２．２　ＣＳＳ选择器　利用ＣＳＳ对页面上的元素实现一对一、一对多或　多对一的控制，就需要用到ＣＳＳ选择器，灵活地选用　选择器是布局的基础。这里介绍５种常用的选择器。　２．２．１标签选择器　标签选择器是直接将ＨＴＭＬ标签作为ＣＳＳ选择　器，可以是Ｐ、ｈｌ、ｂｏｄｙ、ｓｔｒｏｎｇ等ＨＴＭＬ标签。使用标　签选择器可以为文档中的的同一个标签指定相同的　ＣＳＳ样式　例如：Ｐ｛ｆｏｎｔ：１２ｐｘ；）　２．２．２类选择器　在实际运用中，ＸＨＴＭＬ文档中的同一个标签会　被反复使用。若要为相同的标签赋予不同的ＣＳＳ样式　就应使用类选择器。通过定义类（ｃｌａｓｓ）来找到标签的　方式为类选择器。在对应的ＣＳＳ文件里，用．类名就　可以指向这个标签，从而对这个标签进行控制。　例如：＜ｄｉｖ　ｃｌａｓｓ一”ｍｏｒｅ”＞＜／ｄｉｖ＞　ＣＳＳ样式表定义：　．ｍｏｒｅ｛ｃｏｌｏｒ：＃ｆ６０；ｆｏｎｔ—ｓｉｚｅ：１４ｐｘ；）　２．２．３　ｉｄ选择器　根据元素ｉｄ来选择元素，具有唯一性。使用时在　ｉｄ名前面以“＃”来标志。ｉｄ选择器和类选择器相似，　不同的是，ｉｄ选择器不能复用。在一个ＸＨＴＭＬ文档　中，一个ｉｄ选择器只能把其ＣＳＳ样式指定给一个标　签。　例如：＜ｄｉｖ　ｉｄ＝”ｍｅｎｕｂａｒ＂＞＜／ｄｉｖ＞　ＣＳＳ样式表定义：　＃ｍｅｎｕｂａｒ｛ｍａｒｇｉｎ：０　ａｕｔｏ；ｂａｃｋｇｒｏｕｎｄ：＃ｅｃｅ；　ｃｏｌｏｒ：＃ｃＯＯ；｝　２．２．４群组选择器　当几个元素样式属性一样时，可以共同调用一个　声明，元素之间用逗号分隔，这就是ＣＳＳ选择器中的　群组选择器。　例如：Ｐ，ｔｄ，ｌｉ（１ｉｎｅ—ｈｅｉｇｈｔ：２０ｐｘ；ｃｏｌｏｒ：＃ｃＯＯ；）　使用组群选择器，将会大大地减化ＣＳＳ代码，将　具有多个相同属性的元素，合并群组进行选择，定义同　样的ＣＳＳ属性，这大大地提高了编码效率与ＣＳＳ文件　体积。　２．２．５后代选择器　ＣＳＳ选择器中的后代选择器也叫派生选择器。可　以使用后代选择器给一个元素里的子元素定义样式，　使用时，多个选择器加上中间的空格来找到具体的要　控制标签，从左往右，依次细化．最后锁定要拧制的标　签。　例女Ｈ：＜ｄｉｖ　ｉｄ＝”ｍａｉｎ”＞　＜ｐ＞这里有一个段落＜／＞＜／ｄｉｖ＞　ＣＳＳ样式表定义：　＃ｍａｉｎ　Ｐ｛ｃｏｌｏｒ：＃０００；ｌｉｎｅ－ｈｅｉｇｈｔ：２６ｐｘ；｝　３　ＤＩＶ＋ＣＳＳ应用技巧实例　ＤＩＶ＋ＣＳＳ有别于传统的Ｔａｂｌｅ排版习惯，它首　先将页面在整体上进行＜ｄｉｖ＞标记的分块，然后对各　个ｄｉｖ块进行ＣＳＳ定位，再在各个ｄｉｖ块中添加相应　的显示内容，最后为显示内容设置ＣＳＳ样式。　３．１用ＣＳＳ制作按钮　按钮在网页中一般具有动态链接的属性。动态链　接是网页设计中的一个重要技术。应用最广泛的是４　种链接状态：ａ：ｌｉｎｋ（未访问的链接）、ａ：ｖｉｓｉｔｅｄ（已访问　的链接）、ａ：ｈｏｖｅｒ（鼠标经过状态）、ｆｌ：ａｃｔｉｖｅ（被激活的　状态）。在网页设计中，通过定义链接伪类使其呈现这　些状态。定义时需要注意，如需全部定义，定义顺序不　能更改，按照以上顺序进行定义，否则可能不生效。　用ＣＳＳ制作按钮，可以首先将超链接转换为块级　元素，然后增加一个按钮的背景图片即可。以网页上常　见的的注册按钮为例，代码如下：　＜ａ　ｈｒｅｆ＝”＃”＞注册＜／ａ＞　对应的ＣＳＳ样式如下：ａ｛ｄｉｓｐｌａｙ：ｂｌｏｃｋ；ｗｉｄｔｈ：８０ｐｘＩ　ｈｅｉｇｈｔ；３０ｐｘ；ｌｉｎｅ－ｈｅｉｇｈｔ：３０ｐｘ；ｂａｃｋｇｒｏｕｎｄ：ｕｒｌ（…／ｉｍａｇｅｓ／　ｂｔｎｂｇ１．ｇｉｆ）ｎｏ－ｒｅｐｅａｔ　Ｏｐｘ　０ｐｘ；ｔｅｘｔ－ａｌｉｇｎ：ｃｅｎｔｅｒ｝）　ａ：ｈｏｖｅｒ｛ｃｏｌｏｒ：＃ＦＦＦ｝ｂａｃｋｇｒｏｕｎｄ：ｕｒｌ（…／ｉｍａｇｅｓ／　ｂｔｎｂｇ２．ｇｉｆ）ｎｏ—ｒｅｐｅａｔ　Ｏｐｘ　Ｏｐｘ，ｔｅｘｔ－ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；｝　其中，设置ｆｌ的属性ｄｉｓｐｌａｙ值为ｂｌｏｃｋ，可以将超　链接转换为块级元素，并设置相应的宽高度，使链接获　得更大的点击区域，并为链接添加一个背景图片就制　

・６６・　（总３０６）　ＤＩＶ＋ＣＳＳ技术在网页布局中的应用研究　２０１２矩　作成了一个漂亮的按钮。　３．２横向二级列表　横向二级列表又称为横向二级导航，也即带下拉　菜单的横向导航，在网页的导航条中应用比较广泛。在　制作时使用ｕｌ／ｌｉ列表元素能够实现网页并列元素内　容的排版，常用于实现导航菜单、新闻信息、标题列表　等。　在导航区域内利用ｕｌ／ｌｉ实现导航列表，代码如下：　＜ｄｉｖ　ｉｄ一　ｍｅｎｕ＂＞　＜ｕｌ＞　＜ｌｉ＞首页＜／ｌｉ＞　＜ｌｉ＞学校概况＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞专业设置＜／ａ＞　＜ｕｌ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃　＞＜／ａ＞计算机工程系＜／　Ｉｉ＞　＜ｌｉ＞建筑工程系＜／ｌｉ＞　＜／ｕｌ＞　＜／ｌｉ＞　＜ｌｉ＞招生就业＜／ｌｉ＞　＜／ｕｌ＞　＜／ｄｉｖ＞　设置ＣＳＳ样式如下：　ｂｏｄｙ｛ｆｏｎｔ—ｓｉｚｅ：１２ｐｘ；ｌｉｎｅ—ｈｅｉｇｈｔ：１５０％；）　＃ｍｅｎｕ（ｗｉｄｔｈ：５０５ｐｘ；ｂｏｒｄｅｒ：ｌｐｘ　ｓｏｌｉｄ＃ＣＣＣ；｝　＃ｍｅｎｕ　ｕｌ｛ｍａｒｇｉｎ：Ｏｐｘ；ｐａｄｄｉｎｇ；Ｏｐｘ；ｌｉｓｔ—ｓｔｙｌｅ－ｔｙｐｅ：　ｎｏｎｅ；｝　＃ｍｅｎｕ　ｕｌ　ｌｉ（ｂａｃｋｇｒｏｕｎｄ—ｃｏｌｏｒ：Ｓｔ　９９９；ｂｏｒｄｅｒ：ｌｐｘ　ｓｏｌｉｄ＃ＣＣＣ；ｈｅｉｇｈｔ：３０ｐｘ；ｔｅｘｔ—ａｌｉｇｎ：ｃｅｎｔｅｒ；ｌｉｎｅ－ｈｅｉｇｈｔ：　３０ｐｘ；ｐｏｓｉｔｉｏｎ：ｒｅｌａｔｉｖｅ；ｆｌｏａｔ；ｌｅｆｔ；ｗｉｄｔｈ：９９ｐｘ；｝／＊设置一　级菜单项的显示样式以及让列表项横向显示＊／　＃ｍｅｎｕ　ｕｌ　ｌｉ　ｕｌ（ｐｏｓｉｔｉｏｎ：ａｂｓｏｌｕｔｅ；ｌｅｆｔ：Ｏｐｘ；ｔｏｐ：３０ｐｘ；　ｗｉｄｔｈ：１２０ｐｘ￣ｄｉｓｐｌａｙ：ｎｏｎｅ｝｝／＊设置二级菜单相对于一级菜　单的绝对位置，初始显示状态为隐藏＊／　＃ｍｅｎｕ　ｕｌ　ｌｉ：ｈｏｖｅｒ　ｕｌ｛ｄｉｓｐｌａｙ：ｂｌｏｃｋ；）／＊设置当鼠标滑　过时显示二级菜单＊／　ａ　ｆｃｏｌｏｒ：＃０００；ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；）　ａ：ｈｏｖｅｒ｛ｃｏｌｏｒ：＃ＦＯＯ；ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｕｎｄｅｒｌｉｎｅ｝）　３．３横向图文列表　图文混排是网页内容排版的重要内容。下面利用　ＣＳＳ实现淘宝网上常见的图文混排效果，并对图片添　加了文字说明。　文档代码如下：　＜ｄｉｖ　ｉｄ＝　ｆｌｏｗｅｒ＂＞　＜ｕｌ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞＜ｉｍｇ　ｓｒｃ一”／ｉｍａｇｅｓ／　ｌｆｏｗｅｒ１．ＪＰｇ　＞＜ｂｒ＞独浓＜／ａ＞＜ｂｒ＞￥１８６元＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ一　＃”＞＜ｉｍｇ　ｓｒｃ一”／ｉｍａｇｅｓ／　ｆｌｏｗｅｒ２．ｊＰｇ”＞＜ｂｒ＞阳光守护你＜／ａ＞＜ｂｒ＞￥１５０元＜／ｌｉ　＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝　＃　＞＜ｉｍｇ　ｓｒｃ＝”／ｉｍａｇｅｓ／　ｆｌｏｗｅｒ３．ｊＰｇ”＞＜ｂｒ＞知心爱人＜／ａ＞＜ｂｒ＞￥１６８元＜／ｌｉ＞　＜Ｉｉ＞＜ａ　ｈｒｅｆ＝”＃　＞＜ｉｍｇ　ｓｒｃ＝　／ｉｍａｇｅｓ／　ｆｌｏｗｅｒ４．ｊＰｇ　＞＜ｂｒ＞爱无界＜／ａ＞＜ｂｒ＞￥２１８元＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ：”＃”＞＜ｉｍｇ　ｓｒｃ一　／ｉｍａｇｅｓ／　ｌｆｏｗｅｒ５．ｊＰｇ　＞＜ｂｒ＞执着的爱＜／ａ＞＜ｂｒ＞￥２８６元＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”Ｓｔ”＞＜ｉｍｇ　ｓｒｃ一　／ｉｍａｇｅｓ／　ｆｌｏｗｅｒ６．ｊＰｇ”＞＜ｂｒ＞芬芳怡人＜／ａ＞＜ｂｒ＞￥１６８元＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞＜ｉｍｇ　ｓｒｃ一”／ｉｍａｇｅｓ／　ｆｌｏｗｅｒ７．ｊＰｇ　＞＜ｂｒ＞童话水晶＜／ａ＞＜ｂｒ＞￥１９８元＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝　＃　＞＜ｉｍｇ　ｓｒｃ：　／ｉｍａｇｅｓ／　ｆｌｏｗｅｒ８．ｊＰｇ”＞＜ｂｒ＞永远的爱＜／ａ＞＜ｂｒ＞￥１８６元＜／ｌｉ＞　＜／ｕｌ＞　＜／ｄｉｖ＞　设置ＣＳＳ样式如下：　＃ｆｌｏｗｅｒ｛ｂａｃｋｇｒｏｕｎｄ—ｃｏｌｏｒ：＃ｆｆｆ；ｂａｃｋｇｒｏｕｎｄ：ｕｒｌ（／　ｉｍａｇｅｓ／ｆｌｏｗｅｒ．ｊＰｇ）ｎｏ－ｒｅｐｅａｔ；ｐａｄｄｉｎｇ：３５ｐｘ　Ｏｐｘ　Ｏｐｘ　Ｏｐｘ；　ｍａｒｇｉｎ：５ｐｘ　Ｏｐｘ　Ｏｐｘ　Ｏｐｘ；ｏｖｅｒｆｌｏｗ：ａｕｔｏ）／＊设置当前区域的　顶部为ｆｌｏｗｅｒ图片，其余区域为白色背景色，并设置列表元素　在ｆｌｏｗｅｒ图片的下方＊／　＃ｆｌｏｗｅｒ　ｕｌ｛ｌｉｓｔ—ｓｔｙｌｅ：ｎｏｎｅ；ｍａｒｇｉｎ：Ｏｐｘ；ｐａｄｄｉｎｇ：５ｐｘ）　＃ｆｌｏｗｅｒ　ｕｌ　ｌｉ｛ｆｌｏａｔ；ｌｅｆｔ；ｔｅｘｔ－ａｌｉｇｎ：ｃｅｎｔｅｒ；ｗｉｄｔｈ：　１２５ｐｘ）／＊让列表项图片横向显示＊／　＃ｆｌｏｗｅｒ　ｉｍｇ｛ｂｏｒｄｅｒ；Ｏｐｘ｝ｍａｒｇｉｎ：Ｏｐｘ；ｐａｄｄｉｎｇ：５ｐｘ　Ｏｐｘ　Ｏｐｘ　Ｏｐｘ｝　显示效果如图１所示：　ｊ　鳖焦熊蔓　一　囝　蔺￥ｌ６３元　图１横向图文列表效果图　４　对网页设计教学的影响　ＤＩＶ＋ＣＳＳ网页布局已经成为网页设计的标准，　今后的网页设计教学也随之产生了很大的变化。　在教学中首先要转变网页设计的思路，使用ＣＳＳ　布局首先需要考虑的是页面内容的语义和结构，不再　是传统网页设计考虑的外观和色彩搭配。　（下转第６９页）　

第２５卷第４期　电脑开发与应用　ｉｔｅｍ（“ｉｄ”）等方式进行操作，上述代码演示了对文本　ｍＣｏｍＧｅｔｌＥＷｉｎｄｏｗ　ｐｒｉｎｔ“）　框、单选钮、列表框、按钮元素的操作。是ＤＨＴＭＬ中　ｍＷｉｎｄｏｗ．ＥｘｅｃＷＢ　（ＯＬＥＣＭＤＩＤ　ＰＲＩＮＴ，　—ＤｏＭ对象模型的相关知识　Ｊ。　ＬＥＣＭＤＥＸＥＣＯＰＴＤＯＮＴＰＲＯＭＰＴＵＳＥＲ，Ｎｕｌｌ，Ｎｕｌ１）　—３．３．３　ＶＢＡ控制打印机打印　Ｉｆ　Ｅｒｒ．Ｎｕｍｂｅｒ一一２１４７２２１２４４　Ｔｈｅｎ　返回的结果有３类：姓名与号码一致；号码存在但　ＭｓｇＢｏｘ　ｑ丁印时出错，请确认是否打开打印网页”　与姓名不匹配；号码不存在。第１类即为正确结果，如　Ｅｒｒ．Ｃｌｅａｒ’清除该错误　Ｅｘｉｔ　Ｓｕｂ　图３所示，并自动将正确结果打印。其余两类不正确记　Ｅｎｄ　Ｉｆ　录将保存到Ｅｘｃｅｌ中另一个错误列表中，如图４所示：　３．４系统配置　日四盔函函　曩■——融　一．　：　系统配置包括打印时间的间隔，以及待网页刷新　一　ｊ■　Ｉ■＿黛■　■－－－　～一ｆ　时间的设置等。　｝　”　ｆ　－・＾…　Ｉ｝　“：臻～…　４　结束语　｝　　Ｉｆ｝　…・…ｔ　ｉ　尽管联网核查系统将Ｅｘｃｌｅ数据与网页绑定，实　现表单的填充以及调用网页中的Ｄｏｒａ树，对网页功能　进行调用，从而实现了Ｅｘｃｅｌ与网页的交互。Ｅｘｃｅｌ与　网页的交互可以解决平时遇到的很多问题，便于节省　时间，提高工作效率。　参考文献：　［１］　伊利奇，王保众．透视ＥｘｃｅｌＶＢＡ应用与开发［Ｍ］．北　围４错误数据列表　京：人民邮电出版社，２００８．　ＶＢＡ通过ＥｘｅｃＷＢ函数可以实现控制打印机打　［２］　伍云辉．ＥｘｃｅｌＶＢＡ应用高效开发案例精华版［Ｍ］．北　印，由于公民联网核查系统采用ｆｒａｍｅｓｅｔ模式的网　京：电子工业出版社，２００７．　页，所以必须定位到结果所在框架即ｍａｉｎｆｒａｍｅｓｅｔ　［３］　赵志东．Ｅｘｃｅｌ　ＶＢＡ基础入门［Ｍ］．北京：人民邮电出　版社，２００６．　中。　［４］　杨章伟，张婉婉．Ｅｘｃｅｌ　ＶＢＡ语法辞典［Ｍ］．北京：机械　Ｐｕｂｌｉｃ　Ｓｕｂ　ＴｅｓｔＰｒｉｎｔ（）　工业出版社，２００９．　（上接第６６页）　对于刚接触网页设计的学生来说，表格布局容易掌握，　其次还要转变教学重心，采用ＤＩＶ＋ＣＳＳ布局　制作速度快，所以仍然要求学生掌握传统的表格布局，　后，表格的使用将不再那么重要，将回归到基本功能，　以便于制作页面改版不频繁、页面数量小的中小网站。　即显示和组织数据，教学重心也就要相应的转向ＣＳＳ　在教学中，可以循序渐进地展开教学内容，在学生掌握　样式的设置。虽然在传统教学中ＣＳＳ一直也是比较重　表格布局的基础上，开设ＤＩＶ＋ＣＳＳ布局知识，使学　要的内容，但其作用不过是增强网页的特效。ＣＳＳ用　生能够掌握ＤＩＶ＋ＣＳＳ布局技巧。　于网页布局后，需要学生对ＣＳＳ有更深刻的理解。采　用ＣＳＳ布局后，网页布局就需要完全的手工编写代　参考文献：　码，不再像类似于ｗｏｒｄ中所见即所得的排版设计过　［１］　袁自海．ＣＳＳ在网页设计中的应用［ｊ］．电脑知识与技　程，这时Ｘｈｔｍｌ语言就成为一个重点，需要学生熟练　术，２００８，１５（８）：１４３６—１４３９．　掌握Ｘｈｔｍｌ语言。　［２］　朱印宏．ＣＳＳ商业网站布局之谜ＦＭ］．北京：清华大学　但是，在教学中，ＤＩＶ十ＣＳＳ布局不能完全取代表　出版社，２００７．　格布局。在教学中，一般开设Ｄｒｅａｍｗｅａｖｅｒ网页设计　［３］　杜　涛．ＣＳＳ技术在网页设计中的应用与优化［Ｊ］．长　软件课程，对于初学者来说，完全用手工编写代码，开　治学院学报，２００７，３４（５）：２０—２５．　发速度慢，完全用ＣＳＳ设置网页，是件很困难的事情。　［４］　周　鑫．浅谈ＤＩＶ＋ＣＳＳ技术在网页设计中的应用　［Ｊ］．科技信息。２０１１，１７（６）：８４—８５．