梦网页设计制作 - 网页美工http://www.yuxiaomiao.com.cn/css+div-石家庄网站建设-SEO网站优化排名服务 - RainbowSoft Studio Z-Blog 1.8 Walle Build 100427zh-CNCopyright 2006-2009 梦网页设计. 站点地图   Copyright 2006-2009 冀ICP备08101**号 Some Rights Reserved.欢迎联系梦设计，QQ:819204705.您可以在河北石家庄梦设计工作室css+div资料站了解到：css+div|css+div布局|css+div排版|SEO|SEO服务|SEO优化|SEO技术|SEO工具|SEO教程|SEO培训|什么是SEO|网站优化|搜索引擎优化等网站资讯Mon, 06 Sep 2010 14:10:59 +0800漂亮的在线DIY网站集合null@null.com (梦设计工作室)http://www.yuxiaomiao.com.cn/wangye_meigong/zaixian-diy-wangzhan/Mon, 05 Jan 2009 02:20:38 +0800http://www.yuxiaomiao.com.cn/wangye_meigong/zaixian-diy-wangzhan/嗯，以前介绍过不少在线小程序了，今天咱们继续来介绍这些好玩儿的小网站和小程序。在这里我要引用前两天看见的一家餐厅标语“小是小，味道好。”包括：在线照片特效制作，大头贴DIY、图片加字，恶搞，签名，证件三大类等等好玩的在线DIY集合

1. 在线照片特效制作-播播酷
一个类似于PhotoFunia的在线照片特效制作程序，轻松生成有趣图片，有46种照片特效。

 

www.u148.net


2.


3.


4. 爱狗狗吧　　
主要包括恶搞，签名，证件三大类，可以说同上边介绍的图片仓库有些类似，但也有很多不同的地方，可以用来互补。

5. 在线制作屏幕保护
就是上传喜欢的图片，进行一些简单的设置后网站就会自动生成exe安装程序，下载到电脑中然后双击安装来使用自己制作的屏幕保护程序。（不过我个人很土的认为除了黑色全屏以外什么都不能起到屏保作用- -；）

6. 素描头像
拼脸部零件大家都会吧，虽然是英文网站，但是图像肯定都能看得懂啦，就是拼拼拼，拼到满意为止，效果是素描效果。

7. 帮你写藏头诗
输入你要藏头的那句话，点击开始做诗，一首藏头诗很快就做好了。至于通不通顺……不要考虑这么多了，我们又不是李百杜甫。

8. 制作毕加索风格头像
仍然是拼脸部零件，酷的是，生成效果是那种毕加索式的，所谓的立体派。

9. 奇多网
两个主要功能——魔力彩绘和秀逗贴。前者类似于windows绘图板，但有更多功能和素材可以让你使用，后者则是头像修改工具。

10. 制作纸娃娃
在这里你可以自己绘制自己喜欢的图像，程序自动生成3D纸娃娃。
点击“Enter Paper Critters from browser Window”或者“Launch full screen”，然后点击“TOY CREATOR”进入编辑页面，还可以点击“THECOLONY”查看其他人做好的纸娃娃。程序还有一个功能就是，根据你对纸娃娃的装扮，它会自动生成一些列参数，比如说，可爱度和邪恶度。

11. 制作纸飞机
选择飞机的样式，选择纸张的重量，选择尾翼翘起程度以及对侧翼进行设置。好了，托拽小人手中的纸飞机，松开鼠标，飞吧，看谁飞得更远。

12. 自制剪纸雪花
记不记得以前玩儿过的用一张纸折叠几次，再用剪刀在上边挖洞洞，展开后就是一片片纸制雪花，可以贴在窗户上。现在我们可以在网上重温这个游戏啦。点击“Make your own snowflake”，用鼠标控制剪刀，怎么样，是不是很环保的玩儿法。

13. 自制万花筒
万花筒就是万花筒啦，在左边放入各种各样的零件，右边就是你原来在小洞洞里才能看到的效果。

14. 自动PS头像
也是一个头像修改制作程序，强大的地方是它可以自动识别你的头部，并且只修改你头部的效果。

15. Google logo 生成器
输入你想显示的字符，自动生成Google风格的Logo。

