1、数字媒体课程讲义 DIV+CSS专题,讲师：南开大学软件学院 王斌辉 时间：二零一零年十一月十九日 地点：南开大学软件学院,表现(Design)与内容(Content)分离的页面技术,什么是表现与内容？ 为什么要实现表现与内容的分离？ XHTML与CSS的协同作战 高效开发 易于维护 其它方面优势 现阶段的问题,什么是表现(Design)与内容(Content)？,内容是指具体的信息，仅仅表示信息正文及各部分的名称，如标题、作者、正文、图片 表现是指信息的展示形式，如标题使用16号黑体，正文使用12号宋体、图片采用文绕图间距10px的排列方式等,内容(Content),表现(Design),什
2、么是表现(Design)与内容(Content)？,使用传统的HTML来表现(Design) 设计方式复杂 控制区域较多 代码繁杂易读性差表现与内容分离的技术 设计简单 易于控制 代码简单 易于修改,什么是表现(Design)与内容(Content)？,DIV元素的掌握是表现与内容分离的基础,传统表格式排版,DIV排版,更自由,为什么要实现表现与内容的分离？,分离使得网站代码可维护性提高 分离使代码重用得到可能，大幅提高开发效率 重用使得代码量可以成倍减少，减轻服务器负担使得降低宽带成本成为可能 加快浏览器解析速度使用户阅读更快捷迅速,为什么要实现表现与内容的分离？,分离技术使我们在制作网站的
3、时候能够充分对网站统一性、可用性进行思考与设计，提高网站可用性，改善用户体验,XHTML与CSS的协同作战,推荐使用XHTML+CSS的方式来对网站进行编码 我们的应用级设计对象是用户,但代码级的设计目标是机器 使用Dreamweave MX 2004或后续版本进行可视化开发,高效开发,M 不同排版模式的高效重用,div.columns-4-ABCD-A, div.columns-4-ABCD-B, div.columns-4-ABCD-C, div.columns-3-aaBcc-aa, div.columns-3-aaBcc-B, div.columns-3-aabbC-aa, div.c
4、olumns-3-aabbC-bb, div.columns-3-ABC-A, div.columns-3-ABC-B, div.columns-2-aaB-aa, div.columns-2-Abb-A, div.columns-2-AB-A padding: 0 8px; margin-bottom: 0.5em; float: left,ID定义,易于维护,M 良好的规划与组织是维护的关键 多个CSS协调工作、层次清晰,import url(/css/fonts.css); import url(/css/master.css); import url(/css/globalnav.cs
5、s); import url(/css/globalfooter.css); import url(/css/styles.css); import url(/css/layout.css); import url(/css/columns.css); import url(/css/image_wrappers.css); import url(/css/forms.css); import url(/css/data.css); import url(/css/themes.css);,易于维护,M 对信息区域的合理设计是维护的关键,其它方面优势,分离使得设计人员、程序人员更好的独立工作
6、分离使内容转换到其它平台的成本更低 ,现阶段的问题,浏览器对CSS支持的不完善 相同浏览器的不同版本、不同操作系统下显示不同 不同浏览器对CSS的支持是不同的,Bruce Scharlau, University of Aberdeen, 2006,Block & Inline Boxes,Inline elements are displayed next to each other Test Text will be displayed as: instead of: ignoring any other visual formatting these elements normally
7、produce.,Bruce Scharlau, University of Aberdeen, 2006,Block & Inline Boxes,Be aware of the difference between block boxes and inline boxes For example Test Text will be displayed as: Instead of: as it would if p was an inline element,The Box Model,Source: http:/www.w3.org/TR/css3-box/,IE Box Width,Source: http:/en.wikipedia.org/wiki/Internet_Explorer_box_model_bug,
