CSS&Html - 飞鱼的声纳

CSS&Html

使用代码将Photoshop中的设计草图转换为一个真正的网站是网站设计中非常重要的一步。下面文章的内容将涉及Xhtml、CSS以及PHP代码，开始学习吧！

28
六月
2010

设计更人性化的返回顶部链接

by wantfee | Filed under: CSS&Html | 4 条评论 |

返回顶部（Back to Top）的跳转链接是网页设计中不可或缺的一个小细节。它的目的是帮助访问者快速回到页面顶部，免除了不断拖动滚动条或者不停转动鼠标滚轮的麻烦，提高了浏览网页的效率。那么请允许我们先来思考一个弱弱的问题：为什么要返回到顶部，而不是页面的底部？囧！很简单嘛，文章都是从上往下读的啊！难道你要从下往上倒着读文章吗？这当然是一个非常重要的原因。但是还有没有其它原因呢？我想还有另外一个很重要的原因是因为页面的主要功能区是在顶部的，导航栏、搜索框等等都在页面顶部。通过导航按钮链接到别的位置，或者通过搜索关键字查找你需要的信息都是在浏览完了一张页面之后首要干的事情。 但是通常我们在返回顶部链接上做的工作太少，只是简单的在页面底部放置上一个跳转链接就完事了。这样做的结果是当页面比较长的时候点击跳转链接时，浏览器会瞬间将你送回到页面顶部，速度有时候快的让人反应不过来，不知道跳转之后所处的位置在哪。 另外一个问题是返回顶部链接做的不够醒目。通常来说，返回顶部链接都会位于页面的右下角，或者是页面的页脚上。这个地方本身就不是视觉的焦点处，如果再将跳转链接设计的不够醒目的话，访问者很可能在浏览了多次页面之后还没发现这个可以给他们提供方便的设计。 再有一个问题是位置不够合理。假设有一篇博客日志拥有很多的评论，一般来说，访问者阅读评论的时候比较少，所以当他们阅读完日志内容之后如果不去做评论的话会直接寻找另外的信息，这个时候返回顶部的链接就应该放置于日志结束之后而不是评论内容之后。当然还有更好的办法就是将跳转链接随时停留在视觉区域内。 那么这样看来，一个好的返回顶部链接的设计应该有下面几个特点： 一、平滑的从页面底部滚动至顶部。 二、醒目到足以吸引访问者去点击。 三、更具功能性的位置设计 那么如果创建一个跳转链接呢？通常的做法是紧挨着body标签下方创建一个空标签，然后再在页面底部创建一个链接，如下代码所示： <body> <a name=”top”></a> <!– content goes here –> <a href=”#top”>返回顶部</a> </body> 但是这种方法使用了冗余的空标签，为了避免空标签的出现，可以直接使用body标签下的容器的ID来实现跳转。 <body> <div id=”wrapper”> <!– content goes here –> <a href=”#wrapper”>返回顶部</a> </div> </body> 之后，为了让跳转更加平滑，拷贝此页面中的内容，将其保存为 smoothscroll.js文件，放到你的设计文档中合适的位置。一般来说，在你的设计文档中应该有一个javascript文件夹，将所有javascript文件都放入到这个文件夹中。接下来，在你的设计代码的<head>和</head>中间加入链接<script src=”javascript/smoothscroll.js”></script>，表示页面将会引用这个JavaScript文件。 另外，你完全可以使用图片来代替链接，让它看上去更为美观。下面的设计例子也许会给你一些启发：

27
五月
2010

IE的坏脾气——3像素Bug

by wantfee | Filed under: CSS&Html | 2 条评论 |

在一个典型的浮动中，如下面的图片所示：灰色矩形是外部容器，绿色容器在外部容器内向左浮动，未浮动的部分包围着浮动部分。但是IE6在解析这样的浮动时，会莫名的给靠紧浮动部分的未浮动部分添加3个像素的边距。为了更加直观，让我们将Firefox和IE6中的效果做一对比（上图是Firefox中的效果，下图是IE6中的效果）：

24
五月
2010

当非浮动区域设置宽度后

by wantfee | Filed under: CSS&Html | 3 条评论 |

前一段时间我在做Green Gaint这个主题的时候，发现了一个在布局中出现的关于浮动的问题。让我来说明一下，如下图所示：

16
五月
2010

CSS2.1和CSS3帮助文档（PDF格式）

by wantfee | Filed under: CSS&Html | 6 条评论 |

今天我们荣幸的发布两个帮助文档。这两个文档可以帮助你快速查看正确的CSS2.1属性或者还不太为人所知的CSS3属性。其中的样式表包含最重要的属性、解释以及每一个属性的关键字。这两个帮助文档由GoSquared制作，通过Smashing Magazine发布给读者。

9
五月
2010

wordpress主题——GreenGaint

by wantfee | Filed under: CSS&Html | 38 条评论 |

从构思到全部完成，我用了一个多月的时间，到今天，终于完成了新主题的设计。也就是当前你所看到的飞鱼的声纳的主题。给这个主题简单起了一个名字，叫Green Gaint，原因是整个界面的主色调是在暗色背景里的绿色，就好像那种并不是很喜欢有太强烈阳光的植物–绿巨人。另外，使用”Gaint”这个词还有另外一个意思，就是希望飞鱼的声纳能够做的越来越好，慢慢的成长为在我心目中的一个巨人。 Green Gaint这款主题的创意和布局参考了Tutorial9的设计，主要体现在页面上部宽大的分类导航按钮以及其它的一些细节。这个主题比较有特点的地方是主内容区上方基于jQuery的滑动展示区域以及侧边栏的可自动切换内容的按钮。 在整个的设计过程当中，最让人头疼的就是保证兼容性的跨浏览器的调整了，说是跨浏览器，实际上主要就是针对IE6的调整。着实让我费了不少的脑筋，中间实在搞不定的时候，都考虑是不是要阻止IE6的访问了。最终还是没能做出这个决定，因为我估计目前还在使用IE6的人不在少数。在此强烈建议各位还在使用IE6的同志，赶紧升级你们的浏览器吧，不费多大功夫。 下面将这次设计过程当中要注意的几个问题写出来，以备下次参考： 一、设计不仅包括布局等大的方面，一些小的部分的设计也要考虑到，比如文章当中的代码样式、段与段之间的留白，<more>标签的设计等等，都要事先在Photoshop中考虑好，设计出来，免得在写CSS时不知道该设计成什么样式，耽误时间。 二、在同时使用width属性和padding-left以及padding-right属性时或者同时使用height属性和padding-top以及padding-bottom时，要留意IE6的盒模型bug，使用!important来解决。当float属性和margin属性同时出现时，要留意IE6的双边距bug。 三、调用wordpress的php代码太不熟悉，很多代码都是临时查的，比如只在第一页显示滑动区域，创建一个个性化的存档页面等等。要多学习这方面的内容。 最后希望你能喜欢这个主题，有什么问题请在评论区留言。