让你的网页更具“人性”

编者注：设计技术的发展，带来了网页世界的繁荣。尤其在崇尚个性的今天，设计师们更是将页面设计表现的淋漓尽致。我们欣喜的看到那些僵化的设计模式正在被逐个打破，网页设计充满了生机。但是，作为网页设计师，不能一味的只追求个性的体现，还必须兼顾到用户的习惯，在体现自己的风格的同时，在功能上使用户更加方便。
　　　　　　接下来我们会建议您如何从这些看似微不足道的细节着手，让您的网页贴近用户，你会发现。设计一个更有人情味的页面其实也不是那么困难……

　　　　　　如何改进设计可用性的小技巧

　　　　◇ 缩略图

　　　　　　缩略图是对一个完整的图片的概述。如何合理的制作所略图，是否只需将原图按比例缩小就行了呢？答案是否定的，问题的关键在于：通过这张图片，你究竟想告诉用户什么…… 不断的裁剪和强调你的缩略图所要表达的意思。展示你最想表达给用户的那部分信息。这可以提高用户信任度。

　　　　◇ 在这个上面点击

　　　　　　您的首页很酷，为了不破坏首页的风格，您将您的链接做的很隐蔽，但是，您不能奢望您的浏览者有足够的时间和耐心去用鼠标展开地毯式的搜索,那么，为什么不在一开始做好呢…… 　当它出现在网上时，我们得告诉用户去做什么。在可点击的图片上放置"Click here"，可以告诉用户，如果他们点击这张图片，就可以得到关于此方面信息的更多的内容。图片上没有任何信息表明这张图带有链接。因此，我们需要在上面添"Click Here"的字样，告诉用户这张图片是可以点击的。我们可以在"Click Here"前面加一个小圆点，以区分于上面的文字。明确的告诉用户这是一个链接或者给他们更多的信息，能提高可用性。　

　　　　◇ 面包屑导航

　　　　
　　　　　　如果您的站点有很多信息，或者一个站点有许多子目录，您可能会需要面包屑式导航。它们可以让用户知道他们现在在哪里，并且可以返回到他们想要的层次上…… 面包屑导航通常位于下图所示的位置。用户可以决定是否直接单击Products跳转到新产品目录或者回到CD目录，查看CD的标题。他们仅需单击一次就能到达他们所要去的地方。

　　　　◇ 小菜单的可用性

　　　　　　现在我们在网上会看见很多迷你的菜单，它们看上去都非常酷，但是请多体贴一下你的用户，尽可能明显的区分用户当前正点击在哪个选项上……当鼠标经过时，背景变成绿色并且文字颜色变白。使你非常清楚地知道哪个是你当前正点到的选项，它更有利于网上浏览。可以使用Javascript 的"OnMouse Over"事件来实现。尽可能明显的区分用户当前正点击在哪个选项上。这也包括在图片上加上"Alt"属性。

　　　　◇ 鼠标滑过

　　　　　　如果您的页面上有一个鼠标经过事件，那么，为什么不把他做的更加明显一点呢？您不会是想让您的用户自己去猜想那里是否存在着一个事件吧……如果把鼠标经过按钮做得更加明显，用户会比较喜欢点击。

　　　　◇ 菜单和指示标记

　　　　　　为了增强HTML菜单的可用性，请尝试下面的技巧…… 我们常会看到这样的链接。它的问题是链接居中，并且没有箭头标记。把你的所有文本和链接对齐。这样，页面就看起来更有组织、更整齐。把你的链接和上面的LOGO对齐。看上去好多了，但是还有一个问题。我们需要箭头标记。没有它们，就不太容易区分和文章中的其它链接。用指示标记是为了表明这里的每个链接都是一个单独的项目。如果由于某些原因，你不能使用指示标记,那么你需要调整链接的行间距，这使用户能够容易的进行区分。子菜单标记和主菜单标记有所不同，链接颜色也有所不同。子菜单的链接没有主菜单链接重要，通过链接的颜色及标记，使它们容易地被区分开来。

　　　　◇ 标注按钮

　　　　　　在安排标签时，通常遵循长的单词优先。因为，如果你不这样做的话，就会……

　　　　

　　
　　网页制作技巧集锦

　　 ——作者：不详

　　
　　◇如何在网页中加入单个或几个空格？
　　　　◆在源代码中输入，每个之间请用空格分开。
　　　　◆在Dreamweaver中用<CTRL>+<SHIFT>+<SPACE>插入空格或任输几个字符，然后将其色彩设成背景的色彩！

