基于表现与结构分离的网页布局实践

1、    基于表现与结构分离的网页布局实践    摘要：表现与技术相分离来制作网页已经是一种必然趋势。可以在网页结构不变的情况下，通过修改样式表文件实现页面重构，变换网页的表现风格。不仅大大提高了页面的制作效率，而且提高了网站的维护效率。本文通过案例的制作，将表现与结构分离的网页布局实践过程与大家分享。关键词：表现；结构；网页布局：g712 文献标志码：a ：1674-9324（2015）27-0282-03一、引言随着web 2.0标准化设计理念的普及，div+css进行网页制作已经是必然趋势，网页制作人员应该顺应网络技术的发展，及时更新技术手段。学会通

2、过html语言构建网页的语义化结构并尽可能优化，然后运用css样式表文件呈现网页的可视化效果，实现网页的表现与内容的分离。大大减少了代码冗余，提高网页制作效率，改善网页浏览质量。二、内容与表现相分离技术简介内容和表现相分离，是目前web2.0标准技术制作网页最基本的方法，也是css网页布局重要的目标之一。基本的制作流程是，先分析规划切割效果图，接下来使用可扩展的超文本标记语言搭建网页内容结构，然后利用样式表文件“还原”出与效果图一致的页面效果。如果要实现网页内容和外观样式的完全分离，应创建一个新的样式文件，然后以链入外部css样式表的方法将这个样式文件链接到网页文档中。这样就完全做到网站的维护

3、人员可通过修改样式文件来改变页面风格，修改网页文件来改变内容，互不干扰。三、表现与结构分离技术制作网站流程解析本案例为个人网站，包括首页和相关二级页面，首页效果图如下。所有页面布局整齐且风格统一。使用表现与结构分离技术制作流程如左图。1.利用xhtml构建整体网页的结构。· 主页· 关于· 设计介绍· 设计思路· 联系我们设计之路坚信而痛苦，伴随着讥讽与嘲笑，但我们依然坚持。just do it我们的宗旨· 团队口号 不求最好但求最精 我们能够做到最好，我们付出的努力都会有所收获无论大小，无论多少。？ 版权所有-马丁小组 我们感觉自己

4、萌萌哒2.利用样式表文件表现网页的外观。新建样式表文件style.cssbody background： url（./images/bg-body.jpg） repeat left top；font-family： 'muli-light'；margin： 0；img border： 0；#navigation li abackground： url（./images/buttons.png） no-repeat；#blog div.box， #blog div.box div.header background： url（./images/bg-boxborders.png）

5、 no-repeat； #header background： url（./images/bg-header.png） no-repeat center top；height： 206px；text-align： right；#header.div width： 940px；margin： 0 auto；padding： 0 10px；#logo float： left；#navigation list-style： none；display： inline-block；width： 610px；margin： 0；padding： 0；#navigation li float： left；f

6、ont-size： 14pt；height： 206px；width： 138px；margin-left： -16px；text-align： center；#navigation li a background-position： -144px 0；color： #e4dec0；display： block；font-family： 'caudex-regular'；font-size： 14px；height： 206px；width： 138px；line-height： 200px；text-decoration： none；#navigation li a：hove

7、r， #navigation li.selected a background-position： 0 0；color： #fff；font-family： "方正超粗黑繁体"；font-size： 24px；#contents background： url（./images/bg-content-top.png） no-repeat center -6px；min-height： 85px；margin-top： -79px；position： relative；#contents.div width： 960px；margin： 0 auto；padding-top：

8、 30px；#contents h1， h3， h5 color： #836544；font-family： "方正超粗黑繁体"；font-weight： normal；margin： 0 0 30px；font-size： 36px；#contents h5 color： #474747；#contents p color： #474747；font-size： 13px；line-height： 24px；margin： 0；padding： 0 0 24px；#contents p a color： #474747；#contents p a：hover color：

9、 #887c6c；#footer div.footer font-family： 'caudex-regular'；width： 940px；margin： 0 auto；padding： 0 10px；font-size： 11px；至此，本网页样式表文件已经完成，就可以使用该文件控制xhtml文档的表现，代码如下：网页所要呈现的内容便与效果图一致了。按照内容与表现相分离的方法，如修改网页内容，可对xntml文档作修改，变可快速完成风格一致的若干张网页文档。四、结语采用结构与表现相分离技术制作网页，在“表格时代”是不可能实现的。如果要修改网页的外观风格，直接修改css样式文件代码即可，准确而快捷呈现效果图的显示效果。但是如果按照web标准更加专业更加规范设计网页，还需要熟练运用xhtml与css代码，加强实践，认真思考并尝试运用多种方法去解决实践中出现的问题。参考文献：1闻立鸥.网页制作实用教程m.北京：清华大学出版社，2009.2柯海鹏.任务驱