静态页面网站设计

SEO是方方面面的事，每一个细节都要把握好前端开发工程师不仅需要要跟视觉设计师、交互式设计师配合，完美还原设计图稿，编写兼容各大浏览器、加载速度快、用户体验好的页面。现在还需要跟SEO人员配合，调整页面的代码结构和标签。一些成熟的平台，在开发初期并没有考虑优化问题，所以做出来的页面，就算是效果很炫，功能很强，但是对搜索引擎非常的不友善。任何一个成熟的网站，后期页面都是动辄几百万的，到这个时候再来调整结构，既费时又费力，最怕的还是会影响到排名和收录。所以说与其在后期碰到问题再来调整，还不如把问题解决在源头。我本人也是从事前端开发工作的，下面把我工作过程中，积累的几个开发过程中就需要做好的SEO优化技巧，分享给大家。1、简化代码结构，更利于搜索引擎分析抓取有用内容：页面尽量采用DIV+CSS，当然，表格展现模式用table还是比div方便很多的;所有js、css采用外联方式，图片采用css精灵，减少请求次数。看下下面同样的内容，用div和talbe布局的代码比较，显而易见用div简便的多。2、重要内容优先加载(第一个链接最好是网站主关键词，不刻意要求)，可以用css来处理，索引一篇文章的长度也是有限制的，一定要把最重要的内容，优先展现给蜘蛛，这方面你可以通过查看一些比较大的网页快照来求证。3、每个页面只能出现一次H1标签，H2标签可以多次：H1权重很高，普遍认为仅次于title，一般资讯详情页的标题、商品详情页的标题，都放在H1里。4、图片一定要添加alt属性，title属性可选：蜘蛛不认识图片上的内容，只能通过alt属性来判断，如果是商品列表页，所有商品都加了alt和title的话，容易造成堆砌关键词，所以我一般是只加alt属性。5、图片大小声明：如果图片大小不做定义的话，页面需要重新渲染，就会影响到加载速度。6、链接可根据需求添加title属性以及nofllow值;非特殊性链接，链接地址一定要写入herf属性，有些前端开发人员为了省事，直接用div加个click事件当链接，在视觉上和使用上确实是实现了链接效果，但是做过SEO优化的人员都知道，蜘蛛目前对于js的支持很差，基本无法读取里面的链接地址。所以说用click事件是绝对不允许的，特别是一些重要的导航链接。7、页面内容尽量不要做成flash、图片、视频，这些东西蜘蛛是抓不到的，就算是必须的，也要生成相应的静态页面。有很多企业站看着很炫，全站flash，老板看着是爽了，做SEO优化的人员就要抓狂了，全站没一个链接。8、除首页外别的页面最好要加上面包屑型导航，导航结构一定要清晰。9、做好404页面，一般会加首页链接及错误提示，并测试其返回状态码为404：1、用户体验友好，可以留住用户，不至于直接关闭页面;2、蜘蛛友好，可以返回抓取其他页面。10、网站结构呈扁平状树型，目录结构不宜过深，每个页面离首页最多点击不超过3次，过深不利于搜索引擎的抓取。注意：内容为王的时代，还是要有价值输出作为最重要的依靠，切莫舍本逐波，打造自己的IP。

