e股脑电脑教程网
  • 首 页
  • 操作系统
  • 应用软件
  • 下载工具
  • 影音视频
  • 办公软件
  • 媒体制作
  • 网站建设
  • 平面设计
  • 数据库
  • 程序开发
  • 视频教程
编辑推荐: | 文章搜索:
您现在的位置: e股脑 >> 应用软件 >> 网页浏览 >> 发挥想象:十分钟打造个性浏览器 >> 教程正文
 
教程搜索
 
 
相关教程
  • 地球还是火星 平常心看“非主流”
  • Windows Mobile 7 手机可能迟至2010年
  • 中美光缆启动并投入运行 网速大增60倍
  • 08年IT用户满意度调查揭晓 惠普、戴尔
  • 百度网络交易平台将开通 第一批商户将
  • 支付宝回应:所谓信息泄露是完全不存在
  • 谷歌1000万美元征征集奇思妙想想
  • 华为成功承办2008年IP/MPLS论坛秋季会
  • 《计算机世界》:阿里巴巴闪击百度早有
  • Adobe软件存在漏洞 危及所有网络视频业
  • 谷歌十岁了,但网络广告才刚刚开始
  • 加18元多得一套!卡巴斯基掀黄金周安全
  • QT TabBar为资源管理器加上多标签
  • 无版权之忧!谷歌音乐搜索今日正式上线
  • 金山07日病毒预警:当心“木马更新模块
  • 腾讯QQ2008 正式版发布 新功能让你心动
 
 

图文教程


  • Windows抢了谁的饭碗 非主流操作系统To

  • 地球还是火星 平常心看“非主流”

  • 综合运用Office 2007批量制作奖状

  • 没有系统盘如何才能修复受损系统?

  • 巧妙运用Excel中边界的附加功能!
 
 
赞 助 商
 
 
发挥想象:十分钟打造个性浏览器
  • 来源:e股脑
  • 点击次数:
  • 更新时间:2006-12-14

 

  如今是一个“时尚是银,个性是金”的网络时代,一些最能体现个性的爱好———自己设计并制作东西成为一种流行。我们DIY机箱、DIY桌面、DIY个人空间,但是你玩过DIY浏览器吗?

  也许你会说DIY浏览器难度太大,我不会编程。

  其实,你完全可以在十几分钟之内自己打造一个个性化的浏览器,即使你连最简单的超文本标识语言都还没有掌握。

  你所要做的就是充分发挥你的想象,把心思都花在创意上,而不需要去思考复杂的代码,只要通过简单的拖动和设置即可让你的创意变成现实。

 软件名称: BrowserBob 软件版本: Pro 4.1.3  软件大小: 4700KB 软件授权: 共享 适用平台: Windows 98/Me/2000/XP 下载地址: 点击这里下载

  BrowserBob是一个可以自行设计浏览器的软件,你可以用图片作为浏览器的外型,再加上各种按钮、标签、地址栏等物件,就可以完成独一无二的作品。BrowserBob提供预览与输出的功能,预览满意之后可以将设计的浏览器输出到单独的目录,包括图片、声音等。

  运行软件,除了一个主窗口外,还有多个不同功能的浮动窗口。下面,我们来看看如何用BrowserBob来实现你的浏览器DIY梦想。

  一、小试牛刀,精简浏览器制作初体验

  有时候我们并不需要多么强大的功能,小巧简单也是一种不错的风格,特别是一款自己DIY的浏览器,即使简单,感觉也是有所不同。那么我们就先小试牛刀,做一个最简单、漂亮、完全属于自己的浏览器。

  单击菜单“File”-“New”,在弹出的对话框中,我们选择一个标准工程“Blank App Mac Style”(如图1)。这个标准工程是一个最基本的初步窗体,但是拥有Mac风格的窗体,正好符合我们打造精简、美观浏览器的目的。

发挥想象:十分钟打造个性浏览器
【图1】建立一个新的工程

  新建工程打开后我们可以看到一个漂亮的窗口呈现在眼前(如图2),这就是我们做的第一个浏览器的雏形。虽然漂亮,但是它也太简单了,我们必须稍微加工一下。

发挥想象:十分钟打造个性浏览器


【图2】这就是我们要打造的浏览器雏形了

  中间蓝色的区域就是网页显示的地方,鼠标点击选择选择它,拖动它的上边缘,使其和标题栏间流有一段空白。空白做什么用呢?浏览器总不能没有地址栏吧?对了,这里就是用来放置地址栏和几个基本按钮。
  
  现在我们要为浏览器加入地址栏和几个简单的控制按钮。点击主窗口菜单“View”-“Library”打开资源库,这里收集了一些各种风格的按钮、地址栏等控件,同时你也可以加入自己的资源。为了使界面风格保持一直,我们使用BrowserBob自带的资源,点击界面上的“MacOS_Style”选项卡(如图3)。

