程序人生

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理 ::
  146 随笔 :: 0 文章 :: 29 评论 :: 3 引用

2008年4月3日 #

在网络设计领域关于Eye-Tracking的研究十分火爆,但是如何把这些研究结果转变为具体可行的设计来运作依旧是个难点。以下就是一些来自于Eye-Tracking研究结果的窍门,可以为改进你的网站设计提供些意见:

1.对比图像,文字更具吸引力

与你所认为的相反,在浏览一个网站的时候,能够直接吸引用户目光的并不是图像。大多数通过偶然点击进入你的网站的用户,他们是来寻觅信息的而不是图像。因此,保证你的网站设计凸现出最重要的信息板块,这才是设计的首要原则。

2.眼球的第一运动聚焦于网页的左上角

用户浏览网页的这一习惯应该在意料之中,毕竟左上部为主要操作中心这一点为大多数重要的计算机应用程序的设计所采用。在你构建网站考虑网站设计时,应该尽量保持这一格式。要知道,如果你希望保持个人特色,搭建一个成功的网站,你就必须尊重用户们的习惯。

3.用户浏览网页时,首先观察网页的左上部和上层部分,之后再往下阅读,浏览右边的内容


用户普遍的浏览方式呈现出“F”的形状。保证网站内容的重要要素集中于这些关键区域,以此确保读者的参与。在此放置头条,副题,热点以及重要文章,这样可以吸引到读者进行阅读。

4.读者会忽视横幅广告

研究表明,读者常忽视大部分的横幅广告——尽管你以此维持网站生计——视线往往只停留几分之一秒。如果你想通过广告挣钱,那么必须创新你的广告位以及合理配置网站广告形式。

5.花哨的字体和格式被忽视

为什么呢?那是因为用户会认为这些是广告,并非他们所需要的信息。事实上,研究表明用户很难在充满大量颜色的花哨字体格式里寻找到所需的信息,因为视觉线索告诉他们把这些忽略吧。保持网站的清爽,不要因为华而不实的表面,让重要的信息被忽略。

6.用数词来代替数字

如果使用数词取代数字的罗列,读者会发现在你的网站可以很容易地发现真实的资料。要知道,你是写给那些将第一次浏览你的网站的读者,所以,让他们容易发现他们所需的信息,让他们感兴趣。

7.字体大小影响浏览行为

想改变人们对你的网页的看法吗?改变网页字体的大小。大的字体刺激浏览,而小一些的字体则提高焦点阅读量。根据你的需要,合理配置两者的比例。

8.遇到感兴趣的内容,用户仅会多看一眼副标题

不要过分坚持副标题固定的格式——保证他们的相关性和兴趣。你也可以让副标题包含关键词,这样可以有效利用搜索引擎,让它带来读者。

9.人们大都只浏览网页的小部分内容

如果在用户浏览的时候提供信息使他们尽快锁定目标,就可以把这一点发展成为你的优势。突出某些部分或者创建项目列表使网页信息容易找到和阅读。

10.简短的段落相对于长段落来说有更好的表现力

网页信息是为大多数强调快速浏览的无联网用户提供的。除非上下文的衔接要求,保持信息由简短的段落和句式组成,例如这个电子商务网站的产品介绍。

11.根据视觉锁定,一栏格式比多栏格式拥有更好的表现力

别让过多的信息把网站来访者淹没。大多数情况下,简洁更具力量。多栏内容容易被用户忽视,我们需要消除这些干扰。

12.网页顶部和左边的广告更能吸引眼球

如需要在网站植入广告,试图使他们融入网页的左上部,这样他们才能吸引到最大的视觉注意力。当然,用户仅仅会注意到这些广告,这并不意味着他们会用鼠标点击。所以不要为了提高广告的注意力而牺牲原有的网站设计。

13.将广告放置与最佳内容一旁也可以提升注意力

如果想要提升广告的可视性和点击率,可以将其设置于最能引起人兴趣的内容一旁,整合进网页的设计里。这样,用户既可以找到所需的内容,你也能提升广告的效益。

14.在各种测试中,人们阅读文字广告最为专心

正如上面提到的,一般的互联网用户不会花费太多时间用于查看那些一眼就能看出是广告的内容。这就是文字广告表现出众的原因。他们并没有分散注意力,而是与网页的其它部分内容融为一体,这让他们减少了对读者的视觉刺激,也使这一广告形式获得成功的阅读率。

15.越大的图像吸引越多的注意力


如果要在网页中使用图片,那越大越好。人们更倾向于查看那些能够清楚地看到细节和获取信息的图像。要保证你所用的图片与文章内容相关,否则它更容易被忽视。大多数读者都拥有高速的连接速度,所以请放心在你的网站上使用那些较大体积的图片。