在网站推广方法中，搜索引擎推广是最重要的方法之一，而Google目前是世界最NB的搜索引擎了，占全球56％的搜索引擎市场，所以网站在Google中的推广不可忽视。不过，目前大多网站在Google中的推广都是给Google钱，做Google右边的广告。 Google右侧广告虽然效果还凑合，但是价格毕竟太高了（每次点击，0.05美元），不是我们平常的网络老百姓能够承受了的。如何不给Google一分钱在Google中更好的推广自己的网站呢？这里我教大家一套秘笈---- Google左侧排名。 Google左侧排名，主要是通过技术手段，提高网站在Google中的综合评分自然的获得较好的排名的。这里我们一下Google左侧排名技巧： 第一步：Google排名第一步要先了解Google排名的因素: Google排名因素据说超过300种，这个数据是一个国外的著名的SEO（搜索引擎优化研究）研究者提供的，不过我们必须研究那么深，因为我们祖先有句非常有道理的话是这么说的：万变不离其宗！ Google排名因素主要有以下几条： A: 网站结构：合理的网站结构可以让Google轻松搜索到你网站的大多内容，收录你大量的页面，的关注你这个网站。是排名很重要的一条因素。 B: 标签设计：搜索引擎都喜欢通过一些标签来认识网页，判断网页，Google也不见外。此条因素也非常重要。 C: PageRank：也就是常说的PR值。Google对网页的等级评分。是排名因素中的重中之中，下面会给大家详细谈一下。 D: 网站流量：网站流量越大，Google越关注，而且不光对你网站更新非常快，而且对排名的好处也是非常大的。 E: 其他因素还有很多很多，这里就不列出来了，只要前面那四项我们想办法做好就OK。 第二步：优化网站：优化网站主要包括：网站结构优化，网站标签优化，网站页面优化，为的是让Google更容易搜索你的网站并且关注你想排的关键词。这里举个实际例子给大家谈： A: 结构优化：让想GOOGLE收录你网站的网页，关键就是要让各个页面之间相互都有连接。另外最好再做一个详细的网站地图页面。例如： 各个页面之间的连接结构 网站地图 B: 标签设计：网页标签主要是两个标签，一个是网页标题，一个是简介标签，一个是关键词标签。标签中要适当的突出关键词。例如在Google中输入“电子商务”一次排名第一的网站首页标签是这么设计的： 电子商务指南是一个专业的电子商务交流学习站点，主要有以下栏目：电子商务新闻、电子商务研究、电子商务论文、电子商务法律、电子商务论坛。另外提供电子商务与网络营销咨询策划服务.">。 电子商务"> 这三段标签要放在与之间 注：标题标签长度不可超过40个字符（20个汉字）为好。 注：简介标签要清晰明了的写出网页简介内容，另外突出关键词。不要过长和写与网页内容不相干的内容 注：关键词标签写太多容易被认为作弊，老实写出就OK，不要写与自己网页无关的词。 C: 网页优化： 首页：许多网站首页都是纯FLASH或者是一个图片，这样结构的网站很不合理，首页是一个网站的入口，起到的主要就是导航作用。首页最好一个清晰明了又有内容的页面。 另外，网页文本内容中要突出关键词，里面遇到的关键词可以用加粗。另外文本中有其他页面的关键词的话，可以将这个关键词加上超链接，导向相关页面。 注：每个网页突出的关键词越少越好，最好不要超过3个。另外，网页中的关键词的密度一定要把我好一个度，不要太低，也不高太高。一般在3％左右比较合适。 第三步：提高网站的PR值. PR值是Google对网页的评分，主要根据网页之间的连接来计算：比如，A站有B站的连接，一个用户从A站点击B站在A站的连接进入B站，就表示A站投了B站一篇，将被GOOGLE记录。一个网页的外部连接越多，它的PR值就越高。 提高网页PR值主要有以下几中方法: A: 和PR值高的网站做友情连接。 B: 登陆YAHOO, DMOZ 等许多网页目录。 C: 到一些自助连接站点登陆自己网站的连接。 D: 优化网站结构，让网站自身页面之间都有很好的连接。 第四步：提高网站流量：想让自己网站本身的流量越好越好，首先第一条就是要把网站自身内容做好，粘住浏览过你网站的客流，让他们第一次上你网站就记住你网站，并且下次需要相关信息了还会来你的网站。另外就是配合着做其他方面的推广。 Google左侧排名不给Google一分钱，而且如果左边排名达到后，效果是Google右侧广告效果的三十倍以上。还犹豫什么，赶快行动吧！

