各浏览器Cookie大小、个数限制

一、浏览器允许每个域名所包含的cookie数:

  Microsoft指出InternetExplorer8增加cookie限制为每个域名50个,但IE7似乎也允许每个域名50个cookie。

  Firefox每个域名cookie限制为50个。

  Opera每个域名cookie限制为30个。

  Safari/WebKit貌似没有cookie限制。但是如果cookie很多,则会使header大小超过服务器的处理的限制,会导致错误发生。

  注:“每个域名cookie限制为20个”将不再正确!

二、当很多的cookie被设置,浏览器如何去响应。

  除Safari(可以设置全部cookie,不管数量多少),有两个方法:

  最少最近使用(leastrecentlyused(LRU))的方法:当Cookie已达到限额,自动踢除最老的Cookie,以使给最新的Cookie一些空间。InternetExplorer和Opera使用此方法。

  Firefox很独特:虽然最后的设置的Cookie始终保留,但似乎随机决定哪些cookie被保留。似乎没有任何计划(建议:在Firefox中不要超过Cookie限制)。

三、不同浏览器间cookie总大小也不同:

  Firefox和Safari允许cookie多达4097个字节,包括名(name)、值(value)和等号。

  Opera允许cookie多达4096个字节,包括:名(name)、值(value)和等号。

  InternetExplorer允许cookie多达4095个字节,包括:名(name)、值(value)和等号。

注:多字节字符计算为两个字节。在所有浏览器中,任何cookie大小超过限制都被忽略,且永远不会被设置。

剖析CSS FLOAT

什么是浮动?

浮动是 css 的定位属性。我们可以看一下印刷设计来了解它的起源和作用。印刷布局中,文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。
这是一个例子:

print-layout

在排版软件里面,存放文字的盒子可以被设置为允许图文混排,或者无视它。无视图文混排将会允许文字出现在图片的上面,就像它甚至不会在那里一样。这就是图片是否是页面流的一部分的区别。网页设计与此非常类似。

web-text-wrap

在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了,就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会影响其它元素,其它元素也不会影响它,无论它是否和其它元素挨着。

像这样在一个元素上用CSS设置浮动:

#sidebar { float: right; }

fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的) 使元素不浮动,Inherit 将会从父级元素获取float值。

浮动的用处

除了简单的在图片周围包围文字,浮动可用于创建全部网页布局。

web-layout

浮动对小型的布局同样有用。例如页面中的这个小区域。如果我们在我们的小头像图片上使用浮动,当调整图片大小的时候,盒子里面的文字也将自动调整位置:

reflow-example

同样的布局可以通过在外容器使用相对定位,然后在头像上使用绝对定位来实现。这种方式中,文本不会受头像图片大小的影响,不会随头像图片的大小而有相应变化。

reflow-example

清除浮动

清除(clear)是浮动(float)的相关属性.一个设置了清除浮动的元素不会如浮动所设置的一样,向上移动到浮动元素的边界,而是会忽视浮动向下移动。如下,一图顶千言。

uncleardfooter

上例中,侧栏向右浮动,并且短于主内容区域。页脚(footer)于是按浮动所要求的向上跳到了可能的空间。要解决这个问题,可以在页脚(footer)上清除浮动,以使页脚(footer)待在浮动元素的下面。

#footer { clear: both; }

cleardfooter

清除(clear)也有4个可能值。最常用的是 both,清楚左右两边的浮动。left 和 right 只能清楚一个方向的浮动。none 是默认值,只在需要移除已指定的清除值时用到。inherit 应该时第五个值,不过很奇怪的是 IE 不支持(这个不奇怪吧,IE 从来都这么特立独行吧 -糖伴西红柿注)。只清除左边或右边的浮动,实际中很少见,不过绝对有他们的用处。

directionalclearing

伟大的塌陷

使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素,那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景,这个问题会很难被注意到,但是这是一个很重要的问题。

collapse

塌陷的直观对立面更不好,看看下面的情况:

whywecollapse

当上面的块级元素自动扩展以适应浮动元素时,段落间的文本流中会出现非自然的空白换行,而且没有有效的方法来修正这个问题。对于这种情况,设计师的抱怨会更甚于对塌陷的抱怨(没理解,不是设计完成之后才会进行页面编码吗?- 糖伴西红柿)。

为了防止怪异的布局和跨浏览器的问题,塌陷问题几乎总是被要处理的。我们在容器中的浮动元素之后,容器结束之前来清除浮动。

清除浮动的技术

