第04章“北京奥运吉祥物-福娃”网站的静态设计.pptVIP

本章以“北京奥运吉祥物-福娃”网站的静态设计贯穿整章内容，以实际设计开发的顺序先后介绍了页面的布局、主页的设计；网页属性和表格属性的设置；如何插入文本和图像、插入Flash动画、插入JavaScript网页特效代码；内容显示页面、标题列表页面、图片显示页面、留言板页面的设计以及各种超链接的创建方法。 在实例的讲解过程中，以实用的角度对Adobe Dreamweaver CS3中的常用知识点也进行介绍和总结。 4.5 本章小结 一、实训题 1.参照“北京奥运吉祥物-福娃”网站的静态设计，承接1.6 习题中的简答及实训题第5小题编写的网站策划书，设计网站的主要静态页面。 4.6 习题 （8）将光标定位到网站公告栏区的第一行单元格中，选择“插入”→“图像”命令，将图像gonggaolan.gif插入到相应的单元格中。 将光标定位到网站公告栏区的第二行单元格中，在“属性”面板中其设置背景颜色为“#F0F0F0”，如图所示。 （ 9）使用相同的方法在福娃简介区的第一行和第二行分别插入图像fwjj.gif和图像fwjjtp.jpg，完成福娃简介区的布局。 （ 10）使用相同的方法，分别完成福娃揭秘、精彩图片、名人说福娃和投票调查区的编辑，如图所示。 （11）将光标定位到网页底部的版权区中，设置背景图像为banquan.gif，并且输入网站相关的版权信息，调节其显示位置和字体大小、颜色等，如图所示。 （12）至此，主页的基本框架已设计完成，接下来在福娃动态、公告栏、福娃揭秘、投票调查、精彩图片和名人说福娃区添加相应文字，并且进行必要的编辑即可，其效果如图所示。 4.2.4 插入Flash动画 只有文本和图像的网页还是很单调，因为它缺乏动感。在网页中加入Flash动画、音乐等元素，可使网页更具动感，让网页更加精彩。 （1）将光标定位到主页Logo区的第二个单元格中，在“属性”面板中设置水平对齐方式为“右对齐”，选择“插入”→“媒体”→“Flash”命令，在弹出的“选择文件”对话框中，选择fuwa.swf文件，如图所示，单击确定按钮插入Flash动画。 （2）选中插入的fuwa.swf动画，在如图所示的“属性”面板中设置Flash动画的宽为250像素，高为130像素。 （3）单击参数按钮，在弹出的“参数”对话框中，输入参数名为“wmode”，参数值为“transparent”（即让插入的Flash动画透明），如图所示，单击确定按钮返回。 （4）根据预览效果可进一步调整透明Flash动画的大小及位置，完成插入透明Flash动画的操作，其效果如图所示。 4.2.5 插入JavaScript网页特效代码 JavaScript是目前网页设计中最容易学又最方便的网页描述语言，用户可以利用JavaScript设计出各种生动活泼的网页特效。目前，Internet中JavaScript网页特效代码非常丰富，用户可以直接下载一些网页特效代码，添加在网页中。 本实例根据“北京奥运吉祥物-福娃”网站的设计要求，需要在图片新闻区添加图片幻灯片效果，其具体步骤如下： （1）在Internet中搜索下载“新闻图片幻灯片特效代码”相关文件，然后打开“新闻图片幻灯片特效”文件夹，如图所示，可以看到有一个xwhdp.html文件、一个js文件夹和一个images文件夹。 （2）将js文件夹移动到站点根目录下（FuWa\），将images中的所用文件移动到根目录下的images文件夹下，使用Dreamweaver打开xwhdp.html文件，选择代码视图，可以看到其代码。 （3）打开FuWa根目录下的index.html文件，将光标定位在图片新闻区单元格中，选择“代码视图”，将xwhdp.html中的body…/body之间的内容复制到光标所在的位置；将xwhdp.html中的style…/style之间的内容复制到index.html文件中style…/style之间。 （4）打开images文件夹，将文件夹中的ad-01.jpg、ad-02.jpg、ad-03.jpg、ad-04.jpg、ad-05.jpg图片替换为自己的图片。 （5）使用Dreamweaver打开js文件夹下的5adpics.js，选择代码视图，可以看到其代码。 （6）可以根据代码说明文档更改相应的代码，完成新闻图片幻灯片特效的设置。 插入JavaScript网页特效代码之后，就基本上完成了“北京奥运吉祥物-福娃”网站主页的设计，其最终效果如图所示。 设计完成网站主页之后，设计者还需要继续设计网站的其他页面。由于网站的整体风格一致，因此其他页