基于表现和结构分离的网页布局实践
基于表现和结构分离的网页布局实践 一、引言 随着Web 2.0标准化设计理念的普及,DIV+CSS进行网页制作已经是必然 趋势,网页制作人员应该顺应网络技术的发展,及时更新技术手段。学会通过 HTML语言构建网页的语义化结构并尽可能优化,然后运用CSS样式表文件呈现 网页的可视化效果,实现网页的表现与内容的分离。大大减少了代码冗余,提高网 页制作效率,改善网页浏览质量。二、内容与表现相分离技术简介 内容和表现相分离,是目前WEB2.0标准技术制作网页最基本的方法,也是 CSS网页布局重要的目标之一。基本的制作流程是,先分析规划切割效果图,接下 来使用可扩展的超文本标记语言搭建网页内容结构,然后利用样式表文件“还原” 出与效果图一致的页面效果。如果要实现网页内容和外观样式的完全分离,应创 建一个新的样式文件,然后以链入外部CSS样式表的方法将这个样式文件链接到 网页文档中。这样就完全做到网站的维护人员可通过修改样式文件来改变页面风 格,修改网页文件来改变内容,互不干扰。
三、表现与结构分离技术制作网站流程解析本案例为个人网站,包括首页 和相关二级页面,首页效果图如下。所有页面布局整齐且风格统一。使用表现与 结构分离技术制作流程如左图。
1. 利用XHTML 构建整体网页的结构。
四、结语 采用结构与表现相分离技术制作网页,在“表格时代”是不可能实现的。如 果要修改网页的外观风格,直接修改CSS样式文件代码即可,准确而快捷呈现效果 图的显示效果。但是如果按照WEB标准更加专业更加规范设计网页,还需要熟练 运用XHTML与CSS代码,加强实践,认真思考并尝试运用多种方法去解决实践中 出现的问题。