如果你很明确的知道接下来的元素会是什么,可以使用 clear:both; 来清除浮动。这个方法很不错,它不需要 hack,不添加额外的元素也使得它有良好的语义性。当然事情并不是都可以这样解决的,工具箱中还是需要另外几个清除浮动的工具。

  • 空div方法从字面来看,是一个空的 div。
    。有时可能会用
    或者一些其他元素,但是 div 是最常用的,因为它没有浏览器默认样式;没有特殊功能,而且一般不会被 css 样式化。这个方法因为只是为了表现,对页面没有上下文涵义而被纯语义论者嘲笑。诚然,从严格的角度来说他们是对的,但是这个方法有效而且没有任何伤害。
  • overflow 方法在父元素上设置 overflow 这个 css 属性。如果父元素的这个属性设置为 auto 或者 hidden,父元素就会扩展以包含浮动。这个方法有着较好的语义性,因为他不需要额外元素。但是,如果需要增加一个新的 div 来使用这个方法,其实就和空 div 方法一样没有语义了。而且要记住,overflow 属性不是为了清除浮动而定义的。要小心不要覆盖住内容或者触发了不需要的滚动条。
  • 简单清除方法使用了一个聪明的 css 伪选择符(:after)来清除浮动。比起在父元素上设置 overflow,只需要给它增加一个额外的类似于”clearfix”的类。这个类使用如下 css:
    			.clearfix:after {
       				content: ".";
       				visibility: hidden;
       				display: block;
       				height: 0;
       				clear: both;
    			}

    这会在清除浮动的父元素之后应用一点看不见的内容。这不是全部内容,还需要一些额外的代码来适应那些老旧的浏览器。

不同的情况需要不同的浮动清除方法。以一个具有不同样式块的网格为例。

为了从视觉上较好的把相似的块联系起来,需要在必要的地方开启新行,这里是颜色改变的地方。如果每个颜色组都有一个父元素的话,我们可以使用 overflow 或者 简单清除方法。或者,在每组之间用一个空div方法。额外的 div 之前并不存在,可以自己试试来看看哪个方法好。

浮动的问题

浮动因脆弱而饱受诟病。大多数的脆弱性来自于 IE6 及其一系列的浮动相关 bug。因为越来越多的设计师不再支持 IE6 了,你也可以不关注它了。不过对于那些要关注的人来说,这里有些大概。

  • 推倒是浮动元素内的元素(大多是图片)比浮动元素本身宽造成的现象。大多数的浏览器会在浮动之外渲染图片,但是不会有伸出来的部分影响其他布局。IE 会扩展浮动来包含图片,精彩大幅度地影响布局。一个普遍的例子是突破伸出主内容之外把侧栏推到下面。快速修正:确保不是图片造成这种情况,使用 overflow:hidden 来切除多余的部分。
  • 双倍边距bug处理 IE6 时,另一个需要记住的事情是,如果在和浮动方向相同的方向上设置外边距(margin),会引发双倍边距。快速修正:给浮动设置 display:inline; 而且不用担心,它依然是块级元素。
  • 3像素间距是指挨着浮动元素的文本会神奇的被踢出去3像素,好像浮动元素的周围有一个奇怪的力场一样。快速修正:在受影响的文本上设置宽度或高度。
  • IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉。快速修正:用父元素的底内补白(padding)代替。

替代品

如果需要文本环绕图片,除了 float 之外还真没多少替代品。说到这,可以看看这个使文本围绕不规则形状的聪明技术。对于页面布局,肯定有很多选择。Eric Sol 在 A List Apart 上有一篇文章人造绝对定位,介绍了一个很有意思的技术,它在很多方面把浮动的扩展性和绝对定位的实力结合起来。CSS3 有Template Layout Module,当它被广泛支持时,将会是一个页面布局技术的选择。

视频

作者还贴心地做了一个视频来解释相应的概念。

Web前端开发必备Cheat sheet下载

Cheat sheet这个词组如果直译成中文,意思大概是”作弊小抄”之类的词,但Cheat sheet这个词的实际意思已经并非是贬义了,虽然中文还没有实际的对应词能够很好的翻译”Cheat sheet”,但大致意思就是用于参考的简洁手册,就像是考试作弊时将必备的数学公式等写在一张纸上,以便考试时查询。

Web2.0体验式网站设计的41个关键点