16.干净、清晰的特写图片能吸引更多的视觉注意

可能那些抽象的艺术图片会让你的网站看起来很有味道,但是他们并不会吸引多少读者的注意力。如果你需要使用到这些图片,请确保所用图片的清晰以及其表达内容的简单可读性。必须注意的是,那些与真实的“人”相关的图片比所谓的模特图片更为“优秀”。

17.标题能吸引眼球

浏览网页时,读者能发现的第一内容是标题。确保网页的所有相关链接畅通和有效,以让读者顺利的通过网站进一步搜索。

18.用户花费大量时间察看按钮和菜单

所以,你需要花费额外的时间维护你的精心设计。毕竟,他们不仅吸引了读者的眼球,更是网站设计的重要组成要素。

19.表单格式可以延长读者的注意时间

分解内容和段落,大量使用表单形式来表现你的文章,可以保证读者的浏览率。使用数字和其它标记符号来突出文章的重要内容,会让网站更容易浏览,用户更快的找到所需的信息。

20.避免呈现大块的文本

研究显示,一般的网络浏览者不会花费时间去阅读大块的文本,无论他们有多重要或写得多好。因此,必须把这些大文本分解为若干小段落。突出重要的地方,放置点击的按钮也可以提高用户的注意力。

21.格式可以吸引注意力

在文中使用粗体、大写、彩体、下划线可以帮助用户获取正文所表达的最主要的信息。使用时需要谨慎,因为过多的使用会使你的网页难以阅读,把读者吓跑。

22.利用好空白

尽管把网页的每寸空间都填满这个想法十分诱人,但事实上让网站留出部分剩余更为不错。网站的过量信息会把用户淹没,同时他们也会忘记所提供的大部分的内容。所以保持网页的简洁,给读者预留出一些视觉空间来供读者休息。

23.放置于网页顶部,导航工具的作用将更好的发挥

理想情况下,你不会满足于当读者打开你的网站时仅浏览初始页,而是希望他们浏览翻阅,察看其它感兴趣的内容。将导航器置于网页顶部,就可以让用户通过使用这个工具轻松的找到所需的目标内容。
 
转自:http://www.cnblogs.com/tophet/archive/2008/04/02/1134821.html
posted @ 2008-04-03 13:17 程序人生-123 阅读(96) | 评论 (1)编辑

2008年4月1日 #

第一步:打开Visual Studio (这里我虽然用的是Visual Studio 2008,但是Visual Studio 2005也同样适用,而且创建方法都是一样的)

image 

                                                         (Figure 1)

第二步: 创建一个新的项目并且命名为MyTemplate(最好写成MyProjectTemplate,这样容易区分是Project Template还是Item template),在这个例子里,我全部用的是Console项目,如果你要第一ASP.NET的模板,那么就创建一个ASP.NET的website即可.

image

                                                           (Figure 2)

第三步:当你创建完Console的应用程序以后,就把你要加的版权信息还有#Region这些东西放好,归好位,至于版权信息的里面$xxxx$这些关键字,我这里就不再赘诉了。去宝典(MSDN)看看就明白了。http://msdn2.microsoft.com/en-us/library/eehb4faa(VS.80).aspx

image 

                                                 (Figure 3)

第四步:前面的工作都是讲如何创建模板,做好了所有的准备工作以后,接下来几步就是如何导出模板的关键了.

 

首先, 从File菜单下选择Export Template (中文里应该叫"导出模板"吧,如果偶中文还没有退化)

image

                                                            (Figure 4)

 

第五步:当你选择了Export Template以后,就会跳出 figure 5这个窗口,这里主要是选择你要创建的模板类型。微软把模板类型分成两种:

1. Project Template (项目模板?? 如果翻译不对,大家看图理解吧)

2. Item Template (抱歉,这个我不知道中文是什么)

从第五步到第八步,我们都是创建一个Project Template,后面的就是重复前面工作,创建一个Item Template.

 

在这步我要说明一下,可能有些朋友会混淆这两种模板,其实最简单的理解就是Project Template是在当你打开Visual Studio创建项目时候显示在那里的一个自定义模板. 假设你现在要创建一个Console的应用程序,你自然会选New Project,这时Console Application就显示在里面了,那么我们的Project Template和这个是等同的. Figure 8 就包括了我们自定义的模板和Visual Studio自带的模板。

那Item Template又是做什么的呢?其实故名思义,当你创建好项目以后,你会往里面添加Class,Interface...等,那么你就势必会用Add New Item了,而我们自定义的Item Template也就显示在这个里面了. Figure 12 包括了我们自定义的Item Template和Visual studio自带的Item Template.

