[尊重原创,本文转自:新浪UED]
页面构建必备工具 — Firebug
相信每个页面构建的同学都有这个工具吧?如果没有的话,你赶紧安装(点击此处安装),Firebug就像它的名字一样,帮你找到虫子,烧掉它!同时有一些firefox的页面调试工具也是基于Firebug的,比如Yslow , CSS Usage
网页测量利器– MeasureIt
当我们拿到一个设计稿,写完基本的结构后,我们的测量工具可能就开始了,那些间距\高度\宽度\对齐,就需要一把好尺子来协助我们了,这里我像大家推荐 MeasureIt Firefox点击安装,通过这把尺子,我们就能很方便的进行一些测量对齐工作,但是这个工具的缺陷是由于那个尺子的边框,我们不容易达到像素级的标准,那我们就需要下面将要介绍的工具 Pixel perfect
实时颜色选取工具–Colorzilla
将版式调整好后的任务应该就是处理颜色方面的问题,通常我们会将其放到ps等图片编辑软件中来查看相应的色值,如果有了Colorzilla,我们就能更直观的使用颜色,特别是有时候我们用文本编辑软件编写CSS色值的时候,我们甚至可以将设计稿直接拖到浏览器里面直接去想要位置的颜色,而且支持RGB,RGBa,HSL,十六进制,可以直接复制。同时这个软件还提供了色板和渐变生成工具。点击此处立刻体验
一个页面相关信息的集大成者,任何关于网页前端的信息你都能从里面找到,我们可以很方便的查看网页的大纲、无CSS,查看DOM节点等。只要你想,基本都有了。
让你的CSS更瘦一些 — CSS usage
随着产品经理一遍遍的调整产品,你是不是也感觉你的css文件慢慢变胖,但是又不敢轻易删掉一些样式,因为你不知道它们是不是被用到过,那就让下面的CSSUsage来帮你。
通过检查class名称使用情况,来查看页面中的CSS信息,从而方便开发者优化CSS样式表。
可显示4类信息
Seen css中当页所使用的class
Seen before 此class曾经出现在此网站的其他网页,当然是在已经浏览过其他网页的情况下
Unseen css中的class,此页面并未使用过
:hover 伪类信息
我们以前曾稍微深入的探讨,请移步至CSS减肥工具 — CSS Usage
Yslow是基于firebug的一个网页评级工具,它根据Yahoo用户体验部门订制的34条可能对网页前段表现产生影响的规则,这些规则中有23条可以通过这个工具来测试.即使我们不使用这个工具,了解这些规则也是很不错的.
- 减少Http请求
- 使用CDN
- 避免使用空 SRC 或者 href
- Add an Expires or a Cache-Control Header
- 压缩组件
- 将样式文件放在页面的上面
- 将脚本文件放在页面的下面
- 禁止使用样式表达式
- 使用外链的css和js文件
- 减少DNS查找
- 减小CSS和JS文件
- 避免使用重定向
- 删除重复内容
- Configure ETags
- 是Ajax可以缓存
- 使用Get方法来处理 Ajax请求Use GET for AJAX Requests
- 减少DOM节点的数量
- 不要有 404页面
- 减少 Cookie 文件的大小
- Use Cookie-Free Domains for Components
- 避免使用滤镜
- 不要在HTML中重定义文件的大小
- 确保favicon.ico 小而且可以被缓存
Page Saver可以将网页转化为图片,包括网页上的Flash也能同时被转化。网页可以按照你的要求保存为PNG或者JPEG格式。可以将整个网页或者在屏幕上看到的部分转化为图片。为了方便截取网页,插件提供了大量的设置选项,包括默认的文件名、文件后缀名、图片的质量。可以通过工具栏按钮截取图片,也可以通过浏览器的菜单选项截取图片,还可以通过命令行截取图片。
当前可见区域保存为图片:
将整个页面保存为图片
HTML页面与设计稿像素级比对工具–Pixel perfect
可以将设计师的设计图通过此插件作为蒙版加载到浏览器上,通过调节图片的透明度以及位置,可以进行设计稿与页面的细节比对,来优化提高页面样式的精确度。
先将设计稿添加到需要对比的页面中来:
让图片显示:
可以通过调整透明度和具体坐标位置来重合图片和网页,然后对样式进行修正。
让图片显示:
本地调试页面样式利器–Fiddler
当我们的静态页面经过前端工程师、程序员同事的工作后,盼望着旁望着,终于上线了,这时咱们这边也又要忙碌了,因为一些在静态页面没有考虑到的情况和相关前端和程序同事的加工后,页面上出现了一些bug,特别是有时候这些BUG在不同的浏览器下展现还不一样,单靠Firebug工具我们烧不死这些虫,那我们就可以通过Fildder工具,来监视所有 HTTP 请求和响应的工具,选出我们需要的样式文件,通过调试本地文件来寻找线上bug出现的原因:http://www.fiddlertool.com
我们一般用来调试样式问题.
- 第一步:存储所需要修改的CSS文件
- 第二步:打开Fiddler,刷新页面
- 第三步:选中所需要调试修改的文件
点击右侧的autoresponder –> Add
即将线上的也是我们需要调试的样式文件添加进来。
- 第四步,将之前存好的样式表文件,添加到Fiddler中
选择文件后,点击Save,大功告成。接下来就可以进行调试了。
修改CSS文件后,直接刷新页面,即可显示出最新更改调试的新样式。
当然,Fiddler 工具的作用不止于此,比如网速模拟等
DNS刷新工具–DNS flusher
页面开发的同学每天游走在开发环境、测试环境、仿真环境等等,为每个环境更改HOST是家常便饭,改完host之后,就按着ctrl+f5狂刷页面,页面的host ip 地址真的就变了吗?我们需要一个直观的工具来强制浏览器更新host,DNS Flusher就是一个不错的工具,我们每次只要轻轻的优雅点击就能更新至新的host地址,现在安装。
让搜索机器人更容易找到你–SenSEO
页面构建的工作不仅是要让页面尽可能的达到设计稿的艺术要求,网络传输的速度要求,还要为搜索引擎更容易找到你做出相应的努力。以前我们相对少得谈及此,SenSEO是一款SEO诊断的火狐插件,你打开面板在里面输入你的关键字,之后点击后面的几个按钮。可以给你一个综合打分,分析你的Title、Description、 Keywords、robots、Number of Words、Number of matching Keywords、Keyword-Density、Number of HTML等等。这个插件提出的有一些分析建议还是很有借鉴意义的。
1. Inspect SEO Criteria SEO标准检查及建议
此处有分数评级,绿色代表符合标准,黄色代表警告、小问题,红色代表问题严重、需要重新优化
Title 标签使用正确情况
- (1) 只使用一次
- (2) Title标签应该包含所有关键词
- (3) Title标签长度应少于65个字符
- (4) Title标签所包含的关键词应该少于15个
Meta标签
例:<meta name=”description” content=”新浪网为全球用户24小时提供全面及时的中文资讯,内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等,设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道,同时开设博客、视频、论坛等自由互动交流空间。” >
meta name=”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. Show components 页面中有助于进行SEO优化的信息情况
3. Printview 打印网页信息
此内容将inspect SEO Criteria 和 components信息 集合起来,可以进行打印
分享到:
相关推荐
基于gulp的静态页面构建工具
使用webpack以及其loader/插件实现前端自动化构建工具。 区别于网上各种webpack多页面的妖艳工具。以我做多页面时候的思想为准。大约有以下几个特点。
weapp-webapck-demo 通过webpack编译构建微信小程序 使用 创建微信小程序时,将目录设到build/src下,本地的开发目录在src下 ...1、小程序的生命周期函数不要使用箭头函数,使用function才能用this访问到页面实例
X-rayHTML, 一些帮助构建文档页面的小工具 x-rayhtml 一些帮助构建文档页面的小工具。不要放入标记的block,然后将它的复制并粘贴到 pre/code block 中,然后退出并更新渲染代码。 现在你只需包装在 div 中呈现的...
Webpack4 多页面应用初始构建
这是一个尝试让 h5 页面在微信小程序中运行的构建转换工具
AlloyDesigner 重新定义了Web页面构建的模式,页面构建过程中,AlloyDesigner直接嵌入你的Web页面中运行,帮助你精准、高效的构建Web页面的 UI!AlloyDesigner 是用 HTML5 开发的、直接嵌入在Web页面中运行的可视化...
fedao 学而思在线前端工程构建工具
V-Craft V-Craft(受Craft.js启发)是用于使用Vue.js构建可扩展页面构建器的工具集。 V-Craft(由Craft.js启发)不是一个带有用户V-Craft的完整页面构建器,而是一个工具集,用于使用Vue.js构建可扩展的页面构建器。...
VCraft.io V-Craft(受启发)是使用Vue.js构建可扩展页面构建器的工具集。 V-Craft并未提供具有用户界面和设计好的元素块的完整页面构建器,而是仅提供了页面构建器的基本要素。 使用V-Craft,您将能够专注于页面...
一个小应用程序,显示可用于提高网页性能的社区构建的第三方工具列表
Keepfast 是一个性能分析工具,能够分析网站的资源构建性能和页面性能,生成性能报告并提供优化建议,让性能监控更方便。分析并生成构建性能报告,可直观的对比两个版本的构建性能,以便尽早发现构建性能问题,基于 ...
Vue-rap 可以在不使用大量前端工具(如npm,webpack,Browserify等)的情况下快速构建基于 Vue的秒速打开边用边下载的流应用(单页面应用);依赖小(只需要引用 vue 就可以了),学习成本低,上手快;vue-rap拥有类似 .vue 的...
网站和博客构建工具 WordPress 中文版网站和博客构建工具 WordPress 中文版 借助 Android 版 WordPress,您可以随时随地发布信息,尽在您的掌握。在沙发上为即兴创作的俳句撰写草稿。在午休时间拍照并发布。回复最新...
Halo 作为一款好用又强大的建站工具,配合上不同的模板与插件,可以很好地帮助你构建你心中的理想站点。它可以是你公司的官方网站,可以是你的个人博客,也可以是团队共享的知识库,甚至可以是一个论坛、一个商城。 ...
无限层级树页面构建工具,支持用拖拽的方式实现数据的层级、排序等操作 内置丰富的常用页面组件(如图表、数据统计卡片、下拉菜单、Tab 卡片、提示工具等) Section 功能(类似 Wordpress 的 Filter 和 blade 模板的...
无限层级树页面构建工具,支持用拖拽的方式实现数据的层级、排序等操作 内置丰富的常用页面组件(如图表、数据统计卡片、下拉菜单、Tab 卡片、提示工具等) Section 功能(类似 Wordpress 的 Filter 和 blade 模板...
第2章 小程序环境搭建与开发工具介绍 第3章 第一个简单的页面:欢迎页面 第4章 第二个页面:新闻阅读页面 第5章 小程序的模板化与模块儿化 第6章 构建新闻详情页面 第7章 开始制作电影资讯页面 第8章 更多电影及电影...
只需一行代码搞定pdf的框架,x-easypdf基于pdfbox构建...页面所有内容均采用组件化形式进行构建,使用不同的组件组合方式,即可构造出理想的文档 扩展灵活 只需实现系统提供的接口,即可完成自定义的组件扩展 软件架构
为您提供DcatAdmin后台构建工具下载,Dcat Admin是一个基于...Dcat Admin后台构建工具特点:用户管理RBAC 权限管理,支持无限极权限节点菜单管理使用 pjax 构建无刷新页面,支持按需加载静态资源,可以无限扩展组件而不