DIV教程之页面构建事半功倍:页面构建经常使用的一些小东西

那么什么是Div+CSS标准？Div+CSS的标准化设计到底有什么好处？
破洛洛文章简介：我们将在本文中先容一些关于页面构建经常使用的一些小工具,年夜部分是基于firefox的插件,经由过程这些小工具可让我们在页面构建中事半功倍.
我们将在本文中先容一些关于页面构建经常使用的一些小工具,年夜部分是基于firefox的插件,经由过程这些小工具可让我们在页面构建中事半功倍.

• 页面bug调试工具–Firebug
  
• 及时丈量工具–Measureit
  
• 及时色彩拔取工具–Colorzilla
  
• SEO优化工具–SenSEO
  
• CSS利用效力优化工具–CSSusage
  
• 网页截图存储工具–Pearlcrescentpagesaverbasic
  
• HTML页面与计划稿比对工具–Pixelperfect
  
• 当地调试页面款式利器–Fiddler
  
• DNS革新工具–DNSflusher
  
• 网页评级工具–Yslow
  

页面构建必备工具—Firebug

信任每一个页面构建的同砚都有这个工具吧？假如没有的话，你赶忙安装（点击此处安装）,Firebug就像它的名字一样，帮你找到虫子，烧失落它！同时有一些firefox的页面调试工具也是基于Firebug的，好比Yslow,CSSUsage
网页丈量利器–MeasureIt

当我们拿到一个计划稿,写完基础的布局后,我们的丈量工具大概就入手下手了,那些间距高度宽度对齐,就必要一把好尺子来帮忙我们了,这里我像人人保举MeasureItFirefox点击安装,经由过程这把尺子,我们就可以很便利的举行一些丈量对齐事情,可是这个工具的缺点是因为谁人尺子的边框,我们不简单到达像素级的尺度,那我们就必要上面将要先容的工具Pixelperfect
及时色彩拔取工具–Colorzilla

将版式调剂好后的义务应当就是处置色彩方面的成绩，一般我们会将其放到ps等图片编纂软件中来检察响应的色值，假如有了Colorzilla，我们就可以更直不雅的利用色彩，出格是偶然候我们用文本编纂软件编写CSS色值的时分，我们乃至能够将计划稿间接拖到扫瞄器内里间接往想要地位的色彩,并且撑持RGB，RGBa，HSL，十六进制，能够间接复制。同时这个软件还供应了色板和突变天生工具。点击此处立即体验
反省网页的相干信息–WebDeveloper

一个页面相干信息的集年夜成者，任何干于网页前真个信息你都能从内里找到，我们能够很便利的检察网页的纲目、无CSS，检察DOM节点等。只需你想，基础都有了。
让你的CSS更瘦一些—CSSusage

登录/注册后可看大图

跟着产物司理一遍遍的调剂产物，你是否是也感到你的css文件渐渐变胖，可是又不敢容易删失落一些款式，由于你不晓得它们是否是被用到过，那就让上面的CSSUsage来帮你。
经由过程反省class称号利用情形，来检察页面中的CSS信息，从而便利开辟者优化CSS款式表。

登录/注册后可看大图

可显现4类信息
Seencss中当页所利用的class
Seenbefore此class已经呈现在此网站的其他网页，固然是在已扫瞄过其他网页的情形下
Unseencss中的class，此页面并未利用过
:hover伪类信息
我们之前曾略微深切的切磋,请移步至CSS减肥工具—CSSUsage
网页评级工具–Yslow

Yslow是基于firebug的一个网页评级工具,它依据Yahoo用户体验部门订制的34条大概对网页前段体现发生影响的划定规矩,这些划定规矩中有23条能够经由过程这个工具来测试.即便我们不利用这个工具,懂得这些划定规矩也是很不错的.

• 削减Http哀求
  
• 利用CDN
  
• 制止利用空SRC大概href
  
• AddanExpiresoraCache-ControlHeader
  
• 紧缩组件
  
• 将款式文件放在页面的下面
  
