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

基于表现与结构分离的网页布局实践 第 PAGE \* Arabic \* MERGEFORMAT 1 页 基于表现与结构分离的网页布局实践 摘要：表现与技术相分离来制作网页已经是一种必然趋势。可以在网页结构不变的情况下，通过修改样式表文件实现页面重构，变换网页的表现风格。不仅大大提高了页面的制作效率，而且提高了网站的维护效率。本文通过案例的制作，将表现与结构分离的网页布局实践过程与大家分享。 关键词：表现；结构；网页布局 作者简介：闻立鸥（1971-），女，副教授，主要从事计算机应用方面的研究。 一、引言 随着Web 2.0标准化设计理念的普及，DIV+CSS进行网页制作已经是必然趋势，网页制作人员应该顺应网络技术的发展，及时更新技术手段。学会通过HTML语言构建网页的语义化结构并尽可能优化，然后运用CSS样式表文件呈现网页的可视化效果，实现网页的表现与内容的分离。大大减少了代码冗余，提高网页制作效率，改善网页浏览质量。 二、内容与表现相分离技术简介 内容和表现相分离，是目前WEB2.0标准技术制作网页最基本的方法，也是CSS网页布局重要的目标之一。基本的制作流程是，先分析规划切割效果图，接下来使用可扩展的超文本标记语言搭建网页内容结构，然后利用样式表文件“还原”出与效果图一致的页面效果。如果要实现网页内容和外观样式的完全分离，应创建一个新的样式文件，然后以链入外部CSS样式表的方法将这个样式文件链接到网页文档中。这样就完全做到网站的维护人员可通过修改样式文件来改变页面风格，修改网页文件来改变内容，互不干扰。 三、表现与结构分离技术制作网站流程解析本案例为个人网站，包括首页和相关二级页面，首页效果图如下。所有页面布局整齐且风格统一。使用表现与结构分离技术制作流程如左图。 1. 利用XHTML 构建整体网页的结构。 四、结语 采用结构与表现相分离技术制作网页，在“表格时代”是不可能实现的。如果要修改网页的外观风格，直接修改CSS样式文件代码即可，准确而快捷呈现效果图的显示效果。但是如果按照WEB标准更加专业更加规范设计网页，还需要熟练运用XHTML与CSS代码，加强实践，认真思考并尝试运用多种方法去解决实践中出现的问题。 参考文献： [1]闻立鸥。网页制作实用教程[M].北京：清华大学出版社，2009. [2]柯海鹏。任务驱动法在DIV+CSS网页布局技术中的教学探索[J].教师，2019，（22）。 [3] 关秀英。Flash CS4商业动画、片头与网站设计案例精解[M].北京：清华大学出版社，2019. [4]闻立鸥。DIV+CSS之布局一行三列页面实证分析[J].教育教学论坛，2019，（22）。