事隔多年，故地重游，把酒言欢，
留下的只是这些光和影的焦点！

一切如流水掠过，湿过身就好！

08年的秋天，丰富的多彩！ 

作者: Jarel Remick

是ThemeForest的一名作者，在Moscow, Idaho.

网页骨架

这些是web页面的主要元素。有很多不同的方法去组织它们，但是这种布局也许是最常用的。

Container

所有的web页面都用一个container，主要是为了同一个目的：去包含一些页面元素，然而这个方法实现各有不同。例如，body标签或者是最常用的div。甚至于过去常用的table（不要使用table作为你的container，这是一个破方法）。想想container作为你房子的外墙，里面包含卧室，厨房，起居室等等。

container的类型:

1. Liquid: 根据浏览器宽度填充。
2. Fixed: 指定的宽度，并不会根据浏览器宽度改变。

Header

header并不真的是一个特定的元素，尽管某些人会认为它是。它更多是用在涉及到你放置你的logo，导航栏，tagline的web页面顶层的地方。许多人更愿意把这些元素包含在一个div里以方便使页面样式和内容分离。header会被视为一个container，所以它有两种类型选择，就是上文提到的 liquid 或 fixed 。

Logo

你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我们的阅读习惯是，从左往右，从上至下，所以你的log应该放在访问者第一眼能看到的地方。

Navigation

页面导航是最重要的元素之一;你的访问者需要用它来使用你的站点。 它应该是容易被找到且易用的，这就是为什么大多数的人把它放在header部分，最少也是在页面顶端附近的原因。

 navigation类型:

1. Horizontal: 水平显示，被称为‘navigation’。
2. Vertical: 垂直显示，被称为‘menu’

Main Content

每个人都（应该）知道，内容才是王道！当人们来参观你的站点，这是他们想看的主要元素。它应该是web页面的焦点，所以参观者才能快速找到他们想要的。

Sidebar

sidebar是放置你次要内容的元素，像一些广告，站点搜索，订阅链接(RSS, Twitter, Email, 等), 联系方法等。这个元素不是必需的，尽管右很多站点用它。它大多数是放在右边的，但是你也能把它放在左边或者两边，只要不扰乱主要内容的浏览就行。网站使用横向或纵向导航，sidebar往往是用纵向导航。

Footer

web页面的尾部总会有一个页脚，让您的访客知道他已经到达了你web页面的结束部分。和heaser一样，footer也不是一个特殊的元素 。在你的页脚里包含版权，法律声明以及主要的联系方式。包含一些重要的链接是个好主意，比如home page, contact page, 等. 有些网站用这个区域提供一些相关材料或者其他重要信息。

"Whitespace"

你可能有强烈的愿望去填充这些页面上的空白，但是请不要这么做。“空白”也是相当重要的。你可以看看NetTuts网站是如何有效的使用空白区域的，创建了页面平衡给人一个好的感觉。

以上是web页面的骨架，现在我们来看如何黄金分割这些元素。

黄金分割和使用网格（Grids）

还记得之前我说数学是美丽的吗？我们认为视觉的吸引力是基于比例的（比如，黄金分割）。几千年来，艺术家，设计师，建筑师等都有意无意的在使用了一个共同的比例来增加他们作品的美感。这个神奇的数字是什么呢？ 1.62 (实际是 1.618...) 我不会说这个数字的起源，但是我会告诉你如何使用它。

使用黄金分割是非常简单的。比如你像找到你主要内容和sidebar列表的宽度。你将使用你内容区域总的宽度除以 1.62. 然后得到555.55px. 我们不需要那么精确，所以我们就用555px。现在你就知道你的主要内容元素是555px的宽度，你的sidebar是345px。看看多么容易？！

但是等等先，乐趣不止于此！你也可以应用黄金分割到其他元素的宽度和高度。

Using Grids

如果你和大多数的人一样，不想每次都抱着个计算器来计算这个黄金比率。那么最简单的方法就是用grid。所以你需要做的就是把你的宽度或是高度分成三分。

