<![CDATA[驰创数码 - 设计讨论]]> http://www.chichuang.com/Blog/ zh-cn PBlog2 v2.4 驰创数码 http://www.chichuang.com/Blog/images/logos.gif http://www.chichuang.com/Blog/ 驰创数码 http://www.chichuang.com/Blog/article.asp?id=91 <![CDATA[DIV+CSS浏览器兼容的实用技巧]]> your@email.com(song) Wed,31 Dec 2008 15:05:29 +0800 http://www.chichuang.com/Blog/default.asp?id=91 1,盒解释器的不同解释. #box{
width:600px; //for ie6.0-
w\idth:500px; //for ff+ie6.0
}
#box{
width:600px!important //for ff
width:600px; //for ff+ie6.0
width :500px; //for ie6.0-
}

2,在ie中隐藏css,使用子选择器
html>body #box{ }

3,只有ie识别
*html #box{ }

4,在ie/win有效而ie/max隐藏,使用反斜杠
 
5,给ie单独定义样式

6,浮动ie产生的双倍距离
#box{
float:left;
width:100px;
margin:0 0 0 100px; //这种情况之下IE会产生200px的距离
display:inline; //使浮动忽略
}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,...不可控制(内嵌元素);
#box{
display:block; //可以为内嵌元素模拟为块元素
display:inline; //实现同一行排列的的效果
diplay:table; //for ff,模拟table的效果
}

7,for oprea only
@media all and (min-width:0px){
#box{ }
}
8,IE与宽度和高度的问题
IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，
正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：
#box{
width: 80px;
height: 35px;
}
html>body #box{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

9,页面的最小宽度
min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个放到 <body> 标签下，然后为div指定一个类，CSS这样设计：
#container{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}

第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。
同样的办法也可以为IE实现最大宽度：
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
}

10,清除浮动
.hackbox{
display:table; //将对象作为块元素级的表格显示
}
或者
.hackbox{
clear:both;
}
或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持，所以并不影响到IE/WIN浏览器。-------这种的最麻烦的......
#box:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

11,DIV浮动IE文本产生3象素的bug
左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;
}
#left{
float:left;
width:50%;
}
#right{
width:50%;
}
*html #left{
margin-right:-3px; //这句是关键
}
HTML代码

12,属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}
div[id]{}
这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
 

 

]]> http://www.chichuang.com/Blog/article.asp?id=64 <![CDATA[亿天桌面系列贰]]> your@email.com(rainy) Fri,27 Oct 2006 11:26:28 +0800 http://www.chichuang.com/Blog/default.asp?id=64
]]> http://www.chichuang.com/Blog/article.asp?id=62 <![CDATA[国际上十四个优秀网页设计审核站［转贴］]]> your@email.com(rainy) Tue,12 Sep 2006 14:23:32 +0800 http://www.chichuang.com/Blog/default.asp?id=62 http://www.strangefruits.nl/

2.美国 XPAIDER ----------------------------- http://www.xpaider.com/

3.泰国 nofound ----------------------------- http://www.nofound.com/home/

4.巴西 lovetatoo ----------------------------- http://www.lovetatoo.com.br/

5.美国 TAXI ----------------------------------- http://www.designtaxi.com/

6.阿根廷 netinspiration --------------------- http://www.netinspiration.com.ar/

7.英国 linkdup --------------------------------- http://www.linkdup.com/

8.土耳其 e-creative ------------------------- http://www.e-creative.net/

9.美国 robocore ------------------------------ http://www.robocore.com/

10.英国 crossmind --------------------------- http://www.crossmind.net/

11.俄罗斯 DesignCollector ----------------- http://www.designcollector.ru/

12.英国 RES72 -------------------------------- http://www.res72.com/

13.意大利 neosintesi ------------------------ http://www.neosintesi.info/tools/

14.中国 pages.think ------------------------- http://pages.blueidea.com/
]]> http://www.chichuang.com/Blog/article.asp?id=58 <![CDATA[CSS无限级导航条]]> your@email.com(rainy) Mon,21 Aug 2006 10:08:54 +0800 http://www.chichuang.com/Blog/default.asp?id=58
下载文件 点击下载此文件



