网站制作 网页导航栏设计技巧

   导航栏最重要的任务是明确指向网站各个部分的内容,但这些内容很难通过一两个关键字来表述清楚,因此采用描述行导航栏可以让访客在点击之前就了解到自己将能看到一些什么内容。
    由于这种导航跟访客的感觉是:有一个向导在做现场解说,因此相对于只有关键字的“无声导航”,有人将描述型导航成为“有声导航”。
    导航栏能让我们在浏览时容易的到达不同的页面,是网页元素非常重要的部分,所以导航栏一定要清晰、醒目,导航的内容既要看上去简单又要能准确向访问者表明意思;如果没有详细的导航引导,用户则很容易在网站中迷失。一般来讲,导航栏要在“第一屏”能显示出来,但是有时第一屏可能会较小,积于这点考虑,那种横向放置的导航栏要优于纵向的导航栏考虑,原因很简单:如果浏览者的第一屏很矮,横向的仍能全部看到,而纵向的就很难说了,因为窗口的宽度一般是不会受浏览器设置影响的,而纵向的则不确定性要大的多。
  首先要考虑的是导航栏的摆放位置、设计风格、所使用的技术手段、导航栏的可用性和易读性,这些都是导航栏制作时需要考虑的参考标准。网站的导航栏的设计,应该也值得我们投入大量的时间来规划和设计,而不是像部分网站设计师那样想当然地随意设置。
 一个漂亮的导航栏样式,是需要JS或者CSS来支持。但是导航栏最重要的功能是导航,而不是好看,所以,我们应该将导航栏设计为在缺失CSS层叠样式表和JS文件的情况下依然能够保持功能的完整性。因为很多PDA移动设备是不支持CSS和JS的,而且目前来说这还比较流行 。
 导航比较不可取,有的公司电脑上没有安装FLASH插件(有可能是出于速度考虑或者安全方面的因素),如果是纯FLASH的导航栏在这样的情况下将完全无法使用,从而导致整个网站失去主心骨。另外,制定一个导航系统可以放置的良好位置是必须的,例如放在一个显眼的地方。一个好的网站导航栏,应该在网页载入后的第一时间就出现,而不需要用户向下滚动网页才能找到。
 网站导航栏的终极设计目标是,不让用户在任何时间产生这样的疑惑:“导航栏在哪?”设计出好的导航栏系统,尽可能减少用户的操作次数,努力而让访问者更加便捷的到达他想要浏览的页面去,这就是网站导航栏的存在价值所在。    我们已深知网站导航条的重要性,通过优秀的网站导航系统,用户可以快速,方便地找到他们需要的信息,搜索引擎可以合理高效的索引网页上的导航。那么如何建立一个清晰的导航结构?从受众体验感角度出发是建立优秀导航条的第一步,网站导航条是网页的核心模块,把导航条放在醒目的位置,例如网站的左、右上角或者网页的正上方位置都是不错的选择。
    网站导航条的内容由logo、一级栏目、回到首页、搜索工具、附加功能等子栏目组成。Logo就是网页中的标记;栏目就是网站结构化后的各个子版块,较大的网站还需要对栏目进行二次分类;回到首页是导航条必不可少的内容,受众如果在网站中迷路,回到首页可以让受众从新开始体验;搜索工具是检验网站先进性的标准之一,没有搜索工具的网站将被淘汰;附加功能包含帮助、网站地图、联系我们等二级导航。最后,导航条包含的各子栏目标题应简单、明了,直接起到导航目的。网站导航条是网页中必不可少的工具,如果运用得到,将给网页带来意想不到传播效果。反之,如果不重视,不科学的设计导航条,那么再精美网页视觉享受都弥补不了用户体验度,所以,一个好的网站导航条,会给用户带来好的体验感受。 

Read More

网站建设中应掌握哪些设计技巧

给一个企业做文化的宣传推广,自然是离不开网站建设的帮忙。但是在进行网站的设计期间,也需要采用合理的方式来帮忙,才能加强设计的技巧取得广泛性的进步和发展。

  设计技巧一:背景图案的选择

  平时在网站建设中,相信也都能了解到消费者看中的不仅仅是产品的文化,而且对于网站的背景图案还是非常看好的。所以平时大家在进行设计加工期间,也可以将优美的图案进行二次的深度加工,这样的做法不仅能够让设计的风格得到更好体现,同时做到吸引眼球的功效。

  设计技巧二:客服设置的合理性

Read More

网页背景设计技巧全攻略

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.复合背景
  如果你在练习上面的“照片背景”时“不小心”也设置了<body>标签里的颜色背景,那么你看到了什么?颜色背景还起作用吗?对,你能看到你的照片浮于你设的颜色背景之上,二者能够同时正常地显示出来。这就是复合背景的魅力,更为吸引人的是,当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候,浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法,就不用我再多说了吧!
  6.局部背景
  前面我们所说的背景都是整个页面的背景,能不能在页面上为某个局部的内容设置属于它自己的背景呢?回答是肯定的。
  最为常见的是在表格的设计当中,我们可以为表格设置一个不同于页面的背景,甚至在不同的表格单元中,我们也可以设置各个表格单元自己的背景。请看下面这个表格例子:
<table border="1" width="240" height="101" bgcolor="#C0C0C0">
<tr>
<td width="80" height="46" bgcolor="#00FFFF"></td>
<td width="80" height="46"></td><td width="80" height="46" bgcolor="#00FF00"></td>
</tr>
<tr>
<td width="80" height="47" bgcolor="#FFFF00"></td>
<td width="80" height="47" bgcolor="#FF0000"></td>
<td width="80" height="47" bgcolor="#FF00FF"></td>
</tr>
</table>
  在浏览器中的显示效果如图所示,可以看到,不但对于表格整个来说有不同于页面的背景,就是每一个单元格也可以设置各不相同的背景。
  除此之外,我们还可以单独为某个文字段落设置背景,甚至为这个文字段落中的某几个文字设置自己的背景,是不是有点相当不错,这也需要用上一些CSS。请先看一下下面的这个例子:
  <HTML><HEAD><TITLE>不仅仅是页面的背景</TITLE><STYLE TYPE="text/css"><!--BODY{BACKGROUND:#FFFFDD;COLOR:red}div{BACKGROUND:red;COLOR:white}--></STYLE></HEAD><BODY><P STYLE="BACKGROUND:black url(../images/bg.jpg);COLOR:black}">
  记得毛主席有这么一首诗:"<div>坐地日行八万里,巡于遥看一千河。</div>"伟人就是了不起,……几万里就出去了。</P></BODY></HTML>
  在浏览器中的显示效果如图所示,现在是不是有点兴奋了,啊,原来文段也可以有自己的背景。只要你愿意,你就可以为页面的任何一个部分定义自己的背景,从而把页面打扮得更加漂亮和吸引人。
  说到这,关于网页背景设计的问题也就说得大概也就差不多了,但新的网页制作技术也在不断涌现,说不定今天你看了这篇文章,明天就觉得它太过时了。笔者写这篇文章,目的是引起广大网页制作者对背景设计的注意,毕竟,背景对网页来说实在是太重要了,当然,网站还是要以内容为第一的。 

Read More

首页设计-内页的设计技巧

一、首页设计技巧 

  网站首页是企业网上的虚拟门面,在此,提醒上网的企业注意自己门面的设计,决不能敷衍了事、马马虎虎。我们会经常看到印刷精美的产品目录或广告,当您屡屡看到那些印有产品目录或广告的精美印刷制品的时候,相信您或多或少会对有关的产品形成一种好感,即使您不会购买,也必然对这些产品形成一定程度的认同。而对于设计毛糙的宣传品,您肯定会怀疑其内容的真实性,从而对其产品或服务产生质疑。好,现在说说网站的设计,相信您会同意这种说法:网站的页面就好比是“无纸的印刷品”。既然如此,我们会因此而得出一个结论:精良和专业网站的设计,如同制作精美的印刷品,会大大刺激消费者(访问者)的购买欲望,反之,您公司所提供的产品或服务将不会给消费者(访问者)留下较好的印象。值得一提的是,除非您的企业有专业的网站规划、设计人员,否则您最好找专业公司或专业人员为您设计制作,一个优秀的专业设计人员会很快明白您的意图,并根据您的建站目的提出建设性的意见。 
  
  一般来说,网站首页的形式不外乎有两种,一种是纯粹的形象展示型,这种类型文字信息较少,图像信息较多,通过艺术造型和设计布局,利用一系列与公司形象和产品、服务有关的图像、文字信息,组成一幅生动的画面,向浏览者展示一种形象、一个氛围,从而吸引浏览者进入浏览。这需要设计者具有良好的设计基础和审美能力,能够努力挖掘企业深层的内涵,展示企业文化。这种类型的首页在设计过程中一定要明确要以设计为主导,通过色彩、布局给访问者留下深刻的印象,当然,我们不能为了设计而设计,我们的目的是营销,在设计过程中一定要牢记这一点!
  
  另一种是信息罗列型,一般的大、中型企业网站和门户网站常用的方式,即在首页中就罗列出网站的主要内容分类、重点信息、网站导航、公司信息等等,也就是我们上面谈到的框架页,这种风格比较适合网站信息量大,内容丰富的网站,因为是以展示信息为主,这是的设计就要在细微之处体现企业形象,建议设计人员最好仔细阅读企业的CI手册,熟悉企业标志、吉祥物、字体及用色标准,在网站的局部体现出来,往往平淡之中一个优美的符合企业特点的曲线就能够给人以深刻的印象,从而将企业形象印在浏览者的脑海里。设计人员在设计过程中要注意使用这些语言符号来表达一种独特的企业信息。

Read More