image

                                                  (Figure 5)

第六步: 当你选好模板类型以后,这步就是给你模板命名的时候了,默认条件下,这个模板的名字是你目前的项目名字,在这里你可以用公司名字加以区分。例如我现在给CNC写程序,那么我就其一个CNC.xxx,那么当我换了工作或者临时到别的公司做活,我只要在创建一个,把创建好这个用在这个公司就行了。这样哪怕你日后又回CNC工作,你也不用在重新给CNC穿件一个模板了。

当名字起好了,你还可以为你自己的模板换上你自己的图标,而且还可以添加一些模板描述。当你全部填写完这些信息以后,下面就是告诉你你的模板会被输出到哪里,是否自动把模板倒入到Visual Studio,还有是否要打开模板的输出文件夹。

image

                                                 (Figure 6)

第七步:如果上一个途中最下面的选项你选上了,Visual Studio就打开了这个模板的导出文件家,这时你可以顺手备份一下了 :)

image

                                                 (Figure 7)

第八步:经过了前面七步的讲述,我们已经创建好了自己的模板,下面就开始享受模板给你带来的快乐吧。

image

                                                  (Figure 8)

 

 

 

以下内容和前面一样,只不过是用来创建Item Template的,我就不再赘述了.

 

好了,该讲的都讲完了,如果大家还有什么不懂或者建议可以在我Blog上面留言,如果表达不清楚还请各位谅解,写blog的时候才发现自己中文的退步 :(

image

                                                 (Figure 9)

image

                                                 (Figure 9)

image

                                                  (Figure 10)

image

                                                 (Figure 11)

image

                                                 (Figure 12)

转自:http://www.cnblogs.com/javafun/archive/2008/04/01/1132391.html

posted @ 2008-04-01 16:24 程序人生-123 阅读(95) | 评论 (0)编辑

2008年3月31日 #

网页设计标准尺寸:

1、800*600下,网页宽度保持在778以内,就不会出现水平滚动条,高度则视版面和内容决定。
2、1024*768下,网页宽度保持在1002以内,如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏,页面的下方又不会出现滑动条,尺寸为740*560左右
4、在PS里做的图到了网上就不一样了,颜色等等方面,因为WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广,所以自然会有失色的现象.
页面标准按800*600分辨率制作,实际尺寸为778*434px
页面长度原则上不超过3屏,宽度不超过1屏
每个标准页面为A4幅面大小,即8.5X11英寸
全尺寸banner为468*60px,半尺寸banner为234*60px,小banner为88*31px
另外120*90,120*60也是小图标的标准尺寸
每个非首页静态页面含图片字节不超过60K,全尺寸banner不超过14K


标准网页广告尺寸规格

一、120*120,这种广告规格适用于产品或新闻照片展示。
二、120*60,这种广告规格主要用于做LOGO使用。
三、120*90,主要应用于产品演示或大型LOGO。
四、125*125,这种规格适于表现照片效果的图像广告。
五、234*60,这种规格适用于框架或左右形式主页的广告链接。
六、392*72,主要用于有较多图片展示的广告条,用于页眉或页脚。
七、468*60,应用最为广泛的广告条尺寸,用于页眉或页脚。
八、88*31,主要用于网页链接,或网站小型LOGO。
广告形式        像素大小                               最大尺寸           备注
BUTTON        120*60(必须用gif)                   7K  
                       215*50(必须用gif)                    7K
通栏               760*100                                 25K              静态图片或减少运动效果
                      430*50                                   15K
超级通栏        760*100 to 760*200             共40K           静态图片或减少运动效果
巨幅广告         336*280                                   35K
                      585*120
竖边广告         130*300                                   25K
全屏广告         800*600                                   40K              必须为静态图片,FLASH格式
图文混排                                                                                各频道不同 15K
弹出窗口         400*300(尽量用gif)                40K
BANNER         468*60(尽量用gif)                  18K
悬停按钮       80*80(必须用gif)                     7K
流媒体           300*200(可做不规则形状但尺寸不能超过300*200) 30K 播放时间 小于5秒60帧(1秒/12帧)

网页中的广告尺寸
1.首页右上,尺寸120*60    
2.首页顶部通栏,尺寸468*60     
3.首页顶部通栏,尺寸760*60
4.首页中部通栏,尺寸580*60   
5.内页顶部通栏,尺寸468*60   
6.内页顶部通栏,尺寸760*60
7.内页左上,尺寸150*60或300*300   
8.下载地址页面,尺寸560*60或468*60
9.内页底部通栏,尺寸760*60    
10.左漂浮,尺寸80*80或100*100
11.右漂浮,尺寸80*80或100*100以上几种说法可能有点小的出入,大家可以探讨一下。

IABEIAA发布新的网络广告尺寸标准
     在这6种格式中,除了去年iab发布的4种“通用广告包”中的格式:160x600, 300x250, 180x150及728x90,还包括新公布的468x60 和120x600(擎天柱)2种。

网页设计 LOGO 标准尺寸

国际上规定的标准的广告尺寸有下面八种,并且每一种广告规格的使用也都有一定的范围。


一、120×120,这种广告规格适用于产品或新闻照片展示。

二、120×60,这种广告规格主要用于做LOGO使用。

三、120×90,主要应用于产品演示或大型LOGO。

四、125×125,这种规格适于表现照片效果的图像广告。

五、234×60,这种规格适用于框架或左右形式主页的广告链接。

六、392×72,主要用于有较多图片展示的广告条,用于页眉或页脚。

七、468×60,应用最为广泛的广告条尺寸,用于页眉或页脚。

八、88×31,主要用于网页链接,或网站小型LOGO。  


  其中关于网站的LOGO,目前有三种规格:


1.88*31 这是互联网上最普遍的LOGO规格。

2.120*60 这种规格用于一般大小的LOGO。

3.120*90 这种规格用于大型LOGO。

转自:http://www.cnblogs.com/bliox/archive/2008/02/22/1077662.html

posted @ 2008-03-31 10:58 程序人生-123 阅读(208) | 评论 (0)编辑

2008年3月28日 #

     摘要: Event 事件事件源对象event.srcElement.tagNameevent.srcElement.type捕获释放event.srcElement.setCapture();event.srcElement.releaseCapture();事件按键event.keyCodeevent.shiftKeyevent.altKeyevent.ctrlKey事件返回值event.returnV... 阅读全文
posted @ 2008-03-28 13:51 程序人生-123 阅读(66) | 评论 (0)编辑

1:呈现服务器控件

如果控件要呈现用户界面元素或者任何其他客户端可见的元素,则应从WebControl类派生该控件。如果控件要呈现在客户端浏览器中不可见的元素(如隐藏元素或 meta元素),则应从 Control 派生该控件。Control最重要的方法是Render方法,它允许为一个HtmlTextWriter对象提供服务器控件的内容。HtmlTextWriter类将字符和文本写入到ASP.NET服务器控件输出流。其主要的方法如下:

方法

说明

AddAttribute

对于HtmlTextWriter对象通过对RenderBeginTag方法的后续调用创建的元素,向其开始标记中添加指定的标记属性和值。

WriteStyleAttribute

向其开始标记中添加标记样式属性

WriteAttribute

将标记属性及其值写入到输出流

RenderBeginTag

将标记元素的开始标记写入输出流

RenderEndTag

将标记元素的结束标记写入输出流

WriteBeginTag

将任何制表符间距和指定标记元素的开始标记写入到输出流

WriteEndTag

写入指定的标记元素的任何制表间距和结束标记。

当用WebContent类来派生类的时候,可以使用RenderBeginTagRenderEndTag来写HTML的开始和结束标记,这时我们应该重写RenderContents方法来向服务器控件的输出流中写文本,不要使用Render方法实现,这是因为WebControlRender方法实现了一段程序,这段程序向外部提供带有样式信息的标签。

下面用一个简单的例子说明一下,创建了一个在浏览器上呈现超链接的服务器控件。

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Drawing;

namespace Sunfish.Controls

{

    public class MyLinkControl : WebControl

    {

        Color color = Color.Blue;

        ///<summary>

        ///链接文本颜色

        ///</summary>

        public Color LinkColor

        {

            get { return color; }

            set { color = value; }

        }

        string hyperLink = "http://www.163.com";

        ///<summary>

        ///链接地址

        ///</summary>

        public string HyperLink

        {

            get { return hyperLink; }

            set

            {

                if (value.IndexOf("http://") == -1)

                {

                    throw new Exception("Specify Http as the protocal");

                }

                hyperLink = value;

            }

        }

        string text = "网易";

        public string Text

        {

            get { return text; }

            set { text = value; }

        }

        int fontSize = 20;

        public int FontSize

        {

            get { return fontSize; }

            set { fontSize = value; }

        }

        protected override void RenderContents(HtmlTextWriter writer)

        {          

            writer.AddAttribute(HtmlTextWriterAttribute.Href, hyperLink);

            writer.AddStyleAttribute(HtmlTextWriterStyle.FontSize, fontSize.ToString());

            writer.AddStyleAttribute(HtmlTextWriterStyle.Color, ColorTranslator.ToHtml(color));

            writer.RenderBeginTag(HtmlTextWriterTag.A);

            writer.Write(text);

            writer.RenderEndTag();

        }

    }

}

转自:http://www.cnblogs.com/sunfishlu/archive/2008/03/27/1125699.html

posted @ 2008-03-28 10:00 程序人生-123 阅读(33) | 评论 (0)编辑

meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中,meta 标签的用处很多。meta 的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。这其中最重要的是description(站点在搜索引擎上的描述)和keywords(分类关键词),所以应该给每页加一个meta值。比较常用的有以下几个: 

 

  name 属性 

  1、<meta name="Generator" contect="">用以说明生成工具(如Microsoft FrontPage 4.0)等; 

  2、<meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词; 

  3、<meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容; 

  4、<meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者; 

  5、<meta name="Robots" contect= "all|none|index|noindex|follow|nofollow"> 

  其中的属性说明如下: 

  设定为all:文件将被检索,且页面上的链接可以被查询; 

  设定为none:文件将不被检索,且页面上的链接不可以被查询; 

  设定为index:文件将被检索; 

  设定为follow:页面上的链接可以被查询; 

  设定为noindex:文件将不被检索,但页面上的链接可以被查询; 

  设定为nofollow:文件将不被检索,页面上的链接可以被查询。 

  http-equiv属性 

  1、<meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"> 

 <meta http-equiv="Content-Language" contect="zh-CN">用以说明主页制作所使用的文字以及语言; 

  又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集; 

  2、<meta http-equiv="Refresh" contect="n;url=http://yourlink">定时让网页在指定的时间n内,跳转到页面http://yourlink; 

  3、<meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT">可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式; 

  4、<meta http-equiv="Pragma" contect="no-cache">是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出; 

  5、<meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT">cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式; 

  6、<meta http-equiv="Pics-label" contect="">网页等级评定,在IE的internet选项中有一项内容设置,可以防止浏览一些受限制的网站,而网站的限制级别就是通过meta属性来设置的; 

  7、<meta http-equiv="windows-Target" contect="_top">强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用; 

  8、<meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion= 50)">和<meta http-equiv="Page-Exit" contect="revealTrans(duration=20,transtion=6)">设定进入和离开页面时的特殊效果,这个功能即FrontPage中的“格式/网页过渡”,不过所加的页面不能够是一个frame页面。 