16. 自制Flash游戏
将你的照片嵌入到flash游戏中或者改变游戏中的文字，制作出你自己的flash游戏。

文章出处：有意思吧

以上内容有河北石家庄网页设计制作工作室整理提供。2009.01.05

]]>网页美工http://www.yuxiaomiao.com.cn/wangye_meigong/zaixian-diy-wangzhan/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=35http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=35&key=6ed83e16网页设计之道null@null.com (梦设计工作室)http://www.yuxiaomiao.com.cn/wangye_meigong/wangyesheji/Sun, 28 Dec 2008 17:30:46 +0800http://www.yuxiaomiao.com.cn/wangye_meigong/wangyesheji/    一个不懂得欣赏优秀网页作品的设计师可能永远都无法懂得借鉴的真谛；一个无法将优秀作品的精髓融入到现有需求中的设计师可能永远都无法找到真正的灵感。即便是那些看似独创的设计，其灵感也往往来自设计师在长期借鉴过程中的不断积累。

    设计源于灵感，灵感源于借鉴——这是每个网页设计师都应该牢记的“成功法则”。

梦设计工作室 2008.12.28

]]>网页美工http://www.yuxiaomiao.com.cn/wangye_meigong/wangyesheji/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=34http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=34&key=e61d13fc初级网页制作者须知a@b.com (yuxiaomiao)http://www.yuxiaomiao.com.cn/wangye_meigong/33/Sat, 27 Dec 2008 16:23:01 +0800http://www.yuxiaomiao.com.cn/wangye_meigong/33/对于初级学习者来说，考虑到电脑用户使用的分辨率不一样，那么网页的大小该是多少呢？
一网页一般的大小：
宽度：
1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。
2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005
3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001
注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

所以如果是1024的分辨率，你的网页不如设成1000安全一点。
如果是800的分辨率一般都设成770。

这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化 所以 800的分辨率一般设定760左右,1024的设定990左右.

高度：没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。

]]>网页美工http://www.yuxiaomiao.com.cn/wangye_meigong/33/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=33http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=33&key=2a77cadd网页设计：对称与平衡美学的思考还有留白的艺术null@null.com (梦设计工作室)http://www.yuxiaomiao.com.cn/wangye_meigong/duichen-pingheng-liubai/Wed, 24 Dec 2008 23:30:10 +0800http://www.yuxiaomiao.com.cn/wangye_meigong/duichen-pingheng-liubai/    本文亦属评论胡说，不是教程，仅仅是说一些自己在做网页美工时的思路，还有网页留白的艺术效果也是不容忽视的。这里就不敢妄加评论了。

    关于对称的东西很多，很多类的东西都有对称的一面，比如我我们的四方大桌子、门窗这些大多都是对称的。从家居布局上来讲，中国传统的建筑也是讲究对称的、比如我们现在的故宫、四合院等，还有中国结、瓷器、玉器都有很多对称之作。不光是中国的，纵观世界的建筑或是一些艺术形态对称之作也是比比皆是。但是是不是对称就一定是左右、上下是一样的呢，个人以为对称也要寻找差异性，当然是大对称小对比的形态了。

    不论是在做设计还是在做艺术创作特别是与人生活所接近的创作，时常会接触到“对称”“平衡”这两个关键词，首选我们要来了解什么叫“对称”什么叫“平衡”。对称，通常是说一件特体的上下，或是左右一样的时候我们称之为对称。常见的内容有红双喜，门、窗户等。平衡，是指一件不对称的事物，通过其它的元素的影响使之能趋于平衡看起来不会向一边倾斜。常见的内容有键盘、窗花等。通常事物都是不对称的，对称是不对称中的特殊形态。呵呵这是哲学辩证，姑且借来一用。我们都清楚这个世界上没有绝对一样的东西，所以由此推断也就没有绝对对称的东西，但是我们必竟不是来做口舌这争的，我们对于这些哲学概念还是放宽松一些。这里的“对称”我们就看作是视觉上的相同。

     比如银行门口的狮子，狮为两头，各分左右，形为相似，却各有其态。这就是大对称小对比。而我们看到很多对称的作品的细节处却有一些异样的形态。所以说不要单纯的以为对称就是上下、左右相同。对称应是上下、左右相似，大部分在形体上的体积是一般大小的。这样视觉上即有对称也有对比，效果要比单纯的对称要好得多丰富得多。如是非常左右一样、上下相同，那么设计没有对比，也就看不出美来了。所以不要死抱着对称不放。不妨看看下面的平衡也许会让设计更为丰富多彩。

