各浏览器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”,但大致意思就是用于参考的简洁手册,就像是考试作弊时将必备的数学公式等写在一张纸上,以便考试时查询。

PSD2XHTML教程

在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是 div,很明显是无法达到语义化标准的。在国外xHTML+CSS(DIV+CSS)也可以叫做PSD2XHTML。

以下是43个PSD to XHTML及CSS教程:

1.将 PSD 源文件转换 XHTML 教程

DIV+CSS教程

2.叫你如何创建水平滚动网站布局

xHTML+CSS教程

3.从PSD到xHTML,按部就班教你创建DIV+CSS布局

DIV+CSS实例教程

4.从零开始创建CSS布局

xHTML+CSS实例

5.从零开始教您创建一个华丽高档的网页-xHTML+CSS教程

感兴趣的话也可以看看这个实例的设计教程,已译成中文
网页设计教程:使用Photoshop设计一个高档时尚的网页
DIV-CSS

6.4个简单的教程教你将PSD制作成CSS HTML

DIV+CSS教程

7.使用Drupal创建Killer乐队网站:6篇系列教程

这是个非常棒的关于使用Illustrator制作页面,Drupal(世界最著名的CMS系统之一)编码,符合标准的xHTML+CSS

完整教程索引:
第一部分:使用Illustrator设计页面
第二部分:使用Illustrator切图
第三部分:写xHTML
第四部分:Drupal主题模板
第五部分:Drupal管理
第六部分:总结和一些附加资源

xHTML+CSS教程

8.教你如何使用CSS创建性感的按钮

DIV+CSS实例教程

9.很酷的水平菜单悬停变大效果

xHTML+CSS实例

10.CSS模板教程

DIV-CSS

11.控制文本渐变效果CSS教程

DIV+CSS教程

12.CSS超大背景教程

xHTML+CSS教程

13.将PSD效果图转换成HTML

DIV+CSS实例教程

14.PSD切图和页面的实现

xHTML+CSS实例

15.模糊背景效果

DIV-CSS

16.使用CSS Sprites(将图片集合在一张图片中) 技术教程

DIV+CSS教程

17.手绘风格CSS导航按钮

xHTML+CSS教程

18.创建类似Crazy Egg价格列表效果的表格列高亮效果

DIV+CSS实例教程

19.CSS菜单教程

xHTML+CSS实例

20.Photoshop教程+切片+CSS编码

这个教程将教你使用Photoshop制作简洁的纵向菜单。

DIV-CSS

21.为网页模版切片并用CSS编码

DIV+CSS教程

22.为你的第一个PSD网页效果图编码教程

xHTML+CSS教程

23.使用简单的操作完成复杂的CSS布局实例

DIV+CSS实例教程

24.使用CSS来让你的页脚固定

xHTML+CSS实例

25.教你如何将PSD转换成xHTML-视频教程

DIV-CSS

26.高级CSS导航实例教程

DIV+CSS教程

27.教程:为你的DIV+CSS布局编码

xHTML+CSS教程

28.教你如何为网页变换样式

DIV+CSS实例教程

29.浮动教程

xHTML+CSS实例

30.CSS切片教程:选择正确的布局

DIV-CSS

31.使用Prototype和Scriptaculous创建简单、智能的手风琴效果

DIV+CSS教程

32.CSS Sprites + 圆角

xHTML+CSS教程

33.简单3步制作圆角布局

DIV+CSS实例教程

34.CSS样式教程

xHTML+CSS实例

35.转换Photoshop效果图

DIV-CSS

36.制作CSS纵向菜单

DIV+CSS教程

37.使用CSS固定页脚背景图

xHTML+CSS教程

38.一个简单的散列布局启蒙教程

DIV+CSS实例教程

39.两列布局CSS教程

xHTML+CSS实例

40.CSS布局技巧:完成100%高度

DIV-CSS

41.附带一个’behavior’文件的纵向CSS菜单

DIV+CSS教程

42.光滑的设计,HTML实例

xHTML+CSS教程

43.DIV+CSS布局教程

DIV+CSS实例教程