　　　　◇如何在网页中加入书签，在页面内任意跳转？
　　　　◆在源代码中需要插入书签的地方输入<a name="top"></a>，在调用的地方输入<a href="#top">Top</a>，其中的top是你设定的书签名字。
　　　　◆在Dreamweaver中用菜单的「Insert」-「Name Anchor」命令插入书签，调用时，在Link中输入#top，top为书签名。

　　　　◇如何在网页中加入书签，在多个页面之间任意跳转？
　　　　◆方法与上面类似，不过做链接时要在书签名前加上网页文件名，如：other.htm#top，这样一来就会跳转到other.htm页面中的top书签处。

　　　　◇将网页加入收藏夹？
　　　　◆请使用如下代码：（注意标点符号）
　　　　< a href=''''#'''' onclick="window.external.addFavorite(''''http://www.haojw.om'''',''''【梦想天空】qiangwei.126.com 各种网页工具教程DW、FLASH、FIREWORKS及CGI教学、聊天交友……'''')" target="_top">将本站加入收藏夹< /a>

　　　　◇如何去掉链接的下划线？
　　　　◆在源代码中的<HEAD>…</HEAD>之间输入如下代码：
　　　　<style type="text/css">  < /style>
　　　　◆在Dreamweaver中用「Text」-「Custom Style」-「Edit Style Sheet」-「New」-Redefine HTML Tag中选择a，然后在decoration中选中none

　　　　◇如何将网页定时关闭？
　　　　◆在源代码中的<BODY>后面加入如下代码：
　　　　< script LANGUAGE="JavaScript">  < /script>
　　　　在代码中的60000表示1分钟，它是以毫秒为单位的。

　　　　◇如何设置命令来关闭打开的窗口？
　　　　◆在源代码中加入如下代码：
　　　　< a href="/" onclick="javascript:window.close(); return false;">关闭窗口< /a>

　　　　◇如何制作电子邮件表单？
　　　　◆在<FORM>中输入Action="youremail@XXX.XXX" ，提交采用POST方法。

　　　　◇如何自动加入最后修改日期？
　　　　◆在源代码中的<BODY>…< /BODY>之间加入如下代码：
　　　　< Script Language="JavaScript">< /Script>

　　　　◇如何在网页中加入EMAIL链接并显示预定的主题？
　　　　◆代码：< a href="yourmail@xxx.xxx?Subject=你好">Send Mail< /a>

　　　　◇如何让背景图象不滚动？
　　　　◆代码：<BODY Background="bg.gif" Bgproperties="fixed" >
　　　　◆在Dreamweaver中用「Text」-「Custom Style」-「Edit Style Sheet」-「New」-Redefine HTML Tag中选择Body，然后在Background中的Attachment里选fixed

　　　　◇如何避免别人将你的网页放入他的框架（FRAME）中？
　　　　◆在源代码中的<HEAD>…< /HEAD>之间加入如下代码：
　　　　<script language="javascript">< /script>

　　　　◇如何在网页中加入注释？
　　　　◆代码：< !-- 这是注释 -->

　　　　◇如何定义网页的关键字（KeyWords）？
　　　　◆格式如下：
　　　　< meta name="keywords" content="dreamweaver,flash,fireworks">
　　　　content中的即为关键字，用逗号隔开
　　　　◆在Dreamweaver中用「Insert」-「Head」-KeyWords命令

　　　　◇如何为不支持框架的浏览器指定内容？
　　　　◆在源代码中加入下面代码：
　　　　< BODY><noframes>本网页有框架结构，请下载新的浏览器观看< /noframes></ BODY>

　　　　◇如何使表格（TABLE）没有边框线？
　　　　◆将表格的边框属性：border="0"

　　　　◇如何隐藏状态栏里出现的LINK信息？
　　　　◆请使用如下代码：
　　　　< a href="http://www.haojw.om" onMouseOver="window.status=''''none'''';return true">梦想天空< /a>

　　　　◇如何为网页设置背景音乐？
　　　　◆代码：< EMBED src="music.mid" autostart="true" loop="2" width="80" height="30" >
　　　　src：音乐文件的路径及文件名；
　　　　autostart：true为音乐文件上传完后自动开始播放，默认为false（否）
　　　　loop：true为无限次重播，false为不重播，某一具体值（整数）为重播多少次
　　　　volume：取值范围为"0-100"，设置音量，默认为系统本身的音量
　　　　starttime："分：秒"，设置歌曲开始播放的时间，如，starttime="00:10"，从第10开始播放
　　　　endtime： "分：秒"，设置歌曲结束播放的时间
　　　　width：控制面板的宽
　　　　height：控制面板的高
　　　　controls：控制面板的外观
　　　　controls="console/smallconsole/playbutton/pausebutton/stopbutton/volumelever"
　　　　·console：正常大小的面板
　　　　·smallconsole：较小的面板
　　　　·playbutton：显示播放按钮
　　　　·pausebutton：显示暂停按钮
　　　　·stopbutton：显示停止按钮
　　　　·volumelever：显示音量调节按钮
　　　　hidden：为true时可以隐藏面板