关于平衡呢，平衡是更为丰富的形态了，平衡不是对称，平衡是运用大小、色彩、位置等差别来形成视觉上的均等。这么来解释也许会更为直观一点：当人用一只腿站立时，人的身体就会轻微的向一方倾斜，以之来保持平衡。设计中也会遇到平衡的问题，比如说，左右大小不一的时候我们通常会通过其它手法来让其不会觉得一边倒。而采用的手法大多是色彩的轻重、内容的疏密。然具体到网页设计上来讲，我们通常不会做左右对称的设计，但是却会产生一边倒的情况，如视觉上左边内容多而空间大，右边内容少而空间小。这样一边倒的情况就不美观了，如何解决这个问题呢？答案是：寻找不同类型的元素来作为左右的砝码。比如左大右小时，那么左边放上文字以供浏览，右边放上图片，由于图片比起文字来视觉份量要重一些，所以用小图片就可以和文字形成一个平衡。又可以用色彩来平衡，左大右小，那么在色彩上就左轻右重。在自己的脑子里始终放上一个天秤，把你的设计元素放在天平的两边，当平衡时我们就清楚这样的页面就会活泼而不会觉得有失重之感，一个活泼又不失重的作品必然是成功的。

试想一下自己的作品，是过于对称呢，对称之中我们是否寻求变异呢。如果作品不是对称的，那么是不是平衡的有没有一边倒或是头重脚轻呢。如果遇到这样的设计烦恼不妨用这样的眼光来分析一下，自己的作品是不是平衡了。

原文链接：http://andymao.com/andy/post/55.html

]]>网页美工http://www.yuxiaomiao.com.cn/wangye_meigong/duichen-pingheng-liubai/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=29http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=29&key=6621ea6b49个非常有创意的自定义404错误页面null@null.com (梦设计工作室)http://www.yuxiaomiao.com.cn/wangye_meigong/youchuangyi-404cuowu-yemian/Tue, 02 Dec 2008 23:41:30 +0800http://www.yuxiaomiao.com.cn/wangye_meigong/youchuangyi-404cuowu-yemian/    404错误是指在服务器找不到指定的页面。404错误页面是可以自定义的。404 是一个 http 错误代码，指的是网页不存在。404 的含义：第一个 4 表示客户端出错，也就是服务器对你说：嘿，天堂有路你不走，404 无门你偏要闯进来；第二个 0 表示你把网址打错了；最后表示这个错误代码在 4 开头的错误代码中排行老四。人们有时候会忽略掉这个细节，但是为了对搜索引擎更加友好，我们还是要制作这个给搜索引擎看的页面的。以防止看到的是一个错误代码。

    你知道正常页面返回的 http 代码是什么吗？答案是：200，我们看不到这个代码，因为浏览器正在显示服务器发送过来的页面。
今天选出了hongkiat更棒的49个(部分重复)，一起来欣赏下。资源收集自Pingdom, Smashing Magazine, CNN, 404errorpages。

HomeStar Runner

 

 

 

 

PEN-and-PAPER

 

 

 

 

Project EUH

 

 

 

 

Tix02

 

 

 

 

Spore

 

 

 

 

Psicobyte

 

 

 

Poemofquotes

 

 

 

 

Underconsideration

 

 

 

 

Martinkorner

 

 

 

 

MTV.de

 

 

 

 

Jackfig

 

 

 

 

Newyorker

 

 

 

Meroigo

 

 

 

 

Mikeace

 

 

 

 

Jhuskisson

 

 

 

 

Startdrag

 

 

 

 

LookItsMe

 

 

 

 

Amcharts

 

 

 

 

Alistapart

 

 

 

 

Enesto Timor

 

 

 

Jtbullitt

 

 

 

 

Galiacho

 

 

 

 

Ateaseweb

 

 

 

 

Cgcraft

 

 

 

 

