网页设计中应防止的十个错误

 更新时间:2016年9月20日 19:03  点击:2445

  在许多糟糕的网站中,我们可以找出100条错误。现在,让我们将问题集中到最严重的10条上。仅仅防止这些错误,你的网站将会远好于你的众多的竞争对手。

  1、没有策划你的网站

  在建立你的网站之前,应该确定你的网站目标。然后,根据这个目标,画出从主页开始到所有次页的网站流程。无论是为了宣传你提供的服务,还是销售你自己制造的产品,你的网站的目标都将指导网站和网页的设计。如果你在开始建设网站的时候就没有一个明确的主意,那么你建设成的网站一定显示给用户的是信息和链接的大杂烩。

  2、没有把你的联系信息放在明显的地方

  如果你要销售,你就要给浏览者提供多种和你联系的方式。最明智的方法是建一个“联系我们”链接,用它引导出全部的联系信息——电话号码、传真号码、邮政地址。即使没有人给你打电话,这些信息的出现也会给一些浏览者带来许多安慰。并且总是将电子邮件地址放在每一页网页的底部。

  3、死链接

  死链接是当点击了这样的超级链接后,它没有任何反应。任何浏览者都讨厌这种情况。每个星期检查一次你的网站,确保所有的链接工作正常。

  4、过时的信息

  除了网站管理者懒以外,没有任何理由可以解释由于网页长期不进行更换,而造成和事实不符的原因。当信息发生了变化,要及时地更改相应的网页——这意味着更改相应的任何相关信息。做为一个生意人,你是承担不起信誉度的损失的。

  5、太多的字体和颜色

  网页应该有统一、和谐的外观。但网站设计新手,在他们的网站中使用了他们的所有的字体和不同的颜色,使得网页成了五颜六色的大杂烩。在每个网页上最多使用两、三种字体和颜色。其目的是确保使浏览者感到统一和和谐,而不是让他们参观一个粗野的艺术品。

  6、孤立的网页

  记住:在你的网页上,每一页网页都需要一个链接返回起始页。为什么?有时用户将推荐网址给他的朋友,供他的朋友参观或了解更多的信息。但如果他的朋友所得到的是没有链接,他们就不能参观其他网页。将“首页”链接总是放置在每一页网页上,就能快速地解决这个问题。

  7、错误的返回按钮

  魔鬼网站制作者总是想办法破坏浏览者的返回按钮,以便当用户按下它们时,出现以下让人讨厌的事情:进入到不应该进入的地方;因为再找不到返回按钮浏览者只能停止;一个新窗口弹出并占满了整个屏幕。更糟糕的网址制作者会恶意地编制一些代码使浏览者仅有重新起动计算机才能摆脱一个状态——但是这个伎俩正在其他网站建设者中传播。我的建议:千万不要这样做。它只能给浏览者带来烦恼。

  8、使用框架技术

  从前,使用当浏览点击后,出现多框架结构显示内容是很“酷”的网站设计技术。现在,它却给浏览者带来的仅仅是烦恼,因为,它消耗了系统资源、减慢了计算机的响应及将浏览弄得复杂。的确,它是一个容易使用的工具。但还是不用的好。

  9、下载时间太长

  对于个人和非专业的网站,较慢的服务器响应是正常的,因为他们大多数的网站空间是免费的,一般他们是不会被抱怨的。但对一个专业的网站,服务器响应慢和网页的下载时间长是不能原谅的。它会使浏览者离去。如果你的服务器有这个嫌疑,还是另租赁一个吧。如果你的网页造成这样的责难,删除掉那里过多的图像和JAVA程序。

  10、 使用太前卫的技术

  太前卫的技术也是为了给所有的网站提供的技术吧?不是的,除非你被保证,无论浏览者何时浏览你的网站,都需要下载一个新软件,而不会丢失大部分浏览者。毫无疑问,Flash是一个很“酷”的网站,但是如果没有人能够看见它们,它们只能是废物。永远不要使用任何要求第三方网站下载程序才能浏览的技术。你的网页要具有在标准的和大众化的浏览器上的可阅读性。




