MakBen http://www.makben.cn MakBen的博客 Thu, 02 Sep 2010 02:10:28 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 HTML解析原理 http://www.makben.cn/?p=478 http://www.makben.cn/?p=478#comments Wed, 01 Sep 2010 02:00:27 +0000 admin http://www.makben.cn/?p=478

Web页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验。非常不幸的是，效率最低的IE浏览器仍然占领者绝大多数市场份额，这已经严重制约了互联网的发展（感叹一下：“马赛克和IE——阻碍人类文明发展的绊脚石!”）。
简单地说，页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么干活的：

  1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
  2. 浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；
  3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
  4. 浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
  5. 浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
  6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
  7. 浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；
  8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
  9. 终于等到了</html>的到来，浏览器泪流满面……
  10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；
  11. 浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

浏览器每天就这么来来回回跑着，要知道不同的人写出来的html和css代码质量参差不齐，说不定哪天跑着跑着就挂掉了。好在这个世界还有这么一群人——页面重构工程师，平时挺不起眼，也就帮视觉设计师们切切图啊改改字，其实背地里还是干了不少实事的。
说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫reflow。

reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们都无法预估浏览器到底会reflow哪一部分的代码，它们都彼此相互影响着。
reflow问题是可以优化的，我们可以尽量减少不必要的reflow。比如开头的例子中的<img>图片载入问题，这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。
另外，有个和reflow看上去差不多的术语：repaint，中文叫重绘。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。repaint的速度明显快于reflow（在IE下需要换一下说法，reflow要比repaint 更缓慢）。下次将通过一系列的实验说明在Firefox、IE等浏览器下reflow的优化。

]]> http://www.makben.cn/?feed=rss2&p=478 0 让你的css写得更简洁 http://www.makben.cn/?p=475 http://www.makben.cn/?p=475#comments Wed, 01 Sep 2010 01:47:06 +0000 admin http://www.makben.cn/?p=475

掌握了这十条css，会让你的css写得更简洁，更有色彩。

  英文原名 (Ten CSS tricks you may not know)
还是非常有用处的，无论CSS新手还是老枪，有些技巧的确鲜为人知。你可以去看英文原版，词汇并不复杂。其实这篇文章有翻译的价值的，不过我最近比较懒，就简单用中文简述一下，其间会插入一些自己的经历和看法：

译文：

1.css字体简写规则

当使用css定义字体时你可能会这样做：

font-size:1em;
line-height:1.5em;
font-weight:bold;
font-style:italic;
font-variant:small-caps;
font-family:verdana,serif;
事实上你可以简写这些属性：

font: 1em/1.5em　bold　italic　small-caps　verdana,serif
　　现在好多了吧，不过有一点要注意：使用这一简写方式你至少要指定font-size和font-family属性，其他的属性（如font-weight, font-style,font-varient）如未指定将自动使用默认值。
2.同时使用两个class

　　通常我们只为属性指定一个class,但这并不等于你只能指定一个，实际上，你想指定多少就可以指定多少，例如：

<p　class=”text side”>…</p>
　　通过同时使用两个class（使用空格而不是逗号分割）,这个段落将同时应用两个class中制定的规则。如果两者中有任何规则重叠，那么后一个将获得实际的优先应用。
3.css中边框（border)的默认值

　　当编写一条边框的规则时，你通常会指定颜色、宽度以及样式（任何顺序均可）。例如：border:　3px　solid　#000（3像素宽的黑色实线边框），其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线（solid),那么其余的值将使用默认值：默认的宽度为中等（相当于3到4像素）；默认的颜色为边框里的文字颜色。如果这正是你想要的效果，你完全可以不在css里指定。
4.!important会被IE忽略

　　在css中，通常最后指定的规则会获得优先权。然而对除了IE以外的浏览器来说，任何后面标有!important的语句将获得绝对的优先权，例如：

margin-top:3.5em　!important;margin-top:2em
　　除IE以外所有浏览器中的顶部边界都是3.5em，而IE为2em，有时候这一点很有用，尤其在使用相对边界值时（就像这个例子），可以显示出IE与其他浏览器的细微差别。
（很多人可能还注意到了css的子选择器也是会被IE忽略的）
5.图片替换的技巧

　　使用标准的html而不是图片来显示文字通常更为明智，除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没有的字体时，你只能选择图片。
　　举例来说，你想在每一页的顶部使用“Buy widgets”的标题，但你同时又希望这是能被搜索引擎发现的，为了美观你使用了少见的字体那么你就得用图片来显示了：

<h1><img　src=”widget-image.gif”　alt=”Buy widgets”/></h1>
　　这样当然没错，但是有证据显示搜索引擎对真实文本的重视远超过alt文本（因为已经有太多网站使用alt文本充当关键字），因此，我们得用另一种方法：<h1><span>Buy　widgets</span></h1> ，那你的漂亮字体怎么办呢？下面的css可以帮上忙：

h1
{
background: url(widget-image.gif)　no-repeat;
}

h1　span
{
position:absolute;
left:-2000px;
}
　　现在你既用上了漂亮的图片又很好的隐藏了真实文本——借助css，文本被定位于屏幕左侧-2000像素处。

6.css盒模型hack的另一选择

　　css盒模型hack被用来解决IE6之前的浏览器显示问题，IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内（而不是加在宽度值上）。例如，你可能会使用以下css来指定某个容器的尺寸：

#box
{
width:100px;
border:5px;
padding:20px;
}
然后在html中应用：<div　id=”box”>…</div>

　　盒的总宽度在几乎所有浏览器中为150像素（100像素宽度+两条5像素的边框+两个20像素的填充），唯独在IE6之前版本的浏览器中仍然为100像素（边框值和填充值包含在宽度值中），盒模型的hack正是为了解决这一问题，但是也会带来麻烦。更简单的办法如下：
css:

#box
{
width:150px;
}

#box　div{
border:5px;
padding:20px;
}
html:

<div id=”box”><div>…</div></div>
　　这样一来在任何浏览器中盒的总宽度都将是150像素。
7.将块元素居中

　　假设你的网站使用了固定宽度的布局，所有的内容置于屏幕中央，可以使用以下的css：

#content
{
width:700px;
margin:0　auto;
}
　　你可以把html的body之内任何项目置于<div　id=”content”></div>中，该项目将自动获得相等的左右边界值从而保证了居中显示。不过，这在IE6之前版本的浏览器中仍然有问题，将不会居中，因此必须修改如下：

body
{
text-align:center;
}

#content
{
text-align:left;
width:700px;
margin:　0　auto;
}
　　对body的设定将导致主体内容居中，但是连所有的文字也居中了，这恐怕不是你想要的效果，为此#content的div还要指定一个值：text-align:left
8.使用css实现垂直居中

　　垂直居中对表格来说是小菜一碟，只需指定单元格为vertical-align:middle即可，但这在css布局中不管用。假设你将一个导航菜单的高度设为2em，然后在css中指定垂直对齐的规则，文字还是会被排到盒的顶部，根本没有什么区别。

　　要解决这一问题，只需将盒的行高设为与盒的高度相同即可，以这个例子来说，盒高2em,那么只需在css中再加入一条：line-height: 2em 就可实现垂直居中了！
9. 容器内的css定位

　　css的最大优点之一就是可以将对象定位在文档的任何位置，同样的也可以将对象在某容器内进行定位。只需要为该容器添加一条css规则：

#container
{
position:relative;
}
　　则容器内的任何元素的定位都是相对于该容器的。假定你使用以下html结构：