Codesense

 

 

 

 

Suspended Animations

 

 

 

 

Mixx.com

 

 

 

Tysontate

 

 

 

 

Rubberducky

 

 

 

 

Aviation Reviews

 

 

 

 

Twitter

 

 

 

 

Kitty-yo

 

 

 

 

Jibjab

 

 

 

Pownce

 

 

 

 

Freeshell

 

 

 

 

Dazeofourlives

 

 

 

 

The Big Noob

 

 

 

 

Jeremy Fuksa

 

 

 

 

Just Creative

 

 

 

 

Slonky

 

 

 

Frye / Wiles

 

 

NTL World

 

 

Lumino.us

 

 

Bruno Bellamy

 

 

Blue Vertigo

 

 

HomeStar Runner

 

 

Krystal Archive

 

 

D20srd

 

 

Rainfall Daffinson

 

 

CUOMA Design Studio

 

河北石家庄梦网页设计制作工作室  2008.12.03

]]>网页美工http://www.yuxiaomiao.com.cn/wangye_meigong/youchuangyi-404cuowu-yemian/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=21http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=21&key=cf05f22eWeb设计师需要的10个高质量的ICON图片资源网站null@null.com (梦设计工作室)http://www.yuxiaomiao.com.cn/wangye_meigong/gaozhiliang-icon-tupian/Tue, 02 Dec 2008 03:16:16 +0800http://www.yuxiaomiao.com.cn/wangye_meigong/gaozhiliang-icon-tupian/如果你是一名Web前端设计师的话，那么在页面设计过程中，你肯定为找不到合适的修饰图标而郁闷过，当然，我也不例外，所以当我看到这个介绍高质量Icon图标资源的文章时，就像是激流中突然抓住了一棵救命稻草一样，可能，这些高质量的Icon图标资源也会让你有同样的感受吧。

Vistaicons

Iconspedia

fasticon

Iconarchive

freeiconsdownload

dryicons

BestFreeIcons

icondrawer

feedicons

freeiconsweb

同样，国内也有几个很不错的素材下载站，比如桌面城市等等，如果大家有好的可以联系我，下次专门对国内的一些图片资源和极品LOGO网站做一次点评。
梦网页制作工作室 2008.12.02

]]>网页美工http://www.yuxiaomiao.com.cn/wangye_meigong/gaozhiliang-icon-tupian/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=20http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=20&key=55841fe8QQ新首页滑动门标签特效null@null.com (梦设计工作室)http://www.yuxiaomiao.com.cn/wangye_meigong/qq-huadongmen-biaoqian-texiao/Tue, 02 Dec 2008 02:52:17 +0800http://www.yuxiaomiao.com.cn/wangye_meigong/qq-huadongmen-biaoqian-texiao/今天搞页面，感觉QQ新首页的标签效果不错，便搞了下来，这里梦网页设计工作室发出来代码供大家交流使用。样式要自己写，我只是随便写了一下。最近滑动门的特效，越来越得到人们追捧了。呵呵，同时这也是JS滑动门以及下拉菜单的一个很好的思路。相信，作为网页美工，学会了滑动门标签特效一定会为你的网页增色不少的。