网页设计在初始要界定出网页的尺寸大小.就像绘画给出一块画版来.这样才能方便设计. 网页的尺寸受限于两个因素:一个是显示器屏幕.显示器现在种类很多,以17寸为主流, 正在朝19寸及宽屏的方向发展.但目前也有为数不少的15寸显示器.另一个是浏览器软件,就是我们常用的IE,遨游,Firefox等. 高度： 高度是可以向下延展的,所以一般对高度不限制. 对于一屏来说,一般没有一个固定值，因为每个人的浏览器的工具栏不同，我见过有的浏览器工具栏被插件占了半个屏幕，所以高度没有确切值。 宽度: 1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。 2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005 3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001 注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。 所以如果是1024的分辨率，你的网页不如设成1000安全一点。设成900两侧空白更大,视觉上更舒服一点.也方便做一些浮动层的设计. 如果是800的分辨率一般都设成770。但也有设成760的. 这些需要明白并且牢记,不然很可能做出来不符合浏览器要求,不过一般我们都回设定的再稍微小一点,应为有些浏览器加了插件或者其他的东西宽度会有变化所以 800的分辨率一般设定760左右,1024的设定990左右. 网页设计标准尺寸: 1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象. 页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 标准网页广告尺寸规格 一、120*120，这种广告规格适用于产品或新闻照片展示。 二、120*60，这种广告规格主要用于做LOGO使用。 三、120*90，主要应用于产品演示或大型LOGO。 四、125*125，这种规格适于表现照片效果的图像广告。 五、234*60，这种规格适用于框架或左右形式主页的广告链接。 六、392*72，主要用于有较多图片展示的广告条，用于页眉或页脚。 七、468*60，应用最为广泛的广告条尺寸，用于页眉或页脚。 八、88*31，主要用于网页链接，或网站小型LOGO。 广告形式 像素大小 最大尺寸 备注 BUTTON 120*60(必须用gif) 7K 215*50(必须用gif) 7K 通栏 760*100 25K 静态图片或减少运动效果 430*50 15K 超级通栏 760*100 to 760*200 共40K 静态图片或减少运动效果 巨幅广告 336*280 35K 585*120 竖边广告 130*300 25K 全屏广告 800*600 40K 必须为静态图片，FLASH格式 图文混排 各频道不同 15K 弹出窗口 400*300(尽量用gif) 40K BANNER 468*60(尽量用gif) 18K 悬停按钮 80*80(必须用gif) 7K 流媒体 300*200（可做不规则形状但尺寸不能超过300*200） 30K 播放时间 小于5秒60帧(1秒/12帧) 网页中的广告尺寸 1.首页右上，尺寸120*60 2.首页顶部通栏，尺寸468*60 3.首页顶部通栏，尺寸760*60 4.首页中部通栏，尺寸580*60 5.内页顶部通栏，尺寸468*60 6.内页顶部通栏，尺寸760*60 7.内页左上，尺寸150*60或300*300 8.下载地址页面，尺寸560*60或468*60 9.内页底部通栏，尺寸760*60 10.左漂浮，尺寸80*80或100*10

站点就是网站。都有两层意思：一、建立网站/站点，通常就是建立一个网站根文件夹，并在其中建立编辑页面、服务等。二、发布网站/站点，使用发布软件直接发布，如IIS、tomcat、apache等，也可以是直接上传至某个Web服务器。

网页的背景多大要看对网页的要求的，网页设计标准尺寸:1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。 3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右 4、在PS里做的图到了网上就不一样了，颜色等等方面，因为WEB上面只用到256WEB安全色，而PS中的RGB或者CMYK以及LAB或者HSB的色域很宽颜色范围很广，所以自然会有失色的现象. 页面标准按800*600分辨率制作，实际尺寸为778*434px 页面长度原则上不超过3屏，宽度不超过1屏 每个标准页面为A4幅面大小，即8.5X11英寸 全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px 另外120*90，120*60也是小图标的标准尺寸 每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K 希望帮到你~~