<div　id=”container”><div　id=”navigation”>…</div></div>
　　如果想将navigation定位在容器内离左边界30像素，离顶部5像素，可以使用以下css语句：

#navigation
{
position:absolute;
left:30px;
top:5px;
}
10.延伸至屏幕底部的背景色

　　css的缺点之一是缺乏垂直方向的控制，从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。页面为白色背景，但你希望导航所在的列为蓝色背景，使用以下css即可：

#navigation
{
background:blue;
width:150px;
}
　　问题在于导航项不会一直延伸到页面的底部，自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断，浪费了你的一番设计。怎么办呢？很不幸我们现在只能用欺骗的办法，即将body的背景指定为与左列同颜色同宽度的图片，css如下：

body
{
background:url(blue-image.gif)　0　0　repeat-y;
}
　　背景图应为宽150像素的蓝色图片。这一办法的缺点是没法使用em来指定左列的宽度，当用户改变文字的大小导致内容的宽度扩张时，背景色的宽度不会随之改变。

　　到写这篇文章为止这是对这类问题的唯一解决办法，因此你只能为左列使用像素值来获得能够自动延伸的不同的背景色。

]]> http://www.makben.cn/?feed=rss2&p=475 0 Synthesia V3下载 http://www.makben.cn/?p=468 http://www.makben.cn/?p=468#comments Wed, 25 Aug 2010 13:05:04 +0000 admin http://www.makben.cn/?p=468

Synthesia是一款能在屏幕上虚拟键盘按键的软件，可以给不懂五线谱的人知道怎么弹钢琴，支持文件midi输入,支持Midi键盘输入。据说触摸屏也支持，不过我没有试过，呵呵。

下面提供Synthesia V3下载地址        点击下载

]]> http://www.makben.cn/?feed=rss2&p=468 2 Xhtml网页设计规范 http://www.makben.cn/?p=463 http://www.makben.cn/?p=463#comments Tue, 24 Aug 2010 03:02:43 +0000 admin http://www.makben.cn/?p=463

一. 目录建立、文件夹命名规则：
01. 目录：
       除非有特殊情况外，目录应使用小写字母，并且以字母开头其中不得包含汉字、空格与特殊字符。
       目录命名请尽量英文为指导，不要以拼音作为目录名称。
       以下为一些常用目录的推荐英文名称：
       image 放网站不同栏目的页面都要用到的公共图片
       media 放 flash、avi、quicktime 等多媒体文件
       public 放公共文件
       style 放 css 样式文件
       js放js文件
       temp 放一些策划与设计中使用的原始资料与备份文件
       在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个 images 和 medias 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。temps目录中的文件与网上无关，请杜绝非内容的上传。
　　


02. 文件：
       除非有特殊情况外，目录应使用小写字母，并且以字母开头其中不得包含汉字、空格与特殊字符，否则在网页读取过程中可能会出现错误；请尽量英文为指导，不要以拼音作为目录名称。
       以下为一些常用文件命名的格式推荐：
       首页类文件 index(_xxxxxx).后缀名 [index_wealth.html]
       列表类文件 list(_xxxxxx).后缀名 [list.html]
       内容类文件 detail(_xxxxxx).后缀名 [detail.html]
       表单类文件 post(_xxxxxx).后缀名 [post.html]
       表单反馈类文件 result(_xxxxxx).后缀名 [result.html]
       图片类文件文件类型_xxxxx(图片序号)(背景).后缀名 (详见以下)
       广告图片动画类文件 xxxxxx_widthxheight.后缀名 (详见以下)
　　
03 图片文件：
       透明的1×1像素图片名称为：c.gif
       图片的分类及命名规则：
       广告类 banner banner_vnvbiz_500x400.swf | banner_vnvbiz_680x100.swf
       标志类 logo logo.gif | logo_newyear2007.gif
       按钮类 button button_01.gif | button_01bg.gif
       菜单类 menu menu_aboutus.gif | menu_job.gif
       装饰类 pic pic_01.gif | pic_02.gif
       栏目类 title title_top01.gif | title_top02bg.gif

04 命名规则
       两种方式：下划线连接法、驼峰法。选择其中一种方式即可
       如：index_menu.html
       indexMenu.html

二设计规范：
       统一按显示器分辨率暂为 1024×768px 来设计页面，所以使用最大宽度 1000px进行设计。
　　网站页面长度建议1屏半到2屏。原则上长度不超过3屏，宽度不超过1屏。根据用户习惯和网站需要，站点首页、分栏首页可设计超过3屏。
　　
02. 图片标准尺寸：
　　除了布局类文件没有限制外，其它的广告、产品等图片，基本满足以下三种规格：

01. 整体规范：

　　1×1 => 正方比例；
　　4×3 => 黄金比例；
　　另外还有一种的特定图片尺寸。
　　以下为一些常见图片的推荐尺寸：
　　全尺寸banner => 468×60px；
　　半尺寸banner => 234×60px；
　　产品缩略图片 => 100×75px；
       内容图片 => 50×50px 120×90px
　　图片文件大小一般保持在 5k 以内；大尺寸的banner文件大小保持在15k 以内。
　　
03. 文字规范：
       网页中总体上使用：
       字体 font-family:Arial, Helvetica, sans-serif
       字号 font-size:12px
       字色 color:#000
　　大字体设置上请多使用双尾数值，比如 12px 14px 16px 22px：
       一般标题宋体粗体12px
       模块标题宋体粗体14px
       内容标题宋体粗体16px
　　文字的行间距也请多使用双尾数值：
       12号字体常用行间中距 18px│20px│22px
       14号宋体常用行间中距 24px│26px│28px
       文字的颜色请使用216安全色，方便定义和规范颜色，即类似于 “#000000 | #CC6666 | #66CCFF”

04. 链接规范：
　　新闻、信息类通常用新开窗口方式打开。
　　顶部导航、底部导航通常采取在本页打开，特殊栏目和功能可新开窗口。
　　链接带下划线为链接通常的默认风格，顶部导航或特殊位置为了观赏性可用样式表取消下划线。
　　链接的颜色可配合主题颜色风格改变，通常为蓝色、暗蓝色、黑色，但激活后的链接颜色、鼠标移动其上时的链接颜色要同本身颜色进行区分。
　　
三 XHTML制作规范：

 01. 制作规范总论：
　　每个网页都应注明 DTD 版本信息，并且放在网页的最上面。
　　所有xhtml标签都必须使用小写，并且必须有属性值，且加双引号。
　　所有xhtml标签都必须闭合。
　　 “网页大小”定义为网页的所有文件大小的总和，包括html文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在70K以下为合适，40K以下更好。
　　为了更好的控制代码长度与代码的可读性，尽量使用手写代码来完成书写，并且使用tab来控制代码缩进（严禁使用空格键）。
　　所有的文件联接与链接都使用绝对路径的形式，如：/news/detail.aspx?id=1111
　　在制作页面时，请先全局性的了解一下页面的结构，然后按粗放到细致的顺序去完成页面。最后是同一栏目使用同时制作，从而减少ＣＳＳ的代码量。
　　
02. 网页文件通用模板：

