Add

CSS标准化网页布局与重构

Posted: November 19, 2006 at 11:22 am | Tags: blog, flash, html, java, javascript, web, 平台, 开发, 技术

刚刚在BLUEIDEA上看到的,到时有空就去了,哈,学习学习嘛.         :)

活动时间:11月25日(星期六) 下午 14:00-15:30
活动主题:CSS标准化网页布局与重构
活动地点:中关村图书大厦(左岸公社) 五层多功能厅

主讲:李超(CSS网站布局实录作者)

这次的活动是上次网站设计专场讲座的延续,由于上次CSS网站布局实录的作者外地出差,没能参加,因此CSS部分没有讲解,这次出版社特地安排把CSS部分的活动做完,到时候会有一个半小时全部与大家一起交流CSS的内容

CSS方面的很多东西都有教程和图书,到时候应该不会太多废话,会找一些书中没有的东西,CSS的一些背景和网站设计中使用CSS的方法,思路,主要是思路,设计思路和实现思路,等一些较思考性的内容,并与大家一起交流一下,欢迎参加和拍砖~

主题

• 什么是Web标准?
• Web客户端表现层技术的起源与发展
• 表现(Design)与内容(Content)分离的页面技术
• (CSS网站布局技术)
• Web标准与用户体验(UE)设计
• 部分CSS布局案例

※什么是Web标准？
Web标准是网站开发中的一系列标准的集合。每一个标准对应网站开发中的每一个环节，如HTML用于表现信息结构，CSS用于表现信息的展示方式，Javascript用于表现信息的简单动态处理等
无论是HTML，还是XHTML，还是CSS，javascript,都是Web标准其中之一

※Web客户端表现层技术的起源与发展
Web的基本架构与主要功能
Web客户端表现技术的作用
HTML与JavaScript
Gif动画
Css技术
Quicktime、ActiveX控件
Flash

Web客户端表现层技术的作用
客户端表现层技术的最终目的
客户端表现层技术的最终目的是为用户提供最优质的信息，使用户拥有最好的用户体验(User Experience)

css技术
CSS是一种专注于对信息的视觉表现进行控制的技术。CSS的目标是用来取代HTML中的“设计”部分，使HTML专注于信息整理，而CSS来专注于信息的视觉表现
优秀的CSS与HTML设计使内容与表现完全分离，以更好的结构来展示信息，使得信息易于展现并易于修改

Quicktime、ActiveX控件
网络趋向于多媒体形式的展示、通过Quicktime、ActiveX实现在网页中的视频与音乐播放。

Flash
目前最优秀的互动表现技术、丰富用户体验
通过FLASH开发环境或编程实现与用户的实时交互
丰富的媒体支持及动画制作
是目前为品牌用户建立线上推广、为用户提供优秀交互界面的强大工具

※表现(Design)与内容(Content)分离的页面技术

表现(Design)与内容(Content)分离的页面技术
什么是表现与内容？
为什么要实现表现与内容的分离？
XHTML与CSS的协同作战
高效开发
易于维护
其它方面优势
现阶段的问题

什么是表现(Design)与内容(Content)？
内容是指具体的信息，仅仅表示信息正文及各部分的名称，如标题、作者、正文、图片
表现是指信息的展示形式，如标题使用16号黑体，正文使用12号宋体、图片采用文绕图间距10px的排列方式等

什么是表现(Design)与内容(Content)？
使用传统的HTML来表现(Design)
设计方式复杂
控制区域较多
代码繁杂易读性差

※表现与内容分离的技术
设计简单
易于控制
代码简单
易于修改

什么是表现(Design)与内容(Content)？
DIV元素的掌握是表现与内容分离的基础

为什么要实现表现与内容的分离？
分离使得网站代码可维护性提高
分离使代码重用得到可能，大幅提高开发效率
重用使得代码量可以成倍减少，减轻服务器负担使得降低宽带成本成为可能
加快浏览器解析速度使用户阅读更快捷迅速

为什么要实现表现与内容的分离？
分离技术使我们在制作网站的时候能够充分对网站统一性、可用性进行思考与设计，提高网站可用性，改善用户体验

XHTML与CSS的协同作战
推荐使用XHTML+CSS的方式来对网站进行编码
我们的应用级设计对象是用户,但代码级的设计目标是机器
使用Dreamweave MX 2004或后续版本进行可视化开发

高效开发
Macromedia.com
不同排版模式的高效重用

易于维护
Macromedia.com
良好的规划与组织是维护的关键
多个CSS协调工作、层次清晰

Macromedia.com
对信息区域的合理设计是维护的关键

其它方面优势
分离使得设计人员、程序人员更好的独立工作
分离使内容转换到其它平台的成本更低
…

现阶段的问题
浏览器对CSS支持的不完善
相同浏览器的不同版本、不同操作系统下显示不同
不同浏览器对CSS的支持是不同的

※Web标准与用户体验(UE)设计

Web标准与用户体验(UE)设计
网站与用户体验（UE）的关系
Web标准帮助我们对用户体验进行思考
用户体验的几个思考过程
案例

网站与用户体验（UE）的关系
用户体验是什么？
What is User Experneice?
网站是一个“自服务式”的产品
通过改善用户体验使网站所有者受益

Web标准
帮助我们对用户体验进行思考
Web标准设计的难点在于对网站的信息结构进行合理分配，归纳，设计
设计合理的网站层次
设计合理的导航系统
设计合理的版式结构
…

只有合理的网站信息结构的设计，才能让Web标准所支持的分离式结构有用武之地

用户体验的思考过程
与用户一起走一篇

用户体验的思考过程
与用户一起做一篇

用户体验的思考过程
让用户感受细节

※案例
2006 CSS Award Winner

※CSS玩家交流

—–
PING:
BLOG NAME: 打包机
TITLE: 打包机2
IP: 221.0.56.225
URL: http://www.jnxrbz.com/212.htm
DATE: 05/19/2007 20:42:56
文章好,已被打包机用
—–
PING:
BLOG NAME: 升降机液压升降机升降平台
TITLE: 升降机液压升降机
IP: 60.208.187.18
URL: http://www.jiyangheli.com/products.htm
DATE: 05/20/2007 22:30:14
文章好,已被升降机/升降平台/液压升降机引用
—–
PING:
BLOG NAME: 灌装机
TITLE: 1灌装机
IP: 60.208.192.45
URL: http://www.jnxrbz.com/204.htm
DATE: 05/24/2007 03:19:13
好,已被灌装机引用
—–