<!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=gb2312" />
<title>最新QQ标签特效</title>
<style type="text/css">
*{ margin:0; padding:0; font-size:12px;}
body{text-align:center;}
h2{padding:10px 0; font-size:20px;}
.dis{ display:block;}
.undis{ display:none;}
.qqtab{width:300px; margin:auto;}
.tabtit{height:25px;}
.qqtab h4{font-weight:normal; float:left;width:60px; height:25px; line-height:25px; margin-right:2px; background:#00FFFF;}
.qqtab h4.s{font-weight:700;background:#0099FF;}
.tabInfo{ padding:10px 20px;}
</style>
<script language="javascript">
 window.onerror = function()
 {
  return true;
 }

 if (!window._sT)
 {window._sT = window.setTimeout;window.setTimeout = function(fCallback, nDelay, oObject){if (typeof fCallback == 'function'){if (!oObject){oObject = window;}var argu = Array.prototype.slice.call(arguments, 3);var newFunc = (function(){ fCallback.apply(oObject, argu); }); return window._sT(newFunc, nDelay); }return window._sT(fCallback, nDelay);};}

 var marTime = new Array();
 var marWay = new Array();
 var moveTime = new Array();
 moveTime[0] = 0;
 moveTime[1] = 0;
 var speed = 30;
 var fodTime = 0;
 var proFlog = 0;
 var proTime = 0;

 function $(o){ return (typeof o == "object")?o:document.getElementById(o);}

 function getNames(obj,name,tij){var plist = $(obj).getElementsByTagName(tij);var rlist = new Array();for(i=0;i<plist.length;i++){if(plist[i].getAttribute("name") == name){rlist[rlist.length] = plist[i];}}return rlist;}

 function cplay(){var o,n,t,na,c1,c2;o = $(arguments[0]);num=arguments[1];t=arguments[2];n=arguments[3];c1=arguments[4];c2=arguments[5];var f=getNames(o,n,t);for(i=0;i<f.length;i++){ if(i == num){f[i].className = c1;}else{f[i].className = c2;}}}

 function newsPlay(){var o,n,t,na,c1,c2;o = $(arguments[0]);num=arguments[1];t=arguments[2];n=arguments[3];c1=arguments[4];c2=arguments[5];var f=getNames(o,n,t);for(i=0;i<f.length;i++)  {if(i == num){if(f[i].className == "s0" || f[i].className == "s1"){f[i].className = "s1";}else{f[i].className = c1;$("map").className = "undis";}}else{    if(f[i].className == "s0" || f[i].className == "s1"){f[i].className = "s0"; }else{f[i].className = c2;$("map").className = "undis";}}}}

 function fod(){var o1,o2,t1,t2,n1,n2,c1,c2,c3,c4,num;o1=$(arguments[0]);o2=$(arguments[1]);num=arguments[2];t1=arguments[3];n1=arguments[4];t2=arguments[5];n2=arguments[6];c1=arguments[7];c2=arguments[8];c3=arguments[9];c4=arguments[10];if(o1.id=="News"){newsPlay(o1,num,t1,n1,c1,c2);}else{cplay(o1,num,t1,n1,c1,c2);}cplay(o2,num,t2,n2,c3,c4);}

 function _fod(o1,o2,t0,t1,n1,t2,n2,c1,c2,c3,c4)
 {return function(){fod(o1,o2,t0,t1,n1,t2,n2,c1,c2,c3,c4)}}

 function formatArea()
 {var o1=$(arguments[0]);var o2=$(arguments[0]+"Info");var t1=arguments[1];var n1=arguments[2];var t2=arguments[3];var n2=arguments[4];var c1,c2,c3,c4;if(arguments.length>5){c1=arguments[5];c2=arguments[6];c3=arguments[7];c4=arguments[8];}else{c1="s";c2="";c3="dis";c4="undis"}var f=getNames(o1,n1,t1);  for(i=0;i<f.length;i++){f[i].value = i;f[i].onmouseover = function(){clearTimeout(fodTime);fodTime=0;fodTime = setTimeout(_fod(o1,o2,this.value,t1,n1,t2,n2,c1,c2,c3,c4),100); }; f[i].onmouseout=function(){clearTimeout(fodTime);fodTime=0;}}}

</script>
</head>

<body>
<h2>QQ标签特效</h2>
<div class="qqtab">
 <div class="tabtit" id="qqtab">
   <h4 class="s" name="d">标签一</h4><h4 name="d">标签二</h4><h4 name="d">标签三</h4>
 </div>
 <div class="tabInfo" id="qqtabInfo">
  <div class="dis" name="f">标签一内容</div>
  <div class="undis" name="f">标签二内容</div>
  <div class="undis" name="f">标签三内容</div>
 </div>
</div>
<script language="javascript">
    formatArea("qqTab","h4","d","div","f");
</script>
<div style="margin-top:50px; text-align:center;">制作：jacksuc 2008-05-29 <a href="http://www.wmtimes.cn" target="_blank">www.wmtimes.cn</a> 完美世界</div>
</body>
</html>

以上代码仅仅是实现了功能具体的美化还要靠大家的智慧了。

梦网站制作工作室 2008.12.01

]]>网页美工http://www.yuxiaomiao.com.cn/wangye_meigong/qq-huadongmen-biaoqian-texiao/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=17http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=17&key=87247bb110个值得推荐的国外Web2.0站点a@b.com (yuxiaomiao)http://www.yuxiaomiao.com.cn/wangye_meigong/zhidetuijiandeguowaizhandian/Sun, 30 Nov 2008 18:38:16 +0800http://www.yuxiaomiao.com.cn/wangye_meigong/zhidetuijiandeguowaizhandian/如今崇尚一种风潮那就是web2.0，一尊重用户二倡导分享三崇尚自由，网站能做到这三点就可以淘汰现存的网络巨头
以下的10个网站都是相当的有特色，并且几乎都采用了Web 2.0技术，都是值得一去的地方。（排名不分先后）

