网页艺术设计初步探讨，网页制作学习
网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。
一、网页艺术设计的内容
设计活动中包含着主观和客观两方面的因素，在确立了网页主题之后，首先要明确和熟悉设计的对象和构成的要素。网页艺术设计涉及的具体内容很多，可以概括为视听元素和版式设计两个方面。
1.视听元素
这里所说的视听元素，主要包括：文本、背景、按钮、图标、图像、表格、颜色、导航工具、背景音乐、动态影像等。无论是文字、图形、动画，还是音频、视频，网页设计者所要考虑的是如何以感人的形式把它们放进页面这个“大画布”里。多媒体技术的运用大大丰富了网页艺术设计的表现力。
以上各视听元素大多数浏览器本身都可以显示或收听，无需任何外部程序或模块支持。比如，大部分浏览器都可以显示GIF、JPEG图形和GIF89a动画。还有些多媒体文件（如MP3音乐）需要先下载到本地硬盘上，然后启动相应的外部程序来播放。另外，在浏览器使用插件（Plug-in）可以播放更多格式的多媒体文件。微软推出IE浏览器后，提供了基于OLE的ActiveX技术，用来在网页中播放多媒体。目前ActiveX已经成为热门技术。另一种播放多媒体的技术是JavaApplet。它是用Java语言编写的应用于网页之中的小应用程序，相比于插件和ActiveX，JavaApplet具有更大的灵活性和良好的跨平台能力，因此具有很好的发展前景。总之，技术的不断发展使多媒体元素在网页艺术设计中的综合运用越来越广泛，使浏览者可以享受到更加完美的视听效果。这些新技术的出现，也对网页的艺术设计提出了更高的要求。
2.版式设计
网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。
但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。
二、网页艺术设计的原则
网页作为传播信息的一种载体，同其他出版物如报纸、杂志等在设计上有许多共同之处，也要遵循一些设计的基本原则。但是，由于表现形式、运行方式和社会功能的不同，网页设计又有其自身的特殊规律。网页的艺术设计，是技术与艺术的结合，内容与形式的统一。它要求设计者必须掌握以下三个主要原则：
1.主题鲜明
视觉设计表达的是一定的意图和要求，有明确的主题，并按照视觉心理规律和形式将主题主动地传达给观赏者。诉求的目的，是使主题在适当的环境里被人们即时地理解和接受，以满足人们的实用和需求，这就要求视觉设计不但要单纯、简练、清晰和精确，而且在强调艺术性的同时，更应该注重通过独特的风格和强烈的视觉冲击力，来鲜明地突出设计主题。
根据认知心理学的理论，大多数人在短期记忆中只能同时把握４到７条分立的信息，而对多于７条的分立信息或者不分立的信息容易产生记忆上的模糊或遗忘，概括起来就是：较小而分立的信息要比较长而不分立的信息更为有效和容易浏览。这个规律蕴含在人们寻找信息和使用信息的实践活动中，它要求视觉设计者的设计活动必须自觉地掌握和遵从。
作为视觉设计范畴一种的网页艺术设计，其最终目的是达到最佳的主题诉求效果。这种效果的取得，一方面通过对网页主题思想运用逻辑规律进行条理性处理，使之符合浏览者获取信息的心理需求和逻辑方式，让浏览者快速地理解和吸收；另一方面通过对网页构成元素运用艺术的形式美法则进行条理性处理，更好地营造符合设计目的的视觉环境，突出主题，增强浏览者对网页的注意力，增进对网页内容的理解。只有两个方面有机地统一，才能实现最佳的主题诉求效果。
优秀的网页设计必然服务于网站的主题，就是说，什么样的网站，应该有什么样的设计。例如，设计类的个人站点与商业站点性质不同，目的也不同，所以评论的标准也不同。网页艺术设计与网站主题的关系应该是这样：首先，设计是为主题服务的；其次，设计是艺术和技术结合的产物，就是说，即要“美”，又要实现“功能”；最后，“美”和“功能”都是为了更好地表达主题。当然，有些情况下，“功能”即是“主题”，还有些情况下，“美”即是主题。例如，雅虎作为一个搜索引擎，首先要实现“搜索”的“功能”。它的主题即是它的“功能”。而一个个人网站，可以只体现作者的设计思想，或者仅仅以设计出“美”的网页为目的。它的主题只有一个，就是——美。
你是否正准备织网或者正在织网的路上？如果是，那么有没有感觉到网络上扑面而来的网站建设资源呢？“他山之石，可以攻玉。”个人的精力毕竟是有限的，“引用”也是硬道理。
一、引用模板，为你的网站搭架
所谓“模板”，就是一个已经基本制作好的HTML网站文件，在网站风格、外观等方面已经比较确定，但在文字、图形、图像、动画内容以及链接等方面留出空隙和余地，填入不同的内容便可形成一个个图文并茂的页面。
◆优秀模板网站推介：
新浪模板：http://vip.sina.com/cgi-bin/pubtmpl/preview.cgi
模板精品店：http://mb.cncss.com/
模板天下：http://www.mbsky.com/main.htm
建站资源网模板：http://www.chinapsd.com/moban/moban.asp
二、引用元素，为你的网站增色
网页元素，包括网页背景、线条、图标、图片、动画、音乐等素材，门类繁多。有一些网站专门制作、搜集和整理了一些网页素材，免费提供给大家使用。除了访问这些专门提供网页素材的网站，您还可以处处留心，访问哪一个网站的时候看到了很好的小东东，就可以随手Download下来，整理一下为自己所用。
◆ 优秀网页素材网站推介：
素材精品屋 ：http://www.sucaiw.com
网页素材图库：http://www.dabaoku.com/sucai/index.htm
殷都图霸-网页素材大全：http://photo.ayinfo.ha.cn/sucai/
好极网GIF动画库：http://www.hooji.com/gifs/
心怡坊素材库：http://pugongying.51.net/
三、引用代码，为你的网站补血
其实，代码也属于网页元素，现在有很多网站都提供免费代码，引用好这些代码，可以为你的网站快速注入新鲜的血液。这些代码按功能可分为：网页特效类、搜索引擎类、计数统计类、新闻系统类、留言论坛类、查询调查类等。结合自己网站的主题和风格，来决定你引用哪些种类的代码，比如有关音乐类的网站可考虑加一个“歌词查询器”，而文学类的可考虑加一个“每日作家简介”，至于计数器、留言本之类的我想每个网站最好都用上。
引用代码，应注意两个问题：一是引用信誉好、服务稳定，而且广告少的代码，对于那些使用频繁的服务尤是如此，不要因为代码而影响了你网站的正常运转。二是引用适度，若在网页上大量引用代码，因页面要启动或连接多个站外服务，速度必会受到影响，一般引用两三个就可以了。
◆优秀免费代码推介：
1．网页特效类
网页特效大全：http://www.webjx.net/js/
2．搜索引擎类
Google搜索: http://www.google.com/intl/zh-CN/searchcode.html
百度搜索：http://www.baidu.com/search/code.html
新浪搜索：http://cha.sina.com.cn/tools/free_code.html
3．新闻系统类
亿唐免费新闻：http://home.etang.com/news/
中华网免费新闻代码：http://app0.china.com/freecode/freenews.php
4．计数统计类
天堂免费计数器：http://www.9617.com/search?www.xcinfo.ha.cn/jsq/login.asp
太极统计：http://www.9617.com/search?www.textclick.com/
5．留言板类
青年文摘留言板：http://www.qnwz.org/ly/reg.asp
酷辣辣留言板：http://my.coolala.net/
6．论坛类
中用网论坛：http://www.9617.com/search?club.chinauser.com/my/
中国职业玩家联盟：http://www.9617.com/search?www.cpgl.net/service/bbs.htm
7．查询类：
股票信息查询：http
当一个人被诊断出患有癌症时，他本人及他的家人都会为这个消息所震惊和绝望。他们需要尽快地得到事实真相，尤其是关于癌症病情的详细情况，包括诊断、治疗、临床研究等等。他们可以通过互联网了解信息，但是被寄予厚望的网络也像患病一样受到了挫折，并不能向人们提供应有的帮助。
一个官方网站CancerNet是国家癌症协会的分支在线网站，它经常成为癌症患者、患者家属以及健康治疗人员的首选网站。尽管这个网站不卖任何药品，但它非常懂得用户服务的概念。实际上，CancerNet是一个以帮助人们获得有价值信息为己任的网站，就这一点来说它的价值超过其它很多以出售药品或提供服务为经营业务的网站。它现在成为了其它网站效仿的对象，它向同行们展示了如何去满足用户的需要，如何去更好的经营一家网站。
“不论用户是为了寻找有关癌症调查的信息还是想要购买一个CD机，只要你把握住了用户的内心需求去经营你的网站你就将是成功的，”Human Factors International的总裁Eric Schaffer如是说。设计一个网站要根据用户如何去使用它，这仿佛听起来像是一个最普通的战略，但是由它创造出来的业绩将是不同寻常的，不仅对政府部门是这样而且对一个网站更是如此。
一年多以前，曾是联邦政府部门国家健康协会下属机构的CancerNet从它所受到持否定态度的反馈意见中意识到它以前没有很好的满足用户的需要。其中一个医生不停地在网站上寻找有关一个男孩患病的有关信息，但无论如何也找不到。这一次触动了CancerNet的领导层，他们决定继续完善网站的服务，通讯畅通是主要目标。网站设计组负责人说，“我们的问题并不在于缺少信息，而在于用户不知到他们所需要的信息究竟在那里能够找到”。这意味着将重新得到设计，并朝着用户所希望的那样去努力。经过重新设计的CancerNet使人耳目一新，但用户们很显然还对这种新型设计有些陌生没有完全适应，也许这需要时间。
比如：CancerNet过去有一个名叫Glossary的栏目，这个组本来就不被人们所注意。尽管改版后它没有多大的变化，但是它的名字已经换了，内容更像一个字典。
其它微妙的变化也在可以表面发掘。CancerNet发现当癌症患者当成病人一样对待时他们就会很不满意，有时候还会以离开网站而结束与外界的接触。因为他们这样认为从网上获得信息的途径比较方便和自由，没有人对你另眼相看。其实这种感觉是错误的，网站也像普通医生一样了解了病人的信息才能够为他们提供更富有价值的信息。
也许网站最大的不好就是把自己的组织结构强加在公众网页上。网页信息使人不能一目了然，反映出结构的混乱。比如：在原来的网站上有一个栏目叫做“了解癌症”，另一个叫做“你需要了解有关癌症的什么知识”。现在的网页上会把原先的两者合二为一，起名为“对付癌症”。老的网站也对现在的公开出版物的‘自由’表示不解。
完美的设计=出色的回报
对于研究机构来说，令人惊喜的地方在于对网站实用性的设计不仅仅会带来浏览者数量的增加，还可以减轻自身的成本。Austin Usability的Randolph Bias博士表示，在整个网站的设计过程当中，资金都会得到充分有效的利用，而不是仅仅在设计完成之后才能体现出经济效益。尽管他没有透露目前用于网站设计的资金的具体数目，但可以肯定的是，一切都在预算之中。大量的人力和财力都得到了节约。更为重要的是，还有130多个网站已经开始表示对网站实用性的关注。
贴近用户所需
尽管没有人不认为应该为了用户把自己的工作质量搞上去，但是要做到这一点似乎也不是一件容易的事。让我们共同关注一组数据。最近Forrester对150家网站所做的一次调查表明，这些生产厂家的网站中只有45%向用户提供了它们产品的部分或者详细介绍。咨询公司User Interface Engineering对在线商店所做的调查中发现，在知名的网站中用户在线购物可以得到金钱上的奖励，即使这样还有65%的购买者都以购物失败而告终。Jakob Nielsen of the Nielsen Norman Group 和 Mark Hurst of Creative Good found联合调查显示，业内六大公司的42%的网上业务都不能完全的完成，其中包括Cisco Systems, Citibank, 和 Proctor & Gamble。
Hurst说,我在这个问题上的研究已经有四年半的时间了,于是我得出一个结论：实用性永远是问题的关键所在。人们不禁会问，自从互联网走进人们的生活已经有六年之久了，为什么网站对人们来说至今使用起来还是那么晦涩。从我与一些资深网站设计人员的谈话中得知，这其中的很多原因源于目前实用性不另人满意的状况。
首先，在过去五年里，集体的智慧占据了主要的因素，人们拼命地向网站和互联网领域涌去，快速建立起一个网站就是最基本的目标。如果有Flash给网站增加一下气氛就已经是难得了，至于质量，是否容易使用等问题都抛在了后面。后来很多公司受到了不断改进的技术的诱惑，开始打算在他们的网站上使用最新、最好的技术工具以赢得用户和赞美。
但是，俗话说得好“心诚则灵”，要获得成功它们还需努力。
要是能够像那些专业站点一样制作出令人心动的网页菜单当然是再好不过的了，如果你并不会这些Javascript技术也没有关系，就由WebMenuShop在短短的几分钟之内让你的主页增色不少。
WebMenuShop是一款用于快速建立网页菜单的软件，可以很轻松的制作形式多样的网页菜单，在制作过程中可以即时预览所得到的菜单内容，并且能够很方便地把菜单保存下来作为他用。而且值得一提的是，整个WebMenuShop的菜单制作流程只有四个步骤，因此很快就能够轻松搞定这一切。
第一步：选择菜单的风格
运行WebMenuShop之后，先在右边的【样式效果】标签下确定菜单的风格。这里提供了水平菜单、竖直菜单和嵌入浏览器三种主菜单样式，而且在点击“高级选项”之后还能够针对主菜单的位置进行设定，例如我们可以通过距离左边和上边的距离来定位菜单在网页中的绝对位置，也能够设定菜单保持在显示区域的固定位置，并不随着滚动条的拖动而改变位置。
针对子菜单而言，这里可以设定子菜单采用普通、滑动或者使淡入淡出的显示方式，还有子菜单显示在主菜单上方还是下方，并且能够设置当鼠标移动到主菜单上就立即显示出子菜单，这样就无需我们点击鼠标来激活子菜单，同时也使得你的主页更加具有人性化。
第二步：定义菜单结构和属性
在进行这一步之前需要提醒大家一个事项：主菜单可以没有子菜单，但是子菜单下不能再有子菜单。点击【结构属性】标签之后，我们最好先点击工具条上的“+”来添加几个子菜单，这些都可以在左边的菜单结构区域中预览到。接着选择主菜单，并在右边的属性设置窗口中分别确定菜单的标题、链接地址、目标框架等内容，而且还能够通过GIF或者是JPEG图片代替菜单标题，这样当鼠标移动到图片上之后就会有子菜单弹出。
设定好主菜单之后，我们再逐一选取子菜单项，同样按照上述的方法设定好相关的属性，同时还能够增加一个状态说明文本，它的作用是在浏览器下部的状态栏中给每个子菜单进行解释，以便浏览者能够明确理解每个子菜单的功能。
在定义菜单结构的时候，如果发现子菜单的顺序颠倒了，不需要重新建立一个子菜单，只要点击工具条中的上下箭头就能够调整菜单的位置顺序，而且通过左右箭头还可以把当前选中的菜单变为主菜单或者是作为上级主菜单下的一个子菜单。有了这个功能的帮助，像笔者一样的马虎人就再也不怕了。
第三步：定义菜单外观
点击【外观】标签来改变菜单的外观尺寸、字体大小和鼠标指针等属性，还能够在每一个菜单项前面添加一个修饰符号，使得菜单看起来更加醒目。由于菜单的外观对于整个页面的影响很大，所以建议大家每做一次修改都通过工具栏中的IE图标来预览一下，然后再有针对性的进行更改设置。
第四步：选择菜单颜色
WebMenuShop默认的颜色为Windows2000菜单颜色，如果你不喜欢的话也可以按照自己的意愿来重新设定，不过这里就需要你有一些艺术细胞了，呵呵。
上面的操作完成之后，点击工具条中的IE图标激活浏览器预览一下，看看效果怎么样？满意之后我们就需要把制作好的菜单添加到网页中了。这时可以按下列步骤进行：
1、把软件所在目录的workspace子目录下的menu.jse、define.js和hr.gif这3个文件拷贝到网页所在目录。
这次我们将深入进去了解一下众多色彩在一起之后所存在的“比例”关系。
我们在使用色彩的时候不可能把所有的色彩都做得一样大小，当然如果你是在排色谱，那是例外。我们在设计网页或是平面作品时我们大多会想好用什么色彩为主色，并找到相关的色彩为辅色。但是往往到实际工作的时候就主辅不分了，也不清楚什么是主什么是辅。结出做出来的东西，色彩杂乱，没有主次！
学习设计的人都想做出好东西，但是往往却事与愿违，从手下出来的作品总是不能达到自己的要求。其中对色彩比例的取舍上总是犹豫不决，结果往往是做出错误的判断。到底我们要怎么做才能做出漂亮的色彩呢。从比例的安排上可以帮助我们得到部分答案！下面看图：以下是一外国网站的截图，这个网站用的色彩不多，白色，黑色，橙红色。不用我说大家都知道什么色彩最多，什么彩色最少！
白色最多，黑色其次，橙红色最少，但是大家有没有发现一个问题，最醒目的不是黑白色，而是橙红色。这至少证明了：色彩多并不一定醒目，色彩少反应容易吸引注意力。
另也是因为黑白色都是无彩色，所以橙红就会显得更加的鲜艳。大家注意到了，这里的比例目测大约是 白70%，黑22%，橙8%
这里我们得到一个结论：越是鲜艳的色彩越是少用，所占的比例一定要少一点！
那什么样的色彩比较要大一点呢？我们可以看一上图与下面的图片，大家一定会有一个比较感性的认识。亚光色、无彩色的比例要战占得多一点。高亮色是不适合大面积出现的而高亮色最好是以很少的比例出现。
相关文章
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程，各位想知道具体制作步骤的使用者们，那么各位就快来看看...2016-09-14
- ps软件是一款非常不错的图片处理软件，有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影，一起来看看设计倒影的方法。 用ps怎么做倒影最终效果̳...2017-07-06
- 这篇文章主要介绍了C语言程序设计第五版谭浩强课后答案(第二章答案),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2021-04-02
- 今天小编在这里就来给Photoshop的这一款软件的使用者们来说下计商务名片的5种常见思路，各位想知道的使用者，那么下面就快来跟着小编一起看一看吧。 给各位Photosho...2016-09-14
- 当来访者浏览器语言是中文就进入中文版面，国外的用户默认浏览器不是中文的就跳转英文页面。 <?php $lan = substr( $HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
- 腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题，要把腾讯视频放到自己的网页有许多的办法，当然一般情况就是直接使用它们的网页代码了，如果你要下载资源再放到...2016-09-20
- 最近在网上看到了新版的360安全卫士，感觉界面还不错，于是用WPF制作了一个，时间有限，一些具体的控件没有制作，用图片代替了。感兴趣的朋友一起跟着小编学习WPF实现类似360安全卫士界面的程序源码分享...2020-06-25
- 这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说下安卓和苹果的界面设计之尺寸规范，各位想知道的使用者们，那么下面就快来跟着小编一起看看吧。 给...2016-09-14
网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别
我们现在使用的软件都会自动在前面加一个申明了，那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢？下面我们就一起来看看吧． 单...2016-09-20- 今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计重影效果具体的制作教程，各位想知道具体制作方法的软件使用者们，那么大家就来看下小编带来的教...2016-09-14
- 本篇文章是对C#中自定义控件的制作与使用实例进行了详细的分析介绍，需要的朋友参考下...2020-06-25
Illustrator结合photoshop设计可爱的卡通女厨师头像制作教程
今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说结合photoshop设计可爱的卡通女厨师头像的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来...2016-09-14- PS怎么设计T恤？很多人都想要在T恤上有自己喜欢的图案，那么自己设计T恤的图案是方法之一，本次为大家带来了详细的ps设计T恤教程，有兴趣的同学快来看看吧。 1、打开PS，新...2016-12-31
- 今天小编在这里就来给photoshop的这一款软件的使用者们来详细的说说设计一张节约用水环保主题海报的制作教程，各位想知道具体制作方法的使用者们，那么下面就快来跟着小...2016-09-14
- ps软件是现在很多人比较喜欢的，通过ps软件可以制作很不错的图片效果。这次文章就给大家介绍下使用ps怎么制作任务影子，具体制作方法下面一起来看看。 ps人物影子效...2017-07-06
- 有没有觉得外面拍的证件照都很丑。那么本文就教大家制作二寸证件照的方法，学会了就能做自己美美的证件照了哈哈！ 步骤 双击打开php,首先教大家制作两寸照片的大小。...2016-12-21
- c#实现51单片机频率计的代码分享,大家参考使用吧...2020-06-25
- 这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 今天小编在这里就来给给各位photoshop的这一款软件的使用者们来说一说设计蜘蛛侠纹理文字效果的制作教程，各位想知道具体制作步骤的使用者们，那么大家下面就来跟着小编...2016-09-14