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

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

  1、新建一个Fireworks文件。

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


  图1.3 新建文档对话框

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


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

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


  图1.5 制作页面广告和导航

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

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


  图1.6 制作网页中的内容

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

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


  图1.7 创建三个新的页面

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


  图1.8 对页面进行重命名

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


  图1.9 新建出来的空白页面

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

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


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

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

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


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

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


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

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


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

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

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


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

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

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


  图1.15 给按钮添加切片

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


  图1.16 给按钮添加切片

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

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


  图1.17 网页层中的切片

  22、这时如果直接选择网页层的选项菜单,是没有【share layer to pages(共享图层到页面)】命令的,网页层本身并不支持“共享”到页的功能,效果如图1.18所示。


  图1.18 网页层的选项菜单

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


  图1.19 创建网页层的子图层

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


  图1.20 共享网页层的子图层

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


  图1.21 设置多个页面之间的链接

  26、和Fireworks 8一样,可以使用优化面板对所有的切片进行优化,然后就可以选择【file(文件)】【export(导出)】(快捷键:【Ctrl+Shift+X】)命令进行网页的输出了。

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


  图1.22 导出对话框

  其中:

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

  Export:和已往的版本一样,要选择导出网页和图像“HTML and Images”。

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

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

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


  图1.23 导出后生成的网站

  操作技巧:

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

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

  写在后面的话

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

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

时间: 2016-11-19

使用Pages(页面)面板制作网页的相关文章

DreamWeaver巧用模板工具批量制作网页

一.建立模板 1.创建模板页面 最简单的办法是将一个网页另存为模板文件,通过执行命令:File→Save as Template,DreamWeaver会在网站根目录中建立一个模板文件夹--Templates来保存该模板.当然,也可以新建一个模板:Window→Templates,会出现的Templates面板,单击右下角的New Template按钮,输入文件名,就建立了一个空模板:再单击Open Template按钮打开该模板,保存后自动存放于网站模板文件夹Templates中.新建.打开的

用DreamWeaver模板工具批量制作网页

 常见的网页制作工具如DreamWeaver中都有这项功能,使用模板就能减少大量的重复劳动. 一.建立模板 1.创建模板页面 最简单的办法是将一个网页另存为模板文件,通过执行命令:File→Save as Template,DreamWeaver会在网站根目录中建立一个模板文件夹--Templates来保存该模板.当然,也可以新建一个模板:Window→Templates,会出现的Templates面板,单击右下角的New Template按钮,输入文件名,就建立了一个空模板:再单击Open T

用Dreamweaver 定义模板批量制作网页

  做网站,麻烦在更新和改版,特别是大规模更新,如果不是用cms系统,手工工作量非常大. 告诉你个秘密吧,其实只要用好模板工具,就能很好地"批发"网页.常见的网页制作工具如DreamWeaver中都有这项功能,使用模板就能减少大量的重复劳动. 一.建立模板 1.创建模板页面 最简单的办法是将一个网页另存为模板文件,通过执行命令:File→Save as Template,DreamWeaver会在网站根目录中建立一个模板文件夹--Templates来保存该模板. 当然,也可以新建一个模

Dreamweaver批量制作网页

dreamweaver|网页    做网站,麻烦在于更新,特别是大规模更新,工作量非常大.真不知那些创意不断而又勤奋的"站长"隔三岔五就将网站来个"大换血"是怎么忙过来的?告诉你吧,他们大多都是在"批发"网页,并且你的机器中也有这样的"批发站"呢!别吃惊,这个好东东就是--模板.常见的网页制作工具:FrontPage.Dreamweaver中都有这项功能.比如用Dreamweaver制作网页时,使用模板就能减少大量的重复劳动.

如何用Dreamweaver制作网页模板

做一个网站,更新太麻烦,特别是大规模的更新,而且工作量也非常大.真不知那些站长,是如何制作网页模板的.隔三岔五将网站来个大更新,不知道他们是怎么忙过来的. 告诉你这个秘密吧,其实是这样的,他们很多都是在"批发"网页,并且你的服务器中也有这样的"批发站"!这个东西就是--模板.常见的网页制作工具FrontPage和DreamWeaver中都有这项功能.如用DreamWeaver 3.0 制作网站的时候,使用模板就能减少大量的重复工作. 如何制作网页模板第一步.建立模板

Dreamweaver制作网页之图片应用技巧

dreamweaver|技巧|网页 加快图片下载速度 如果网页中有过多的图片,就会影响浏览的速度. Dreamweaver 可以轻松设置预载图片,加快图片下载速度,让站点以最快的速度出现在用户面前. 效果说明:建立文件,先预载图片,使图片预先下载到缓存中,加快图片下载速度. 创作思想:打开 Dreamweaver MX 2004 软件新建页面,再打开标签面板,在[行为]中选择[预先载入图像]选项,加快图片下载速度. 操作步骤 ( 1 )新建文件,操作如图1 所示. ( 2 )保存页面并插入图片.

Dreamweaver制作网页的图片应用技巧

dreamweaver|技巧|网页 加快图片下载速度 如果网页中有过多的图片,就会影响浏览的速度. Dreamweaver 可以轻松设置预载图片,加快图片下载速度,让站点以最快的速度出现在用户面前. 效果说明:建立文件,先预载图片,使图片预先下载到缓存中,加快图片下载速度. 创作思想:打开 Dreamweaver MX 2004 软件新建页面,再打开标签面板,在[行为]中选择[预先载入图像]选项,加快图片下载速度. 操作步骤 ( 1 )新建文件,操作如图1 所示. ( 2 )保存页面并插入图片.

Dreamweaver制作网页技巧之对进行网页优化

dreamweaver|技巧|网页|优化 我们为了优化网页.加快网页下载速度,除了对图片进行优化之外,还需对网页其他各个元素进行优化.在网页编织过程中如能充分利用编辑工具,也可以在网页制作中达到优化目的 我们为了优化网页.加快网页下载速度,除了对图片进行优化之外,还需对网页其他各个元素进行优化.在网页编织过程中如能充分利用编辑工具,也可以在网页制作中达到优化目的.下面是Dreamweaver中的一些优化技法: 合理调用CSS 进行网页设计时,运用样式表单CSS来对页面元素进行布置,可以大大地减少

用Dreamweaver制作网页七招实用技巧

dreamweaver|技巧|网页 一.从外部文档中粘贴时,如果只要文字而不想要其格式,可以使用"Edit→paste as text"命令,不要直接用Ctrl+V. 二.当有浏览者使用Netscape浏览页面时,在改变窗口大小的时候页面会花掉.在制作网页时就应该考虑到这个问题,可以通过点击"Command→Add/Remove Netscape resize fix"来加以解决,它可以使在Netscape中浏览页面时,改变窗口大小的时候页面不会花掉. 三.仅仅拷贝