4当前位置:网页制作DreamWeaver教程-Dreamweaver CS5抢鲜看!
4网页制作分类
CSS | HTML
FrontPage | DreamWeaver
JavaScript | ASP
.Net | PHP
JSP | XML
数据库 | PhotoShop
FireWorks | Flash
视频 | 其它
4赞助商链接
4最新网页制作
·Dreamweaver CS5抢鲜看!
·Dreamweaver CS5启用/禁用样式表功能
·Dreamweaver的CSS布局ul和li范例
·Dreamweaver利用CSS控制页面外观
·Dreamweaver制作多彩文字链接
·Dreamweaver使用库的方法
·DW固定网页语言编码、字号及字体
·Dreamweaver制作复杂的交换图像
·玩转Dreamweaver 8之设置段落格式
·玩转Dreamweaver 8之属性检查器和文本格式设置
4热门网页制作
·菜鸟学DW MX做ASP之一(站点设置篇)
·菜鸟学DW MX做ASP之二(数据库设置)
·菜鸟学DW MX做ASP之三(数据显示篇)
·菜鸟学DW MX做ASP之五(登录系统篇)
·Dreamweaver连接数据库典型问题解决方法
·菜鸟学DW MX做ASP之四(注册系统篇)
·菜鸟学DW MX做ASP之六(忘记密码篇)
·Dreamweaver制作多彩文字链接
·Dreamweaver MX 2004设计留言本(二)
·DreamWeaver经典50问
4相关网页制作
·Dreamweaver8实现文本段落缩进
·用DreamWeaver MX制作文字特效
·DW MX 2004网页中文乱码问题常见原因
·Dreamweaver嵌入式框架
·Dreamweaver的空格问题和不间断空距标记
·Dreamweaver MX行为(5)-转到URL
·使用Dreamweaver模板构建网站
·Dreamweaver指定处理动态页
·Dreamweaver cs3的两个彩蛋
·Dreamweaver cs3的两个彩蛋
Dreamweaver CS5抢鲜看!
类别:DreamWeaver教程    来源:网络    时间:2010/6/19    贴士:推荐给好友
收藏本页 8 
  Adobe BrowserLab是Adobe推出一款基于Flash技术的在线跨浏览器页面预览工具。通过Adobe BrowserLab我们可以生成网站或者博客在不同浏览器下的网页的快照,从而很方便测试网站的兼容性,如图1所示。

点击图片打开新窗口浏览

图1 Adobe BrowserLab主界面


  BrowserLab支持Windows XP和MAC OS X上的绝大多数主流浏览器。目前支持Windows平台的IE 6、7、8,Firefox 2.0、3.0、3.6,Chrome 3.0;支持Mac平台上的Firefox 2.0、3.0、3.6,Safari 3.0、4.0,如图2所示。

点击图片打开新窗口浏览

图2 Adobe BrowserLab主界面


  如果需要使用Adobe BrowserLab ,应该首先登陆Adobe BrowserLab 的网站进行注册,网址为:https://browserlab.adobe.com,如图3所示。

点击图片打开新窗口浏览

图3 Adobe BrowserLab网址首页


  这时可以点击页面右上角的“Sing In”链接进行登陆,如果之前在Adobe的官方网站注册过Adobe id的用户可以直接登陆,而没有注册的用户则需要在Adobe的网站上注册了Adobe id以后才能够进行登陆,如图4所示。

点击图片打开新窗口浏览

图4 Adobe BrowserLab登陆界面


  确定登陆Adobe BrowserLab之后,就可以在Dreamweaver CS5中打开需要进行兼容性测试的网页,如图5所示。

点击图片打开新窗口浏览

图5 在Dreamweaver CS5中打开页面


  选择“文件”→“在浏览器中预览”→“Adobe BrowserLab”(快捷键为:Ctrl+Shift+F12),这时Dreamweaver CS5会打开“Adobe BrowserLab”面板,在这个面板中会显示需要测试文档的上传进度,如图6所示。

点击图片打开新窗口浏览

图6 使用Adobe BrowserLab预览页面


  当全部文档上传完毕后,就可以在Adobe BrowserLab网站中预览生成的页面效果了,如图7所示。

点击图片打开新窗口浏览

图7 在Adobe BrowserLab网站中预览页面


  Adobe BrowserLab提供了水平两栏对比和洋葱皮(onion skin)对比,可以将不同网页渲染模式下将结果重叠在一起,以便看看网页在不同浏览器下的区别,如图8所示。

点击图片打开新窗口浏览

图8 多窗口预览


  如果需要测试不同浏览器中的预览效果,可以在Adobe BrowserLab网站页面的左上角的位置来选择相应的浏览器,如图9所示。

点击图片打开新窗口浏览

图9 选择不同的测试浏览器


  如果需要对服务器中的网页进行测试,可以直接在页面顶端的地址栏中输入需要进行测试的页面地址,如图10所示。

点击图片打开新窗口浏览

图10 对服务器中的页面进行测试


  Adobe BrowserLab的出现对于广大的WEB前端工程师来说确实是一个非常有利的工具,但是由于Adobe BrowserLab是一种在线的服务,对于带宽有限的用户来说浏览速度有待提高,并且最终生成的预览只是一张静态的图像,页面中所有的交互功能都不能进行验证,希望Adobe能够在下个版本中进行相应的改进。

  出处:网页顽主论坛www.go2here.net.cn,作者:froglt。
·上一篇:Dreamweaver CS5启用/禁用样式表功能
·下一篇:这已经是本类最后一篇记录了!
本站部分内容收集整理于网络,仅用于学习,不存在商业目的,如有涉及版权等问题请联系站长,本站将在第一时间内进行处理!
Copyright © 2007-2010 Zzsky.Cn  中国站长天空  网站制作维护:可乐猫  QQ:8127544(请注明来意)
设为首页  加入收藏  联系站长  友情链接  闽ICP备12017729号