Web2.0时代,体验式营销,体验式网站设计开始走向主流,那么体验式网站到底意味着什么?具体表现在那些地方?周末,根据建站的一点经验和观察,也参照了网友的一些建议,总结了体验式网站设计的四个方面,41个关键体验点,将其梳理概况,但仍是较为粗浅,欢迎补充建议。
一、体验式网站设计的四个方面
1、视觉体验:呈现给用户视觉上的体验,重在UI设计,强调舒适性。
2、浏览体验:呈现给用户栏目和内容的体验,重在合理规划,强调协调性。
3、信任体验:呈现给用户的信任体验,重在细节斟酌,强调稳定性。
4、互动体验:呈现给用户操作上的体验,重在路径设计,强调易用性。
二、视觉体验的11个关键体验点
视觉体验:呈现给用户视觉上的体验,重在UI设计,强调舒适性。
1. 整体风格:这是网站给用户呈现的第一印象,主要体现在两方面,一是网站质量的权衡,网民第一次看到网站后,首先会根据感觉对网站有个上、中、下额评判,二是网站类型的归属,例如是资讯型,形象型等。因而网站在设计之前,必须明确目标客户群体,并针对目标客户的审美喜好,进行分析,网站设计要符合目标客户的审美预期和类型归属。
2. 网站LOGO:LOGO的设计水平直接体现了站长的审美水平。并且logo是网站整个风格的主导,也是网站对外传播的形象标示,务必要仔细斟酌,不仅要简洁得体,还要符合网站的定位和目标。
3. 页面布局:重点突出,主次分明,图文并茂,声画全面。网站的有效空间是有限的,网站的第一屏画面至关重要,页面布局要与网站的营销目标相结合,将最能吸引用户的内容,通过合适的表现形式,放置在最重要的位置。
4. 页面色彩:六个务必:网站务必要有个主题色,务必注意冷暖色调的搭配,务必注意主色调、辅助色的使用数量,务必保持网站整体形象相统一,务必注意渐变色的使用,务必恰当搭配色彩的明度和亮度。
5. 页面大小:最好将网站设置成为自适应的页面,如果无法修正,最好调整为1024*768,照顾到800*600用户,页面主要内容可以偏左设置。此外,还有一些异性的网站,务必要考虑到核心用户群的使用习惯,可以主要从年龄上来判断,30岁以上用户,还是800*600居多。
6. 动画效果:首先注意动画的放置位置,其次是呈现方式,再次是加载速度,最后也是最关键的是内容的表现形式。动画效果会在第一时间吸引用户的关注,但关注不是目的,要让用户有兴趣接受动画所传达的内容。在动画表现形式设计时,还要注意与主画面相协调,动画效果节奏适中,不干扰主画面浏览。
8. 图片展示:首要的还是图片栏目的页面位置,要与整体网站比例协调,符合一般用户的浏览习惯;其次是图片的展示形式,现在有很多flash的图片代码,还有lightbox的js也是不错的选择,再次是图片内容要清晰、不变形,图片选择上也要符合网站的总体风格,不要太突兀。
9. 图标使用:首要考虑与页面整体风格统一,其次是简洁、明了、易懂、准确,再次可以尝试使用一些3D效果图标。
10. 广告位的设计:广告设计最关键是要符合用户对网站广告的预期,不要让用户对广告产生反感。有很多是网民早已认可的广告位置和形式,例如页面上方的banner条,页面两边的对联形式,页面右下方的文字广告等,这些位置都是网民们默认的广告位,千万不要冲击网民的浏览习惯,避免干扰视线,除非你的广告创意绝对吸引人,否则结果往往是立刻关闭广告和网站。
11. 背景音乐:除非是活动推广或者是形象推广类主题网站,搞点刺激性的音乐提提神,否则千万不要设置背景音乐,一个字,烦!就算设置背景音乐,最好将开关按钮及音量控制放在显要位置,免的网民因为找不到控制按钮而立刻关掉页面。
 