发挥想象:十分钟打造个性浏览器
【图3】加入简单的按钮

  看到资源库中漂亮的按钮了吧?怎么使用呢?很简单!首先我们先加入前进、后退按钮“Forward Button”和“Back Button”。鼠标左键点击“Back Button”按钮,接着拖动到你的浏览器设计窗口中的适当位置即可(如图4)。同样方法把“Forward Button”按钮拖动到适当位置。

发挥想象:十分钟打造个性浏览器


【图4】只需要拖动到相应的位置即可

  接着,我们再添加一个按钮试一试,让它实现访问制定网址的功能。按照上面的方法,拖动资源库中的“WWW”按钮到界面中。在浏览器设计界面中选中该按钮,点击右键选择“Properties打开属性设置浮动窗”。浮动窗中允许你设置对象的各种属性(如图5),找到“Parameter”文本框,修改其中的值为你喜欢的网址即可。同时,你可以把“Hint”修改为相应的提示说明,如“访问太平洋电脑网”,当鼠标指到该按钮上时就会出现提示。

发挥想象:十分钟打造个性浏览器
【图5】软件还可以设置对象的各种属性

  我们来添加地址栏。资源库“MacOS_Style”选项卡中没有地址栏怎么办?没关系!在主窗口的工具栏只能够可以找到,同样拖动它到设计窗口中(如图6),适当拉长它。接着,选中它,在上面说到的属性设置浮动窗中将“Role”下拉框中值改为“Addressbar Main Web”(如图7)。

发挥想象:十分钟打造个性浏览器
【图6】添加地址栏

发挥想象:十分钟打造个性浏览器
【图7】修改键值

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

发挥想象:十分钟打造个性浏览器
【图8】成功出现两个按钮了

  先预览一下看看效果如何(如图9),还不错吧!点击按钮试一试,是不是访问太平洋电脑网了呢?如果满意的话,点击制作发布按钮就可以发布程序了!

发挥想象:十分钟打造个性浏览器


【图9】预览效果

  二、进阶打造全功能浏览器

  上面我们通过一个简单的例子来演示了一个简单浏览器的制作。下面,我们就来体验一下,打造一个更多功能、更加惊艳的浏览器!

  首先,新建一个工程。在新建工程对话框中,选择标准工程“Blank Application”。工程打开后可以看到一个标准的Windows窗口,界面上只有一个浏览区域。

  接着,我们给窗体整体效果“整容”一下吧,让它更加吸引人!这里比较麻烦一些,我们一步步来。

  1、用Photoshop做一张合适的图片作为浏览器的整个背景。如图10所示,在图片中规划好浏览区域位置、工具栏等位置,给这些位置加上一些图片或者以颜色填充;其他没有用到的位置全部统一用一种颜色着色,着色必须用区别于有用位置颜色,这很重要!如图10中,没有用的颜色全部都用白色着色。

发挥想象:十分钟打造个性浏览器
【图10】用自己的图作为浏览器的背景

  2、为了方便使用背景图案,把工程窗体中除了浏览区域,其他的元素全部删除。删除后的界面如图11所示。

QQ病毒 腾讯QQ空间代码专题 PPT教程专题 ADSL应用面面俱到 Fireworks教程专题 计算机和网络技术基础知识 校园网专题 网吧技术专题

发挥想象:十分钟打造个性浏览器


【图11】删除浏览区域外的元素

  3、选中整个设计窗体,点击属性浮动窗口中“Graphic”下的图示,在弹出的对话框中选择我们准备好的图片。接着,点击“Alpha Color”色块选择过滤无用区域的颜色,我们这里就是白色了(如图12)。搞定之后,设计区域就出现了我们自己的背景!拖动浏览区域到合适的位置,并且调整大小。完成后效果如图13所示。笔者Photoshop水平有限,背景做的效果不好,还请见谅:)

发挥想象:十分钟打造个性浏览器

1 2 下一页
  • 上一篇教程: 编程我不懂:10分钟打造个性浏览器
  • 下一篇教程: 非IE核心浏览器系列2:K-Meleon试用
  •  

    关于本站 | 广告联系 | 版权声明 | 使用帮助

    Copyright © 2004-2008 www.egunao.com All rights reserved.