谈谈网站制作的事

最近公司的站优化的不是很顺利。排名快掉完了。 可能是对这方面的关注少了而转手研究网站分析和运营方面的问题了。排名掉了也是很应该的事了。两年的时间做seo。如果还去做排名,真的是没意思透了。好在公司意识到长尾和流量带来的效益要比自然优化排名的效益要好很多。 这才放手一部分到长尾优化和流量追求。 但是却把流量分析和流量质量辨别这些东西没放到一个高度。公司是个大船,那领导就是的掌舵手。 小船倒好,问题出来了随时就漏出来了。大船里除了舵手,其他零件只能发挥零件作用。 当然如果舵手能及时查看零件。零件能及时发光。那倒也无妨。

周末有了一点空时间。没事突然有点东西想写写。

研究了一些网站结构和网站框架,好的网站都是很精致,很合理的。 外观清洁大方,代码简洁,条理清晰,主题集中,信息的原创度和连续性较好。如果把网站制作比着裁缝(也许该叫服装设计师)做衣服,做工精细,布料选材上等,量体裁衣,而且根据情景修饰。做出来衣服方能列为上等。  劣质网站像衣服。优质也像衣服。但是可能价值却相差很远。

CSS Float的一些bug -转载

什么是CSS Float?

定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级元素,而不论它本身是何种元素。元素对象设置了float属性之后,它将不再独自占据一行。浮动块可以向左或向右移动,直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。
fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的) 使元素不浮动,Inherit 将会从父级元素获取float值。
下面让我们来详细了解下css float

1.Float的用处

除了简单的在图片周围包围文字,浮动可用于创建全部网页布局。

1

浮动对小型的布局同样有用。例如页面中的这个小区域。如果我们在我们的小头像图片上使用浮动,当调整图片大小的时候,盒子里面的文字也将自动调整位置:

2

同样的布局可以通过在外容器使用相对定位,然后在头像上使用绝对定位来实现。这种方式中,文本不会受头像图片大小的影响,不会随头像图片的大小而有相应变化。

3

