网页制作技术——Dreamweaver Flash Fireworks 教学课件 作者 赵丰年 第10章.ppt

《网页制作技术——Dreamweaver Flash Fireworks 教学课件 作者 赵丰年 第10章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第10章综合实例10.1站点规划10.2图像处理10.3制作Flash首页10.4网页制作10.5测试发布10.1站点规划10.1.1规划站点目标与典型用户：本网站以娱乐方面的信息为主要内容，希望能够传播与交流相应内容，目标用户定义为有相同兴趣的上网用户。网络技术约定：①Windows系列操作系统；②使用调制解调器或宽带方式上网（最低网络传输速率为56kbit/s）；③使用IE5或以上版本的浏览器，分辨率为800×600像素,兼顾1024×768像素；④需要Flash插件。返回目录网站内容与风格：站点包括以下栏目：①卡通世界；②影视天地；③游戏王国

2、；④网络文学。在设计风格方面，尽量采用“画廊式”，力求能够表现出各栏目的最大特色，达到有效传达信息的目的。图10.1所示是根据以上规划得出的站点结构。图10.1站点结构规划图10.1.2定义本地站点根据图10.1所示的规划图，在Dreamweaver中使用“站点”菜单中的“新建”命令，新建一个本地站点，定义方法请参阅第2章2.1.2节。此后可以收集或制作一些能够在网页中使用的素材，例如图像、文字等，并将其保存到站点中的资源文件夹（assets）中。10.2图像处理虽然在多数情况下，网页设计者不需要直接创作图像效果，但要使已有的图像适合网页制作，常常

3、需要用图像处理软件进行加工处理。本节介绍如何用Fireworks处理一些网页中要用的图像。返回目录10.2.1制作标题图像标题图像是表现站点内容和风格的主要工具之一，“游戏王国”页面中标题图像的制作步骤如下。（1）启动Fireworks，新建一文档，设置图像宽度为740像素、高度为83像素，分辨率为72像素/英寸，然后选择“文件”菜单中的“导入”命令，在文档窗口中导入3个图像，并适当调整这些图像的位置，如图10.2所示。注意：实际上，左边和右边的图像是对称的，因此右边图像可通过对左边图像执行“修改”菜单“变形”子菜单中的“水平翻转”命令得到。图10

4、.2导入原始图像（2）在工具面板中单击“文本工具”按钮，在左侧的图像中单击鼠标左键，然后在“属性检查器”中设置字体、字号与颜色等文字属性，输入网页的标题文字“游戏王国”，使用相同方法在右侧的图像中添加文字“娱乐无限”，适当调整文字对象在整个文档中的位置，按【Ctrl+S】键保存文档。注意：在制作标题图案时，常常可以使用一些特殊的字体来获得特定效果。例如，在此处使用了“创艺繁隶书”字体，使得站点具有了一定的古典色彩。（3）选择“文件”菜单中的“导出预览”命令，打开“导出预览”对话框，在“格式”下拉列表框内选择GIF格式，在“调色板”中选择“最适合色彩

5、”，如图10.3所示。单击“导出”按钮，将图像导出到站点中的资源文件夹中。图10.3导出图像文件10.2.2主题图像的处理通过对抓屏图或扫描图的处理，往往可以得到适合网页的图像效果。例如，以下步骤就将CS游戏的启动画面简单处理为网页中可用的图像。（1）首先得到一个原始图像，步骤为：启动CS游戏，进入游戏界面，按【Alt+PrintScreen】组合键将界面图像拷贝到剪贴板中；启动Fireworks，按【Ctrl+N】键新建文档，将剪贴板中的图像粘贴到文档窗口中，如图10.4所示。图10.4得到原始位图（2）单击位图“选取框工具”按钮，选中图像中间部

6、分（即不要上面的标题栏和四周的边框），按【Ctrl+X】键将其剪切到剪贴板中，按【Ctrl+N】键新建文档，按【Ctrl+V】键将其粘贴到新建文档中。（3）在工具面板中，单击“橡皮图章工具”按钮，将图像中多余信息清除（即覆盖掉左边的文字），按【Ctrl+S】键保存文档。（4）选择“修改”菜单“画布”选项中的“图像大小”命令，打开“图像大小”对话框，设置一个适合网页的图像尺寸（160×114），确保“分辨率”选项为72像素/英寸，单击“确定”按钮。（5）选择“文件”菜单中的“导出预览”命令，打开“导出预览”对话框，选择JPEG图像格式，设置其他各选项

7、后单击“导出”按钮，将处理好的图像导出到站点资源文件夹中。最后完成的图像效果如图10.5所示。图10.5处理好的图像10.2.3内容页面中图像的处理对于一些已有的图像，为了满足网页制作的需要，可以对它们进行简单的加工。例如，将原来的白色背景修改为黑色并将其缩小，使得“CS图片欣赏”网页中的图像更符合网页制作的要求，如图10.6所示。图10.6图像处理前后的效果对比处理步骤如下。（1）启动Fireworks，选择“文件”菜单中的“打开”命令打开原始图像。（2）单击工具面板中的“魔术棒工具”按钮，在文档中的白色背景中单击鼠标左键，按【Delete】键将

8、选中部分清除。（3）选择“修改”菜单“画布”选项中的“画布颜色”命令，在打开的“画布颜色”对话框中定义画布的颜色为黑色。此