前几天上档的几款flash小游戏，测试发现有个bug，ie浏览器 在键盘用上下方向键操控flash游戏时,页面的滚动条竟然跟着翻动起来，这体验太不好了，初步判断肯定是焦点的问题，经过百度google以及对比了一些知名小游戏网站后发现，原来是wmode 惹的祸。
wmode的”opaque”或”Transparent”值会使 html 页的背景可以透过应用程序的所有透明部分进行显示，但是它会将flash与html层交互，导致浏览器的滚动条跟着滚动。
删除这一行后,就可以解决按键盘方向键ie浏览器滚动条会跟着滚动的问题了!
1. 搜索引擎推广方法
搜索引擎推广是指利用搜索引擎、分类目录等具有在线检索信息功能的网络工具进行网站推广的方法。由于搜索引擎的基本形 式可以分为网络蜘蛛型搜索引擎（简称搜索引擎）和基于人工分类目录的搜索引擎（简称分类目录），因此搜索引擎推广的形式也相应地有基于搜索引擎的方法和基 于分类目录的方法，前者包括搜索引擎优化、关键词广告、固定排名、基于内容定位的广告等多种形式，而后者则主要是在分类目录合适的类别中进行网站登录。随 着搜索引擎形式的进一步发展变化，也出现了其他一些形式的搜索引擎，不过大都是以这两种形式为基础。
搜索引擎推广的方法又可以分为多种不同的形式，常见的有：登录免费分类目录、登录付费分类目录、搜索引擎优化、关键词广告、关键词竞价排名、网页内容定位广告等。
从目前的发展趋势来看，搜索引擎在网络营销中的地位依然重要，并且受到越来越多企业的认可，搜索引擎营销的方式也在不断发展演变，因此应根据环境的变化选择搜索引擎营销的合适方式。
2. 电子邮件推广方法
以电子邮件为主要的网站推广手段，常用的方法包括电子刊物、会员通讯、专业服务商的电子邮件广告等。基于用户许可的Email营销与滥发邮件 （Spam）不同，许可营销比传统的推广方式或未经许可的Email营销具有明显的优势，比如可以减少广告对用户的滋扰、增加潜在客户定位的准确度、增强 与客户的关系、提高品牌忠诚度等。
3. 资源合作推广方法
通过网站交换链接、交换广告、内容合作、用户资源合作等方式，在具有类似目标网站之间实现互相推广的目的，其中最常用的资源合作方式为网站链接策略，利用合作伙伴之间网站访问量资源合作互为推广。
每 个企业网站均可以拥有自己的资源，这种资源可以表现为一定的访问量、注册用户信息、有价值的内容和功能、网络广告空间等，利用网站的资源与合作伙伴开展合 作，实现资源共享，共同扩大收益的目的。在这些资源合作形式中，交换链接是最简单的一种合作方式，调查表明也是新网站推广的有效方式之一。交换链接或称互 惠链接，是具有一定互补优势的网站之间的简单合作形式，即分别在自己的网站上放置对方网站的LOGO或网站名称并设置对方网站的超级链接，使得用户可以从 合作网站中发现自己的网站，达到互相推广的目。交换链接的作用主要表现在几个方面：获得访问量、增加用户浏览时的印象、在搜索引擎排名中增加优势、通过合 作网站的推荐增加访问者的可信度等。交换链接还有比是否可以取得直接效果更深一层的意义，一般来说，每个网站都倾向于链接价值高的其他网站，因此获得其他 网站的链接也就意味着获得了于合作伙伴和一个领域内同类网站的认可。
4. 信息发布推广方法
将有关的网站推广信息发布在其他潜在用户可能访问的网站上，利用用户在这些网站获取信息的机会实现网站推广的目的，适用于这些信息发布的网站包括在线黄页、分类广告、论坛、博客网站、供求信息平台、行业网站等。信息发布是免费网站推广的常用方法之一，。
5. 快捷网址推广方法
即合理利用网络实名、通用网址以及其他类似的关键词网站快捷访问方式来实现网站推广的方法。快捷网址使用自然语言和网站URL建立其对应关系，这对于习 惯于使用中文的用户来说，提供了极大的方便，用户只需输入比英文网址要更加容易记忆的快捷网址就可以访问网站，用自己的母语或者其他简单的词汇为网站“更 换”一个更好记忆、更容易体现品牌形象的网址，例如选择企业名称或者商标、主要产品名称等作为中文网址，这样可以大大弥补英文网址不便于宣传的缺陷，因为 在网址推广方面有一定的价值。随着企业注册快捷网址数量的增加，这些快捷网址用户数据可也相当于一个搜索引擎，这样，当用户利用某个关键词检索时，即使与 某网站注册的中文网址并不一致，同样存在被用户发现的机会。
6. 网络广告推广方法
网络广告是常用的网络营销策略之一，在网 络品牌、产品促销、网站推广等方面均有明显作用。网络广告的常见形式包括：BANNER广告、关键词广告、分类广告、赞助式广告、Email广告等。 BANNER广告所依托的媒体是网页、关键词广告属于搜索引擎营销的一种形式，Email广告则是许可 Email营销的一种，可见网络广告本身并不能独立存在，需要与各种网络工具相结合才能实现信息传递的功能，因此也可以认为，网络广告存在于各种网络营销 工具中，只是具体的表现形式不同。将网络广告用户网站推广，具有可选择网络媒体范围广、形式多样、适用性强、投放及时等优点，适合于网站发布初期及运营期 的任何阶段。
方法一：
＝＝＝＝css=========
.box {
position:absolute;
width:500px;
height:200px;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-250px;
background:#f60;
}
=====xhtml=====
<div class=”box”> </div>
方法二：
==========css==============
div {width:100%;}
#box {display:table;height:550px;_position:relative;overflow:hidden;}
#box div{_position:absolute;_top:50%;display:table-cell;vertical-align:middle;}
#box div div
{width:100%;background:#f7f7f7;display:block;_position:relative;_top:-50%;}
#box div div .bgRed
{background:red;height:50px;width:210px;margin:0 auto;}
======xhtml===============
<div id=”box”>
<div><div>
<p class=”bgRed”>111</p>
</div></div>
</div>
网页的色彩搭配往往是网友们感到头疼的问题，尤其是那些完全没有美术基础的网友。到底用什么色彩搭配好看呢？让我们来看看网友54雨寒的高见吧！
一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。
二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。
1、 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
2、 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
3、 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
4、 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。
三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝 色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡 化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。
1、 如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。
2、 在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。
四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
1、 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。
2、 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。
3、 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。
五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
1、 在紫色中红的成份较多时，其知觉具有压抑感、威胁感。
2、 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。
3、 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。
六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。
1、 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。
2、 在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。
3、 在白色中混入少量的蓝，给人感觉清冷、洁净。
4、 在白色中混入少量的橙，有一种干燥的气氛。
5、 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉
6、 在白色中混入少量的紫，可诱导人联想到淡淡的芳香
几种国际尺寸的Banner如下：468×60(全尺寸Banner)、392×72(全尺寸带导航条Banner)、234×60(半尺寸 Banner)、125×125(方形按钮)、120×90(按钮类型1)、120×60(按钮类型2)、88×31(小按钮)、120×240(垂直 Banner)，其中468×60的和88×31最多用，下面就常用的为大家讲解一下。
1)468×60 全尺寸Banner
虽然尺寸为国际标准，但是在设计页面的时候，完全可以根据你的页面占用空间来制定Banner广告位和广告条大小。
(1)一个页面内不易超出两个468×60 全尺寸Banner。两个条的时候，一般是上面一个，下面一个，如图4所示。
(2)设计Banner配合页面的两种情况：单看Banner很难看，但是放入网页中，却会使网页设计丰富而炫目，一般也就是468×60的Banner 有这本事了。还有设计的时候必须要考虑LOGO跟别站互换时如何更适合他人网页的风格，所以该多做一些不同颜色不同情况的Banner。
2)88×31的Banner
(1)大家俗称它为LOGO。
(2)好的Banner也要符合网站的风格。经常遇到一个很棒的Banner点开却是很难看的主页。虽然有被欺骗的感觉，但是从行销的角度讲，它设计越好，点击率越高，也就越成功。
(3)如图4中，区域7内的一般的广告条， 88×31 Banner也可以用来丰富页面。这样的情况很少见，值得注意。
3)Banner设计注意点：
(1)Banner有动态和静态两种。在浏览网页的过程中，虽然闪烁的图案会产生瞬间记忆刺激，引起注意，但这种记忆往往为压迫性的，久之易产生负面效 应，从而模糊记忆。而稳定的画面不易引发特殊的关注，但如果有良好的界面引导和内容，可产生良性的记忆，持久而牢固。根据粗略统计，100个Banner 里面有1/3是静态的。看来大家对动态的Banner更加看好。
(2)Banner的“重量”要轻！以468×60的Banner为例，最好是15K左右，不要超过22K。而88×31的Banner最好在5K左右，不要超过7K。
4)设计要点：
(1)Banner的文字不能太多，用一两句话来表达即可。
(2)广告语要朗朗上口。
(3)图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没。
(4)图形尽量选择颜色数少，能够说明问题的事物。
(5)如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑。
(6)尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。
网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景，文字，图标，边框，超链接…，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？
阿捷这里谈一些心得，希望对你有所启发。
首先我们先来了解一些色彩的基本知识：
1.颜色是因为光的折射而产生的。
2. 红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是 color (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的”bgColor=#FFFFFF”就是指背景色为白色。
3.颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。
4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩.
网页制作用彩色还是非彩色好呢？
根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。
我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。
●非彩色的搭配
黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。
●彩色的搭配
色彩千变万化，彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。
一.色环。我们将色彩按”红->黄->绿->蓝->红”依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。
(如下图) 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红 |___________| |____| |_________| |_________| | | | | 暖色系 中性系 寒色系 中性系.
二. 色彩的心理感觉。不同的颜色会给浏览者不同的心理感受
红色—是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。
绿色—介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。
橙色—也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。
黄色—具有快乐，希望，智慧和轻快的个性，它的明度最高。
蓝色—是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)
白色—具有洁白，明快，纯真，清洁的感受。
黑色—具有深沉，神秘，寂静，悲哀，压抑的感受。
灰色—具有中庸，平凡，温和，谦让，中立和高雅的感觉。
每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。
●网页色彩搭配的原理
1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。
2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)
3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。
4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。
●网页色彩掌握的过程
随着网页制作经验的积累，我们用色有这样的一个趋势:
单 色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个 漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自 己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。
○网页色彩搭配的技巧
文章写到这里，有心急的网友要问了：“到底用什么色彩搭配好看呢？你能不能推荐几种配色方案？”别急，这里有一点技巧，可以帮助你迅速成为调色大师:)
1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。
2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择”自定义”，然后在”色库”中选就可以了:)
4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很”跳”。
在网页配色中，忌讳的是：
1.不要将所有颜色都用到，尽量控制在三种色彩以内。其实高手是可以用很多种颜色的，那个要有驾驭颜色的能力了，建议初学的同志们就先控制下。
2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。
《色彩构成》
高长调
对比主色调为高明度的五度以外的对比，有积极、刺激的感觉，对比强烈。
高中调
对比主色为高明度的，三至五度的差的对比，有明快的、响亮的、活泼的感觉。
高短调
对比主色调为高明度的，三度差以内的对比，显得优雅、柔和，有一种女性化的、朦胧的感觉。
中长调
对比主色调为中明度的，五度以外的对比，有强有力的、男性化的阳刚之气。
中中调
对比主色调为中明度的，三至五度差的对比，有含蓄的、丰富的、薄暮般的感觉。
中短调
对比主色调为中明度的，三度差以内的对比，有模糊而平板的、朴素的感觉。
低长调
对比主色调为低明度的，五度以外的对比，有低沉的、具爆发性、晦暗的感觉。
低中调
对比主色调为低明度的，三至五度差的对比，有苦恼的、苦闷感的、寂寞的感觉。
低短调
对比主色调为低明度的，三度差以内的对比，有忧郁的、死寂的、模糊不清的感觉。
最长调
是以黑白两色构成的，明度对比最强的调性，含有醒目的，生硬的，明晰的、简单化等感觉。
作者：阿捷
对于初学者，我们常看见web标准的好处之一是“能做到表现和结构相分离”，那这到底是什么意思呢？我将以一个实际的例子来详细说明。首先我们必须先明白一些基本的概念：内容、结构、表现和行为。
1.内容
内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。举个例子，有下面一段文本是我们页面要表现的信息。
忆 江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。作者介绍772－846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、 同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响 甚大。注释(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋 五十四字，皆平韵。 (2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。品评此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳 处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风 景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意 脉的精彩笔墨。三、四两句对江南之“好”进 行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作 者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇 漾的境界中。
2.结构(Structure)
可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。
标题忆江南(1)
作者 唐.白居易
正文
江南好，风景旧曾谙。(2)
日出江花红胜火，春来江水绿如蓝，(3)
能不忆江南。
节1作者介绍
772 －846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、 同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响 甚大。
节2注释
列表
(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。
(2)谙(音安)：熟悉。
(3)蓝：蓝草，其叶可制青绿染料。
节3品评
此 词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已 甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭 州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作 者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇 漾的境界中。
类似上面标题、作者、章、节、段落和列表，我们就把它称做结构。结构使内容更加具有逻辑性，易用性。
2.表现(Presentation)
虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。下面是对上面文本用表现处理过后的效果:
忆江南(1)
唐.白居易
江南好，风景旧曾谙。(2)
日出江花红胜火，春来江水绿如蓝，(3)
能不忆江南。
作者介绍
772 －846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、 同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响 甚大。
注释
(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。
(2)谙(音安)：熟悉。
(3)蓝：蓝草，其叶可制青绿染料。
品评
此 词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已 甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭 州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作 者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇 漾的境界中。
噢，很明显，我们加了2种背景，将标题字体变大并居中，将小标题加粗并变成红色，等等等等。所有这些，都是“表现”的作用。它使你的 内容看上去漂亮、可爱多了！形象一点的比喻:内容是模特，结构标明头和四肢等各个部位，表现则是服装,将模特打扮得漂漂亮亮。(请原谅我用模特打比方，很 多时候模特比web标准更具有吸引力。)
那么行为是什么？
3.行为(Behavior)
行为就是对内容的交互及操作效果。例如，我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作。这个我就不再举例子了。
所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点“行为”,示意草图如下：
4.传统的HTML方法
传 统的HTML3.2/4.0标签里既有控制结构的标签，例如<title>,<p>，又有控制表现的标签，例如< font>,<b>，还有本意用于结构后来被滥用于控制表现的标签，例如：<h1>,<table>等。结构 标签与表现标签混杂在一起。
例如上面举例的页面，你可能很熟练的2-5个表格来控制边框、背景和文本居中；用<h2>< h3>来定义标题和小节标题；用<font>和<b>来控制字体大小、颜色和粗体。轻而易举地就能制作好页面。聪明些的设 计师还采用CSS样式表来统一控制一些字体的表现。下面的代码是我们最熟悉不过的了：
<table border=”0″ width=”100% “><tr><td align=”center”><h1><font color=”#C61C18″> 忆江南</font></h1></td></tr></table>
传统的方法看上去并没有什么问题。(我们已经很习惯了,从来没有想过会有什么问题。)但是既然W3C放弃HTML，推荐XHTML和XML就一定有它的道理和原因，问题出在哪里？
问题就出在结构层和表现层混杂在一起！当我们只发布一些简单页面，没什么影响。当我们发布了大量页面，问题就来了。
第一个问题是：如何改版。假如由于某些原因我们需要把背景替换成黑色，边框变成1px黄色，文字变成白色，所有文字居中。你可能就要一页一页的修改。好，你说你用了CSS，那么恭喜你，你可以直接修改样式表，轻松实现这样简单的改版。(复杂改版暂且不提。)
第 二个问题是：数据的利用。本质上讲所有页面信息都是数据。当我发布了唐诗300首，宋词100首，就是一个可观的数据库，这个应该不难理解。那么好，是数 据就存在数据查询，处理和交换的问题。假如我所有的页面上都不需要显示“品评”这一小节；假如我要将页面数据转成excel格式；假如我要打印一个干净内 容的页面(不要背景、导航、版权等不相干信息)怎么办？传统的解决方法是：一页一页删除“品评”小节；一页一页地拷贝粘贴到excel，一页一页地制作” 打印友好页”。这样做显然不是有效率的办法。
实际上，第一个问题实质是批量改变”表现”。由于传统HTML方法的结构并不明显，甚至可以视作只有 表现，我们就象设计时尚杂志那样精心画出每一页。严谨的设计师可以控制到每1px的细节。内容与表格紧密的嵌套、混杂在一起，结构只是用表现来表现出来， 而不是用标签。这种设计方法下，任何内容的变化，结构的变化都会影响整个页面的表现，都需要一点一点细节的修改。CSS的出现，一开始似乎就是用来解决” 批量改表现”的问题。大部分的网页设计师已经能够熟练使用CSS来控制字体的大小颜色，超链接的效果，表格的边框等等，已经体会到CSS批量改变表现的效 率。
第二个问题则是无法避免。由于结构和表现混杂在一起(内容被n层的表格拆分)，你无法判断哪个td里面到那个td是你需要的数据，无法剥离其 中夹杂的<font><b>的标签。上例中，从哪里开始是正文？哪里开始是“品评”小节?哪些是附加信息不需要打印？我们都无法 让电脑自己去判断，唯一的方法是人工判断，手工处理。结构和表现混杂在一起，页面就好比是一张图片，你无法让电脑搜索其中的文字。(哦，我听见有人说：我 的站点有全文检索啊。恩，我想说的是，第一,这样的检索效率非常低，你需要滤过整个内容，匹配到你的”检索关键字”，例如，我要查找作者李白，搜索引擎会 检索页面所有文字才能告诉你这页里面含有”李白”，而且不一定出现在作者上。第二，这样的检索对数据处理和交换毫无用处。例如我要将所有作者李白的诗摘出 来，我要给所有作者增加一个肖像图片，这样的搜索毫无帮助。)
对于第二个问题，要如何解决呢？解决的办法就是：结构清晰化，将内容、结构与表现相分离。
5.web标准推荐的方法
对 于内容、结构与表现相分离，最早是在软件开发架构理论中提出来的。QQ用过吧，QQ面板的变更皮肤就是内容不变，外观表现在变化；还有winamp的 skin也是这种原理的典型体现。其实我们大多数的设计师已经在实践中都接触到。我们的动态信息发布系统，实际上就是基于这个原理制作的，设计师只需要设 计模版，程序员将数据(标题、作者、发布日期、摘要、相关文章、相关图片等等)从数据库中读出，嵌入你的模板，形成一个新的页面再展示给浏览者。其中的内 容已经被结构化后分别保存在数据库的不同字段中。例如查找作者，我们只要在作者字段中搜索，这样的效率就提高很多了。
上面都是有赖于程序，如果页 面文档本身就能实现表现和结构相分离，那么数据的交换和再利用不就更方便了。嘿嘿，其实XML就是奔着这个方向去的，XML允许你自己定制结构标识，还提 供了XSLT用来格式化、查询和处理文档内容。例如上面的诗词页面，用XML写出来的代码就象这样：
<标题>忆江南</标题>
<作者>唐.白居易</作者>
<正文>江南好…</正文>
<作者介绍>772－846 ，字乐天…</作者介绍>
<注释>据《乐府杂录》…</注释>
<品评>此词写江南春色…</品评>
这些<标题><作者>都是自己定义的标签，这样文档结构非常清晰，查询和处理也很简单。啊哦，说远了。还是回到目前能应用的web标准方法上。
web标准方法目前推荐大家使用XHTML+CSS来制作网站。目标是使结构与表现彻底相分离。
就 是说，XHTML的标签只用来定义文档的结构，所有涉及表现的东西通通剥离出来，把它放到一个单独的文件里，这个单独的文件就是CSS。(CSS的好处上 面已经讲到，可以批量处理表现)。采用这种方法后，上面的第二个问题中的3个假设困难就迎刃而解。我们可以利用样式表将所有”品评”结构不显示 (DISPLAY: none);我们可以根据页面结构标签将内容自动导入到excel；我们可以设计一个专门的打印样式表，隐藏掉所有附加的信息，只打印干净的内容。就这么 简单。
现在你明白了吧，为什么我们反对用表格设计布局。原因是<table>用于布局的时候，它是一个控制表现的标签。混杂在内容和结构中，使我们的内容数据无法再利用。结构与表现相分离带来的好处主要有：
1.数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关
2.保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版;
3.由于结构清晰，数据的集成、更新和处理更加方便灵活；
4.更有意义的搜索。
好了，说到这，关于表现与结构相分离的概念，您是否有一点理解？如果还是模模糊糊，也不要紧，自己实际制作体验一把，在实践中逐步领会。学习web标准需要循序渐进，阿捷和您一样，也在努力学习中。
要一个符合wbe标准的实际例子？查看本页原代码，讲”表现”概念的那个例子就是用CSS+DIV实现的。样式表的内容直接在本页head区，没有另外单独调用，便于你的查看:)
CSS设置不转行
overflow:hidden 隐藏
white-space：normal 默认
pre 换行和其他空白字符都将受到保护
nowrap 强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
============================================
设置强行换行
word-break:
normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝======
div的高度解决办法
1、设置line-height，例：XX{font-size:1px; float:left; width:100%; height:1px; line-height:1px}
2、设置overflow，例：XX{overflow: hidden; height: 1px}
定义全部链接都是弹出新窗口
一般控制链接在新窗口打开，我们在html中这样做：
<a href =”hezc.com” target=”_blank”>www.hezc.com</a>
可是要是对于同一页面的所有链接都要求在新窗口打开，在每个链接中都要写上target=”_blank”，未免有些烦琐。实际上，我们有很多方法来实现这个功能。
1，可以通过CSS来巧妙实现这个功能，代码如下：
<style>
a:active {
text:expression(target=”_blank”);
}
</style>
2，通过html里的“base”标签实现这个功能
<head>
<base target=”_blank”>
</head>
=============================
用JavaScript能实现关闭当前窗口同时打开新窗口
<input type=”button” value=”原窗口” name=”s”onclick=”set()”>
<input type=”button” value=”退出”onclick=”b_click()”>
<script>
var action=0
function b_click(){
if(action) window.open(“http://www.hezc.com/”,”ew”,”menubars=1″);
else self.location=”http://123shouji.cn/cxt”;
}
function set(){
if(action) {action=0;s.value=”原窗口”;}
else{ action=1; s.value=”新窗口”;}
}
</script>
===========================
关闭当前窗口
＜a href=”/”onClick=”javascript：window.close();return false;”＞关闭</a>
由于受传统观念的影响，很长一段时间里，人机界面一直不为软件开发人员所重视，认为这纯粹是为了取悦用户而进行的低级活动，没有任何实用价值。评价一个应 用软件质量高低的唯一标准，就是看它是否具有强大的功能，能否顺利帮助用户完成他们的任务。近年来，随着计算机硬件技术的迅猛发展，计算机的存储容量、运 行速度和可靠性等技术性能指标有了显著的提高，计算机硬件的生产成本却大幅度下跌，个人计算机日益普及。新一代的计算机用户，在应用软件的可操作性以及软 件操作的舒适性等方面对应用软件提出了更高的要求除期望所用的软件拥有强大的功能外，更期望应用软件能尽可能的为他们提供一个轻松、愉快、感觉良好的操作 环境。这表明，人机界面的质量已成为一个大问题，友好的人机界面设计已经成为应用软件开发的一个重要组成部分。
1人机界面的风格分析
这里所指的人机界面的风格，是指计算机系统的用户界面上控制输入的方法，大致经过了四代的演变：
1.1 命令语言：在图形显示、鼠标、高速工作站等技术出现之前，现实可行的界面方式只能是命令和询问方式，通信完全以正文形式并通过用户命令和用户对系统询问的 响应来完成。这种方式使用灵活，便于用户发挥其创造性，对熟练的用户有很高的工作效率，但对一般用户来说要求高，易出错，不友善并难于学习，它的错误处理 能力也较弱。
1.2菜单选项：这种方式与命令行方式相比不易出错，可以大大缩短用户的培训时间，减少用户的击键次数，可以使用对话管理工具，错误 处理能力有了显著提高。但使用起来仍然乏味，可能出现菜单层次过多及菜单选项复杂的情形，必须逐级进行选择，不能一步到位，导致交互速度显得太慢。
1.3 面向窗口的点选界面此类界面亦称WIMP界面，即窗口(Windows)、图标(Icons)、菜单(Menus)、指示器 (PointingDevice)四位一体，形成桌面(Desktop)。这种方式能同时显示不同种类的信息，使用户可在几个工作环境中切换而不丢失几个 工作之间的联系，用户可通过下拉式菜单方便执行控制型和对话型任务，引入图标、按钮和滚动杆技术，大大减少键盘输入，对不精于打字的用户无疑提高了交互效 率。
1.4自然语言使用自然语言与应用软件进行通信，把第三代界面技术与超文本、多任务概念结合起来，使用户可同时执行多个任务(以用户的观点)。
随着文字、图形、语音的识别与输术技术的进一步发展，多媒体技术在人机界面开发领域内的进一步发展，自然语言风格的人机界面将得以迅速的发展，最终走向实用化。
2人机界面的设计原则
人机界面设计的好坏与设计者的经验有直接有关系，有些原则对几乎所有良好的人机界面的设计都是适用的，一般地可从可交互性、信息、显示、数据输入等方面考虑：
原 则1：在同一用户界面中，所有的菜单选择、命令输入、数据显示和其他功能应保持风格的一致性。风格一致的人机界面会给人一种简洁、和谐的美感。原则2：对 所有可能造成损害的动作，坚持要求用户确认，例如提问“你肯定……?”等，对大多数动作应允许恢复(UNDO)，对用户出错采取宽容的态度。原则3：用户 界面应能对用户的决定做出及时的响应，提高对话、移动和思考的效率，最大可能的减少击键次数，缩短鼠标移动距离，避免使用户产生无所适从的感觉。原则4： 人机界面应该提供上下文敏感的求助系统，让用户及时获得帮助，尽量用简短的动词和动词短语提示命令。原则5：合理划分并高效使用显示屏。仅显示与上下文有 关的信息，允许用户对可视环境进行维护：如放大、缩小图像；用窗口分隔不同种类的信息，只显示有意义的出错信息，避免因数据过于费解造成用户烦恼。原则 6：保证信息显示方式与数据输入方式的协调一致，尽量减少用户输入的动作，隐藏当前状态下不可选用的命令，允许用户自选输入方式，能够删除无现实意义的输 入，允许用户控制交互过程。
上述原则都是进行人机界面设计应遵循的最基本的原则，除此之外还有许多设计原则应当考虑，比如如何正确的使用颜色等。
3人机界面设计的过程
人机界面的设计过程可分为以下几个步骤：
3.1 创建系统功能的外部模型设计模型主要是考虑软件的数据结构、总体结构和过程性描述，界面设计一般只作为附属品，只有对用户的情况(包括年龄、性别、心理情 况、文化程度、个性、种族背景等)有所了解，才能设计出有效的用户界面；根据终端用户对未来系统的假想(简称系统假想)设计用户模型，最终使之与系统实现 后得到的系统映象(系统的外部特征)相吻合，用户才能对系统感到满意并能有效的使用它；建立用户模型时要充分考虑系统假想给出的信息，系统映象必须准确地 反映系统的语法和语义信息。总之，只有了解用户、了解任务才能设计出好的人机界面。
3.2确定为完成此系统功能人和计算机应分别完成的任务
任务分析有两种途径。一种是从实际出发，通过对原有处于手工或半手工状态下的应用系统的剖析，将其映射为在人机界面上执行的一组类似的任务；另一种是通过研究系统的需求规格说明，导出一组与用户模型和系统假想相协调的用户任务。
逐步求精和面向对象分析等技术同样适用于任务分析。逐步求精技术可把任务不断划分为子任务，直至对每个任务的要求都十分清楚；而采用面向对象分析技术可识别出与应用有关的所有客观的对象以及与对象关联的动作。
3.3考虑界面设计中的典型问题
设 计任何一个机界面，一般必须考虑系统响应时间、用户求助机制、错误信息处理和命令方式四个方面。系统响应时间过长是交互式系统中用户抱怨最多的问题，除了 响应时间的绝对长短外，用户对不同命令在响应时间上的差别亦很在意，若过于悬殊用户将难以接受；用户求助机制宜采用集成式，避免叠加式系统导致用户求助某 项指南而不得不浏览大量无关信息；错误和警告信息必须选用用户明了、含义准确的术语描述，同时还应尽可能提供一些有关错误恢复的建议。此外，显示出错信息 时，若再辅以听觉(铃声)、视觉(专用颜色)刺激，则效果更佳；命令方式最好是菜单与键盘命令并存，供用户选用。
3.4借助CASE工具构造界面 原型，并真正实现设计模型软件模型一旦确定，即可构造一个软件原形，此时仅有用户界面部分，此原形交用户评审，根据反馈意见修改后再交给用户评审，直至与 用户模型和系统假想一致为止。一般可借助于用户界面工具箱(Userinterfacetoolkits)或用户界面开发系统 (Userinterfacedevelopmentsystems)提供的现成的模块或对象创建各种界面基本成分的工作。
4人机界面设计的评价
怎样评价一个人机界面设计质量的优劣，目前还没有一个统一的标准。一般地，评价可以从以下几个主要方面进行考虑：(1)用户对人机界面的满意程度；(2)人机界面的标准化程度；(3)人机界面的适应性和协调性；(4)人机界面的应用条件；(5)人机界面的性能价格比。
目 前人们习惯于用“界面友好性”这一抽象概念来评价一个人机界面的好坏，但“但面友好”与“界面不友好”恐怕无人能定一个确切的界线，一般认为一个友好的人 机界应该至少具备以下特征：(1)操作简单，易学，易掌握；(2)界面美观，操作舒适；(3)快速反应，响应合理；(4)用语通俗，语义一致。
需指出，一个用户界面设计质量的优劣，最终还得由用户来判定，因为软件是供用户使用的，软件的使用者才是最有发言权的人。
参考文献：(1)齐治昌，等.软件工程(M).北京：高等教育出版社，1998.(2)王旭，等.Ｃ语言实用界面技术(Ｍ).兰州：西北工业大学出版社，1997.
原文发表于《潍坊学院学报》2002.4，版权归作者及原出处所有！