如果你能把这些xHTML+CSS(DIV+CSS)实例教程看一遍的话,我相信你一定会拥有扎实的基础来使用符合Web标准的xHTML+CSS实现更加高级的布局。

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个性化服务的精神。每个网民的访问习惯和浏览习惯都有所不同,第一要设计最直接有效的浏览路径;第二要记录网民的浏览路径,便于随时返回;第三,要试图寻找与网民浏览路径的匹配,这一点集中可以体现在亚马逊的图书浏览和购买流程上,大家自己来关注吧。

成功的用户界面的八个特性

当你构建你的用户界面和网站的时候,有各种各样的关于界面设计方法和模式的信息你可以使用, 对常见问题的解决方案和一般可用性的建议。下列专家给出的准则可能会引导你创造一个良好的用户界面, 但是究竟什么才是一个良好的界面? 一个有价值的用户界面应该具有那些特性?
以下八个特性是我认为一个良好的用户界面所必须的:
1.清楚
2.简明
3.熟悉
4.易响应
5.一致
6.吸引力
7.高效
8.宽容
1.  Clear清楚的
清晰度是用户界面设计最重要的元素。事实上,用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。 如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里,他们会困惑和沮丧。

这是什么呢?鼠标移到WordPress的按钮时工具提示会弹出解释其职能。

2. Concise 简明
清晰的用户界面是很好的,但是,您应该谨慎,不要陷入过度明晰。定义和解释很容易被添加,但是你这样做的同时也增大了规模。您的界面规模增加。添加过多的解释,您的用户将不得不花费过多的时间去读它们。
不仅要保持清晰,而且还保持简洁。当你能用一句话解释一项功能的时候就不要用三句话。当你可以用一个单词标记一个项,就不要用两个。 保持简洁可以节省你的用户的宝贵的时间。 同时保持清晰和简明并不容易,需要足够的时间和努力来实现,但其回报是值得的。
在 OS X 的音量控制中使用两个小图标以显示的音量从低到高。

3.  Familiar熟悉
许多设计师努力使自己的界面,直观。 但到底直观的真正意思是什么?直观也就是就是说可以自然地,本能地理解和领会。但是你怎么能做到直观一些?你可通过是它变的熟悉来实现。
熟悉就是, 跟你以前遇到过的东西相似。当你熟悉的东西,你就知道怎样它怎么做-你知道会发生什么事情。 弄清你的用户熟悉的并把它们融合到你的用户界面中。
GoPlan的标签页式界面。 标签很熟悉 , 因为他们模仿文件夹上的标签。 你清楚知道点击标签您将浏览该节和其他地方的标签将继续存在为了进一步导航。

4.  Responsive易响应

易响应意味着两件事。 首先,易响应意味着快速。 如果没有软件在后台,界面应该响应很快。等待加载和缓慢的界面是令人沮丧。 看起来加载的很快, 反正就是界面快速载入(即使内容尚未赶上)改善了用户体验。
易响应也意味着界面提供某种形式的反馈。界面应该反馈给用户,告知他们现在怎么了。 你成功地按下那个按钮吗?你将如何知道?按钮应显示一个被按了的状态反馈, 或许可以把按钮上的文字改成“正在加载… ”并且禁用按钮。 是软件挂了还是内容载入中?用转动的轮子或显示进度栏的方式来保持用户在进程中。
Gmail会显示一个进度栏当您第一次进入您的收件箱。 而不是逐步载入网页时,一旦一切准备就绪整个页面即时显示。

5.  Consistent一致
之前我谈过关于上下文的重要性 ,以及它应如何指导你的设计决定。我认为,适应任何给定的上下文是很聪明,但是,一个界面仍然应保持一定程度的一致性。
一致的界面,使用户能够开发惯用模式-他们会了解不同的按钮,标签,图示和其他界面元素的外观,并识别他们。认识到在不同的情况他们所做的事情不同。他们也将了解特定的东西如何工作,能够从过去的经验中更快的总结知道如何操作新功能。
在Microsoft Office的用户界面是一致的是有原因的。

6.  Attractive吸引力

