网页设计师的素质

网页设计师的素质（精选12篇）

网页设计师的素质 篇1

网页设计是一门新兴的边缘性的行业, 在网络产生以后应运而生。在网络如此发达的今天, 网页也是五花八门, 千奇百怪。当点击到网站时, 首先映入眼帘的是该网页的界面设计, 如内容的介绍、按钮的摆放、文字的组合、色彩的应用、使用的引导等等。这一切都是网页设计的范畴, 都是网页设计师的工作。

但是今天的网页设计师的风格没有真正的得以体现, 使网页的设计在一个低层次的水平上重复。这样的直接后果是网页作为新的媒体, 本应该是方便人们的使用为目标的, 却有很多的地方不能够使人满意, 有些是功能上的, 例如在按钮或者是导航的设置上, 有些形成了常规的按钮安排方式是令人不方便的。同样在一些用色的规范或者是其它元素的应用限制了设计师作用的发挥, 造成了这样的僵化模式。所以在这个新的时代, 急切的呼唤具有自己的风格的设计师来作出一些更好更方便的网页来。

网页设计师首先必须善于思考, 对设计主张自己的想法和理解, 这是最重要的。别担心你的想法有多“烂”, 没有人能一下子做好的, 但你完全可以做好你的习惯和态度。学会大胆地摸索和尝试自己的想法, 懂得借鉴, 追求属于自己的创意。但是如果在设计时不动脑筋地套网页模板, 套素材, 甚至是盲目模仿和抄袭, 那简直是在摧残你的创造力, 滋养你的惰性, 这样永远无法进步, 而且以后想进步也非常困难。

而我们经常看到一些网页里构图错综复杂, 用色花里胡哨, 让人目不暇接, 真有一种”乱花渐欲迷人眼”的感觉, 但是我们得到了美的享受了吗?当然没有, 首先自己就讨厌, 怎么还谈得上感兴趣?这是一种典型的失败, 一味的追求显眼、追求吸引人, 这种做法取得的效果适得其反。当然并不是页面做得好看, 具有美感网页就一定让人感兴趣, 这也建立在一定好的内容的基础上, 假如什么内容都没有, 也是不能吸引人的。只是网页的界面设计应该还是要以布局的美为标准, 有规律可循, 这也是网页设计师的责任。

网页设计师的素质应该全部是技术方面的吗?所谓素质即精通Photoshop、Corel DRAW、Frontpage、Dreamweaver、Firework、Flash, 会Css、Html、Asp、SQL, 难道这就是一个网页设计师的全部吗?这是一种只追求技术忽视美感的做法势必导致一批粗制滥造的网页。就象现代工业生产制造的工艺品雷同缺乏艺术美感, 让人反而特别渴望手工艺时代。我们也同样可以从网页制作上看到这样的阴影, 这样得不到好的效果。技术不需要吗?当然需要, 而且相当重要, 这要以页面的美 (至少要规范) 为基础。好的网页设计师应该是合理的利用技术, 在不影响美或者是尽量不影响的条件下, 找到一个结合点做出美观而又实用的网页。才能算一个好的网页设计师。

作为一名网页设计师, 一定的文化素质是不可少的, 如文学修养, 好的文案, 不仅仅让人对你所做的网页回味无穷, 也可是自己的网页平添几分艺术特色。当然文化素质不仅仅包括文学修养, 还有音乐和绘画等方面的修养。只有具备一定的这些方面的修养, 才能够使自己网页达到一定的水准, 才能够使人欣赏到好的网页制作。身为一名网页设计师, 还要具备审美的能力, 而网页设计就相当于平面设计, 网页设计师可以将平面设计中的审美观点套用到这上面来 (其区别是动态网页的制作是平面设计不能达到的, 它是一种审美方式的延伸) , 所以平面设计上的审美的观点在网页设计上非常实用。如对比、均衡、重复、比例、近似、渐变以及节奏美、韵律美等等, 以及色彩的搭配, 这些都能在网页上显示出来, 反映设计师高超的审美能力。网页设计师要掌握相关的专业理论知识, 多看专业理论知识以查漏补缺。同时更需要学习各种各样的知识。拥有丰富的知识, 你大脑里的"素材"就越多, 它们都将可能参与到你的设计里, 你的设计才会生动饱满, 富有思想内涵, 所以知名的设计大师们往往都是全才, 他们不仅精通设计, 更精通其他很多领域。

一个网页设计师没有自己的东西, 永远就只能是在一个低水平的层次上徘徊, 或者只是拾人牙慧。永远都没有自己的东西融入到网页设计中, 成就不了好的成绩。设计不是一朝一夕就能成功的, 只有做久了才能拥有出色的设计水平和宝贵的设计经验。既然选择了设计师这个职业, 就要有耐心, 努力做得出色。虽然会遇到很多辛酸苦累, 困难挫折, 但不要退缩与放弃, 没有这些, 你的设计能力如何成长, 你的经验如何获得?所以你需要做的是忘掉它们, 朝前看, 自信地坚持走下去, 你的脚步总有一天会踏上平坦的道路, 到那时, 成功就在你面前向你招手微笑。只有在不断的探索和实践中总结经验, 提高自己的同时树立起自己的独特的设计理念, 才能够开辟出网页设计的新天地。同时也要不断的在形成自己的风格的同时, 尝试一些不同的风格, 寻求突破, ”不破不立”, 只有不断的尝试, 因为只有不断的丰富自己的同时, 才有机会赢得这种尝试的成功。经常有意识的这样去实践, 就有可能达到自己的设计的新境界。

网页设计师的素质 篇2

1、 负责网站设计创意与美化工作;

2、与团队或客户共同沟通完成网站设计页面、创意实施等设计性工作;

3、负责网站的界面和专题页设计与制作;

4、负责网站的整体设计风格与布局。

5、还需负责将网站项目的设计稿切图实现并制作成符合WEB标准的页面，能高效熟练编写HTML及CSS代码，并符合页面标准和规范，确保代码对在IE、Firefox、chromium、Safari各版本浏览器有良好的兼容性;

6、熟悉javascript，jquery，完成页面常规交互动作相关的JS工作，有成功设计经历者优先;

任职要求：

1、大专以上学历，平面设计、美术设计、多媒体设计等相关专业;

2、有1年以上的美工工作经验, 有淘宝店铺美工经验者优先;

3、对时尚和流行把握敏锐，具有良好的艺术设计和创意能力;

浅析网页设计的布局 篇3

页面布局就是在网页设计时把网页的各种构成要素(文字、图片、菜单等等)在页面内有效地搭配。一个精美的网页,不仅体现在页面内容的精彩,还要有效地利用页面的有效显示空间,创造出合理的布局模式。随着网络技术的不断提高,人们对网页的设计要求也越来越高,主要体现在:第一,网页的整体设计。网页的整体设计首先触动的是用户的第一感觉,这种感觉也决定了用户对网页的评价——好或不好。一个好的网页,表现在内容的合理组织、图片的适当使用、色彩的和谐,而这些更说明了页面布局在有效处理这些内容时的重要性。第二,网页的风格设计。现在的网站越来越多,怎么选择适合自己的网站也是用户需要考虑的问题。针对这个问题,页面的风格选择普遍用户所能接受的类型还是自己独特的个性页面,网页设计人员在网页的布局方面也要下相当大的功夫。

由此可见,页面布局在页面设计方面是至为重要的。那么,如何才能使页面布局合理分配呢?这是目前网页设计人员遇到的问题之一。在进行页面设计时,要把页面布局当作第一处理问题。

一、网页布局的基本概念

网页设计,可以说是一种平面设计,要求设计人员把页面内容合理地分布在页面中。每次页面设计,都可以把它看作是在一张白纸上画出我们想要的图案。如果已经掌握画图的方法,那么就可以画出一张漂亮的“图画”,但如果是一个新手,那么有必要首先了解页面布局的基本概念。

1.页面尺寸

由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下的页面范围变得越来越小。常用的分辨率有800×600和1027×768。一般分辨率在800×600的情况下,页面的显示尺寸为:780×428个象素;分辨率在1024×768的情况下,页面的显示尺寸为:1007×600。从以上数据可以看出,分辨率越高,页面尺寸越大。

浏览器的工具栏也是影响页面尺寸的原因。目前的浏览器工具栏一般都可以取消或者增加。当显示全部的工具栏和关闭全部工具栏时,页面的尺寸是不一样的。

在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法。但笔者要提醒大家的是,除非肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏。如果需要在同一页面显示超过三屏的内容,那么最好做上页面内部跳转连接,方便用户浏览。

2.整体造型

什么是造型?造型就是创造出来的物体形象。这里是指页面的整体形象,这种形象应该是一个整体,图形与文本的接合应该是层叠有序。虽然显示器和浏览器都是矩形,但对于页面的造型,可以充分运用自然界中的其它形状以及它们的组合,如矩形、圆形、三角形、菱形等。