下载文件 点击下载此文件
]]> http://www.chichuang.com/Blog/article.asp?id=55 <![CDATA[一个特帅的展示图片的js+css]]> your@email.com(Moonight) Mon,31 Jul 2006 14:40:16 +0800 http://www.chichuang.com/Blog/default.asp?id=55
HTML代码


[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

]]> http://www.chichuang.com/Blog/article.asp?id=54 <![CDATA[flash滚动焦点图的方法]]> your@email.com(rainy) Tue,18 Jul 2006 11:53:05 +0800 http://www.chichuang.com/Blog/default.asp?id=54
也就是这种效果.
图片上有1234它会自动切换的图.
二段JS代码.和一个DIV.

下载文件 点击下载此文件
]]> http://www.chichuang.com/Blog/article.asp?id=50 <![CDATA[奇思妙想过目难忘，难得一见的公益广告（多图经典）]]> your@email.com(roey) Wed,07 Jun 2006 17:49:57 +0800 http://www.chichuang.com/Blog/default.asp?id=50 http://dzh.mop.com/topic/main/readSubMain_6466358_0.html]]> http://www.chichuang.com/Blog/article.asp?id=49 <![CDATA[网页设计价格讨论(转载)]]> your@email.com(roey) Wed,07 Jun 2006 16:42:22 +0800 http://www.chichuang.com/Blog/default.asp?id=49

　　"网页设计"面对着两个对象，一是客户，二是设计师。行业规范能制定的基础，是需要两个对象在观念上达成共识。现在试图分析一下这两个对象可能陷入的观念上的误区。事实上，很多客户不明白建网站能给自己带来什么，只是抱着"人有我有"的心态，于是，小心翼翼的投进一千几百块钱，换来名片上的网址，并到处宣扬：我们有自己的网站。这个观念导致的后果是，网上充斥着众多"惨不忍睹"、"言而无物"的网站。理智的客户就会考虑：我为什么要建网站？我要建什么类型的网站？这个网站会带来多少回报？从大部分客户角度上划分，网站可分为资讯类、形象类或两者综合。资讯类就是实现产品资讯、网上订购等功能；形象类则是打造企业形象品牌，使品牌在网上传播到世界各地。普通一个企业客户，在网站内容上的要求往往是这样：一个形象首页，然后就是公司简介、产品介绍和联系方式。于是很多设计公司两三千块钱就愿意承接这些业务了。在设计公司内部则是要求设计师在一两天内完成一个费用为两三千块的网站设计。一两天的时间，设计师还来不及去理解这个企业，只能根据客户的片言片语，加上自己的经验去完成网站设计。一个丑陋的网站，最恶意的后果就是，严重损坏企业形象，网站属于门面，让人怀疑丑陋的门面后面的企业也是极差的。这就是一些品牌企业为什么愿意花重金去打造网站形象了。所以光凭"首页五百，内页三百"的价钱去打造网站，就失去了设计本身的意义。


　　网页设计师也有不少思想上的误区。首先，怎样才算是网页设计师？是不是学几天Photoshop，再学几天的Dreamweaver，就可以成为网页设计师了？有人说，天下网站一大抄，会抄了，也可以做网页设计师了。从网上的招聘广告来看，有的写着要求设计师是美院毕业，有的要求是计算机专业，有的要求熟练操作图形软件，有的要求会编程。这就导致网页设计师的多元化，甚至从设计、制作到后台编程都是一手包办。对网页设计师的定义不明确，也就导致被称?quot;网页设计师"的人的水平良莠不全，所以设计师的工资水平也是参差的。有的年薪十万，有的月薪几百。成本的不同，也就使网页设计的价格很难形成标准。而且，从事网页设计的人，有专职的，也有业余的，其中有不少是在校生。有些业余的人，只图在帮助客户建站的过程中学习，或者赚到一点小钱就满足了。于是，这个市场乱糟糟，没有人出来管理，也没有人能管理。


