浅谈网页页面设计技巧
2012-10-19许佳南
许佳南
(揭阳职业技术学院，广东 揭阳 522000)
浅谈网页页面设计技巧
许佳南
(揭阳职业技术学院，广东 揭阳 522000)
DIV+CSS网页布局越来越多的被广泛应用于网页设计中，文章通过使用DIV+CSS技术制作一个网页页面详细说明DIV+CSS的使用方法。
DIV+CSS；网页设计
随着互联网与WEB技术的发展，利用DIV+CSS设计网站的设计方式正逐步成为制作网站的主力军之一，DIV+CSS技术作为制作网页的重要组成部分，已经成为网页设计中必不可少的要素。本文将详细介绍如何使用DIV+CSS制作一个网页。
1 布局设计
网页中的布局是整个网页制作中最开始的步骤，也是最为关键的一步。网页中的布局决定网页的整体效果，合理的布局可以完美、清晰地组织网页中的文字、图形，给人以紧凑、整洁、美观的感觉。
在本例中，我们首先使用Photoshop设置网页页面的效果图，接着再切图并使用DIV+CSS语言将其做成HTML形式。接下来我们详细说明使用DIV+CSS语言的布局方法。
（1）网页页面的每个区域，如页头区、主体区、法律和版权声明等，我们都插入相应的DIV元素，然后，用CSS控制DIV使网页居中显示。在本例中，我们将分为bn，main，cr三个DIV。
（2）对于页面中所有的 DIV元素，利用 CSS控制 DIV的位置，我们可以将页面中的DIV视为一个个块状元素。在此应用了“盒模型”的工作原理，“盒模型”是CSS的基础，“盒模型”理论认为：页面上的每个元素都被看做—个矩形，这个矩形由内容、填充(padding)、边框(border)、和边距(margin)构成。对于每部分的间距，以及文字、图片空隙的调整，我们用“盒模型”的工作原理来调整。在网页默认的情况下，元素由上到下依次叠放，当这样的叠放顺序不能满足布局的需要时，就要使用“float(浮动)”属性来改变元素的叠放顺序。元素应用了“float(浮动)”属性，它周围的元素就会靠近、包围元素，这样的影响在有的布局中是多余的，这时，可以用“clear(清除)”属性来阻止这种浮动对后面元素的影响。再复杂的布局也是重复利用这样的技术，大到网页每—部分的叠放，小到文字、图片的排版。
（3）在DIV中添加各种网页元素，把文字、图片、动画安排到合适的位置，再把每部分合理地叠放到网页中，这样就完成了网页的布局。
2 主要设计部分
在VS.NET开发环境中，新建index.htm，并创建css文件，命名为main.css，将样式表写在一个独立的文件中。
在 index.htm 中 写 入 〈!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN" ＞ 用来声明将会把 Internet Explorer 6及以后版本切换到标准兼容模式。
3 在main的DIV中的各个DIV中插入相应的内容
在导航的DIV中插入相应的内容
〈div id="nav"＞
〈ul＞
〈li＞〈span style="color: #215B0A;" a href=”#”＞学院首页〈/span＞〈/li＞
〈li＞〈a href=”#”＞实验系统〈/a＞ 〈/li＞
〈li＞〈a href=”#”＞实验实训室〈/a＞ 〈/li＞
〈li＞〈a href=”#”＞实训基地〈/a＞ 〈/li＞
〈li＞〈a href=”#”＞实训与实习〈/a＞〈/li＞
〈li＞〈a href=”#”＞管理制度〈/a＞ 〈/li＞
〈li＞〈a href=”#”＞技能鉴定所 〈/a＞〈/li＞
〈li＞〈a href=”#”＞高新技术考试站〈/a＞ 〈/li＞
〈/ul＞
〈/div＞
同时我们在main.css文件中加入如下代码：
#main{width:950px; border:1px solid #979494;border-bottom:0px; border-top:0px; height:920px; }
#nav{ width:946px;background-image:url(nav_mg.gif); height:37px;background-repeat:repeat
x;margin:0px; }
#nav ul{ width:946px; margin:0px;list-style-type:none; height:37px;margin:0px;}
#nav ul li{ background-image:url(nav_f.gif);float:left; width:91px; height:37px; color:#FFF;
font-weight:bold; padding-top:10px; }
在左边的DIV中插入相应的内容
〈div id="ltb" ＞
〈div id="ltb1"＞
〈h2＞ 最新公告〈/h2＞
〈div class="ltb1_m"＞
〈div class="ltb1_ml"＞ 〈span class="ltb1_ml_b"＞〈img src="themes/ltb1_pic1.gif" /＞ 省教育厅巡视员李小鲁同志莅临我院指导工作〈/span＞ 〈/div＞
〈div class="ltb1_mm"＞ 〈span style="color: #4B4B4B;font-weight: bold; margin-bottom: 3px;"＞ 〈img src="themes/ltb1_pic2.gif" style="margin-top: 3px;margin-bottom: -3px;" /＞指导工作〈/span＞ 10月27日，省教育厅巡视员李小鲁同志莅临我院检查指导工作。李小鲁巡视员一到学院就详细了解我院新征规划用地的进展情况，亲临实训中心视察，并召开调研会。...〈/div＞
〈div class="ltb1_mr"＞
〈ul＞
〈li class="ltb1_mr_f"＞〈span＞揭阳职业技术学院参加省职业院校技能大赛〈/span＞ 〈/li＞
〈li＞〈span＞关于参加 2012年度全国职业院校技能大赛〈/span＞〈/li＞
〈li class="ltb1_mr_f"＞〈span＞关于开展实训室检查通知〈/span＞〈/li＞
〈li＞〈span＞ 实 训 中 心 2011-2012 下 学 期 课 表〈/span＞〈/li＞
〈li class="ltb1_mr_f"＞〈span＞关于做好 2011-2012 学年度第一学期实验...〈/span＞〈/li＞
〈li＞〈span＞关于做好 2011-2012学年度第二学期实验...〈/span＞〈/li＞
〈li class="ltb1_mr_f"＞〈span＞关于做好 2011-2012 学年度第一学期实验...〈/span＞〈/li＞
〈li＞〈span＞关于开展实训室期末检查通知〈/span＞〈/li＞
〈li class="ltb1_mr_f"＞〈span＞关于开展实训室期中检查通知〈/span＞〈/li＞
〈/ul＞〈/div＞
〈/div＞
〈div class="ltb1_b"＞ 〈/div＞
〈/div＞
在mian.css文件中加入如下代码：
#ltb{ float:left; width:662px; }
#ltb1{ text-align:left; width:662px;height:312px;}
#ltb1
h2{background-image:url(ltb1_t.gif);color:#F76900;fo nt-size:14px; font-weight:bold;padding-left:60px;padding-top:20px; height:47px;background-repeat:no-repeat; margin-bottom:0px;}
在右边的DIV中加入代码：
〈div id="rtb" ＞
〈div class="rtb1"＞
〈div class="rtb1_t"＞〈span class="rtb1_f1"＞实训实验室〈/span＞〈span class="rtb1_f"＞更多〈/span＞〈/div＞
〈div class="rtb1_m" ＞
〈ul＞
〈li＞〈img src="themes/rtb_pic1.gif"/＞〈/li＞
〈li＞〈img src="themes/rtb_pic2.gif"/＞〈/li＞
〈li＞〈img src="themes/rtb_pic3.gif"/＞〈/li＞〈/ul＞
〈ul＞
〈li＞药学综合实训实验室〈/li＞
〈li＞动物房实验实训室〈/li＞
〈li＞化工原理实训室〈/li＞〈/ul＞
〈ul＞
〈li＞〈img src="themes/rtb_pic4.gif"/＞〈/li＞〈li＞〈img src="themes/rtb_pic5.gif"/＞〈/li＞
〈li＞〈img src="themes/rtb_pic3.gif"/＞〈/li＞〈/ul＞
〈ul＞
〈li＞天平实验实训室〈/li＞
〈li＞食品检测实验实训室〈/li＞
〈li＞化学实验实训室〈/li＞〈/ul＞
〈/div＞
〈div class="rtb1_b"＞ 〈/div＞
〈/div＞
〈/div＞
在右边的main.css中加入代码：
#rtb{ float:right; width:280px; margin:0px;}
.rtb1{ width:282px;}
.rtb1_t{ background-image:url(rtb1_t.gif);font-size:12px; width:281px; height:26px;margin-bottom:0px; text-align:left;}
.rtb1_f1{ width:200px;padding-top:5px;font-weigh t:bold;color:#705c8c;
padding-left:17px; }
.rtb1_f{ color:#359bc6; font-weight:nomal;width:70px;padding-top:5px;padding-left:40px;}
.rtb1_m{ background-repeat:repeat-y;
background-image:url(rtb_m.gif); width:282px;margin-top:0px; padding:0px; }
.rtb1_m ul{width:250px; list-style-type:none;float:left; margin:0px; padding-left:8px;line-height:24px; }
.rtb1_m ul li{float:left; padding-left:5px;color:#989898; text-align:center; width:79px;padding-top:6px; }
图文混搭之后的效果图如下所示：
在这里，只给出“最新公告”和“实训实验室”这两块内容。还可以在左边的DIV中加入“管理制度”“实训基地”“技能鉴定”三个DIV，在右边的DIV中加入“资料下载”“实训与实习”“高新技术考试”三个DIV。
4 上传测试
本文中的网页已通过测试运行并发布到WEB服务器上测试。上传后运行正常；并在不同分辨率下都能够正常显示。
5 结束语
本文运用了 DIV+CSS技术设计的网页使用方便，兼容性好。但是DIV+CSS布局的网页由于需要兼容各种浏览器，也有其不足的地方，主要表现在开发技术高，开发时间长，开发成本高。
[1] (美)Kynn Bartle．CSS入门经典[M].北京:人民邮电出版社,2007.
[2] (加)Zoe Mickley Gillenwate.灵活 Web 设计[专著][M].北京:机械工业出版社,2009.
[3] 郑宁宁.浅析 DIV+CSS网页设计技术[J].山东省农业管理干部学院学报,2008.
[4] 车元媛.CSS技术在网页设计中的应用研究[J].科技信息,2011.
Discussion of Web Page Design Skills
DIV + CSS web page layout more and more widely used in web design, in this paper, DIV + CSS using method were detailed descripted through using of DIV + CSS technology to make a web pages.
DIV+CSS;Web design
TP393
A
1008-1151(2012)05-0015-03
2012-04-06
许佳南，揭阳职业技术学院教师。
