DreamweaverCS5网页设计与制作第3版 吕宇飞电子教案1-7.docVIP

项目一：主页欣赏及页面分析 课题名称：1．8 视听元素 教学目标 1．知识与技能目标 了解可运用的视听元素及其表现形式。 2．操作技能目标 能够进行视听元素草案的设计，并培养相应的审美能力。 教学分析与准备 1．教学重点 掌握线条、文字、图像、Flash各类视听元素的设计要点 2．教学难点 各类视听元素的表现形式 3．教学策略 讲授、演示、讨论相结合 4．教学环境 多媒体网络机房 学习过程 教学组织 教学内容 备注 引入新课 （建议教学5分钟） 视听元素范例的分析（建议教学15分钟，其中含操作示范的教学10分钟 ） 操作示范 设计与制作要点（建议教学23分钟，其中含图像优化的教学10分钟） 图像优化部分教师示范 小结（建议教学2分钟） 视听元素主要包括背景、文字、颜色、导航菜单、音乐、图标、图像、按钮、FLASH动画、动态影像等。 观察与分析资源包提供的一系列网页的浏览。 网页中的背景设计不仅影响浏览者对网页内容的接受程度，还影响浏览者对整个网站的视觉印象。一般在网页设计中常用的背景有：颜色背景、沙纹背景、条状背景和图片背景。 教材中图1-8-1 (美丽心情\index.html)页面为方格背景，显得文静与淡雅。其背景的运用属于沙纹背景。沙纹背景其实属于图片背景的范畴，它的主要特点是整个页面的背景可以看作是局部背景的反复重排，在这类背景中以沙纹状的背景最为常见，因此统称为沙纹背景。浏览器处理图片背景时有时会由于背景图片比页面范围小，而使该图片在水平和竖直方向上反复排列。因此可以选取一张小图片作为页面背景，越小越好，让它自动在页面上重复排列，铺满整个页面。当然需要注意形成的背景应有一个较好的整体形象，而不是若干图片的堆砌结果。 例如“美丽心情”页面背景就选取了一张很小的图片。 教材中图1-8-2 (cinema\index.html)实质是由Flash设计的浅灰色色彩渐变背景，属于颜色背景。一般颜色背景的设计最为简单，也最为常用和重要。因为相对于图片背景来说，它有无与伦比的快速显示优势。使用时需要注意根据不同的页面内容设计选用冷暖色调背景颜色，同时根据页面的版式设计使背景颜色与页面内容实现最佳视觉搭配等。 条状背景与沙纹背景比较相似，也是利用浏览器对图片背景的自动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。图片背景则是使用一副完整图片作为页面背景。 网页中的字体同样具有实现语意和美学效应两方面的作用。 观察图1-8-3(慧通商务\招聘广告.htm)页面中的文字部分。引文和关键词的强调使文字内容显得条理而秩序。适当的行距使页面留有空白间距，以便引导浏览者阅读。图1-8-4(商务网页.tif)页面中，引文的字号和色彩都较为醒目地区别于正文，和整个页面搭配感觉舒服而不抢眼。和图片混合编排，图片部分显得感性而具有活力，文字则相对理性和平静。页面中文字部分小字号的应用容易产生整体感和精致感觉，但不易阅读。 图片应用于网页，与文字相比较更为直观生动，既能很容易把那些文字无法表达的信息表达出来，又能使网页更加美观丰富。图1-8-5(petrossian\index.htm)和图1-8-6(娱乐.tif)页面中运用了较多图片。图片和文字形成一种相互补充的视觉关系。页面上文字太多，会显得沉闷而缺乏生气；页面上缺少文字，必然就会减少页面的信息容量。因此，图片与文字的密切配合，互为衬托，既能活跃页面，又使主页有丰富的内容。 图1-8-7(动画设计\index.html)和图1-8-8(虚拟主机销售\index.html)页面中Flash动画的应用增加了动感和活力。Flash 在网页设计中的应用主要有两个方面。一是全Flash 网页的制作，例如“动画设计”页面；二是局部Flash动画的运用，例如“虚拟主机销售”页面。 一、设计背景图片可以运用各种各样的线条和形状，使之与页面中的文字、标题、图片等相组合，增强页面的艺术魅力。 1、直线（矩形）? 2、曲线（弧形） 3、曲、直线（矩形、弧形）的结合 二、文字 文字的字体 文字的大小 文字间的行距 文字的颜色 文字的强调 三、图像 1、图像的规格 2、图像的分辨率 3、图像的裁切 4、常用的图像优化方法： 在Photoshop图像处理软件中融合图层，切割图像并优化，保存图像文件时选择“存储为Web所用格式”进行保存。 四、Flash 1、注意衬托主题，切勿喧宾夺主。 2、使用Flash做整体网页设计时，应对主题和布局等作全面考虑。 1、文字的大小：最适合网页正文显示的字体大小为12磅左右。 2、行距与文字的比例通常为12比10。 3、图像的分辨率：一般分辨率采用72dpi。 4、需要强调并突出的文字通常有三种：首字、引文和关键词。 5、图像的裁切主要有三种形式：适形裁切、异形