对于不同的形状,它们所代表的意义是不同的。例如,矩形代表正式、规则,很多政府网页都以矩形为整体造型;圆形带表着柔和、团结、温暖、安全等,许多时尚站点喜欢以圆形为页面整体造型;三角形代表着力量、权威、牢固、侵略等,许多大型的商业站点为显示它的权威性常以三角形为页面整体造型;菱形代表着平衡、协调、公平,一些交友站点常运用菱形作为页面整体造型。虽然不同形状代表着不同意义,但目前的网页制作多数是结合多个图形加以设计,在这其中某种图形的构图比例可能占得多一些。

3.页头

页头又可称之为页眉,页眉的作用是定义页面的主题。例如,一个站点的名字多数都显示在页眉里。这样,访问者能很快知道这个站点是什么内容。页头是整个页面设计的关键,它将牵涉到下面更多的设计和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。

4.文本

文本在页面中出现都数以行或者块(段落)出现,它们的摆放位置决定着整个页面布局的可视性。

5.页脚

页脚和页头相呼应。页头是放置站点主题的地方,而页脚是放置制作者或者公司信息的地方。许多制作信息都是放置在页脚的。

6.图片

图片和文本是网页的两大构成元素,缺一不可。如何处理好图片和文本的位置成了整个页面布局的关键。

7.多媒体

除了文本和图片,还有声音、动画、视频等其它媒体。虽然它们不是经常被用到,但随着动态网页的兴起,它们在网页布局上也将变得更重要。

了解完基本概念后,就可以知道,在页面设计时考虑的布局,实际就是把以上内容在页面里面进行合理组织排列。

二、常见的网页布局类型

网页布局大致可分为:“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型。

1.“国”字型

“国”字型,也可以称为“同”字型,是一些大型网站喜欢的类型,即最上面是网站的标题以及横幅广告条,接下来是网站的主要内容,左右分列一些两小条内容,中间是主要部分,与左右一起罗列到底,最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是目前网上最多的一种结构类型。

2.拐角型

这种结构与上一种“国”字型结构,其实只是形式上的区别,有相似性。顶端是标题及广告横幅,接下来的左侧是一窄列链接等,右列是很宽的正文,底端也是一些网站的辅助信息。在这种类型中,一种很常见的类型是,顶端是标题及广告,左侧是导航链接。

3.标题正文型

这种类型,即网页顶端是标题,下面是正文。例如,一些文章页面或注册页面等就是这种类。

4.左右框架型

这是一种左右分为两页的框架结构。一般左面是导航链接,有时顶端会有一个小的标题或标致,右面是正文。目前,大部分的大型论坛都是这种结构,一些企业网站也喜欢采用这种左右框架型结构。这种类型结构非常清晰,一目了然。

5.上下框架型

这种结构与上一结构类似,区别仅仅在于是一种上下分为两页的框架。

6.综合框架型

这种结构,是上面两种结构的结合,是一种相对复杂的框架结构。较为常见的是类似于“拐角型”的结构,不同之处只是采用了框架结构。

7.封面型

这种类型基本上是出现在一些网站的首,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅是一个“进入”的链接,甚至直接在首页的图片上做链接而没有任何提示。这种类型大部分出现在企业网站和个人主页,如果处理得好,会给人带来赏心悦目的感觉。

8.Flash型

这种结构,实际上与封面型结构是类似的,只是这种类型采用了目前非常流行的Flash。与封面型不同的是,由于Flash的强大功能,页面所表达的信息更丰富,其视觉效果及听觉效果如果处理得当,绝不差于传统的多媒体。

9.自由型

这种结构是上面几种类型的自由结合与变化。

什么样的布局是最好的?这是初学者可能最先想到的问题。其实,这要具体情况具体分析。如果内容非常多,就要考虑用“国”字型或“拐角型”;而如果内容不太多而一些说明性的东西比较多,则可以考虑标题正文型;框架结构的一个共同特点就是浏览方,速度快,缺点是结构变化不灵;如果是一个企业网站想展示一下企业形象或个人主页想展示个人风采,封面性是首选;Flash型更灵活一些,好的Flash可以大大丰富网页,但它不能表达过多的文字信息。总体而言,网页布局的类型并不是固定不变的,要根据网站需要和设计人员的创作而不断更新。

三、网页布局的技术

页面布局的实现需要掌握几种技术。目前,网页设计的软件使用比较多的是Dreamweaver。在使用Dreamweaver软件设计网页时,一般用于页面布局的技术有以下三种:

1.使用DIV+CSS网页布局

随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法。从实际应用情况来看,此种方法绝对好于表格制作页面的方法。这种布局有其独特的优势:页面载入得更快;降低流量费用;修改设计时更有效率;保持视觉的一致性;更好地被搜索引擎收录;对浏览者和浏览器更具亲和力。

2.表格网页布局

提到网页布局,笔者相信,大多数人都熟悉Dreamweaver MX中的可视化网格布局。表格在网页设计中起着非常重要的作用,一方面组织管理传统的表格数据,另一方面主要用于网页布局的组织。构成网页的HTML代码文档中,将表格的组成分成单元格、行、列,每一部分都有其属性,这样就能实现对象的基本定位。

表格布局好像已经成为一个标准,随便浏览一个站点,都一定是用表格布局的。表格布局的优势在于它能对不同对象加以处理,而又不用担心不同对象之间的影响。表格布局惟一的缺点是,过多使用表格时,页面下载速度会受到影响。

3.框架网页布局

框架结构的页面开始被许多人不喜欢,可能是因为它的兼容性。框架布局最大的优点是层次简单、链接方便,但它的模式较为固定,只有上下型、左右型、左中右型等,缺乏灵活性。

当然,页面布局的技术不止以上3种,每种技术都有它们一定的使用优势。在目前来说,在进行页面设计时,采用的布局技术不是单独采用某种技术,而是几种技术的结合使用,更好地体现每种技术的优势。这样在页面布局时才可以更好地对页面内容进行有效安排。

当前,网络的飞跃发展使得网页设计技术不断提高,也给网页设计人员带来更大的挑战。当设计技术越来越成熟的时候,网页的质量要求也会更高。网页布局在体现网页质量方面是非常重要的因素之一。掌握好网页布局的技术,制作适合用户的布局方案,是每个网页设计人员都应该具备的素质,创作属于自己个性风格的网页布局,是每个网页设计人员的追求。

网页设计师的素质 篇4

1 下拉式菜单的制作

现以DW CS6中Spry菜单栏组件为例说明水平式下拉式菜单的制作过程。

1.1 插入 Spry 菜单栏组件

利用DW的插入菜单或插入面板将Spry菜单栏组件插入到某个Div元素或某表格单元格中,从而固定菜单位置。当Div元素元素宽度为500px时,在DW的网页设计视图中得到如图1所示菜单,默认情况下有4个菜单项。用鼠标选中Spry菜单栏组件,可在窗口下方属性面板修改菜单项,如“项目1”等的名称,通过“+”、“-”按钮增加、删除菜单项,并设置各菜单项对应的链接URL和目标窗口或框架。

1.2 调制菜单项的宽度

如图1所示,默认情况下各菜单项不一定在同一行,这是因为各菜单项宽度和超过Div元素宽度,因此,要调整菜单项宽度。

进入DW的网页代码视图,可找到DW生成的与菜单有关的一段Html代码:

(1)设置整个菜单栏组件的宽度

DW为Spry菜单栏组件生成了一系列CSS规则, 观察上述 代码 , 可发现该 组件所占 宽度可用MenuBarHorizontal选择器对应的CSS规则控制,双击CSS面板中的该选择器,可在CSS规则定义对话框中调整有关属性,如图2所示,可调整“方框”宽度属性为auto或为外部Div元素元素的宽度500px。

(2)设置菜单项的宽度

用鼠标点击菜单项“项目2”的边框线选中该菜单项,然后可在窗口下面的属性面板设置其宽度,单位可为百分比(%)或像素(px),如图3所示,此处设为25%。调整后4个菜单项正好横排占满Div元素。另外,对照DW为Spry菜单栏组件自动生成的CSS规则,可发现菜单项由ul.MenuBarHorizontal li选择器对应的CSS规则控制,同样可用CSS规则定义对话框调整宽度。

子菜单项“项目1.1”等的宽度也可用窗口下面的属性面板设置。另外,也可采用ul.MenuBarHorizontal ul和ul.MenuBarHorizontal ul li同时设置。

1.3 设置菜单项文字的属性

超链接建立在菜单项文字之上,因此,菜单项文字的属性 (字体、背景颜色、对齐方式等) 可用ul. MenuBarHorizontal a选择器对应的CSS规则控制,进行相应设置即可。

经过上述设置后,菜单一般能满足要求。

2 树形目录的制作

