主页 > 网页设计 > 如何针对一个页面网页进行优化

如何针对一个页面网页进行优化

2023-12-23 21:39来源:m.sf1369.com作者:宇宇

一、如何针对一个页面网页进行优化

网页的优化主要在三方面:

    一、图形优化。为了给网页添彩,增加网页的生动性,难免会给网页里添加各种图片。但是图片往往是页面中加载最慢的一个环节。

做到图片优化首先要注意图片的格式,按照图片从大到小的顺序排列,主流的图片格式有bmp、png、jpeg、gif四种格式的图片。

    如果单是设计网页的导航,边框,图片按钮等简单的网页元素要尽量使用gif图片,这个图片不仅体积小,而且可以保留在设计时的不规则边框,从而在网页中实现更多形态的图片效果。

如果是设计Banner、logo等元素可以使用jpeg或者png格式的图片,因为一个网页中最醒目的部分就是Banner,这个部分会很大程度的影响用户浏览网页时候的心理,所以在这个环节马虎不得,尽量不要使用压缩过分的图像格式。

    要设计个性点的页面元素时就可以适当的使用png格式了,它有三个优点和一个对于网页设计的致命缺点。第一个优点,是它色彩保留非常的完整,能非常清晰和完整的保留图片的色彩和像素。第二个优点,它同样具备gif图像一样的不规则边框效果,而且锯齿现象也不会像gif那样严重。第三个优点,它在IE6和Firefox等主流浏览器中还会保留在图像设计软件中的透明度,在网页上直接以设定的百分比对透明效果进行呈现。这个优点一定程度上解决了CSS透明滤镜在除IE以外的绝大多数浏览器得不到支持的现象。

    对于图像清晰度非常高的的网站(如:摄影爱好者网、婚纱摄影网、旅游网等),就可以适当的使用色彩像素保留最完美的bmp格式图片了,当然如果不是着重强调的作品通常还是建议使用jpeg格式的图片。

   二、页面标签、后台程序、脚本语言以及数据库设计的优化。这些细节也很大的程度影响到网页的加载速度。

    例如,现在<div>标签由于加载速度快,布局灵活,分层表现等优点已经逐渐的取代了<table>标签在网页中的布局,其中着重强调的就是它的访问加载速度。

    还有就是网页中的脚本语言尽量使用框架语言。对于JavaScript来说,现在最流行的就是jQuery框架,它所标榜的“用更少的代码做更多的事!”也很大程度上加快了页面的加载速度。

    数据库的设计方面,很多教程上都有关于数据库查询优化的设计方法,而且都讲解的很详细。比如说,数据库查询如果不是特殊的需要,尽量不要使用子查询,这样会大大的降低查询的效率。

    三、对于字符的优化。查看很多大型网页的源代码,包括jQuery这些js框架文件,你会发现他们的代码大多数都是密密麻麻的一团,阅读起来很困难。这个问题对于开发者也是同样的认为,但是付出这样代价的好处就是它会大大节约网页内空格、换行符和注释做占的字节。对于大型的网站来说,删掉这些没有实际功能的符号的确会大大的优化网页的加载速度。

    另外,还有一个很多优化人员都没有注意到的细节。就是计算机汇编是会优先读取英文字母中的大写字母。这是由ASCⅡ码的排列方式决定的。所以在不区分大小写的标签语言和后台代码中,能使用大写字母的尽量使用大写的英文字母,至少要养成这个习惯。

    讲了这么多,希望能够给了你一定的帮助。

二、网站优化方案步骤怎么做

网站优化是一个系统工程,需要按步骤坚持去做,去完善,主要可以分为以下四个方面:

第一、要做好站内结构优化

合理规划站点结构(1、扁平化结构 2、辅助导航、面包屑导航、次导航)

内容页结构设置(最新文章、推荐文章、热门文章、增加相关性、方便自助根据链接抓取更多内容)、较快的加载速度、简洁的页面结构

第二、要做好代码优化

主要优化涉及到的内容有:Robot.txt、次导航、404页面设置、301重定向、网站地图、图片Alt、title标签、标题、关键词、描述、关键字密度、个别关键字密度、H1H2H3中的关键字、关键字强调、外链最好nofollow、为页面添加元标记meta、丰富网页摘要。

第三、要做好网站地图设置

html网站地图(1、为搜索引擎建立一个良好的导航结构 2、横向和纵向地图:01横向为频道、栏目、专题/02纵向主要针对关键词 3、每页都有指向网站地图的链接)

XML网站地图(sitemap.xml提交给百度、google)

第四、做好关键词部署,比如主关键词、长尾关键词、栏目关键词等等。

三、网页如何优化?