三、浏览体验的八个关键体验点
浏览体验:呈现给用户浏览上的体验,强调吸引性。
1. 页面导航:网站导航如同楼房的地基,是整个网站基础和框架,一切内容和服务都是从导航中延伸出去。页面导航的设计分为两个层次,一是形式层:体现在导航位置、表现形式(文字、图片、flash等)等方面,二是内容层,页面导航也是对整个网站内容框架的分类和高度概括。形式层的设计,建议参照一下韩国网站的设计风格,动感、简洁、清晰。至于内容层,就因站而异了,分类条理最关键。但栏目名称尽量简短,栏目层次也不宜过多,两层比较合适,但也要以内容为中心。
1.       页面速度:web2.0,网站中增加了越来越多的视频、动画元素,对网站速度的要求也越发苛刻。回想一下,这么多视频分享网站中,为什么很多人选择优酷?就一个速度。此外,大一点的网站再考虑一下南北互通,或者教育网的对接问题,此外选择一家稳定的服务器托管商也至关重要。
2.       页面容量:主要指首页的页面容量,除非是资讯类网站,否则网站首页内容最好不要超过两屏,最好不要让用户再滚动鼠标就可以浏览到整个页面。再就是页面设计要考虑到文字和图片的搭配,还有不同字号、字体、颜色的搭配,还有网站留白的设计,以免页面造成视觉抵制,心理学家做过实验,人眼每秒摄入的有效字符最多只有20个,要是页面全是细密的文字,效果就可想而知了。
3.       页面结构 结构就是放置内容的框架,网站的页面结构其实是有章可循的,尤其是现在大家见的网站越来越多,自然也形成一些列默认的模式。简单分网站主要也包括“同”字型、“司”字型、“三”字型、“F”型等页面布局,具体随后会撰文详述,这里要强调的是页面结构的创新也要基于一定的规律,千万不要打破用户的浏览预期。
4.       内容安排 首先是突出重点内容,大标题,大图片塑造视觉冲击,这也是借用报纸的操作手法,其次是内容协调,每一个栏目应确保足够的信息量,避免栏目无内容情况出现;再次是内容形式,兼顾视频、图片、文字的比例和页面协调。
5.       内容更新主要包括内容来源、更新频率、更新数量、内容质量三个方面。Web2.0网站更多强调如何调动用户的积极性,内容更新已经不仅仅是对编辑的考量,也是对网站用户价值的衡量,对于内容质量,主要是从原创、转载、内容本身价值等方面权衡。
6.       内容形式 现在有个立体化新闻的概念,视频、图片、文字、评论都在一个页面中展示,而且再加上网民评论的即时更新,表现形式更生动。此外,对于文字部分,字体大小最好设置可调选项,对重点内容进行标注,对关键词设置链接(seo),如果没有广告的考虑,最好不要设置多页浏览,很影响阅读体验。
7.       内容呈现方式:更多的是细节的内容,包括新文章的标记、文章导读、相关内容的推荐、还有网友推荐、打印页面、E-MAIL发送给好友、复制网址等,现在web2.0流行的DIG功能,加入些鲜活的互动元素。
8.      路径记录:记录用户的浏览路径,方便用户随时返回和查找,此外对一些重点栏目和页面可以设置快速链接或者设置页面底部导航,为用户提供明确的快速入口。
 