Thesixtyone 基本上就是一个音乐分享类的Digg  （什么是Digg？国内视频网站土豆网里面的“挖一下”功能就是借用了Digg的核心理念），由于是全世界持有不同口味的音乐爱好者们共同推荐的音乐，因此上面的东西都非常不错，而且你还可以把它作为一个发布你自己创作的音乐的平台。唯一的缺点是上面的音乐无法缓冲后再听（我在考虑要不要把我收藏夹里面的MeeMix换成Thesixtyone）。

什么能抓住MM的心呢？相信一餐GG亲手做的美食是绝对有杀伤性的武器。可惜大多数男生常常为菜谱上模棱两可的烹调说明而大伤脑筋。

上面说的是食物的DIY，美食怎么能少了可口的饮料呢？

一个不错的视频网站，其特色在于你可以在

作为一个理财网站，

Topix 可以根据IP来判断访问者所在的国家或地区（在美国的话这一判断可以精确到州），并通过50000多个新闻源头和数千个论坛的数据整合为访问者提供该地区正在发生的新闻。对于中国用户来讲，这不失为一种了解国外媒体如何报道中国的途径。（例如刚才就看到了纽约时报报道了这次地震中一名坚持了8天的幸存者。）

Jumpcut的特点在于它允许你在线编辑你上传的视频，并且里面的操作和说明都非常的直观和友好。

Indeed 以搜索引擎的形式为你提供职位搜寻服务，数据来源于美国各大HR网站和论坛，这也是一个只有美国国内用户才能体会到它的优点的网站。
搭建网站，进而经营网站，怎样的网站才能脱颖而出？什么才算牛逼网站，一定要看得见现在的牛逼网站，悟出其中的共性，照着做，未来你就会比他更好更牛逼。那么如果以后能有一个比网易百度qq还牛逼的网站出来，那会是什么样子？“三条，一尊重用户二倡导分享三崇尚自由，网站能做到这三点就可以淘汰现存的网络巨头。”

石家庄梦设计工作室 2008.11.30

]]>网页美工http://www.yuxiaomiao.com.cn/wangye_meigong/zhidetuijiandeguowaizhandian/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=11http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=11&key=04ca62d3七个技巧提高网页打开的速度a@b.com (yuxiaomiao)http://www.yuxiaomiao.com.cn/wangye_meigong/tigao-wangye-dakai-sudu-jiqiao/Mon, 24 Nov 2008 02:11:55 +0800http://www.yuxiaomiao.com.cn/wangye_meigong/tigao-wangye-dakai-sudu-jiqiao/互联网带宽越来越宽，似乎让网页的加载速度得到了质的飞跃。其实不然，因为随着带宽的提高，网页上的对象也越来越多，因此加快网页打开速度还是一个重要的课题。加快网页的打开速度，有三个路径，一是提高网络带宽，二是用户在本机做优化，三是网站设计者对网页美工做一定的优化。这篇文章站在一个网站设计者的角度，分享一些优化网页加载速度的小技巧。
 

网页提速！

一、优化图片

几乎没有哪个网页上是没有图片的。如果你经历过56K猫的年代，你一定不会很喜欢有大量图片的网站。因为加载那样一个网页会花费大量的时间。

即使在现在，网络带宽有了很多的提高，56K猫逐渐淡出，优化图片以加快网页速度还是很有必要的。

优化图片包括减少图片数、降低图像质量、使用恰当的格式。