树形目录非常适合展示具有层次关系的数据和超链接。Visual Studio 2010[6]、ExtJS等软件含有树形目录组件,但DW CS5、6没有树形目录组件。可以从网络上搜到一些制作树形目录的代码。下文介绍利用bassistance.de网站[7]提供代码压宿包(jquery.treeview. zip)制作含静态树网页的过程。

(1)下载压宿包并解压到自制网站的某个目录下。

(2)在解压生成的演示文件夹demo中含有多个html文件,它们中含有各种形式的树形目录,选择一个最合适的html文件作为模板再修改便可,现假定选中large.html进行编辑。

(3)在网页设计(或代码)视图中将树以外不需要的内容、网页元素删除,得如图4所示原始树目录。

(4)现假设要制作一本书的目录,希望该树目录在浏览器中展开后效果如图5所示。

将图4中原树目录中的条款改成各章、节、款的名称即可,如将“Home”改成“第一章网页设计基础”。不需要的条款可用退格(BackSpace)删除。若要在某条款下增加一条款,则将光标移至该条款后按回车(Enter) 即可。若要调整某条款的逻辑层次,则可选中该条款, 再用属性面板的凸出或缩进按钮调节;但反复调整时,有可能使树形目录在浏览器中不能正常显示,此时可以将所有条款调整为同一层次,即垂直对齐,然后再从上到下重新调整各条款层次;也可进入网页代码视图修改,图4所示树目录正确代码如下:

由此可见,整个树用项目列表元素 <ul>…</ul> 表示,条款x用列表项元素表示,即 <li> 条款x </li>,当条款x后含有子条款时,则子条款构成的树又用项目列表元素表示,且嵌套于列表项元素中,即 <li> 条款x <ul> 子树 </ul> </li>。若标签不符合这种排列组合规律可以手工修改。

(5)利用treeview li选择器对应的CSS规则调整各条款的字体大小等属性。

(6)设置超链接属性。

对超链接有无下划线、颜色等进行控制,可在网页文件代码视图的头元素中添加如下CSS规则表:

在DW设计视图中编辑出如图6所示格式的目录,此目录在浏览器中效果即如前文图5所示。

(7)含树形目录的网页一般与框架网页配合使用, 故此后要设置相应的框架网页。

(8)修改条款上原有的默认超链接或在条款上添加超链接,即设置URL、目标窗口或框架等。

3 结束语

下拉式菜单和树形目录常被用作导航界面组件, 利用它们组织超链接可使网页简洁明了。但是一般的网页制作教材对它们介绍不详细或没有介绍。鉴于这两种导航方式的实用性,在教学中可以超越一般的教材而作出较详细的制作过程介绍,这能被不具备JavaScript、ExtJS、jQuery编程知识的人员所接受。

在介绍网页设计与制作课程时,要鼓励学生充分利用网络上的学习资料和代码资源,决不能拘泥于教材的学习。

摘要：下拉式菜单和树形目录常是两种常用的网页导航界面元素,但一般的网页制作教材介绍不详细或没有介绍。为了满足教学需要,文章介绍了利用DreamWeaver CS 6中的Spry菜单栏组件制作下拉式菜单的过程和利用jquery.treeview插件制作树形目录的过程,该方法不要编写程序,学生易于接受。

网页设计师的素质 篇5

发表者：Sandra Cheng, 网站优化工具产品经理

原文：Make sense of your site: tips for webpage design

发表于：203月16日星期一，上午9:28

在以前，当您收到用户的反馈，需要改动您的网站的时候，您可能需要对网页进行重新设计，现在，您可以在您的网站上进行一系列实验，让用户来决定哪种版本最好，而不是只是跟着感觉走了。这里，我将向您介绍网站实验——同时运行同一网页的多种测试版本来了解哪一种网页方案更奏效。

在开始实验之前，请您先为要做实验的部分设计出几种方案。实验的部分可以是一些小的改变，比如换掉一张图片，或者是大的改变，比如大面积调整您网站的布局或颜色方案。然后，您可以使用谷歌提供的免费工具—— 网站优化工具(中文版)，通过向访问者自动展示网站的不同版本来测试这些不同方案。网站优化工具通过跟踪记录哪一种网站变化最能帮助您实现预定目标，从而能使您了解访问者最喜欢哪种方案版本。您可以把预定目标设为达成销售、吸引用户提交了一个表单或者点击了某个链接，或者其他与您网站的互动形式。事实上，这个过程就像一个简单的实验，并不需要很多复杂的数据分析。

网站实验的结果经常出人意料。比如，我们曾用网站优化工具对Picasa首页进行过一次实验，结果就让我们大吃一惊。在版本A里，我们使用了“免费”这个词，采用了以行动为导向的标题，并且放上了非常漂亮的产品图片。在版本B里，我们删除了图片，用按钮取代了链接，以这个产品能给用户带来的价值为主打理念。如果换作是您，您认为哪种版本能带来更多的Picasa下载呢?

版本A：

版本B：

我们起初预测版本A显然会更胜一筹，因为A版本的图片会很吸引眼球，并且免费的字眼应该看上去很有吸引力。然而，实验数据却表明界面更简明的B版本却是带来下载量更多的。实际上，版本B比版本A多带来30%的下载量!这个例子表明：在有关网站重要决策的时候，有时您是需要依赖数据的，不能凭想当然，

现在，您或许会问自己，“我的网站可能有很多地方需要做实验，我应该从哪里着手呢?” 这里向您提供四点小建议：

建议一：通过8秒测验。用户需要一眼就能理解您网站的主题和目的。访问者通常都很忙，无暇顾及很多细节，您一定不想他们刚来到您的网站上就点击后退按钮吧?

建议二：告诉用户您的网站能给他们带来什么。突出显示您的网站能给用户带来的清晰的、触手可及的实惠(比如，“节省更多!” “收益更多!” “使用我们的产品会让您更好!”)

建议三：使用更有吸引力的图片。您要尽量采用产品的图片而不是一般的图片，使用图标而不是大块的文字，使用按钮而不是链接。请记住，使用低质量的、不相关的图片只会有损您网站的信誉。

建议四：果断地促成销售。帮助您的访问者尽快进行下一步，使这一步骤明确并容易到达，而不是让用户再去费力寻找。关于号召行动的词汇，“立即购买”要比“添加到购物车”更好。

一旦您决定要测试哪个细节(比如号召用户采取某种行动、颜色方案、标题，布局或者视频)，您就可以使用网站优化工具，进行一项实验。对第一次使用网站优化工具的用户来说，我们推荐A/B实验，这是测试某两种版本哪个更奏效。网站优化工具会帮您处理繁杂的数据，并且当它发现某一数据能证明某一个方案明显优于另一个时，能及时向您展示。这些结果将在您每个实验的报告中展示，相应的滑动条将变成红色，黄色或绿色。当滑动条变成绿色的时候，意味着您的两种方案中的某一种已经开始胜出，能够明显地更有助于您实现预先设定的目标：

请记住，实验数据产生的最佳实践也不是完全普适的，他们并不一定是最适合您的网站和访问者的。在过去，人们都是凭主观想法和直觉来决定网站的设计。现在，有了这些有力的工具、数据和曲线，您就可以让您的访问者来告诉您哪种网站设计是最适合您的了。

动态网页设计的原理分析 篇6

关键词：互联网技术；交互式；开放式；静态网页；动态网页

中图分类号：TP39 文献标识码：A 文章编号：1671-864X（2016）05-0288-01

一、动态网页和静态网页的性质和差别

静态网页设计中开发人员将内容设计成静态页面，用户只能顺应网页开发人员设定的内容浏览网页。静态网页中开发人员与用户不能够进行两方的交流。只能进行从服务器传到浏览器的信息传递，网页设计者得不到任何来自浏览者的反馈信息。动态网页运用文件扩展名不仅仅是 HTM，还有PHS、ASP等的文件来设计网页。一方面动态网页的建立需要依靠数据库，这很大程度上节约了网页维护成本。另一方面动态网页能够实现很多动态网页所不具有的功能，如用户注册、登陆、查询以及管理等。

动态网页的和静态网页，两者最主要的区别为 WEB 服务器工作方式的差异。静态网页呈现静态内容是因为 WEB 服务器对接收到的静态网页的请求不做任何处理，直接将其发送到客户浏览器端。在收到动态网页的请求的情况下，WEB 服务器会将相关文件传递给应用程序的服务器，由该服务器翻译和解释，并将解释的结果反馈给客户端的浏览器。动态页面逐渐取代了以往的静态页面，受到大众的追捧。因此，动态网页设计面临更大的挑战，促使我们不断开发新技术来实现动态网页设计。

二、开发动态网页的原理

上文提到我们是依靠数据库来建立起动态网页中可变化内容的，我们不仅可以通过ODSC 调动数据库系统，而且利用SOL 语言实现直接对数据库系统的直接存取。

