基于表现与结构分离的网页布局实践
2015-12-09 11:27闻立鸥
教育教学论坛 2015年27期
摘要：表现与技术相分离来制作网页已经是一种必然趋势。可以在网页结构不变的情况下，通过修改样式表文件实现页面重构，变换网页的表现风格。不仅大大提高了页面的制作效率，而且提高了网站的维护效率。本文通过案例的制作，将表现与结构分离的网页布局实践过程与大家分享。
关键词：表现；结构；网页布局
中图分类号：G712 文献标志码：A 文章编号：1674-9324（2015）27-0282-03
一、引言
随着Web 2.0标准化设计理念的普及，DIV+CSS进行网页制作已经是必然趋势，网页制作人员应该顺应网络技术的发展，及时更新技术手段。学会通过HTML语言构建网页的语义化结构并尽可能优化，然后运用CSS样式表文件呈现网页的可视化效果，实现网页的表现与内容的分离。大大减少了代码冗余，提高网页制作效率，改善网页浏览质量。
二、内容与表现相分离技术简介
内容和表现相分离，是目前WEB2.0标准技术制作网页最基本的方法，也是CSS网页布局重要的目标之一。基本的制作流程是，先分析规划切割效果图，接下来使用可扩展的超文本标记语言搭建网页内容结构，然后利用样式表文件“还原”出与效果图一致的页面效果。如果要实现网页内容和外观样式的完全分离，应创建一个新的样式文件，然后以链入外部CSS样式表的方法将这个样式文件链接到网页文档中。这样就完全做到网站的维护人员可通过修改样式文件来改变页面风格，修改网页文件来改变内容，互不干扰。
三、表现与结构分离技术制作网站流程解析
本案例为个人网站，包括首页和相关二级页面，首页效果图如下。所有页面布局整齐且风格统一。使用表现与结构分离技术制作流程如左图。
1.利用XHTML构建整体网页的结构。
设计之路坚信而痛苦，伴随着讥讽与嘲笑，但我们依然坚持。
我们的宗旨
团队口号 不求最好但求最精 我们能够做到最好，我们付出的努力都会有所收获无论大小，无论多少。
2.利用样式表文件表现网页的外观。
新建样式表文件style.css
body {
background： url（../images/bg-body.jpg） repeat left top；
font-family： 'Muli-Light'；
margin： 0；
}
img {
border： 0；
}
#navigation li a{
background： url（../images/buttons.png） no-repeat；
}
#blog div.box， #blog div.box div.header {
background： url（../images/bg-boxborders.png） 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；
font-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：hover， #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： 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： #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]柯海鹏.任务驱动法在DIV+CSS网页布局技术中的教学探索[J].教师，2013，（22）.
[3]关秀英.Flash CS4商业动画、片头与网站设计案例精解[M].北京：清华大学出版社，2010.
[4]闻立鸥.DIV+CSS之布局一行三列页面实证分析[J].教育教学论坛，2014，（22）.endprint
猜你喜欢
哲学评论(2021年2期)2021-08-22
模具制造(2019年3期)2019-06-06
影视与戏剧评论(2016年0期)2016-11-23
文艺生活·中旬刊(2016年9期)2016-11-07
人间(2016年26期)2016-11-03
中国实用医药(2016年24期)2016-10-17
土木建筑工程信息技术(2013年2期)2013-10-17
