DIV+CSS网页制作实战第05次课(2课时)根据效果图切片.pptxVIP

课次 5 课时 2 教具 投影仪 项目 项目2 HTML网页文档的编辑 任务 任务2.1 根据效果图切片 知识点 1. Fireworks基本操作（30分钟） 2. 网页图片格式（20分钟） 3. 图片切片（40分钟） 重点 图片切片 难点 无 备注 上机操作90分钟 / 20 1 / 20 2 知识技能目标 掌握网页切片的操作方法 掌握网页编辑软件的操作方法 掌握基本的HTML标记及属性 / 20 任务2.1 根据效果图切片 2．1．1 任务分析（首页的结构与用色） 3 / 20 4 2．1．2 Fireworks基本操作 1．Fireworks软件介绍 Fireworks是第一个针对网页而开发的专业图像处理软件。它将矢量图像处理和位图图像处理合二为一，避免了图像在多个应用程序之间来回迁移。 Fireworks的工作文档格式为png图片，能够保存交互及图层等相关信息供以后编辑使用； Fireworks矢量图形处理能力强，能任意切图、生成鼠标翻转图像； 具有强大的动画和网络图像生成功能，可以进行图像优化； 可以导出带有HTML或者JavaScript代码的网页文件； Fireworks提供了一个真正集成的Web解决方案。 / 20 5 2．Fireworks的特点 （1）支持交互式图形 Fireworks的切片和热点是指定网页图形中交互区域的对象。切片是将图像切成不同的部分，可以将变换图像、动画效果和超级链接等应用到这些对象上。Fireworks导出的网页中，每个切片都放置在一个表格单元格中。使用热点可将URL链接和行为指定给整个图形或图形的某个部分。切片和热点可以在工作区中快速为图形指定交换图像行为动作。   （2）导出图形时进行图形优化 Fireworks源PNG文档可以导出多种类型的文件，包括JPG、GIF、GIF动画和包含多种类型切片图像的HTML表格，并且在导出图形时进行不同比例的压缩和图像优化，在文件大小和品质之间平衡。 / 20 6 （3）支持编辑矢量图形和位图图像 矢量图形又称向量图形，它由数学方程式所定义的直线和曲线组成，内容以线条和色块为主。矢量图形特点如下： 矢量图由多个对象元素堆砌而成，各对象在计算机中由数学公式描述； 每个对象都是实体，具有颜色、形状、轮廓和大小等属性； 矢量图与分辨率无关，将其放大或缩小，仍然会保持其清晰度，不会出现锯齿状边缘； 矢量图在标志设计、插图设计 及工程绘图上应用广泛。 / 20 7 位图图像又称点阵图像，由许多点（像素）组成，每个像素有具体颜色。计算机显示器屏幕可看作一个 大的像素网格，在每个像素上显示不同的颜色、亮度等，便会在整体上显示出一幅图像，这就是位图图像。特点如下： 位图可以表现图像中色彩的细微变化，能够制作色彩和色调变化丰富的图像，画面细腻，过渡自然； 位图的清晰度与分辨率有关，在屏幕上将位图放大，或以低分辨率打印，图像会出现锯齿边缘； 矢量图中所有对象都是用数学公式表 示的，因此文件所占空间小，缩放不失真。 通常位图文件比相同内容的矢量图像文 件大，但矢量图不易作出色调或色彩丰富 变化的图像。 / 20 8 3．Fireworks的工具箱 Fireworks将不同图形对象的操作工具箱分类放置，如图所示。 / 20 9 4. Fireworks 基本操作 在Fireworks 【工具】面板中，选择的工具决定了创建的对象是矢量图还是位图。例如，从【工具】面板的【矢量】部分选择【钢笔】工具，就能绘制矢量路径；选择【刷子】工具，则可以绘制位图对象；选择【文本】工具，可以键入文字。绘制或导入矢量、位图对象或文本后： 可以使用各种工具、效果、命令和技术来增强和完成图形； 可以使用【按钮编辑器】中的工具创建交互式导航按钮； 可使用Fireworks工具编辑导入的JPG、GIF、PNG、PSD等图形，如对它们进行裁切、润饰、蒙版处理、调整颜色和色调等处理。 / 20 10 （1）创建新文档 PNG是Fireworks的文档格式。创建新文档的步骤如下： 选择【文件】菜单\【新建】，打开如图2-5所示【新建文档】对话框； 输入画布宽度和高度度量值；以像素/英寸或像素/厘米为单位输入分辨率；为画布选择白、透明或自定义颜色。 单击“确定”按钮。 / 20 11 （2）打开和导入文件 （3）保存Fireworks 文件 （4）设置Fireworks工作环境 1）设置“常规”选项 按组合键Ctrl+U 或选择【编辑】菜单\【首选参数】命令，弹出“首选参数”对话框，选“常规”卡片，如图所示。 / 20 12 2）设置“编辑”选项 在“首选参数”对话框中单击“编辑”选项卡，如下左图所示: 修剪时