动态网页不包含 HTNL 标记，它本身自带程序代码。网页的后缀依据所要表现的内容形式的不同而改变。此外，动态网页还可以根据时间以及访问者的不同呈现不同的网页内容。我们日常生活中所用到的BBS，留言板以及聊天室都是动态网页设计的实例。就当前来说，开发动态网页设计的技术有 ASP、PHP、JSP 三类，这三类开发技术的运用，使得动态网页的特点即动态性、交互性和开放性得以体现。

三、动态网页设计技术——ASP，PHP和JSP的比较和分析

（一）ASP 技术的优缺点。

ASP 由微软开发，是一种运用在服务器端的脚本语言，其全称是 Active Server Pages，译成汉语是动态服务页面。利用ASP、HTML 页面和 Active X 相互结合的方式，来编写开放式的Web服务器的工作程序。ASP 的主要优点为形式简单，容易编辑、容易上手、编写不易出错等。

ASP技术运用浏览器/Web服务器/数据库服务器三层构造。用户功能层处理服务器和浏览器、服务器和数据库服务器之间的接口问题，实现Web服务器对用户的响应、解释以及对数据库服务器的访问功能；数据处理层处理数据库服务器与Web服务器的接口问题，实现数据库服务器对Web服务器的访问响应。由于所有的程序不需要在客户浏览器上执行，而是在服务器端直接执行，等到程序执行结束后，服务器把结果反馈给客户浏览器，所以ASP 技术能够解决客户端的浏览器不可以运行已知代码这一问题，减轻了用户端浏览器的压力，保障了交互的实时性。

（二）PHP技术及其特点。

PHP提供类和对象，支持构造器、提取类等。因为PHP的基本思想是面向对象，这也体现了基于Web编程需要很强的面向对象编程能力的事实。PHP是一种跨平台的语言，几乎可以运行在所有环境下，包括Windows，Unix，Linux的Web服务器。

PHP 的使用是免费的，即它是自由运用到在众多平台的。PHP技术具有执行效率高、速度快、耗费较少的优势。PHP 有很多的长处，但同时也有劣势，包括在没有多层次结构支持的情况下，一些大型应用的需求得不到满足；规模空间较小，只能用分布式计算来解决高负荷站点的计算问题，这样很难开发出稳定的站点应用系统。另一方面在PHP的后台数据库改变时，必须对源代码做相应的修改才能运行，增加了系统的维护时间和成本。而且由于PHP主要支持企业层级以下的形式，所以几乎不可能在企业层级和大型站点使用PHP。再加上PHP不能进行编译性质的开发工作，从而不能实现商品化的开发应用。

（三）JSP技术及其特点。

在JSP技术中，设计网页和格式化最終的网页是通过HTML或者XML标识来实现的。Web网页开发人员使用JSP或者小脚本来生成页面上的动态内容。生成的内容由JSP标识和JavaBeans/EJB组件封装，并且被捆绑在小脚本中。脚本都是在服务器端运行的，由W网页管理者和网页开发人员来编辑和使用JSP页面，对脚本的内容不会造成影响。在服务器端，JSP引擎翻译JSP标识和小脚本，形成所请求的内容（如通过访问JavaBeans组件，使用JDBC来访问数据系统），最后把结果以HTML（或XML）网页的方式返回给浏览器。

JSP具有许多优点：

1.适用平台广。JSP可以运行在具有Java虚拟环境下的一切平台。

2.代码执行高效。JSP代码只在第一次被运行时被编译，此后每次执行均不需要再次编译。减少了执行时间，提高了执行效率。

3.代码可移植性好。JSP的生成以Java语言为背景，承接了Java的一切特征。所以在一种平台的机器上运行通过的代码，只要做相应的少许修改，便能够很轻松地在另一种平台的机器上运行成功。

四、总结

PHP、ASP 以及JSP 是目前动态网页设计的三种主要的设计技术。它们都各有千秋，相互抗衡，在当前的动态网页设计中均占有一定的市场。就小型的商业网站、个人网站以及校园网站来说，主要是ASP 和PHP 技术来支撑。而ASP在这几年的迅速发展后逐渐被运用于大型网站的开发。再者由于JSP 以功能强大的 Java为 基础，JSP的灵活性很强，发展前景巨大，被开发并运用于各种大型网站。

参考文献：

[1]宣强.动态网页设计的原理分析[J].信息与电脑（理论版），2013，No.29208：86-87.

[2]程晓旭.动态网页设计技术的分析和比较[J].计算机应用研究，2002，12：153-155.

[3]张洪庆.支持动态页面的快速URL提取方法研究[D].哈尔滨工业大学，2013.

网页设计的色彩运用 篇7

关键词：网页设计,色彩,色彩的作用,色彩运用,色彩搭配

0引言

网页设计是一门新兴的设计类和网络交叉学科, 近几年随着网络的发展而逐渐受到人们的重视。网页以网络为载体, 把各种信息以最便捷的方式传达给受众。在这种标准的需求下, 逐步产生了审美的需求。网页的色彩是树立网页形象的关键之一, 色彩运用的好坏直接影响人们对这个网页的认同度, 网页色彩搭配既是一项技术性工作, 同时也是一项艺术性很强的工作。因此, 设计者在设计网页时除了考虑网页本身的特点外, 还要遵循一定的艺术规律。

1色彩运用

1.1色彩分类

在色彩缤纷的世界里, 人们通过视觉感知到的色彩是非常丰富的。色彩按照种类可以分为原色、间色和复色。就色彩的系别而言, 则可分为非彩色系和彩色系两大类:①彩色系:指包括在可见光谱中的全部色彩, 以红、橙、黄、绿、蓝、紫等为基本色;②非彩色系:指由黑色、白色及黑白两色相融而成的各种深浅不同的灰色系列。

1.2色彩种类

(1) 原色。

原色就是不能用其他颜色混合而成的颜色。我们可以用原色混合成其它各种各样的颜色。基本上原色分为红、黄、蓝3种。这3种颜色当中不能掺杂其它的任何一种颜色。

(2) 间色。

间色就是由两种颜色混合而成的颜色。我们用三原色就可以调出3个间色来。例如, 红色加黄色可以调出橙色, 黄色加蓝色可以调出绿色, 蓝色加红色可以调出紫色。橙色、绿色、紫色称为间色。

这种交错关系构成了色光、颜料与色彩视觉的复杂联系, 也构成了色彩原理与规律的丰富内容。

(3) 复色。

原色就是由一种间色和另外一种原色混合而成的颜色。例如:黄色加橙色为黄橙, 红色加橙色为红橙, 蓝色加紫色为蓝紫, 红色加紫色为红紫, 蓝色加绿色为蓝绿等等。黄橙、红橙、蓝紫、红紫、蓝绿称为复色。

以上的原色、间色和复色就构成了千变万化的色彩世界。我们在运用色彩时可以根据这些特性, 搭配出不同效果的色彩方案。

2网页设计的色彩运用

根据专业的研究机构研究表明, 彩色的记忆效果是黑白的3.5倍, 也就是说, 在一般情况下, 彩色页面较完全黑白页面更加吸引人。通常的做法是:主要内容文字用非彩色 (黑色) , 边框、背景、图片用彩色。这样页面整体不单调, 主要内容也不会让人眼花缭乱。黑白是最基本和最简单的搭配, 白字黑底、黑底白字都非常清晰明了。灰色是万能色, 可以和任何彩色搭配, 也可以帮助两种对立的色彩和谐过渡。

(1) 红色。

红色的纯度高, 引人注目, 有人称之为“火与血”的颜色, 能增高血压, 加速血液循环。用红色为主色的网页不多, 在大量信息的页面里使用大量面积的红色不易于阅读, 但若搭配好的话, 也可以起到振奋人心的作用。过纯的红色容易使人疲劳, 引起人的心理反感, 因此, 一般只有在以节庆为主题的网页中会大面积使用纯红色, 而在其它主题的网页中, 要使用大面积的红色就需要加入白色或暗色调。

(2) 橙色。

橙色在网页中经常被使用, 通常给人一种温馨明快的感觉, 如果将黄色或黄绿色与橙色搭配会使网页呈现出非常好的效果。在各种网站中, 橙色的使用几率比较多, 橙色既能体现一种青春的活力同时也不失稳重。

(3) 黄色。

黄色作为一种主色调, 在网页配色中经常会作为背景色来使用。黄色本身给人一种清爽、明朗的感觉, 所以能够得到大部分人的认可。在一些门户网页中经常会运用到黄色, 黄色会带给人一种积极向上的感觉, 使人身心愉悦。高彩度的黄色与黑色的结合可以达到清晰整洁的效果, 这种配色实例在网页设计十分多见。

(4) 绿色。

绿色通常被认为是象征和平的颜色, 同时也会带给人安静祥和的感觉。在一些与健康相关的网站中经常会用到绿色。用浅绿色作为网页背景色, 可以给人营造一种平静的氛围, 也可以给人一种清凉的感觉。