要产生更详细的gird，只需要继续三等分就行。如果你读了前一篇文章“与Blueprint CSS框架的亲密接触”的话，你会看到Blueprint CSS框架用了一个详细的gird系统。 不仅仅是gird设计更容易更快，而且它也创建了一个美观的布局。如果你还没有使用gird设计，那么这是一个很好的尝试机会。你可以为fireworks，photoshops或者其他软件从 http://960.gs下载grid模板。

正如你看到的，NetTuts很好的遵循了黄金比率。顶端三分之一的网页再次分成了三分，非常接近黄金比率。难怪NetTuts的设计是如此吸引人！

如果你要做一个新的设计，我严重推荐你找一些流行的站点，评价他们的布局，以及如何应用黄金比率和gird。然后花一些时间去实践使用黄金分割，并在你的布局上面使用gird。

重设AI变形边框控制网格和分割建立渐变网格

文章出处：AI 俱乐部 作者：大坏　


网格工具是illustrator的一个强有力的表现工具。但是熟练控制并不容易，本节主要介绍通过重设变形边框控制网格的方法。
　　一、影响网格线的因素  
　　网格线的成型受以下两点因素影响：  
　　1.变形边框的的方向  
　　2.物件的节点  
　　我们在使用网格时，从来都是为了回避这两个因素的影响力，而尽量采取物件简化为基本形、分割物件为简单单元的方法使用这个mesh工具的。其实可以去尝试寻找控制这两个因素的方法，而不要回避。  
　　二、重设变形边框  
　　

  
　　上左图为铅笔工具绘制的物件;右图为建立的网格，网格线是基于变形边框形成的，所以稍显扭曲。  
　　

  
　　把施加网格前的物件旋转为水平角度。  
　　

  
　　从菜单选取：[物件]>[变形]>[重设边框]，在从菜单选取：[物件]>[建立渐层网格...]，这样，网格线形状是沿物件形状的，也就比较有条理了。  
　　

  
　　下面要还原物件位置了。双击旋转工具，在角度数值框内，正值前加负号，负值则将负号删除。  
　　

  
　　现在对比一下使用和不使用旋转重设边框的结果。　　这个技术常常用在我们为稍复杂点建立Illustrator网格的时候，避免网格线变得无法收拾。下次我们接着介绍如何利用重设边框来分割建立网格。  
　　我们为稍复杂点建立Illustrator网格的时候，网格线常常会变得无法收拾。上面我们介绍了如何通过重设变形边框控制网格的方法，本文我们介绍如何利用重设边框来分割建立网格。  
　　复杂形状物件分割法  
　　

  
　　首先，选择物件变化急剧的地方，划一根分割用的线。这一步看似简单，不过这根线的位置作用很重要。没有把握的情况下，建议试建一次网格观察，之后恢复即可。然后选择线和物件进行分割，解组。  
　　

  
　　现在整体选择，旋转。使左侧物件保持水平状态。 单选左侧物件重设边框。  
　　



  
　　建网格，完成左侧。 下一步，恢复旋转角度，再使右侧物件旋转为水平状态。  
　　



  
　　同上，重设边框，建网格。 恢复旋转角度，完成。  
　　



  
　　这样分割的物件在上色时，并没有增加多的工作量，两物件结合处可以当作一个物件，用单选工具范围选取二者节点上色。  
　　应用实例1  


  
　　试着将面包圈形状做成网格，顺利的话，可以做出与正圆均等的网格线。  
　　应用实例2  
　　

  
　　当然，分割线不一定非得是直线的。　　  

事实上，没有人天生是十全十美的，也没有人会成为十全十美，但人生路上就是需要你不断地提高自己，并且在有限的时间里尽可能地创造更多的价值。工作往往消耗了我们生活中的大部分时间，但如果我们拥有更高的工作效率与良好的生活习惯，那么在理论上，我们的一生是完全可以做到尽善尽美的。

