网页设计与制作PPT（第二版）第14章 网页设计制作综合实例.ppt

第14章 网页设计制作综合实例,本章内容提要：应用前面各章相关知识制作一网站首页，主要内容如下：运用Flash制作网首页动画条幅.运用Fireworks制作网站图标和导航条。运用Dreamweaver规划网站和制作网页。本章目标任务：在掌握网页设计与制作基础知识和Dreamweaver、Fireworks、Flash网页制作三剑客软件基础上，结合自己所熟悉的某主题内容制作网站首页。,14.1 应用Flash制作首页动画条幅,网页的首页条幅可以由Flash制作，也可由Fireworks制作。这里我们用Flash制作动画条幅，其操作步骤如下：（1）启动Flash8，执行“文件”“新建”菜单命令，在弹出的“新建文档”对话框中，选择“常规”选项卡上的“Flash文档”类型，单击【确定】按钮，进入动画编辑的主场景。（2）执行“修改”“文档”菜单命令，在弹出的“文档属性”对话框中将舞台的尺寸设置为760*126px，背景为淡蓝色。（3）执行“文件”“导入”“导入到舞台”菜单命令，在弹出的“导入”对话框中选择一幅图片，单击“打开”按钮将图片导入到舞台中央，并利用任变形工具将其大小调整到与舞台相宜。（4）在层控制区中，单击“插入图层”按钮，插入一个新图层，在工具栏中单击“文本工具”按钮，在属性控制面板中设置字体为方正姚体，颜色为白色，字号为26，在舞台中输入文本“网页设计与制作课程网站”。,14.1 应用Flash制作首页动画条幅,（5）选中文本，执行“窗口”“对齐”菜单命令，在弹出的“对齐”面板中，单击相对于舞台“垂直中齐”及“水平中齐”按钮，将文本中心与舞台中心对齐，如图14-1所示。图14-1 首页条幅文本内容（6）选中“图层2”的第10帧，按F6键插入关键帧，执行“修改”“变形”“缩放与旋转”菜单命令，在弹出的“缩放与旋转”对话框中，将文本缩放比例设置为200%，单击确定按钮。,14.1 应用Flash制作首页动画条幅,（7）右键单击该图层的第1帧，在弹出的菜单中选择“复制帧”命令，右键单击第20帧，在弹出的菜单中选择“粘贴帧”命令。（8）分别单击图层2的第1帧，第10帧，在属性控制面板的补间下拉选项中选择动画，先后为第1帧和第10帧创建补间动画，如图14-2所示。图14-2 在图层2创建补间动画,14.1 应用Flash制作首页动画条幅,（9）在层控制区中，单击“插入图层”按钮，插入一个新图层，选中“图层3”的第20帧，按F7键插入空白关键帧，在工具栏中单击“文本工具”按钮，在属性控制面板中设置字体为方正姚体，颜色为黑，字号为26，在舞台中输入文本“网页设计与制作课程网站”。位置及对齐方式与步骤（5）相同。注意：原图层2第20帧的文字内容不要删除。（10）选中“图层3”的第30帧，插入关键帧，将文本内容缩放200%，右键单击该图层的第20帧，在弹出的菜单中选择“复制帧”命令，右键单击第40帧，在弹出的菜单中选择“粘贴帧”命令。分别单击图层3的第20帧、第30帧，在属性控制面板的补间下拉选项中选择动画，先后为第20帧和第30帧创建补间动画。如图14-3所示。图14-3 在图层3中创建补间动画,14.1 应用Flash制作首页动画条幅,（11）在层控制区中，单击“插入图层”按钮，插入一个新图层，选中“图层4”的第40帧，插入空白关键帧，在工具栏中单击“文本工具”按钮，在属性控制面板中设置字体为华文隶书，颜色为黑，字号为52，在舞台中输入“工学结合项目导向任务驱动”。将文本移到舞台之外的右侧。（12）选中该图层的第60帧，插入关键帧，并将文本内容移到舞台之外的左侧，选中第40帧，在属性控制面板中设置为“补间”动画，选中“图层1”的第60帧，按F5键插入帧，时间轴的最后状态如图14-4所示。图14-4 时间轴状态图（13）执行“文件”“发布设置”菜单命令，在打开的“发布设置”对话框中，直接单击“确定”按钮，将该Flash动画导出为sytf.swf文件。,14.2.1 应用Fireworks制作导航条,导航条是一组按钮，当网页的其他部分发生变化时，导航条的内容基本不发生变化。制作导航条的一种简单的方法是采用复制按钮的办法，复制结束后再修改按钮上的文字内容和相应的链接。使用按钮制作导航步骤如下：（1）新建一个Fireworks文档。执行“文件”“新建”菜单命令，在“新建文档”对话框中确定画布的宽度为960、高100、颜色为白色，然后单击“确定”按钮。（2）执行“编辑”“插入”“新建按钮”菜单命令，选用圆角矩形矢量工具创建一个按钮符号，按钮颜色为蓝色，宽为163，高为50，文字内容为首页。如图14-5所示。（3）创建按钮对鼠标动作响应的不同状态，如鼠标滑过时字体颜色有改变，或鼠标按下时按钮颜色发生变化等。可按下Ctrl同时按下按钮及文本，按下复制组合键Ctrl+C,分别选择滑过选项卡和按下选项卡，按下组合键Ctrl+V进行粘贴，来更改按钮颜色或字体颜色。,14.2.1 应用Fireworks制作导航条,图14-5 按钮制作,14.2.1 应用Fireworks制作导航条,（4）执行“窗口”“库”菜单命令，激活库面板，如图14-6所示。14-6 库面板,14.2.1 应用Fireworks制作导航条,（5）将首页按钮从库面板拖到画布中，重复5次，使画布中有6个按钮，并将它们横向排列好，如图14-7所示。图14-7 按钮导航的排列状态,14.2.1 应用Fireworks制作导航条,（6）选中第2个按钮，在属性面板中修改文本内容为：教学大纲，链接地址为web/jxdg.htm，依次修改其它按钮文本及链接地址为：文本：授课教案，链接：web/skja.htm；文本：教学课件，链接：web/jxkj.htm；文本：实训指导，链接：web/sxzd.htm；文本：习题解答，链接：webxtjd.htm，如图14-8所示。图14-8 导航条文本与链接设置,14.2.1 应用Fireworks制作导航条,（7）执行“修改”“画布”“修剪画布”菜单命令。可修剪去掉画布多余部分。（8）执行“文件”“导出”菜单命令，弹出“导出”对话框，选择导出位置 e:zhyyimages，导出文件名为dhcd.htm，导出类型为：HTML和图像。（9）单击“导出”对话框右下角的“选项”按钮，弹出如图14-9所示的“HTML设置”对话框。可以修改导出参数，这里采用默认设置。注意：为方便以后修改,可保存文件dhcd.fng。图14-9 HTML设置对话框,14.2.2 应用Fireworks制作动态交换图片,网上许多具有动感的图像是可以应用Fireworks来制作的，前面的课程中已讲述，这里结合应用，再简单介绍一下动态交换图片的制作：（1）新建一个Fireworks文档，在弹出的“新建文档”对话框中输入如下参数：宽为360像素、高为480像素、分辨率为96像素/英寸、画布颜色为“透明”，单击确定按钮，完成新文档创建。（2）执行“文件”“导入”菜单命令，弹出“导入”对话框如图14-10所示，选择欲导入图片，如1.jpg。在属性面板中输入宽:360，高:480，x和y的值均为0。图14-10 导入对话框,14.2.2 应用Fireworks制作动态交换图片,（3）执行“窗口”“帧”菜单命令，激活“帧”面板。如图14-11所示。图14-11 通过帧面板增加帧（4）单击“帧”面板右下方的“新建/重制帧”按钮，增加帧。（5）执行步骤（2），在第2帧中导入图片2.jpg。（6）依次重复执行步骤（4）、（5）分别导入其它各图片。,14.2.2 应用Fireworks制作动态交换图片,（7）按下ctrl的同时单击各帧，同时选择中各帧，双击“帧延时”的数值，修改为一个合适的速度。（8）按下“播放”按钮可预览动画效果。（9）执行“文件”“图像预览”菜单命令，弹出“图像预览”对话框，选择格式为：GIF动画，如图12-12所示。单击“导出”按钮，弹出“导出”对话框，给出文件名：jxcg.gif。再单击“导出”按钮。完成动态交换图片动画制作。,14.2.2 应用Fireworks制作动态交换图片,图14-12 图像预览对话框,14.2.3 应用Fireworks制作网站LOGO,网站LOGO的制作方法很多，这里介绍用Fireworks矢量图制作网站LOGO的一种方法，步骤如下：（1）新建一深蓝色画布，尺寸为200*126，使用“椭圆”工具绘制一个椭圆，填充为褐色。（2）利用“刀子”工具和“部分选择”工具将椭圆修整为一弧线效果。如图14-13所示。图14-13 修整后的椭圆 图14-14 文字效果,14.2.3 应用Fireworks制作网站LOGO,（3）选择“文字”工具键入“Design and Produce”,并按图14-15设置其属性。得到图14-14所示效果。图14-15 文字属性设置,14.2.3 应用Fireworks制作网站LOGO,（4）将“资源”面板组中“形状”面板的“透视”图拖入画布，如图14-16所示。图14-16 拖入透视图的效果 图14-17 网站标志图（5）利用“文字”工具键入“WEBSITE”，设置文字属性：字体为Arial Narrow，字体大小为15，文字方向为“垂直方向”。得到图14-17所示最终效果图。（6）执行“文件”“图像预览”菜单命令，弹出“图像预览”对话框，选择格式为：GIF，如图12-12所示。单击“导出”按钮，弹出“导出”对话框，保存在e:zhyyimages下，文件名为logo.gif。再单击“导出”按钮。完成网站LOGO制作。,14.3 应用Dreamweaver规划网站和制作网页,前边我们应用Firewords制作了导航条、交换图片、站标，又应用Flash制作了首页动画条幅，这里我们将利用Dreamweaver规划网站和制作网页。,14.3.1 建立站点、站点文件夹和网页文件,（1）启动Dreamweaver（2）执行“站点”“新建站点”菜单命令，新建一个网站，根文件夹为“E:zhyy”，站点名称为“课程”，单击“确定”按钮。（3）在课程站点中新建站点文件夹和网页文件，结果如图14-18所示。图14-18 课程站点面板,14.3.2 制作主页,1.设置页面属性（1）在课程站点中双击index.htm，打开首页文件应用程序窗口，输入标题为“网页设计与制作课程网站”。（2）执行“修改”“页面属性”菜单命令，打开“页面设置”对话框，“背景颜色”设置为浅黄色（#FFFFCC），“左边距”设置为“0”，“上边距”设置为“0”。（3）单击“确定”按钮。（4）按快捷键Ctrl+S保存网页。,14.3.2 制作主页,2.利用表格进行页面布局（1）执行“插入”“表格”菜单命令，在“表格”对话中输入“行数”为5，“列数”为2，“表格宽度”为960像素，“单元格边距”为0，“单元格间距”为0，“边框粗细”为0。其余值默认。单击“确定”。（2）选中表格，在表格属性面板中设置“对齐”为“居中对齐”，这样可以保证在任何大于1024*768的分辨率下网页居中显示。根据前边两节制作的素材尺寸，设置单元格的高度。（3）设置表格各行高度，第1行为126；第2行为50；第3行为40；第4行为480；第5行为50。（4）设置嵌套表格。在第1行插入一个表格，“行数”为1，“列数”为2，“高度”为126，第1列宽度为200。在第3行插入一个表格，“行数”为1，“列数”为2，“高度”为40，第1列宽度为360。第4行插入一个表格，“行数”为1，“列数”为2，“高度”为480，第1列“宽度”为360。（5）按快捷键Ctrl+S保存网页。布局结果如图14-19所示。,14.3.2 制作主页,图14-19 课程网站首页布局图,14.3.2 制作主页,3.插入网站LOGO（1）将光标定位到表格第1行第1列。（2）执行“插入”“图像”菜单命令，在弹出的“选择图像源文件”对话框中选择e:zhyyimageslogo.gif文件。（3）单击“确定”按钮。弹出“图像标签辅助功能属性”对话框，输入“替换文本”为“网站LOGO”，再单击“确定”按钮，如图14-20所示。图14-20“图像标签辅助功能属性”对话框（4）按快捷键Ctrl+S保存网页。,14.3.2 制作主页,4.插入首页动画条幅（1）将光标定位到表格第1行第2列。（2）执行“插入”“媒体”“Flash(F)”菜单命令，在弹出的“选择文件”对话框中选择e:zhyyswfsytf.swf文件。（3）单击“确定”按钮。弹出“图像标签辅助功能属性”对话框，输入“替换文本”为“首页动画条幅”，再单击“确定”按钮。（4）按快捷键Ctrl+S保存网页。,14.3.2 制作主页,5.插入导航条（1）将光标定位到表格第2行第1列。（2）执行“插入”“图像对象”“Fireworks HTML(I)”菜单命令，在弹出的“插入Fireworks HTML”对话框，单击“浏览”按钮，在弹出的“选择 Fireworks HTML 文件”对话框中选择e:zhyyimagesdhcd.htm文件,单击“打开”按钮，返回“插入Fireworks HTML”对话框，如图14-21所示。（3）单击“确定”按钮，完成导航条插入。（4）按快捷键Ctrl+S保存网页。图14-21“插入Fireworks HTML”对话框,14.3.2 制作主页,6.制作正文区内容说明（1）将光标定位到表格第3行第1列。（2）输入文本：“教学成果预览”，字体为黑体，字号为24。（3）设置单元格属性，“水平”为“居中对齐”。（4）选中文本“教学成果预览”，设置超链接，链接到webjxcg.htm。（5）将光标定位到表格第3行第2列。（6）输入文本：“课程内容简介”，字体为黑体，字号为24，在单元格属性中设置“水平”为“居中对齐”。（7）按快捷键Ctrl+S保存网页。,14.3.2 制作主页,7.制作正文区内容插入动态交换图片（1）将光标定位到表格第4行第1列。（2）执行“插入”“图像”菜单命令，弹出“选择图像源文件”对话框，选择e:zhyyimagesjxcgjxcg.gif。（3）单击“确定”按钮，弹出“图像标签辅助功能属性”对话框，输入“替换文本”为“动态交换图片”，再单击“确定”按钮。（4）按快捷键Ctrl+S保存网页。,14.3.2 制作主页,8.制作正文区内容输入并设置课程简介内容（1）将光标定位到表格第4行第2列。（2）设置单元格属性为“垂直”为“顶端”（3）输入课程简介内容，并设置字体为“黑体”，字号为“18”。（4）按快捷键Ctrl+S保存网页。,14.3.2 制作主页,9.设置版权区（1）将光标定位到表格第5行，即最后1行。（2）在属性面板中设置“居中对齐”。（3）输入版权信息内容。（4）按快捷键Ctrl+S保存网页。到此为止，网页设计与制作课程网站首页就制作好了。版面状态如图14-22所示：按F12预览网页效果。显示效果如图14-23所示：,14.3.2 制作主页,图14-22 课程网站首页设计状态,14.3.2 制作主页,图14-23 课程网站首页效果图,实训指导14,【实训项目1】参考本章内容，完成网页设计与制作课程网站首页制作。【实训项目2】应用本书各章内容进行网页综合设计制作，要求主题明确，布局合理，图文并茂，色彩与主题相和谐。操作提示：1.主题可从以下主题中选择：（1）介绍花卉知识的网站；（2）介绍古典诗词的网站；（3）介绍中国茶文化的网站；（4）介绍某运动项目（如蓝球、足球等）的网站；（5）介绍世界杯的网站；（6）介绍奥运会的网站；（7）介绍旅游景点、旅游常识的网站；（8）介绍证券知识的网站；（9）介绍饮食文化的网站；（10）其他自己感兴趣内容的网站。,实训指导14,2.创建站点文件夹及文件。站点文件夹可为E:JSJ(为班级及学号)，站点名称可根据站点主题自定，再建立站点子文件夹及文件。3.制作主页Index.htm，要求主页文件Index.htm在站点文件夹下，具体操作提示如下：（1）利用Fireworks制作交换图片、特效文字、按钮等。（2）利用Flash制作网页动画。（3）利用Dreamweaver行为及层或Fireworks制作导航菜单。（4）利用表格进行整体布局，版面清晰，色彩运用合理。（5）可在网页中设有表单，比如用于统计对网站的的一些调查等。（6）网页中的超链接能够正确链接，链接深度不低于2层，不超过4层。4.制作子页：子页可根据情况选择不同的布局和技术，如表格、框架、层、样式、模板等。,