网页制作需要注意的问题集锦

 更新时间:2016年9月20日 19:04  点击:1824

一.外观

1 不要先决定网页的外观,然后强迫自已去适应它,应该从你的访客对像,你要传 达的讯息以及你的制网目标推导出一个最适合的网页架构。

2 每页排版不要太疏或用太大的字,尽量避免看你的网页时需要作很大的卷动,要 知道在一页的上部分是显眼而宝贵的地方,不要只放着几个粗大的字或图片。

3 最好不要用 800x600 以上的分辨率设计网页。常用的分辨率是 640x480 及 800x600 。 明智的网页设计者是处处照顾浏览者,绝不会炫耀自己有专线、有17 寸的显示器等。

4 不要于每页插入太多的广告牌。相信你亦不喜欢浏览一些贴满广告的网页吧,你要考虑到该页内容与广告的比例,摆放的位置亦很重要,不妨多参考别人的做法。广告太多,只会令人烦厌。

5 不要每页都采用不同的背景图片,以免每次转页都要花时间去下载,采用相同的底色或背景图片还可增加网页一致性,树立风格。

6 底色或背景图片必须与文字对比强烈,易于阅读,这并不是要求你永远使用鲜亮的背景配搭深色的文字,但深色背景常要求与主题配合,有较多的顾虑,若你的网页 是文章式或包含大量文字,不妨在底色与文字的配搭上下些工夫,力求让访者能舒适阅读你的文章。

7 不要把图片白色当透明,要知道别人的作业系统不一定把内定底色设为白色,解 决方法除了真的把该网页的底色设为白色之外,最好还是以图片编辑工具为图片设好透明颜色。

8 太长的一页要使用内部连结,明智的网页设计者是不会让浏览者看网页时作太大 的卷动。常见的内部连结应用例子如 FAQ (常见问答)。