二、信任体验的十二个关键体验点
信任体验:呈现给用户的信任体验,重在细节斟酌,强调稳定性。
1、友情链接:对于新兴网站而言,用户对网站信任的判断不仅建立在对网站设计的和功能体验的基础上,而且还有一个对同类或者其他相关网站的评估上。友情链接的价值不仅在于SEO上,也是一个网站用户定位的重要体现,如果网站链接的都是不知名的小网站,用户对它的评级也不会太高。首页友情链接的设置不宜过多,更多的链接可以放置在一个单独的友情连接页面中,要特别注重友情连接的质量,哪怕是做些单向链接,也要显示自己的实力。
2、底部信息:网站底部信息内容是网站中每个页面都共同的内容,底部信息为网民提供了很多建立信任体验的内容,例如网站的建立时间、是否备案、是否经营性网站、是否有网警标示、隐私声明、网站的归属关系(如:xx旗下的网站)这部分虽然是细节的内容,但又是最为标准化和普遍的内容,最好留心设计。
3、关于我们:这是一个用户了解网站背景的最直接途径,对很多有趣的web2.0网站,对于很多喜欢刨根问底的网民,关于我们还是很重要的一个栏目,因为这是网站站长必须的一个原创内容,对关于我们栏目和内容的设计和安排,往往会体现了站长的做事态度和风格。
4、联系方式:并不是有事找网站的时候才会关注网站的联系方式,一般情况下,联系方式在网站中出现的频率也是网站自信程度的一种侧面体现。联系方式不一定非要是详细的电话传真,通讯地址,哪怕一个邮箱,或者是一个联系人的姓名。对于初创网站而言,翔实或者高曝光率的联系方式,比较容易给网民建立踏实、信任的额感觉,总之放心、负责、能找到人。如果有实力,整个400电话也成,现在400电话已经是白菜价了,但公信力还不错,而且方便易记。
5、帮助中心:对于web2.0新兴网站,尤其是功能型网站而言,最好是有一个翔实的帮助中心,或者FAQ栏目,千万别相当然的认为网民对新东西一看就会,新东西总会有出问题的时候,再加上国内网民的背景和层次差距较大,帮助中心还是必须的。此外,帮助中心的功能和内容丰富程度也是网站客户服务意识的一种体现,值得重视。
6、网站备案:最基本也是必须的一道程序,说啥先把网站备案搞定,至少要确认一下网站的合法地位,如果有条件和需要,最好是申请一个B字头的经营性网站备案,此外如果涉及到视频、新闻还要到相关部门申请一下其他备案。备案这东西,看似小事,但关键时刻对网站就会有致命的影响,别的不说,看看这两个月56.com和vodone.com的差别就知道了。
7、内容格式:内容的规范程度也是网站建立信任体验的重要方面,主要体现在资讯类内容标准化展现上。一方面每条信息是否包含了来源、作者、编辑、发布时间、还有点击量和评论。全面的辅助信息是网站质量的主要参照,因为现在能把这几点完全列出来的网站越来越少了,对于点击量也可以都设置一定的初始值,但最好还是带着。另一方面就是个性化细节,例如设置页面颜色、设置字体大小、点击直接发送到邮箱,复制页面地址等。
8、内容订阅:无论是用feedsky、rss、还是传统的邮件新闻列表,内容订阅的设置不仅仅是要提高用户的黏度,推动用户再次访问,而且也是大型网站和正规网站的重要标示,只有那些有实力和细心的网站才会提供定期的资讯服务,其实这部分在功能上已经很完善了,网络中也有很多工具和服务商,只需站长每天(每周)梳理一下重要资讯即可。此外这也是盘活注册用户的重要一环。
9、网站地图:对web2.0的新站,无论网站规模大小,一定要做个网站地图,一方面搜索引擎容易抓取到网站信息,而且网民使用起来也会很快了解到整站架构,又是细节,但很重要。
10、加入收藏:加入收藏和设为首页是传统网站设计中必须的环节,现在而言设为首页的意义几乎没有了,但加入收藏还相当重要的,一般是在网站的右上方,最好将加入收藏的位置放在最前面,用醒目的颜色标注。
11、用户登录:这也算是互动体验一部分,用户导向是web2.0设计的一个核心理念,只有用户登陆才能享有更多的个性化服务,用户登录就无处不在,随处可见,而且还要设计的方便合理,最好不要打开新的登陆页面,具体情况各异。
12、论坛人气:无论网站做的再花哨,如果有论坛这个栏目,打开论坛一看,没几个在线用户,没几条热点内容,很容易直接就把网站否定掉了,因此,论坛千万要注意,要么不做,开设了就得注意人气的经验,哪怕自己每天狂灌水,也得先把网站人气拖起来。
 
 
三、互动体验的十个关键体验点
互动体验:呈现给用户操作上的体验,重在路径设计,强调易用性。
1. 会员申请:会员申请务必要贯穿在网站的每个页面,将随机性用户转变成注册用户是提高网站流量和用户黏度的重要一环,会员申请的按钮或者位置最好设计的醒目一些。此外,会员功能的核心是权限控制,网站必然要有一些只有注册用户或者是高级用户才能浏览到的内容,但还要保证展现给非注册用户的信息也具有一定的吸引力,否则,网民怎么会有动力去注册呢?扪心自问,为什么值得注册?用什么吸引注册用户?用什么稳定注册用户的定期访问?
2 会员注册:web2.0网站最好设计多级注册方式,只填写注册名、邮箱、密码等就可以完成第一层次注册,让后再进一步吸引用户补充内容,第一层主次,务必要流程清晰、简洁,为用户节省时间。其实更为关键的还在于后面,如何吸引用户补充全面的信息?这里就有一个web2.0的理念,“你分享出去的内容越多,得到的权利和尊重也会越多”,要让网民明确他们补充信息的价值在哪?此外,还要注意提示用户信息的完整程度。
3. 表单填写:表单填写有多种方式,但最好不要将所有项目分为两个阶段,必填项在第一页,或者提供明显的标示,千万不要将所有项目全部列出来,用户一定会吓坏的。Web2.0就要人性化一点,考虑一下用户的接受程度,简单一点还是没错的。提交成功后,感谢提示页面务必要精心设计,尤为注意应该将注册后的用户引向何处?是回首页?还是个人界面?还是前一个浏览页面?感谢页面在内容和形式上最好设计的有个性一点。
4. 点击提示:点击浏览过的信息颜色需要显示为不同的颜色,以区分于未阅读内容,避免重复阅读。对于图片,最好设置图片标注,鼠标滚动到图片时能显示图片标题。
5. 错误提示:设置错误提示页面,对错误页面以合适的引导。无论是什么原因,网民只要在网站上遇到了错误页面肯定会非常不爽,甚至会直接关闭网站,要充分考虑到此时用户的访问心理,设置一点真诚的解释说明,最好将网民重新引向网站,或者可以设置个报错的反馈,细心处之。
6. 在线问答:在线问答有太多中形式,从用户的使用预期出发,既然是在线问答,消费者希望得到最快的答复,但现在的情况是,往往网站提供了很多方式的问答渠道,但往往没有人回应,毕竟工作人员不能24小时守候啊,建议搞个小I机器人训练一下,顶个美女客服了。还有一种误区,认为在线问答就是解答问题,其实还有一个重要作用是收集信息,还要设置在线问答流程和话术时,务必要注意到如何了解更多的客户信息,或者使用体会以便于后期调整,还要定期对在线问答出现的问题进行汇总分析。
7. 在线搜索:首先是搜索条位置,最常见的位置是在右上方,资讯类网站一般中上方显要位置;其次是搜索分类,例如按作者,按标题等设置最好设计为下拉菜单,默认为全文检索;再次是搜索结果的呈现方式。呈现方式有很多细节的地方,包括排列的标准,方式,关键词颜色区分,出现的数量。此外还要注意高级检索和检索选项的设计。
8. 页面效果:web2.0在技术层的一大改进就是提供了很多又酷又炫的新技术,尤其是在页面层的应用最为明显,例如ajex,lightbox js等,对建议站长多关注一下流行的java代码,选择一些合适的潮流型技术应用一下,新、奇、炫,与时俱进啊!
9. 新开窗口:现在用maxthon、firefox等的多线程浏览器的网民越来越多,建议web2.0网站的设计最好多采用,新窗口打开,方便用户返回和查找。
 