• 将剧本文件放在页面的上面
  
• 克制利用款式表达式
  
• 利用外链的css和js文件
  
• 削减DNS查找
  
• 减小CSS和JS文件
  
• 制止利用重定向
  
• 删除反复内容
  
• ConfigureETags
  
• 是Ajax能够缓存
  
• 利用Get办法来处置Ajax哀求UseGETforAJAXRequests
  
• 削减DOM节点的数目
  
• 不要有404页面
  
• 削减Cookie文件的巨细
  
• UseCookie-FreeDomainsforComponents
  
• 制止利用滤镜
  
• 不要在HTML中重界说文件的巨细
  
• 确保favicon.ico小并且能够被缓存
  

网页截图存储工具–Pearlcrescentpagesaverbasic

PageSaver能够将网页转化为图片，包含网页上的Flash也能同时被转化。网页能够依照你的请求保留为PNG大概JPEG格局。能够将全部网页大概在屏幕上看到的部分转化为图片。为了便利截取网页，插件供应了大批的设置选项，包含默许的文件名、文件后缀名、图片的质量。能够经由过程工具栏按钮截取图片，也能够经由过程扫瞄器的菜单选项截取图片，还能够经由过程命令行截取图片。

登录/注册后可看大图

以后可见地区保留为图片：

登录/注册后可看大图

将全部页面保留为图片
HTML页面与计划稿像素级比对工具–Pixelperfect

能够将计划师的计划图经由过程此插件作为蒙版加载到扫瞄器上，经由过程调治图片的通明度和地位，能够举行计划稿与页面的细节比对，来优化进步页面款式的准确度。
先将计划稿增加到必要对照的页面中来：

登录/注册后可看大图

让图片显现：

登录/注册后可看大图

能够经由过程调剂通明度和详细坐标地位来重合图片和网页，然后对款式举行修改。
让图片显现：

登录/注册后可看大图

登录/注册后可看大图

登录/注册后可看大图

当地调试页面款式利器–Fiddler

当我们的静态页面经由前端工程师、程序员同事的事情后，企望着旁看着，终究上线了，这时候我们这边也又要劳碌了，由于一些在静态页面没有思索到的情形和相干前端和程序同事的加工后，页面上呈现了一些bug，出格是偶然候这些BUG在分歧的扫瞄器下展示还纷歧样，单靠Firebug工具我们烧不逝世这些虫，那我们就能够经由过程Fildder工具，来监督一切HTTP哀求和呼应的工具，选出我们必要的款式文件，经由过程调试当地文件来寻觅线上bug呈现的缘故原由：http://www.fiddlertool.com
我们一样平常用来调试款式成绩.

• 第一步：存储所必要修正的CSS文件
  
• 第二步：翻开Fiddler，革新页面
  
• 第三步：选中所必要调试修正的文件
  
  
  登录/注册后可看大图
  
  
  点击右边的autoresponder–>Add
  
  
  登录/注册后可看大图
  
  行将线上的也是我们必要调试的款式文件增加出去。
  
• 第四步，将之前存好的款式表文件，增加到Fiddler中
  
  
  登录/注册后可看大图
  
  选择文件后，点击Save，半途而废。接上去就能够举行调试了。
  修正CSS文件后，间接革新页面，便可显现出最新变动调试的新款式。
  
  

固然，Fiddler工具的感化不止于此，好比网速摹拟等
DNS革新工具–DNSflusher

页面开辟的同砚天天游走在开辟情况、测试情况、仿真情况等等，为每一个情况变动HOST是屡见不鲜，改完host以后，就按着ctrl+f5狂刷页面，页面的hostip地点真的就变了吗？我们必要一个直不雅的工具来强迫扫瞄器更新host，DNSFlusher就是一个不错的工具，我们每次只需悄悄的文雅点击就可以更新至新的host地点，如今安装。
让搜刮呆板人更简单找到你–SenSEO