二.标记运用

  1. 小心使用框架(Frame)。框架易学难精,它虽有快速、漂亮和方便更新等优点, 但稍有不慎会适得其反,切勿勉强使用,由于 IE 及 NC 对框架属性定义有所差异,公开网页前宜作多方面测试,可能你的框架于 IE 显示下是漂亮的一页,但于 NC 可能是最丑陋的。

  2. 背景音乐尽量同时使用 bgsound 及 embed 两种标记,照顾旧版的浏览器,或可使 用 JavaScript 分辨浏览器以印出适当的媒体标记。

  3. 应用框架 Frame 时要加入不支持的提示以提醒旧版的浏览器的用户,亦可以是藏着一没有框架的版本或一个连到另一版本的连结,这样不但照顾到旧版的浏览器,亦有利于登一些寻找引擎。

  4. 同一页中不要使用太多的 HR 标记,即水平分隔线,否则你的网页看起来会支离破碎,要达到文件清晰或主次分明,可改变字体的大小、颜色或底色。或采用清单标记,不一定要使用水平线。

  5. 不要使用“点选这里”“Click Here”之类的字眼当作连结,正确的做法如:“请 到 Microsoft 网站看看 Windows 98 的介绍吧”。

  6. 不要勉强使用闪烁文字,指 Blink 标记,不必说它的被支持问题,这类的闪烁常为浏览者带来紧张和不安,要知道制作网页的首要条件便是要让访客看得舒适,不要因小失大。

  7. 使用 ImageMap 时,不要让关键区域太近或重叠,不要让你的访客猜测关键区域, 如果图片示意不够清楚可加些文字说明,按键的作用只是用以打开另一文件,只要能做到清楚及显眼便足够。

  8. 编辑完 ImageMap 后不要更动原来图片档案,否则它的关键区域会因相对座标值的更变而失准。

  9. 在表单中使用 Action=mailto 时,要提醒使用者不要期待立即的回应,否则你的访问者便「痴痴地等」或多按几次“Submit”,最好还是使用 CGI 吧。

  10. <

    1、 选择有效的关键字:

    关键字是描述你的产品及服务的词语,选择适当的关键字是建立一个高排名网站的第一步。选择关键字的一个重要的技巧是选取那些常为人们在搜索时所用到的关键字。

    2、 理解关键字:

    在你收集所需的关键字之前,明白一般人是怎样用关键字是十分重要的。人们在搜索的时候一般是不会使用单个词,而是用短语或者词组。这样对于网站优化起到更重要的作用。

    3、 找出有效的关键字:

    下面的一个网址包括了测试关键字使用频率的工具:http://www.trafficzap.com/的 Keyword Generator

    4、 选取关键字技巧:

    A:认真思索

    用笔写下与你的网站或产品有关的所有关键字,先不要对这些关键字进行审评。不要局限于你是卖什么的,尽量站在你客人方面考虑。那些人会为你的网站带来利益,尽量站在这些人的角度想。

    B:多问周围人的意见

    讲你的家里人,朋友,同学怎样的词语适合描述你的产品或网站。他们很有可能会找出一些你连想到没想过的词语。

    C:分析日志文档:

    日志文档将会告诉你,人们是使用什么关键字来访问你的网站的。(有些网站在建站的时候会安装相应的工具来生成日志文档供网管参考)

    D:参考其他网站:

    参照那些主题与你相似或相同的网站,看一下他们的meta keyword 是怎么写的。这样你有可能会得到意外的关键字,但是不要直接将人家的模板粘贴过来,因为你不知道网管在设计网站之前对关键字进行了那些可能性的研究。这主要是用于关键字研究。

    E:找出错误的拼写(多用于英文)

    有很多关键字人们会经常拼写错误的,找出这些经常出现错误拼写的词或词组可以为你带来额外的流量。(就GOOLE来说,它有检查拼写错误的功能。建议不要用拼写错误的词、词组作关键字)

    5、 处理关键字:

    到了这一步,你已经收集了很多与你的网站或产品有关的关键字了。接下来的工作就是把收集到的关键字进行组合,把它们组成常用的词组或短语。很多人在搜索的时候会使用两个或三个字组成词。据统计,平均是2.3个字。不要用普通的,单个字作为关键字。这样的关键字很难排到搜索引擎的前十位。例如:你有以下几个关键字:“搜索引擎、软件、提高”,试着把他们组合为“搜索引擎软件”、“搜索引擎提高”等。把字组成关键字短语有利于提高你网站的排名,你将会更有效提高你网站访问量。例如:很少人会用“搜索引擎”或者“软件”。

    6、 舍弃一些关键字: 寻找出那些搜索时很少用到的关键字:

    A:在英文里,在搜索引擎大小写是没有区别的。

    B:拼写错误的关键字是没用的,但是找到一个经常出现拼写错误码的词可以额外地提高你的访问量

    C:去除那些停用的词,在英文里有“the, for , a ,” 等。中文里有“的,地,你,我”等。

    D:没有人会用“最好的”,“疯狂的”等词语进行搜索。如果你的网站里有类似的词,最好把他去除。

    7、 最佳关键字:

    如果你按照上述所说,你一定列出了一大堆的关键字。尽管,你已经去除了一些没人使用的。但是对于你来说还是太多了。现在是时候进入关键字优化的最后一步了。

    提示:

    很多个人网站的站长都希望为自己的网站建立一个站内搜索引擎,但一不熟悉ASP、PHP、JSP等动态开发技术,另外自己建立站内搜索也需要空间支持相应的动态技术,所以常不得已放弃。其实,何不借用Google打造站内搜索引擎,来方便网友对自己网站的内容进行查找。

      若想在某特定网站内搜索特定的内容(如搜索www.cfan.com.cn中包含关键字“网络”的内容),只需要在Google的搜索栏里输入:“网络 site:cfan.com.cn”即可(不含引号)。如果直接在自己站点的网页上建立一个Google的搜索栏,然后让访问者按Google规定的格式进行查询,那不就能实现Google作为自己站内搜索引擎的功能了吗?但是我们当然不能要求使用者还要特地学习Google对特定网站搜索的格式规范。于是笔者立刻联想到是否可以使用JavaScript脚本使得Google接收的查询关键字后自动加上类似“site:cfan.com.cn”的字符串呢?答案当然是肯定的。在你的网站首页需要放置站内搜索引擎页面的<body>标签的范围内放置如下代码:

    <script type="text/javascript">
    var domainroot="mysite.com"//个人站点域名,替换成你的网站的网址即可
    function Gsitesearch(curobj){
    curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
    }
    </script>
    <form action="http://www.Google.com/search" method="get" onSubmit="Gsitesearch(this)">
    <p>站内搜索:<br />
    <input name="q" type="hidden" />
    <input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="开始搜索">
    </p>
    </form>

      脚本的关键部分在于Gsitesearch函数。语句:“curobj.q.value="site:"+domainroot+" "+curobj.qfront.value”的含义为:将“site:”字符串+变  量domainroot、空格、访客填写的关键字依此合并。既使得搜索格式符合Google的语言规范,又使增加了搜索功能的友好性,不需要用户来遵循Google的搜索规则。

      至此,您的专业站内搜索引擎就完成了(见图1 完成的站内引擎)。

      如果我们不但要搜索本站的内容,还要让访客同时能搜索兄弟站点或本类网站的内容,该如何修改呢?接下来我们就对我们刚才的代码做一些推广。

    <script type="text/javascript">
    function Gsitesearch(curobj){
    var domainroot=curobj.domainroot[curobj.domainroot.selectedIndex].value
    curobj.q.value="site:"+domainroot+" "+curobj.qfront.value
    }
    </script>
    <form action="http://www.Google.com/search" method="get" onSubmit="Gsitesearch(this)">
    <p>

    <

    曾经我指出的网页设计中的十大错误,至今在很多站点上依然可见,并且影响着页面的可用性。也就是说,这三年来情况并未得到多大改善。

    不幸的是,新的网络技术及其应用导致了一个全新层次的错误。以下是其中最严重的十个。

    一. 破坏或减慢“后退”按钮 (我的看法:有时候对页面的适当控制是必须的。)

    “后退”按钮是网络用户的生命线,同时也是继超文本连接后最常使用的导航特征。用户可以随意尝试网页所指向的任何地方,而只需点击一两次“后退”按钮就可以回到系统已经保存的的先前页面。

    当然,如果站点犯了以下某一错误的话,那么“后退”按钮就无法工作:

    打开 新的浏览窗口 (参见错误二)。

    使用 立即重定向 (immediate redirect):每当用户点击“后退”按钮时,页面就会跳转至我们不希望访问的位置。

    禁止缓存:这样做使得“后退”操作不得不重新向服务器发送请求;所有的超文本都应当是次秒级(sub-second)的,这样做会使得返回的时间加倍。

    二.打开新的浏览窗口(增加用户对站点的粘度,有时候打开新窗口是有作用的,不认同此观点)

    打开新的浏览窗口就像一个吸尘器推销员在上门推销时,直接将烟灰缸里的杂物倾倒在消费者家中的地毯上。拜托!不要用任何窗口污染我的屏幕(尤其在当前操作系统低劣的窗口管理技术下)!如果我需要一个新窗口,我会自己打开的。

    设计者打开新窗口的本意是要让用户留在他的站点上。但是却忽略了控制用户的机器所带来的负面效应,这种策略恰恰弄巧成拙,因为当用户想通过“后退”按钮返回先前的站点时,已经做不到了。用户通常注意不到新窗口已经被打开,尤其当他们的显示器很小,而窗口又正好是最大化时。因此,当用户想要返回原来的站点时,面对的却只是一个不可用的灰色“后退”按钮。

    三.GUI (图形用户界面) 部件的不规范使用

    一致性是最重要的可用性原则之一:当事物遵循相同的原则运作时,用户不用担心发生意外,因为他们根据先前的经验已经很清楚将会发生什么。就像你每次在牛顿的头顶上释放一个苹果,它一定会砸中他的脑袋一样。

    用户的期望实现得越多,他们就越感觉是自己在控制整个系统,并且更加喜欢它。相反地,用户则会感到可靠程度不够。想想,当我释放苹果时,它变成了西红柿并朝着天空蹦出一英里,多荒诞!

    交互的一致性是打开新窗口不合理的又一原因:点击链接的标准结果是目标页面在当前的浏览窗口中加载,取代现有页面。出现其它的任何情况都违背了用户的期望,令他们感到对网络的控制不稳定。

    目前,在网上违背一致性最严重的是 GUI 部件,如单选按钮(radio button)或多选框(checkbox)的应用。这些设计要素的正常行为方式在 Windows 界面(UI)标准,Macintosh 界面标准 以及 Java 界面标准 中均有规定。遵照哪种标准取决于你的主体用户所使用的平台(多数情况为 Windows),但由于这些标准都非常接近,所以基本没什么影响。

    例如,单选按钮的标准表明,它应该被用于从一系列对象中挑选一个,但这一选择直到用户点击确定按钮确认后才生效。不幸地,我见过许多网站将单选按钮当作了动作按钮,一点击就立即得到结果,这样做严重偏离于标准接口的设计,并使网络用起来更加困难。

    四.缺少传记(不认同,难道我做了什么事非要一定让所有人都知道?)

    据我1994年的第一次网络研究显示,用户希望了解网络信息背后的那些人。尤其是作者的传记和照片,因为这有利于让网络不再冷冰冰,而变得更可靠,更温情。个性及观点通常都强于匿名的文字。

    至今仍然有许多站点不采用专栏和署名的方式来发表文章。即使有署名的,也常忘记在作者的署名上添加链接以帮助读者找到该作者的更多文章。

    用 mailto: 链接来代替作者传记尤其糟糕,

      今天就网页结构进行一下讨论。

      一个网页的结构的好坏,对网页的加载速度有着很大的影响!

      1、关于框架结构

      一般情况下,应尽量避免使用框架结构,因为浏览器必须对框架中的每个页面分别进行请求!这必然会增加服务器的负担。另外,现在还有少数用户使用的浏览器并不支持框架结构显示。 当然在一些地方,框架结构还是显得非常方便,比如:聊天室、论坛、社区、软件下载。 

      2、关于表格

      表格的应用不仅仅限于,在一些内容列表的时候时候,对于网页的整个布局,表格有着非常重要的作用。为了能使大量的内容在网页上布置的井井有条,一般通过没有边框的来将网页分块,然后将不同的内容放在不同的单元格中。表格的使用是有一些技巧的:

      首先,尽量避免使用结构复杂的表格,因为结构复杂的表格,有可能使浏览器多次刷新表格。

      其次,能将一个表格分为两个或两个以上的时候因为分为两个,因为浏览器只有在整个表格的内容全部读入以后再输出显示,如果表格中的内容非常的多,那么在加载过程中,浏览器在表格读入完毕以前将一直显示空白。

      最后,表格嵌套不要超过3层,层次太多的话在加载表格的时候会使浏览器花大量的时候处理表格结构。 新浪网的首页页面时候很好的例子,大家可以保存它有编辑软件打开查看其结构。 熟练的使用表格是作出美观的网页所必须的!



    SyntaxHighlighter.highlight();
    [!--infotagslink--]

    相关文章

    • PHP传值到不同页面的三种常见方式及php和html之间传值问题

      在项目开发中经常见到不同页面之间传值在web工作中,本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了,本文总结一下这段日子中,在编程过程里常用的3种不同页面传值方法,希望可以给大家参考。有什么意见也希望大...2015-11-24
    • js修改input的type属性问题探讨

      js修改input的type属性有些限制。当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题。但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改。...2013-10-19
    • Mysql常见问题集锦

      1,utf8_bin跟utf8_general_ci的区别 ci是 case insensitive, 即 "大小写不敏感", a 和 A 会在字符判断中会被当做一样的; bin 是二进制, a 和 A 会别区别对待. 例如你运行: SELECT * FROM table WHERE txt = 'a'...2013-10-04
    • Mysql大小写敏感的问题

      一、1 CREATE TABLE NAME(name VARCHAR(10)); 对这个表,缺省情况下,下面两个查询的结果是一样的:复制代码 代码如下: SELECT * FROM TABLE NAME WHERE name='clip'; SELECT * FROM TABLE NAME WH...2015-03-15
    • linux mint 下mysql中文支持问题

      一.mysql默认不支持中文,它的server和db默认是latin1编码.所以我们要将其改变为utf-8编码,因为utf-8包含了地球上大部分语言的二进制编码 1.关闭mysql服务 sudo /etc/init.d/mysql stop 2.修改mysql配置文件 mysql配...2015-10-21
    • php根据用户语言跳转相应网页

      当来访者浏览器语言是中文就进入中文版面,国外的用户默认浏览器不是中文的就跳转英文页面。 <&#63;php $lan = substr(&#8194;$HTTP_ACCEPT_LANGUAGE,0,5); if ($lan == "zh-cn") print("<meta http-equiv='refresh' c...2015-11-08
    • 腾讯视频怎么放到自己的网页上?

      腾讯视频怎么放到自己的网页上?这个问题是一个基本的问题,要把腾讯视频放到自己的网页有许多的办法,当然一般情况就是直接使用它们的网页代码了,如果你要下载资源再放到...2016-09-20
    • 基于JavaScript实现网页倒计时自动跳转代码

      这篇文章主要介绍了基于JavaScript实现网页倒计时自动跳转代码 的相关资料,需要的朋友可以参考下...2015-12-29
    • 网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别

      我们现在使用的软件都会自动在前面加一个申明了,那么在网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别是什么呢?下面我们就一起来看看吧. 单...2016-09-20
    • 解析C#自定义控件的制作与使用实例的详解

      本篇文章是对C#中自定义控件的制作与使用实例进行了详细的分析介绍,需要的朋友参考下...2020-06-25
    • C#使用队列(Queue)解决简单的并发问题

      这篇文章主要介绍了使用队列(Queue)解决简单的并发问题,讲解的很细致,喜欢的朋友们可以了解一下...2020-06-25
    • ps怎么制作人物影子效果

      ps软件是现在很多人比较喜欢的,通过ps软件可以制作很不错的图片效果。这次文章就给大家介绍下使用ps怎么制作任务影子,具体制作方法下面一起来看看。 ps人物影子效...2017-07-06
    • 用ps制作二寸证件照

      有没有觉得外面拍的证件照都很丑。那么本文就教大家制作二寸证件照的方法,学会了就能做自己美美的证件照了哈哈! 步骤 双击打开php,首先教大家制作两寸照片的大小。...2016-12-21
    • windows 10 安装和使用中5个常见问题

      2015年7月29日0点起,Windows 10推送全面开启,Windows7、Windows8.1用户可以免费升级到Windows 10,用户也可以通过系统升级到Windows10,在这过程中,用户会遇到这样那样的问题,下面小编总结了windows 10 安装和使用中5个常见问题,需要的朋友可以参考下...2016-01-27
    • C#实现Winform中打开网页页面的方法

      这篇文章主要介绍了C#实现Winform中打开网页页面的方法,涉及WinForm中WebBrowser的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
    • php中session常见问题分析

      PHP的session功能,一直为许多的初学者为难。就连有些老手,有时都被搞得莫名其妙。本文,将这些问题,做一个简单的汇总,以便大家查阅。 1. 错误提示 引用 代...2016-11-25
    • javascript学习指南之回调问题

      回调函数被认为是一种高级函数,一种被作为参数传递给另一个函数(在这称作"otherFunction")的高级函数,回调函数会在otherFunction内被调用(或执行)。回调函数的本质是一种模式(一种解决常见问题的模式),因此回调函数也被称为回调模式。...2016-04-25
    • ps怎么制作宣传单

      ps软件使用对很多人来说是非常重要的,很多人还不知道使用ps怎么制作宣传单,下面文章就给大家介绍下ps怎么制作宣传单,喜欢次效果的一起来看看。。 首先,我们新建一个2...2017-07-06
    • Go语言通过http抓取网页的方法

      这篇文章主要介绍了Go语言通过http抓取网页的方法,实例分析了Go语言通过http操作页面的技巧,需要的朋友可以参考下...2020-05-05
    • 教大家制作简单的php日历

      最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示。如下图所示:一、计算数据 1、new一个Calendar类2、初始化两个下拉框中的数据,年份与月份3、初始...2015-11-24