明显位置(above the fold) —— 在网页的靠上方位置,当网页广告显示的时候,访问者不需要移动浏览器的滚动条就可以显示出来的位置。

  广告空间(ad space) —— 网页中用来放置广告的地方。

  ALT标签(ALT tag) —— 图片没有出现或者不能正常显示时,图片所在区域将显示 Alt Tag 指定的文本。

  GIF动画(animated GIF) —— 利用一系列的静态图片生成的动画,格式为GIF文件。
 
  书签(bookmark) —— 一种可以收藏在浏览器里的网址链接。

  层叠样式表(cascading style sheets (CSS)) —— 层叠样式表CSS是对HTML的补充。CSS可以节省许多重复性的格式设定,可以定义一种字体是用字号还是像素设定,间距及缩进格式等等,将给你更多的选择以让你轻松设置文本的格式。

  收藏夹图标(favicon) —— 浏览器收藏书签时所显示的小图标。

  Flash ——  Macromedia公司开发的一种可以互动的多媒体技术,而且文件的小巧。


  框架(frames) —— 可以将页面分成几个独立部分的网页结构。

  主页(home page) —— 一个网站的初始页面。

  JAVA脚本(javascript) —— Netscape公司开发的一种可以生成互动网站的脚本语言。

  出错链接页面(linkrot) —— 当在一个网站找不到一张页面,或该页面被删除无法显示,网站会自动指向默认网页(linkrot),告诉浏览者该页面无法显示。

  导航(navigation) —— 帮助浏览者有效访问网站,不至于迷路。

  购物车(shopping cart) —— 一种可以让在线消费者查看,添加,删除,在线订购货物的程序。


  网站查询(site search) —— 可以查询本网站的信息。


  醒目页面(splash page) —— 又称为过渡页,在标题广告与提供产品信息和链接的广告主站点间的过渡页,过渡页取代了许多的主页,尤其是和新闻相关的站点,扮演了网络内容的关口。它们就象一本杂志的封面一样,提供一个较大的“过渡”、更多的图片和实时更新的信息。

  网页浏览器(Web browser) —— 一种可以浏览网页的应用软件。

  网页设计(Web design) —— 选择和控制组件,生成网页的布局和结构。

  网站可用性(Web site usability) —— 让浏览者更容易的访问网站。

  网站地图干什么用的?方便蜘蛛爬的。以前用的专门的地图生成工具用起来都不怎么顺手,刚才在找免费的IIS防盗组件的时候无意间发现了"DirHtml"这么一个文件夹列表工具,试用了一下,发现可以用来做网站地图,前提是你要有自己的服务器,因为这程序只能在列出本机上的文件列表。当然你也可以在本地生成所有的下载页面,做好了地图传到网站上。

  先下载dirhtml v4.56汉化版, http://www.gtocn.com/dirhtml.rar

  解压缩后运行dirhtml.exe

  假设我要给网站soft目录下的所有html页面做个地图(就是下载页面啦),网站的绝对目录为d:web。那么选择文件夹就填d:websoft。
  文件过滤:要给HTM文件做地图,就填*.htm
  输出文件:就是网站地图的文件,随便保存到那里
  标题:网站地图的页面标题(TITLE)
  跳过文件、文件夹:自己设置咯,在这里不用设置
  自定义HTML文件:不用设置

  然后选“杂项”,按图勾选就可以了

  再点“递归,其他”


  选择“在一个文件中显示所有链接”,其他的看自己喜好了

  然后就可以按F3生成地图啦,效果如下

  随便用个文字处理工具,比如写字版,editplus,notexpad什么的,打开生成的map.htm文件
  把D:/Web/替换成你网站的玉米就可以了
  比如说d:/web/替换成http://www.xxx.com/
  这样链接就成了http://www.xxx.com/soft/xxx.htm
  网站地图就做好了,你想再整理一下随你的便了。通过设置跳过文件夹和过滤文件可以一次生成全站地图。

Window.open篇

这两窗口之间存在着关系.父窗口parent.htm打开子窗口son.htm
子窗口可以通过window.opener指向父窗口.这样可以访问父窗口的对象.

优点:取值方便.只要window.opener指向父窗口,就可以访问所有对象.
       不仅可以访问值,还可以访问父窗口的方法.值长度无限制.
缺点:两窗口要存在着关系.就是利用window.open打开的窗口.不能跨域.
      

Post.htm

<input type=text name=maintext>
<input type=button onclick="window.open('Read.htm')" value="Open">

Read.htm

<script language="javascript" >
//window.open打开的窗口.
//利用opener指向父窗口.
var parentText = window.opener.document.all.maintext.value;
alert(parentText);
</script>


利用Cookie.

Cookie是浏览器存储少量命名数据.
它与某个特定的网页或网站关联在一起.
Cookie用来给浏览器提供内存,
以便脚本和服务器程序可以在一个页面中使用另一个页面的输入数据.

优点:可以在同源内的任意网页内访问.生命期可以设置.
缺点:值长度有限制.

Post.htm