(5) 蓝色。

蓝色在网页元素中出现的几率是最高的。很多政府门户、学校门户网页都使用蓝色作为背景色。使用蓝色既能达到庄重的效果, 也能给人整洁、轻快的感觉。蓝色与白色、青绿色搭配会使人感到开阔、清凉。很多企业做网页时都选择了蓝色, IBM公司网页就是其中之一。

(6) 紫色。

紫色通常让人有一种神秘的感觉, 在一些个性网页中经常会出现紫色。在一些女性网站中, 经常会使用紫色做为主色调。蓝紫色通常与蓝色一起搭配使用。

(7) 白色。

白色除因明度高而感觉冷外基本为中性色, 明视度与注目度都相当高。白色能满足视觉的生理要求, 因此与其它色彩混合均能取得很好的效果。网页和其它视觉作品不同, 它要求具有较高的阅读可视性, 所以白色使用相当多。

(8) 黑色。

黑色是没有纯度的颜色, 黑色在心理上是一个很特殊的色彩, 它本身无刺激性, 但是与其它色彩配合能增加刺激性。黑色是消极色, 所以单独使用的情况用途不多, 但是与其它色彩配色均能取得较好的效果。

3色彩运用的主要问题

(1) 做网站建设时要选准标准色, 标准色的选择要符合自身特点。

在了解色彩的基础上选择适合自己的标准色。同时, 为了让主页更加丰富多彩、引人注目, 可以在标准色的基础上, 配以不同的辅色。在标准色的基础上搭配不同的辅色, 使得网页看起来丰富而统一。

(2) 在主页选色以前, 要做很多的辅助工作。

例如, 在选色前要充分考虑网站受众的社会背景、心理需求。不同社会背景的人, 对于色彩的感知也是不同的。因此, 网站的设计者要充分考虑网站受众的心理因素和年龄特点, 选择出符合受众心理的标准色。网站的用色要考虑到多方面的需求, 尽可能地吸引访问者的目光, 总结他们满意或者是不满意的原因, 综合考虑。

(3) 在设计网站的时候, 我们应该关注流行色的发展趋势。

每年都会有一些流行色出现, 这是符合大众心理的一些基本色调。在设计网站的时候可以巧妙地加以应用, 这样网页会富有朝气、令人赏心悦目。与此同时, 还要关注网友对网站的评价, 及时进行改进, 这样才会吸引更多的受众, 提高网站点击率。

(4) 在制作网页时, 要凸显自身特色。

不能一味地去迎合大众。我们应该做到在保持自身特色的同时符合大众的心理。目前, 随着网民人数的不断增加, 网民的素质也越来越高, 大多数的网民喜欢选择有特色、风格独特的网站进行浏览。网页设计师在设计网页时, 可以选择体现自己风格的色彩大胆应用。

(5) 网站设计师在设计网站时, 应该更加注重整体效果。

在设计网站页面时, 要更多地考虑平面设计的因素, 把握整体。色彩的明暗、轻重、冷暖, 以及调和色和对比色的应用等都要考虑在内。

参考文献

[1]方宁, 林波, 王英华.Photoshop CS2网页设计和配色实战攻略[M].北京:清华大学出版社, 2007.

[2]王娜.Dreamweaver网页制作与色彩搭配全攻略[M].北京:清华大学出版社, 2006.

[3]于慧, 王崧.新锐网页配色设计与案例分析[M].北京:中国青年出版社, 1991.

《网页前端技术》的课程设计 篇8

1.1 课程的性质

《网页前端技术》是高等职业院校计算机网络专业的一门专业核心课程, 是使学生掌握使用HTML语言和Dreamweaver设计网站, 使用Java Script添加网页动态效果, 使学生掌握网站的开发技能, 是实践性很强且面向实际应用的重要专业课。通过学习《网页前端技术》, 能够提高学生职业技能和素质, 为适应职业岗位和继续学习打下一定的基础。

1.2 课程的作用

本课程的教学目标是使学生能运用所学的网页编程知识, 根据实际问题进行静态网页的创建与维护、Java Script动态网页的编写, 使学生具有HTML静态网页设计与制作的基本能力。

2 课程设计的理念和思路

2.1 课程设计理念

《网页前端技术》课程的实施以工作过程导向为主体, 理论实践结合特征突出。是以学生最终就业为目的的教学过程、着重培养学生的网页设计与制作能力, 强调学生的学中做与在制作网页中的学习创新能力, 实现了理论实践一体化教学目标。

在《网页前端技术》的课程建设中, 以培养学生综合技能为导向, 按照项目案例的实施过程, 给学生设计从简单到复杂、从容易到困难的网页设计案例, 按照循序渐进的学习情景来展开, 教学过程以项目实施的过程为主导, 注重学生网页设计的能力培养。

2.2 课程建设思路

《网页前端技术》的课程建设思路注重专业领域的技术要求, 强调对学生网页设计与美化职业的岗位任职要求, 围绕着学生在网页制作与设计中容易出现的问题, 展开课程体系和教学内容的设计。

《网页前端技术》的课程建设原则:突出学生的实际运用能力, 同时, 以项目任务为载体, 以学生的个性训练和能力培养为主体。

《网页前端技术》的课程建设过程:首先, 针对市场工作岗位的需求, 分析出网站与网页设计人员的工作任务, 进性归纳总结出适合学生的具体项目任务, 然后设计出适合学生的基于工作过程的学习任务和情境。

3 课程设计

3.1 课程目标设计

(1) 能力目标。使学生能熟练运用HTML中的文字、链接、列表、表格、表单和图像;掌握Dreamweaver进行网站的制作与设计操作技能;掌握Javascript脚本编程语言的基本语法知识, 设计出绚丽的网页动态效果, 开发出富有创意的个性网站。

(2) 知识目标。能够了解网站的工作原理;了解WWW和HTTP协议, 掌握HTML和CSS的基本概念和作用;掌握Dreamweaver应用软件的使用功能;掌握表格、表单设计网页的方法;掌握添加网页动态效果的方法。

3.2 课程内容设计

(1) 知识模块划分。对现有知识点进行了解析与重构, 划分出彼此之间联系紧密的HTML网页技术、Css网站布局与样式、Javascript动态行为、网页制作综合实例四大知识模块。

(2) 教学内容设计。教学内容分为四大知识模块:

1) HTML网页技术基础知识。对应的能力目标有:能够独立安装Dreamweaver软件, 能够掌握HTML语言中的各种文本格式、字符格式、段落设置、列表、表单、框架的作用, 能够运用html编写简单的页面。

2) CSS网站布局与样式。对应的能力目标有:能够掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法;能够利用CSS美化网页, 给用户更好的网页体验。

3) Javascript动态行为。对应的能力目标有:能够掌握Javascript的核心语法。能掌握在HTML语言代码中嵌入Java Script代码的方法, 能看懂Java Script特效网页源代码;能够按网页设计技术要求修改和调试Java Script代码;能够使用Java Script语言实现网页特效。

4) 网页制作综合实例。通过HTML、CSS和Java Script的学习, 以及课程中设计到的小案例和项目的制作, 让学生自主创新, 独立制作完成一个门户网站的综合案例。

3.3 教学方法设计

(1) 项目导向法.本课程的教学内容是以学生的网页制作与设计的开发流程为依据展开的。利用计算机技术中的动画视频等先进技术进行教学。

(2) 分组教学.在网页制作与设计的教学中, 每个项目都是以学生实际的网页设计效果为考核目标的, 实践性都比较强, 学习难度较大。在教学中, 采用分组教学的方法, 可以让同学之间遇到问题能够互相探讨, 相互帮助协作完成任务, 进而激发学生学习的自信心和学习兴趣, 增强学生的创新意识, 设计出更具特色的个性网站。

3.4 考核方法设计

学期总评成绩采用百分制, 着重考核学生运用知识解决实际问题的能力。其中, 平时成绩占30%, 项目案例完成情况占30%, 期末项目作品占40%。

4 结束语

通过本课程的学习, 不仅可加强学生对理论知识的感性认识、加深对网站开发的理解, 而且能培养学生的实践技能, 提高网站开发与设计的实践动手能力。另外, 通过项目教学方法的渗入, 使学生在整个项目的进行过程中可以自主的学习, 自己找可以承担的学习任务来完成, 同时也学会了发现问题和解决问题的方法, 发挥了个人的最大能力, 提高自身的创新能力。

参考文献

浅谈网页设计中的文字设计 篇9

1 字体格式设计

1.1 字体

