任鸟飞网页设计博客-关注网页设计、网站开发、图形图像设计、互联网趣味信息及搜素引擎的IT原创博客 » 设计

写给网站开发者的5条小提示

任鸟飞 — Mon, 12 Jul 2010 04:56:29 +0000

我们都很努力，有时候为一个项目通宵达旦，日夜兼程。我们满心期待，期待我们的网站或博客门庭若市，可很多时候，往往事与愿违，我们辛苦的付出换回来的却是门可罗雀。

从一次次的跌倒中，我们学会了如何更快的站起来。下面就是我每次跌倒后的总结体会，希望你在网站开发过程中有所借鉴。

1. 站在用户的角度考虑问题

作为一名技术人员，往往考虑的专业问题太多，而作为网民，特别是中国的网民，由于整体网民水平比较低，只要满足其基本需求即可。网站不要设计的太复杂，功能不用太多，页面简单明了即可。

2. 网站导航栏设计

首先，导航栏设计一定要突出，让访客一看就知道是导航栏，谁也不愿意花好几分钟的时间在你的页面上找导航链接。

其次，导航栏一定要分类明确，方便访客找到感兴趣的内容，其原则是一步到位。

3. 减少富媒体的使用

所谓的富媒体就是指一些Flash、视频、音乐等，用这些东西一定要控制到恰到好处，尽量减少使用这些富媒体，否则物极必反。

4. 网站上线时间点的选择

网站上线一定要等到所有的页面、功能都开发完毕之后才可以，假使你是访客，你会愿意看到“正在建设”这样的字眼吗？

5. 域名主机

域名的选择还是要本着让人一看域名，就知道这个域名代表什么意思的原则比较好，尽量少用简拼，可以采用缩写的形式。域名注册推荐大家选美国的Godaddy。

主机一定要选择一款稳定的主机，当然速度也相当重要。试想一下，如果你的主机隔三差五的宕机，谁能受到了，世界杯期间twitter的主机就老宕机，让我很生气。

这里给大家推荐一款美国的虚拟主机-Bluehost，任鸟飞网页设计博客就是使用的Bluehost，而且Bluehost是 wordpress 官方推荐主机，值得信赖。

任鸟飞网页设计博客主题微调

任鸟飞 — Sat, 10 Jul 2010 07:01:22 +0000

不知道为什么，一直在调整博客的主题样式，从开通博客到现在，大大小小的调整估计得几十次了，这是不是就是所谓的审美疲劳啊？完蛋了，我发现我喜新厌旧……

前端时间有朋友（快乐的村长）提出页面不够简洁，而且广告偏多，在这里表示特别的感谢，希望以后能有更多的朋友对本博客提出意见，本人将虚心听取。

本次调整的内容如下：

1. 为了使页面简洁一点，本人将右边栏的内容进行了调整。正如你现在看到的样式。采用不同背景来区分广告和内容，然后采用tab 导航的形式来展现热门、读者墙、友情链接和标签。

2. 页面导航部分将 Number Of Pages To Show 由8修改为6，Number Of Larger Page 由3修改为2。原因是在页码较大的时候，导航菜单的宽度容易溢出。注：这里使用的 pagenav 插件。

3. 博客页面最多显示 由8修改为5。原因是由于右边栏高度变小，为了协调左右边栏高度方向的平衡。

4. Google 自定义搜索显示页面的宽度由640px调整为550px， Google 自定义搜索显示页面的宽度默认是640px，显然已经超过本博客左边栏的宽度了，造成部分内容被隐藏。

我觉得善于吸取别人的教训也是一个好习惯，上面就是我在设计博客主题时出现的一些问题，希望你能有所避免。

如何选择网页图片格式（.jpg .png .gif）

任鸟飞 — Tue, 25 May 2010 13:50:11 +0000

作为网页显示类型的图片格式有三种 —— .jpg .png .gif，每一种格式都是为了满足其特定使用要求，其目标都是，在保持图片清晰度的同时，尽量降低图片的大小。

一 .JPG 格式

适用于有较多颜色的图形图像，JPEG格式图形图像可以包含成千上万种颜色。而且可以在降低图片质量级别的同时，尽量保持图片图像不失真。

二 .PNG 格式

适用于颜色数量较少的图表类型的图片，以及有大范围的单一颜色。最为重要的是 .PNG格式图片可以制作半透明效果。

相对于 .GIF格式，我们优先考虑使用 .PNG格式，原因如下：

压缩率更大，文件相对来说更小
可以制作半透明（透明程度可任意调节）效果
颜色深度范围更大，图像失真程度较小

三 .GIF 格式

