扫一扫
分享文章到微信
扫一扫
关注官方公众号
至顶头条
互联网中的宝藏真是不计其数,但是每每看到经典的好东东想据为己有时,却苦于无保存之法,只能望而兴叹。
ViewPage是一款重量级的“扩展按钮”插件,用于网页的分析,可以称的上是网页资源侦察兵。它能够分析出一个网页所含的HTML代码,无论这个网页的成份有多复杂,ViewPage插件都能在侧边栏中庖丁解牛般地将框架、图像、源码、Flash、链接、CSS、脚本、媒体等一一分解开来,把分析结果分门别类的,以树形列表的形式直观地呈现在您眼前;要想查看并获取某类资源如图片、动画、音视频等文件时也可在相应功能模块下轻松进行。下面就让我们进入“傲游(Maxthon)插件大型系列教程”,去体验一下这款好用的插件吧。
插件小档案:
名称: ViewPage
插件大小 :682 KB
插件语言 :简体中文
一、安装与界面
在以上链接处直接单击鼠标右键,选择“目标另存为”并选择保存位置后单击“保存”按钮即可下载。插件下载完成后,进行插件的安装,该插件文件是一个压缩包,在文件处单击鼠标右键,选择“解压到ViewPage_1025/”(如图1)。
(图1)
然后将释放出的“ViewPage_1025”文件夹复制并粘贴至Maxthon安装目录中的“Plugin”文件夹下。这时该插件就已安装完成。重新启动Maxthon浏览器,这时会出现一个“发现新插件”的提示窗口,在列表中我们可以看到“ViewPage”插件,勾选它并单击“确定”即可(如图2)。
(图2)
打开Maxthon浏览器后就可以在侧边栏里看到该插件了(如图3),如果没有看到的话,只要依次点击“查看→侧边栏→ViewPage”菜单项就可以了。
(图3)
在进一步学习该插件的应用前,我们先设置插件的语言为简体中文,以方便我们的使用。打开“ViewPage”侧边栏,再点击上方的“Option”按钮:(图4) 。在弹出的设置窗口中设置“Language”为“Chinese Simplified”(如图5)。再次重启Maxthon浏览器后,“ViewPage”的界面就变成简体中文了。
(图5)
二、手机铃声免费获取
各种和弦手机铃声或者真人原唱的MP3流行音乐做为自己的手机铃声已不在少数,而为了下载这些可做为手机铃声的流行音乐,许多人都到专业铃声网站下载一番,花费不少银子。有什么办法可以得到这些铃声,而又不花费一分钱呢?“ViewPage”就可以帮你轻而易举的做到!
由于铃声在下载前都支持试听,所以我们可以在试听时利用“ViewPage”插件的功能,找出该铃声的地址并把它保存到本地硬盘上。这样我们就能够把这些铃声通过手机数据线直接传输到手机上,而不需花费一分钱!有了“ViewPage”的帮助,只要你喜欢,天天免费换手机铃声也不在话下了!下面我们就来学习一下免费下载铃声的“秘籍”。
首先,登录一个手机铃声的网站,打开你所喜欢的歌曲的试听页面,比如http://www.zhangxiu.com/send/73656e645e313137343136.html(如图6),打开音响,确认已经听到页面上播放的音乐。
(图6)
打开“ViewPage”侧边栏,鼠标左键单击“ViewPage”插件上方的第一个按钮,在弹出的菜单中点“媒体”(如图7)。
(图7)
这时,我们就可以在下面的列表中看到“ViewPage”帮我们从页面中分析出的音乐。如图8,找到扩展名是“mid”的音乐文件,勾选它,然后在其上单击鼠标右键,选择“另存为”即可把音乐保存到硬盘上,之后通过数据线传到手机上就可以了,这样,我们就可以不花费一分钱而拥有各种美妙铃声了!
(图8)
一些网友们对于如何保存网页上的Flash动画或者视频文件也一直存有疑问,而“ViewPage”就可以帮我们轻松解决问题,操作方法和上面介绍的免费获取铃声大同小异。
鼠标左键单击“ViewPage”界面上方的第一个按钮,在弹出的菜单中点“Flash”,这样目标网页中包含的所有Flash的地址就会显示在在下面的树状列表中。用鼠标选择列表中的链接,目标网页也会高亮显示出所对应的Flash动画,方便我们的选择(如图9)。
(图9)
找到要保存的Flash后点击鼠标右键,在弹出窗口中选择“另存为”就可以把这个Flash保存到硬盘上了。怎么样,是不是很容易呢?我们还可以选择“复制地址”,把该Flash的地址复制到剪贴板中,方便我们在BBS上的转贴等。
媒体文件的获取也是一样的操作,只要在第一个按钮上的弹出菜单中点“媒体”即可。
(小技巧:网页上的视频文件往往比较大,这里我们用“复制地址”,把地址添加到下载软件中进行下载,这样要比直接用“另存为”下载速度更快些。)
三、查看和获取网页信息、资源
1、HTML Dom 树的查看
当你遇到一个喜欢的网页时,想要学习该网页上的制作技巧、引用网页的脚本时,“ViewPage”就派上大用场了。在Maxthon中打开你喜欢的网页(下面我们称它为“目标网页”),待目标网页读取完毕后打开“ViewPage”侧边栏。接着,鼠标左键单击“ViewPage”插件上方的第一个按钮,在弹出的菜单中点“HTML Dom 树”(如图10),
(图10)
这样,“ViewPage”就会自动分析目标网页的源代码,并且在侧边栏中根据代码结构以树状列表方式将分析结果显示出来,各个结构关系非常清晰明了(如图11),相信对HTML语言稍有了解的朋友都很容易在它的帮助下将目标网页的代码结构掌握。双击树状结构中的节点,可以查看该节点的代码、属性和样式(如图12),方便我们了解、复制和学习。
(图11)
(图12)
鼠标选中某个节点,“ViewPage”会在目标网页中高亮显示出所对应的网页区域(如图13),这样我们就可以对它进行操作了。
(图13)
HTML”可以复制出该区域所包含的文字和HTML源代码;“插入 HTML”和“插入脚本”可以方便的在该区域中添加代码,而无需另外保存后再在复杂的代码中操作;“设置 ContentEditable”可以将该区域变为可更改的状态,你可以在目标网页的该区域中以所见即所得的方式编辑其中的内容,比如我们要更改其中的一段文字,只要用鼠标双击要更改的文字后就可以开始编辑了,就如同在Word中写作一样简单。
(图14)
2、查看页面信息
同样鼠标左键单击“ViewPage”插件上方的第一个按钮,在弹出的菜单中点“页面信息”可以查看该网页的基本信息(如图15),如域名、标题、编码、创建信息、修改日期等,同时,它可以获取到该网站的Alexa世界排名和用户的评价。
(图15)
3、获取网页脚本和样式表
“ViewPage”不仅可以分析出整个页面的结构,还可以从中更详细的提取出其中的脚本、样式表等。下面我们就来学习一下获取网页中脚本的操作。
鼠标左键单击“ViewPage”界面上方的第一个按钮,在弹出的菜单中点“脚本”,打开脚本的分析结果。在下面的树状列表中我们可以看到分析的结果,其中有些是目标网页内部包含,显示为“内部”字样,有些是其链接的脚本,显示为该脚本的URL。
鼠标选中要查看代码的节点,点击鼠标右键,选择“查看脚本”,在弹出的窗口中我们就可以查看到该节点所对应的脚本的代码(如图16),无论是内部包含还是外部链接。点击窗口中的“另存为”按钮,可以把代码保存下来,也可以直接复制后粘贴到自己的网页中,非常方便我们学习和借鉴他人的代码。
(图16)
对于外部链接的脚本,还多了一个功能:可以在Maxthon中过滤该脚本的运行。操作方法如下:选中外部链接的脚本后点鼠标右键,选“添加到过滤列表”,之后,在弹出的窗口中点击“确定”按钮即可。
通过以上的功能,我们可以快速轻松的获取目标网页中各种脚本的内容,而获取样式表的操作也是差不多的,这里就不在累述了。
上面介绍了网页信息和资源的查看和获取的操作,在操作中你一定会发现上面说到的弹出菜单中的“图片”功能没有介绍。别急,对于网页上的图片,“ViewPage”提供了一个专门的、更强大的功能,在下面我们接着介绍。
四、网页图像的高级功能
1、图像查看和保存
针对网页中的图像,“ViewPage”提供了更加高级的功能,可以让我们更好的查看和获取网页中的各种格式的图像。即使是一些被限制弹出右键菜单的图片,也可以轻而易举的把它们保存下来。
鼠标左键单击“ViewPage”界面上方的第六个按钮,在弹出的菜单中点“图像(高级)”(如图17),这时就会打开一个图像高级操作的窗口(如图18)。
(图17)
(图18)
窗口的左边显示了目标网页中所包含的所有图像的地址列表,右边是预览窗口,点击左边的图像地址,预览窗口中会显示相对应的图片。通过预览窗口查看后,将所要保存的图片地址勾选上,点击窗口上方的保存按钮,选择保存路径后即可一次将所选择的图片全部保留到硬盘上(如图19)。
(图19)
2、生成代码
在论坛上常常看到别人贴的精美图片时,都想转贴到其他论坛让大家分享,但是却苦于转贴麻烦,一张张图片地址的复制、粘贴操作太过繁琐,现在图像的“生成代码”功能就可以让我们轻松玩转论坛贴图。
和上面的操作一样,通过预览窗口选择需要的图片后,勾选它们,然后点击窗口上方的第三个按钮。这时,就会弹出创建代码的窗口,其中已经默认显示了所选中图片所对应的UBB代码,我们只要点击“复制到剪贴板”按钮,在粘贴到支持UBB贴图的论坛中就可以完成论坛贴图的全过程,大大的提高了我们的效率(如图20)。
(图20)
有一些论坛不支持UBB贴图而是支持HTML代码贴图,那么只要在代码类型的选择下拉框中选择“HTML”即可,或者选择“TEXT”可以获取到选中图片的地址列表(如上图20)。
(小技巧:当一个网页中包含大量图片时,我们可以点击窗口上方的“显示所有图像”按钮,这样就可以在预览区域中查看到所有图片;另外,可以选择图片格式来显示图片。(如图21)
(图21)
五、链接的高级功能
不仅针对网页中的图像,对于网页中的链接“ViewPage”也提供了更加高级的功能,可以让我们整理页面中的链接,获取链接列表代码、报表等。
鼠标左键单击“ViewPage”界面上方的第六个按钮,在弹出的菜单中点“链接(高级)”,这时就会打开一个图像高级操作的窗口(如图22)。
(图22)
窗口中显示了页面中所有的链接以及它们对应的地址。选择要操作的链接,勾选他们,然后点击窗口上方的“动作”按钮,在弹出菜单中选择需要的操作(如图23)。其中,“创建并打开HTML列表”可以把所选中的链接生成一个列表网页,并保存到硬盘上;“生成代码”功能类似上文介绍的图片的生成代码功能,方便我们在论坛等地方粘贴网址。
(图23)
六、结束语
通过以上的介绍你对“ViewPage”的操作有了一定的了解了吧?但是上面只是介绍了它的基本应用操作,还有更强大、高级的功能等待你去发掘!
“ViewPage”不仅提供了丰富、强大的功能来满足您分析 HTML 页面的需要,不仅是Web程序员的得力助手,同时也是普通网民获取网页资源(包括网页上的图片、Flash、电影等多媒体文件)的便捷工具。还犹豫什么,快下载安装它,让它成为你网上冲浪的好帮手!
如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。
5G已至 转型当时——服务提供商如何把握转型的绝佳时机
去集群 更超群——大容量网络演进之路
2019 IBM 中国论坛
H3C 2019 Navigate 领航者峰会
助推数据中心网络现代化转型 打造灵活可靠基础架构平台