字体本身是带有表情的, 它会将某些特性、某种气息带入网页中, 因此字体的选择尤为重要。常用的字体包括黑体、宋体、楷体、仿宋体、行书、隶书等, 计算机能不能显示某种字体, 主要取决于字库里是否安装了这种字体。对于一般的计算机上网用户来说, 他们使用的字库往往是系统自带的字库, 能显示的也就是常见的几种汉字字体和十多种英文字体, 而其他系统中没有的字体, 在显示的时候会自动转换为自己系统中已有的字体。所以, 在网页设计时, 从加强平台无关性的角度来考虑, 正文内容最好采用默认字体。

1.2 字号

字号可以用磅或像素 (Pixel) 等不同的方式来计算, 一般来说建议采用磅为单位。在网页设计中, 究竟使用哪一种字号比较合适, 并没有一定的要求, 网页设计师可以根据内容和网页整体布局的效果而定。一般情况下, 大多采用12磅的字体大小来显示网页正文;如果有其他的情况, 比如一些综合性的网站, 网站内需要显示的内容过多, 也可以根据网页设计的需要, 考虑使用9磅的字号。再比如标题或其他一些需要强调的地方, 文字可能还会大些, 而有的可能也会更小一些。在文字字号大小的考虑上, 应该注意文字整体使用的协调, 和谐为美, 也是最重要的。

1.3 行距

网页中文字的行间距对文本的可读性和美观设计都有着很大的影响, 适当的行距会直接影响浏览者的视觉效果, 可以引导浏览者转换行与行之间的内容。通常情况下, 根据网页设计的经验, 正文文字与行距的设定比例为10:12, 也就是说, 如果字号为10号的情况下, 行距就设定为12。有的时候为了加强版式的装饰效果, 也可以在设计中适当加宽或缩窄行距, 有的时候会形成一种意想不到的艺术效果。

2 文字的颜色设计

网页设计中颜色的运用除了能够起到强调整体文字中特殊部分的作用之外, 对于整个页面的情感表达也会产生影响。根据专业的研究机构研究表明:彩色的记忆效果是黑白的3.5倍。也就是说, 在一般情况下, 彩色页面较完全黑白页面更加吸引人。那么, 网页制作用彩色还是非彩色好呢?我们通常的做法是:主要内容文字用非彩色 (黑色) , 边框、背景、图片用彩色。这样页面整体不单调, 看主要内容也不会眼花。所以, 首先在网页正文中一般选择默认的颜色, 即白底黑字, 这种简单的搭配, 效果明显, 清晰明了。除了默认颜色的应用外, 如果必须要用到某种颜色时, 也可以采用一些设计技巧来处理。其次, 字体的颜色也要考虑网站的风格和主题, 在不影响风格和主题的前提下, 设计者可以发挥自己的想象力进行创意设计, 利用字体设计带给浏览者新鲜的感觉。第三, 文字颜色的数量一般控制在三种色彩以内, 如果颜色过多, 表面上看起来很花哨, 但缺乏内在的美感。

3 文字的排版设计

文字在网页排版中的设计, 可以采用以下几种。

3.1 左右均齐编排

网页布局时可以采用左中右分块布局, 相应的文字编排也从左到右编排, 左右的宽度齐整, 使人感觉规整、美观、大方, 同时文字结合相应的背景色进行文字颜色的变化, 整齐却不平淡, 交果非常好。如图1所示。

3.2 齐左编排

齐左编排的方法是网页布局的方法, 让每一行的第一个字母都统一在左侧的假设线上, 右边可长可短, 给人优美、自然的节奏感。左对齐的排列方式也适合人们的阅读习惯, 容易产生亲切感。

3.3 齐右编排

与齐左编排相反, 右边的字尾都统一在右侧的假设线上, 与人们的视觉习惯相违背, 但借此标新立异, 新颖、有格调, 成为极具现代意识的版面构成。

3.4 中间对位编排

让每一行都以假设的中心线对齐, 两边任其自由散开, 这种排列方式给人一种庄重、典雅和很强的对称感。

3.5 沿图形编排

让文字沿图形编排, 形成一种新的图形, 增加了图形的层次, 这种排列方式突破了传统的编排方式, 给人独特、新颖的感觉。

3.6 自然段落式编排

在网页布局的控制下, 按照普通书籍的编排方式, 开头空两个字, 结尾顺其自然, 结合图片或者文字字体、颜色、字号等的变化, 也会有意想不到的效果。

4 结束语

文章只是起一个“抛砖引玉”的作用, 大家可以充分发挥想象力, 搭配出更有新意、更醒目的文字效果, 使网页更具有吸引力, 更好的将信息传递给用户。

参考文献

[1]徐涛.网页设计技巧[M].南昌:江西人民出版社, 2009.

[2]王萍.网页中字体艺术性的体现[J].山东青年政治学院, 2007 (8) :23.

[3]吴丽华.浅谈字体设计中的色彩艺术[J].美术大观, 2010 (6) :46.

网页艺术设计中的基础元素设计 篇10

网页的目的就是将其宣传者或倡导者的信息传达给网络的使用者。要实现信息的传达, 必定要通过一些信息元素来表现所要传达的信息, 在人们的日常生活中是通过色彩、文字、图形图像、动画、声音这些元素来完成绝大多数的信息传达和交流的, 这些信息元素的接收是依靠人的视觉和听觉来完成的。还有一少部分是依靠人的味觉、嗅觉、触觉等其他感觉器官来完成。在目前的网络环境中, 信息传达主要依靠人的视觉和听觉来完成, 所以, 网页艺术设计中的基础元素包括了色彩、文字、图形图像、动画、声音这些视听元素。但是随着网络的发展, 大量的网页设计使浏览者眼花缭乱, 如何使你的网页设计有一个强烈的视觉冲击力, 从中脱颖而出, 这是我们设计者经常思考和研究的一个重点。作者认为好的网页设计不仅在技术上要先进, 更要在艺术上达到一定的水平, 使其“美”和“功能”达到高度的统一。设计一个优秀的网站, 构成网站艺术的基础元素就是我们研究的关键。

一、网页艺术设计中的色彩元素

色彩是艺术表现的要素之一, 在网页设计中, 网页给人的第一印象来自视觉冲击, 不同的色彩搭配产生不同的效果, 并可能影响到访问者的情绪。在设计中, 我们根据和谐、均衡和重点突出的原则, 将不同的色彩进行组合搭配来构成美丽的页面。根据色彩对人们心理的影响, 合理地加以应用。按照色彩的记忆原理, 一般暖色较冷色记忆性强。我们所谓的“标准色彩”是指能体现网站形象和延伸内涵的色彩, 要用于网站的标志、标题、主菜单和主色块, 给人以整体统一的感觉。至于其他色彩也可以使用, 但应当只是作为点缀和衬托, 绝不能喧宾夺主。一般来说, 根据网站总体风格的要求定出一至二种主色调, 太多则让人眼花缭乱。适合于网页标准色的颜色有:蓝色, 黄/橙色, 黑/灰/白色三大系列色。

在色彩的应用中我们应遵循以下的技巧与原则:

(一) 由于国家和种族、宗教和信仰的不同以及生活

的地理位置和文化修养的差异等, 不同的人群对色彩的喜恶程度有很大的差异。如儿童习惯对比强烈、个性鲜明的纯颜色;生活在草原上的人喜欢红色;生活在闹市中的人喜欢淡雅的颜色;生活在沙漠中的人喜欢绿色。所以在设计中要充分考虑主要客户群的背景和构成。

(二) 充分了解网站所要传达的讯息和品牌。

选择可以加强这些讯息的颜色。例如, 如果在设计一个强调稳健的金融机构, 那么就要选择冷色系、柔和的颜色, 像是蓝、灰或绿。在这样的情况下, 如果使用暖色系或活泼的颜色, 可能会破坏了该网站品牌。

(三) 页面尽量适应看上去比较淡雅、简洁的色彩, 背

景尽量少用灰暗、深沉的色彩 (除非特殊需要) , 并一定要根据页面的主题来选择主色调。太多的颜色会导致混淆, 也会拉走读者的注意力。

(四) 在阅读的部分使用对比色。

颜色太接近无法产生足够的对比效果, 也会妨碍观众阅读。白底黑字的阅读效果最好。

(五) 用一个色系。

简单地说就是用一个感觉的色彩, 例如淡蓝、淡黄、淡绿;或者土黄、土灰、土蓝。确定色彩的方法各人不同, 我是在photoshop里按前景色方框, 在跳出的拾色器窗中选择“自定义”, 然后在“色库”中选就可以了。

(六) 选择颜色要注意时效性。

同一个色彩很容易充斥着整个市场, 且消费者很快地就对流行色彩感到麻木。但就另外一个角度来看, 你可以使用几十年前的流行色彩, 引起人们的怀旧之情。

(七) 选择色盘时请考虑功能性的颜色。别忘了将关键信息部分建立功能性的颜色, 例如标题和超级链接等。

(八) 注意网站色差问题。

每一个网站开发人员都知道, 即使是网络通用颜色在跨平台显示的时候都会有些不同。记得要校正你的gamma值, 并在不同的作业平台上测试你的色盘。

