根据商业利益设计网站,网页制作学习

　　网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。

　　一、网页艺术设计的内容

　　设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页艺术设计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。

　　1.视听元素

　　这里所说的视听元素，主要包括：文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术的运用大大丰富了网页艺术设计的表现力。

　　以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比如，大部分浏览器都可以显示GIF、JPEG图形和GIF89a动画。还有些多媒体文件（如MP3音乐）需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏览器使用插件（Plug-in）可以播放更多格式的多媒体文件。微软推出IE浏览器后，提供了基于OLE的ActiveX技术，用来在网页中播放多媒体。目前ActiveX已经成为热门技术。另一种播放多媒体的技术是JavaApplet。它是用Java语言编写的应用于网页之中的小应用程序，相比于插件和ActiveX，JavaApplet具有更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页的艺术设计提出了更高的要求。

　　2.版式设计

　　网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。

　　但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。

　　二、网页艺术设计的原则

　　网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合，内容与形式的统一。它要求设计者必须掌握以下三个主要原则：

　　1.主题鲜明

　　视觉设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规律和形式将主题主动地传达给观赏者。诉求的目的，是使主题在适当的环境里被人们即时地理解和接受，以满足人们的实用和需求，这就要求视觉设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。

　　根据认知心理学的理论，大多数人在短期记忆中只能同时把握４到７条分立的信息，而对多于７条的分立信息或者不分立的信息容易产生记忆上的模糊或遗忘，概括起来就是：较小而分立的信息要比较长而不分立的信息更为有效和容易浏览。这个规律蕴含在人们寻找信息和使用信息的实践活动中，它要求视觉设计者的设计活动必须自觉地掌握和遵从。

　　作为视觉设计范畴一种的网页艺术设计，其最终目的是达到最佳的主题诉求效果。这种效果的取得，一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。只有两个方面有机地统一，才能实现最佳的主题诉求效果。

　　优秀的网页设计必然服务于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页艺术设计与网站主题的关系应该是这样：首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物，就是说，即要“美”，又要实现“功能”；最后，“美”和“功能”都是为了更好地表达主题。当然，有些情况下，“功能”即是“主题”，还有些情况下，“美”即是主题。例如，雅虎作为一个搜索引擎，首先要实现“搜索”的“功能”。它的主题即是它的“功能”。而一个个人网站，可以只体现作者的设计思想，或者仅仅以设计出“美”的网页为目的。它的主题只有一个，就是——美。

    要是能够像那些专业站点一样制作出令人心动的网页菜单当然是再好不过的了，如果你并不会这些Javascript技术也没有关系，就由WebMenuShop在短短的几分钟之内让你的主页增色不少。

　　WebMenuShop是一款用于快速建立网页菜单的软件，可以很轻松的制作形式多样的网页菜单，在制作过程中可以即时预览所得到的菜单内容，并且能够很方便地把菜单保存下来作为他用。而且值得一提的是，整个WebMenuShop的菜单制作流程只有四个步骤，因此很快就能够轻松搞定这一切。

　　第一步：选择菜单的风格

　　运行WebMenuShop之后，先在右边的【样式效果】标签下确定菜单的风格。这里提供了水平菜单、竖直菜单和嵌入浏览器三种主菜单样式，而且在点击“高级选项”之后还能够针对主菜单的位置进行设定，例如我们可以通过距离左边和上边的距离来定位菜单在网页中的绝对位置，也能够设定菜单保持在显示区域的固定位置，并不随着滚动条的拖动而改变位置。

　　针对子菜单而言，这里可以设定子菜单采用普通、滑动或者使淡入淡出的显示方式，还有子菜单显示在主菜单上方还是下方，并且能够设置当鼠标移动到主菜单上就立即显示出子菜单，这样就无需我们点击鼠标来激活子菜单，同时也使得你的主页更加具有人性化。

　　第二步：定义菜单结构和属性

　　在进行这一步之前需要提醒大家一个事项：主菜单可以没有子菜单，但是子菜单下不能再有子菜单。点击【结构属性】标签之后，我们最好先点击工具条上的“+”来添加几个子菜单，这些都可以在左边的菜单结构区域中预览到。接着选择主菜单，并在右边的属性设置窗口中分别确定菜单的标题、链接地址、目标框架等内容，而且还能够通过GIF或者是JPEG图片代替菜单标题，这样当鼠标移动到图片上之后就会有子菜单弹出。

　　设定好主菜单之后，我们再逐一选取子菜单项，同样按照上述的方法设定好相关的属性，同时还能够增加一个状态说明文本，它的作用是在浏览器下部的状态栏中给每个子菜单进行解释，以便浏览者能够明确理解每个子菜单的功能。

　　在定义菜单结构的时候，如果发现子菜单的顺序颠倒了，不需要重新建立一个子菜单，只要点击工具条中的上下箭头就能够调整菜单的位置顺序，而且通过左右箭头还可以把当前选中的菜单变为主菜单或者是作为上级主菜单下的一个子菜单。有了这个功能的帮助，像笔者一样的马虎人就再也不怕了。

　　第三步：定义菜单外观

　　点击【外观】标签来改变菜单的外观尺寸、字体大小和鼠标指针等属性，还能够在每一个菜单项前面添加一个修饰符号，使得菜单看起来更加醒目。由于菜单的外观对于整个页面的影响很大，所以建议大家每做一次修改都通过工具栏中的IE图标来预览一下，然后再有针对性的进行更改设置。

　　第四步：选择菜单颜色

　　WebMenuShop默认的颜色为Windows2000菜单颜色，如果你不喜欢的话也可以按照自己的意愿来重新设定，不过这里就需要你有一些艺术细胞了，呵呵。

　　上面的操作完成之后，点击工具条中的IE图标激活浏览器预览一下，看看效果怎么样？满意之后我们就需要把制作好的菜单添加到网页中了。这时可以按下列步骤进行：

　　1、把软件所在目录的workspace子目录下的menu.jse、define.js和hr.gif这3个文件拷贝到网页所在目录。

这次我们将深入进去了解一下众多色彩在一起之后所存在的“比例”关系。

我们在使用色彩的时候不可能把所有的色彩都做得一样大小，当然如果你是在排色谱，那是例外。我们在设计网页或是平面作品时我们大多会想好用什么色彩为主色，并找到相关的色彩为辅色。但是往往到实际工作的时候就主辅不分了，也不清楚什么是主什么是辅。结出做出来的东西，色彩杂乱，没有主次！

学习设计的人都想做出好东西，但是往往却事与愿违，从手下出来的作品总是不能达到自己的要求。其中对色彩比例的取舍上总是犹豫不决，结果往往是做出错误的判断。到底我们要怎么做才能做出漂亮的色彩呢。从比例的安排上可以帮助我们得到部分答案！下面看图：以下是一外国网站的截图，这个网站用的色彩不多，白色，黑色，橙红色。不用我说大家都知道什么色彩最多，什么彩色最少！

白色最多，黑色其次，橙红色最少，但是大家有没有发现一个问题，最醒目的不是黑白色，而是橙红色。这至少证明了：色彩多并不一定醒目，色彩少反应容易吸引注意力。

另也是因为黑白色都是无彩色，所以橙红就会显得更加的鲜艳。大家注意到了，这里的比例目测大约是　白70%，黑22%，橙8%

这里我们得到一个结论：越是鲜艳的色彩越是少用，所占的比例一定要少一点！

那什么样的色彩比较要大一点呢？我们可以看一上图与下面的图片，大家一定会有一个比较感性的认识。亚光色、无彩色的比例要战占得多一点。高亮色是不适合大面积出现的而高亮色最好是以很少的比例出现。