posted @ 2008-03-28 09:11 程序人生-123 阅读(88) | 评论 (0)编辑

2008年3月27日 #

CSS和JavaScript标签对照表

盒子标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
 
颜色和背景标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
background background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
color color
 
样式标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
display display
list-style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
 
文字样式标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
font font
font-family fontFamily
font-size fontSize
font-style fontStyle
font-variant fontVariant
font-weight fontWeight
 
文本标签和属性对照
CSS语法 (不区分大小写) JavaScript语法 (区分大小写)
letter-spacing letterSpacing
line-break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertical-align verticalAlign

转自;http://www.cnblogs.com/wmxj2008/archive/2008/03/27/1124496.html
posted @ 2008-03-27 15:51 程序人生-123 阅读(47) | 评论 (0)编辑

1.写规则

  当使用css定义字体时你可能会这样做: 
      font-size: 1em;
  line-height: 1.5em;
  font-weight: bold;
  font-style: italic;
  font-variant: small-caps;
  font-family: verdana,serif;
  事实上你可以简写这些属性:

  font: 1em/1.5em bold italic small-caps verdana,serif

  现在好多了吧,不过有一点要注意:使用这一简写方式你至少要指定font-size和font-family属性,其他的属性(如font-weight, font-style,font-varient)如未指定将自动使用默认值。

