使用Pages（页面）面板制作网页

【 tulaoshi.com - 软件应用 】

使用Pages（页面）面板制作网页

 　　下面通过一个具体的实例来说明Pages(页面)面板的实际作用，具体操作步骤如下。

　　1、新建一个Fireworks文件。

　　2、在弹出的对话框中设置画布的宽度为932像素、高度为538像素，背景颜色为白色。如图1.3所示。

　　3、把实现准备好的背景素材复制到当前的文档中。并且把背景图像所在图层的名称更改为背景。效果如图1.4所示。

　　4、在背景图层中制作页面左侧的按钮和图像广告，页面右上角的导航背景，效果如图1.5所示。

　　5、(快捷键：)命令，打开Fireworks 9的图层面板，创建一个新的图层内容。

　　6、在图层内容中制作导航中的内容和页面右下角的正文内容，效果如图效果如图1.6所示。

　　7、选择(快捷键：)命令，即可打开Fireworks 9的Pages(页面)面板。

　　8、单击Pages(页面)面板右下角的新建页面按钮，创建三个页面，页面总数是四个，和栏目按钮的数量一致。效果如图1.7所示。

　　9、在Pages(页面)面板中对所有的页面进行重命名，这里的名称将是最终输出后网页的文件名，效果如图1.8所示。

　　10、这时新建出来的页面都是空白的，效果如图1.9所示。

　　在制作多个页面的时候，往往会使用相同的页面布局，或者相同的logo、背景、或按钮。这个时候就可以把前面创建出来的第一个页面中的部分内容共享到其它页面中，这也就是Pages(页面)功能最强大之处。由于在前面的制作过程中，把整个网站中所有页面的相同内容都制作到了背景图层，所以这个时候就可以把背景图层中的内容共享到所有的Pages(页面)中去。而内容图层中的文本和图片是需要根据不同栏目来进行更改的，所以在这里就不需要共享到Pages(页面)了。

　　11、选择页面index，然后切换到图层面板中。选择图层背景，打开图层面板的选项菜单，选择命令，效果如图1.10所示。

　　命令

　　12、选择命令后，会弹出对话框。效果如图1.11所示。

　　13、在左侧对话框中的所有页面选中，单击按钮，即可添加到对话框中。效果如图1.12所示。

　　14、这时图层背景中的内容，在每一个页面中都可以看到了。所有共享到页面的图层都以黄色的背景来显示。效果如图1.13所示。

　　15、这时，可以分别在不同的Pages(页面)中制作完全不同的内容，但是所有的Pages(页面)都保持相同的背景效果。选择Pages(页面)面板中的webdesign页面。然后切换到图层面板中，这时显示的是webdesign页面所对应的图层。

　　16、在图层背景上新建一个图层内容。并且在这个图层中制作页面webdesign中的内容，效果如图1.14所示。

　　17、使用同样的方法，把所有页面中的内容都制作出来，需要注意的是，所有的内容都需要制作到新的图层中，并且这个图层是不能共享的。

　　18、接下来给页面添加切片，选择页面index，使用Fireworks 9的切片工具给页面中的四个按钮添加切片，效果如图1.15所示。

　　19、但是这个时候所添加的切片只能在页面index中显示，其它页面是看不到这些切片的。也就是说在Fireworks 9中，可以给每个页面添加不同的切片效果。如图1.16所示。

　　20、但是在这个例子中，每个页面按钮的切片应该是完全一样的，这个时候同样可以把切片所在的网页层共享到所有的页面中。

　　21、在Pages(页面)面板中选择index页面，打开图层面板，选择图层面板中的网页层，在网页层中包含有四个按钮的切片，效果如图1.17所示。

　　22、这时如果直接选择网页层的选项菜单，是没有命令的，网页层本身并不支持共享到页的功能，效果如图1.18所示。

　　23、这时可以单击图层面板右下角的第二个按钮，在网页层中创建一个子图层，并且把四个按钮的切片拖拽到子图层中，这也是Fireworks 9的一个新功能，效果如图1.19所示。

　　24、对于网页层的子图层，是可以使用共享到页的命令的，这样就可以把当前的切片共享到所有的页面中了，效果如图1.20所示。

　　25、对于多个页面之间的链接，也可以之间在Fireworks 9中完成。选择添加好的切片，在面板中的文本框中即可设置多个页面之间的链接，效果如图1.21所示。

　　26、和Fireworks 8一样，可以使用优化面板对所有的切片进行优化，然后就可以选择(快捷键：)命令进行网页的输出了。

　　27、选择导出命令后，会弹出Fireworks 9的导出对话框，效果如图1.22所示。

　　其中：

　　文件名：这里不需要进行设置，因为导出后的网页名称和pages(页面)面板中的名称一致。

　　Export：和已往的版本一样，要选择导出网页和图像HTML and Images。

　　Current page only：只导出当前页，这里建议取消这个复选框，因为我们要导出所有的页面，而并不只是当前的一个页面。

　　Put images in subfolder：把所生成的页面放置到文件夹中，这个选项是一定要选中的。

　　28、单击按钮，Fireworks 9会自动生成所有的页面，你只需要找到保存文件的文件夹，慢慢欣赏你的作品吧!效果如图1.23所示。

　　操作技巧：

　　1、在制作基本页面的时候一定要分图层，把不会改变的内容和需要改变的内容分到不同的图层中来制作。那么在共享到页面的时候只需要共享部分图层就可以了。

　　2、网页层是不能直接共享的，需要在网页中创建子图层才能共享到页面。

　　写在后面的话

　　关于新的pages(页面)的功能，还会继续的研究下去，在本教程中还没有涉及到主页面的使用，但是可以告诉大家的是，一旦把某个页面设置为主页面，那么所有的页面都会套用主页面中的内容，有点类似于Dreamweaver里的模板。

　　Fireworks针对于网页的图像处理可以说是到了非常专业的地步，在Adobe现有的软件体系中，还没有那个软件能够和它相比，但是Fireworks能否在新的东家续写它的神化?我相信这是每一个Fireworkser所期望的，我们拭目以待。