程序代码
需要用到的CSS样式
body{ margin:0px; padding:0px; text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px;}
div,p,ul,li,h2,h3,h4,h5{ padding:0px; margin:0px;line-height:22px;}
h1{ font-size:14px;}
body >div{ text-align:left; margin:10px auto;}
#box{ width:900px; text-align:left;}
.box1{ width:370px;border:1px solid #f00;}
.box3{border:1px solid #f00;}
.box2{ width:370px;border:1px solid #f00;}
.box2:after{display:block;clear:both;content:"";visibility:hidden;height:0;}
.box1_1{ width:100px; height:70px;border:1px solid #6CF;}
.clear{ clear:both; height:0px; width:0px; font-size:0px; line-height:100%; }
.fl{ float:left;}
.fr{ float:right;}
.hidden{overflow:hidden;}
span{ color:#f00; font-weight:bold;}
.mar{ margin-left:20px;}
.inmar{ display:inline; margin-left:20px;}
.box1_2{ width:200px; float:left; height:100px; background-color:green;}
.box1_3{ width:150px; height:100px; margin-left:200px; background-color:red;}
.box1_4{ width:200px; float:left; height:100px; background-color:green;margin-right:-3px;}
.box1_5{ width:150px; float:left; height:100px; background-color:red;}
.box2_1{  margin-bottom:10px;float:left;width:80px; height:70px;border:1px solid #f00;}
.box2_2{ float:left;width:80px; height:70px;border:1px solid #f00;}
.padbot{ padding-bottom:10px;}

2.float浮动元素不占据正常文档流空间

由于浮动块不在文档的普通流中,所以文档的普通流中的块表现得就像浮动块不存在一样。
·以下是3块div均未加float时在浏览器内显示如下图
4
代码:

<div>

<div><span>块1</span></div>

<div><span>块2</span></div>

<div><span>块3</span></div>

</div>
·块1向右浮动,脱离文档流并且向右移动,直到它的右边缘碰到包含块的右边缘。如下图

5

代码:
<div>

<div><span>块1</span> float:right </div>

<div><span>块2</span></div>

<div><span>块3</span></div>

</div>
·块1向左浮动,脱离文档流并且向左移动,直到它的左边缘碰到包含块的左边缘;IE8和Firefox中因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了块 2,使块2从视图中消失。而块2的内容却显示在块1未浮动时块2所处的位置。而IE6和IE7中紧跟在浮动元素块1的块2也会跟着浮动。如下图

6IE8和Firefox

7IE6和IE7

代码:
<div>

<div><span>块1</span> float:left </div>

<div style="background:#FCC;">background:#FCC<span>块2</span></div>

<div><span>块3</span></div>

</div>

3.浮动“塌陷”

·使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景,这个问题会很难被注意到,但是这是一个很重要的问题。在这里我们可以称为“塌陷”。如下图

8

代码:
<div>

<div><span>块1</span> float:left</div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

</div>
解决“塌陷”问题有以下三个方法
1.在使用float元素的父元素结束前加一个高为0宽为0且有clear:both样式的div 如下图
9

代码:
<div>

<div><span>块1</span> float:left </div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

<div></div>

</div>
2.在使用float元素的父元素添加overflow:hidden;如下图
10

代码:
<div>

<div><span>块1</span> float:left </div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

</div>
3 .使用after伪对象清除浮动 如下图

11

代码:
<div>

<div><span>块1</span> float:left </div>

<div><span>块2</span> float:left</div>

<div><span>块3</span> float:left</div>

</div>

4. IE6双边距问题

·IE6双边距问题:一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左边界(margin-left) 在ie6内便产生双倍边距。如下图

12

IE7、IE8和Firefox

13IE6

代码:
<div>
<div><span>块1</span> float:left marin_left:10px; </div>

<div><span>块2</span> float:left marin_left:10px; </div>

<div><span>块3</span> float:left</div>

</div>
这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。

解决IE6双边距问题: display:inline; 使浮动忽略 如下图

14

代码:
<div>

<div><span>块1</span>float:left; marin_left:10px; display:inline; </div>

<div><span>块2</span> float:left marin_left:10px; </div>

<div><span>块3</span> float:left</div>

</div>

5.IE6文本产生3象素的bug

·浮动IE6文本产生3象素的bug时指挨着浮动元素的文本会神奇的被踢出去3像素,好像浮动元素的周围有一个奇怪的力场一样。如下图

15firefox、IE7、IE8

16IE6

代码:
<div>

<div>float:left;width:200px; height:100px; background-color:green;</div>

<div> margin-left:200px; width:150px; height:100px; background-color:red;</div>

</div>
解决浮动IE文本产生3象素问题以下有两个方法
1.左边对象浮动,右边采用外补丁的左边距来定位  如下图
17firefox、IE7、IE8、IE6

代码:
<div>

<div>margin-right:-3px; float:left;width:200px; height:100px; background-color:green;</div>

<div>width:150px; height:100px; background-color:red;</div>

</div>
2.左边对象浮动,右边对象也浮动 如下图

18firefox、IE7、IE8、IE6

代码:
<div>

<div> float:left; width:200px;height:100px; background-color:green;</div>

<div> float:left;width:150px; height:100px; background-color:red;</div>

</div>

6.IE6,IE7 中,底边距 bug

·IE6,IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉。如下图

19firefox

20IE6、IE7

代码:
<div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

<div> margin-bottom:10px; float:left;</div>

</div>
解决IE6,IE7 中,底边距 bug:用父元素的底内补白(padding)代替。如下图

21firefox、IE7、IE8、IE6

代码:
<div>

<div>float:left;</div>

<div>float:left;</div>

<div> float:left;</div>

<div>float:left;</div>

</div>

这个方法的缺点是不能换行,如果想要换行的话,建议将浮动父元素的浮动子元素设置padding值。

原文地址:http://startwmlife.com/?p=1193

秀设计和卓越的网页设计

 秀设计和卓越设计之间的区别是比较小的。一般人可能无法解释说明卓越的设计的具体差别,但他们可以找到自己喜欢的网页设计作品。通过对照一下几个优秀作品,我总结了一下作为卓越设计的几个细节差别。
前不久,我写过一篇卓越网站应该遵循的4个设计原则。现在这篇文章有点像是上一篇文章的延续。在上一篇文章里面我们重点讨论了对比、重复、对齐、分割在网页中的应用。以下内容我以几个优秀的网页作品作为实例,来说明卓越设计一直遵循的原则!

一、合理使用渐变
渐变不要滥用,更不要把渐变弄的跟彩虹似的,否则你的网页作品看起来比较外行。总而言之,合理的使用渐变对于优秀网站设计是有帮助的。

 

渐变、散景结合使用
Newism网站色彩丰富,但微妙的渐变与背景在视觉上结合的很到位。如果你也有兴趣在photoshop里面做这个散景效果,可以去Abduzeedo’s tutorial网站上面学习一下。

   渐变、投影、纹理结合使用。
OnWired网站应用了这些设计技巧,显而易见,他的设计作品效果是很棒的!自始自终OnWired网站设计在应用渐变、投影、质感这方面是恰到好处的。我也特别喜欢设计师设计的这些。

二、留白
留白一词往往容易被误解从字面解释的空白。网页设计较为准确的描述则是网页各个板块元素之间的空间范围。进一步分析看看A List Apart是如何定义它的。
“留白”对于网页设计是很重要的,留白不至于让你页面元素都堆积在一起。对于年轻设计师来说留白可能是一个大问题,他们在做设计的时候将整个页面放的满满的,没有给页面足够的“呼吸空间”。这对于他们来说可能不是什么问题,如果内容放不下的话,他们可以借助浏览器的滚条来扩大页面的空间。

优秀的留白与巧妙的分割线
Snook网站布局方面设计的是比较合理、舒服的。同时注意一下,网站里面的虚线将各个板块区分开了,这样我们在浏览网站的时候就一目了然了。

 

抽象图形
沙发采用抽象、美观、简约的方法。通过使用无背景或杂乱的图像,给浏览者的空间是流畅、舒服的。

 
 

 
三、网格布局
网页设计的网格布局最初的灵感是借鉴了报纸的排版。但是如果你仔细观察周围的事物都可以找到网格现象,从好的设计到生活中的交通网。
960和蓝图可能是两个最流行的网格布局。我个人比较喜欢960网格布局,它简单、重点突出。你可以用任意对齐方式来安排你网站的元素,对齐在设计一个复杂的页面时,能使你的网站看起来比较精致、井然有序,并且你在网页布局里面添加任何模块内容时候都不用考虑其他的模块内容。

 
综合使用网格布局
Poccuo网站综合使用了网格布局,它采用3列和5列相结合的布局方式。给人以视觉吸引力和视觉空间。

博客采用列布局
我比较喜欢Web Design Ledger首页最上面的展现方式,他把最新的公告内容放大同时放到页面最顶部,其他的以3列的方式排列。

页布局显而易见采用的是4列、2行布局,同时幻灯片、缩略图、最新的审查也是采用相同的方式。

 

四、改善字体应用
字体应用困扰着大多数的设计师。如果要想提高你的设计水平,字体在其中扮演着重要的角色。不但在可读性方面也扮演着重要的角色,同时还可以增加设计作品的氛围。


用对比字体引起关注
SimpleBits网站在应用各种对比字体引导浏览者的注意力方面做的很棒。字体对比可以采取不同字体对比、各种颜色对比、字体大小对比等形式。

不要认为字体就像标志
这个网站看齐来就非常的漂亮、舒服,但你可以说出你的想法和感受来描述这个感觉。尤其在间距、字体选择等字体应用这方面做的挺完美的,我就被他的logo字体应用迷住了。

五、明确而有效的导航
良好的导航对于网页设计来说很重要,如果浏览者不能快速、便捷的找到它,他们就很有可能去别的网站了。这是我们所不愿意看到的,同时我知道MyInkBlog进行了一些改进,并将在以后重新设计中进行彻底的改进。


博客导航下面显示分类导航
在大多数情况下,博客导航放在页面的同时将分类作为第二导航放在页面的边栏。Tutorial9做了一件了不起的事情,他把浏览者关心的photoshop资源以生动的方式展现出来了,并且在鼠标经过二级导航的时候有一个高亮效果。

切换不同的图标效果
图标切换效果在web2.0网页设计里面无论是否需要被大量、胡乱的应用,并且成为一种趋势。并不是所有的都是不好的,web2.0里用的不好的原因是过度使用、业余使用造成的。在大多数情况下,适当的应用图标切换按钮是相当有效的。Carsonified网站在导航上就运用了单色、简洁的图标切换效果,并且于他的网站整体感觉想吻合。

六、使用漂亮实用的页脚
一开始我们就将页脚作为次要的内容,在页脚里面放置一些没有多大用处的内容。在设计的时候仅仅花费一点点心思在它上面。现在页脚对于整体设计来说变的越来越重要了,千万别错过好的页脚完成你设计。


展示大量的信息和证书
这个页脚主要展示了网站介绍和版权等必要的信息。Brian Hoff网站更是添加了一些个性、有趣的内容在里面。通过3列布局方式展示了作者的工作和建议性的内容。

添加搜索功能
Elliot Jay Stock’s网站在底部添加了一个特大的搜索框…

&
 

来源:草根网(www.20ju.com) – 互联网界的读者文摘
 

网页设计中的一些不错的“潜规则”

       1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。 
  2、无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。 
  3、慎用 * 通配符。所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。 
  4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。 
  5、样式放头上,脚本放脚下。不内嵌,只外链。 
  6、坚决不用 CSS 表达式。 
  7、使用 引用样式表,而不是通过 @import 导入。 
  8、一般来说,PNG 比 GIF 要小,小得多。再者,GIF 中有多少颜色是被浪费的,很值得优化。 
  9、千万不要在 HTML 中缩放图片,一者不好看,二者占资源。 
  10、正文字体最好用偶数,12px、14px、16px,效果非常好。特例,15px。 
  11、block、ul、ol 等上下留出至少一倍行距,左侧至少两倍行距,右侧随意。 
  12、段落之间,至少要有一倍行距。 
  13、强行指定某些元素的 line-height,正文 1.6 倍于文字大小,标题 1.3 倍。 
  14、中文标点用全角。英文夹杂在中文中,左右空格,半角。 
  15、中文字体的粗体和斜体,远离较好,利民利己。

本文转载于:52css.com