　　<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
　　<html xmlns=”http://www.w3.org/1999/xhtml”>
　　<head>
　　<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
　　<meta http-equiv=”Content-Language” contect=”zh-CN” />
　　<title></title>
　　</head>
　　<body>
　　</body>
　　</html>
　　
03. 页首head区代码规范：
　　网站简介： <meta name=”description” content=”网站的简介” /> 必需
　　搜索关键字： <meta name=”keywords” content=”关键字1,关键字2…” />  必需
　　搜索机器人： <meta name=”robots” content=”all” />(all,none,index,noindex,follow,nofollow)
　　网页著作者： <meta name=”author” content=”" />
　　网页版权注释： <meta name=”copyright” content=”joinDeer,Inc 04/2010 ” />
　　网页定时跳转： <meta http-equiv=”refresh” content=”10; url=http://yourlink” />

　　网页间转换时加入效果：
　　<meta http-equiv=”page-enter” content=”revealtrans(duration=10, transition=50)” />
　　<meta http-equiv=”page-exit” content=”revealtrans(duration=20, transition=6)” />收藏夹图片：
　　<link type=”image/x-icon” rel=”icon” href=”/favicon.ico” />
　　<link type=”image/x-icon” rel=”shortcut icon” href=”/favicon.ico” />RSS文件代码：
　　<link type=”application/rss+xml” rel=”alternate” title=”" href=”rss/feed.rss” />
　　
04. CSS调用规范：

　　 <link type=”text/css” rel=”stylesheet” href=”style/style.css” />
　　所有的css的尽量采用外部调用：
　　代码较长的首页和重要栏目首页可直接内嵌css，避免调用时间太长，使页面未及时调用css风格而显得凌乱。
　　某些独立存在的单页也可以使用以上的方法。
　　在类似换模板的css调用时，请遵守前后顺序的规定。
　　
05. JS调用规范：
　　 <script type=” text/javascript” src=” commons/xxxxx.js”></script>
　　所有的javascript脚本尽量采取外部调用：
　　某些独立存在的单页也可以使用直接内嵌JS。
　　 JS的编写每个人都有自己的习惯用法，所以请在编写时加注释信息，方便其它同事可以阅读与修改。
　　
06. img标签规范：
       <img src=”" width=”" height=”" alt=”" />
       所有img标签除了程序控制宽高值外，都应该 width=”" height=”"，这样在图形文件未被读取时，保证浏览器预留图形占用的空间，防止网页最终显示时出现抖动现象。
       所有带链接的img标签都应该 border=”0″。
       一般img标签都应该设置 alt=”"，alt的内容尽量贴近图的内容。
　　
07. a标签规范：
       <a href=”" title=”"></a>
       所有a标签都应该有 title=”" 的值，title的内容尽量贴近链接的内容。
       除了默认的链接ＣＳＳ，其它的特别链接都应该有自己的class值，以方便其它链接调用。
       希望可以使用三段式的ＣＳＳ设置，未点前 | 点击中 | 已点后　这三种状态，以方便用户可以清楚的知道那些是已经点过的。
       一般链接到某一目录下的缺省文件的链接路径不必写全名，如：
       <a href=”/aboutus/index.html”> 可以写为 <a href=”/aboutus/”>
　　
08. form标签与表单相关标签规范：　
       <form method=”post | get” action=”"></form>
       <input type=”text | password | radio | checkbox | submit | button | reset | image | file | hidden”     name=”" value=”" size=”" />
       maxlength=”" // 允许输入的最大宽值
       checked=”checked” // radio checkbox类型中的选中
       disabled=”disabled” // 灰色不可选
       readonly=”readonly” // 只读
       <select name=”" disabled=”disabled”></select>
       size=”" // 拉长转为高度状态
       multiple=”multiple” // 可复选
       <option value=”" disabled=”disabled”></option>
       selected=”selected” // 默认值
       <textarea name=”" disabled=”disabled” readonly=”readonly”></textarea>
       rows=”" // 高度
       cols=”" // 宽度
       <label for=”"></label>
       <button type=”button | submit | reset” name=”" value=”" disabled=”disabled”></button>
　　其中灰色文字代表的是可以选择性输入的部分。
　　所有form标签都应该有 method=”" 的值，默认请使用post。
　　可以使用label标签来关联表单标签。
　　可以使用table标签来控制表单的内容形式。
　　请尽量把form标签放在table中间使用，如：<    table><form><tr><td></td></tr></form></table>
　　
09. table标签规范：　　
       <table border=”0″ cellpadding=”0″ cellspacing=”0″ width=”" height=”" rules=”groups”>
       <caption align=”" valign=”"> </caption>
       <thead>
       <tr>
       <th></th>
       <th></th>
       <th></th>
       </tr>
       </thead>
       <tbody>
       <tr>
       <td width=”" height=”" colspan=”" rowspan=”"></td>
       <td width=”">
       <table border=”0″ cellpadding=”0″ cellspacing=”0″>
       <tr><td></td></tr>
       </table>
       </td>
       </tr>
       </tbody>
       <tfoot>
       <tr><td></td></tr>
       </tfoot>
       </table>
　　
       使用div+css并不代表不可以再使用table，只是table不在用于结构与布局。
　  除了以下几个table标签属性外，其它的table标签属性最好放弃使用，因为其存在兼容性问题。
       以下为表格的嵌套格式：
　　1.) 对于单独的一个<table>来说，<table><tr>对齐，<td>缩进一个tab。
       2.) 对于存在<thead> <tbody> <tfoot>的<table>来说，<table> 与<thead><tbody><tfoot>对齐，<tr>缩进一个tab。
　　3.) 如果<td>中没有任何嵌套的表格，</td>结束标记应该与<td>处于同一行，不要换行。
　　4.) 如果<td>中出现嵌套表格，<td>下面的<table>缩进一个tab。
　　5.) 如果<tr>下内有一个<td>，并且<td>没有任何嵌套，可以让<tr><td>都处于同一行中。
       原则上，不赞同使用超过三次的table嵌套，如出现这样的样式，都尝试使用div等其它方式。
　　嵌套的表格大小尽量给定width和height数值，以便于浏览器加快解释的速度，以下为设置宽高的基本原则，一行或一列都只存在一个width或height的值

10. 列表相关标签规范：
　　
       <ul>
       <li></li>
       </ul>

       <ol>
       <li></li>
       </ol>

       <dl>
       <dt></dt>
       <dd></dd>
       </dl>
　　
