原创力文档- 1、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。。
- 2、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
- 3、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
- 4、该文档为VIP文档，如果想要下载，成为VIP会员后，下载免费。
- 5、成为VIP后，下载本文档将扣除1次下载权益。下载后，不支持退款、换文档。如有疑问请联系我们。
- 6、成为VIP后，您将拥有八大权益，权益包括：VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 7、VIP文档为合作方或网友上传，每下载1次， 网站将根据用户上传文档的质量评分、类型等，对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
基于表现与结构分离的网页布局实践
摘要：表现与技术相分离来制作网页已经是一种必然趋势。可以在网页结构不变的情况下，通过修改样式表文件实现页面重构，变换网页的表现风格。不仅大大提高了页面的制作效率，而且提高了网站的维护效率。本文通过案例的制作，将表现与结构分离的网页布局实践过程与大家分享。
关键词：表现；结构；网页布局
中图分类号：G712 文献标志码：A 文章编号：1674-9324（2015）27-0282-03
一、引言
随着Web 2.0标准化设计理念的普及，DIV+CSS进行网页制作已经是必然趋势，网页制作人员应该顺应网络技术的发展，及时更新技术手段。学会通过HTML语言构建网页的语义化结构并尽可能优化，然后运用CSS样式表文件呈现网页的可视化效果，实现网页的表现与内容的分离。大大减少了代码冗余，提高网页制作效率，改善网页浏览质量。
二、内容与表现相分离技术简介
内容和表现相分离，是目前WEB2.0标准技术制作网页最基本的方法，也是CSS网页布局重要的目标之一。基本的制作流程是，先分析规划切割效果图，接下来使用可扩展的超文本标记语言搭建网页内容结构，然后利用样式表文件“还原”出与效果图一致的页面效果。如果要实现网页内容和外观样式的完全分离，应创建一个新的样式文件，然后以链入外部CSS样式表的方法将这个样式文件链接到网页文档中。这样就完全做到网站的维护人员可通过修改样式文件来改变页面风格，修改网页文件来改变内容，互不干扰。
三、表现与结构分离技术制作网站流程解析
本案例为个人网站，包括首页和相关二级页面，首页效果图如下。所有页面布局整齐且风格统一。使用表现与结构分离技术制作流程如左图。
1.利用XHTML构建整体网页的结构。
}
#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： nor
文档评论（0）