致力于打造中国站长娱乐学习的免费资源站!官方合作QQ:283852481

您当前的位置:首页 > 教程 > 设计教程 > Fireworks教程

使用 Fireworks 8 生成网页

时间:2016-11-30 20:37:59  来源:互联网  

  案例说明

  此案例为 使用Fireworks 8 制作网页效果图 位图工具 的姊妹篇,前面的案例地址可以点击这里。前面已经给大家介绍了网页效果图的制作,这里要介绍的内容是如何把效果图生成网页。这也是网站制作中最重要的一部分。主要介绍的Fireworks如何和Dreamweaver进行协同工作。本例主要分为4个部分,希望大家能够通过这个例子得到一些启发,由于笔者的水平有限,错误的地方还希望大家批评指正。

  1.1 创建Web站点

  首先来创建WEB站点,具体操作步骤如下:

  1.启动Dreamweaver 8软件,选择【站点】@@【新建站点】命令。

  2.在弹出的“定义站点”窗口中选择“高级”选项卡。

  3.如图1.1所示,在“站点定义窗口”的“本地信息”中设置本地站点参数。

  

  图1.1文档属性对话框 (点击查看大图)

  4.点击【确定】按钮,站点建立完毕。

  5.在硬盘上建立一个名为“bjdm”的文件夹,这个文件夹就是当前站点的根目录。

  1.2 制作形象首页

  然后来制作网站的形象首页,具体操作步骤如下:

  1.启动Fireworks 8软件,打开形象页面效果图。如图1.2所示。

  

  图1.2 使用Fireworks 8打开形象首页效果图 (点击查看大图)

  2.选择工具箱中的【裁剪工具】选择效果图中的背景渐变色区域。如图1.3所示。

  

  图1.3 选择背景的渐变色区域

  3.选择【文件】@@【图像预览】命令(快捷键:【Ctrl+Shift+X】),把背景渐变色优化并输出。如图1.4所示。

  

  图1.4 优化背景图片 (点击查看大图)

  【说明】因为背景是渐变色,所以优化为“JPG”格式。

  4.单击【导出】按钮,把优化好的背景图片导出到北京达美的站点中,并且在站点中建立一个“img”文件夹来保存所有的图片。如图1.5所示。

  

  图1.5 把背景图片导出到站点中的“img”文件夹中

  【说明】导出背景图片的文件名不能使用中文,这里叫做“bg”表示是背景。之所以要把背景图片单独导出,是因为在最后的网页中,背景图片是可以作为网页的背景平铺起来的。

  5.在Fireworks 8中重新打开形象首页效果图。

  6.在Fireworks 8中的【图层面板】中,点击背景图片前的眼睛图标,把刚刚导出的背景图片隐藏起来。如图1.6所示。

  

  图1.6 隐藏背景图层

  【说明】因为背景已经单独输出,所以在后面的编辑中就不需要背景了。把背景图层隐藏后,在导出图像的时候就不会输出背景图层中的内容,效果和删除调这个图层中的内容是一样的。

  7.选择【视图】@@【标尺】命令(快捷键:【Ctrl+Alt+R】),打开Fireworks 8的标尺。如图1.7所示。

  

  图1.7 打开Fireworks 8的标尺 (点击查看大图)

  8.从标尺中拖拽出辅助线,目的是为了能够更加准确地进行切片。效果如图1.8所示。

  

  图 1.8 拖拽辅助线 (点击查看大图)

  9.选择工具箱中的【切片工具】,根据刚刚拖拽出来的辅助线,绘制切片。效果如图1.9所示。

  

  图1.9 绘制切片 (点击查看大图)

  【说明】在绘制切片的时候需要注意,切片和切片之间尽量不要重叠,同时使用切片把所有图像都覆盖起来。

  10.点击画布左上角的【两幅】,进入到两幅窗口的显示模式。

  11.选择【窗口】@@【优化】命令(快捷键:【F6】),打开Fireworks 8的【优化面板】。如图1.10所示。


精彩广告