　　1) 使用<li>、<dd>等格式控制时必须加注<ul></ul>和<dl></dl>，不准单独使用<li>、<dd>。
　　2) 在一般情况下，列表中的margin padding 都应该在css中设置为0，list-stype设置为none。
　　3) 文字 + 行高 + 列表头控制 + 列表头图片统一写入样式，列表头符号不加链接。
　　
11. 其它：
　　为swf设置一个 <param name=”wmode” value=”transparent” /> 就可以解决swf总是浮动在总最上面的问题了，但同时在制作swf动画时，按实际需要设置一个实色的底色框。
　　因为marquee的兼容性问题，所以请暂停使用本标签，可以使用javascript来完成滚动。
　　 font标签也已经被w3c抛弃，所以建议用CSS来替换使用。
四 CSS制作规范
01. 一般常用CSS样式的范本：　
　　* { background:#fff; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #000; }
　　ul, ol, menu, dl { list-style:none; }
　　p {text-indent:2em;}
　　a:link { color:#333; text-decoration:none; }
　　a:visited { color:#333; text-decoration:none; }
　　a:hover { color:#C60; text-decoration:underline; }
　　a:active { color:# C60; text-decoration:underline; }
　　
02. 常用CSS缩写形式：
       字体缩写：
　　font:normal normal normal 12px/18px 宋体;
       背景缩写：
　　background:red url(images/bg.gif) repeat-y top right;
       列表缩写：
　　list-style : list-style-image || list-style-position || list-style-type
　　list-style:url(images/icon.gif) 0 0;
       边框缩写：
　　border:1px solid black;
       Box模形缩写：
　　(上)(右)(下)(左) | (上)(左右)(下) | (上下)(左右) 这几种表现方式。
       color缩写：
　　如果使用216安全色，就可以使用 #FFF, #F06这样的表达形式。
　　
03. 常用布局形式：
       为了兼容IE6、Firefox，在布局的时候请使用以下格式：
       居中：margin:0 auto;
       居右：margin:0 0 0 auto;
       居左：margin:0 auto 0;
       左浮动：float:left; clear:left;
       右浮动：float:right; clear:right;
　　
04. CSS语意性设置：
       <h1>可以设置为与网页的 title 一样，不过可以通过 display:none; 隐藏，这样做可以方便搜索引擎的提取；
       <h2>可以设置文章的标题；
       <h3>可以用于分栏目的标题；
       <p>可以放置文章的内容；
       <label>可以与表单框对应使用；
       <ul>可以用来做一层的菜单；
       <dl>可以用来做二层的菜单；
　　
05. CSS常用命名规则：
       命名含义命名含义命名含义
　　header 头部 container 内容部分 footer 尾部
　　nav 导航 menu 菜单 crumb 当前位置
　　left 左侧部分 center 中间部分 right 右侧部分
　　login 登录 regsiter 注册 search 搜索
06. CSS设置的注意事项：
       Hack的问题：
       IE6采用 *html解决
       IE7采用 *+html解决
五搜索引擎优化：
       使用flash或者图片作为导航菜单的时候，会影响搜索引擎对其内容的搜索，所以可以使用图片替换文字的方式来做导航菜单.
       每个分栏都应该精心设计其的meta标签、meta关键字。

]]> http://www.makben.cn/?feed=rss2&p=463 0 LOGO设计心诀口诀 http://www.makben.cn/?p=454 http://www.makben.cn/?p=454#comments Wed, 18 Aug 2010 13:11:55 +0000 admin http://www.makben.cn/?p=454

标志是品牌视觉形象的核心，成功的品牌设计，能展现品牌文化、行业特征。随着品牌的多元化发展，品牌设计可以在一定程度上向市场传达品牌的内涵，使企业自身理念借品牌形象在公众心理产生共鸣，得到社会的认可。

  Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　绝世武功必然有心法 讲心法前 先和大家诠释2个名词

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　大家先看下面这些LOGO 这些是我随机找的体育类的LOGO

　　他们都有什么共同特征呢?

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　很显然 他们的共同特征就是：动感 速度感 充满活力 这就是行业特性 也就是共性

　　我们再看下面这些LOGO 又有什么共同特征呢?

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　每个行业的LOGO 都有各自的行业特征和表现手法 这就是共性

　　理解了共性就很容易理解个性了

　　个性是在具备共性的基础上 在同行中脱颖而出的特性 也就是这个LOGO 所代表的公司或团体的独特竞争力

　　共性是快速的传递这间公司的行业属性 个性是告诉人们这个公司和别的公司有什么不同

　　了解了以上2个名词

　　那么请看下面这些LOGO 您能猜到他们的行业和个性么?

　　

任何一个LOGO 必定是共性和异性的混合体

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　下面我们看看 LOGO 的3种状态

　　1：图标+字标 (阳)

　　2：字标(阴)

　　3： 图字混合(无极)

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　讲完基础概念 下面就开始心法了

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　一个LOGO 必须要有一个概念或创意

　　为什么呢? 没有概念和创意 你在创作的路上就会迷失方向 无从选择造型和色彩及组合方式

　　没有概念和创意 你就不知道你的LOGO 该说些什么及怎么说

　　如果没有概念和创意 你将陷入和客户争讨好看不好看的泥潭之中

　　我的观点是：一个LOGO 好看不好看不是最重要的

　　最重要的是：这个LOGO的创意是否准确的表现出客户所要达到的目的

　　不然这个LOGO 只是一只中看不中用的GO

　　一般创意和概念源自品牌的愿景或者策略

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　一个LOGO必须传递信息 必须说点什么

　　有了概念和创意后 我们创作的过程中 在进行造型和色彩等表现的过程中 每一个元素的存在都必须要有存在的理由

　　必须和我们的创意有关

　　一个GO 不会叫 来了小偷怎么办?不会叫的GO 要它何用?

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

和消费者沟通 要用他们听得懂的视觉语言来进行沟通

　　做LOGO 前必须先了解我们的目标客户群

　　同样的一个LOGO 做给 90后看和做给70后看是不一样的表现手法

　　简单点说就是: 想对长沙人的卖槟榔 你得和他们说长沙话

　　想获得北京人的信任 你得和他们说北京话

　　如果你对一个北京人 用长沙话推销你们公司的产品 他肯定对你翻白眼!

　　我们生活中有这样一个名词：塑料普通话

　　这个词很能说明问题：我们的视觉语言必须是保持在同一水平线上的

　　例如：西装革履 穿了双拖鞋

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　一个LOGO传递出的信息越少 消费者越容易留下深刻映像

　　设计师要做的就是精简信息 只表达必须要表达的概念和创意

　　如果你指望消费者去查阅你的LOGO设计说明 那不如自宫

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　在LOGO 的设计过程中 我们经常会用到标尺啊 辅助线啊 等等辅助工具

　　请注意： 这个是视觉游戏 不是几何数学游戏

　　无论你用了多么科学的方法来让LOGO 规整

　　最后 还是要以眼睛来判断是否合适

　　消费者不会用尺子来看你的LOGO 他们用的是眼睛

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　在选择色彩的过程中 我们依旧要以创意为核心 同时注意我们的目标消费者对色彩的感知差异

　　例如 黑色在广东的传统观念里 是不吉利的 是家有丧事的意味

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　在寻找创意之前

　　我先给大家介绍下我自己开发出来的一个思维模型

　　在思维进行纵向推进的时候 必须同时进行横向思维的平衡

　　这是整个秘籍的核心 也是心法的重点部分

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　下面我着重讲解下纵向思维模型

　　从没有创意 到 得到解决方案(一般来说得到4个解决方案是很容易的)

　　我们会经历 发散思维 到发现创意的过程

　　我们很有可能发现很多好创意 也有可能发现GO 不喜欢的红萝卜

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

在进行发散思维的时候 我用到了一个自己开发的工具表格：联想工具

　　看到这个表格大家肯定会问 触觉? 嗅觉? 味觉? 听觉?

　　这些有啥用? 哈哈哈 别急 都非常有用

　　举个例子：大家可以看看 原研哉 的设计 他在一个医院的VI 中就引入了触觉 作为导示系统的创意

　　人是通过五觉来接受信息 然后混合记忆来触发感受和理解信息的

　　所以我在这个工具中加入了视觉之外的四觉

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　这个工具是我近期才完善的 下面这个实例用的是没有加入五觉的简化版

　　我先通过这个实例讲解下 这个联想工具和思维模型的用法

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　这是一个房产的LOGO 在做LOGO 之前策略已经给出了一个概念: 藏宝地 非凡墅

　　基于这个概念我们开始做LOGO

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　这是我之前做LOGO 的时候的手稿 为此还找了《国家宝藏》这部电影来寻找创意

　　TIPS:电影真是好东西 可以弥补你没有的生活经历和丰富你的创意 我的观点是 不喜欢看电影的设计师 不是一个好设计师

　　闲话不多说了

　　发散完后 我们来看看我们找到了什么

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

我从来都不写LOGO 的设计说明

　　我主张看图说话 因为这是视觉的游戏 无需文字的参与

　　写上大段文字说明的LOGO 解析 都是天生的智障或者残疾

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　通过古老的金币这个创意 我又发散出了一系列的子LOGO 主要应用于导示系统

　　我一般都会保留最初的联想工具手稿

　　为什么呢?这张表格就像我的宝藏 可以为同一项目不断的挖掘出新的创意

　　例如：房产中的区位地图我是否可以做成藏宝图的式样呢?

　　楼书我是否可以做成戴红蓝眼镜才能看到某些图形呢?(受国家宝藏的启发)

　　售楼部我是否可以装修成一座地下宝藏的挖掘现场呢?

　　……………………………….还有很多很多

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　我之前说过 通过发散思维的 联想工具我们一般可以找到最少3种解决方案

　　下面是另外一个

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　通过上面这个实例 我相信大家应该都知道这个思维模型和联想工具怎么用了

　　不会的话 多用你就知道怎么用了

　　如果你对这个工具有改进的地方 千万要记得告诉我和大家哦

　　创意还有别的源泉么?

　　有!

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

  Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　准备好了吗?我们开始实战!

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　 Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　在和客户进行沟通后 大家一致通过“翻花绳”的创意

　　于是我开始完善 这个创意

　　我尝试了很多表现形式和手法

　　为了加入游戏科技的属性 我将字体设计中的 思 字做了个像素飞入

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

  Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　刚才通过一个实例解析了 整个思维模型从上到下的应用过程

　　我们也可以把别人做的LOGO 放到思维模型中进行 反推

　　在反推的过程中我们可以吸收其他设计师的创意

　　用于借鉴 而非抄袭

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　网速越来越快 世界的变化越来越快 品牌的跟新速度越来越快

　　如何让品牌的视觉资产变的更持久 耐用呢?如何让越来越喜新厌旧的人们不断获得品牌的新鲜感呢?

　　以万变应万变 这是一个不错的解决方案

　　下面我为大家介绍下 LOGO 的新趋势

　　去年至今 已经有很多品牌发布了 新的视觉形象

　　关于百事的新LOGO 我也看到了大家很多的品论

　　我的观点是：这是这个品牌在百年历程中一次很正常的换装

　　设计公司也紧贴品牌核心做出了符合时代趋势和商业运作的解决方案

　　从设计的角度来看 非常棒!!!!

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　百事的新装 LOGO 有多种变化

　　经典口味：标准LOGO (蓝色)

　　低糖口味：小嘴LOGO (银色) 传达—减少糖的摄取更健康的特性

　　混合口味：大嘴LOGO (黑色) 传达—畅快好喝的口感特性

　　这3种还只是在包装上的LOGO 应用

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　从这张图可以看出 LOGO 的多种变化

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　更恐怖的是这个LOGO 从各个角度看都有不同的表情变化 也就是说这个LOGO有着强大的生命力 可以说这是个活的LOGO

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

这是百事最新的广告 从这里可以看出 百事的色彩系统已经不再陈旧了 变的非常年轻 时尚

　　这一切都是和品牌核心分不开的

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　这些设计的元素造型 色彩 都是源自哪里呢? 源自 新一代的视觉语言

　　涂鸦 滑板 插画 平台玩具 电子音乐等等都是现在 年轻一代热衷的表现形式

　　所以说百事依然没变 不过换了件马甲唯一

　　换马甲的目的不过是为了能赢得年轻一代的青睐

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　下面我们来看一下 我们最近做的一个地产项目的LOGO

　　这个LOGO 是一个商业项目 核心是 全感官体验之城

　　设计师：仇振兴 李小强

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

既然是 全感官体验之城 那我们就用了 视觉 味觉 嗅觉 听觉 触觉 来表现

　　结果是 5个子LOGO 汇聚成一个主LOGO 子LOGO 主要用于导示系统

　　6个LOGO 并联起整个项目的形象

　　这种方法我称之为 组合式LOGO

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　一个LOGO 有强大的生命力 还有很多方法

　　下面这个解决方案就是一种： LOGO 是个填空题 会怎么样

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　让菱形成为主角

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

　　

Photoshop创意设计LOGO:LOGO设计创意分析_webjx.com

结束语：做好一个LOGO 很简单也很难平衡好左右手的 共性和异性 重心向下滚动底下的足球不断向前 你就有收获!

以上所讲 是我个人的一些心得和经验

我的观点很简单：好看不好看不是评价一个LOGO 的标准

我的标准是 这个LOGO 是否真的适合客户 是否能为客户带来价值 让忽悠见鬼去吧!

服务项目：腾创假日酒店 酒店形象设计

　　设计背景：珠海腾创假日酒店位于珠海商业区与工业区的交界处，环境优雅，交通便利，与澳门咫尺之隔， 是腾创集团(香港)国际酒店管理有限公司下属酒店之一，是珠海目前最具特色的酒店。

　　品牌设计说明：高档的皇冠与代表公司名称简写的字母完美融于长方体内，柔美的线条与色块的完美结合，给人以雍容华贵的高档休假酒店的形象，同时也体现了酒店上乘的服务质量，使每位顾客享受到自己在酒店度过的黄金时光。
服务项目： 北京牙科通医疗科技发展有限公司 品牌设计

　　设计背景： 北京牙科通医疗科技发展有限公司成立于1998年，11年来牙科通成功向口腔医学院、医院口腔科及口腔连锁机构提供全方位、专业的齿科服务。服务覆盖诊室前期布局设计；中期设备提供及技术支持；后期专业、快捷、完善的售后服务。现主要代理品牌主要有：美国Kodak 影像产品、奥地利W&H系列产品、西诺德口腔综合治疗台。

　　品牌设计说明： 标志以”牙科通”英文字母与中文字体作变形，字体蕴含丰富的表现力，抽象箭头向上扬起，同时也是”1″的变形，寓意企业在口腔器械领域飞速的发展，以卓越产品品质、优秀的售后服务，为最终成为行业领军者而不断向前。

服务项目：北京燕竹医院 品牌设计

　　设计背景：北京燕竹医院是一所集临床、科研、教学于一体的综合性医院。拥有先进的医学检验设备。中西医各科室都有著名的教授专家坐诊，特别是肝胆疾病、泌尿系统疾病治疗中心，医资力量雄厚，已经形成相当大的规模。

　　品牌设计说明：品牌采用世界卫生组织红十字会的标志与飞翔的鸟的图案组成医院的品牌形象，鸟的形象象征着健康与希望，同时鸟的翅膀变形为绿叶造型，以此来表明医院作为医疗机构给人们带来舒心与体贴的服务。
服务项目： 俄罗斯品牌 КОМЛИС(凯曼雷斯) 品牌设计

　　设计背景： 新疆卡里木斯玩具旗下品牌，成立于1994年，原产地俄罗斯。已于我国新疆省乌鲁木齐市设立加工厂.其产品划分为珍藏车系列、尊贵车系列、赛车系列、改装车系列、拼装车系列、拖车系列、摩托车系列和遥控车系列。其对外贸易主要以”汽车模型”产品为主,出口世界各地,目前主要客户集中于俄罗斯地区.2008 年委托尚唐为其产品进行品牌命名服务及品牌设计工作.

　　品牌设计说明：品牌形象以英文字母变形而成,似抽象奔驰的汽车，集速度感、趣味感于一体，个性鲜明。 渐变的黄橙色与深蓝色相结合，似火焰般飞速前进。寓意品牌以出众的个性抢占市场，向美好未来稳步前进。
服务项目：北京寰宇声望智能科技有限公司 品牌设计

　　设计背景：北京寰宇声望智能科技有限公司于1999年11月8日在京宣告成立。是中科院声学所一批声学专家、博士投资参股的集开发、研制和销售声学、机电产品于一体的高新技术企业。凭借先进的技术、优质的产品和周到的服务，声波技术已经广泛应用到电力、石化、造纸等各个行业。为了提升其品牌知名度.08年尚唐受其委托,设计完成了全新的品牌形象。

　　品牌设计说明：标志以”海豚”聪明、伶俐的形象做为其品牌代言.代表科技的圆点环状围绕于”海豚”周围,象征着声波向外的扩散,力在突出智能,科技的行业属性,同时也表明作为行业的领先技术,具有不可替代的先天优势及企业争做行业第一的领袖气质与魄力
.
服务项目：北京鸣鑫阳光广告有限公司 品牌设计

　　设计背景：北京鸣鑫阳光广告有限公司，是一家综合实力强大的专业从事电视传媒的广告公司，直属于京都集团独立核算的子公司，在服务集团十六家企业的传媒宣传的同时，也拓展为其它企业承办广告业务。业务拓展的需要，06年邀请尚唐为邀请尚唐为其设计了新的品牌形象。

　　品牌设计说明：标志以抽象的飞翔的翅膀与太阳融于一体，太阳的形象与品牌名称相吻合，翅膀与太阳的形象结合也展现出了美好的涵义，寓意公司的发展日日向上，团队实力不断增强，整体业绩不断创出新高。
服务项目：柯普纺织 品牌设计

　　设计背景：绍兴县柯普纺织品有限公司是一家集纺织、印花、贸易为一体的纺织品企业。公司拥有联合色织布厂、健达布行、昌盛印花分厂、柯普贸易公司等几家优秀企业。公司引进现代化生产设备，技术力量雄厚，集设计、翻样、开发新产品和订做于一体；主要纺织品对外贸易，产品远销欧美、日韩、东南亚等地区。

　　品牌设计说明：品牌形象以抽象的四条纽带连接于一体，以抽象的线条传达了纺织的行业的属性，四条纽带围绕于一体，代表着企业由四家下属公司联合起来，似一整体；寓意公司实力雄厚，公司内部紧密团结于一体，以突破创新的理念，王者的风范屹立于纺织市场。

服务项目：智博网络技术有限公司 品牌设计

　　项目背景： 智博网络技术有限公司是由一批具有国内著名网络公司服务背景的网络精英所组成，年轻、富有活力，注定一开始就是一家成熟的网络科技公司，是一家专业从事网站建设、网站推广和网络营销的互联网基础运营商。

　　品牌设计说明: 标志三条穿插组合的线条组成地球的形状，三条箭头指向各自不同的方向，汇聚于一起，寓意公司是由一批服务不同领域的网络精英组成一体，以国际化发展为自己的战略目标，以网站运营为自己的专业特长，朝着网络无限美好的未来而一同奋斗。

服务项目：酷备 品牌设计

　　设计背景：酷备产品是一项为数据备份服务的软件，具有在线数据备份及镜像的功能，主要为客户提供省时省力的在线数据恢复功能。使文件得到保护。为客户解决数据流失带来的不便。

　　品牌设计说明：标志采用点状物代表着数据的碎片，逐渐融合成两个方形，交差重叠于一体，体现出数据不断的传输，不断的融合。最终形成一个整体。

　　由此展示出产品数据镜像、备份的特点。也突出了科技行业的属性。
服务项目：明星成人用品 品牌设计

　　设计背景：项目背景： 明星成人用品始于2002年，至今已有6年历史，是前中国性学会官方网站。明星成人用品致力于倡导大众坦然面对性健康，并向大众提供高品质性健康用品。 08年尚唐为其重新塑性了品牌形象。

　　品牌设计说明：标志以交叉环绕优美的弧形组成心的形状,同时中间也是人的形状,寓意商城给人以人性化的关怀, 提供高品质性健康用品，使人们在心灵与精神快乐的基础上,重新坦然面对与认识性健康。

]]> http://www.makben.cn/?feed=rss2&p=454 1 第一天　XHTML CSS基础知识 http://www.makben.cn/?p=445 http://www.makben.cn/?p=445#comments Fri, 16 Jul 2010 03:13:54 +0000 admin http://www.makben.cn/?p=445

欢迎大家学习《十天学会web标准》，也就是我们常说的DIV+CSS。不过这里的DIV+CSS是一种错误的叫法，建议大家还是称之为web标准。

学习本系列教程需有一定html和css基础，也就是指您之前做过网页，会用表格布局。如果您刚开始学习网页制作，不知道什么是表格布局及html和css，建议您先去充电，否则学习本教程会非常吃力或者根本就听不懂。

由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面，这也达到了本教程的目的。

本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解概念。因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能理解。所以把概念留给大家以后再深入研究。

由于章节关系，没有把css和css hack单独分出，只是在用到的时候穿插入讲解了。html基础和css基础只在第一节中介绍了几点重要的。

下面我们开始第一天的学习

一、xhtml css基础知识
首先说一下我们这节课的知识点

文档类型
语言编码
html标签
css样式
css优先级
css盒模型组成
1）文档类型
当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。

2）语言编码
接下来我们还会发现这样一句话：

<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />

它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。

3）html标签
html标签在页面中都必须结束。成对的标签以“/标签名”结束，有些单一的标签在本身的结尾打上/来结束，这是xhtml代码编写的规范。

成对的标签：

<head>{…}</head>
<body>{…}</body>
<div>{…}</div>
<span>{…}</span>
<p>{…}</p>
……

单一的标签：

<img src=”" />
<br />

还需说明一点的是按xhtml规范，标签必须用小写。

4）css样式
加载css样式有以下四种

外部样式
内部样式
行内样式
导入样式

<link href=”layout.css” rel=”stylesheet” type=”text/css” />

这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。

<style>
h2 { color:#f00;}
</style>

这种形式是内部样式表，它是以结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。

<p style=”font-size:18px;”>内部样式</p>

内部样式

这种在标签内以style标记的为内部样式，内部样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。

@import url(“/css/global.css”);

链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url(“/css/global.css”)的形式链接全局样式，这样就使代码达到很好的重用性。

5）css优先级
id优先级高于class
后面的样式覆盖前面的
指定的高于继承
行内样式高于内部或外部样式
总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的
6）css盒模型组成
css盒模型是本节教程的重点。前面几个知识点，如果您会用表格布局的话，就非常好理解和掌握了。这里的盒模型是和table布局的一个不同点。学习web标准，首先要弄懂的就是这个盒模型，这就是DIV排版的核心所在。传统的表格排版是通过大小不一的表格和表格嵌套来定位排版网页内容，改用CSS排版后，就是通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页。这种排版方式的网页代码简洁，表现和内容相分离，维护方便，能兼容更多的浏览器，比如PDA设备也能正常浏览。

那么它为什么叫盒子呢？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。

我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。

所以整个盒模型在页面中所见的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，这是许多朋友容易搞混的地方

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。

如果现在您对CSS盒模型理解还不够透彻，继续往下看，后来的章节会都会应用到盒模型实例。

二、如何开始学习web标准？
1）有HTML和CSS基础
学习本系列教程前，要求您有一定的html和css基础，制作过网页，会用表格进行网页布局，这样学习起来才会很轻松。如果您对这些还不懂，建议先学习这些知识，然后再来学习本教程。

2）转变观念
在以前我们制作网站时，总是习惯于先考虑外观、颜色、字体及布局等所有表现在页面上的内容。但外观并不是最重要的，相反最终用户在访问网页时的体验才是优先要考虑的。一个由div＋css布局且结构良好的页面可以通过css定义成任何外观，在任何网络设备上（包括手机、PDA和计算机）上以任何外观表现出来，而且用div＋css布局构建的网页以够简化代码，加快显示速度。

所以要想学好div＋css，首先要转变观念，需要抛弃传统的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现页面的外观。给网站浏览者更好的体验。

3）多动手、多动脑
说到这点，有点小儿科了，就像我们上小学时老师常常教我们的那样。为什么我在这里也做为一点列出来呢，我是通过评论发现，有些同学提的问题太没水平了，稍微动下脑筋就明白了，或者自己动手一试就知道了，但他就懒得试。举个简单的例子，拿浏览器兼容来说吧，你写个样式之后，在IE和火狐分别打开看一下不就明白了，但就是不去做。还有一个同学留言要我把一个实例中的图片打包发给他，我一看代码，就用到一张图片，无语了，有你留言的这个时间，自己也早把图片下载下来了。所以在这里告诫大家，一定要多动手、多动脑，不要怕麻烦。另外在学习完一节教程后，一定要自己做一遍实例，这样能更快掌握。

]]> http://www.makben.cn/?feed=rss2&p=445 5 视觉设计前瞻实用性研究第七期 http://www.makben.cn/?p=437 http://www.makben.cn/?p=437#comments Thu, 15 Jul 2010 03:11:00 +0000 admin http://www.makben.cn/?p=437