　　　　◇如何定时载入另一个网页内容？
　　　　◆在源代码中的<HEAD>…< /HEAD> 加入如下代码：
　　　　< meta http-equiv="refresh" content="40;URL=http://www.haojw.com" >
　　　　40秒后将自动载入http://www.haojw.com所在的网页

　　　　

　　
　　让网页里的提交按钮变得更靓丽

　　 ——作者：不详

　　
　　　　你是不是觉得自己的主页不够靓丽，想让它有所改变呢？听说过样式表格吗？就是CSS，它就是那个能让你更为准确地控制网页的东东。让我们先来看两个例子：

　　　　1、把按钮的背景由灰色变成黄色，下面是代码：

　　　　〈form method="POST"〉

　　　　〈input type="button" value="按钮" name="B1" style="background-color: rgb(255,255,0)"〉

　　　　〈/p〉

　　　　〈/form〉

　　　　
　　　　“form”标签就是表单的标签，“type”就是说明按钮的类型，这里说明按钮是普通的命令按钮。然后，请注意，重要的东西来了！ “style”说明这里采用了一个样式表单，而“background-color”是用来声明按钮的背景颜色属性的，后面的“rgb”则给了它的属性值，在这里“(255,255,0)”表示是黄色。

　　　　2、把按钮文字的颜色变成红色，字体变成楷体，代码如下：

　　　　〈form method="POST"〉

　　　　〈input type="button" value="按钮" name="B1"

　　　　style="background-color:rgb(255,255,0); font-family:楷体_GB2312; color: rgb(255,0,0)"〉〈/p〉

　　　　〈/form〉

　　　　
　　　　看一下是不是多了些什么东西？对了，多了两个属性：“font-family”和“color”，前一个是字体属性，后一个是字体的颜色属性，它们的值分别是：楷体_GB2312和rgb(255,0,0)，说明文字是红色的楷体字，好了，通过这个例子来了解一下什么叫做样式表单。

　　　　首先，什么叫样式表单呢？如果你使用过Word就知道只需要设置一次版面配置和打印格式，那么在该文件内所有的页面都具有了相同的格式，而样式表单起的也就是这个作用，在同一个网站只需要提供一份样式表单，然后在所有页引用它，那么整个网站都会有相同的格式。样式表单一共有三种。

　　　　第一种是外部网页样式表单。它是一个以CSS为后缀名的文件，相当于一个模板，设置好以后只需要在网页内部引用它，就能够使引用的网页具有相同的格式。

　　　　第二种是内嵌式的网页样式表单，它一般在申明，它只对本网页起作用，同时如果你已经使用了外部样式表单，那么它将被内嵌式的网页样式表单屏蔽。

　　　　第三种叫做内联式样式表单，用于一段文字，一个表格，或者是一幅图形。在前面，我们用的就是这种样式表单，请注意，它通常是接在一个我们比较熟悉的HTML标签之后，比如前文的“input”标签，以“style”开头，后面跟着一些属性和属性值。并且借助它们来准确地控制这个标签。属性与属性值之间以冒号隔开，属性与属性之间用分号隔开。

　　　　好了，有了以上的理论知识，我们再来联系一下实际，下面我们再看一个比较复杂的例子：

　　　　〈form method="POST"〉

　　　　〈input type="button" value="按钮" name="B1"

　　　　style="font-family: 隶书; font-size: 9pt; background-image: url

　　　　(’file:///D:/Inetpub/wwwroot/asp/www

　　　　boad/IMAGES/asp400.jpg’); border-left: medium ridge rgb(128,0,0); border-right: medium none rgb(128,0,128); border-top: medium none rgb(0,255,0); border-bottom: medium ridge rgb(255,0,0)"〉

　　　　〈/p〉

　　　　〈/form〉

　　　　
　　　　其实，形式和我前面讲的是一样的，只不过多了几种属性而已，“font-family: 隶书;Font-size: 9pt;”用来说明按钮文字是9PT大小的隶书，按钮的背景是一幅图画，用了一个“background-image”属性。接下去用了一个“border-left”属性说明按钮的左边框是隆起的，边框线是深红色的，厚度为中等。其余的就可以以此类推了，分别是用来说明按钮的右边、上边和底边的。