　　这里要提及一下"设计价值观"。先来说个小故事。中国有个企业，生产设备坏了，导致停产，请了不少专家，都无济于事。无奈，只好花重金请来国外专家，那专家只简单的瞧了一会，然后用粉笔在机器上画了一条线，说问题在这里，三言两下就使设备运转起来。厂方不服："你只画了一条线，不该拿这几十万报酬。"国外专家说："我为了能画这条线，我已经研究了几十年，知识的价值是用时间来恒量的吗？难道你们希望我花几个月时间修好它，才能拿这报酬？"网页设计的价值，同样也不可以用时间去恒量。有些设计高手，在接设计项目的时候，总是想着，这项目花不了多长时间，所以价钱再低些也没有关系。这完全是一种自我贬值的想法。名家画画，通常也是用时几天甚至是几分钟就一气呵成，但该画却是价值不菲，因为里面的价值包含着画家数十年的功力。所以网页设计的价格不应该以简单的劳动力来恒量。网页设计师们只有认真分析设计作品的真正价值，才有可能达成行业规范。

　　客户和网页设计师们思想上有了共识，才能坐到一起，共同探讨行业价格规范。因为行业的规范是针对客户和设计师的，只有这两者中大部分人认可的规范，才能算是标准。标准起到什么作用呢？起到约束和参照作用。


　　网页设计行业价格标准，真的很重要、很迫切需要吗？当你漫步市场时，你发现同一件商品在每一个摊位的报价都不同时，你是否在犹豫？这时你就是客户，你弄不清楚究竟花多少钱购买该商品才是最合算，因为该市场没有规范。同样，假如你是出售商品的小贩，而对着客户问价时，你心里也没有底，因为这市场的价格很乱，你想报三百块，但又担心旁边的人报二百块而把你的生意抢去。相信很多网页设计师都面对过这样的尴尬。没有规范，没有对照，甚至连小小的"页"字也统一不了，比如有人是以一个HTML页面为一页，有人则是A4纸大小为一页。


　　拍卖的场面通常是这样，在一个底价上，众人纷纷抬高价格，价高者得。很不幸的是，现状的网页设计的报价是相反的，没有底价，纷纷压低价格以求取得业务，价低者得。连一个底价都没有，正说明这个行业处于一种非常尴尬的状态。要打破这个不良局面，唯有价格标准出台。也许有人认为，网页设计的价格低，对客户有利，事实并不是这样的，中国人信?quot;一分钱一分货"，客户给到的价钱低，设计公司也只能降低成本，才有利可图，降低成本的最直接办法就是要求设计师在很短的时间内完成该项目，而设计师为了能按时完成任务，就臆造，就抄袭，设计质量得不到保证，到了最后，直接受损害的，还是客户自己。
　　那么，网页设计行业价格标准应该由谁来拟定呢？前段时间，各大专业论坛上都有热烈的讨论，但都没有统一的认识。我在这里说一下自己的想法，以作抛砖引玉。我认为，应该由一些在网站设计行业影响力比较大的网站牵头，各派出一些资深人士进行会议讨论，同时邀请一些企业代表参加讨论。最后拟出初稿，放在网上进行调研。同时配合媒体，做适当的推广，让更多的人了解这一价格标准。
　　那么，各个地方的物价指数不一样，如何在网页设计行业价格标准中体现？虽然互联网是不分国界，但是网站设计行业中还是分区域性的，譬如，一间北京的公司，应该不会把网站的项目交给广州的网站建设公司去做，因为建站过程，双方的面对面沟通是很重要的。在网页设计行业价格标准中，价格应该是一条公式表示，根据物价指数的不同，算出来的价钱也应该有差别。具体考虑到多少钱一页时，我认为有个东西要单独考虑一下，就是创意。随着网络技术的发展，工具软件越来越智能化，而且网络带宽越来越宽，这样，设计师制作的成本就越来越低。所以，创意在网页设计中的地位越来越重要，但创意却不可以用页数来恒量，因此，创意应该单独作评估，视客户的需要而定。