　　又到了写作文的时候，依然开始于脑袋一片空白无从下手。似乎我的脑袋从来都是走简约风格，那就得小题大做的无中生有。无中生有就需要想象了，想象就要把记忆和五感一一拆散，拾起几块拼起，粘牢。让人愉快的是，一些美妙的想法也就在这个时候在每个人的脑袋里长了出来。










相关链接：
http://www.whitevoid.com/portfolio/
http://www.simpleviewer.net/tiltviewer/app/
http://www.thirteen23.com/experiences/desktop/blu/
http://bumptop.com/
http://all.vic.sina.com.cn/200906nokian97/n97.swf
http://www.meizu.com/cn/m8.html
http://www.eben.cn/
http://tw.asus.com/product.aspx?P_ID=qdwslBLhhfuw43HS
http://www.eicodesign.com/portfolio/1403.shtml







相关链接：
http://zoocha.com/
http://www.toffeenutdesign.com/
http://www.pro-foods.com/
http://www.axiom.ee/
http://www.hybridworks.jp/
http://www.naturellementpulpeuse.com/
http://www.toyinteractive.com/
http://www.floridaflourish.com/
http://www.howarths.nl/
http://www.giraffe.net/
http://www.mikeprecious.com/











相关链接：
http://www.mcdonalds.com.cn
http://www.t-mobile.com/
http://www.ccbk.co.kr/index.jsp
http://pepsi.com/
http://www.ford.com/
http://www.ups.com/
http://www.nbc.com/
http://www.pamaliqueur.com/age-verification.php
http://www.creativespark.co.uk/
http://www.whitehouse.gov/

]]> http://www.makben.cn/?feed=rss2&p=437 1 首尔一周游 -63_building- http://www.makben.cn/?p=418 http://www.makben.cn/?p=418#comments Sat, 03 Jul 2010 12:24:42 +0000 Rv http://www.makben.cn/?p=418 放假后~随同好友一起到首尔玩.目的地-63building.本来打算去台湾,但因为某某缺席…

