图像与多媒体1.pptVIP

学习情境2-制作基本页面与图像多媒体 主讲教师：张劲勇教学部门：计算机工程系 温故知新 知识回顾 网页页面属性的设置。 网页文本的基本操作。 本节知识要点 常用的图像格式 在网页中插入图像，以及图像的相关综合操作。 3.1　课堂案例——家具特卖网页 使用“图像”按钮插入图像。使用“属性”面板改变图片的大小、调整图像的亮度和对比度并为图片添加文字说明。使用“图像占位符”命令代替网页中缺少的一张图片。 效果图 3.1.1 常用的图像格式 网页中使用的图像可以是GIF、JPEG、BMP、TIFF、PNG等格式的图像文件。目前主要使用的是GIF和JPEG两种格式。网页中的图像格式一般以GIF为主，如果涉及照片类的图像，则选择JPEG格式。(P54) JPEG：使用JPG或JPEG做文件后缀，JPEG是一种高压缩比图像格式，广泛应用网络图像、数码相片、光盘图像等。 GIF：GIF最多支持256种色彩的图像，支持存储多幅彩色图像，形成简单动画，文件大小较小,便于网络传输，广泛用于网页制作。 3.1.1 常用的图像格式 GIF图像 JPEG图像 3.1.2 图像在网页中的应用 图像在网页中的使用： 网页背景。 网页图标、网页按钮、网页导航等。 3.1.2 图像在网页中的应用 图像在网页中的使用： 网页广告、网站Banner等。 图文混排，加强文字说明效果。 3.1.3 图像的综合操作 插入图像。 调整图像大小、设置边框、设置图像对齐方式、设置边距等。 设置图像为页面、表格等背景图像。 图文混排综合操作。 插入图像 点击命令菜单“插入”→“图像”弹出“选择图像源文件”对话框，浏览到所需的图像后点击“确定”按钮。 调整图像大小 选中图像，拖动控制手柄可以调整图像的大小，也可以通过修改属性面板中的“宽”和“高”精确地调整图像大小。 插入图像占位符 在网页布局时，网站设计者需要先设计图像在网页中的位置，等设计方案通过后，再将这个位置变成具体图像。Dreamweaver CS5提供的“图像占位符”功能，可满足上述需求。 在网页中插入图像占位符的具体操作步骤如下。 （1）在文档窗口中，将插入点放置在要插入占位符图形的位置。 （2）通过以下几种方法启用“图像占位符”命令，弹出“图像占位符”对话框。 选择“插入”面板“常用”选项卡，单击“图像”展开式工具按钮，选择“图像占位符”选项。 选择“插入记录 图像对象 图像占位符”命令。 课内实验任务1 3.2　课堂案例——数码相机网页 使用“图像”按钮插入图像。使用“属性”面板改变图像的对齐、水平边距。 效果图 3.2　课堂案例——数码相机网页 使用“图像”按钮插入图像。使用“属性”面板改变图像的对齐、水平边距。 效果图 3.2.1 调整图像与文本的相对位置 网页中既有文字，又有图像，如何调整同一行文字和图像的摆放位置达到表现良好的视觉效果，这就涉及图像与文字的相对位置问题。 调整同一行图像与文字相对位置的具体操作步骤如下。 （1）在设计视图中选择图像。 （2）在图像“属性”面板中展开“对齐”选项的下拉列表，选择一种调整图像与文字相对位置的方式。“对齐”选项中提供了9种图像与文字的对齐方式。 图像对齐方式 选中图像，在属性面板上单击“对齐”下拉菜单中的“右对齐”命令进行设置，然后拖曳图片到合适的位置，实现图文混排的效果。 设置图像边框 属性面板中的“边框”用来设置图像描边的粗细。 图像的边距 属性面板中的“垂直边距”和“水平边距”可控制图像在垂直方向和水平方向上与文字或图像的间隔距离。 课内实验任务2 3.3 图像的综合应用 图像与表格的综合应用。 3.3 图像的综合应用 把图像作为网页背景。 课堂实验任务3 3.3 图像的综合应用 课后思考 广泛运用了图像后，页面变得更精彩了，考虑一下这样做的缺点是什么？如何降低所带来的不利？