这套速查手册可以打印成 A3 尺寸，共2页，以下是各种不同格式下载：

• 高分辨率 GIF 图片格式，第一页，第二页
• PDF 格式，第一页，第二页

本文来源：http://tutorialfeed.blogspot.com/2009/10/visual-cheat-sheet-css-compatiblity.html

相比起其他的视频教程呢，我的教程主要讲的都是实用的一些DIV+CSS制作手法和技巧，我也看过其他人制作的这方面教程，虽然可以做到十几讲甚至二十几讲，但是有很多功能在平时工作中都是用不到的，有的连我做了这么多年前端开发的人都没有用到过，那些我就跳过了，避轻就重的讲了八节课。

这次把这八节课的视频发出来，希望能给你们帮助。当然还有很多没有讲到的功能点，大家可以google一下。

下面是课程的清单：

xHTML + CSS 标准网页制作视频教程

• 第一讲：概述、什么是标准web页面、正确的书写规范、字体的控制、列表的控制等等...（64′30″）(第一课、第二课)
• 第二讲：开发工具、对整个页面的控制、margin/padding的使用，float详解、网页排版初步（43′08″）（第三课、第四课）
• 第三讲：css+div制作表格（15′14″）
• 第四讲：网站页面分析、网站头部制作格（13′35″）
• 第五讲：网站导航、首条新闻区域的制作（21′41″）
• 第六讲：网站新闻区域的DIV+CSS混排（31′10″）
• 第七讲：内容页的制作（29′10″）
• 第八讲：input/hr的样式、SEO初步（23′48″）

可以在线观看，下载办法请自行开发 

织梦的RSS文件是以XML文件形式保存在 /data/rss/ 文件夹下(例)，但这些文件仅仅是针对织梦后台建立的各个频道的RSS，我使用Google Reader 将其烧合为一个FEED源。（原文）

把所有频道的订阅源都添加到Google reader里面，并且把这些订阅源都放置在一个文件夹下；

然后点“管理订阅(Manage subscriptions)”-“文件夹和标签(Folders and Tags)”，将该文件夹设置为“公共(public)”，就会出现一个共享的“公共网页”，点击“查看公共网页(private view public page)”。当然，这个地址很长，我们可以使用FeedBurner再次将这个地址烧录一次，这样就会得到一个基于FeedBurner的合烧地址。

然后我们把这个地址添加到你的织梦系统中，就可以实现整站的RSS输出。

示例：消费电子情报

另外如果想通知浏览器当前浏览的网址有RSS输出的话可以再HEAD中添加一段代码，这样也有利于搜索引擎收录你的文章，比如我的首页HTML上添加我BLOG的RSS订阅：

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feed.lidecheng.com" />

<link rel="alternate" type="text/xml" title="RSS .92" href="http://www.lidecheng.com/blog/feed/rss" />

<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="http://www.lidecheng.com/blog/feed/atom" />

第一天

• 织梦产品的介绍
• 织梦产品的安装
• config.php详解
• 织梦目录详解
• 织梦模板目录详解

第二天

• 织梦的设计架构
• 织梦数据库的常用表介绍
• 新建一个织梦模板
• 织梦文章调用方法介绍
• 文章底层模板修改详解
• 跨频道调用及整站调用文章列表

第三天

• 织梦图片文章调用方法介绍
• 图片与文章列表的图文混排
• 织梦文章时间的多种调用方式

第四天

• 文章内容页的制作及修改
• 织梦后台自定义标签的使用及调用方法

第五天

• 织梦列表页文章的调用
• 列表页的全站调用及混编调用
• 列表页的制作及注意事项

第六天

• 织梦常用标签的使用
• 常用标签的底层模板修改方法
• 友情链接、投票等系统的调用

第七天

• 织梦的自定义宏标记的制作
• 织梦的自定义宏标记的两种调用方法
• 织梦的自定义宏标记的使用注意事项

第八天

• 织梦智能标记的使用
• 织梦专题及单页面的制作及使用方法
• 织梦用户登陆框的调用及修改
• 织梦用户登陆后登陆框的变换
• 用户后台的修改

第九天

• 织梦系统与discuz的整合
• 织梦系统与phpwind的整合
• 织梦整合API文件详解

第十天~第十四

• 使用织梦cms系统及div+css制作一个完整的新闻发布站点

第一期：十天学习DIV+CSS制作标准web页面

第一天

• 什么样的网页可以称为标准的Web页面
• 使用Web标准开发网页的优势
• 初识XTHML / DIV / CSS
• 制作标准Web页面的注意事项