就没那个打算了..于是都决定去下63 （嘿嘿 因为有小道消息说宋承宪会去那开见面会..所以就锁定那了.)

但是结果很让人失望……..人影都没看到…只能在那随便玩玩了 .

 

copy下63简介：

大韩生命63大厦，地上60层、地下3层，海拔264米，乘高速电梯登上展望台，可远眺第24届奥运会场馆和汉江大桥。63大厦是一个综合性的观光景点，除展望台外，底层还有娱乐设施,大厦外体是玻璃，因此阳光照耀下又被称为“金色塔Gold Tower”

63大厦里除韩国最高的展望台外，还有 IMAX 电影馆、餐厅、商家、水族馆等娱乐设施。63大厦的最著名观光名所是63展望台。天气好的情况下，乘玻璃制成的电梯上到展望台，一直可以看到仁川的大海。特别是傍晚十分，汉江和汉江大桥以及汽车的灯光互相呼应，构成一幅美丽的夜景。63水族馆展有400余种2万多条海洋生物，是国内最大规模的室内水族馆，聚集着海洋和江河里各种各样的鱼类，当然还有生活在热带和密林地带的全部海洋生物。 　　IMAX 电影馆高度相当于6层建筑，巨型喇叭和立体声像效果不同凡响，设有为外国人准备的4钟语言的同声翻译视听设施。另外还有餐厅、酒吧、健身房、桑拿、保龄球中心、商务中心、各种特色餐厅等方便设施。 　　63大厦地上60层，地下3层的63大厦拥有可以一眼观望汉城全景的超高层的展望抬63塔，大型的水族馆，超大型画面的IMAX影院，餐厅，购物中心等。