谈起网页的优化这个问题很多人都没有什么概念,有很多的业内人士都对网页优化一无所知或者知之甚少。说起对网页优化的理解,我曾经去各大搜索引擎上搜索过“网页优化”一类的话题,结果都是介绍如何优化搜索引擎排名的文章,其实这只是优化概念的一个组成部分,而网页的优化工作是由很多方面的优化组成的,

作为一名优秀的网页优化工作人员必须具备多方面的知识,不仅仅要掌握网站设计制作技术(包括网站架构设计、网页设计以及制作页面编写代码等等);还要掌握很多计算机其他方面的知识(包括电子商务、人机交互、易用性和一些相关的软件知识等等);甚至需要掌握心理学、商业运作等相关知识。

我认为网页的优化应该是由两个方面组成的:1.技术优化,2.人文优化(这个分类只是我总结的,没有人给出过具体定义)。技术优化指的是代码的优化、目录结构的优化和针对搜索引擎的优化等等针对技术方面的优化工作,一般都是看不见摸不着的但是会给用户带来不少方便也会给网站带来更大的效益,技术优化有一定的模式而且需要优化的东西也比较固定相对简单一些只是时间问题;人文优化指的是交互性优化、易用性优化等等针对用户使用方面的优化工作,这一部分是网站用户看得见摸的着的东西,人文优化是最花经历最困难的因为我们要猜测使用者的心理。下面我就分别对这两个方面进行解释。

1. 技术优化:

技术优化主要分为代码优化、目录结构优化和针对搜索引擎的优化三个部分。这一部分的优化工作主要是由网站开发人员测试提出方案完成的,而且有一定的规则,所以相对要简单一些只是时间问题。

(1)代码优化:

代码优化主要解决的问题就是页面浏览速度和适应性的问题。

文字和图片是构成页面的两个主要因素,所以我们的优化也要从文字和图片开始。文字我们在制作页面的时候基本上都是定义好的一般使用宋体和12px,随着代码的标准化字体的样式大小等等的指定应该使用css样式表来完成,而

现在被广泛应用的、等等标签都是不标准的,也会慢慢被css取代,现在很多大型的网站包括各个门户网站像是这样不标准的问题还是广泛存在几乎每个页面都会有,所以css样式表是我们在优化过程中应该注意检查的问题(其实这个问题应该是在页面制作的时候就解决的)。图片问题主要存在size过大的问题,在这里我们把图片的优化归在代码优化一部分一起介绍而不另分一类,是因为图片优化与代码内容优化的目的是一样的。

网页中一般应用两种格式的图片jpeg和gif,这两种图片的应用很多人把握的并不是很好,jpeg适用于颜色比较多、构成比较复杂的图片(比如一些照片、渐变颜色等等),gif适用于颜色比较少、构成比较简单的图片(比如网站的logo、大的色块构成的图片等等)。Gif图片尤其要注意导出的时候选择颜色数目这样也会达到很好的减小尺寸的效果。对于一些比较大的图片我们还可以将它切割成比较小的图片进行拼接这样也可以提高网页的下载速度。减小网页size提高网页下载速度还有一种简易的方法就是使用一些网页减肥的小工具,我们可以去下载一些这样的工具他们可以使你的网页缩小20%~50%达到事半功倍的效果。表格是页面最重要的排版方式,在浏览器读取网页代码的时候,必须读完一个完整的table才会显示出来,

如果一个大的table里边含有很多小的table那么浏览器会在读完整个大的table才将整个的内容显示出来。

我们在浏览一些页面的时候经常会出现页面半天才会显示出来,最后是在等不及了按了“停止”按钮,页面一下子显示出来了,这就是在一些小的table外边嵌套了一个大的table,而小table已经读完了就是还没读完整个的table浏览器不会显示,这样会大大减慢页面浏览速度。

因此我们要尽量减少表格层次,尽量避免将一些小的表格嵌套在大的表格中间。

还应该注意的是在使用dreamweaver制作网页的时候经常会出现很多垃圾代码,注意检查删除一些没有用的代码。

网页的适应性就是在不同系统、不同浏览器和不同分辨率的适应能力。要注意的是分辨率,应该最低照顾到800×600的用户(分辨率800×600的显示尺寸780×428、分辨率1024×768的显示尺寸1007×600),所以页面最宽不要超过780,一定不要让用户横向拖页面。

(2)目录结构优化:

现在很多网站都将所有的页面零散的放在同一个文件夹下而没有分类,这样做虽然可以但是会对以后的维护等工作带来很大的麻烦。我建议应该是建立一个大文件夹,里边包括各个频道的文件夹、网页页面asp>图片文件夹、网页内容asp>图片文件夹等等一个一个的单独类别的文件夹,使得在维护时候可以方便的找到每一个页面的具体位置。

(3)针对搜索引擎的优化:

搜索引擎优化是很多人都知道的一种优化项目,也是完整的优化工作必不可少的一个步骤。