下面列出的这些方法，是为了激励并且帮助你成为更富有成效的设计师，成为活得更有价值的人。为了让更多人达到这个目标，大家也可以发表自己的想法和经验与大家分享。

……

1 .充分利用你的路途时间(通勤时间commute)
如果你每天都要有2个小时的路途时间，或者你将要经历一次长时间的旅途，
那么，不要浪费这个宝贵的时间。读一本书、使用笔记本电脑工作或提前计划你一天要做的事情。

2 .保持使用任务单
使用任务单，将确保你能够清楚地知道自己还有什么该做却没有做。
随时地整理您的任务列表，能够确保你按时地完成任务，尤其是对于交叉性较强的任务，
这个习惯显得尤为重要。你需要接受这个事实：你的任务清单可能永远不会结束。

3.熟练使用Adobe系列软件的键盘快捷键
想要高效执行你的创意,键盘快捷键的熟练使用是必不可少的，
从长远来看,记住并使用它们,可以最终节省你很多时间。

4.实时维护并更新你的设计软件，避免病毒和木马的侵入
设计师几乎每天都要使用电脑，所以要确保它们保持高性能并且稳定地运行，每周都要对你的电脑进行维护和修缮。

5.多去一些能够给你带来设计灵感的地方逛逛 Seek out sources of design inspiration
对于一个设计师来讲,寻找灵感是一个极为重要过程，实际生活中有很多的地方可以找到灵感，
如杂志、网站上的设计展示、博物馆、一些成功案例或者一些收藏有前卫艺术的画廊等等。

6.更积极地参与社区的设计
加入设计论坛、评论博客、写文章、演讲和参加研讨会,这些只是众多途径中的几个，
你应该更多地参与社区化的设计讨论和研究。

7.参加设计活动，展示和学术讨论会
每年有许多关于设计的会议，活动和培训研讨会。如果你工作的公司会为你付路费，那就再好不过了。
参加这些活动可以让你的视野更加宽阔、让你拥有更前沿的技术和经验！

8.阅读设计历史与理论的书籍
设计类图书的数量是惊人的，选择一些你感兴趣的主题，如设计理论。在你的闲暇时间读这些书，获得里面的知识。
有这样一本书：“如何成为一个有灵魂的平面设计师” 。

9.关注其他图形设计师的作品
我们往往能够通过访谈、聊天从而了解到许多成功的设计师的秘诀。
让人惊讶的是，你甚至可以从一个暂短的面试中学到一些东西。

10.加入图形设计组织
如果你想获得丰富的设计资源，那么加入图形设计领域的组织和团体是一种非常好的方式。这些组织有很多会员福利，可以给你提供许多你需要的素材。The Graphic Artists Guild 和 AIGA 就是这样的组织之一，你应该考虑加入。

1div实现滚动条 (某些情况下可以替代iframe)

<style>
.gb { overflow:auto; white-space:normal; height:100px; padding:3px;}
</style>
<div class="gb"></div>

其中高度height和overflow是必须设置的！

ps:在IE下有的时候水平滚动条会出来，但是事实上，水平滚动条不没有实际的用途，貌似这个是IE的ｂｕｇ，解决方法：overflow-x: hidden

　加上这个．把水平滚动条隐藏掉～

2.用css来实现三角形

 HTML代码

<style>
.t{
  width:50px;
  border-style:solid;
  border-color:#a6a2f7 #fff;
  border-width:0 50px 50px 50px;
}
</style>
<span class="t"></span>

3.鼠标移上去是出现一个window的保存收藏打印的那个小框框，能不能限制它的出现？

在HEAD中加入

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

4. 图片上用新属性galleryimg

<img width=500 height=500 src=a.gif galleryimg="no">

5. 用vml来画圆角...

 HTML代码

