CSS与网站布局设计.ppt

CSS and Web Design 钱哨 2007年6月 Qianshao@ CHP1.CONTENT 什么是CSS与Web标准? 了解CSS的应用本质 表现(Design)与内容(Content)分离的页面技术 Web标准与用户体验(UE)设计 CSS的重要性 Showcase 1.1 WEB标准历史与发展 W3C技术架构 现代网页设计的忠告 1.2了解CSS的应用本质 一些案例： 为非线性阅读提供更好的设计方式; HTML的本质作用=非线性阅读 1.3 表现(Design)与内容(Content)分离的页面技术 表现(Design) 表现与内容分离=更自由的设计 DIV=实现这一切的基础 为什么要实现表现与内容的分离？ 表现与内容的分离的延伸思考 XHTML与CSS的协同作战 高效开发 使大型项目设计过程变得简洁; 易于维护 语义清晰、管理方便; 易于维护 结构清晰、方便修改;SEO更方便 其它方面优势 现阶段的问题 Web标准与用户体验(UE)设计 网站与用户体验（UE）的关系 自服务式网站 网站体验的改进，直接带来利益 Web标准与CSS设计的目的：帮助我们对用户体验进行思考 网站设计的一些思考细节：合理的网站层次合理的导航结构合理的版式结构... ... Web标准与CSS设计的目的：合理的CSS设计代表合理的网站结构设计 用户体验的思考过程 用户体验的思考过程 用户体验的思考过程 CSS目的：CSS设计与用户体验混合思考 CSS的重要性 声明：CSS绝对不是最好的表现技术 下一代表现层技术： CSS是最普及的技术 CSS是AJAX的表现核心 网站是一个“自服务式”的产品 通过改善用户体验使网站所有者受益 与用户一起走一篇 与用户一起做一篇 让用户感受细节 Part 4 * CSS与网站设计 深入概念: Web标准是网站开发中的一系列标准的集合。每一个标准对应网站开发中的每一个环节，如HTML用于表现信息结构，CSS用于表现信息的展示方式，Javascript用于表现信息的简单动态处理等 无论是HTML，还是XHTML，还是CSS，javascript,都是Web标准其中之一 CSS (Cascading Style Sheet) 层叠样式表` 3、表现与内容分离是CSS的精华所在。 1、我们从做网站开始,就使用Web标准。 2、制作网站=符合标准但!=符合Web标准的目标。 CSS = Web客户端表现层技术之一 客户端技术? User PC Server 展现信息 获得信息 与数据交换 Web客户端表现层技术的作用 2、使用户拥有最好的用户体验（视觉享受性） (User Experience) 1、为用户提供最优质的信息(内容可用性) (Information User ability) CSS目的: 线性的 非线性的 现阶段的HTML:组织信息 现阶段的HTML:具备一些设计能力 Color、Font-size、Bgcolor、picture CSS目的： 专注于对信息的视觉表现进行控制的技术 取代HTML中的“设计”部分 使HTML专注于“信息整理“ 而CSS来专注于信息的”视觉表现“ Flash 互动表现技术 丰富用户体验 丰富的媒体支持及动画制作 针对HTML(文本状信息)的最佳页面表现技术; CSS目的: 表现(Design)与内容(Content)？ 内容(Content) 表现(Design) 内容(Content) 内容的最终布局与风格 没有任何修饰的文本和图片 使用传统的HTML来表现(Design) 设计方式复杂 控制区域较多 代码繁杂易读性差 用CSS来表现 设计简单 易于控制 代码简单 易于修改 传统表格式排版 DIV排版 更自由 可维护性提高 实现重用，提高开发效率 重用使代码量减少，减轻服务器负担降低宽带成本 加快浏览器解析速度使用户阅读更快捷迅速? 通过重用性的思考，间接改善网站可用性 推荐使用XHTML+CSS的方式来对网站进行编码 我们的应用级设计对象是用户,但代码级的设计目标是机器 使用Dreamweaver 8 或其它支持CSS布局的软件进行可视化开发 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-