网站设计流行风格模板评析：商业清爽型
商业清爽型的风格可以说是国外现在较流行的风格，国内也有不少模仿者，可是往往在色彩调配和细节方面有所欠缺。下面我们举几个商业清爽型网站的例子和大家一起学习一下。
特点评析：上面的网站利用方框构图，简洁明了，图片一般大面积出现，但图片一定要结构清晰，色彩鲜明。
色彩方面多使用大面积浅灰度和白色，以衬托logo和配图的色彩鲜艳，配以高明度小小色块（如导航处）。
因为结构构图简单，细节方面一定要讲究，不适宜有过于复杂的logo和点缀出现，多用简洁明快的几何图形结合。
此类站点非常适合纯flash制作，制作简单，加上适当的动感和鼠标效果，增色不少。
特点评析：一般此类风格背景如果是彩色，都会是低纯度低亮度彩色，以反衬主题图片和logo。
在大面积背景压住的情况下，图片明度越高越好。
画面应该有一个主色调。
注意左下角的logo，有意与背景色调相同，以免抢了视觉中心。很多人容易忽视这个问题。
随着企业intranet和国际internet的迅速发展，越来越多的工作流程，商务交易，教育、培训、会议和讲座，以及个人消费娱乐都被转移到所谓的万维网（World Wide Web，以下简称WEB）上来了。与此相对应的是交互操作的复杂性越来越高。
随着Browser/Server模式的日渐流行，很多操作都是在浏览器环境下的网页上完成的，并不是只有失效的链接和意外的出错才会使操作者感到烦恼，即便是一次完整的成功操作过程，也可能因为操作的繁复性过高或者使用上的不方便而给操作者带来不愉快的体验。
本文试图阐述WEB交互页面设计的一些指导性原则，这些原则有利于避免发生不愉快的操作体验。这些原则是用户友好性的，是在完成同一种操作要求下，使用户最感到轻松、简单、舒适的WEB交互界面设计原则。我们假定我们讨论的WEB页面都是功能正常的，符合美学观点的。需要说明我们讨论的原则可能会和设计上的美学观点以及既有的功能设计有所冲突。如果发生这种情况，基于“实用的就是美的”观点，我们会建议您酌情放弃原先的美学观点与功能设计。
1． 输入控件的自动聚焦和可用键盘切换输入焦点
使用JavaScript实现页面加载完成后立即自动聚焦(focus)到第一个输入控件。可用TAB键（IE缺省实现）或方向键切换聚焦到下一个输入控件。
输入控件指WEB页面表单(<form>)中显式的，需要用户进行修改、编辑操作的表单元素。对于这些控件，如果没有自动聚焦操作，不可避免的出现一次用户鼠标定位操作（如果用户此前处于键盘输入操作状态或鼠标定位后需要进行键盘输入操作，实际上是键盘鼠标切换操作）。如果鼠标定位后需要进行键盘输入操作，如果不能键盘切换输入焦点，那么不可避免的在切换输入焦点时需要反复的键盘鼠标切换操作，这是很繁琐的。
如果实现了页面加载完成即自动聚焦到第一个输入控件，并且可以键盘切换输入焦点标定位操作，那么对于用户来说整个页面的输入操作可能都不需要鼠标操作，或次数较少，这是一种便利。毕竟频繁的键盘鼠标切换操作是比较累人的。
对于有输入栏的对话框或网页，在不干预的情况下就应将当前控制焦点定位在待输入的输入栏上；如果输入栏在一般情况下不需要更改其中的内容，则应直接将焦点定在“确定”按钮上；在几个输入栏之间应支持tab，shift+tab切换操作，“确定”和“取消”应该是切换操作的终点，与具体所在位置无关。
2．可用Enter（或Ctrl＋Enter）键提交，确保和点击提交按钮的效果是相同的
不要在提交按钮上加入onClick=”…”这样的JavaScript代码。
用Enter键提交页面是原则1的自然延伸，而且这也是浏览器所缺省支持的。只所以单独列出来是因为实际上有些设计者设计的页面不能达到这种效果，结果导致使用Enter键提交和点击“确定”按钮提交带来的效果不一样。大部分情况下是设计者在“确定”按钮上加入了onClik=”…”这样的代码，通过点击“确定”按钮后，会执行一段JavaScript代码，比如对某些hidden类型的input元素设值。而使用Enter键提交时就不会执行这段代码。
正确的做法是把这段代码移到表单标签<form>中，以onSubmit=”…”属性引入。
对于<textarea>表单元素，它会消耗Enter键，因此会使得Enter键提交失效。可以引入JavaScript代码捕捉Ctrl+Enter复合键，一旦捕捉到即执行表单的submit()方法。对于需要频繁提交的场合，比如BBS上，这种代码是很有必要的。
3． 鼠标动作提示和回应
对用户的鼠标定位操作，当移动到可响应的位置上时，应给予视觉或听觉的提示。
动作回应的最简单形式就是鼠标ICON变成手状。浏览器只对具有href属性的HTML标签会自动进行这种变换ICON的行为。对于没有href属性（或没有设置href属性）的标签，可以通过JavaScript设置style属性的cursor为hand。
目标区域发生变化是更为主动的响应形式。当鼠标指针移到目标区域，此时指针图形改变或文字颜色发生改变均能较大的减轻用户搜索定位目标区域的注意力负担。在按钮上增添直观的图形，尽可能的增大按钮面积；按钮间保持适当的距离，太近增加了用户区别它们之间界限以防误操作的负担，太远增加了用户搜索定位按钮的负担。
4．尽可能早的在客户端完成输入数据合法性验证
输入数据的合法性检验应该在客户端使用JavaScript进行验证。除非验证只能在服务器端完成，否则验证工作应在最早能完成的情况下进行。
在客户端完成数据合法性验证，可以避免一次服务器请求和回复通讯，这种通讯是需要用户等待的，如果用户等待很长时间后从服务器返回的结果提示出现的错误是在输入时即可发现的，那么这种设计就是不友好的。诸如密码长度限制，用户名允许字符限制等等，显然应该在客户端提交前就应该进行验证。
一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。
二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。
1、 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
2、 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
3、 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
4、 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。
三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。
1、 如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。
2、 在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。
四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
1、 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。
2、 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。
3、 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。
五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
1、 在紫色中红的成份较多时，其知觉具有压抑感、威胁感。
2、 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。
3、 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。
六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。
1、 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。
2、 在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。
3、 在白色中混入少量的蓝，给人感觉清冷、洁净。
4、 在白色中混入少量的橙，有一种干燥的气氛。
5、 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉
6、 在白色中混入少量的紫，可诱导人联想到淡淡的芳香
网页中的背景设计是相当重要的，尤其是对于个人主页来说，一个主页的背景就相当于一个房间里的墙壁地板一样，好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象。如果你经常注意别人的网站，你应该会发现在不同的网站上，甚至同一个网站的不同页面上，都会有各式各样的不同的背景设计。究竟都有哪些不同样式的背景，还有它们的设计方法都是怎样的呢，现在就由我来为大家作一个比较完整的总结。
1.颜色背景
颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于图片背景来说，它有无与伦比的显示速度上的优势。在网页文件中，一般通过<body>标签来指定页面的颜色背景，其HTML语法为：
<body bgcolor="color">
其中的"color"表示不同的颜色，可以用各种不同的颜色表示方法，比较常用的有直接用颜色的英文名称，如blue、yellow、black等等，还可以用颜色的十六进制表示方法，如#0000FF、#FFFF00、#000000等等，此外还可以用百分比值法和整数法，其效果都是一样的。
颜色背景虽然比较简单，但也有不少地方需要注意，如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。
2.沙纹背景
沙纹背景其实属于图片背景的范畴，它的主要特点是整个页面的背景可以看作是局部背景的反复重排，在这类背景中以沙纹状的背景是为常见，所以我们将其统称为沙纹背景。
初学主页制作者都有这样的经历，当试图把自己的照片作为页面的背景是，却发现浏览器上显示出来的不仅仅是一个照片，而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法，利用这一规律我们可以用一小块图片作为页面背景，让它自动在页面上重复排列，铺满整个页面，从而使网页的体积大大减小。
读者到现在恐怕都已经知道了沙纹背景的原理和实现方法，就是找一个小的图片，越小越好，但注意要使最后的背景看起来要像一个整体，而不是若干图片的堆砌。其实现的HTML语法如下：
<body background="picture">
其中的"picture"表示背景图片的URL路径。
3.条状背景
条状背景与沙纹背景是比较相似的，它适用于页面背景在水平或竖直方向上看是重复排列的，而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。
以在竖直方向上排列为例，首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片，其长度与页面的宽度相当。也通过
<body background="picture">
将其设为页面背景，经浏览器显示后，就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。
4.照片背景
把自己或朋友的照片作为页面的背景让大家看到，是有点令人激动的事情，但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢？只有想不到的，没有做不到的，这里我们用上一点简单的CSS。在网页文件的<head>……</head>之间加入下面的CSS语句:
<style type="text/css">
<!--
body{background-image:url(myphoto.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50% 50%}
-->
</style>
这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只需要调整"background-position"的值就可以了。
5.复合背景
如果你在练习上面的“照片背景”时“不小心”也设置?lt;body>标签里的颜色背景，那么你看到了什么？颜色背景还起作用吗？对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法，就不用我再多说了吧！
6.局部背景
前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内容设置属于它自己的背景呢 我相信随着网络技术的普及，现在已经有很多朋友都在 Internet 建立了自己的 “家园” ，但你有没有为那奇低无比的访问量而着急呢！有没有想过改变这种现状呢？今天我就向大家介绍两款不同的软件，通过他们一定能够让你的家园更美丽。
A、网页特效：AnFY
要知道“家园” 不受欢迎的很大程度是因为里面没有炫丽夺目的网页效果，而有的只是平淡无奇的文字,毫无生气的图片等，而现在首先要向你介绍的 AnFY 就是一款可以化腐朽为神奇的网页特效制作软件（http://www.anfyteam.com/ln/chisimp/ajdownl.html）。
将软件下载并且安装之后，我们就可以从开始菜单中启动它了。软件通过向导的方式来建立各种不同的特效，因此我们使用起来不是很复杂。
首先选择要制作的特效所属的大范围，这里一共有六大类供我们可以选择，其中由上到下对应的中文意思是横幅/幻灯片，数学效果图，图形特效， 3D动画，菜单,其它。在每一种其中又包括了相关的几种类型，例如我们这里先选择图形特效（Image effects），然后在下拉菜单中选择 “Water”（水波） ，这也就是图形特效下的一个具体类型，这个时候如果你对所选择的类型制作出来到底是一个什么样的效果还不是很清楚的话，可以点击“Applet preview”来预览程序默认的效果。如果觉得这样还可以的话，那么就可以点击“next”进入下面的设置了（如图1）。
在这里我们就要来添加具体的图形和详细的设置了，点击上方的“Browse”来添加一张自己定义的图片，例如自己的照片啊，然后设置“Resolution”，值为1的时候是默认值，如果该值为2则表示放大一倍，而Width、Heighth的值也会自动随之变化。(如图2)
至于其它的设置值建议大家在初次使用时都保持默认值，就这样根据向导一直点击“Next”一直到(如图3)所示的界面，这个时候我们的Java特效就基本制作完成了，这个时候就可以点击“Preview”来预览我们制作出来的水纹波动的效果，如果没有什么修改的话，就可以把该代码复制之后插入到具体的Html页面中去了
相关文章
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程，各位想知道具体制作步骤的使用者们，那么各位就快来看看...2016-09-14
- 获取网站icon，常用最简单的方法就是通过website/favicon.ico来获取，不过由于很多网站都是在页面里面设置favicon，所以此方法很多情况都不可用。 更好的办法是通过google提供的服务来实现：http://www.google.com/s2/favi...2014-06-07
- ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果̳...2017-07-06
- 这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
- 今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路，各位想知道的使用者，那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
深入解析WordPress中加载模板的get_template_part函数
这篇文章主要介绍了WordPress中加载模板的get_template_part函数,其中重点讲解了其函数钩子的使用,需要的朋友可以参考下...2016-01-14mac下Apache + MySql + PHP搭建网站开发环境
首先为什不自己分别搭建Apache，PHP和MySql的环境呢？这样自己可以了解更多知识，说起来也更酷。可也许因为我懒吧，我是那种“既然有现成的，用就是了”的人。君子生非异也，善假于物也。两千年前的荀子就教导我们，要善于利用工具...2014-06-07- mysql安装成功后有几个默认的配置模板，列表如下： my-huge.cnf ： 用于高端产品服务器，包括1到2GB RAM,主要运行mysql my-innodb-heavy-4G.ini ： 用于只有innodb的安装，最多有4GB RAM，支持大的查询和低流量 my-large.cnf ： 用于...2015-03-15
- 最近在网上看到了新版的360安全卫士，感觉界面还不错，于是用WPF制作了一个，时间有限，一些具体的控件没有制作，用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
- 我要实现的就是下图的这种样式，可参考下面这两个网站的留言板，他们的实现原理都是一样的畅言留言板样式：网易跟帖样式：原理 需要在评论表添加两个主要字段 id 和 pid ，其他字段随意添加，比如文章id、回复时间、回复内容、...2015-11-08
- 1、简介Smarty是一个使用PHP写出来的模板PHP模板引擎，是目前业界最著名的PHP模板引擎之一。它分离了逻辑代码和外在的内容，提供了一种易于管理和使用的方法，用来将原本与HTML代码混杂在一起PHP代码逻辑分离。简单的讲，目...2014-05-31
网站广告怎么投放最好?首屏广告投放类型优化和广告位布局优化的案例
网站广告怎么投放最好?一个网站中广告位置最好的是哪几个地方呢，许多的朋友都不知道如何让自己的网站广告收效最好了，今天我们就一起来看看吧。 在说到联盟优化前,...2016-10-10- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范，各位想知道的使用者们，那么下面就快来跟着小编一起看看吧。 给...2016-09-14
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程，各位想知道具体制作方法的软件使用者们，那么大家就来看下小编带来的教...2016-09-14
- PS怎么设计T恤？很多人都想要在T恤上有自己喜欢的图案，那么自己设计T恤的图案是方法之一，本次为大家带来了详细的ps设计T恤教程，有兴趣的同学快来看看吧。 1、打开PS，新...2016-12-31
Illustrator结合photoshop设计可爱的卡通女厨师头像制作教程
今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说结合photoshop设计可爱的卡通女厨师头像的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来...2016-09-14- 这篇文章主要为大家详细介绍了Ionic默认的Tabs模板使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-09-01
- 今天小编在这里就来给photoshop的这一款软件的使用者们来详细的说说设计一张节约用水环保主题海报的制作教程，各位想知道具体制作方法的使用者们，那么下面就快来跟着小...2016-09-14
- 这篇文章主要介绍了Springboot使用thymeleaf动态模板实现刷新,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-08-31
- 个人网站建设应该考虑哪些问题呢？这个问题我们先在这里不说，下文会一一列出来，希望这些建义能帮助到各位同学哦。 我相信VIP成员里面有很多站长，每个人几乎都拥有一个...2016-10-10