这可能有一点争议,但我相信一个良好的界面应该有吸引力。 吸引力在某种意义上,是与界面交互变得是愉快。是的,你可以让你的用户界面简单,易于使用,有效率和易反应,它将尽其出色-但如果你可以做额外的一步,使之有吸引力的。那样用户体验会真正令人满意。当你的软件使用起来是令人愉快的,你的客户或工作人员将不仅是简单地使用它-他们会期待着使用它。
当然有许多不同类型的软件和网站,所有的创作针对的不同的市场和用户。什么样看来’好’对任何一个特定的观众都会有所不同。 这就是说,你应该为了你的用户来包装你的界面的的外观和风格。 此外,美感设计应适度使用,并且是为了加强功能。美化界面不同于加载时使用多余的眼睛糖果。
谷歌是众所周知的极简洁的界面 , 他们关注功能重于形式,但他们显然的花费时间美化了 Chrome用户界面元素 , 如按钮和图标 , 使它们看起来正好体现了微妙的梯度和像素超薄突出。
7.  Efficient高效率
用户界面像是车辆,带你去你要到的地方。这些地方是软件应用程序或网站的不同的功能。 一个良好的界面可让您在执行这些功能更快。 现在, ‘有效’听起来像一个相当模糊的属性-如果你把所有其他的事情在这个清单上,当然界面到头来还是需要高效? 差不多,但不完全。
你真正需要做的是使界面能高效的找出用户努力想要实现的,然后让他们可以有条不紊的做到。 您必须确定您的应用程序应该如何工作’ -什么功能它需要有,什么样的目标是你努力努力争取实现? 实现一个界面,可以让人们轻松地完成他们想要做的,而不只是简单的实现对各个功能的访问。
苹果公司已经确认了人们在其iPhone上想要对照片做三个关键的事情,并在照片控制中提供按钮来分别完成他们。

8.  Forgiving宽容

没有人是完美的,当使用你的软件或网站必定有人会犯错误。 如何处理这些错误将成为你的软件的质量一个重要指标。不要惩罚用户-建立一个宽容的界面,纠正问题。
一个宽容的界面可以使你的用户远离代价高昂的错误。例如,如果有人删除了重要的信息,他们可以轻松地重新检索或撤消这一行动? 当有人浏览到损坏或不存在的网页,他们会看到什么?他们会迎接一个加密的错误提示还是得到了一些有用的替代目的地?

错误的删除了电子邮件?Gmail可让您迅速取消上一次的操作。

成为一个顶级设计师的两个基本准则

费话不多说:直接上菜:

原则一:限制你的字体。
你会看到一个好的设计很大一部分看起来非常协调。一个最好的方法是用少量的元素去完成一个看起来非常协调的设计。
你最先选择的字体可能是你想要删掉的,我常常的做法是一个作品剔除2种字体。第一种字体可能会是很有思想力或艺术感,将给你的设计带来第六感,特征或个性。这些字体集合了当时所有心情的片段,这个扭着腰枝的有趣字体像女孩们的舞会,这个蹩脚邪恶的字体是一个摇滚乐队?我将使用这个花哨的字体人为文本的标题,在任何地方它都需要足够大,这个花哨的字体将是这块的重点。你通常很少再用这字体,但它又大得多,所以这就是人们看到的重点内容。
第二种字体要非常普通,读者在整篇当中都不会感觉到它的存在。这种字体需要有很高的易读性,它会占据这篇文本相当大的篇幅,显然,那些大手大脚的艺术字体占据文本的大篇幅的话会非常影响阅读的。
这有一个正确使用字体的设计例子。正如你所看到的,这里只用了两种字体,花哨的艺术字体作为标题出现,内容就是很基本的字体。这样看起来整洁,协调。

这里还有一个失败的例子,这里我用了很多花哨的艺术字体,这样很不协调,分节看起来并不是配合主标题。

在一个设计中有太多的字体是大忌,没有什么事比用8种字体来印他们的传单看起来更糟的了,同样使用艺术字作为正文也更糟。这是一个错误使用字体的例子。

在我让你亲自动手之前的最后一个思路。如果你的艺术字看起来非常时髦有现代感,那正文部分就使用无衬线字体;如果你的艺术字看起来很正规化,那就用衬线字体作为第二字体吧。
PS1:第一次翻译东西,有些地方可能并不一定正确,看懂原文的还是看原文吧。最后感谢我的父母,感谢谷歌,感谢金山,感谢CCTV,感谢所有TV。。。。
PS2:衬线字体与无衬线字体
Serif 或 San Serif?
Serif 是一个字笔画的结尾,例如 M 的起点与终点。Serif 是由罗马刻印字母所发展出来的,用以改良字体的优雅程度与易读性。它们是先用毛笔写在石头上,然后再刻出来的。Serif 会活存到现在,是因为它们十分美丽及古典,而且它们阅读起来比较容易。对于细小的文本字体,非常适合用 Serif 字体,相反地您可用 Sans Serif(Sans 是法文里的“无”),来当标题或是供短篇文章的字体使用。
不同字体的分类
拉丁文字 方块字
衬线字体 (Serif)
笔划粗幼对比明显,阅读时较省目力
Times New Roman
Architect
BalletEngraved
Creedmore
Benjamin
Capshc
新细明体
宋体
标宋
无衬线字体 (Sans Serif)
笔划粗幼平均、对比不太明显
字型较突出,阅读时较费目力
Alberta
ANNSTONE
Garamond
Nimbus Script
黑体

