使用Pages(页面)面板制作网页

来源:网络时间:2011-07-01

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

  1、新建一个Fireworks文件。

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

  

使用Pages(页面)面板制作网页

图1.3 新建文档对话框

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

  

  

使用Pages(页面)面板制作网页

图1.4 复制图像素材到当前文档

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

  

使用Pages(页面)面板制作网页

图1.5 制作页面广告和导航

  5、【Windows(窗口)】【layers(图层)】(快捷键:【F2】)命令,打开Fireworks 9的图层面板,创建一个新的图层“内容”。

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

  

使用Pages(页面)面板制作网页

图1.6 制作网页中的内容

  7、选择【Windows(窗口)】【Pages(页面)】(快捷键:【F5】)命令,即可打开Fireworks 9的Pages(页面)面板。

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

使用Pages(页面)面板制作网页

图1.7 创建三个新的页面

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

使用Pages(页面)面板制作网页

图1.8 对页面进行重命名

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

使用Pages(页面)面板制作网页

图1.9 新建出来的空白页面

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

  11、选择页面“index”,然后切换到图层面板中。选择图层“背景”,打开图层面板的选项菜单,选择【share layer to pages(共享图层到页面)】命令,效果如图1.10所示。

使用Pages(页面)面板制作网页

图1.10 在图层面板的选项菜单中选择

  【share layer to pages(共享图层到页面)】命令

  12、选择【share layer to pages(共享图层到页面)】命令后,会弹出【share layer to pages(共享图层到页面)】对话框。效果如图1.11所示。

使用Pages(页面)面板制作网页

图1.11 【share layer to pages(共享图层到页面)】对话框

  13、在左侧【exclude layer from pages(不共享图层到页面)】对话框中的所有页面选中,单击【add(添加)】按钮,即可添加到【include layer to pages(共享图层到页面)】对话框中。效果如图1.12所示。

使用Pages(页面)面板制作网页

图1.12 把页面添加到【include layer to pages(共享图层到页面)】对话框中

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

使用Pages(页面)面板制作网页


图1.13 把图层“背景”共享到所有的页面

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

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

使用Pages(页面)面板制作网页

图1.14 制作页面“webdesign”中的内容

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

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

使用Pages(页面)面板制作网页

图1.15 给按钮添加切片

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

使用Pages(页面)面板制作网页

图1.16 给按钮添加切片

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

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

使用Pages(页面)面板制作网页


图1.17 网页层中的切片

意见反馈
发表评论

最新评论(共0条)