<html xmlns:v>
<head>
<style>
v\:* {behavior: url(#default#VML);}
#lone {
 width:200;
 height:70px;
}
</style>
</head>
<body>
<v:RoundRect id="lone" strokecolor="#000" strokeweight="4px" arcsize="0.8" fillcolor="#ff0000">
<!--arcsize 弧度值 fillcolor 圆的填充色 strokecolor 圆的边框色 strokeweight 边框大小-->
</body>
</html>

6 . IE下,当使用了FLOAT之后.用margin-left和margin-right 会变成用双倍的数值,例子:

margin-left:10px; 实际的效果是20PX;

解决的方法:(1),用display:inline;(2)用clear:float

方法1适应的范围比较广一些,(2)的话.只适合那些可以清除浮动的元素.不能清除的,不能用~

7.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序一定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

8.IE5和IE6的BOX解释不一致IE5下

div{width:300px;margin:0 10px 0 10px;}

div的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改:

div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}

这个/**/是IE5和firefox都支持但IE6不支持.

9.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义

ul{margin:0;padding:0;}

10.关于脚本，在xhtml1.1中不支持language属性，只需要把代码改为

<script type="text/javascript">

11.JS 的页面跳转脚本

 HTML代码

<script language="javascript">
location.assign ("<a href="HTTP://webjx.com" target="_blank">HTTP://webjx.com</a>")
</script>
 
12. IE下用JS去掉所有链接和图片的焦点(因点击而产生的虚线框)

function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.onfocusin=bluring;
</script>

13. 屏蔽右键类的代码

<body oncontextmenu="return false">

14。div＋css布局用了float之后背景不能延伸的解决方案

<div style="clear: both; font-size: 0;"></div>

原因：背景的自适应高度并不继承float的高度，背景会继承float底线所在容器中的位置高度，所以背景一定会找到最后一个标签去测定，这样我们在如上的标签，这个标签中什么也不放。也就是一个没有高度的空容器，这样它就可以把背影拉下来了。

15.用JS来处理图片变形的问题，等比例缩放图片，还能防止图片在加载过程中因为图片太大而引起的变形

<script language="JavaScript" type="text/javascript">
<!--
function DrawImage(ImgD,FitWidth,FitHeight){
var image=new Image();
image.src=ImgD.src;
if(image.width>0 && image.height>0){
if(image.width/image.height>= FitWidth/FitHeight){
if(image.width>FitWidth){
ImgD.width=FitWidth;
ImgD.height=(image.height*FitWidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
} else{
if(image.height>FitHeight){
ImgD.height=FitHeight;
ImgD.width=(image.width*FitHeight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
}
}
}
//-->
</script>

应用：

<img src="XXXX" alt="自动缩放后的效果" width="200" height="200" onload="javascript:DrawImage(this,"200","200");" />

这里给图片设置了固定的大小。用了JS函数之后，不影响效果：）

16.用 CSS 实现 Firefox 和 IE 都支持的 Alpha 透明效果

filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Moz + FF */
opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/

IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数。

17.未知大小的图片在一个已知大小容器中的水平和垂直居中

这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape，为IE和非IE分别写了二套简单的样式。

IE使用inline-blocks，非IE使用table-cell and vertical-align。

CSS

/* for non-IE browsers */
div.holder {width:750px; height:300px; background:#f8f8f8;
border:1px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
}

18 .在IE里面元素浮动之后.原来的边距(margin)会加倍,但是FF等就不会.解决方法
在浮动的元素的代码中加入：display: inline;，可使浮动被忽略，IE中不至于产生双倍距离.

19. 首页下沉的效果:

.post-body:first-letter {font-size:2.5em; float:left; padding:0 2px 0 0; line-height:1em; font-family:"楷体_GB2312"; font-weight:bold; color:#b00;}

20.半透明的效果

 HTML代码

<div style="width:100px;height:100px;background-color:#f00;filter:alpha(opacity=50); /* IE */ ; -moz-opacity:0.5; /* Moz + FF */ ; opacity: 0.5; /* 支持CSS3的浏览器（FF 1.5也支持）*/">我在任何浏览器里都是半透明的
</div>