二、网页艺术设计中的文字元素

文字是人们使用最广泛的信息传达和交换形式, 也是视觉传达设计组成要素之一。文字又是一种无声的语言, 属于视觉符号的一种。这种符号是经过长期的设计演变, 并随着时代的进步, 在使用的过程中又逐渐产生了审美的功能, 这种审美功能是人类经过精心设计而赋予的, 所以文字不仅有它特定的含义, 又有了人们所感知的外在形态, 这样就出现了字体和字体设计。字体设计具有两大最基本的功能:信息传播与视觉审美。

在目前的网络环境中, 虽然大多数网站中都有图形图像、动画、声音等元素, 但文字占的比例还是最大的。一般中文网页默认的字体是宋体。为了体现站点的“与众不同”和特有风格, 可以根据需要选择一些特别字体。制作者可以根据自己网站所表达的内涵, 选择更贴切的字体。需要说明的是:使用非默认字体只能用图片的形式, 因为很可能浏览者的计算机里没有安装特别字体, 那么辛苦设计制作便可能付之东流了。当然, 随着计算机技术的发展, 一些特殊的字体也可以在网络上实现, 不过要在HTML中使用特殊的字体, 但是, 你不可能预测你的访问者在他们的计算机上将看到什么。在你的计算机里看起来相当好的页面, 在另一个不同的平台上看起来可能非常糟糕。一些网站设计员喜欢使用字体来定义特性, 这虽然允许你使用特殊的字体, 但是仍需要一些变通的方法, 以免你所选择的字体在访问者的计算机上不能显示。级联风格表CSS有助于解决这些问题, 但是只有最新版的浏览器才支持CSS。

三、网页艺术设计中的图形/图像元素

图形/图像是网页中的重要组成部分。与文字相比, 它传达的是具象的信息, 展现了抽象概念的实际面貌, 所以显得直观, 也使浏览者易于理解和接受。图形/图像有多种形式, 可处理的方式也比较多。在网页设计时, 要在符合形式美的基础上做灵活处理, 能增强网页的视觉吸引力。

在图形/图像的设计使用上有以下原则:

(一) 在图形/图像的创作手段上, 可以用传统绘画方

式来创作, 也可借助计算机相关绘画软件和数码相机拍摄来创作。在风格上有写实的、卡通的、漫画的、装饰画等风格。

(二) 重复使用图像:

一些网站由于使用大量不重复的图像而错过了使用更好的技巧的机会。在创建商标时, 在网页上多次使用同样的图像是一个好的方法, 并且一旦它们被装入, 以后重新载入就会很快。

(三) 图形/图像格式:

一般web通常使用两种图形/图像格式——GIF和JPG;还有两种格式——PNG和MNG格式, 应用的相对少一些。

(四) 避免使用过大的图像:

不要使用横跨整个屏幕的图像。避免访问者向右滚动屏幕。占75%的屏幕宽度是一个好的建议。

(五) 让用户先预览小图像:

如果不得不放置大的图像在网站上, 就最好使用Thumbnails软件, 把图像的缩小版本的预览效果显示出来, 这样用户就不必浪费金钱和时间去下载他们根本不想看的大图像。

四、网页艺术设计中的动画元素

从网页浏览者的心理学角度来讲, 只有引起浏览者对你的网页的注意, 才有可能比较深入地进入到你的页面内容深处。如何引起浏览者的注意, 并进而让他们进行仔细浏览的行为呢?动画元素将起到举足轻重的作用。动画不但有很强的视觉冲击力, 能吸引浏览者的注意力, 由于它可以在时间维度上延展, 使得它在一定的时间内不仅能传达更多的信息量, 而且能将使我们的网页表现得更加生动, 具有强烈的真实感。

网页上的动画元素主要有GIF动画、FLASH动画、三维动画这三种类型。GIF动画是网络上出现比较早的动画形式, 属于帧动画类型, 每一帧的内容不同。它只能变现256种颜色, 适合制作小型的网络动画, 且大部分浏览器无需插件就可直接播放。GIF动画一般用Image Ready和GIF Animator两款软件制作。FLASH动画是目前网络上使用最广泛的动画形式, 它是矢量动画, 具有数据小、放大不影响动画质量等优点, 所以深受网页上动画设计者的喜爱。

不过, 网页上的动画要与内容有机结合, 确保动画和内容有关联。它们应和网页浑然一体, 而不是干巴巴的。动画并不只是Macromedia Director等制作的东西的简单堆积。

五、网页艺术设计中的声音元素

声音是信息传播的一种基本形式, 它利用人们的听觉器官来接受。但是在网页上我们还是慎用声音, 因为声音的运用也应得到警惕。内联声音是网页设计者的另一个禁地, 过多地使用声音会使下载速度很慢, 同时并没有带给浏览者多少好处。首次听到鼠标发出声音可能会很有趣, 但是多次以后肯定会很烦人。使用声音前, 应该仔细考虑声音将会给你带来什么?

综上所述, 色彩、文字、图形图像、动画、声音这些视听元素是构成网页的基本元素, 只有熟练地掌握了这些元素的运用, 我们才能设计和制作出漂亮而独特的网站页面来。

参考文献

[1]Karen Triedman, Cheryl Cullen (编著) .色彩平面设计.中国青年出版社.[1]Karen Triedman, Cheryl Cullen (编著) .色彩平面设计.中国青年出版社.

[2]王晓峰, 焦燕 (编著) .网页美术设计—原理及实战策略.清华大学出版社.[2]王晓峰, 焦燕 (编著) .网页美术设计—原理及实战策略.清华大学出版社.

浅谈网页的视觉设计原则 篇11

关键词：网页；视觉；设计

0绪论

研究背景：网页设计是随着现代科技发展而产生的新课题，是以技术为基础，美学为导向来对设计元素组合的创作思维活动，网页设计发展初始，设计师更偏重于技术层面的把握，视觉传达艺术设计在网页设计中仅仅局限于板式编排设计上，随着网页技术的普及，网页设计对视觉传达艺术设计的要求又提高到一个新的高度。研究动机：本文力争通过分析网页设计的特点和原则，从而找出网页设计的规律和方向，从理论上为网页设计师提供帮助。目的意义：视觉传达艺术设计将从一个更高的角度来审视和规划网页，使之能从海量的网页中脱颖而出，清晰的表达主题和内容，使受众轻松愉快的接受信息。

1网页设计的特点

网页设计特点概括为以视觉传达艺术设计为统领的多种艺术设计形式相结合的艺术设计活动。

1.1视觉传达艺术设计为统领

视觉传达艺术设计在网页设计中占有重要地位，网页设计首先处理的就是将各种多媒体艺术设计元素有机组合，这就对版式设计有很高的要求，版式设计既要传达主题思想又要反映个人风格，更要让受众得到感官上的美感和精神上的享受，轻松愉悦的从设计形式理解传达内容。网页设计中的版式设计不同于一般的印刷品版式设计，它不是在有固定尺寸的印刷品上进行，也不是利用各种材质和纸张和多彩的油墨，而是通过电脑技术的色光原理实现在电脑屏幕上；印刷品版面设计由设计师单方控制，有成熟的印刷标准，而网页版面由受众参与控制，受众可以根据自己的需要选择电脑屏幕分辨率、浏览器、网页版面大小等，并且因受众使用的电脑不同而显示的有差异。这就要求网页设计师要从更加人性化的角度设计多种方案来控制设计元素的尺寸和排放位置来满足不同受众的客户端最终显示效果，这是网页设计版式设计的难点也是乐点。

1.2多种艺术设计形式相结合

网页设计的元素是多种艺术设计形式的视听元素，视觉方面主要是图片、文本、色彩、以及动画视频等，听觉方面主要是指背景音乐、动画视频配音等。是各种艺术设计专业的综合展示，技术的发展是这些多媒体元素综合运用的前提，不断发展的技术对网页设计师不断提出新的要求，网页设计师要将这些设计元素按照视觉和谐的原则来编排，使表达内容富有表现力，从而使浏览者享受到绚丽的视听效果。

2网页设计的原则

网页设计已经成为现在信息传播的重要途径，由于其特殊的表现形式，有其自己的设计原则和特殊规律，在设计中必须注意三个原则。

2.1鲜明的突出主题思想