页面构建的事情不但是要让页面尽量的到达计划稿的艺术请求，收集传输的速率请求，还要为搜刮引擎更简单找到你做出响应的勉力。之前我们绝对少得谈及此，SenSEO是一款SEO诊断的火狐插件，你翻开面板在内里输出你的关头字，以后点击前面的几个按钮。能够给你一个综合打分，剖析你的Title、Description、Keywords、robots、NumberofWords、NumberofmatchingKeywords、Keyword-Density、NumberofHTML等等。这个插件提出的有一些剖析倡议仍是很有自创意义的。

登录/注册后可看大图

1.InspectSEOCriteriaSEO尺度反省及倡议

登录/注册后可看大图

此处有分数评级，绿色代表切合尺度，黄色代表告诫、小成绩，白色代表成绩严峻、必要从头优化
Title标签利用准确情形

登录/注册后可看大图

• (1)只利用一次
  
• (2)Title标签应当包括一切关头词
  
• (3)Title标签长度应少于65个字符
  
• (4)Title标签所包括的关头词应当少于15个
  

登录/注册后可看大图

Meta标签
例：<metaname=”description”content=”新浪网为环球用户24小时供应周全实时的中文资讯，内容掩盖国际外突发旧事事务、体坛赛事、文娱时髦、家产资讯、有用信息等，设有旧事、体育、文娱、财经、科技、房产、汽车等30多个内容频道，同时开设博客、视频、论坛等自在互动交换空间。”>
metaname=”description”标签利用准确情形

• (1)只利用一次
  
• (2)标签应当包括一切关头词
  
• (3)标签长度应少于150个字符
  
• (4)标签所包括的关头词应当少于30个
  

登录/注册后可看大图

先先容一下robots.txt是甚么：搜刮引擎经由过程一种程序robot（又称spider），主动会见互联网上的网页并猎取网页信息。能够在网站中创立一个纯文本文件robots.txt，在这个文件中声明该网站中不想被robot会见的部分，如许，该网站的部分或全体内容就能够不被搜刮引擎收录了。
(1)利用呆板人的声明，即创立robot.txt文件，以把持搜刮引擎会见
(2)供应一个网站舆图，利用谷歌网站办理员工具提交
H标签利用优化(上面的这几条倡议,假如我们利用html5构建页面的话,大概要从头审阅了.)

登录/注册后可看大图

• (1)利用H标签构建页面布局
  
• (2)H1标签只能利用一次
  
• (3)关头词应当利用H1标签
  
• (4)在页面中利用H2和H3标签
  

页面内容优化

• (1)利用共同内容
  
• (2)制止反复内容
  
• (3)内容要明晰流利
  
• (4)图片要利用可替换的笔墨形貌，即便用alt=”"
  
• (5)只管少的反复利用关头词
  
• (6)链接最好少于100个
  
• (7)代码语义化并公道无效
  
• (8)优化页面载进工夫
  
• (9)利用微格局来标志的评价，地点等
  

DOMAIN域名

登录/注册后可看大图

• (1)域名应当包括关头词
  
• (2)不要利用国际域名(域名不要包括特别字符)
  
• (3)域名中利用连字符来毗连分歧单词（URL中利用下划线，谷歌不克不及将它们拆分为分歧关头词）
  
• (4)域名利用2年以上
  
• (5)办理域名以进步排名
  

路径地点优化

登录/注册后可看大图

• (1)路径最好是短小干练
  
• (2)不利用静态参数
  
• (3)利用连字符毗连分歧单词
  
• (4)利用小写字母
  
• (5)路径层级不要凌驾3层
  

2.Showcomponents页面中有助于举行SEO优化的信息情形

登录/注册后可看大图

3.Printview打印网页信息

此内容将inspectSEOCriteria和components信息汇合起来，能够举行打印
</p>
一般来说还需要用Photoshop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来。

仓酷云

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

这个过程其实就是交流的过程。所有的这些都需要花时间。在面对完全陌生的软件时，就要多花时间对其产生初步的印象。此外，多操作也是非常重要的。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

可以使用 CSS 检查工具进行设计。