10. 路径设计:说到体验,最直接的就是用户在网站上产生的有效点击,每一次点击也意味着一个新体验的开始,而在众多点击之间,路径的设计和记录也体现了web2.0个性化服务的精神。每个网民的访问习惯和浏览习惯都有所不同,第一要设计最直接有效的浏览路径;第二要记录网民的浏览路径,便于随时返回;第三,要试图寻找与网民浏览路径的匹配,这一点集中可以体现在亚马逊的图书浏览和购买流程上,大家自己来关注吧。

FLASH AS3网站分辨率自适应

在制作FLASH全站的时候,有一些是必须要掌握的。

舞台放大元件不变形那是必须的。

只要在第一帧加上一句:stage.scaleMode=StageScaleMode.NO_SCALE      即可不变形。
在帮助里可以得到舞台的这个属性更多的解释。 
这时,舞台始终是居中显示的。这对我们定位元件达到自适应是一个麻烦,因为X、Y轴的0坐标并不是在显示的最
左上角,而是在舞台的左上角。而舞台是居中的,所以当元件的X、Y轴为0时,左上角还会空出一些位置。
我们必须让舞台左上角对齐:stage.align=StageAlign.TOP_LEFT  同样,如果想右上角对齐或右下角对齐,可以查
看它的帮助得到更多的信息。
最后把FLASH插入到HTML中,记得宽高都设成100%。 还有HTML的页边距也要设成0。切记!
AS3对舞台的改变有一个侦听事件:Event.RESIZE
当舞台大小发生改变时则触发这个事件。
示例代码: 使A、B、C、D四个矩形的MC使终保持位于浏览器的左上,右上,左下,右下
 
   //不变形处理
   stage.scaleMode=StageScaleMode.NO_SCALE
   //左上角对齐
   stage.align=StageAlign.TOP_LEFT 
  //自定义一个函数来控制四个MC的位置
  function myfunction(){
  //A的位置
    A.x=0
    A.y=0
  //B的位置
   B.x=stage.stageWidth-B.width
   B.y=0
  //C的位置
   C.x=0
   C.y=stage.stageHeight-C.height
   //D的位置
    D.x=stage.stageWidth-D.width
    D.y=stage.stageHeight-D.height
    }
//对舞台的改变进行侦听
stage.addEventListener (Event.RESIZE,test);
function test (e:Event):void {
//舞台改变时,重新设置MC的位置
myfunction ();
}
//设定MC位置
myfunction ()

DIV + CSS 入门

一、什么是DIV+CSS?

“DIV + CSS” 是最新WEB标准的一个典型的应用。

一般来说,网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)等。 结构主要包括例如DIV在内的一系列的HTML(XHTML)标签,表现主要包括CSS(层叠样式表:Cascading Style Sheets), 行为主要包括例如对象模型(如W3C DOM)、ECMAScript等。

在我们日常所说的“利用DIV + CSS开发”概念中,DIV指的是包括DIV在内的一系列HTML(XHTML)标签,这些标签中除了DIV外,还包括例如span,ul等数十个标签元素。CSS即样式表,是对DIV等标签结构的一种描述,例如位置、边框颜色等。

二、为什么使用DIV+CSS?