<input type="text" name="txt1">
<input type="button" onclick="setCookie('baobao',document.all.txt1.value)" value="Post">
<script language="javascript" >
function setCookie(name,value)
{
/*
 *--------------- setCookie(name,value) -----------------
 * setCookie(name,value)
 * 功能:设置得变量name的值
 * 参数:name,字符串;value,字符串.
 * 实例:setCookie('username','baobao')
 *--------------- setCookie(name,value) -----------------
 */
    var Days = 30; //此 cookie 将被保存 30 天
    var exp  = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    location.href = "Read.htm"; //接收页面.
}
</script>


Read.htm

<script language="javascript" >
function getCookie(name)
{
/*
 *--------------- getCookie(name) -----------------
 * getCookie(name)
 * 功能:取得变量name的值
 * 参数:name,字符串.
 * 实例:alert(getCookie("baobao"));
 *--------------- getCookie(name) -----------------
 */
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr !=null)

<

  我们知道,搜索引擎都有自己的“搜索机器人”(ROBOTS),并通过这些ROBOTS在网络上沿着网页上的链接(一般是http和src链接)不断抓取资料建立自己的数据库。

  对于网站管理者和内容提供者来说,有时候会有一些站点内容,不希望被ROBOTS抓取而公开。为了解决这个问题,ROBOTS开发界提供了两个办法:一个是robots.txt,另一个是The Robots META标签。  

  一、robots.txt

  1、 什么是robots.txt?

  robots.txt是一个纯文本文件,通过在这个文件中声明该网站中不想被robots访问的部分,这样,该网站的部分或全部内容就可以不被搜索引擎收录了,或者指定搜索引擎只收录指定的内容。

  当一个搜索机器人访问一个站点时,它会首先检查该站点根目录下是否存在robots.txt,如果找到,搜索机器人就会按照该文件中的内容来确定访问的范围,如果该文件不存在,那么搜索机器人就沿着链接抓取。

  robots.txt必须放置在一个站点的根目录下,而且文件名必须全部小写。

  网站 URL       相应的 robots.txt的 URL
 
http://www.w3.org/    http://www.w3.org/robots.txt
 
http://www.w3.org:80/   http://www.w3.org:80/robots.txt
 
http://www.w3.org:1234/  http://www.w3.org:1234/robots.txt
 
http://w3.org/      http://w3.org/robots.txt

  2、 robots.txt的语法


  "robots.txt"文件包含一条或更多的记录,这些记录通过空行分开(以CR,CR/NL, or NL作为结束符),每一条记录的格式如下所示:

  "<field>:<optionalspace><value><optionalspace>"。

  在该文件中可以使用#进行注解,具体使用方法和UNIX中的惯例一样。该文件中的记录通常以一行或多行User-agent开始,后面加上若干Disallow行,详细情况如下:

  User-agent: 

  该项的值用于描述搜索引擎robot的名字,在"robots.txt"文件中,如果有多条User-agent记录说明有多个robot会受到该协议的限制,对该文件来说,至少要有一条User-agent记录。如果该项的值设为*,则该协议对任何机器人均有效,在"robots.txt"文件中, "User-agent:*"这样的记录只能有一条。

  Disallow :

  该项的值用于描述不希望被访问到的一个URL,这个URL可以是一条完整的路径,也可以是部分的,任何以Disallow 开头的URL均不会被robot访问到。例如"Disallow: /help"对/help.html 和/help/index.html都不允许搜索引擎访问,而"Disallow: /help/"则允许robot访问/help.html,而不能访问/help/index.html。

  任何一条Disallow记录为空,说明该网站的所有部分都允许被访问,在"/robots.txt"文件中,至少要有一条Disallow记录。如果 "/robots.txt"是一个空文件,则对于所有的搜索引擎robot,该网站都是开放的。 SyntaxHighlighter.highlight();

[!--infotagslink--]