下面就是汝夷岛的63大厦了-

   

我们先去的水族馆.- -才发现那是小孩子最爱的地方…花那15000的门票真不值得…

大厅照照…

企鹅…- -很呆的说

呵呵 咱家瑶瑶 彻底的爱上了这些小鱼 这些小鱼能吃掉手指上的脏东西

]]> http://www.makben.cn/?feed=rss2&p=418 0 Subway Map Design(关于地铁图的设计） http://www.makben.cn/?p=395 http://www.makben.cn/?p=395#comments Mon, 14 Jun 2010 11:37:58 +0000 Rv http://www.makben.cn/?p=395

上个星期刚刚完结印刷媒体的一个课题。

Subway Map Design(关于地铁图的设计）老师说这次课题有利于我们鉴别各城市设计的设计风格和规划。

地铁图的设计必须是围绕科学和实用的规划， 来更好的向人们传达信息和便捷性。

从地铁图中我们能够更明了的了解这个城市对设计的重视和发展程度。

为调查首尔的subway map，为此- -我花了2个周末的休息时间在地铁站摸索..

首尔的地铁路线给人传达的信息很难找到，没有特别突出的标志。特别是地铁图册的底色还和地铁路线的颜色相近.

那交错的线条太过于密集.看得我眼晕. 字也太小.汗.在我找到目标站点后,我的眼睛开始发困了…以下是首尔地铁图.

关于Subway map的调查。先是SWOT（地铁路线本身的优缺点问题以及计划),再是五感分析（视觉-听觉-嗅觉-触-味觉）至于详细的调查内容稍后有时间再写..（因为目前只有韩文版本的调查报告…很长的说…）

Subway Map:

北京

]]> http://www.makben.cn/?feed=rss2&p=395 2 页面表达常用方式 http://www.makben.cn/?p=392 http://www.makben.cn/?p=392#comments Fri, 07 May 2010 15:41:02 +0000 admin http://www.makben.cn/?p=392

《页面表达常用方式》是整个“web交互设计方法”中的一部分：