“利用这种模式开发的站点是符合WEB设计标准的”。但这种标准给我们带来了什么?仅仅是提高开发难度吗?下面的文字是对WEB标准带来的部分好处的描述:

  • 更简易的开发与维护: 使用更具有语义和结构化的 HTML,将让您更加容易、快速的理解他人编写的代码。
  • 与未来浏览器的兼容: 当您使用已定义的标准和规范的代码,那么您这个向后兼容的文本就消除了不能被未来的浏览器识别的后患。
  • 更快的网页下载、读取速度: 更少的 HTML 代码带来的将是更小的文件和更快的下载速度。如今的浏览器当处于标准模式下将比它在向下兼容模式下拥有更快的网页读取速度。
  • 更好的可访问性: 语义化的HTML(结构和表现相分离)将让使用读屏器以及不同的浏览设备的读者都能很容易的看到内容。
  • 更高的搜索引擎排名: 内容和表现的分离使内容成为了一个文本的主体。与语义化的标记结合会提高您在搜索引擎中的排名。
  • 更好的适应性: 一个用语义化标记的文档可以很好的适应于打印和其他的显示设备(像掌上电脑和智能电话),这一切仅仅是通过链接不同的 CSS 文件就可以完成。你同样可以仅仅通过编辑单独的一个文件就完成跨站点般的表现上的转换。

三、“table”一无是处了吗?

当然不会,表格会是它最好的归属,也是它诞生的初衷,只是在对网页元素的定位上取而代之是更擅长的“DIV+CSS”。

细心的人会问,为什么取代table的是div+css,而不是div呢? 是的,从标签上讲,的确是div取代了table,但是按照WEB开发标准,结构和表现是分开的。除了有div这个标签外,我们还需要利用css对这个标签进行描述。

四、实例说明table定位和DIV+CSS定位

说了这么多,难以理解!以常见的左、中、右三个板块布局举例,不用理解每个标签、每个CSS属性的含义,我们这里只是浏览一下用法:

1. 表格定位

<table width=”800″ border=”0″ cellspacing=”0″ cellpadding=”0″>
    <tr>
        <td width=”200″ height=”500″>左</td>
        <td width=”400″>中</td>
        <td width=”200″>右</td>
    </tr>
</table>

2. DIV + CSS
DIV:

<div id=”main”>
    <div id=”left”>左</div>
    <div id=”center”>中</div>
    <div id=”right”>右</div>
</div>

CSS:

<style type=”text/css”>
#main {
    width:800px;
    height:500px;
}
#left {
    width:200px;
    float:left;
}
#center {
    width:400px;
    float:left;
}
#right {
    width:200px;
    float:left;
}
</style>

的确,同样的效果,我们写了更多的代码,但是我们最少能够立刻感受到前面所提到的优点之一:代码更容易读懂了,便于维护了。 例如,我们想要给center板块添加个背景色,我们可以在css中的center中加如下属性:background-color:#FF0000; 一切变得非常容易。

五、用什么工具编辑DIV+CSS?

这里针对的是windows系列开发平台。

Dreamweaver,注意,是在代码模式下。坚持不要看设计模式,而且利用DIV+CSS模式开发的站点很多时候浏览模式下看到的也并不是最终的浏览器显示结果了。

有人反对用Dreamweaver,理由是因为有代码提示功能,有提示,所以不利于对代码的记忆,既然是手写,那就干脆用文本文档。 这点,我是不同意的,一共百十来个代码,我想我们在提示的情况下也能记得吧。而且代码提示功能可以极大的提高手写代码的工作效率,减少代码错误。

还有一款小软件,也是个不错的选择,Editplus,以小而快见长,同样也有代码提示功能。

以上两款软件都是收费的,对于我们习惯用盗版的人来说,这并不是个问题,如果不习惯用盗版的可以使用windows系统自带的文本文档(系统是盗版的?…)。

六、用什么浏览器测试我们的作品?

最低要求:通过IE6.X 和 firefox测试。
因为部分css属性在ie和firefox下有不同的表现。我们在以后的实践中会逐渐发现这样的问题。

七、CSS样式表三种不同的存放位置

1.和DIV混写

<div style=”color:#990000; font-size:20px;”>tripow.com</div>

