浅谈CSS+DIV在网页制作中的应用

计算机光盘软件与应用　工程技术　Ｃｏｍｐｕｔｅｒ　ＣＤ　Ｓｏｆｔｗａｒｅ　ａｎｄ　Ａｐｐｌｉｃａｔｉｏｎｓ　２０１２年第２期　浅谈ＣＳＳ＋ＤＩＶ在网页制作中的应用　车开森　（湖北财税职业学院，武汉４３００６４）　摘要：ＣＳＳ＋ＤＩＶ是一种网页布局方法，这种网页布局方法有别于传统的表格布局，真正地达到了内容与样式相分离。　使用ＤＩＶ搭建框架，使用ＣＳＳ定制、改善网页的显示效果。本文通过对ＣＳＳ＋ＤＩＶ与传统页面布局方法进行比较，阐述了　ＣＳＳ＋ＤＩＶ在实际应用中的优势。　关键词：ＣＳＳ＋ＤＩＶ；网页制作　中图分类号：ＴＰ３９３．０９２　文献标识码：Ａ　文章编号：１００７—９５９９（２０１２）０２—０１１０—０２　ＣＳＳ＋ＤＩＶ　Ｕｓａｇｅ　ｉｎ　Ｗｅｂ　Ｐｒｏｄｕｃｔｉｏｎ　Ｃｈｅ　Ｋａｉｓｅｎ　（Ｈｕｂｅｉ　Ｆｉｎａｎｃｅ＆Ｔａｘａｔｉｏｎ　Ｃｏｌｌｅｇｅ，Ｗｕｈａｎ　４３００６４，Ｃｈｉｎａ）　Ａｂｓｔｒａｃｔ：ＣＳＳ＋ＤＩＶ　ｉｓ　ａ　ｐａｇｅ　ｌａｙｏｕｔ　ａｐｐｒｏａｃｈ，ｔｈｉｓ　ｍｅｔｈｏｄ　ｏｆ　ｐａｇｅ　ｌａｙｏｕｔ　ｉｓ　ｄｉｆｆｅｒｅｎｔ　ｆｒｏｍ　ｔｈｅ　ｔｒａｄｉｔｉｏｎａｌ　ｆｏｒｍ　ｌａｙｏｕｔ，ｔｏ　ａｃｈｉｅｖｅ　ｔｈｅ　ｃｏｎｔｅｎｔ　ａｎｄ　ｓｔｙｌｅ　ｏｆ　ｔｈｅ　ｐｈａｓｅ　ｓｅｐａｒａｔｉｏｎ．ＤＩＶ　ｂｕｉｌｄ　ｔｈｅ　ｆｒａｍｅｗｏｒｋ，ｕｓｅ　ＣＳＳ　ｔｏ　ｃｕｓｔｏｍｉｚｅ　ａｎｄ　ｉｍｐｒｏｖｅ　ｐａｇｅ　ｄｉｓｐｌａｙ．Ｉｎ　ｔｈｉｓ　ｐａｐｅｒ，ＣＳＳ＋Ｄ１Ｖ　ｗｉｈ　ｔｔｒａｄｉｔｉｏｎａｌ　ｐａｇｅ　ｌａｙｏｕｔ　ｏｎ　ｔｈｅ　ａｄｖａｎｔａｇｅｓ　ｏｆ　ＣＳＳ＋ＤＩＶ　ｉｎ　ｐｒａｃｔｉｃａｌ　ａｐｐｌｉｃａｔｉｏｎｓ．　Ｋｅｙｗｏｒｄｓ：ＣＳＳ＋ＤＩＶ：Ｗｅｂ　ｐｒｏｄｕｃｔｉｏｎ　如今利用传统表格进行页面布局的弊端逐渐暴露，ｗｅｂ标准　和重要性越来越被人们。ＣＳＳ＋ＤＩＶ的排版是一种很新的排版理念，　完全有别于传统的排版习惯。它将页面首先在整体上进行ＤＩＶ的　分块，然后对各个块进行ＣＳＳ设计，最后再在各个块中添加相应　的内容。ＣＳＳ＋ＤＩＶ的网页布局方法可以使外观与结构分离，使站　点的访问及维护更加容易，通过ＣＳＳ＋ＤＩＶ排版的页面，更新十分　的容易，甚至是页面的拓扑结构，都可以通过修改ＣＳＳ属性来重　新定位。　网页制作流程　（一）页面布局　页面布局即页面的版式设计，如同我们要装修一幢大楼，需　要先划分好其中的区域。页面布局就是对页面进行区域划分，以　便将不同的元素放置在指定的位置。　（二）添加网页元素　进行页面布局后，网页框架搭建完成，将相应的内容添加至　相应的区域中。　（三）美化网页　页面基本完成后，对网页进行美化处理。对网页中的各部分　及元素的显示效果进行调整。　（四）网页测试　一＜ｂｏｄｙ＞　＜ｈ２＞网页布局＜／ｈ２＞　＜ｐ＞ＣＳＳ＋ＤＩＶ＜／ｐ＞　＜／ｂｏｄｙ＞　＜／ｈｔｍｌ＞　、若要将这段代码中的标题（网页布局）变成红色，并对字体　进行相应的设置，则需要引入＜ｆｏｎｔ＞标记：　＜ｈ２＞＜ｆｏｎｔ　ｃｏｌｏｒ＝ｒｅｄ　ｆａｃｅ＝“黑体”＞网页布局＜／ｆｏｎｔ＞＜／ｈ２＞　此时，修改并不是很麻烦，但当页面的内容不仅仅只有一段，　而是大段代码时，修改起来就相当繁琐和复杂。　如下所示。　＜ｈｔｍｌ＞　＜ｈｅａｄ＞　＜ｔｉｔｉｅ＞页面标题＜／ｔｉｔｌｅ＞　＜／ｈｅａｄ＞　＜ｂｏｄｙ＞　＜ｈ２＞＜ｆｏｎｔ　ｃｏｌｏｒ＝ｒｅｄ　ｆａｃｅ＝“黑体”＞网页布局　１＜／ｆｏｎｔ＞＜／ｈ２＞　＜ｐ＞ＣＳＳ＋ＤＩＶ　ｌ＜／ｐ＞　＜ｈ２＞＜ｆｏｎｔ　ｃｏｌｏｒ＝ｒｅｄ　ｆａｃｅ＝“黑体”＞网页布局　制作完一个网页，必须保证网页能够被正常浏览和使用。需　对网页中的图片、文字、相关链接等进行检查，对浏览器的兼容　性进行检测。　二、ＣＳＳ　２＜／ｆｏｎｔ＞＜／ｈ２＞　＜Ｄ＞ＣＳＳ＋ＤＩＶ　２＜／ｐ＞　＜ｈ２＞＜ｆｏｎｔ　ｃｏｌｏｒ＝ｒｅｄ　ｆａｃｅ＝“黑体”＞网页布局　３＜／ｆｏｎｔ＞＜／ｈ２＞　ＣＳＳ（Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔ），中文译为层叠样式表，它是　用于控制网页样式并允许将样式信息与网页内容分离的一种标记　性语言。ＣＳＳ的引入就是为了使得ＨＴＭＬ语言能够更好发适应页面　的美工设计。它以ＨＴＭＬ语言为基础，提供了丰富的格式化功能，　如字体、颜色、背景和整体排版等，并且网页设计者可以针对各　种可视化浏览器设置不同的样式风格。　ＣＳＳ样式一般是作用在ＤＩＶ上的，可以为每个ＤＩＶ区域定义　独特的ＣＳＳ，这样我们就可以将网页中指定的ＤＩＶ部分变成我们　所需要的风格、样式，而网页又是由多个ＤＩＶ构成，从而达到美　化网页的作用。　在ＣＳＳ还没有被引入页面设计之前，传统的ＨＴＭＬ语言要实现　页面美工上的设计是十分麻烦的，如下面一段代码：　＜ｈｔｍｌ＞　＜ｈｅａｄ＞　＜Ｄ＞ＣＳＳ＋ＤＩＶ　３＜／ｐ＞　＜ｈ２＞＜ｆｏｎｔ　ｃｏ１ｏｒ＝ｒｅｄ　ｆａｃｅ＝“黑体”＞网页布局　４＜／ｆｏｎｔ＞＜／ｈ２＞　＜ｐ＞ＣＳＳ＋ＤＩＶ　４＜／ｐ＞　＜／ｂｏｄｙ＞　＜／ｈｔｍｌ＞　我们看到，将上面一段代码中的４个标题都改成红色，在ＨＴＭＬ　语言中需要对每个标题的＜ｆｏｎｔ＞标记都进行修改。　同样，将４个标题都改成红色，引入ＣＳＳ来对页面进行修改，　如下所示。　＜ｈｔｍｌ＞　＜ｈｅａｄ＞　＜ｔｉｔｌｅ＞页面标题＜／ｔｉｔｌｅ＞　＜ｓｔｙｌｅ＞　＜！一一　＜ｔｉｔ１ｅ＞页面标题＜／ｔｉｔｌｅ＞　＜／ｈｅａｄ＞　ｈ２ｆ　计算机光盘软件与应用　２０１２年第２期　ｆｏｎｔ—ｆａｍｉｌｙ：黑体　ｃｏｌｏｒ：ｒｅｄ；　Ｃｏｍｐｕｔｅｒ　ＣＤ　Ｓｏｆｔｗａｒｅ　ａｎｄ　Ａｐｐ　ｌ　ｉ　ｃａｔ　ｉ　ｏｎｓ　的对象。　工程技术　Ｊ　我们知道，网页布局就是对网页的结构划分，将一个网页划　分成若干个区域。网页布局常用的方法有表格、布局表格、层、　＞　＜／ｓｔｙｌｅ）　＜／ｈｅａｄ＞　＜ｂｏｄｙ）　＜ｈ２＞网页布局１＜／ｈ２＞　＜ｐ＞ＣＳＳ＋ＤＩＶ　ｌ＜／ｐ＞　＜ｈ２＞网页布局２＜／ｈ２＞　＜ｐ＞ＣＳＳ＋ＤＩＶ　２＜／ｐ＞　＜ｈ２＞网页布局３＜／ｈ２＞　＜ｐ＞ＣＳＳ＋ＤＩＶ　３＜／ｐ＞　．　＜ｈ２＞网页布局４＜／ｈ２＞　＜ｐ＞ＣＳＳ＋ＤＩＶ　４＜／ｐ＞　＜／ｂｏｄｙ＞　＜／ｈｔｍｌ＞　用ＣＳＳ进行处理，仅需要创建一个针对ｈ２的标记选择器，对　ｈ２的样式进行设置，那么整个页面中的所有ｈ２就可以一次性全　部调整。代码简单，结构清晰。　相比传统ＨＴＭＬ，ＣＳＳ技术具有以下优点：　１．维护方便。当对某类对象进行样式修改时，只需针对某个　特殊标记创建样式，不需花费很多时间，尤其对于整个网站而言，　后期修改和维护的成本都有所降低。　２．样式丰富。ＨＴＭＬ本身的标记比较少，特别是美工样式的标　记远不够使用，比如文字间距、段落缩进等，这些在ＣＳＳ里都可　以进行设置。　３．页面结构清晰。ＣＳＳ统一对各种风格样式进行控制并且代　码相对简单。　４．定位容易。　ＣＳＳ对于网页的整体控制较单纯的ＨＴＭＬ语言有了突破性的进　展，并且后期修改和维护都十分方便。不仅如此，ＣＳＳ还提供各　种丰富的格式控制方法，使得网页设计者能够轻松地应对各种页　面效果。　三、ＤＩＶ　框架，ＤＩＶ是网页的众多布局方法中的一种。　网页就是放置网络效果的平台，在其中，展示的信息需要美观、　有逻辑性地排列，这就好比在店铺里，不能把所有的都没规则地堆　放在一起，因为那样就会使我们的店铺杂乱不堪，而且商品也不容　易被很快的找到，所以就需要在特定区域里放置定制商品，需要在　商铺里精心设计好诸多区域的位置，这样就能够使我们的店铺看起　来整齐、有序，而且方便我们快速找到其中的每一个商品。　在网页中，同样需要定义好各个区域，比如哪里放广告、哪　里放导航菜单、哪里放主体内容，ＤＩＶ在这里起的作用就是将整　个页面分成若干个小区域，每个ＤＩＶ在页面中占据一定的位置，　而在这个位置上能够放置特定的内容。　四、ＯＳＳ＋Ｄ　Ｉ　Ｖ排版技术相对传统表格排版的优点：　ＨＴＭＬ中的＜ｔａｂｌｅ）也可以将整个页面划分成各个区域，如果　某个区域需要再划分，则可以用嵌套表格来实现。相对于表格布　局，ＣＳＳ＋ＤＩＶ布局的优点如下：　首先，利用表格排版的页面升级困难，如果要对某个区域的　位置进行调整则需要再重新用表格进行布局，而用ＣＳＳ＋ＤＩＶ排版，　每个区域（ＤＩＶ）是一个整体，可以用ＣＳＳ对各个块进行定位，从　而轻松地移动各个块，完成页面的整体设计。　其次，利用表格排版的页面在下载时必须等整个表格的内容　都下载完毕之后才会一次性显示出来，利用ＤＩＶ块的ＣＳＳ排版的　页面在下载时，各个块可以分别下载显示，从而提高页面的下载　速度，搜索引擎的排名也会因此而提高。　第三，用ＤＩＶ排版的页面，美工在修改页面时不需要关心任　何后台操作的问题。而表格由于依赖各个单元格，美工必须在大　量的后台代码中寻找排版方式。　五、结语　ＤＩＶ＋ＣＳＳ布局，现在已经广泛地应用在网页设计上了。如果　布局合理，可以让页面更加美观，还可以让访问都精确地定位到　网页的某一功能，这都对网页的开发提供了更便捷的方法。　参考文献：　［１］何丽．精通ＤＩＶ＋ＣＳＳ网页样式与布局Ⅱ１ｌ北京：清华大学出　版社．２０１１，４　＜ｄｉｖ＞（ｄｉｖｉｓｉｏｎ）是一个区块窗口标记，即＜ｄｉｖ＞与＜／ｄｉｖ＞　之间相当于一个容器，可以容纳段落、标题、表格、图片等各种　ＨＴＭＬ元素。因此，可以把＜ｄｉｖ＞与＜／ｄｉｖ＞中的内容视为一个独立　【２］曾顺．前沿科技，精通ＣＳＳ＋ＤＩＶ网页样式与布局．北京：人民　邮电出版社，２００７．８　（上接第１０５页）　防火墙配置。分散和网络安全问题集中的每个主机，防火墙，安　得到突飞猛进的发展。网络防火墙技术是用来强化网络之间的访　全管理更经济。例如，网络接入，分散在随机密码和其他身份认　问控制，防止外部网络用户以非法手段通过外部网络进入内部网　证系统的主机，专注于防火墙体。因为病毒正在迅速发展，各种　络，访问内部网络资源，进而保护内部网络操作环境的特殊网络　墙不能停止一切病毒入侵。因此，防火墙也不是万能的，一些新　互联设备；是提供安全信息服务，实现网络信息安全为基础的设　兴的病毒和木马可能并不反映需要定期更新，加强对企业数据库　施。使用一个防火墙来保护内部网络的敏感数据，随时提示数据　的安全性。　是不是被盗窃和破坏，并记录内部和外部的通讯日志的状态的相　计算机网络技术的快速发展，计算机不但给人类经济、文化、　关信息，如通信和操作发生的时间，等新一代的防火墙将转入内　军事，还给企业和社会活动带来更多的便利，万事万物的发展，　部人员甚至停止向外敏感数据。防火墙可以被用来作为不同网络　都存在矛盾，因此计算机发展的同时，计算机黑客、计算机病毒、　或网络安全域之间信息的信息门户，根据网络信息流的战略控制　流氓软件的发展也相应的升级，故也给计算机安全带来了巨大的　和输出，与自身的抗攻击能力。它允许两个或两个包传输网络，　挑战。　数据与安全政策的规定实施检查，以决定网络之间的通信，监控　因此，现代化的信息网络，将面临着各种网络安全威胁和外部　网络运行。　的网络攻击，常见的计算机病毒和黑客的攻击。安装防火墙最有效　防火墙是ＰＣ的安全保障措施，也是我们企业单位到企业数据　预防计算机病毒的工具。通过对计算机病毒的研究和预防，有利于　系统的第一道防线。因此，在每一个办公电脑都必须安装个人防　正确认识并保护计算机网络的安全，真正发挥了积极的作用，在促　火墙，因为它有足够的安全保护性能，并具有良好的稳定性包括　进人类的经济，文化的健康发展，军事，企业和社会活动。　设置和管理升级都很方便。我们通常使用防火墙虽然能防止一些　参考文献：　黑客的入侵网络，’但它不是１００％能防止黑客攻击，也有不足之　［１】朱燕辉．ＷＩＮＤＯＷＳ防火墙与网络封包截获技术ｆＭ１．北京：　２００２　处，以防止外部攻击的防火墙不能防止来自内部变节者和普通用　电子工业出版社，户的威胁。不能完全防止传播病毒感染的软件或文件，不能防止　【２］袁家政．计算机网络安全与应用技术ＩＭ１．北京：清华大学出　２００２　数据驱动的攻击，不能防止服务器系统漏洞的攻击，不能防止一　版社．个新的网络安全问题。　【３】张仁斌，李钢，侯整风．计算机病毒与反病毒技术［Ｍ】．北京：清　防火墙配置中心的安全解决方案，所有的安全软件，可以在　华大学出版社，２００６，６