第二天

• 常用CSS方法的使用详解
• CSS的写法与格式
• Class与id
• CSS对文字、列表、背景、超链接等的操作

第三天

• CSS开发及调试工具
• 多浏览器支持（每节课都要提到）
• CSS对整个页面的控制

第四天

• margin / padding 的使用
• float 详解
• 网页的横向排版和纵向排版

第五天

• 用CSS+DIv替代表格
• 只要是Table能完成的CSS+Div一定能完成
• 使用margin / padding配合网页表格制作

第六天

• 带领学员使用Web标准制作一个个人网站
• 整站的规划、目录结构、命名规范
• SEO初步知识

第七天

• 完成首页
• 网页栅格布局
• 头部尾部、sidebar、main

第八天

• 完成两个附页面（自我介绍、关于本站）
• 图文混排
• 定位与控制

第九天

• 完成两个附页面（我的照片、下载资源）
• CSS对图片的控制
• CSS列表详解

第十天

• 完成个人网页（全部五个页面）的制作
• UCD初步介绍
• 解决学员Email问题及其他遗留问题

针对不同浏览器对页面的显示方式来写css文件，需要使其对IE6 IE7 FIREFOX都有最佳的显示效果，或要调整css在其中一中浏览器中的显示方式，可以通过下划线(_)、星号(*)来处理：

比如要居中显示，我们都知道css中写法为：

text-align: center;

当然这属性是所有浏览器都解释的，如果只想让ie6有居中的效果而firefox和IE7则不应用居中，可写为

_text-align: center;

如果想让所有IE都解释而在firefox不解释则写为：

*text-align: center;

而ie6与ie7的不同在于ie6解释!important，而ie7会解释!important。

区别不同浏览器的css hack写法为：

区别ie6和ie7：text-align: center; text-align: left!important;
区别firefox和ie6：text-align: center; _text-align: left;
区别firefox和ie7：text-align: center; *text-align: left;
区别firefox、ie6和ie7：text-align: center; *text-align: left; *text-align: right!important;

总结：

IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
IE6支持下划线"_"，IE7和firefox均不支持下划线"_"。

在网上搜索此问题的朋友还不少，找到的方法也不外乎几种：虚拟机、降级至IE6再使用绿色版IE7，第三方软件等，今天我介绍两种方法来实现一台电脑商运行多个版本的IE。

A：你的电脑正在使用IE7：

Multiple-IE 这个工具会帮到你，通过它可以实现 IE6, IE5.5, IE5, IE4 & IE3和你的IE7同时运行。

安装Multiple IE：


官方网址：http://tredosoft.com/Multiple_IE
下载地址：http://tredosoft.com/files/multi-ie/multiple-ie-setup.exe

B：你的电脑正在使用IE6：
如果你的电脑正在使用的IE版本为6，且你只需要测试页面在IE6/7上的显示效果，那么您除了可以选择下载一个绿色版的IE7以外还可以使用standalone。
官方网址：http://tredosoft.com/IE7_standalone
下载地址：http://tredosoft.com/files/IE7s/IE7S-setup.exe

以下是从载入速度、首屏视觉效果、导航、推荐区、奖牌榜、头图、要闻区、通透性、观看直播体验、直播页等对各门户奥运频道进行对比分析。
载入速度

首屏信息的多少是吸引用户继续浏览的一个关键，以1024×768分辨率为准，下图阴影部分为各门户首屏信息的显示范围，QQ奥运频道和 163奥运频道显示区域比较大，其次是sohu和sina。

首屏视觉效果QQ和sina的层次比较分明，可以有效的引导用户去浏览，而且sina把广告放到顶部可以减少广告对信息的影响，这个是一个聪明 的做法。163“导航”和“完全夺金历程”区2块大红色在互相争艳，用户的视觉不知道往那里放，而且“完全夺金历程”区和要闻区的架构不协调，形成Z型。 Sohu一片红,导航、广告、近期赛事都混在一起了严重影响用户浏览，近期赛事完全被弱化了。

总结首屏视觉效果QQ和sina做的较好！

导航

在导航方面QQ分类很清晰，新闻、视频、服务、互动几个大区很明显，而且导航紧凑不松散,比较容易寻找内容。163虽然有分区，但每个区 没有明显标记,赛事项目和导航区分不够明显。Sina的区域感不强而且上下导航视觉效果不是那么舒服。Sohu第一感觉就是乱，而且被一堆广告包围着，严 重的干扰导航，分类不清晰，区域感也不强。

总结导航方面QQ做的较好！

奖牌榜