　　实际上，很多内页只是文字上不同。这时，应该是以模板数量来计算。模板的价钱高些，而套用模板的内页的价钱低些。这样，对客户就公平一些，而定价的重点就落在设计上，而淡化了制作。
　　个人认为，网页设计价格标准中，应该分创意、首页、模板、内而来收费，（Falsh的收费在本文中不作讨论）。
　　另外，网站是需要不断更新的。这就涉及到后期维护的收费。维护费用通常是按年来收取，这种维护通常是指更换一些产品图片，更改一些文字。如果网站要改版，那就不属于维护的范围。
　　网页设计行业价格标准内，还应该包括合同的标准化。在合同中，要考虑到双方的权益，如预付款问题，合同签订之后，客户方支付30%-50%的预付款，至网站完工之后，再支付余下部分。 第一秀,D-show,设计,网站建设,艺术,多媒体,软件应用,交流,设计论坛,绘画,网站设计,音乐,环境艺术设计,展览设计,情感,下载,程序,

　　以上所述的，是针对企业形象网站而言。还有一种就是资讯网站，这种网站应该如何收费呢？首先这类站点的内容通常都是由发布系统生成的。其次这类站点在设计上的重点不是创意，而是布局的合理性。所以，这种类型的站点，适宜在总体上评估费用，而不应该单纯的按照页面数来计算。网页设计行业价格标准内，应该对资讯网站划分等级，并提供参考网站。

　　阐述了这么多，观点上很明确，第一就是注重创意的收费，第二就是以整体作为考虑。这些，完全是观念上的突破。但要明白一点的是，我现在所阐述的并不是网页设计行业价格标准，因为标准不是一个人制定的，我现在所做的，只是提供一种思路，提供一种思维方式，希望以后在探讨或制定标准的时候，能脱离思维的框框，突破传统。
　　从现状来看，网页设计行业价格标准还处于探讨和观望状态。这是一个痛苦的现状，就像一个病人需要紧急救治而却欠缺资金一样。从论坛上的讨论来看，很多人的观点都是支持制定网页设计行业价格标准的，但是却又抱着怀疑心态。因为网页设计行业价格标准制定容易，实施起来并不简单，甚至可以说是困难重重。首先这标准得具备权威性，于是不少人提出成立网页设计协会，塑造这个协会的权威性和中立性，作为第三方来进行监督和协调。个人认为，这是可行的，必需的，任何一个行业都有或者都需要有这样一个机构。有人说现在协会泛滥成灾。但我要说："协会"只是一个名称，真正实用与否只在于它是否是一个合理的机构。于是，又涉及了一个由谁来成立网页设计协会的问题，这就需要有人或实体公司出来牵头了，牵头的人，必须有自我牺牲的精神，因为，这个协会不是以营利为目的。其次，网页设计行业价格标准要走过一段漫长的路，才可以被广泛接受。不少公司或个人，为了短期的利益，而喜欢我行我素。所以，必须借助"市场竞争"的力量，在残酷的市场竞争中，在恶性的竞争中，客户和设计师都会吃尽苦头，而网页设计行业价格标准的作用和影响力就会渐渐加强。

　　事物的演变总有一个过程。即使发展如蜗牛移动般缓慢，但始终需要踏出第一步才叫发展。与其临渊羡鱼，不如退而结网。所以即使网页设计行业价格标准实施很困难，成立网页设计协会不太现实，但是，只要有所行动，一切就会逐渐变成现实。


　　我们要做思想上的巨人，更要做行动上的巨人。此文的构思并不成熟，但抛了砖，希望能引出玉，期望更多人参与讨论，更多人牵头去做。
]]> http://www.chichuang.com/Blog/article.asp?id=45 <![CDATA[影响 ActiveX 内容的 IE6 升级包]]> your@email.com(二狗他爹) Thu,18 May 2006 17:10:13 +0800 http://www.chichuang.com/Blog/default.asp?id=45 在Windows Update -> 可选升级包中可以找到(KB912945).
直接受影响的ActiveX内容如下:



Adobe Reader
Apple QuickTime Player
Macromedia Flash
Microsoft Windows Media Player
Real Networks RealPlayer
Sun Java Virtual Machine

安装了此升级包后,网页上的 Flash 动画仍然正常播放.
只是当你把鼠标光标移动到 Flash 内容上时,会看到多了边框并提示激活.如下图:


也就是说不会影响动画播放,但如果你的影片需要和用户进行交互.
例如Flash按钮,菜单,Banner之类的东东,那就需要先激活再使用(也就是多点一下)
怎样解决这个问题,前面已经介绍了.(M$这一动不知道要让多少人跟着忙乎)
今天顺道把我 Blog 上的Flash嵌入方式都更新了,再不会受任何影响.
(到本文截至日期,国内各大门户还未更新他们的ActiveX内容嵌入方式)




]]> http://www.chichuang.com/Blog/article.asp?id=44 <![CDATA[Div+CSS布局入门教程(五)]]> your@email.com(Moonight) Thu,18 May 2006 14:21:19 +0800 http://www.chichuang.com/Blog/default.asp?id=44
　　这一节里面，主要就是想告诉大家如何使用好border和clear这两个属性。

　　首先，如果你曾用过table制作网页，你就应该知道，如果要在表格中绘制一条虚线该如何做，那需要制作一个很小的图片来填充，其实我们还有更简单的办法，只要在<td></td>中加入这么一段就可以了，你可以试试：
　　<div style="border-bottom:1px dashed #ccc"></div>

　　大家可以再次参考手册，然后你就能明白dashed、solid、dotted...等的作用，利用它们你可以制作出许多效果来，实线、虚线、双线、阴影线等等。
程序代码
<div id="banner"></div>
　　以上代码便可以实现设计草图中的banner，在css.css中加入以下样式：
程序代码
#banner {
background:url(banner.jpg) 0 30px no-repeat; /*加入背景图片*/
width:730px; /*设定层的宽度*/
margin:auto; /*层居中*/
height:240px; /*设定高度*/
border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/
clear:both /*清除浮动*/
}　　

通过border很容易就绘制出一条实线了，并且减少了图片下载所占用的网络资源，使得页面载入速度变得更快。

　　另一个要说明的就是clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加clear:both是由于之前的ul、li元素设置了浮动，如果不清除则会影响banner层位置的设定。
程序代码
<div id="pagebody"><!--页面主体-->
<div id="sidebar"><!--侧边栏-->
</div>
<div id="mainbody"><!--主体内容-->
</div>
</div>
　　以上是页面主体部分，我们在css.css中添加以下样式：
程序代码
#pagebody {
width:730px; /*设定宽度*/
margin:8px auto; /*居中*/
}
#sidebar {
width:160px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:left; /*浮动居左*/
clear:left; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
}
#mainbody {
width:570px;
text-align:left;
float:right; /*浮动居右*/
clear:right; /*不允许右侧存在浮动*/
overflow:hidden
}　　

    为了可以查看到效果，建议在#sidebar和#mainbody中加入以下代码，预览完成后可以删除这段代码：
    程序代码
border:1px solid #E00;
height:200px　　
    
    保存预览效果，可以发现这两个层完美的浮动，在达到了我们布局的要求，而两个层的实际宽度应该160+2(border)+570+2=734px，已经超出了父层的宽度，由于clear的原因，这两个层才不会出现错位的情况，这样可以使我们布局的页面不会因为内容太长（例如图片）而导致错位。



　　而之后添加的overflow:hidden则可以使内容太长（例如图片）的部份自动被隐藏。通常我们会看到一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加overflow:hidden就可以解决这个问题。

　　CSS中每一个属性运用得当，就可以解决许多问题，或许它们与你在布局的页并没有太大的关系，但是你必须知道这些属性的作用，在遇到难题的时候，可以尝试使用这些属性去解决问题。

相关源码及构思图下载：（源码和构思图由 番茄红了<番茄's Blog>提供）

构思图：下载文件 点击下载此文件

HTML和CSS源码：下载文件 点击下载此文件

]]>