2.同时使用两个class

  通常我们只为属性指定一个class,但这并不等于你只能指定一个,实际上,你想指定多少就可以指定多少,例如:

  通过同时使用两个class(使用空格而不是逗号分割),这个段落将同时应用两个class中制定的规则。如果两者中有任何规则重叠,那么后一个将获得实际的优先应用。

3.css中边框(border)的默认值

  当编写一条边框的规则时,你通常会指定颜色、宽度以及样式(任何顺序均可)。例如:border: 3px solid #000(3像素宽的黑色实线边框),其实这个例子中唯一需要指定的值只是样式。假如你指定样式为实线(solid),那么其余的值将使用默认值:默认的宽度为中等(相当于3到4像素);默认的颜色为边框里的文字颜色。如果这正是你想要的效果,你完全可以不在css里指定。

4.!important会被IE忽略

  在css中,通常最后指定的规则会获得优先权。然而对除了IE以外的浏览器来说,任何后面标有!important的语句将获得绝对的优先权,例如:

  margin-top: 3.5em !important; margin-top: 2em

  除IE以外所有浏览器中的顶部边界都是3.5em,而IE为2em,有时候这一点很有用,尤其在使用相对边界值时(就像这个例子),可以显示出IE与其他浏览器的细微差别。

  (很多人可能还注意到了css的子选择器也是会被IE忽略的)