奖牌榜sina做的较详细，不足之处就是少了个总数和把名次放到国旗后面不过后来修改为名次排前。QQ没有明显的排名符号，整体感觉还可 以，163整体也比较清晰，用“完全金牌榜”来代替“更多”会让网友更容易读懂。但不足之处是显示国家比较少，和位置放置头屏的右上方和信息内容分开，用 户需要一个跳跃性的浏览，不利于浏览。Sohu和sina有点相似都是可以往上滚动来显示更多国家，但滚动效果比较差，设计粗糙，而且整体显的很拥挤。

头图

要闻区

直播页

163直播页清晰简洁，受干扰比较少，互动性较强可以和其他网友一起讨论赛事，还有实时比分。不足之处是直播赛事区域放到视频框上方，因为当用户马上想转 台的时候，应该把其他赛事信息放到用户最容易看到的地方，一般浏览网页的习惯是从上到下，和从左到右。必然放到上方不是用户第一时间看到的地方。

sina直播页清晰简洁，受干扰最少，正在直播的赛事放到用户比较容易找到的右下方，也可以互动交流但需要安装软件。

sohu直播页，该有的都有了，不过颜色很压抑，设计粗糙。和163、sina相比感觉不是一个档次。

总结

UE (User Experience) : 用户体验 link

UI (User Interface) : 用户界面 link

UCD (User-Centered Design) :以用户为中心的设计 link

UED (User-Experience Design) :用户体验设计 link

---------分割线---------

UI(User Interface)即用户界面，也称人机界面。是指用户和某些系统进行交互方法的集合，这些系统不单单指电脑程序，还包括某种特定的机器，设备，复杂的工具等。
软件设计可分为两个部分：编码设计与UI设计。编码设计大家都很熟悉，但是 UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和　 interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。
界面设计。在漫长的软件发展中，界面设计工作一直没有被重视起来。做界面设计的人也被贬义的称为“美工”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。

交互设计(Interaction Design) 作为一门关注交互体验的新学科在二十世纪八十年代产生了，它由IDEO的一位创始人比尔•莫格里奇在1984年一次设计会议上提出，他一开始给它命名为“ 软面（Soft Face）”，由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后来把它更名为“Interaction Design”――交互设计。

UED是进行产品策划的主力之一，他们用自己的知识、经验、设计能力拿出设计方案。ED不只是互联网专家，还是行业专家。能够用自己的互联网知识来设计出行业专家想实现的操作，而付诸以商业营销。

简单的说，在进行产品设计时从用户的需求和用户的感受出发，围绕用户为中心设计产品，而不是让用户去适应产品，无论产品的使用流程、产品的信息架构、人机交互方式等，都需要考虑用户的使用习惯、预期的交互方式、视觉感受等方面。
衡量一个好的以用户为中心的产品设计，可以有以下几个纬度：产品在特定使用环境下为特定用户用于特定用途时所具有的有效性（effectiveness）、效率（efficiency）和用户主观满意度（satisfaction），延伸开来还包括对特定用户而言，产品的易学程度、对用户的吸引程度、用户在体验产品前后时的整体心理感受等。
UCD是将来公司开展网络服务所必须的，所以UCD职位也将是一种趋势。

用户体验（User Experience，简称UE）是一种纯主观的在用户使用一个产品（服务）的过程中建立起来的心理感受。因为它是纯主观的，就带有一定的不确定因素。个体差异也决定了每个用户的真实体验是无法通过其他途径来完全模拟或再现的。但是对于一个界定明确的用户群体来讲，其用户体验的共性是能够经由良好设计的实验来认识到。
用户体验主要是来自用户和人机界面的交互过程。在早期的软件设计过程中，人机界面被看做仅仅是一层包裹于功能核心之外的“包装”而没有得到足够的重视。其结果就是对人机界面的开发是独立于功能核心的开发，而且往往是在整个开发过程的尾声部分才开始的。这种方式极大地限制了对人机交互的设计，其结果带有很大的风险性。因为在最后阶段再修改功能核心的设计代价巨大，牺牲人机交互界面便是唯一的出路。这种带有猜测性和赌博性的开发几乎是难以获得令人满意的用户体验。至于客户服务，从广义上说也是用户体验的一部分，因为它是同产品自身的设计分不开的。客户服务更多的是对人员素质的要求，而已经难以改变已经完成并投入市场的产品了。但是一个好的设计可以减少用户对客户服务的需要，从而减少公司在客户服务方面的投入，也降低由于客户服务质量引发用户流失的机率。