1、减少图片数：去除不必要的图片。

2、降低图像质量：如果不是很必要，尝试降低图像的质量，尤其是jpg格式，降低5%的质量看起来变化不是很大，但文件大小的变化是比较大的。

3、使用恰当的格式：请参阅下一点。

因此，在上传图片之前，你需要对图片进行编辑，如果你觉得photoshop太麻烦，可以试试一些在线图片编辑工具。懒得编辑而又想图片有特殊的效果？可以试试用过调用javascript来实现图片特效。

二、图像格式的选择

一般在网页上使用的图片格式有三种，jpg、png、gif。三种格式的具体技术指标不是这篇文章探讨的内容，我们只需要知道在什么时候应该使用什么格式，以减少网页的加载时间。

1、JPG：一般用于展示风景、人物、艺术照的摄影作品。有时也用在电脑截屏上。

2、GIF：提供的颜色较少，可用在一些对颜色要求不高的地方，比如网站logo、按钮、表情等等。当然，gif的一个重要的应用是动画图片。就像用Lunapic制作的倒映图片。

3、PNG：PNG格式能提供透明背景，是一种专为网页展示而发明的图片格式。一般用于需要背景透明显示或对图像质量要求较高的网页上。

三、优化CSS

CSS叠层样式表让网页加载起来更高效，浏览体验也得到提高。有了CSS，表格布局的方式可以退休了。

但有时我们在写CSS的时候会使用了一些比较罗嗦的语句，比如这句：


margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;


你可以将它简化为：


margin: 10px 20px 10px 20px;


又或者这句：


<p class="decorated">A paragraph of decorated text</p>
<p class="decorated">Second paragraph</p>
<p class="decorated">Third paragraph</p>
<p class="decorated">Forth paragraph</p>


可以用div来包含：


<div class="decorated">
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>


简化CSS能去除冗余的属性，提高运行效率。如果你写好CSS后懒得去做简化，你可以使用一些在线的简化CSS工具，比如CleanCSS。

四、网址后加斜杠

有些网址，比如http://www.yuxiaomiao.com.cn/wangye_meigong，当服务器收到这样一个地址请求的时候，它需要花费时间去确定这个地址的文件类型。如果220是一个目录，不妨在网址后多加一个斜杠，让其变成http://www.yuxiaomiao.com.cn/wangye_meigong/，这样服务器就能一目了然地知道要访问该目录下的index或default文件，从而节省了加载时间。

五、标明高度和宽度

这点很重要，但很多人由于懒惰或其它原因，总是将其忽视。当你在网页上添加图片或表格时，你应该指定它们的高度和宽度，也就是height和width参数。如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

下面是一个比较友好的图片代码：


<img id="moon" height="200" width="450" src="http://www.kenengba.com/moon.png" alt="moon image" />


当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。

六、减少http请求

当浏览者打开某个网页，浏览器会发出很多对象请求（图像、脚本等等），视乎网络延时情况，每个对象加载都会有所延迟。如果网页上对象很多，这可以需要花费大量的时间。

因此，要为http请求减负。如何减负？

1、去除一些不必要的对象。

2、将临近的两张图片合成一张。

3、合并CSS

看看下面这段代码，需要加载三个CSS：


<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />


我们可以将其合成一个：


<link rel="stylesheet" type="text/css" href="/style.css" />


从而减少http请求。

七、其它小技巧（译者添加）

1、去除不必要加载项。

2、如果在网页上嵌入了其它网站的widget，如果有选择余地，一定要选择速度快的。

3、尽量用图片代替flash，这对SEO也有好处。

4、有些内容可以静态化就将其静态化，以减少服务器的负担。

5、统计代码放在页尾。

原文地址：http://www.kenengba.com/post/435.html

以上内容有梦网页设计工作室整理提供  200811.24

]]>网页美工http://www.yuxiaomiao.com.cn/wangye_meigong/tigao-wangye-dakai-sudu-jiqiao/#commenthttp://www.yuxiaomiao.com.cn/http://www.yuxiaomiao.com.cn/feed.asp?cmt=7http://www.yuxiaomiao.com.cn/cmd.asp?act=tb&id=7&key=a02e03f4