通过视觉传达艺术设计清晰地表达网页的意图和要求，并按照审美心理和视觉规律生动活泼、富有感染力的传达给受众是网页设计的目的，主题思想的传达应该是通过艺术加工简化了强有冲击力的视觉形象，简练清晰，富有艺术的感性和认知的理性，满足人们审美的要求和实用的需求。这种突出主题的方式有很多，大都是综合性的使用平面艺术设计的构成学来编排设计网页的空间层次、主从关系、视觉秩序、和元素之间的逻辑来实现。比如从色彩上说：北京市规划委员会的网站，突出的是“规划蓝图”的主题，蓝色给人以理性、开阔、和遐想的意境。北京市测绘设计研究院则采用橙红作为主色调，橙红色是户外工作者的劳动保护色，醒目、鲜明的突出了测绘工作这个艰苦行业的主题。北京市绿化隔离地区管理决策系统采用色是不多见的绿色，绿色在我国政府部门的网站上大面积使用并不多见，但是在绿化隔离地区管理决策系统中使用却恰到好处。很多时候，我们在浏览网页的时候，只能抓住一个页面中的极少数信息，信息大爆炸的网络时代促使我们必须学会在最短的时间去找到最需要的资料。短而分立的资料和信息更容易让受众找到浏览并做进一步的深入学习，博杂不分立的信息很容易让人忽视和忘却。一方面，我们要使用理性思维，对网页信息做逻辑化处理，使之符合大众的心理需求和逻辑思维，使受众快速的理解和接受。

2.2感性和理性的融合

任何设计都有独特的内容和形式，内容是形式的基础和灵魂，形式是内容的表现。内容决定形式，形式反作用于内容，二者完美结合才能是一个优秀的设计。网页分屏、分页、嵌套等特性使设计师有广阔的形式变化处理，但是也使设计师更要把握形式和内容的统一，需要网站在变化中紧紧抓住主题思想，形式为内容服务，实现美感并体现内容，目前有很多网页喜欢炫目的艺术形式，动态的多媒体艺术大量使用的网页中，夸大形式的作用忽视内容，结果导致网页浏览速度变慢，比如：现在很多网站登录时我们会先看到内容，一些图片信息要等一会才会慢慢出现，或者有的会一直显示download，这都是夸大形式，由于技术上还达不到快速浏览效果而造成的内容形式不统一，这样的网站必然影响受众的心情而削弱了访问的积极性。

2.3变化的整体

我们这里谈整体是变化中的整体，“蝉噪林逾静鸟鸣山更幽。”无论是内容和形式都是变化中的整体，一方面，我们要靠整体性让受众快速、轻松地接受信息，给人以和谐的感觉并把品牌和艺术风格传递出去，另一方面，我们要打破整体，从版式、色彩、风格、屏幕等各方面做一些小的调整，使视觉有秩序感和跳跃感。比如我们看中国邮政的网站，整體保持在深绿色的基调中，但也会辅助其他的色彩，使页面富有变化和活力。网页设计不同于书籍设计，在内容上书籍设计是线性思维，但是网页设计有多维性，我们可以在同一个网页中不断切换自己所需要的主题，网页设计要围绕主题，设计清晰的导航，使网页和受众实现互动和交互，通过换肤，不断地整改版面，在保持页面统一的基础上，让受众保持新鲜感。

4结论：技术的艺术和艺术的技术

防止漏报信息的网页设计 篇12

1. 设计思路

博士招生网站利用网页页面让报考考生填写报名表, 服务器中的数据库接收和保存考生填报数据。一方面方便全国各地考生在本地报名、填表;另一方面借此提高招生工作的自动化程度, 减少工作人员对于考生信息的录入操作。

博士报名表填写项目众多, 将其分散在多个网页页面让考生填写。填写完一页, 数据库存储一页数据。为了让考生将所有的网页页面中的报名信息填写完全、防止遗漏, 给每个报考考生设置了一个参数——报名号, 这个参数在招生的后续工作中需要继续使用。完全填写报名表各个项目后, 才能获取这个参数, 以此来控制考生填写所有信息项目, 完成报名信息的采集工作。满足此设计思路的报名数据填写流程如图1所示。

首先设计每页报名数据填写的检验。报名数据页显示部分报名所需填写项目, 并有提交数据到服务器数据库的按钮。考生在报名数据页填写内容, 有几种可能的情况:未填写或未填写完页内项目, 中途退出;页内有未填写项, 就单击提交数据按钮上传数据;完全填写了页内所有项目后上传数据。对于这几种情况的设计分别为:中途退出, 不向数据库传送数据, 数据库内相应报名项仍为空白;只要单击提交按钮, 本页检验系统就进行本页完全填写的检验, 有未填写项, 就会停滞在本页面, 数据库内相应表项仍为空白;本页检验系统进行本页完全填写的检验, 验证全部项目填写后将考生数据存储在数据库中, 为考生打开下一数据页。利用网页设计技术可以实现考生按照网页页面顺序填写分布在各个网页上的信息, 经检验完全填写完本网页页面中的项目后, 才能进入下一网页页面报名项目的填写。否则, 仍然停留在本页面, 等待考生完成各个项目的填写。

对于不熟悉网页设计技术的考生, 将会沿此路径获取报名号, 达到设计目标。对于熟悉网页设计技术的考生, 这里隐含着另外到达获取报名号的路径, 只要知道后续页面文件名, 就可以跳过前面页面设置的检验条件, 进入后续页面, 只要知道了获得报名号页面的文件名, 那么前面各页的检验形同虚设, 让考生全部填写报名信息的设计目标就会落空。其路径如图2所示。

填写报名数据的网页页面设计, 就是要杜绝跳过填写界面, 堵塞网页设计中的漏洞, 确保信息采集任务的完成。

2. 获取报名号的充要条件

假设网页页面的集合P={P1, P2, ……, Pi, ……, Pn}, 共有n页信息需要考生填写。每页考生需要填写的项目的集合是P i={Ai1, Ai2, ……, Ain}, 共有n项信息需要考生填写。每项需要填写的信息Aij填写了逻辑值为真, 没有填写逻辑值为假。每页进行的“本页完全填写”检验为Ai 1∧Ai 2∧……∧Ai n, 即各个填写元素之间进行“逻辑与运算”。那么, 一个页面的集合中, 只有Aij的逻辑值都为真, 与运算的结果才为真, Pi的逻辑值才为真。网页中的填写项目都填写了, 此页的“本页完全填写”检验结果才能为真。如果考生按照页面顺序, 完成了所有项目的填写, 那么P={P1∧P2∧…∧Pi…∧Pn}的逻辑值也为真。

如果第i页面内具有未填写的项目, 提交数据时, 该页的Pi值为假, 数据没有完成向数据库的提交, 页内所有需填写的项目Aij都被还原为空, 其值都为假。即Pi值为真时, Aij逻辑值为真;Pi值为假时, Aij逻辑值为假。

P值为真, 应当作为获取报名号的充要条件。即所有报名数据页的数据全部填写, P值为真, 才能获取报名号;获取报名号时, 所有报名数据全部填写, P值为真。

根据隐含路径的图示可知, 利用隐含路径可以避开P值的检验。隐含路径使得P值为真不能成为获取报名号的充要条件。要保证P值为真确为获取报名号的充要条件, 必须对网页设计进行相应的修改。

在获取报名号时, 应先对P值是否为真进行检验, 将获取报名号的路径控制成唯一。据此, 获取报名号网页设计修改如下图所示。

网页这样修改, 保证了P为真成为获取报名号的充要条件。无论是否存在到达获取报名号页面的隐含路径, 进入获取报名号页面都进行P为真的检验。P为真, 获取报名号;P为假, 不能获取报名号。

3. P的替代集合

上面从理论论证了在获取报名号页面对P值验证, 此时P值为真时所有项目一定完全填写了。但是实际操作中对P值进行检验是不现实的。P集合中的元素是所有报名表的填报项目, 集中在一页进行检验耗时太久。

在这里设定一个新的集合Pa={A1 1, A21, ……, An1}, 其中元素分别取自于集合P1, P2, ……Pn, 共有n个元素。获取报名号页面中的P检验用Pa值的检验代替, Pa作为获取报名号的充要条件。需要证明, 对Pa值的检验完全等价于对P值的检验。

证明:

Pa值为真, 则A11∧A21……∧An1为真, 那么元素A11, A21, ……, An1的值一定都为真。这是由于参加逻辑与运算的各个元素为真时, 逻辑与才能为真。

Ai1为真时, Pi也一定为真。这是因为只有通过了“本页完全填写”的检验, 页内填写项都被完全填写, 未通过“本页完全填写”检验, 页内填写项均为空的设计, 保证了Pi为真, Ai1一定为真P值为真。Ai1为真时, 第i页一定填写完全了, 经过了Pi的检验。

Pa值为真, 则P1∧P2∧……∧Pn的值为真。

Pa值与P值等价。Pa可以作为获取报名号的充要条件。

4. 结果

研究了要保证每页都填写后才得到报名号的充要条件和充要条件的替代集合后, 得到结果:每个数据填充页都要进行数据是否完全填充的检验。在获取报名号的页面, 抽取每个数据填充页的一个项目进行检验, 它们都被填写了, 则所有数据都被填写了。这样就可以获得报名号。否则, 仍然有未填写的项目, 不能获取报名号。在此设置了充要条件, 弥补了隐含路径的漏洞。

5. 结论