适用于颜色数量较少的图表类型的图片，以及有大范围的单一颜色。最为重要的是 .GIF格式图片可以制作半透明效果。

.GIF格式图像图片最多包含256中颜色，一般的图形图像编辑软件可以根据实际情况选用最少的颜色种类来存储图片，尽量减小 .GIF图形图像的大小。

下面的情况下，可以考虑使用 .GIF格式

动画效果
透明效果

四. 图形图像格式在线转换工具推荐

Online Image Converter

五. 小技巧

其实，网页显示图片格式就这三种，我在保存图形图像的时候，都是一个一个试一下，然后选择一个效果最好的格式。

博客中有必要使用标签云（tag cloud）吗?

任鸟飞 — Tue, 11 May 2010 03:49:56 +0000

2004年之后，互联网进入web 2.0时代，网页设计趋势的主要准则向着简单、简约、渐变、大字体方向发展，其中标签云（tag cloud）是博客中最为流行的元素。

一. 标签云（tag cloud）使用实例

谷奥

Mashable

二. 标签云缺点

导航效果不好 —— 从网站统计数据来看，很少有用户通过标签云来浏览页面
信息冗余 —— 相信很多博主写文章时，一般都是根据文章内容，想到什么标签就用什么标签，更可怕的是，有时候一片文章标签使用10多个，如此多的未经整理的标签，最终肯定造成信息泛滥，重复信息太多！
信息遗漏 —— 通过字体大小及颜色区别很容易造成信息的遗漏，小字体以及浅颜色的标签链接极易被用户忽略掉。

三. 标签云使用建议

文章内使用标签数量控制在2到5个。
可以使用标签但不要使用标签云导航。

四. 总结

标签云在博客中起的作用不大，建议不要使用标签云。考虑到用户的浏览体验，需优化好博客的导航菜单，导航菜单需分类明确，层级清晰，并且可以增加一个内部搜索，以方便用户找到所需信息。

对标签云的使用，我只是抛砖引玉一下，也许你也有话说，不妨畅所欲言！

Html ID属性的另类用法

任鸟飞 — Tue, 27 Apr 2010 10:55:40 +0000

在Html编写过程中，我们经常会对重要元素添加ID属性，例如

，然后会在CSS中定义此id的具体样式，例如#header {width:960px; magin:0px auto;}。但这里要介绍的是，利用ID属性实现锚点的效果。

使用锚点是为了快速定位页面中的具体位置。比如很多网站，在页面的底部都会添加一个快速返回顶部的链接，利用锚点很容是实现此功能。

一. 利用锚点快速返回页面顶端具体实现方法

紧接着，添加如下代码

页面底部的快速返回顶端链接代码

返回页面顶端

二. 利用ID属性实现锚点功能


Header
返回顶部

因此利用ID属性实现页面的快速定位，代码相当简单。

利用此功能，我们可以开发更为强大的功能，比如说，我们也可以链接到其他页面的指定位置。

20条评论

上面的示例代码其实就是Wordpress博客中实现快速定位评论具体位置的html代码。所以说在修改Wordpress主题的时候要小心点，尽量不要删除标签ID属性值。

其实任鸟飞网页设计博客的主题就有此问题，在编写评论部分代码时，将评论ID丢掉了，你可以看到本博客右侧页面有 读者墙 功能，正常情况下是可以快速定位到该留言者的具体位置。

举例来说，读者墙某一评论者的链接如下:

本应该在

http://www.renniaofei.com/tools/bluehost-webhosting-review/

页面的评论部分设置该评论者的ID（comment-296），但实际情况，本主题并没有。

Ipage美国虚拟主机评测

任鸟飞 — Sun, 04 Apr 2010 10:22:24 +0000

iPage是一个网络解决方案供应商，提供一站式的网页设计，网站开发和托管服务。当然也包括电子邮箱托管，域名注册，电子商务，以及网络营销等。Ipage机房位于美国，相对国内而言，其整体互联网环境要好的多，从长远来说，建议将网站及域名放到美国。

Ipage虚拟主机总体评测

主机功能	规格
磁盘空间	不限
流量	不限
域名绑定	不限
免费域名	Yes
CGI-BIN	Yes
SSI	Yes
FTP	Yes
Frontpage Extensions	Yes
Free Site Builder	Yes

软件/插件	规格
Perl5	Yes
PHP 4 & 5	Yes
MySQL 数据库	不限
Ruby/Ruby on Rails	Yes
Java script/DHTML	Yes
Python	Yes
WordPress	Yes
GBook	Yes
Message Forum	Yes

付款方式：信用卡或 Paypal

