设为首页  
联系我们  
加入收藏  
网页制作 冲浪宝典 图形图像 操作系统 软件教学 编程开发 认证考试 安全技术 站长专区 文学驿站 娱乐天地 游戏天地 办公软件
文章搜索
您的位置: 首页 >> 文章首页 >> 图形图像 >> Fireworks >> 网页设计综合实例(下)
精品推荐
Fireworks点击TOP10
·Fireworks制作草生草长之草样年华gif动画
·Fireworks4功能介绍
·网页设计综合实例(下)
·Fireworks巧绘精美闪图动画
·教你用FW做酷LOGO
·Fireworks 8制作精美网页效果图
·Fireworks教程:光芒四射之殊途同归
·Fireworks轻松绘制简单卡通海景画
·QQ皮肤制作全程实录
·Fireworks利用渐变工具简单的处理图片
图形图像点击TOP10
·中文字体设计欣赏合集
·教你用photoshop打造浪漫婚纱照
·PHOTOSHOP超强磨皮大法 将斑点选出来
·Photoshop轻松制作非主流水粉画效果
·扣图:Photoshop抠出复杂背景下的乱发
·Photoshop的LAB模式做“非主流”照片
·Photoshop制作Lomo风格非主流效果
·Photoshop打造“非主流”颓废照片特效
·Flash实例制作剖析:蝶恋花
·清晰还原!Photoshop处理人物模糊照片
精选专题

网页设计综合实例(下)

作者: 来源:http://www.xgdown.com/ 时间:2005-11-19 0:11:39

网页设计综合实例(下)(1) 八、 建立切片

  我们的基本导航及页面结构已经建立好了,现在到了增加切片的时候了。Fireworks中的切片是输出图形及产生交互的主要参考物件,导出的文档将根据切片来将图形切割成不同的部分,并在浏览器中通过表格组装到一起。同时,所有的交互行为也是通过切片之间的联系来产生的,如翻转图、弹出菜单等等。

  1、 我们前面建立的按钮本身已经带有了自己的切片,因此我们需要对其他对象建立各自的切片。
  2、 创建切片通常使用工具面板中的Slice工具直接绘制 ,但如果想创建精确大小的切片,我们可以选择对象并执行右键菜单中的Insert Slice自动插入切片。
  3、 我们使用工具面板中的Slice工具在页面中间绘制一个信息显示切片,我们将在下一步把导航条的每个按钮相关信息显示在这里。


  4、 我们增加的切片默认情况下是绿色的半透明对象,它们都放置在Web Layer层上.

  九、 创建拖拽翻转效果

  1、 单击"企业概况"按钮处的切片,此切片中心将出现一个圆形标志,用鼠标将其拖动到上一步创建的切片左上角,这将设置一个翻转效果,在弹出的对话框中设定鼠标滑过时交换为第二帧的内容,如下图所示:


  2、 重复上述步骤,分别为"企业人才"、"产品展示"两个按钮增加翻转效果,并分别对应第三帧和第四帧。
  3、 我们在后面各帧相同的位置出分别放置对应每个按钮的说明文字。
  4、 最后的效果如下图所示:

  十、 创建弹出菜单

  通常我们站点里的导航信息必须非常的简练和实用,只有那些最重要的信息才出现在导航条中,而更多的导航和内容信息通常都隐藏起来。对于复杂的展点和多重信息组织,弹出菜单是分层导航的最有效工具,弹出菜单可以在很小的空间中设置大量的目标选项。Fireworks4新增的创建弹出菜单功能,可以非常容易的实现这种导航结构,我们只需将分层信息添加到弹出菜单编辑器中,程序会自动生成相应的交互式代码。

  1、 选择导航栏上的"产品展示"按钮,确保Web Layer当前显示及切片可见。
  2、 点击此按钮上切片中心的圆形标志,从弹出菜单中选择"Add Pop-up Menu"增加弹出菜单,如下图所示:


  3、 在弹出的编辑器中输入如下图所示内容,在Text和Link输入框中输入内容后,点及上部的"+"即可添加新的菜单内容:


  4、 继续输入二级菜单内容,选中一个条目后,点击上部的 可以使当前条目缩进,成为下一级菜单;点击 可以使当前的条目恢复为上一级菜单。最后的结果入图所示:


  5、 点击Next进入下一个设置窗口,在这里我们可以设置文字的大小,菜单的样式等属性,您既可以选择最终的菜单外观是标准的HTML格式,或者是Image图片格式。我们选择图片格式,并设定文字大小为10。

6、 当您选择了Image格式时,需要在下部的两个窗口设置Up和Over状态的菜单样式,您的悬想也许和我们这里的不同,这是因为我们使用了自定义的样式文件。我们可以根据不同设计项目的需要将自定义的样式作为弹出菜单的选项。

共5页 9 7 [1] [2] [3] [4] [58 :>

网页设计综合实例(下) 相关文章:
网页设计综合实例(下) 相关软件:
特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
转载请注明来源:http://www.xgdown.com