浅谈网页页面设计技巧

总第１４卷１５３期　２０１２年５月　大众科技　Ｐｏｐｕｌａｒ　Ｓｃｉｅｎｃｅ＆Ｔｅｃｈｎｏｌｏｇｙ　ＶｏＬ．１４　ＮＯ．５　Ｍａｙ　２０１２　浅谈网页页面设计技巧　许佳南　（揭阳职业技术学院，广东揭阳５２２０００）　【摘要】ＤＩＶ＋ＣＳＳ网页布局越来越多的被广泛应用于网页设计中，文章通过使用ＤＩＶ＋ＣＳＳ技术制作一个网页页面详细说　明ＤＩＶ＋ＣＳＳ的使用方法。　【关键词】ＤＩＶ＋ＣＳＳ；网页设计　【中图分类号】ＴＰ３９３　【文献标识码】Ａ　【文章编号】１００８—１１５１（２０１２）０５—００１５—０３　Ｄｉｓｃｕｓｓｉｏｎ　ｏｆ　Ｗｅｂ　Ｐａｇｅ　Ｄｅｓｉｇｎ　Ｓｋｉｌｌｓ　Ａｂｓｔｒａｃｔ：ＤＩＶ＋ＣＳＳ　ｗｅｂ　ｐａｇｅ　ｌａｙｏｕｔ　ｍｏｒｅ　ａｎｄ　ｍｏｒｅ　ｗｉｄｅｌｙ　ｕｓｅｄ　ｉｎ　ｗｅｂ　ｄｅｓｉｇｎ，ｉｎ　ｔｈｉＳ　ｐａｐｅｒ，ＤＩＶ＋ＣＳＳ　ｕｓｉｎｇ　ｍｅｔｈｏｄ　ｗｅｒｅ　ｄｅｔａｉｌｅｄ　ｄｅｓｃｒｉｐｔｅｄ　ｔｈｒｏｕｇｈ　ｕｓｉｎｇ　ｏｆ　ＤＩＶ＋ＣＳＳ　ｔｅｃｈｎｏｌｏｇｙ　ｔｏ　ｍａｋｅ　ａ　ｗｅｂ　ｐａｇｅｓ．　Ｋｅｙｗｏｒｄｓ：ＤＩＶ＋ＣＳＳ：Ｗｅｂ　ｄｅｓｉｇｎ　随着互联网与ＷＥＢ技术的发展，利用ＤＩＶ＋ＣＳＳ设计网站　的设计方式正逐步成为制作网站的主力军之一，ＤＩＶ＋ＣＳＳ技　术作为制作网页的重要组成部分，已经成为网页设计中必不　这时，可以用“ｃｌｅａｒ（清除）”属性来阻止这种浮动对后面元　素的影响。再复杂的布局也是重复利用这样的技术，大到网　页每一部分的叠放，ｄ，Ｎ文字、图片的排版。　可少的要素。本文将详细介绍如何使用ＤＩＶ＋ＣＳＳ制作一个网　页。　（３）在ＤＩＶ中添加各种网页元素，把文字、图片、动画　安排到合适的位置，再把每部分合理地叠放到网页中，这样　就完成了网页的布局。　ｌ布局设计　网页中的布局是整个网页制作中最开始的步骤，也是最　为关键的一步。网页中的布局决定网页的整体效果，合理的　布局可以完美、清晰地组织网页中的文字、图形，给人以紧　凑、整洁、美观的感觉。　在本例中，我们首先使用Ｐｈｏｔｏｓｈｏｐ设置网页页面的效　２主要设计部分　在ＶＳ．ＮＥＴ开发环境中，新建ｉｎｄｅｘ．ｈｔｍ，并创建ＣＳＳ文　件，命名为ｍａｉｎ．ＣＳＳ，将样式表写在一个独立的文件中。　在　ｉｎｄｅｘ．ｈｔｍ中写入＜！ＤＯＣＴＹＰＥ　ｈｔｍｌ　ＰＵＢＬＩＣ　／／Ｗ３Ｃ／／ＤＴＤ　ＨＴＭＬ　４．０　Ｔｒａｎｓｉｔｉｏｎａｌ／／ＥＮ　＞用来声明将　会把Ｉｎｔｅｒｎｅｔ　Ｅｘｐｌｏｒｅｒ　６及以后版本切换到标准兼容模　式。　果图，接着再切图并使用ＤＩＶ＋ＣＳＳ语言将其做成ＨＴＭＬ形式。　接下来我们详细说明使用ＤＩＶ＋ＣＳＳ语言的布局方法。　（１）网页页面的每个区域，如页头区、主体区、法律和　版权声明等，我们都插入相应的ＤＩＶ元素，然后，用ＣＳＳ控　制ＤＩＶ使网页居中显示。在本例中，我们将分为ｂｎ，ｍａｉｎ，　ｃｒ三个ＤＩＶ。　在＜ｈｅａｄ＞＜ｈｅａｄ＞中加入＜ｌｉｎｋ　ｈｒｅｆ＝　ｍａｉｎ．ＣＳＳ　ｒｅｌ＝　ｓｔｙｌｅｓｈｅｅｔ　ｔｙｐｅ＝　ｔｅｘｔ／ｃｓｓ　／＞，这表示ｉｎｄｅｘ．ｈｔｍ　可以链接到ｍａｉｎ．ＣＳＳ文件中，可以调用其中的内容。　在ｉｎｄｅｘ．ｈｔｍ的＜ｂｏｄｙ＞＜／ｂｏｄｙ＞中插入如下代码：　＜ｄｉｖ　ｉｄ＝　ｂｎ１　＞　（２）对于页面中所有的ＤＩＶ元素，利用ＣＳＳ控制ＤＩＶ　的位置，我们可以将页面中的ＤＩＶ视为一个个块状元素。在　此应用了“盒模型”的工作原理，“盒模型”是ＣＳＳ的基础，　＜ｕｌ＞　＜１ｉ　ｃｌａｓｓ＝　ｂｎ２　＞＜ｉｍｇ　ｓｒｃ＝　ｔｈｅｍｅｓ／ｂｎｐｉｃ．ｇｉｆ　“盒模型”理论认为：页面上的每个元素都被看做一个矩形，　这个矩形由内容、填充（ｐａｄｄｉｎｇ）、边框（ｂｏｒｄｅｒ）、和边距　（ｍａｒｇｉｎ）构成。对于每部分的间距，以及文字、图片空隙的　调整，我们用“盒模型”的工作原理来调整。在网页默认的　ｓｔｙｌｅ＝　ｍａｒｇｉｎ—ｂｏｔｔｏｍ：　一４ｐｘ：　／＞＜ｓｐａｎ　ｓｔｙｌｅ＝　ｆｏｎｔ—ｗｅｉｇｈｔ：ｂｏｌｄ：　＞欢迎：管理员＜／ｓｐａｎ＞＜／ｌｉ＞　＜／ｕｌ＞　＜／ｄｉｖ＞　情况下，元素由上到下依次叠放，当这样的叠放顺序不能满　足布局的需要时，就要使用“ｆｌｏａｔ（浮动）”属性来改变元素　的叠放顺序。元素应用了“ｆｌｏａｔ（浮动）”属性，它周围的元　素就会靠近、包围元素，这样的影响在有的布局中是多余的，　＜ｄｉｖ　ｉｄ＝　ｂｎ　＞＜ｕｌ＞＜１ｉ　ｃｌａｓｓ＝　ｂｎ　ｂｏｘ　＞欢迎访问揭阳　职业技术学院实训与计算机中心网站！＜／ｉｉ＞＜／ｕ１＞＜／ｄｉｖ＞　对ｍａｉｎ．ＣＳＳ文件的主要设计代码如下：　ｂｏｄｙ｛ｍａｒｇｉｎ：Ｏｐｘ：ｐａｄｄｉｎｇ：Ｏｐｘ：ｔｅｘｔ—ａｌ　ｉｇｎ：ｃｅｎｔｅｒ：　ｆｏｎｔ—Ｓｉｚｅ：１２ｐｘ：｝　【收稿日期】２０１２—０４—０６　【作者简介】许佳南，揭阳职业技术学院教师。　．１５．　＃ｂｎ１｛ｐｏｓｉｔｉｏｎ：ａｂｓｏｌｕｔｅ：｝　＃ｂｎ１　ｕｌ｛１ｉｓｔ—ｓｔｙｌｅ—ｔｙｐｅ：ｎｏｎｅ：ｔｅｘｔ—ａｌｉｇｎ：ｌｅｆｔ：｝　．ｂｎ２｛ｐａｄｄｉｎｇ—ｔｏｐ：９５ｐｘ：ｐａｄｄｉｎｇ—ｌｅｆｔ：１４０ｐｘ：｝　－ｂｎ＿Ｊ）ｏｘ｛ｈｅｉｇｈｔ：２５ｐｘ：ｗｉｄｔｈ：４７０ｐｘ：ｃｏｌｏｒ：＃４８ＡＥ１４：　ｐａｄｄｉｎｇ—ｌｅｆｔ：ｌＯｐｘ：ｐａｄｄｉｎｇ—ｔｏｐ：ｌＯｐｘ：　ｐａｄｄｉｎｇ—ｒｉｇｈｔ：ｌＯｐｘ：ｍａｒｇｉｎ—ｔｏｐ：１２５ｐｘ：）　＃ｂｎ｛ｗｉｄｔｈ：９６３ｐｘ：ｈｅｉｇｈｔ：１６２ｐｘ：　ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ（ｂｎ＿ｂｇ．ｐｎｇ）：｝　３在ｍａｉｎ的ＤＩＶ中的各个ＤＩＶ中插人相应　的内容　在导航的ＤＩＶ中插入相应的内容　＜ｄｉｖ　ｉｄ＝　ｎａｙ　＞　＜ｕｌ＞　＜１ｉ＞＜ｓｐａｎ　ｓｔｙｌｅ＝　ｃｏｌｏｒ：＃２１５ＢＯＡ：　ａ　ｈｒｅｆ＝”＃”＞　学院首页＜／ｓｐａｎ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞实验系统＜／ａ＞＜／１　ｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞实验实训室＜／ａ＞＜／１　ｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞实训基地＜／ａ＞＜／１ｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞实训与实习＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞管理制度＜／ａ＞＜／１ｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞技能鉴定所＜／ａ＞＜／ｌｉ＞　＜ｌｉ＞＜ａ　ｈｒｅｆ＝”＃”＞高新技术考试站＜／ａ＞＜／Ｉｉ＞　＜／ｕｌ＞　＜／ｄｉｖ＞　同时我们在ｍａｉｎ．ＣＳＳ文件中加入如下代码：　＃ｍａｉｎ｛ｗｉｄｔｈ：９５０ｐｘ：　ｂｏｒｄｅｒ：ｌｐｘ　ｓｏｌ　ｉｄ＃９７９４９４：　ｂｏｒｄｅｒ—ｂｏｔｔｏｍ：Ｏｐｘ：ｂｏｒｄｅｒ—ｔｏｐ：Ｏｐｘ：ｈｅｉｇｈｔ：９２０ｐｘ：｝　＃ｎａｖ｛　ｗｉｄｔｈ：９４６ｐｘ：　ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ（ｎａｖ＿ｍｇ．ｇｉｆ）：ｈｅｉｇｈｔ：３７ｐｘ：　ｂａｃｋｇｒｏｕｎｄ—ｒｅｐｅａｔ：ｒｅｐｅａｔ—　ｘ：ｍａｒｇｉｎ：Ｏｐｘ：｝　＃ｎａｖ　ｕｌ｛　ｗｉｄｔｈ：９４６ｐｘ：　ｍａｒｇｉｎ：Ｏｐｘ：　１ｉｓｔ—ｓｔｙｌｅ—ｔｙｐｅ：ｎｏｎｅ：ｈｅｉｇｈｔ：３７ｐｘ：ｍａｒｇｉｎ：Ｏｐｘ：）　＃ｎａｙ　ｕｌ　ｌ　ｉ｛　ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ（ｎａｙ—ｆ．ｇｉｆ）：　ｆｌｏａｔ：ｌｅｆｔ：ｗｉｄｔｈ：９１ｐｘ：ｈｅｉｇｈｔ：３７ｐｘ：ｃｏｌｏｒ：＃ＦＦＦ：　ｆｏｎｔ—ｗｅｉｇｈｔ：ｂｏｌｄ：ｐａｄｄｉｎｇ—ｔｏｐ：ｌＯｐｘ：｝　在左边的ＤＩＶ中插入相应的内容　＜ｄｉｖ　ｉｄ＝　ｌｔｂ　＞　＜ｄｉｖ　ｉｄ＝　ｌｔｂｌ　＞　＜ｈ２＞最新公告＜／ｈ２＞　＜ｄｉｖ　ｃｌａｓｓ＝　ｉｔｂｌｍ　＞　＜ｄｉｖ　ｃｌａｓｓ＝　ｌｔｂｌｍｌ　＞＜ｓｐａｎ　ｃｌａｓｓ＝　ｌｔｂｌ　ｍｌ　ｂ　＞　＜ｉｍｇ　ｓｒｃ＝　ｔｈｅｍｅｓ／ｌｔｂｌｐｉｃ１．ｇｉｆ　／＞省教育厅巡视员李小　鲁同志莅临我院指导工作＜／ｓｐａｎ＞＜／ｄｉｖ＞　＜ｄｉｖ　ｃｌａｓｓ＝　ｌｔｂｌ＿ｍｍ　＞＜ｓｐａｎ　ｓｔｙｌｅ＝　ｃｏｌｏｒ：＃４Ｂ４Ｂ４Ｂ：　ｆｏｎｔ—ｗｅｉｇｈｔ：　ｂｏｌｄ：　ｍａｒｇｉｎ—ｂｏｔｔｏｍ：　３ｐｘ：　＞＜ｉｍｇ　ｓｒｃ＝ｔｈｅｍｅｓ／ＩｔｂｌＡ￣ｉｃ２．ｇｉｆ　ｓｔｙｌｅ＝　ｍａｒｇｉｎ－ｔｏｐ：３ｐｘ：　ｍａｒｇｉｎ—ｂｏｔｔｏｍ：一３ｐｘ：　／＞指导工作＜／ｓｐａｎ＞＆ｎｂｓｐ；＆ｎｂｓｐ：　１０月２７日，省教育厅巡视员李小鲁同志莅临我院检查指导　工作。李小鲁巡视员一到学院就详细了解我院新征规划用地　的进展情况，亲临实训中心视察，并召开调研会…．＜／ｄｉｖ＞　＜ｄｉｖ　ｃｌａｓｓ＝　ｌｔｂｌ—ｍｒ　＞　＜ｕｌ＞　＜ｌｉ　ｃｌａｓｓ＝　ｌｔｂｌｍｒ—ｆ　＞＜ｓｐａｎ＞揭阳职业技术学院参加　省职业院校技能大赛＜／ｓｐａｎ＞＜／１　ｉ＞　＜ｌｉ＞＜ｓｐａｎ＞关于参加２０１２年度全国职业院校技能大赛　＜／ｓｐａｎ＞＜／ｌｉ＞　＜１ｉ　ｃｌａｓｓ＝　ｌｔｂｌｍｒｆ　＞＜ｓｐａｎ＞关于开展实训室检查通　￣ｌ＜／ｓｐａｎ＞＜／１ｉ＞　＜ｌｉ＞＜ｓｐａｎ＞实训中心２０１卜２０１２下学期课表　＜／ｓｐａｎ＞＜／１ｉ＞　＜ｌｉ　ｃｌａｓｓ＝　ｉｔｂｌ—ｍｒｆ　＞＜ｓｐａｎ＞关于做好２０１卜２０１２学　年度第一学期实验…＜／ｓｐａｎ＞＜／１　ｉ＞　＜１ｉ＞＜ｓｐａｎ＞关于做好２０１卜２０１２学年度第二学期实　验…＜／ｓｐａｎ＞＜／１ｉ＞　＜１ｉ　ｃｌａｓｓ＝　ｌｔｂｌｍｒｆ　＞＜ｓｐａｎ＞关于做好２０１卜２０１２学　年度第一学期实验…＜／ｓｐａｎ＞＜／ｌｉ＞　＜ｌｉ＞＜ｓｐａｎ＞关于开展实训室期末检查通知＜／ｓｐａｎ＞＜／ｌｉ＞　＜１ｉ　ｃｌａｓｓ＝　ｌｔｂｌｍｒ—ｆ　＞＜ｓｐａｎ＞关于开展实训室期中检　查通￣Ｈ＜／ｓｐａｎ＞＜／ｌ　ｉ＞　＜／ｕｌ＞＜／ｄｉｖ＞　＜／ｄｉｖ＞　＜ｄｉｖ　ｃｌａｓｓ＝　ｌｔｂ１　ｂ　＞＜／ｄｉｖ＞　＜／ｄｉｖ＞　在ｍｉａｎ．ＣＳＳ文件中加入如下代码：　＃１ｔｂ｛ｆｌｏａｔ：ｌｅｆｔ：ｗｉｄｔｈ：６６２ｐｘ：　）　＃１ｔｂｌ｛ｔｅｘｔ—ａｌｉｇｎ：ｌｅｆｔ：　ｗｉｄｔｈ：６６２ｐｘ：　ｈｅｉｇｈｔ：３１２ｐｘ：）　＃１ｔｂｌ　ｈ２｛ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ（１ｔｂｌｔ．ｇｉｆ）：ｃｏｌｏｒ：＃Ｆ７６９００：ｆｏ　ｎｔ—ｓｉｚｅ：１４ｐｘ：　ｆｏｎｔ—ｗｅｉｇｈｔ：ｂｏｌｄ：ｐａｄｄｉｎｇ—ｌｅｆｔ：６０ｐｘ：　ｐａｄｄｉｎｇ—ｔｏｐ：２０ｐｘ：ｈｅｉｇｈｔ：４７ｐｘ：　ｂａｃｋｇｒｏｕｎｄ—ｒｅｐｅａｔ：ｎｏ—ｒｅｐｅａｔ：ｍａｒｇｉｎ—ｂｏｔｔｏｍ：Ｏｐｘ：）　在右边的ＤＩＶ中加入代码：　＜ｄｉｖ　ｉｄ＝　ｒｔｂ　＞　＜ｄｉｖ　ｃｌａｓｓ＝　ｒｔｂｌ　＜ｄｉｖ　ｃｌａｓｓ＝　ｒｔｂｌｔ　＞＜ｓｐａｎ　ｃｌａｓｓ＝　ｒｔｂｌｆ１　＞实　ｌｌ实　验室＜／ｓｐａｎ＞＜ｓｐａｎ　ｃｌａｓｓ＝　ｒｔｂｌｆ　＞更多＜／ｓｐａｎ＞＜／ｄｉｖ＞　＜ｄｉｖ　ｃｌａｓｓ＝　ｒｔｂ１　ｍ　＞　＜ｕｌ＞　＜ｌｉ＞＜ｉｍｇ　ｓｒｃ＝　ｔｈｅｍｅｓ／ｒｔｂｐｉｃ１．ｇｉｆ　／＞＜／ｉｉ＞　＜ｌｉ＞＜ｉｍｇ　ｓｒｃ＝　ｔｈｅｍｅｓ／ｒｔｂｐｉｃ２．ｇｉｆ　／＞＜／ｌｉ＞　＜ｌｉ＞＜ｉｍｇ　ｓｒｃ＝　ｔｈｅｍｅｓ／ｒｔｂｐｉｃ３．ｇｉｆ　／＞＜／１ｉ＞＜／ｕｌ＞　＜ｕｌ＞　＜ｌｉ＞药学综合实训实验室＜／１ｉ＞　＜ｌｉ＞动物房实验实训室＜／ｉｉ＞　＜ｌｉ＞化工原理实训室＜／１ｉ＞＜／ｕｌ＞　＜ｕｌ＞　＜ｌｉ＞＜ｉｍｇ　ｓｒｃ＝　ｔｈｅｍｅｓ／ｒｔｂｐｉｃ４．ｇｉｆ　／＞＜／ｉｉ＞　＜１ｉ＞＜ｉｍｇ　ｓｒｃ＝　ｔｈｅｍｅｓ／ｒｔｂｐｉｃ５．ｇｉｆ　／＞＜／ｉｉ＞　＜ｌｉ＞＜ｉｍｇ　ｓｒｃ＝　ｔｈｅｍｅｓ／ｒｔｂｐｉｃ３．ｇｉｆ　／＞＜／ｉｉ＞＜／ｕｌ＞　＜ｕｌ＞　＜ｌｉ＞天平实验实训室＜／ｌｉ＞　＜ｌｉ＞食品检测实验实训室＜／Ｉｉ＞　＜ｌｉ＞化学实验实训室＜／ｌｉ＞＜／ｕｌ＞　＜／ｄｉｖ＞　＜ｄｉｖ　ｃｌａｓｓ＝　ｒｔｂｌ　ｂ　＞＆ｎｂｓｐ：＜／ｄｉｖ＞　＜／ｄｉｖ＞　一１６．　（／ｄｉｖ）　在右边的ｍａｉｎ．ＣＳＳ中加入代码：　＃ｒｔｂ｛ｆｌｏａｔ：ｒｉｇｈｔ：ｗｉｄｔｈ：２８０ｐｘ：ｍａｒｇｉｎ：Ｏｐｘ：｝　．在这里，只给出“最新公告”和“实训实验室”这两块　内容。还可以在左边的ＤＩＶ中加入“管理制度’’‘‘实训基地”　“技能鉴定”三个ＤＩＶ，在右边的ＤＩＶ中加入“资料下载”“实　ｒｔｂ１｛ｗｉｄｔｈ：２８２ｐｘ：｝　ｒｔｂｌｔ｛ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ（ｒｔｂｌ　ｔ．ｇｉｆ）：　．ｆｏｎｔ—ｓｉｚｅ：１２ｐｘ：ｗｉｄｔｈ：２８１ｐｘ：ｈｅｉｇｈｔ：２６ｐｘ：　训与实习”“高新技术考试”三个ＤＩＶ。　ｍａｒｇｉｎ—ｂｏｔｔｏｍ：Ｏｐｘ：ｔｅｘｔ～ａｌｉｇｎ：ｌｅｆｔ：｝　．ｒｔｂｌｆｌ｛ｗｉｄｔｈ：２００ｐｘ：ｐａｄｄｉｎｇ—ｔｏｐ：５ｐｘ：ｆｏｎｔ—ｗｅｉｇｈ　４上传测试　ｔ：ｂｏｌｄ：ｃｏｌｏｒ：＃７０５ｃ８ｃ：　ｐａｄｄｉｎｇ—ｌｅｆｔ：１７ｐｘ：｝　．试。上传后运行正常；并在不同分辨率下都能够正常显示。　ｒｔｂｌｆ｛ｃｏｌｏｒ：＃３５９ｂｃ６：　ｆｏｎｔ—ｗｅｉｇｈｔ：ｎｏｍａｌ：　ｗｉｄｔｈ：７０ｐｘ：ｐａｄｄｉｎｇ—ｔｏｐ：５ｐｘ：ｐａｄｄｉｎｇ—ｌｅｆｔ：４０ｐｘ：｝　．５结束语　一　一　＿｜Ｉ－■露　本文中的网页己通过测试运行并发布到ＷＥＢ服务器上测　鬣■－　ｒｔｂ　ｌ　ｍ｛ｂａｃｋｇｒｏｕｎｄ—ｒｅｐｅａｔ：ｒｅｐｅａｔ—ｙ：　ｂａｃｋｇｒｏｕｎｄ—ｉｍａｇｅ：ｕｒｌ（ｒｔｂ　Ｉｌ１．ｇｉｆ）；ｗｉｄｔｈ：２８２ｐｘ：　ｍａｒｇｉｎ—ｔｏｐ：Ｏｐｘ：ｐａｄｄｉｎｇ：Ｏｐｘ：Ｊ　．本文运用了ＤＩＶ＋ＣＳＳ技术设计的网页使用方便，兼容性　好。但是ＤＩＶ＋ＣＳＳ布局的网页由于需要兼容各种浏览器，也　有其不足的地方，主要表现在开发技术高，开发时间长，开　ｒｔｂｌＩｌ　ｕｌ｛ｗｉｄｔｈ：２５０ｐｘ：１　ｉｓｔ—ｓｔｙｌｅ—ｔｙｐｅ：ｎｏｎｅ：　ｆｌｏａｔ：ｌｅｆｔ：ｍａｒｇｉｎ：Ｏｐｘ；ｐａｄｄｉｎｇ—ｌｅｆｔ：８ｐｘ：　发成本高。　ｌｉｎｅ—ｈｅｉｇｈｔ：２４ｐｘ：｝　．ｒｔｂｌｍ　ｕｌ　１　ｉ｛ｆｌｏａｔ：ｌｅｆｔ：ｐａｄｄｉｎｇ—ｌｅｆｔ：５ｐｘ：　ｔｅｘｔ—ａｌｉｇｎ：ｃｅｎｔｅｒ：　ｗｉｄｔｈ：７９ｐｘ；　ｃｏｌｏｒ：＃９８９８９８：ｐａｄｄｉｎｇ—ｔｏｐ：６ｐｘ：｝　图文混搭之后的效果图如下所示：　【参考文献】　…１（美）Ｋｙｎｎ　Ｂａｒｄｅ．ＣＳＳ入门经典［Ｍ】．北京：人民邮电出版　社．２００７．　。　【２（２ｌ￣）Ｚｏｅ　Ｍｉｃｋｌｅｙ　ＧｉＵｅｎｗａｔｅ．灵活ｗｅｂ设计【专著】［Ｍ】．北京：　机械工业出版社，２００９．　【３】郑宁宁．浅析ＤＩＶ＋ＣＳＳ网页设计技术ＵＪ．山东省农业管理　一墨墨　墨■圈　干部学院学报，２００８．　【４】车元媛．ＣＳＳ技术在网页设计中的应用研究Ｕ】．科技信　息，２０１１．　（上接第４６页）　［Ｑｕｉｄｗａｙ—ａａａ—ｄｏｍａｉｎ—ｈｕａｗｅｉ］　ｄｏｍａｉｎ—ｂｌｏｃｋ　ｅｎａｂｌｅ　式。　４结束语　随着ＷＬＡＮ网络的大规模商用，还会出现更多新的问题，　［Ｏｕｉｄｗａｙ—ａａａ—ｄｏｍａｉｎ—ｈｕａｗｅｉ］　ｄｏｍａｉｎ—ｂｌｏｃｋ　ｒａｎｇｅ　１　如网络安全、网络容量等问题，并且还有市场部门对热点经　营等方面的特殊要求，这些都对我们的ＷＬＡＮ技术提出了更高　的要求。这一方面需要我们在网络规划时具有一定的前瞻性，　另一方面要求具有较高的响应速度，不断满足日益增多的市　场需求。　［Ｑｕｉｄｗａｙ—ａａａ—ｄｏｍａｉｎ—ｈｕａｗｅｉ］　ｄｏｍａｉｎ—ｂｌｏｃｋ　ｒａｎｇｅ２　３．４认证方式　不同客户使用认证方式的建议如下：　（１）对于纯ＷＬＡＮ用户，我们建议使用“ＰＯＲＴＡＬ”认证　方式。该认证方式相对稳定，并且电脑设置只需装ＩＥ浏览器，　也没有过多的设置。　（２）而对于ＥＶＤＯ上网卡用户，我们推荐使用“中国电　【参考文献】　【１】孙新娟，高志宇．无线校园网规划与设计田．电脑与电　信．２００９（５）．　信无线宽带客户端“软件认证方式。该客户端软件在用户点　击“自动连接”按钮后会优先连接ＷＬＡＮ网络，可以疏导ＥＶＤＯ　话务；并且该软件在升级后支持统一认证，用ＥＶＤＯ上网卡内　【２】厉延民．试论无线校园网的设计与实施　电脑知识与技　术，２０１１（１１）．　的ＵＩＭ卡信息进行认证和计费，省却了输入ＷＬＡＮ认证用户名　密码的麻烦，认证平台共用省内ＥＶＤＯ认证平台，相对稳定。　建议通知老的ＥＶＤＯ上网卡用户进行升级来支持统一认证方　【３］李瑞兴．基于ＷＬＡＮ技术的校园网络设计￣ｇｉ＇ｔ［／１．福建电　脑．２０１０（７）．　一１７．