网络安全 频道

不用编程十分钟打造个性浏览器(图)

如今是一个“时尚是银,个性是金”的网络时代,一些最能体现个性的爱好———自己设计并制作东西成为一种流行。我们DIY机箱、DIY桌面、DIY个人空间,但是你玩过DIY浏览器吗?
  也许你会说DIY浏览器难度太大,我不会编程。
  其实,你完全可以在十几分钟之内自己打造一个个性化的浏览器,即使你连最简单的超文本标识语言都还没有掌握。
  你所要做的就是充分挥发你的想象,把心思都花在创意上,而不需要去思考复杂的代码,只要通过简单的拖动和设置即可让你的创意变成现实。
 
  BrowserBob是一个可以自行设计浏览器的软件,你可以用图片作为浏览器的外型,再加上各种按钮、标签、地址栏等物件,就可以完成少有的作品。BrowserBob提供预览与输出的功能,预览满意之后可以将设计的浏览器输出到单独的目录,包括图片、声音等。
  运行软件,除了一个主窗口外,还有多个不同功能的浮动窗口。下面,我们来看看如何用BrowserBob来实现你的浏览器DIY梦想。
  一、小试牛刀,精简浏览器制作初体验
  有时候我们并不需要多么强大的功能,小巧简单也是一种不错的风格,特别是一款自己DIY的浏览器,即使简单,感觉也是有所不同。那么我们就先小试牛刀,做一个最简单、漂亮、完全属于自己的浏览器。
  单击菜单“File”-“New”,在弹出的对话框中,我们选择一个标准工程“Blank
App Mac Style”(如图1)。这个标准工程是一个最基本的初步窗体,但是拥有Mac风格的窗体,正好符合我们打造精简、美观浏览器的目的。

【图1】建立一个新的工程

