数字媒体div+css.pptVIP

《数字媒体》课程讲义 DIV+CSS专题 讲师：南开大学软件学院 王斌辉 时间：二零一零年十一月十九日 地点：南开大学软件学院 表现(Design)与内容(Content)分离的页面技术 什么是表现与内容？ 为什么要实现表现与内容的分离？ XHTML与CSS的协同作战 高效开发 易于维护 其它方面优势 现阶段的问题 什么是表现(Design)与内容(Content)？ 内容是指具体的信息，仅仅表示信息正文及各部分的名称，如标题、作者、正文、图片 表现是指信息的展示形式，如标题使用16号黑体，正文使用12号宋体、图片采用文绕图间距10px的排列方式等 内容(Content) 表现(Design) 什么是表现(Design)与内容(Content)？ 使用传统的HTML来表现(Design) 设计方式复杂 控制区域较多 代码繁杂易读性差 表现与内容分离的技术 设计简单 易于控制 代码简单 易于修改 什么是表现(Design)与内容(Content)？ DIV元素的掌握是表现与内容分离的基础 传统表格式排版 DIV排版 更自由 为什么要实现表现与内容的分离？ 分离使得网站代码可维护性提高 分离使代码重用得到可能，大幅提高开发效率 重用使得代码量可以成倍减少，减轻服务器负担使得降低宽带成本成为可能 加快浏览器解析速度使用户阅读更快捷迅速 为什么要实现表现与内容的分离？ 分离技术使我们在制作网站的时候能够充分对网站统一性、可用性进行思考与设计，提高网站可用性，改善用户体验 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.columns-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.css); @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 对信息区域的合理设计是维护的关键 其它方面优势 分离使得设计人员、程序人员更好的独立工作 分离使内容转换到其它平台的成本更低 … 现阶段的问题 浏览器对CSS支持的不完善 相同浏览器的不同版本、不同操作系统下显示不同 不同浏览器对CSS的支持是不同的 Bruce Scharlau, University of Aberdeen, 2006 Block Inline Boxes Inline elements are displayed next to each other…strongTest/strong emText/emwill be displayed as:instead of: …ignoring any other visual formatting these elements normally produce. Bruce Scharlau, University of Aberdeen, 2006 Block Inline Boxes Be aware of the difference between block boxes and inline boxes.. Fo