网页制作与网站设计第三章.ppt
《网页制作与网站设计第三章.ppt》由会员分享，可在线阅读，更多相关《网页制作与网站设计第三章.ppt（100页珍藏版）》请在冰豆网上搜索。
第三章第三章网页图形与图像处理网页图形与图像处理网页制作与网站设计网页制作与网站设计网页制作与网站设计第三章第三章网页图形与图像处理网页图形与图像处理【本章内容】3.1Fireworks基础基础3.2图形的绘制与编辑图形的绘制与编辑3.3图像处理图像处理3.4图像的优化与导出图像的优化与导出网页制作与网站设计网页制作与网站设计3.1FireworksCS4基础基础【本节内容】3.1.1FireworksCS4的新功能的新功能3.1.2FireworksCS4的安装、启动与退出的安装、启动与退出3.1.3FireworksCS4的界面的界面3.1.4创建创建Fireworks文件文件网页制作与网站设计网页制作与网站设计3.1FireworksCS4基础基础AdobeFireworks（以前是（以前是MacromediaFireworks）是用来设计和制作专业化网页图形的终极）是用来设计和制作专业化网页图形的终极解决方案。
解决方案。
使用使用Fireworks可以在一个专业化的环境中创建和可以在一个专业化的环境中创建和编辑网页图形、对其进行动画处理、添加高级交互功能编辑网页图形、对其进行动画处理、添加高级交互功能以及优化图像。
从而创建非凡的网页图像。
以及优化图像。
从而创建非凡的网页图像。
Fireworks有着在同一个应用程序中合二为一地处理位图和矢量图有着在同一个应用程序中合二为一地处理位图和矢量图的巨大优势的巨大优势。
网页制作与网站设计网页制作与网站设计3.1.1FireworksCS4的新功能的新功能FireworksCS4不仅继承了以前不仅继承了以前Fireworks的强大功能，的强大功能，还还增加了更友好、高效的新特性、新的功能。
在新功能的增加了更友好、高效的新特性、新的功能。
在新功能的帮助下，我们可以更方便地使用帮助下，我们可以更方便地使用Fireworks。
改进的性能和稳定性：
使用改进的性能和稳定性：
使用FireworksCS4从文件打开从文件打开和保存到元件更新，以有密集的位图和矢量操作等整体性和保存到元件更新，以有密集的位图和矢量操作等整体性能增强，让用户能够更快速有效地工作。
能增强，让用户能够更快速有效地工作。
全新的用户界面：
全新的用户界面：
FireworksCS4使用简单易用的通用使用简单易用的通用用户界面设计，用户可以从其他用户界面设计，用户可以从其他CreativeSuite应用程序应用程序（如（如PhotoshopCS4、IllustratorCS4、FlashCS4）轻松切换到轻松切换到FireworksCS4。
网页制作与网站设计网页制作与网站设计3.1.1FireworksCS4的新功能的新功能基于基于CSS布局：
用户现在可以布局：
用户现在可以FireworksCS4功能强大功能强大的图形环境中设计完整的网页，然后一次性导出符合标的图形环境中设计完整的网页，然后一次性导出符合标准、基于准、基于CSS且附有外部样式表的标准网页兼容布局。
且附有外部样式表的标准网页兼容布局。
可以从最常用的可以从最常用的6个版面之一着手，并使用自动边缘和个版面之一着手，并使用自动边缘和边距检测合并前景和背景图形。
将边距检测合并前景和背景图形。
将FireworksCS4富元富元件拖放到件拖放到FireworksCS4布局上，指定标题、链接和表布局上，指定标题、链接和表单属性以进行精确的单属性以进行精确的CSS控制。
控制。
导出导出AdobePDF：
从：
从FireworksCS4设计组件复合生设计组件复合生成高精度、交互式且安全的成高精度、交互式且安全的PDF文档，以增强客户端通文档，以增强客户端通信。
可以为查看以及打印、复制和注释等其他任务单独信。
可以为查看以及打印、复制和注释等其他任务单独创建密码来保护您的设计。
创建密码来保护您的设计。
网页制作与网站设计网页制作与网站设计3.1.1FireworksCS4的新功能的新功能动态样式：
使用专业设计的样式或自定义样式集自定义动态样式：
使用专业设计的样式或自定义样式集自定义Fireworks对象或文本。
修改一个样式源即可更新样式所对象或文本。
修改一个样式源即可更新样式所有实例的已应用效果、颜色和文本属性。
使用增强的样式有实例的已应用效果、颜色和文本属性。
使用增强的样式面板可以提高工作效率。
单击图标，可以在默认面板可以提高工作效率。
单击图标，可以在默认Fireworks样式、当前文档样式或其他库样式之间进行选样式、当前文档样式或其他库样式之间进行选择，轻松访问多个样式集。
择，轻松访问多个样式集。
Adobe文字引擎：
文字引擎：
FireworksCS4现在也具备现在也具备Photoshop和和Illustrator用户熟悉的用户熟悉的“Adobe文字引擎文字引擎”，可使用增强排版能力实现出众的字体设计；可以从，可使用增强排版能力实现出众的字体设计；可以从Photoshop（CS3以上）和以上）和Illustrator（CS3以上）导以上）导入或复制入或复制/粘贴双字节字符，并保持相同的清晰度；可以粘贴双字节字符，并保持相同的清晰度；可以在紧凑的文本徽标路径内浮动文字。
在紧凑的文本徽标路径内浮动文字。
网页制作与网站设计网页制作与网站设计3.1.1FireworksCS4的新功能的新功能工作区改进：
将智能辅助线快速置入画布中，以实现快速准工作区改进：
将智能辅助线快速置入画布中，以实现快速准确地定位和测量画布上的辅助线和元素。
当在画布上将辅助确地定位和测量画布上的辅助线和元素。
当在画布上将辅助线拖动到位时，警告屏幕会表明相应位置。
本地元件编辑可线拖动到位时，警告屏幕会表明相应位置。
本地元件编辑可使用设计的其余部分来精确美化内容中的元件；扩展的使用设计的其余部分来精确美化内容中的元件；扩展的9切片切片缩放工具现在可应用于画布上的任何对象，而不仅仅是元件。
缩放工具现在可应用于画布上的任何对象，而不仅仅是元件。
可自定义、重用的资产：
借助公用库启动您的的设计流程，可自定义、重用的资产：
借助公用库启动您的的设计流程，这是一个由这是一个由Web和软件应用程序、界面及网站中常用的图形和软件应用程序、界面及网站中常用的图形元件、表单元素、文本符号和动画组成的库。
使用您的自定元件、表单元素、文本符号和动画组成的库。
使用您的自定符号和样式扩大集合，继续推动快速设计。
符号和样式扩大集合，继续推动快速设计。
集成集成AdobeKuler：
在：
在FireworksCS4中可以直接访问中可以直接访问AdobeKuler在线服务提供的最新颜色主题以采样并应用于在线服务提供的最新颜色主题以采样并应用于用户的用户的Web设计。
也可以调制出和谐的颜色供自己使用或上设计。
也可以调制出和谐的颜色供自己使用或上传到传到Kuler。
网页制作与网站设计网页制作与网站设计3.1.2FireworksCS4的安装、启动与退出的安装、启动与退出1、安装、安装安装安装FireworksCS4步骤如下：
步骤如下：
（1）将）将FireworksCS4安装光盘插入计算机的光盘驱动安装光盘插入计算机的光盘驱动器。
器。
（2）开始安装：
在）开始安装：
在Windows系统中会自动启动系统中会自动启动Fireworks安装程序。
安装程序。
（3）根据屏幕上安装向导的提示输入相关信息。
）根据屏幕上安装向导的提示输入相关信息。
（4）安装完成时，重新启动计算机。
）安装完成时，重新启动计算机。
网页制作与网站设计网页制作与网站设计3.1.2FireworksCS4的安装、启动与退出的安装、启动与退出2、中文版、中文版FireworksCS4的启动的启动
（1）通过）通过“开始开始”菜单下的菜单下的“程序程序/Adobe/AdobeFireworksCS4”实现。
实现。
（2）通过快捷方式）通过快捷方式。
网页制作与网站设计网页制作与网站设计3.1.2FireworksCS4的安装、启动与退出的安装、启动与退出3、中文版、中文版FireworksCS4的退出的退出l选择选择“文件文件/退出退出”菜单项；菜单项；l单击程序窗口标题栏右侧的单击程序窗口标题栏右侧的“关闭关闭”按钮；按钮；l直接按组合键直接按组合键【Alt+F4】如果修改了如果修改了FireworksFireworks文件内容后直接关闭应用程序，文件内容后直接关闭应用程序，系统会弹出是否保存文件的对话框，提示用户对所做和修改系统会弹出是否保存文件的对话框，提示用户对所做和修改是否保存。
如单击是否保存。
如单击“是是”按扭，则在进行必要的文件保存设按扭，则在进行必要的文件保存设置后，保存对文件的修改退出；如单击置后，保存对文件的修改退出；如单击“否否”按扭，则不保按扭，则不保存对文件的修改直接退出。
存对文件的修改直接退出。
网页制作与网站设计网页制作与网站设计3.1.3FireworksCS4的界面的界面1、中文版、中文版FireworksCS4的界面的界面FireworksCS4的工作界面，如图的工作界面，如图3-1所示。
它由标题栏、所示。
它由标题栏、菜单栏、常用工具栏与修改工具栏、工具箱、属性检查器、其它菜单栏、常用工具栏与修改工具栏、工具箱、属性检查器、其它面板和开始页六部分组成，开始页位于窗口的中间，它包括打开面板和开始页六部分组成，开始页位于窗口的中间，它包括打开最近的项目、新建、扩展和教程区四种任务提示。
最近的项目、新建、扩展和教程区四种任务提示。
通过打开和新建都可以进入编辑界面（如图通过打开和新建都可以进入编辑界面（如图3-2）。
与工作）。
与工作界面相比，不同之处是：
编辑界面窗口的中间部分用编辑区取代界面相比，不同之处是：
编辑界面窗口的中间部分用编辑区取代了工作界面窗口的开始页。
这个编辑区便是图像编辑的主要场所了工作界面窗口的开始页。
这个编辑区便是图像编辑的主要场所,包括显示文件的名称（扩展名为包括显示文件的名称（扩展名为.png）的标题栏，用于编辑的）的标题栏，用于编辑的“原始原始”按钮，按不同幅面预览图像的按钮，按不同幅面预览图像的“预览预览”、“2幅幅”及及“4幅幅”3个按钮及右上角的导出钮。
个按钮及右上角的导出钮。
网页制作与网站设计网页制作与网站设计3.1.3FireworksCS4的界面的界面1、中文版、中文版FireworksCS4的界面的界面图3-1FireworksCS4的工作界面网页制作与网站设计网页制作与网站设计3.1.3FireworksCS4的界面的界面2、常用工具栏与修改工具栏常用工具栏与修改工具栏FireworksCS4的常用工具栏及修改工具栏的常用工具栏及修改工具栏在菜单栏的下方。
在菜单栏的下方。
常用工具栏有新建、保存、打开、导入、导常用工具栏有新建、保存、打开、导入、导出、打印（文档），撤销、重做（步骤），剪切、出、打印（文档），撤销、重做（步骤），剪切、复制与粘贴（复制），除了导入、导出文件的按复制与粘贴（复制），除了导入、导出文件的按钮以外，其余与钮以外，其余与office软件常用工具栏差不多。
软件常用工具栏差不多。
网页制作与网站设计网页制作与网站设计3.1.3FireworksCS4的界面的界面3、工具箱、工具箱工具箱位于屏幕的左侧，工具箱位于屏幕的左侧，它包含了用于它包含了用于创建、选择和编辑的多种工具，创建、选择和编辑的多种工具，它分成了它分成了6类别并用标签标明，类别并用标签标明，如图如图3-3所示。
所示。
一些工具包含在同一个工作组中，在同一些工具包含在同一个工作组中，在同一个工作组中的工具右下角有三角形，在一个工作组中的工具右下角有三角形，在它们上面按下鼠标不放，便会弹出同组其它们上面按下鼠标不放，便会弹出同组其它工具，将鼠标移到所要的工具上单击便它工具，将鼠标移到所要的工具上单击便可实现切换。
可实现切换。
图3-3工具箱网页制作与网站设计网页制作与网站设计3.1.3FireworksCS4的界面的界面3、“属性属性”检查器检查器“属性属性”检查器是一个上下文关联面板，它显示当前选检查器是一个上下文关联面板，它显示当前选区的
升级会员 