网页设计与制作项目六.ppt

1、网页设计与制作项目六网页设计与制作综合实例项目六网页设计与制作综合实例网站总体策划网站总体策划1利用利用F F ii reworks reworks CS6CS6制作制作网页效果网页效果2利用利用Fireworks Fireworks CS6CS6切片切片并导出并导出3利用利用Flash Flash CS6CS6制作网站制作网站LogOLogO动画动画4利用利用Dreamweaver Dreamweaver CS6CS6制作制作网页网页5任务任务1 1网站总体策划网站总体策划网站首页布局网站二级页面布局任务任务2 2利用利用F i reworks CS6F i reworks CS6制作网页效

2、果制作网页效果新建文件新建文件拖出辅助线拖出辅助线绘制网页导航绘制网页导航栏的基本效果栏的基本效果绘制正文和页绘制正文和页面底部的渐变面底部的渐变条条绘制正文立体绘制正文立体边缘边缘绘制网页下方绘制网页下方的导航条的导航条绘制顶部装饰绘制顶部装饰的渐变色的渐变色绘制导航栏的绘制导航栏的阴影效果阴影效果保存文件保存文件任务任务2 2利用利用F i reworks CS6F i reworks CS6制作网页效果制作网页效果绘制导航绘制导航栏底色栏底色绘制装饰绘制装饰线线绘制导航栏绘制导航栏的形状的形状添加导航添加导航栏装饰线栏装饰线添加链接添加链接文字文字任务任务2 2利用利用F i rewor

3、ks CS6F i reworks CS6制作网页效果制作网页效果绘制正文栏的标题栏绘制正文栏的标题栏规划正文的结构规划正文的结构绘制页面的装饰效果绘制页面的装饰效果添加标题添加标题任务任务2 2利用利用F i reworks CS6F i reworks CS6制作网页效果制作网页效果(1)打开首页，删除不需要的图层并保存。(2)因为首页和二级页面的效果基本上一样，所以在完成上述操作后，将二级页面的素材图片和标题进行更换，即可进行切片制作，如图所示。任务任务3 3利用利用Fireworks CS6Fireworks CS6切片并导出切片并导出(1)打开制作好的首页和二级页面文件，单击工具栏上

4、的切片工具，指针变为十字形之后就可以在工作区进行切片操作了。(2)根据辅助线的位置以及页面整体布局的需要，对网站首页及二级页面进行切片操作，如图所示。任务任务2 2利用利用F i reworks CS6F i reworks CS6制作网页效果制作网页效果(3)切片完成后，选择“文件”“图像预览”命令，分别对“选项”和“文件”选项卡进行设置，如图所示。任务任务3 3利用利用Fireworks CS6Fireworks CS6切片并导出切片并导出(4)单击“导出”按钮，弹出“导出”对话框，设置适当参数后即可导出页面文档，如图所示。任务任务4 4利用利用Flash CS6Flash CS6制作网站

5、制作网站LogoLogo动画动画(1)创建创建Flash文档。文档。任务任务4 4利用利用Flash CS6Flash CS6制作网站制作网站LogoLogo动画动画(2)新建图层新建图层1，导人，导人“标志标志.pn”广图片到库。广图片到库。任务任务4 4利用利用Flash CS6Flash CS6制作网站制作网站LogoLogo动画动画(3)新建图层新建图层2，导人，导人“标志标志1.png”。任务任务4 4利用利用Flash CS6Flash CS6制作网站制作网站LogoLogo动画动画(4)新建图层新建图层3，选中第，选中第1帧，使用矩形工具绘制矩形并放置在相应位置上。帧，使用矩形工

6、具绘制矩形并放置在相应位置上。矩形的位置和大小帧和图层的属性设置任务任务5 5利用利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页(1)打开Dreamweaver CS6，选择菜单中的“站点”一“新建站点”命令，弹出“站点设置对象综合”对话框，参数设置如图所示。任务任务5 5利用利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页(2)设置完成后，单击“保存”按钮，可以看到站点已经建立。在文件面板中可以清楚地看到文件的存放情况。(3打开首页，首先将表格居中对齐，然后将需要输入内容的地方(15)设置为背景图片，如图所示。任务任务5 5利

7、用利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页(4)根据网页布局要求分别在里面输人相关信息，如图所示。任务任务5 5利用利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页(1)打开二级页面，制作版面如图所示。任务任务5 5利用利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页(2)在图中两处分别插入可编辑区域，弹出对话框，如图所示。任务任务5 5利用利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页(3)插入可编辑区域后，系统将自动转换为模板，根据系统提示进行保存，如图。(4)根据版面要求，通过模板创建5个二级页面并保存。任务任务5 5利用利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页(1)打开首页，分别对5个二级页面进行链接，如图所示。任务任务5 5利用利用Dreamweaver CS6Dreamweaver CS6制作网页制作网页(2)打开二级页面模板，分别设置其链接，系统将提示是否自动更新由模板创建的5个二级页面，如图所示，单击“更新”按钮。(3)分别在页面中插人Flash动画，保存即可。END.