Ipage服务非常好，提供了在线Live Chat，客服很及时，服务很热情。并且iPage 承诺，所有提交的问题都会在2分钟以内响应。

更值得一提的是购买 ipage 主机可以随时要求退款，30天内退全款，超过30天的话，会根据你已使用的天数退还剩余部分，这在主机商中是十分罕见的，也是他们对自己的主机有信心，同时也保证了他们会提供一如既往的优质服务。

只需要3.5$/Month就能购买都如此优质的虚拟主机，不限流量，不限空间，而且还免费赠送一个域名，可以绑定多个网站。相比较国内的虚拟主机提供商，动不动就上万元，而且还附有诸多限制，选择国外虚拟主机，是个很明智的选择。

iPage 官方网站： http://ipage.com

利用CSS3制作发光渐变动画按钮

任鸟飞 — Tue, 16 Mar 2010 12:15:14 +0000

CSS3标准新增动画（animation）属性（@-webkit-keyframes），通过简单的定义动画过程的三个帧即可实现完美的动画效果。

实例预览：radioactive buttons css3 animation

说明：现阶段，由于部分浏览器对CSS3标准支持的力度不够，为了更好的展现面的动画效果，请使用Safari 4.x版本以上浏览器，或者高版本的Firefox浏览器。

实现过程

1. 定义动画过程 greenPulse （类似于函数或过程的概念）

@-webkit-keyframes greenPulse {
  from { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
  50% { background-color: #91bd09; -webkit-box-shadow:: 0 0 18px #91bd09; }
  to { background-color: #749a02; -webkit-box-shadow:: 0 0 9px #333; }
}

2. 定义class（.）或ID（#）的动画属性，指定greenPulse来处理动画（类似于计算机语言中的委托）

a.button {
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	display: inline-block;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	color: #FFFFFF;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.green.button {
	-webkit-animation-name: greenPulse;
	-webkit-animation-duration: 3s;
}

代码说明：

@-webkit-keyframe // 定义动画的三个阶段（或帧） from （起始），50%（中间），to（结尾）
-webkit-animation-duration: 2s; //代表单次动画所持续的时间
-webkit-animation-iteration-count: infinite; //动画的循环次数，infinite代表不限次数循环，也可指定循环次数。
-webkit-animation-name: greenPulse; //这里的greenPulse就是我们自己定义的动画处理函数或过程

3. HTML代码

任鸟飞网页设计 - www.renniaofei.com

下载所有源代码：radioactive buttons css3 animation （右键另存为）

利用CSS3制作无背景图片特效按钮

任鸟飞 — Mon, 15 Mar 2010 16:29:33 +0000

随着CSS3标准的推广和普及，越来越多的浏览器开始支持CSS3标准，利用CSS3可以实现大量的图像效果（例如透明、渐变、阴影等）。

本案例中涉及到4种常用的CSS3属性：

border-radius
box-shadow
text-shadow
rgba

效果预览：利用CSS3制作无背景图片特效按钮

HTML：

CSS3 无背景图片特效按钮 »

CSS:

利用CSS的line-height属性让文本垂直居中

任鸟飞 — Mon, 08 Mar 2010 08:29:04 +0000

在编写菜单、导航条等CSS代码时，经常需要让里面的内容垂直方向居中排列。
这里利用line-height属性及height属性让元素垂直居中。

实例预览：vertical align middle

HTML


Home
About
Contact

CSS

#nav {
	background-color: #FFFFCC;
	height: 30px;
	border: 1px solid #FF6600;
}
#nav p {
	line-height: 30px;
	height: 30px;
	display: block;
	margin: 0px;
	padding: 0px;
}

代码说明：

将#nav p 中的line-height和height设置成同一值，即可保证#nav p中的内容垂直居中。

如何利用CSS来自动调整布局元素的宽度

任鸟飞 — Sun, 07 Mar 2010 08:26:52 +0000

页面布局元素的宽度可自行调整以适应浏览器宽度或父元素的宽度。

具体示例预览

原理：利用margin属性，约束局部元素定位。

HTML：


  
    right
  
 
   Left

CSS:


#page {
	background-color: #FF0000;
	min-height:300px;
}
#page #right {
	width: 300px;
	background-color: #0000FF;
	float: right;
	height: 200px;
}
#page #left {
	background-color: #FFFF00;
	margin-right: 350px;
	height: 200px;
}

代码说明：由于 #right设置float:left;所以需要根据实际情况给#page增加min-height属性，以防止#right的高度超过#page，造成#right溢出。也就是说尽量要保证#page的高度大于#right的高度。