浅谈网站页面表现层的结构设计思路
作者：邵海鹏
来源：《计算机光盘软件与应用》2013年第16期
        摘 要：本文结合笔者多年网站设计及制作的实践经验和研究，主要探讨网站建设过程中的页面表现层设计思路，从网站建设初期即对未来网站运行乃至运维起到至关重要的作用，对网站建设和维护具有一定的参考价值和借鉴意义。
        关键词：网站；表现层；结构设计
        中图分类号：TP393
        近年来，随着互联网技术的不断发展，网络媒体已成为重要的宣传阵地，网站建设需求日趋火爆。目前的趋势则要求网站开发和维护的响应速度越来越快，时效越来越高。针对这一需求，网站建设初期就要严格衔接好各个环节，将网站结构设计的更加合理，更加易于使用和维护。因此对于网站结构的设计需要清晰的思路和规范的建站手册。Web开发人员拿到网站设计图纸后，第一步是设计网站的结构，拥有一个优秀的网站结构不仅可以提高开发效率、降低维护成本、节约网络资源，而且可以提高访问者的体验和信赖。
        1 网站表现层
        1.1 什么是表现层。所谓网站的表现层，就是访问者在浏览器看到的各种数据的页面表现形式。也就是说，访问者在浏览器上看到的包含数据信息的页面都可以称之为表现层。
        1.2 表现层的结构。表现层包含的内容形式多样，风格不一。有清新淡雅的，有绚丽多彩的，但表现层的结构基本一致，分为数据和表现。所谓数据，就是网站要向访问者展示的信息。其中包括文档、表格、图片、音频、视频、程序、文件等。而表现则是为数据提供显示服务的，它包括页面结构，文字格式，彩搭配、图片修饰、音视频播放、程序文件下载等。
        2 表现层分离
        由于表现层包含的内容多样，结构繁杂，为了更清楚地了解表现层的内部结构，下面将这些元素一一分离。
        2.1 数据与表现分离。如图1所示，数据单元“A”、“B”从表现层分离后，剩下的部分就是“表现”。
        在页面中，数据可以是不断更新的，新数据会不断代替以往数据，如图1中的A、B数据单元内容可能被替换或不断更新。相对来说，页面的表现所要更新或变换的频率要小的多，两者相互不受影响，所以可以将它们分离。
        2.2 结构与样式分离。如图2所示，“表现”由页面代码和CSS样式两个部分组成。而“数据”除了具有CSS样式外，又分为文件型和数据库型。通常静态网站使用的都是文件型数据，而动态网站都是从数据库中提取的结构化数据的模式。
        图2中CSS成为分离结构和样式的关键所在，所有与样式相关的部分都可以从页面中剥离出来，组成单独的文件。在设计网页时，设计者可以先设计网页结构，再根据结构设计网页样式，不仅网页变得“轻巧”，而且调整样式、改变网页外观也变得更加灵活。
        3 表现层优化
        表现层的结构虽然已经分离，但这样的分离仍然存在代码冗余现象和数据访问效率低下等问题，下面需要对表现层进一步优化。
        3.1 页面结构优化。页面结构的优化可以减少大量的冗余代码，并有助于提高网页批量
修改操作效率。如图3所示，页面代码可以再次分解。其中结构代码是网页的主体代码，也就是网页的框架。另一部分则是可复用的代码，例如：网站的页眉、页脚、主菜单、宣传栏等，这些部分是首页、二级、三级页面共用的。
        优化后，页面结构更加清晰了。可复用部分变成了一个个独立的文件，哪里需要就在哪里调用，只需修改一处，其余页面就全部更新了。可复用代码通过现在比较流行的SSI包含结构来实现调用。
        3.2 数据静态化优化。数据静态化是指网页展示的数据信息作为网页的组成部分嵌入在页面里，或者以文本文件形式包含进网页里。数据静态化主要针对动态网页而言，动态网页在被访问时从数据库查询数据，涉及大量IO操作，消耗了服务器大量资源，占用大量系统时间。
        数据静态化是通过编写后台程序，由网站内容管理系统事先把网页要显示的动态数据从数据库读取出来写到Web页面里，或者把动态数据写到文本文件中，然后通过包含技术把文本文件包含到网页要显示地区域，页面静态化便完成了。
        网站数据变成了静态的文件形式，减轻了服务器计算压力，可以释放更多的性能用于提供更多、更快的访问服务。
        如图4所示，对表现层结构进行分解，最后被网页结构代码所调用。
        4 结语
        通过了解和剖析网站表现层的结构，对于网站开发和建设维护团队来说都是非常有益的，不仅可以将工作化整为零，也可以优化团队协作，减轻网站维护成本，提高网站可维护度，对网页进行不断的调整和改进，内容不断充实、扩充并且多处复用。相信每个开发人员对于网站的结构都有自己的一套经验和理论，希望本文可以帮助那些初学者和对网站开发有兴趣、志同道合的人，共同探讨和借鉴学习，不断深入网站设计与制作的理论基础，推动网站事业的发展。
        参考文献：
        [1]丁士锋.网页制作与网站建设实战大全[M].北京：清华大学出版社，2013（1）.
        [2]张春晓.网页制作与网站建设宝典[M].用div与css实现网页布局代码北京：电子工业出版社，2012（1）.
        [3]刘增杰，刘海松.精通DIV+CSS3网页布局与样式[M].北京：清华大学出版社，2012（1）.
        作者简介：邵海鹏（1981-），男，北京人，网络工程师，本科，从事网站设计与制作的研究。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。