相关文章

  • Ecshop提示Only variables should be passed by reference in错误

    在安装好ecshop软件之后我们打开首页时提示Only variables should be passed by reference in错误了,碰到这个问题是什么原因呢?下面我们就一起来看看解决办法吧。...2016-11-25
  • 409错误是什么 http 409错误怎么解决

    409错误是什么?http 409错误怎么解决呢?不少站长在遇到这个错误代码之后都一筹莫展,本次一聚教程网为大家带来了详细的说明,快来看看吧。 409错误是什么: HTTP 40...2017-01-22
  • 414错误是什么 414错误怎么解决

    414错误是HTTP协议状态码中的一种,很多都还不知道414错误是什么,以及不知道怎么解决414错误,那么就来看看小编带来的介绍吧。 414错误是什么: HTTP 414错误,(Requ...2017-01-22
  • http 405错误是什么 http 405错误怎么解决

    http 405错误是什么?http 405错误怎么解决?相信很多站长都在找这两个问题的答案,本次小编为大家带来了详细的教程,快来看看吧。 405错误是什么: HTTP 405错误是H...2017-01-22
  • 401错误码代表什么 401错误解决办法

    401是HTTP状态码的一种,属于“请示错误”,表示请求可能出错,已妨碍了服务器对请求的处理。具体的401错误是指:未授权,请求要求进行身份验证。登录后,服务器可能会返回对页面...2017-01-22
  • http 402错误是什么 http 402简介

    http 402错误是什么?402错误较为少见,一般不轻易出现,下面小编就来告诉大家402错误是什么吧。 HTTP 402错误是HTTP状态码的一种,表示“要求付费”; 所求的...2017-01-22
  • 411错误是什么 411错误怎么解决

    411错误是HTTP协议状态码的一种,很多人都还不知道411错误是什么,本次一聚教程网将为大家进行解答,并且告诉大家411错误怎么解决。 411错误是什么: HTTP 411错误,(Lengt...2017-01-22
  • apache网站提示503错误解决办法

    Apache status 503 的原因大致有如下几种情况 : 1、 CPU 负载过高,服务器响应不过来,返回503 2、 系统连接数超限,超过MaxVhostClients的上限,返回503 3、 单IP连接数超限,超过M...2016-01-28
  • photoshop设计一幅大鱼海棠动画片海报制作实例教程

    今天小编在这里就来给各位photoshop的这一款软件的使用者们来说一说设计一幅大鱼海棠动画片海报制作的实例教程,各位想知道具体制作步骤的使用者们,那么各位就快来看看...2016-09-14
  • 404错误是什么 404错误怎么解决

    403错误是网站访问过程中,常见的错误提示。资源不可用,服务器理解客户的请求,但拒绝处理它。通常由于服务器上文件或目录的权限设置导致,比如IIS或者apache设置了访问权限...2017-01-22
  • 403错误是什么 403错误怎么解决

    403错误是HTTP状态码的一种,属于“请示错误”,表示服务器拒绝请求。如果在搜索引擎尝试抓取您网站上的有效网页时显示此状态代码,那么,这可能是您的服务器或主机拒绝搜索...2017-01-22
  • 412错误是什么 412错误怎么解决

    412错误是什么?412错误怎么解决?本次一聚教程网将为大家带来详细的介绍,帮助大家全面了解412错误的意思以及解决412错误的方法。 412错误是什么: HTTP 412错误,(Precond...2017-01-22
  • HTTP 408错误是什么 HTTP 408错误解决方法

    相信很多站长都遇到过这样一个问题,访问页面时出现408错误,下面一聚教程网将为大家介绍408错误出现的原因以及408错误的解决办法。 HTTP 408错误出现原因: HTT...2017-01-22
  • 407错误是什么 407错误怎么解决

    407错误是什么?407错误怎么解决?不少站长都遇到过407错误,下面小编将告诉大家如何处理407错误。 407错误是什么: HTTP 407错误是HTTP协议状态码的一种,表示需要代...2017-01-22
  • 406错误是什么 406错误怎么解决

    HTTP 406错误是HTTP协议状态码的一种,表示无法使用请求的内容特性来响应请求的网页。一般是指客户端浏览器不接受所请求页面的 MIME 类型。 而MIME类型是在把输出...2017-01-22
  • 410错误是什么 http 410错误怎么解决

    410错误是HTTP协议状态码的一种,本次一聚教程网将为大家详细介绍HTTP 410错误是什么,以及410错误的解决办法。 410错误是什么: HTTP 410错误是HTTP协议状态码的...2017-01-22
  • HTTP 400错误是什么 HTTP 400错误怎么解决

    每当遇到http错误代码为400,代表客户端发起的请求不符合服务器对请求的某些限制,或者请求本身存在一定的错误,那么HTTP 400错误怎么解决呢?请看下文介绍。 目前400错...2017-01-22
  • PHP Fatal error: Cannot use object of type stdClass as array in错误

    下面一起来看看在php开发中碰到PHP Fatal error: Cannot use object of type stdClass as array in错误问题的解决办法吧。 普通的数组出现如下错误 代码...2016-11-25
  • ps怎么制作倒影 ps设计倒影的方法

    ps软件是一款非常不错的图片处理软件,有着非常不错的使用效果。这次文章要给大家介绍的是ps怎么制作倒影,一起来看看设计倒影的方法。 用ps怎么做倒影最终效果&#819...2017-07-06
  • PHP Curl出现403错误的解决办法

    自己用的小PHP应用,使用curl抓网页下来处理,为了穿墙方便,使用Privoxy作为代理,便于选择哪些网站使用proxy、哪些不用。但今天却遇到了奇怪的问题,访问google baidu这些网站居然都返回403错误,而访问其他的一些网站没事,如果...2014-05-31