原则二:限制你的色彩
限制使用你的色彩。好象上个准则是让你限制用你的字体,对吗?非常对!我们限制用我们的色彩的原因和我们限制使用字体的原因一样。在我们的设计当中减少色彩的数目将使之变的谐调。基本上,每件东西看起来将很一致,就像一个体育队伍的运动服或者是一个公司的商标那样。—我们想使制服(运动服)整体看上去是一个色彩的。
和选择字体一样,限制使用你的色彩数目只是一个参考指南,不是一条准则。你可以在你的设计中很好的使用彩虹的颜色,那将非常好看。但是一开始,你需要一个使用色彩的策略,并且坚持用这个策略。使之始终贯穿在你的设计中。
对于初学者,让我们来说一下色值吧。一个颜色的色值就是它的亮暗程度。例如一个黄色是非常亮的颜色,紫色就是很暗的颜色。当然一个颜色可以有它的色彩值域。例如,紫色是一个使我们大多数人联想到暗色的颜色,但是紫色也有很亮的紫色。这里有个例子关于一些颜色和它们相关的色值。然后,你可以看到的是一个颜色的色值范围。

所以当我在采用的色彩方案时我会用一条准则:确保在你的色彩方案中有一个色值的范围。在任何设计中你都需要一些淡色和一些深色去形成对比。如果要举例的话,你设计的背景是深色的,你就需要一个淡颜色的文字,图画。这样的话文字,图画就容易被阅览。反过来,如果你有一个淡色的背景,你就需要一个深色的图画,文字或是其它什么的。
我也会代表性的只采用2-5种颜色去完善我的色彩方案。减少选择的数目,那么你就会在你的设计中得到一个好结果。这里有个色彩方案的例子我将它们放在一起。就像你看见的,我采用了一个深色,一个中间调子的颜色和一个淡色。就从右边开始,我为每一个颜色建立了一个色值范围。这些色彩组合就像我的调色板,我会将它们运用到我的设计项目中去。一旦我有了这个调色板,我就会尽全力只用这些颜色。

好了,我们刚才说到了一些色彩采用方面的技巧,像你需要选择多少种颜色,它们的色值应该是多少;那么下一步是什么呢?我将告诉你什么是下一步,也是最难的部分;那就是如何决定这2-5个颜色!我个人认为这是项有时候有点难的活儿。这里有张表,是帮助我采用我的色彩方案的技巧的表:
确定一个冷暖色调的范围。
就是采用暖色调或冷色调。暖色有红,橙,黄,棕色等。冷色是蓝色和紫色。我认为绿色是一个相当中间的颜色。如果你将所有你选用的颜色处于一个色调中,他们将肯定非常和谐。
www.colourlovers.com 网站上汲取灵感
这个精彩的网站全是关于色彩方案。你只需一页页的点击色彩方案。
留意你的周围
色彩方案在你的周围到处都是。看一下食品店的包装,看一下你们当地的星巴克咖啡店的油漆颜色,看一下大自然!如果你看到一些令人愉快的色彩,只要在脑海中作个笔记,看看是否可以复制到你的电脑里去。
留心一些已有的公司商标色彩
我常常运用一些已有的商标色彩,我会看一下他们的logo,色彩方案并且将之成为我最初的想法。然后可能只加上一个或两个颜色。
这里是一个我已经完成的设计,它展示了被限制的色彩方案。

如你所见,紧凑的色彩方案和统一的字体真的使所有的东西都井井有条。
我知道这些课程都很基础……但是这就是设计的基石。所以,它永远不会伤到一个恢复精神的人。

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. 清晰的标点符号外形,尤其是大括符、圆括符和方括符