2.将CSS和页面结构部分写在同一个文档中,例如页面test.htm
test.htm

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>test page</title>
<style type=”text/css”>
.website {
    font-size:30px;
    font-family:”Verdana”, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div>tripow.com</div>
</body>
</html>

3.将结构页面和样式表文档分开写,利用link标签对CSS文档引用,也是最推荐的一种,例如:
页面test.htm

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>test page</title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<div>tripow.com</div>
</body>
</html>

style.css

.website {
    font-size:30px;
    font-family:”Verdana”, Arial, Helvetica, sans-serif;
}

三种不同位置,写法也是有所区别的,大家需要自行看仔细。

八、使用DIV+CSS开发网站

在继续阅读以下部分之前,我们要确定已经将以上部分浏览过两遍以上并且已经稍作休息了。

从前面第四部分的例子可以看出,我们分别写了DIV部分(结构)以及CSS部分(表现),然后通过DIV的ID属性使用到了相对应的CSS样式:<div id=”main”></div>

有过网页制作经验的读者可能还见过这样的应用<div></div>是的,如你所见到的,这里用的是class属性而不是id。

需要注意的是,利用id或class使用css,在定义css时候写法是不一样的。当我们用id属性时,定义的css是以“#”开头加样式表名的。而使用class时候定义的css样式是以“.”开头的。例如:
结构部分:

<div>
    http://www.tripow.com
</div>

CSS部分:

.siteadd {
    width:400px;
    height:30px;
    line-height:30px;
    padding:5px;
    border:1px solid #000000;
}

九、使用ID还是CLASS?

既然利用class或者使用id属性能够实现同样的效果,那我们到底选择那个呢?我们利用以下几点分别说明:

1. 一个结构文档中可以多处使用同一个class名,而id名必须是唯一的。例如我们定义了一个描述字体的CSS。

.font {
    color:#009900;
}

以下文档中将多次使用到同一个样式表“.font”

<h1>DIV + CSS 基础教程</h1>
<div>网址:http://www.tripow.com</div>

而id名在同一个文档中是需要唯一的。

2.利用class可以对于同一个标签多重定义样式。例如:
css:

.font {
    color:#009900;
}
.border {
    border:1px solid #000000;
}

使用以上两个CSS样式表对描述同一个DIV,多个样式表名用空格隔开:

<div>网址:http://www.tripow.com</div>

3. ID还有更多的特殊用途
例如我们用Javascript控制某个DIV的时候我们这里就需要用到DIV的ID名。这里就不细加讨论了。

还有更多的区别,大家可以在以后实践中总结,而且很多时候可能设计到个人习惯问题。
我个人习惯将某个确定用途的非重复的板块定义为ID属性。例如页面的header部分,或者footer部分,或者logo等等。

十、总结

到此为止,大家对DIV+CSS应该已经有了整体的认识,并且完全可以自行设计制作些简单页面。
另外还有更多的xhtml标签,以及css的更多属性的定义。大家可以参考相关的文档。其它标签在对css的使用方法上,是一样的。
相关资源搜索关键字:XHTML标签、CSS属性。

FCKeditor实现Ctrl+Enter提交

步骤:

1、打开 editor/js/fckeditorcode_ie.js,找到这部分代码 

E.SetKeystrokes([[13,’Enter’],[SHIFT+13,’ShiftEnter’],……

插入代码 [CTRL+13,’CtrlEnter’], 后修改如下:

E.SetKeystrokes([[CTRL+13,’CtrlEnter’],[13,’Enter’],[SHIFT+13,’ShiftEnter’],……

2、找到这部分代码:

try{switch (B){case ‘Enter’:return C.DoEnter();break;

插入代码  后修改如下:

try{switch (B){case ‘CtrlEnter’:return ctlent();break;case ‘Enter’:return C.DoEnter();break;

3、在文件的最后加上如下代码

function ctlent(){parent.parent.parent.document.getElementById(“submitbuttonid”).click();};

4、保存此JS文件,同时如上步骤更新文件 fckeditorcode_gecko.js

最适合程序员使用的程序代码显示字体

平时一般都用最常见的Courier New字体显示代码,但看久了总是感觉字体发虚,不舒服,于是打算尝试换个别的字体,当然肯定要求是等宽Monospace类字体。这里强力推荐MonacoBitstream Vera Sans Mono这两个字体(后者我想不用介绍,用linux的朋友都知道,这是gnome自带的等宽字体),尤其是Monaco,真的看起来很舒服,写程序时感觉有别样轻松的感觉,毕竟健康对每个程序员都份外的重要!

 

编程用桌面显示规范:

1. 视力不差的话,800×600以上,1024×768最优

2. 字体大小9pt至12pt最佳,保证全屏方式下一目24行以上,40行以下

3. 字体采用绝对的等宽字体,常用的有新宋体/ FixedSys / Courier New等

 

编程用字体选择标准:

1. 所有字符等宽

2. 简洁、清晰、规范的字符形体

3. 支持ASCII码为128以上的扩展字符集

4. 空白字符(ASCII: 0x20)与其他字符等宽

5. ‘1’、’l’和’i’等三个字符易于区分

6. ‘0’、’o’和’O’等三个字符易于区分

7. 双引号、单引号的前后部分易于区分,最好是镜像对称的

8. 清晰的标点符号外形,尤其是大括符、圆括符和方括符