“关键字”在搜索引擎这个话题里是一个核心的字眼,几乎所有的针对搜索引擎优化问题都是围绕着“关键字”展开的。有很多人盲目的追求在网页中处处体现关键字,觉得这样就会更容易被搜索引擎搜到,其实这样做并不一定合适。比如前一阵子流行过的“鬼影秘笈”,方法就是用和网页背景相同的颜色在页面中隐藏了很多关键字,很多人现在还在用这个方法,但是随着搜索引擎功能越来越强大这个方法已经不那么好用了,甚至会起到反作用。

“关键字”的体现要合理,比如我们可以制作一个“网站导航”的页面,网站导航页面会淋漓尽致的体现各个关键字,这个页面不但方便用户使用也会更容易的被搜索引擎找到起到事半功倍的作用。

随着搜索引擎都有了图片搜索功能,网页里边的asp>图片也是体现关键词的好地方,在页面里边加入图片后千万别忘记给图片起一个“名字”

(如:)

我们给图片的名称就可以是关键字。域名里边含有关键字也很重要,但是不宜过多,一般一个或者两个最重要的就可以了,如果过多就会影响网站在搜索引擎的排名而且不方便用户记忆。

子页面的名称也是一样,现在很多网站的子页面名称就是关键字的堆砌,其实这样会降低每个关键词的出现机率,结果每个关键词都被打了折扣甚至被忽略适得其反。

在子页面的命名上也有很大的学问,几个关键词构成了子页面的名称,但是这几个关键词用什么连接呢?

如果用分隔符断开关键字那么搜索引擎不会认为他们是一个一个的词而会当他们是一个词处理,但是有的分隔符搜索引擎同样认不出来,比如“_”和“-”在google里边下划线“_”就不被接受,所以建议大家使用“-”和空格(空格码:%20),一般所有的搜索引擎都会接受。

千万不要用中文给页面命名,页面名称、图片名称等等都要用英文字母(如:“首页.html”或者“图片.gif”一定要写成“index.htm”“image.gif”等等)。

现在很多网页虽然很好看但是并不实用,我们就拿现在很流行的跳转页面来说吧!现在很多企业网站都流行做一个跳转页面,或者是一段动感的flash或者是一张漂亮的图片,他们认为这样很漂亮特别能够体现公司的形象,其实他们并不知道这样做非常影响搜索引擎搜索你的网站。

2. 人文优化:

人文优化主要是交互、易用性和网站表现的优化。

我曾经看过一本书是美国著名的优化大师斯蒂夫.克鲁格写的,他推崇的效果优化第一原则就是“别让我动脑”。

也许这个概念看上去好像一点头绪没有,我第一次接触这句话的时候也是有点晕,如果想要做到这一点那可是非常困难的。

“别让我动脑”这个概念在不同的人身上有着不一样的概念,这就回到了上边所说的“人文优化是最花经历最困难的因为我们要猜测使用者的心理”这句话。人和人是不一样的,每个人会因为生活的地域不同有着文化差异,或者因为受到的教育经历不同有着理解问题的差异,或者是个人观点和习惯的不同等等有着各种各样的差异,我们要让所有人都能够理解我们的网站能够方便的使用网站达到他想要达到的目的这简直是太难了,而人文优化要做的就是要把这些差异变为统一。

各个网站都会有不同的目的,有电子商务网站、企业的展示网站、个人站点等等。现在我们就以最最需要进行人文优化的电子商务类型网站为例研究人文优化的大概过程。电子商务网站这个概念很明确,就是要体现商务,可以是网上购物的、可以是在线票务的、可以是网上的交易平台,总之就是让用户在网络上实现商务目的。

现在电子商务网站大体会有两个部分B2B(商家对商家)、B2C(商家对普通零散用户),B2C是电子商务网站设计的最高境界,如果能够做出成功的B2C网站那么别的什么企业展示网站或者B2B的商务网站等等就都不算什么了,原因也很简单,就是因为上边所提过的人和人的差异。

电子商务网站有一个很重要的指标就是“转化率”(也就是上网浏览网页的浏览者转变为顾客的比率)。

这个概念也就是我们衡量一个电子商务网站是否成功的重要指标,他也在优化过程中占有重要地位。介绍完电子商务的一些相关概念我们言归正传,当我们要对网站进行优化的时候,我们很快的就完成技术优化,因为技术优化有特定的步骤需要优化的项目也比较固定而且有据可依。

但是很多人不知道人文优化该如何入手,其实也很简单那就是“试用”,一般试用会分为两个部分:首

相关推荐

怎样把几张照片拼成一个长图

网页设计 2024-01-17

网页图片设计要点有哪些?

网页设计 2023-12-22

如何建立一个学校的表白墙?

网页设计 2023-11-23