第6章 页面配色与修饰（课件）-高二《网页设计与制作》同步教学（人民邮电版）

第6章 页面配色与修饰 技能目标 6.1网页配色 6.2Photoshop制作网页的基本操作 6.3Flash的动画效果 技能目标 了解网页配色方案及安全色的概念 学会网站风格设计 了解Photoshop的基本知识 了解Flash的基本知识 颜色的使用在网页制作中起着至关重要的作用， 合理地配置颜色，可以使自己制作的网站在众多的网 站中脱颖而出，给浏览者留下深刻的印象。但是对于 初学者来说，往往不容易驾驭好网页的颜色搭配，不 仅要学习各种色彩理论和方法，还要多学习一些大型 网站的用色方法。 6.1 网页配色 色彩三要素： 色相 亮度 饱和度 网页安全色 色彩感受 网页色彩规则 网站风格与色彩设计 课堂小练习：上网查看食品、机械、儿童用品和旅游主题的网 站，仔细观察每一个页面的颜色选择和搭配，体会网站色彩的选 择方法。 6.1 网页配色 在Photoshop中不仅可以制作出更加精美的图片 应用到网页中去，达到美化网页的目的，而且还可以 在Photoshop中直接做出一个网页的外观，再利用切 片工具将做好的图片转换成一个网页文件。 互联网上有大量的网页图片模版资源，这些图片 模版都是一些PSD或者JPEG等格式的图片，是学习 网页布局的优秀案例。作为网页设计的初学者，可以 通过Photoshop对这些图片模版进行加工处理生成网 页文件，将模版中的布局模式和一些有用的图片等元 素引用到自己的页面中来。 6.2 Photoshop制作网页的基本操作 案例6-2　使用Photoshop制作网页 制作电脑公司产品网站，用Photoshop对现在模版 进行修改加工，完成后的效果如图所示。 6.2 Photoshop制作网页的基本操作 案例6-2　使用Photoshop制作网页 【案例分析】这是一个电子产品网站模版，并且图片 是PSD格式的，可以在Photoshop中打开进行编辑， 将一些不需要的内容删去，如电子产品的图片和目 录，换成电脑产品的信息，然后再利用切片工具生成 网页文件。 6.2 Photoshop制作网页的基本操作 案例6-2　使用Photoshop制作网页 【操作步骤】（演示操作） 1．启动Photoshop，打开模版图片 2．在Photoshop中对模版进行修改 3．使用切片工具划分切片 4．保存文件，存储为Web所用格式 6.2 Photoshop制作网页的基本操作 案例6-2　使用Photoshop制作网页 案例小结： Photoshop是一款非常出色的图像处理软件，在网页制作时，可以在Photoshop中进行对现有模版进行修改加工，然后再进入Dreamweaver中进一步制作。 如果选用的模版不是PSD格式，而是JPEG或者其他图片格式，那么就无法直接对模版的内容进行修改，只能用切片工具直接将模版进行切割，然后将生成的网页文件在DW中打开，删除掉模版中的图片，只借用模版的布局。 6.2 Photoshop制作网页的基本操作 案例6-2　使用Photoshop制作网页 案例小结： 用户可以直接在Photoshop中创意制作网页界面，然后使用同样的方法转换成网页文件。 图片是网页结构中必不可少的页面元素之一，但图片的大量出现会严重影响页面的下载显示速度，使用Photoshop中的切片工具可以将一些较大的图片分割成几个小部分，这样可以加快网页下载速度。 6.2 Photoshop制作网页的基本操作 案例6-2　使用Photoshop制作网页 课堂小练习： 在Photoshop中修改本例中的企业名称 和产品内容，制作成另一主题的网页。 6.2 Photoshop制作网页的基本操作 Flash是一种交互式矢量多媒体技术，设计人员 和开发人员可使用它来创建演示文稿、应用程序和 其他允许用户交互的内容。Flash 可以包含简单的 动画、视频内容、复杂演示文稿和应用程序以及介 于它们之间的任何内容。将Flash与Dreamweaver结 合可以设计出更为丰富多彩的网站作品。本节将通 过实例介绍Flash在网页制作中的一些实际应用。 6.3 Flash的动画效果 案例6-3 使用Flash制作网页动态效果 使用Flash制作动态导航，加入到上节制作的“奔 腾电脑网”页面中。 6.3 Flash的动画效果 案例6-3 使用Flash制作网页动态效果 【案例分析】动态导航按钮在如今的网页中随处可 见，这里将利用Flash中的按钮元件，制作随鼠标移动 而变换颜色的导航按钮，并添加到网页中去。 6.3 Flash的动画效