5.图片替换的技巧

  使用标准的html而不是图片来显示文字通常更为明智,除了加快下载还可以获得更好的可用性。但是如果你决心使用访问者的机器中可能没有的字体时,你只能选择图片。

  举例来说,你想在每一页的顶部使用“Buy widgets”的标题,但你同时又希望这是能被搜索引擎发现的,为了美观你使用了少见的字体那么你就得用图片来显示了:

  这样当然没错,但是有证据显示搜索引擎对真实文本的重视远超过alt文本(因为已经有太多网站使用alt文本充当关键字),因此,我们得用另一种方法: Buy widgets,那你的漂亮字体怎么办呢?下面的css可以帮上忙:

 h1
  {
  background: url(widget-image.gif) no-repeat;
  }
  h1 span
  {
  position: absolute;
  left:-2000px;
  }
  现在你既用上了漂亮的图片又很好的隐藏了真实文本——借助css,文本被定位于屏幕左侧-2000像素处。

6.css盒模型hack的另一选择

  css盒模型hack被用来解决IE6之前的浏览器显示问题,IE6.0之前的版本会把某元素的边框值和填充值包含在宽度之内(而不是加在宽度值上)。例如,你可能会使用以下css来指定某个容器的尺寸:   #box
  {
  width: 100px;
  border: 5px;
  padding: 20px;
  }
  然后在html中应用:


  盒的总宽度在几乎所有浏览器中为150像素(100像素宽度+两条5像素的边框+两个20像素的填充),唯独在IE6之前版本的浏览器中仍然为100像素(边框值和填充值包含在宽度值中),盒模型的hack正是为了解决这一问题,但是也会带来麻烦。更简单的办法如下:  

 css:
  #box
  {
  width: 150px;
  }
  #box div {
  border: 5px;
  padding: 20px;
  }
  html:
  
...
  这样一来在任何浏览器中盒的总宽度都将是150像素。

7.将块元素居中

  假设你的网站使用了固定宽度的布局,所有的内容置于屏幕中央,可以使用以下的css:   #content
  {
  width: 700px;
  margin: 0 auto;
  }
  你可以把html的body之内任何项目置于

中,该项目将自动获得相等的左右边界值从而保证了居中显示。不过,这在IE6之前版本的浏览器中仍然有问题,将不会居中,因此必须修改如下:

body
  {
  text-align: center;
  }
  #content
  {
  text-align: left;
  width: 700px;
  margin: 0 auto;
  }
  对body的设定将导致主体内容居中,但是连所有的文字也居中了,这恐怕不是你想要的效果,为此#content 的div还要指定一个值:text-align: left

8.使用css实现垂直居中

  垂直居中对表格来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用。假设你将一个导航菜单的高度设为2em,然后在css中指定垂直对齐的规则,文字还是会被排到盒的顶部,根本没有什么区别。

  要解决这一问题,只需将盒的行高设为与盒的高度相同即可,以这个例子来说,盒高2em,那么只需在css中再加入一条:line-height: 2em 就可实现垂直居中了!

9. 容器内的css定位

  css的最大优点之一就是可以将对象定位在文档的任何位置,同样的也可以将对象在某容器内进行定位。只需要为该容器添加一条css规则:   #container
  {
  position: relative;
  }
  则容器内的任何元素的定位都是相对于该容器的。假定你使用以下html结构:

  

...

  如果想将navigation定位在容器内离左边界30像素,离顶部5像素,可以使用以下css语句:   #navigation
  {
  position: absolute;
  left: 30px;
  top: 5px;
  }


10.延伸至屏幕底部的背景色

  css的缺点之一是缺乏垂直方向的控制,从而导致了一个表格布局不会遇到的问题。假设你在页面的左侧设定了一列用于放置网站的导航。页面为白色背景,但你希望导航所在的列为蓝色背景,使用以下css即可:   #navigation
  {
  background: blue;
  width: 150px;
  }
  问题在于导航项不会一直延伸到页面的底部,自然它的背景色也不会延伸到底部。于是左列的蓝色背景在页面上被半路截断,浪费了你的一番设计。怎么办呢?很不幸我们现在只能用欺骗的办法,即将body的背景指定为与左列同颜色同宽度的图片,css如下:   body
  {
  background: url(blue-image.gif) 0 0 repeat-y;
  }
  背景图应为宽150像素的蓝色图片。这一办法的缺点是没法使用em来指定左列的宽度,当用户改变文字的大小导致内容的宽度扩张时,背景色的宽度不会随之改变。

  到写这篇文章为止这是对这类问题的唯一解决办法,因此你只能为左列使用像素值来获得能够自动延伸的不同的背景色 