新建工程打开后我们可以看到一个漂亮的窗口呈现在眼前(如图2),这就是我们做的第一个浏览器的雏形。虽然漂亮,但是它也太简单了,我们必须稍微加工一下。
[URL=http://hackbase.com/UpLoadFiles/NewsPhoto/40954086.jpg&topicSubject=DIY%B9%FD%E4%AF%C0%C0%C6%F7%C2%F0%3F%B2%BB%D3%C3%B1%E0%B3%CC%CA%AE%B7%D6%D6%D3%B4%F2%D4%EC%B8%F6%D0%D4%E4%AF%C0%C0%C6%F7&domainName=digi.it.sohu.com&keyWord=%B9%A4%BE%DF%C8%ED%BC%FE%3B%B5%E7%C4%D4%C8%EB%C3%C5-%CD%F8%BA%FC%D1%A7%D4%B0%3B%CD%F8%BA%FC%D1%A7%D4%B0-%C8%AB%D6%D0%B9%FA%C8%CB%B5%C4%B5%E7%C4%D4%D1%A7%CF%B0%D6%D0%D0%C4&sourcePageUrl=http://digi.it.sohu.com/20051213/n240954064.shtml&media=%CC%AB%C6%BD%D1%F3%B5%E7%C4%D4%CD%F8&author=%B5%DA%C6%DF%C0%D6%D5%C2][/URL]
【图2】这就是我们要打造的浏览器雏形了
  中间蓝色的区域就是网页显示的地方,鼠标点击选择选择它,拖动它的上边缘,使其和标题栏间流有一段空白。空白做什么用呢?浏览器总不能没有地址栏吧?对了,这里就是用来放置地址栏和几个基本按钮。
  
  现在我们要为浏览器加入地址栏和几个简单的控制按钮。点击主窗口菜单“View”-“Library”打开资源库,这里收集了一些各种风格的按钮、地址栏等控件,同时你也可以加入自己的资源。为了使界面风格保持一直,我们使用BrowserBob自带的资源,点击界面上的“MacOS_Style”选项卡(如图3)。
[URL=http://hackbase.com/UpLoadFiles/NewsPhoto/40954086.jpg&topicSubject=DIY%B9%FD%E4%AF%C0%C0%C6%F7%C2%F0%3F%B2%BB%D3%C3%B1%E0%B3%CC%CA%AE%B7%D6%D6%D3%B4%F2%D4%EC%B8%F6%D0%D4%E4%AF%C0%C0%C6%F7&domainName=digi.it.sohu.com&keyWord=%B9%A4%BE%DF%C8%ED%BC%FE%3B%B5%E7%C4%D4%C8%EB%C3%C5-%CD%F8%BA%FC%D1%A7%D4%B0%3B%CD%F8%BA%FC%D1%A7%D4%B0-%C8%AB%D6%D0%B9%FA%C8%CB%B5%C4%B5%E7%C4%D4%D1%A7%CF%B0%D6%D0%D0%C4&sourcePageUrl=http://digi.it.sohu.com/20051213/n240954064.shtml&media=%CC%AB%C6%BD%D1%F3%B5%E7%C4%D4%CD%F8&author=%B5%DA%C6%DF%C0%D6%D5%C2][/URL]
【图3】加入简单的按钮
  看到资源库中漂亮的按钮了吧?怎么使用呢?很简单!首先我们先加入前进、后退按钮“Forward Button”和“Back
Button”。鼠标左键点击“Back Button”按钮,接着拖动到你的浏览器设计窗口中的适当位置即可(如图4)。同样方法把“Forward
Button”按钮拖动到适当位置。


[URL=http://post.pic.sohu.com/view/picrecommend.do?abc=check&picurls=/UpLoadFiles/NewsPhoto/40954087.jpg;/UpLoadFiles/NewsPhoto/40954089.jpg&topicSubject=DIY%B9%FD%E4%AF%C0%C0%C6%F7%C2%F0%3F%B2%BB%D3%C3%B1%E0%B3%CC%CA%AE%B7%D6%D6%D3%B4%F2%D4%EC%B8%F6%D0%D4%E4%AF%C0%C0%C6%F7&domainName=digi.it.sohu.com&keyWord=%B9%A4%BE%DF%C8%ED%BC%FE%3B%B5%E7%C4%D4%C8%EB%C3%C5-%CD%F8%BA%FC%D1%A7%D4%B0%3B%CD%F8%BA%FC%D1%A7%D4%B0-%C8%AB%D6%D0%B9%FA%C8%CB%B5%C4%B5%E7%C4%D4%D1%A7%CF%B0%D6%D0%D0%C4&sourcePageUrl=http://digi.it.sohu.com/20051213/n240954064.shtml&media=%CC%AB%C6%BD%D1%F3%B5%E7%C4%D4%CD%F8&author=%B5%DA%C6%DF%C0%D6%D5%C2][/URL]
【图4】只需要拖动到相应的位置即可
  接着,我们再添加一个按钮试一试,让它实现访问制定网址的功能。按照上面的方法,拖动资源库中的“WWW”按钮到界面中。在浏览器设计界面中选中该按钮,点击右键选择“Properties打开属性设置浮动窗”。浮动窗中允许你设置对象的各种属性(如图5),找到“Parameter”文本框,修改其中的值为你喜欢的网址即可。同时,你可以把“Hint”修改为相应的提示说明,如“访问太平洋电脑网”,当鼠标指到该按钮上时就会出现提示。

【图5】软件还可以设置对象的各种属性
  我们来添加地址栏。资源库“MacOS_Style”选项卡中没有地址栏怎么办?没关系!在主窗口的工具栏只能够可以找到,同样拖动它到设计窗口中(如图6),适当拉长它。接着,选中它,在上面说到的属性设置浮动窗中将“Role”下拉框中值改为“Addressbar
Main Web”(如图7)。
[URL=http://post.pic.sohu.com/view/picrecommend.do?abc=check&picurls=/UpLoadFiles/NewsPhoto/40954087.jpg;/UpLoadFiles/NewsPhoto/40954089.jpg&topicSubject=DIY%B9%FD%E4%AF%C0%C0%C6%F7%C2%F0%3F%B2%BB%D3%C3%B1%E0%B3%CC%CA%AE%B7%D6%D6%D3%B4%F2%D4%EC%B8%F6%D0%D4%E4%AF%C0%C0%C6%F7&domainName=digi.it.sohu.com&keyWord=%B9%A4%BE%DF%C8%ED%BC%FE%3B%B5%E7%C4%D4%C8%EB%C3%C5-%CD%F8%BA%FC%D1%A7%D4%B0%3B%CD%F8%BA%FC%D1%A7%D4%B0-%C8%AB%D6%D0%B9%FA%C8%CB%B5%C4%B5%E7%C4%D4%D1%A7%CF%B0%D6%D0%D0%C4&sourcePageUrl=http://digi.it.sohu.com/20051213/n240954064.shtml&media=%CC%AB%C6%BD%D1%F3%B5%E7%C4%D4%CD%F8&author=%B5%DA%C6%DF%C0%D6%D5%C2][/URL]
【图6】添加地址栏

【图7】修改键值
  最后,改一下浏览器的名称。选中浏览器窗体的标题栏,在属性设置窗口中修改“Name”属性为你喜欢的名字。OK,到这里我们就完成了一个简单但是漂亮的浏览器!主界面的工具栏中有两个按钮(如图8),前者为预览测试,后者为制作发布。

【图8】成功出现两个按钮了
0
相关文章