首页 > 编程技术 > html

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

发布时间:2016-9-20 19:03

  在许多糟糕的网站中,我们可以找出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--]