本篇文章来源于深山行者个人网站 http://www.qwbm.com 原文出处:http://www.qwbm.com/new.asp?id=113

posted @ 2008-03-27 11:40 程序人生-123 阅读(44) | 评论 (0)编辑

【IT168 专稿】互联网的普及,宽带的流行,使得越来越多的个人和单位都架设了自己的网站。而充当网站的服务器的大多是普通的PC或者低档服务器,这样访问者人数一多或者遭受DDos攻击,很容易造成瘫痪。因此我们需要网站在真正发布前对其进行压力测试,即让少量的客户端计算机或一台计算机仿真模拟出大量用户同时访问,以获得服务器的承受能力。在此我们可以借助微软的网站测试人员开发的一款名为Web Application Stress Tool(简称WAS)的工具来完成,其下载地址为http://download.microsoft.com/download/a/8/2/a82e7ba7-c772-4ec4-b186-2cf147f42c11/setup.exe

    一、准备工作

    为了测试数据的准备性,首先需要删除缓存和Cookies等临时文件。启动IE后打开“工具”菜单下的“Internet”选项命令,在打开的“Internet选项”窗口的“常规”选项卡中,单击“Internet临时文件”区域的“删除Cookies”和“删除文件”按钮将临时文件删除。

    二、录制测试脚本

    安装并启动WAS,程序运行时会打开“Cteate new script”对话框,即建立一个新的脚本窗口(如图1),如果运行WAS没有打开该窗口可以单击WAS主程序窗口工具栏上第一个按钮“New Script”即可。

图1

    因为是初次使用,所以在新建脚本窗口上单击“Record”按钮打开创建向导对话框“Browser Recorder-Step 1 of 2”,其中三个选项的作用是选择要记录的内容,分别为Request(请求)、Cookies(网上信息块)以及Host headers(主机标题),可根据需要选择(图2),然后单击“Next”即会打开“Browser Recorder-Step 2 of 2”窗口,单击“Finish”按钮。这样WAS会自动启用,并且会打开一个浏览器窗口,此时我们就可以在浏览器的地址栏中输入要测试的网站网址。随着要测试的网站内容的不断显示,在WAS主界面的“Recording”选项卡中的信息会实时更新(如图3)。

图2

图3

    当浏览器的状态栏显示为“完成”时,我们就可以返回WAS窗口,单击“Stop Recording”按钮返回脚本窗口。

    三、测试设置

    为了使测试更加准确,更加接按真实效果,需要对录制的测试脚本进行一些设置。

    去除静态干扰

    由于网页是由图片、文字以及其它动态源码组成的,而一般的静态内容消耗的带宽并不是很大,因此我们可以将其排除在外。在脚本中选中指向图像、文字以及其它静态文件项目前的灰色按钮,然后单击工具栏上的“Delete”按钮将其删除(图4)。

图4

    设置并发数

    然后在单击“New Recorded Script”下的“Settings”标签,其中“Concurrent Connections”是设置并发连接数的,其下面的“Stress level (threads)”和 “Stress multiplier(sockets perthread)” 分别设置对目标服务器的压力及负载程度的,其中Level是客户端所产生的线程数目,一个线程可以产生多个Socket并发请求,因此将两者的数值相乘,所获得的数字就是客户端同时连接的并发数(图5)。

