CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。应用应用DIV+CSS编码时很容易犯一些错误。本文列举了一些常见的错误:
1. 检查HTML元素是否有拼写错误、是否忘记结束标记
即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。
2. 检查CSS是否正确
检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。
3. 确定错误发生的位置
如果错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。
4. 利用border属性确定出错元素的布局特性
使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。
5. float元素的父元素不能指定clear属性
MacIE下如果对float的元素的父元素使用clear属性,周围的float元素布局就会混乱。这是MacIE的著名的bug,倘若不知道就会走弯路。
6. float元素务必指定width属性
很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。
另外指定元素时尽量使用em而不是px做单位。
7. float元素不能指定margin和padding等属性
IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定特别的值。
8. float元素的宽度之和要小于100%
如果float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。
9. 是否重设了默认的样式?
某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。
10. 是否忘记了写DTD?
如果无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头。
一个网站我指的是商业性网站他必然代表的是一种商业模式。用苏格拉底和马克思共同的发展观来看不会有完全一样环境和方法。但规律是一定有的,所以我相信经验直接的和间接的。
网站策划
一个网站即一个商业模式,是需要策划者对其特有的环境掌握相当的信息后才看做出的判断。我觉得网络策划这个职业需要认真研究。要看是怎么定义的?比如我们把网络策划认为是一个大的泛概念其下就会分解出若干个小的“学科”如ue,ui,framwork,promotion,等等。网络策划起码应该分两个大部分,就是线上产品策划和线下运营策划二者需要相互配合。期间产品是运营的工具,运营是产品的目的。
不同网站的策划有其共同点也有其大不同点,因为两个网站之间存在软硬环境的诸多不同。所以没有放之四海而皆准的真理。需要我们具体问题具体分析。在我个人的概念中策划有方法但对所有操作项目所处的各种环境的掌握有时候比这种方法能力更为重要。世界上最好的房地产策划让其担任一个网络策划。我个人是短期不看好的。也许当他对所有背景知识和环境掌握后他会很出色。而这个时候他也就是一个真正的网络策划了。所以策划在有方法的基础上是分行业的。隔行如隔山。即便同时网络策划行业门户的策划和综合门户的策划不一样。企业网站的策划和商业网站的策划也不一样。所以你不要说你懂得网络策划。你只能说我懂网络策划中的某一部分。
网站的价值理念
通常做网站是有一个价值理念在里边的。比如有人做站开始就是为了出售,有的为了圈钱,套现甚至洗钱,也有只为现金流,还有为流量转换刷排名,而有的是爱好没有商业目,当然有像马云做的开始就立志要做一个伟大的互联网公司,所以在做之前问问自己自己网站的价值理念在哪里,这个价值理念适合不适合你来做,能达到这样的预期值吗?
网站的建设一定要以价值为核心和导向,而不是盈利,盈利不是目的而是结果。平台要能圈住市场聚合用户,这才是盈利的基础,是前提和条件。你能圈住一个市场能聚合市场中的用户并形成品牌,人气和内容,此条件下不盈利都很难。网站的核心价值理念就应该是为用户提供具有工具化特点的服务。从用户使用价值和市场营销的角度来进行产品设计,产品就会变成一个促销工具。事实上很多产品有这样的作用,只是大家没有注意到而已。
网站的价值导向应该分为两种,一种是内在的不变的即为用户提供有价值的服务。而外在的应该分为若干个阶段,不同时期对于用户,平台的价值是不一样的。不同阶段的建设重点和传达给用户的信息也是不一样,这需要随着网站功能定位和产品的变化而变化。
初创期以流量,知名度,聚合力等为网站的建设指标,这也是初期网站的一个价值导向。当市场形成,平台盈利能力建设完毕,那么此阶段的价值导向就合适商业转型转型。也就是网站的功能定位发生了变化。到此应该是大部分公司的一个最终目标。
多谈两句:如果再放大,在商业运作非常成功后,网站也就是这个企业就有了对社会,对员工对行业的责任。要回报社会,要对员工的生活,家庭和养老担负责任,要对所处的行业做出积极的有开创性的贡献。再后期就是一种商业文化,一种精神象征甚至会被写进民族性格和民族文化范畴。当然要达到这样的水平可能要基业百年。
网站定位:
关于网站定位相信一直迷惑了不少策划人创业者和大小站长。这里我的观点认为定位非常重要。他是在你要迷失方向时的指路明灯。他可以修正你在指向过程的偏差和失误。所以定位非常重要。但是如果你最初的定位就是错的呢?他也有可能将你拖进一个没有出口的迷宫。
首先定位是一定要有的,二定位有两个基本分类,其三定位是要坚持的,其四定位是必须变化的
核心提示:
一般来说,以感性为主的网站多为生产类型的企业,而感性诉求为主的网站多为服务类型的企业,当然这种分类方法并不是绝对的,有时,作为生产型的企业,其网站可能是服务型的,也有可能是综合型的,也有可能一个网站在不同时期选择不同类型的网站,在诉求风格上也就不一样。但不管是什么类型,还是那句话,一切为营销服务,这样,网站才能发挥其真正的价值。
定位您的网站,首先要明确定位营销网站的诉求风格,一般来说,网站在诉求风格上有理性诉求和感性诉求及综合型三种,任何营销性的网站都面临这样一个选择:你应该将“诉求”和沟通策略建立在一种由不容置疑的证据所支持的主张上呢,还是应该建立一种被顾客“感觉”良好的情感诉求呢?一般来说,理性诉求强调理论及逻辑性,以事实为基础,以介绍性文字为主;感性诉求则强调直觉,以价值为基础,以形象塑造为主。
强调理性诉求的网站以事实为依据,以产品或技术为核心,通过产品或技术,突出企业特点,进行营销活动,着力点在产品或技术的视觉冲击力和吸引力。这种类型的网站往往在对产品或技术方面不惜笔墨,以理性诉求确立其营销地位,力求在顾客心中营造一种技术领先的氛围,从而产生对企业的信任感。显然,这类站点在设计方面相对要求不高,但一定要在技术、产品的宣传、展示以及应用和对实际的具体作用等方面下力气渲染,并在风格上一定要保持一致,最好与企业的CI形象一致,以保持企业在消费者网上、网下形象的连续形象,从而树立巩固的地位。
强调感性诉求的网站多以树立企业形象为主,以服务为导向。这里的服务有两方面含义,一是本身企业提供的就是服务,如服务行业;二是企业的售前、售后服务。通过服务提升企业在客户心中的地位,从而促进营销,这一类型则一定要注重网站的风格设计和创意,以感性诉求为主,着意渲染或营造一种特有的企业氛围,着意体现一种网站或产品及服务的价值感,决不能平铺直叙,更不能只是将传统的服务搬到网上来,我看目前绝大多数网站就是这样,我们提供什么什么服务,欢迎与我们联系,等等,试想,互联网只是一个虚拟的环境,您没有给浏览者营造一种可信的氛围,人家凭什么相信你的服务呢?现实中企业的信誉在网上一样有效。你可能找不出自己真正具有实力的地方,不要紧,我们可以通过网站建设,回过头来审视一下自己的公司、企业,重新为企业塑造一个新的形象定位,并在以后的运营中下力气加强建设,从而在行业中独树一帜,力求在顾客心中营造一种崭新的形象,并产生信任感。请您仔细考虑一下:互联网上成百上千的同行业网站,顾客为什么购买或使用你的产品或服务,而没有选择竞争者的产品或服务?市场经济是竞争性的。你必须为人们选择你的品牌而不是他人的品牌创造理由。因此,一方面,要加强特殊氛围的营造,在感性诉求上下功夫,消除企业与顾客在时间与空间上的距离,建立客户忠诚度,增加客户价值,通过拓展、建立、保持并强化客户关系使自身效益最大化 ;另一方面,好好设计你的网站,独特的设计能够营造一种独特的企业文化——互联网企业文化,也许这与传统营销风格不符,不要紧,不要太过于依赖传统营销!
综合类型也比较常见,就是将上面而二者结合起来,因为对于同一种产品,不同的人可能基于不同的决定——有时产品本身的特性可以决定你是理性的还是感性的。因此,在网站的氛围营造上就要注意分辨:如果某一方面不能充分说明产品或服务的特性,就要将二者结合起来,在不同的部分分别进行理性和感性的诉求,借以打动不同类型的顾客,既以大量的事实突出企业的技术优势,又营造一种感性的氛围,强调产品或服务给人带来的价值,通过二者的结合,共同营造企业独特的氛围。
一般来说,以感性为主的网站多为生产类型的企业,而感性诉求为主的网站多为服务类型的企业,当然这种分类方法并不是绝对的,有时,作为生产型的企业,其网站可能是服务型的,也有可能是综合型的,也有可能一个网站在不同时期选择不同类型的网站,在诉求风格上也就不一样。但不管是什么类型,还是那句话,一切为营销服务,这样,网站才能发挥其真正的价值。
建立一个行之有效的营销性的网站决不能马马虎虎,草率行事,随便准备点资料,找一些象征性的图片,一揽子塞给专业公司,过个不长时间网站就OK了,这是绝对的错误!也许您得知同行企业已纷纷建网,并取得了一定的收效;也许您是被网络公司业务员再三的劝告,才准备投资建立网站,提醒您注意,必须在一开始就明确:您能够利用网站做什么?通过网站,您能够为访问者或顾客提供什么,或者说你给消费者带来了什么利益?然后在问问自己能够从中获得什么利益?
这里,提醒您注意的一点是,文字资料最好找专人负责整理,最好是熟悉市场营销并有一定文字组织能力的人,他们能够站在企业、市场和消费者的多角度考虑文字的组织方式。我的工作体会是企业在提供资料时常常是基于企业宣传手册、彩页、各种报告、技术资料,我想说的是,这些资料往往技术性太强或一味地站在企业角度:我有多么悠久的历史、技术先进、荣誉称号,但缺乏站在客户角度考虑问题。当然,这些都是很好的资料,但建议您最好找专人整理一下。
下面将网站具有共性的功能展示给大家,您可以根据需要,选择适合自己的方式组织资料。
1、发布信息
组建企业营销网站,可以把企业信息和产品信息推到网上,以获取更多的贸易机会和市场竞争力,这是企业走近电子商务的第一步。您在筹集资料及以后的维护中要注意,这是一个增加企业营销渠道的方式。 您可以利用Internet最省钱、最有效地向外界提供企业的相关信息,以服务顾客。通过Internet,及时提供企业的最新消息,如新产品开发、股票价格、经营情形等。您还可以将Internet作为销售辅助工具,随时随地给处于第一线的销售人员提供各种即时性的企业信息,以支援销售活动并与销售人员随时保持沟通联系,降低市场失误,避免市场损失。
另外,在收集企业信息时要确定您的目标访问者,要清楚别人访问您的站点的理由,也就是要考虑这些目标访问者的需求问题,只有有针对性地提供网站信息内容,才能更好地吸引访问者。如果访问者关心售后服务甚于产品价格时,网站上就应该更多强调售后服务的内容。
2、树立企业形象,展示或提高企业的竞争力
Internet最初始层面的作用就是展示企业形象,就象利用各种传统媒体发布的企业形象宣传广告,所不同的是费用低廉、有效时间长、速度快、更新便捷,仔细考虑您的竞争优势在哪里,如企业是否获得过什么奖励、产品的突出优点、客户服务的优势等等,认真对待这项工作,多准备一些相关的资料,并且要了解为什么访问者会到您的站点来而不是去您的竞争者的站点,此时,应该对竞争者的站点进行比较细致的分析,看看他们都提供了一些什么样的内容,针对的访问对象和我们有什么不同等等,通过这样的分析,就能更加清楚自己的优点和不足,从而做到扬长避短。实际上,对竞争者站点的分析应该贯穿整个企业站点的建设过程之中,通过全面的分析从而吸取他们的优点,避免他们的短处。因此,仅考虑“我的品牌与竞争者的差异”已不再足够,还必须问一问自己:“我的网站与竞争者有那些差异?”努力收集本企业的相关资料,将之投放到互联网,于无形中塑造企业形象,提高企业知名度,一定能为您赢得更多的客户和潜在客户。
3、加强客户服务
客户服务的重要性已经为众多企业认识到,目前市场竞争的激烈性导致产品的差异迅速缩小,既而售前、售后服务的个性化日益突出,各大企业都在着力加强这方面的宣传力度,网站是一个交互性极强、反应迅速的媒体,通过网站搜集消费者的信息及反馈,有助于加强客户服务的质量,从而为企业赢得更多的客户,创造更多的效益。如果您的企业侧重服务,或许,您应该根据自己企业的特点为自己的服务定义一种网络营销风格,并在网站建设中努力营造这种风格,而且,如果您确实能够做到保障客户的利益,好好整理一下这方面的资料,将各种措施展示出来,它会给顾客在互联网这个虚拟的空间留下一个好印象。
4、展示产品或技术优势
在目前竞争激烈的市场中,除非一个大型公司具有技术垄断或产品生产优势,一般的中、小型公司可能很难挖掘这方面的优势,不要紧,互联网最大的特点就是她的开放性和跨地域性,开放性决定了互联网信息的共享,这一特点为中小企业赢得了与大企业相抗衡的可能性:通过互联网的信息资源共享,中小企业可以获得对现代企业至关重要而又以常规方式无力收集的市场信息;跨地域性使企业营销突破了传统市场的地域限制,企业的发展方向和市场规模,因此,“互联网使中小企业得以与大企业在同一起跑线上竞技”。
5、推销新产品
Internet是与顾客沟通的重要工具,同时也是推销新产品的重要渠道。通过Internet可以从各方面介绍被推销的新产品。测试新产品市场反应,并得到即时的反馈。在商业活动中一张照片可以胜过千言万语,可以通过提供企业照片、声音及图片档案等多媒体信息来服务顾客。
6、提高工作提高效率
互联网最大的优势就是可以一天24小时为您和您的客户服务,我们在工作工作过程中,经常会遇到客户提出的各种问题,而其中,有很多是重复的,因此,您可以将客户最常关心的问题在网站上汇总,并给出答案,也就是我们常说的FAQ,而不必再为重复答复这些问题而苦恼, 从而使您的工作更具效率。
7、增进与客户的沟通
客户对公司产品的意见,对公司的建议,您可以即时得到并迅速反应,然后通过网站再反馈给客户。这是公司与客户交流的桥梁。准备一些日常需要客户填写信息的表格,将它变成电子表格并发布到网上,并通过一些列促销活动,收集大量客户信息,组建自己的潜在客户信息库,并在网上或网下追踪,一定会挖掘出许多新客户。
8、为消费者服务
“先付出,再索取”,这是网络行销的一个很实用的方法,面对不计其数的企业网站,如果你不为消费者提供任何利益,消费者是不会想到你的。这就是为什么我在本文开始强调“为顾客带来什么利益”的原因,准备一切有利于消费者的资料,筹划各种有利于消费者的活动,通过网站进行宣传,同时配合网下运作,比如:可以在网站发布后配合网下举行促销活动,或为注册用户提供礼品,总之,记住,多为你的客户或消费者提供好处。
9、刺激需求
什么是“刺激需求”?简单地说就是面对社会财富极大丰富的当今社会,存在着庞大的潜在需求,但顾客往往意识不到自己的需求是什么,而是在对各种商品信息的浏览过程中,潜在需求被以某种形式激发,再形成消费。现代广告及市场营销的一大课题也是如何激发、释放这种潜在需求。在网站营销方面,我们一样可以利用网络的优势,其中的关键是在相关信息资源的资料方面多下功夫,给浏览者一个增进各方面相关知识的空间,并合理地将产品信息结合在其它信息之中,从而巧妙地刺激浏览者的潜在需求。
核心提示:
我们(特别是像我一样的菜鸟)经常会遇到一个问题——图片自适应。这个问题是很普遍的。在文章区,在论坛,可以这么说:哪儿需要上传图片,哪儿就存在这个问题,而论坛上也不时有人询问。为什么?原因很简单,我们不能要求网页编辑或者你的论坛会员都会裁剪图片或者了解最基本的html代码——尽管这并没有多少技术含量。
前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft(没有它就不必有这么啰嗦的代码了^_^)。本人仅在ie6.0,ff1.5,opera7.0于winXP下测试通过,希望通过此篇文章抛砖引玉,望更多高手指点。关键在于:max-width:780px;以及下面那行。
固定像素适应:
<!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>css2.0 VS ie</title>
<style type="text/css">
<!--
body {
font-size: 12px;
text-align: center;
margin: 0px;
padding: 0px;
}
#pic{
margin:0 auto;
width:800px;
padding:0;
border:1px solid #333;
}
#pic img{
max-width:780px;
myimg:expression(onload=function(){
this.style.width=(this.offsetWidth > 780)?"780px":"auto"}
);
border:1px dashed #000;
}
-->
</style>
</head>
<body>
<div id="pic">
<img src="http://desk.blueidea.com/DESK/NX100/koreaad_10/koreaad_10020.JPG" alt="感谢blueidea被我盗链图片!"/><br/>
<img src="http://www.blueidea.com/img/common/logo.gif
" alt="感谢blueidea被我盗链图片!"/>
</div>
</body>
</html>
百分比适应:
<!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>css2.0 VS ie</title>
<style type="text/css">
<!--
body {
font-size: 12px;
text-align: center;
margin: 0;
padding: 0;
}
#pic{
margin:0 auto;
width:90%;
padding:0;
border:1px solid #333;
}
#pic img{
max-width:80%;
mywidth:expression(onload=function(){
this.style.width=(this.offsetWidth >document.getElementById("pic").scrollWidth*8/10)? "80%": "auto" });
border:1px dashed #000;
}
-->
</style>
</head>
<body>
<div id="pic">
<h3>缩放窗口大小试试</h3>
<img src="http://desk.blueidea.com/DESK/NX100/koreaad_10/koreaad_10020.JPG" alt="感谢blueidea被我盗链图片!"/>
<img src="http://www.blueidea.com/img/common/logo.gif
" alt="感谢blueidea被我盗链图片!"/> </div>
</body>
</html>