设计师在设计页面时，应该在页面上建立许多视觉层次，引导用户的视觉焦点。把用户的注意力吸引到最重要的元素上，然后才把视线引导到其他重要程度次要的信息上。这样便于用户快捷迅速地找到自己所需，更好的完成阅读、浏览任务。这里介绍几种页面表达的常用方式。

一、页面的浏览顺序

对用户扫描页面的时候进行视线跟踪，这叫做“视觉流”。好的设计能够让人们按照顺畅的次序沿着它向前流动。人们一般的习惯是从左到右、从上到下。

从左至右，从上到下：长期以来，用户已经习惯了从左至右、从上到下的阅读习惯，所以页面设计的时候我们需要让浏览者从一个方向上看文字，用户的视线从左至右、从上到下的，这样做会更快更有效。不要让文字排列成这样：

这样的排列也可以，仍是从左至右、从上到下：

按钮要放在右边：

左上角优先：下图中，亮度越高、越集中的地方，说明被关注的越多：

从上到下，从左到右是默认的视觉流方向。强烈的焦点会首先吸引眼球，然后才是次要信息的。

所以，在浏览顺序上靠前、靠上的位置，即先被看到的位置，是容易被关注和记忆的地方，即“左上角优先”。因为日常中人们往往没有充足的时间浏览网页，或在很快地获取需要的资讯后即停止浏览或转连到其它网页，所以左上角常常成为视觉焦点。

对齐

在内容排版的设计中，把内容右对齐，会形成一种良好的双重边界，该边界沿着这一组对象的中间向下延伸（利用了格式塔原则——连续性原则），这样带来的好处是加强了边界引导读者的眼光平滑向下延伸，有助于形成良好的视觉流。如下图：

在表单设计中，也是如此。能够使操作区域对齐，将大大提升用户的完成任务的效率。但是对齐是以左对齐还是右对齐也要引起注意。据研究表明，标签和输入框之间的空白区域加重了用户的认知负担（cognitive loading），用户必须花相当多的时间以便在标签和输入框之间移动视线：

操作过程中，用户更关注输入框本身，而不是标签。用户眼睛关注点的转移速度是非常快的，并且即使不从头阅读标签也能明白它的意思。但人们习惯于从左至右的书写，所以这种右对齐的布局给用户造成了细微的阅读障碍：

而以下这种摆放形式的好处就是，用户可以一眼就看到标签和它对应的输入框，而且不用担心用户阅读标签带来的额外负担：

二、大字更突出

文字的主要功能是在视觉传达中向大众传达作者的意图和各种信息，要达到这一目的必须考虑文字的整体诉求，给人以清晰的视觉印象。因此，设计中的文字应避免繁杂零乱，使人易认，易懂，切忌为了设计而设计，忘记了文字设计的根本目的是为了更好、更有效的传达作者的意图，表达设计的主题和构想意念。

在页面文字的处理上，层次关系很重要。我们的眼睛常常被吸引到厚重而又对比强烈的图形上面，同时大的、加粗的字体表现了它的重要性和主题思想。字体对比中，字体越大越粗，就表示该部分内容越重要。对标题来说，一般都使用一种突出的字体和其他内容区别开来——加粗、加宽、加大字号、强烈的颜色等（白纸黑字，黑色字体与白色页面对比是最强烈，反之亦然）。其次是普通字体，这些字体是对主题进行进一步的说明。而指示和注释部分的小字重要性更次之，告诉了我们：你也许想阅读这些内容，但是没有看到也没关系。同时要注意，所有图片中的文本都应该清晰易读。

三、图形更吸引人

界面需要一定的图形辅助，这将使产品更具吸引力。图形能够传达各种产品的个性，例如：安全可靠、令人激动、好玩、充满活力、舒适愉快、冷静、有力、紧张等，这是情感诉求。Donald Norman（（唐•诺曼）认为，产品设计中一个非常重要的因素，那就是“愉悦”(Enjoyment)成分，让人喜欢这个东西——让人觉得高兴、有趣。他说：“积极的情感增强了创造性和广度优先的思考，而负面的情感集中在认知上，增强深度优先处理并把干扰降到最少。”“积极的情感能让人们更能容忍一些困难，在寻找解决方案的时候变得更灵活而有创造性。”一定层度上，不影响人们在界面上完成任务效率的前提下，适度的装饰、漂亮的细节会影响人们使用产品的心情，引导人们再次逗留和探索多点时间，甚至推荐给别人。

图形需要减少认知负担。其实文字最早来源于图形，取材于自然形态，所以相比之下，简化的、顺畅的、示意性准确的图形能够减少认知负担，让用户不需要一个个文字阅读，所以比文字更便于用户识别、理解和记忆。但图形设计一定要遵循简洁规则：你想要你的用户注意到你站点上所提供的产品、服务和信息，而不是你站点的精美设计。过多的装饰将干扰用户操作。

四、动画会被误以为是广告

页面中动态的FLASH非常吸引人们的注意力了。Adobe公司的这项动画技术让互联网变得更为强大，从Nike公司非常夸张的首页动画到众多广告商使用的网页Banner。但是这项动画技术现在已被滥用，使得用户默认看到动画就误以为是个广告，一个只对页面内容感兴趣的人、或者常常浏览网页的人，可能会简单快速地跳过动画部分。所以在页面设计中，应该尽量少地使用FIash动画，过多的动画不仅没有实用性而且还会拖慢用户的网页浏览器。尤其是一个充满广告的页面，那样会使你的目标客户无法阅读弃你而去。

五、内容逻辑：并列关系、从属关系

人们往往喜欢有条理的视觉信息，逻辑清晰、层次分明、严谨的内容才能有助于便捷快速地阅读。这里主要介绍“并列关系”和“从属关系”。

并列关系：并列关系就是把同等重要的信息依次罗列，彼此没有层级关系。逻辑上相关的部分在视觉表达上也相关。例如，把相近的内容分成一组，放在同一个标题至下，采用类似的方式显示信息，并把它们全部放在一个定义明确的区域以内。

在表现的形式上，常常用到的方法有：内容缩进、位置或留白、线框或分组（线条、方框、颜色条）。

内容缩进：

位置或留白：

线框或分组：（线条、方框、颜色条等等）：

从属关系：从属关系表示A信息全部包含在B信息之内，或者表示A信息依附于B信息。就好比如标题和正文的关系，所以A信息是B信息的一个子集。如下图中，“空间热点”就包含“日志精选”，她们之间就是从属关系。而“日志精选”里又包含6条文章名称，它们之间也是一种从属关系，这就是我们所说的正文和标题的关系。

在这里，B信息里面也可以是好几条并列关系的内容组构成。如：

六、多项并列的信息

多项并列的信息，由于视觉的连续性，混在一起容易产生混淆。我们可以用一些小技巧将其区分。比如，在并列的信息内容前面加上小图标，或者区分排序：

七、不同的排序方式VS筛选

这里需要先说明两个名词的含义。“排序方式”——指的是将文件中的各个信息按数值（如参与人数、点击数等）、或者某种特性（如热度）的递升或递降次序重新排列成为一个新的记录序列。而“筛选”是指一个以多个信息中按预定目标就某种特定性质进行精选的操作过程。它们都有“进一步”的关系，但是排序不会有数量的变化；而“筛选”因为是进一步针对特定条件精确挑选所剩，有可能导致数量的减少。如：

排序：

筛选：

]]> http://www.makben.cn/?feed=rss2&p=392 15