图5

    时间设置

    时间设置包括“Test Run Time”(测试运行时间)和“Request Delay”(停止响应)以及“Suspend”(挂起时间)三项。其中测试运行时间是以日、小时、分钟和秒来设定的,建议该项时间不宜太短,如果设置的并发数较多,那么时间应该按比较增长,以便产生足够多的请求;而停止时间是指连接时超出这个时间即作超时处理;在挂起时间处部分为Warmup和Cooldown两项,一般可以设置为两三分钟为宜,这样做的目的是避免测试开始和结束时数据的变形,影响测试的准确性。

    指定带宽瓶颈

    “Bandwith”是指定带宽瓶颈的,即选择访问该网站大多数用户所使用的带宽。例如访问该网站的绝大部分用户是拨号,那么可以选择56K。

    四、开始测试

    做好基本的设置工作后,就可以在左侧选中新建的脚本“New Recorded Script”项,然后单击工具栏上的“Run Script”按钮,或者打开“Scripts”菜单下的“Run”命令,这样就开始测试了。测试过程中会以进度条的方式实时显示,待进度条结束我们即可进行测试结果分析了。

    五、数据分析

    现在我们就可以打开测试报告来查看测试结果了。单击“View”菜单,选择“Reports”,在打开的窗口左侧会按时间显示所有测试报告。根据时间选择本次测试报告,在窗口右侧即可查看具体内容。

    在测试报告中最重要的部分就是“Socket Errors”部分和“Result Codes”部分。其中Socket Errors部分共分为Connect、Send 、Recv和Timeouts。其中Connect表示客户端不能与服务器取得连接的次数;Send表示客户端不能正确发送数据到服务器的次数;Recv表示客户端不能正确从服务器接次的次数;Timeouts表示超时的线程数目。由此我们可以如果这四个数值都比较小,甚至为0则说明我们的服务器是经得起考验的;如果数值居高不下,甚至接近设置的并发数,那么则要好好的检查你的服务器了(图6)。

图6

    另外在“Result Codes”部分,如果Code列表下的数值都为200,那么表示所有请求都经服务器成功返回,如果数值出现400或大于400,例如404,那么则需要在左侧找到“Page Data”节点,查看具体的错误项目,然后作出改正了。

    其实要完整的反映出一个网站在服务器上的运行情况,需要不断增减其并发数,并且进行多次测试,才能了解服务器所能承受的限度,然后才可以在IIS中设置允许连接的最大数目,从而保证网站正常运行。

XL 转自:http://www.cnblogs.com/DavidLc/archive/2008/03/27/1124440.html

posted @ 2008-03-27 11:26 程序人生-123 阅读(108) | 评论 (0)编辑

2008年3月25日 #

方法一:

&lt;script language="javascript"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;window.location = "http://www.baidu.com";
&lt;/script&gt;


方法二:

&lt;script language="javascript"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;document.location = "http://www.baidu.com";
&lt;/script&gt;


方法三: (带进度条)

&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Language" content="zh-cn"&gt;
&lt;meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"&gt;
&lt;title&gt;跳转到baidu.com&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form name=loading&gt;
&lt;P align=center&gt;&lt;FONT face=Arial color=#0066ff size=2&gt;loading...&lt;/FONT&gt;
&lt;INPUT style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 0px; COLOR: #0066ff; BORDER-TOP-style: none; PADDING-TOP: 0px; FONT-FAMILY: Arial; BORDER-RIGHT-style: none; BORDER-LEFT-style: none; BACKGROUND-COLOR: white; BORDER-BOTTOM-style: none"
size=46 name=chart&gt;
&lt;BR&gt;
&lt;INPUT style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #0066ff; BORDER-BOTTOM: medium none; TEXT-ALIGN: center" size=47 name=percent&gt;
&lt;script language="javascript"&gt;
var bar=0
var line="||"
var amount="||"
count()
function count(){
&nbsp;&nbsp;&nbsp;&nbsp;bar=bar+2
&nbsp;&nbsp;&nbsp;&nbsp;amount =amount + line
&nbsp;&nbsp;&nbsp;&nbsp;document.loading.chart.value=amount
&nbsp;&nbsp;&nbsp;&nbsp;document.loading.percent.value=bar+"%"
&nbsp;&nbsp;&nbsp;&nbsp;if (bar&lt;99){
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setTimeout("count()",100);
&nbsp;&nbsp;&nbsp;&nbsp;}else{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.location = "http://www.baidu.com/";
&nbsp;&nbsp;&nbsp;&nbsp;}
}
&lt;/script&gt;
&lt;/P&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;


第二篇: 页面跳转

&lt;head&gt;
&lt;meta http-equiv="refresh" content="10; url=http://www.baidu.com"&gt;
&lt;/head&gt;


第三篇: 动态页面跳转

方法一: PHP 跳转

&lt;?php
header("location: http://www.baidu.com");
?&gt;


方法二: ASP 跳转

&lt;%
response.redirect "http://www.baidu.com"
%&gt;

FYI:
&lt;%
Dim ID1
Dim ID2
dim str
ID1 = Request("forumID")
ID2 = Request("threadID")
str="/blog/threadview.asp?forumID="&amp; ID1 &amp;"&amp;threadID=" &amp; ID2
response.redirect str
%&gt;


XL转自:http://www.cnblogs.com/oakley/archive/2008/03/24/1120331.html
posted @ 2008-03-25 08:46 程序人生-123 阅读(33) | 评论 (0)编辑