交互设计是一门特别关注以下内容的学科：
1、定义与产品的行为和使用密切相关的产品形式。
2、预测产品的使用如何影响产品与用户的关系，以及用户对产品的理解。
3、探索产品、人和物质、文化、历史之间的对话。
交互设计从“目标导向”的角度解决产品设计：
1、要形成对人们希望的产品使用方式，以及人们为什么想用那个这种产品等问题的见解。
2、尊重用户及其目标。
3、对于产品特征与使用属性，要有一个完全的形态，而不能太简单。
4、展望未来，要看到产品可能的样子，它们并不必然就像当前这样。

UDC需要学习的课程

• 人机交互的认知心理学、工程心理学基础
• 人的因素、人类工效学基础
• 人机交互的研究方法
• 用户调查和研究方法
• 可用性工程与评估方法
• 软件中的交互设计
• 软件产品的界面视觉设计原则、标准及经验分析
• 以用户为中心的界面设计与开发过程
• 界面设计与评估案例分析
• 人机交互界面的编程实现
• 人机工程项目管理
• 人机交互技术的最新进展

推荐的网站：

• 口碑网ued团队 http://ued.koubei.com/
• 阿里妈妈ued团队 http://ued.alimama.com/
• 淘宝网ued团队 http://ued.taobao.com/blog/
• 阿里软件ued团队 http://www.alisoftued.com/
• 阿里巴巴ued团队 http://www.aliued.com/
• 19楼ued团队 http://ued.dukuai.com/blog/
• 网易ued团队 http://www.ued163.com/
• chinaUI 优艾网 http://www.chinaui.com/
• UCD大社区 http://ucdchina.com/
• 蓝色理想 http://www.blueidea.com/

IE WebDeveloper是由Ie Inspector开发的，虽然不如Firebug那么强大但也足以应付在ie上对代码的调试工作。虽然随着IE8的到来也许我们会用上更好的IE及附带的Developer Tools（详情），但在ie8还未发布正式版和未普及的情况下，使用第三方的ie代码辅助工具也是有必要的。

可以去官方网站下载他的最新版本 link ，截止目前（08年9月），它的最新版本是Build:2.3.1.110 (3/12/2008)

IE WebDeveloper允许直接地在浏览器窗口中浏览、传输和更新HTML DOM。该软件可以实时分析网页并且显示为一种允许你察看表格风格、Java脚本，表格以及其它网页元素的树形风格。该软件还可以在浏览器中交互式地突出显示被选择的网页元素，因此你可以在实际网页中定位其代码。 查看style元素，定位div等等。且支持一键w3c检查（包括HTML/XHTML/CSS/Javascript tutorial等）。虽然用起来不如Firebug那么得心应手，但是毕竟解决了我们在ie上调试工具不足的问题。

最后在这里悄悄的提供一个IE WebDeveloper破解工具(keygen)，毕竟国人都喜欢这个。:D 点击下载IE WebDeveloper破解注册机

附：推荐一篇关于Web开发工具介绍的文章：

Collection of Web Developer Tools, per Browser

感谢 不是俺的中文翻译 Web开发工具大集合 - 每个浏览器都有份的！ |  译言yeeyan连接

当前版本：vitaly 1.0

大小：

演示地址：查看

更新时间：

升级历史：

什么是MG2：

MG2是一个免费的且非常容易使用的PHP相册程序

• 易于使用.
• 快速的!
• 显示图片的 EXIF 信息.
• 支持图片标题，说明和用户的意见。
• 多语种支持。
• 可工作于 PHP 安全模式.
• 简单易用的后台管理，直观的图标界面。
• 同时上传多个文件。
• 自动缩略图。
• 图像旋转功能。

MG2 is a FREE and easy to use PHP image gallery script, Here is its official website. I found that, MG2 in 2005 has stopped development(2005/07/25), Original Minigal script is from 2004 to no more changes(2004/08/07).  I use the MG2 not long time, but I think it is a good script, Worth to continue to develop and upgrade it. And I do something to develop again and upgrade it . MG2 retain the copyright. And available for download.

New version : vitaly 1.0

size :

Demo: view

last upload time :

upgrade history :

What is MG2 :

MG2 is a FREE and easy to use PHP image gallery script

• Easy to use.
• Fast!
• Displays EXIF image information.
• Supports image titles, descriptions and user comments.
• Multilanguage support.
• Works in PHP safe mode.
• Full featured webbased admin interface - control your gallery from any computer (with internet access).
• Multiple image upload & FTP image upload.
• Automatic thumbnail generation.
• Image rotating feature.