web程序设计教程

《web程序设计教程》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、Web设计基础知识教程本教程将指导您完成设计Web图形以及与MacromediaFireworksMX2004进行交互的基本任务。您将获得使用业界领先的Web图形应用程序的实践经验，同时还将学习一些Web设计概念。学习内容通过学习本教程，您将再现利用Fireworks进行网页设计的典型的制作工作流程。您将学习如何完成下列任务：•复制Tutorial2文件夹•查看已完成的网页•打开源文件•导入图形•切割文档•创建拖放变换图像•创建和编辑按钮以创建导航栏•创建和编辑弹出菜单•优化文档•导出HTML•测试

2、已完成的文件1应了解的知识在学习本教程以前，您应该熟悉如何在Fireworks或其它矢量和位图图形应用程序中设计图形。您应该具备Fireworks图形设计基础知识教程中所介绍的基本技能。尤其应了解如何在Fireworks中完成下列任务：•保存文档•选择对象•编辑对象属性•显示和使用面板•使用层和对象•创建和编辑文本•导出图形复制Tutorial2文件夹开始之前，您将创建Tutorials2文件夹的一个副本，以便可以保存您的工作结果，同时使您或其他用户能够在以后使用原始文件完成本教程。注意：如果您使用

3、的是Windows，在继续前请先将您下载的教程文件解压缩。（在Macintosh上，StuffItExpander会自动为您解压缩文件。）1选择您从Macromedia网站下载下来的Tutorial2文件夹。2执行下列操作之一：■(Windows)为该文件夹制作一个副本，方法是按Control+C，然后按Control+V，以将该副本粘贴到桌面上。■(Macintosh)按Command+D以重制该文件夹。3将新文件夹更名为Tutorial2_Copy。查看已完成的网页下一步，您将查看已完成的教程文

4、件，以便了解已完成的工程作为HTML文件导出后的外观。1启动Web浏览器。2在硬盘上，定位到您从Macromedia网站下载下来的Tutorial2文件夹，并浏览到Tutorial2/Complete文件夹。注意：某些MicrosoftWindows版本默认情况下隐藏已知文件类型的扩展名。如果您尚未更改此设置，Complete文件夹中的文件将不会显示扩展名。在处理网页和网页图形时，最好能够看到文件扩展名。有关如何重新打开文件扩展名的信息，请参阅Windows帮助。3选择final.htm文件并将其拖

5、到打开的浏览器窗口上。在本教程中，您将为Global（一个汽车租赁公司）完成该网页的一个部分完成版本。4将指针移到大的Vintage图像上。当指针在Vintage图像上移动时，页面上的另一个图像将发生变化。这就是所谓的不相交变换图像(disjointrollover)。5在沿网页顶部排列的导航栏中移动指针。按钮在指针经过它们时相应地改变。单击Rates按钮测试链接。该链接将您带到位于www.macromedia.com/cn的Fireworks网页，但在您完成本教程时，您将为该项目以及其它项目输入您

6、自己的URL。2Web设计基础知识教程6使用浏览器的“后退”按钮返回到final.htm网页。7将指针移到WorldwideAirports图像上。出现一个弹出菜单。用指针变换菜单中的每个项目，包括第一个项目（它包含一个子菜单）。8单击“UnitedStates”测试链接，然后返回到final.htm网页。9查看完网页以后，可以将其关闭，也可以使其保持打开状态供您学习教程时参考。注意：Complete文件夹还包含生成该HTML文件所用的Fireworks文档。若要查看此文档，请双击final.png

7、。打开源文件您已经在浏览器中查看了final.htm文件，因此现在可以开始学习本教程了。1在Fireworks中，选择“文件”>“打开”。2定位到硬盘上的Fireworks应用程序文件夹。浏览到Tutorial2/Start并打开global.png。注意：学习本教程时，请记住经常选择“文件”>“保存”保存您的工作。导入图形您已经打开了Global网页的未完成设计，现在您将导入图形。如果您已经学完了Fireworks图形设计基础知识教程，您将使用已创建的JPEG。如果您尚未学习该教程，系统将为您提供

8、一个已完成的图像。1选择“文件”>“导入”，然后执行下列操作之一：■如果您已学完图形设计基础知识教程，请浏览到Tutorial1/Export文件夹。■如果您没有学完图形设计基础知识教程，请浏览到Tutorial2/Assets文件夹。2选择vintage.jpg，然后单击“打开”。3在画布上的任意空白处单击。图像出现并且已被选定。4拖动图像，将其定位到下图所示的位置。导入图形3切割文档出于多种原因，Web设计人员使用一种称为切片的处理操作将网页文档分割为多个较小的片