通过Dreamweaver CS学习HTML DIV CSS 网页图片.pptx

《通过Dreamweaver CS学习HTML DIV CSS 网页图片.pptx》由会员分享，可在线阅读，更多相关《通过Dreamweaver CS学习HTML DIV CSS 网页图片.pptx（27页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、5.1 5.1 图片格式图像文件的格式很多，但一般在网页中使用的图片格式并不多，主要有GIF、JPG和PNG。下面进行简单的介绍，以便初学者在网页制作过程中做出适当的选择。如果需要深入了解图片格式的相关知识，读者可查阅其他资料。第1页/共27页5.1.1 GIF5.1.1 GIF格式图形交换格式（Graphic Interchange Format）是一种索引颜色的图像格式。该格式在网页中使用较多。其优点是文件体积小且支持动画；缺点是质量较低。对于大面积同一颜色或颜色变化不大的图像（如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像）建议使用此格式。第2页/共27页5.1.2 JPG5.

2、1.2 JPG格式JPG（联合图像专家组标准，也称JEPG，Joint Photographic Expert Group）文件格式是用于摄影或连续色调图像的高级格式。JPG文件可以包含多达数百万种颜色，因此JPG格式的文件体积较大，图片质量较佳。通常可以通过压缩JPG文件在图像品质和文件大小之间取得良好的平衡。当网页中对图片的质量有要求时，建议使用此格式。第3页/共27页5.1.3 PNG5.1.3 PNG格式PNG（可移植网络图形，Portrable Network Graphic）文件格式是一种新型的无专利权限的图像格式。它可以用来代替GIF格式，同样支持透明层。它在质量和体积方面都具有

3、优势，适合在网络中传输。但由于是新型格式，所以不是所有的浏览器都支持。第4页/共27页5.2 5.2 插入图片简单了解图片格式后，接下来讲解如何把图片插入到网页中。通过几个简单的步骤，就可以完成图片的插入。插入的方法有多种，但在Dreamweaver中插入图片的主要方法包括：插入和拖入。第5页/共27页5.2.1 5.2.1 直接插入图片当需要插入的图片不在站点文件夹时，一般使用直接插入的方法，具体步骤如下：【选择图像源文件】对话框第6页/共27页5.2.1 5.2.1 直接插入图片在列表框中选择图片文件，并在【图像预览】区域进行预览，最后单击【确定】按钮。弹出【图像标签辅助功能属性】对话框，

4、如左图。在【替换文本】文本框中输入“我的图片”，然后单击【确定】按钮，完成图片插入。此时在【设计】视图中可以看到插入的图片，效果如右图。【图像标签辅助功能属性】对话框 最终效果 第7页/共27页5.2.2 5.2.2 拖动插入图片当图片存放在站点文件夹时，可使用拖动来插入图片，操作方法更方便快捷。具体的步骤如下：【文件】面板第8页/共27页5.2.3 5.2.3 揭示图片源码单击【文档】工具栏中的【代码】视图按钮，在打开的【代码】视图中查看HTML源码。在未插入图片前，新建网页的源码标签之间是空的。在插入图片后标签之间的源码如下：第9页/共27页5.3 5.3 图片路径图片的路径是指图片存放在

5、存储器中的位置。在网页中表示文件存放位置的方式有两种：一种是绝对路径，另一种是相对路径。第10页/共27页5.3.1 5.3.1 使用绝对路径绝对路径是指从根目录开始，依次往下直到文件所在的位置。书写方式为：X:xxxyyyx.y。例如，记事本程序放在C盘的系统文件夹的system32文件夹中，那么它的路径是C:WINDOWSsystem32notepad.exe。绝对路径是把文件存放的位置按层次表示出来。如果文件存放的位置包含的层次很深时，就会给书写带来麻烦，于是就有了相对路径。第11页/共27页5.3.2 5.3.2 使用相对路径相对路径是相对于文件而言，从相对文件所在目录依次往下直到文件

6、所在的位置。书写方式为：A/B/B.A。例如，文件X.Y与A文件夹在同一目录下，那么文件B.A在目录A下的B文件夹中，它对于文件X.Y的相对路径则为A/B/B.A，如图所示。相对路径第12页/共27页5.4 5.4 图片修改当图片插入到网页后，还需要对其进行修改，从而使之适合网页表达或装饰的要求。主要的修改包括：修改尺寸、修改对齐方式和设置图片边框。第13页/共27页5.4.1 5.4.1 修改尺寸图片尺寸的修改通常有两种方法：一种是鼠标操作修改的方法；另一种是参数设置修改的方法。在此进行简单的讲解。鼠标操作修改尺寸的具体步骤如下：图片的锚点【属性】面板 第14页/共27页5.4.1 5.4.

7、1 修改尺寸在【宽】文本框中输入数值100，保持高不变，效果如图左所示。此时图片严重变形，一般在网页中需要保持图片的固有比例。选中【高】文本框中的数值，将其删除，然后按Enetr键。此时图片缩小，恢复原有比例，如图右所示。比例变形 右手恢复比例 第15页/共27页5.4.2 5.4.2 修改对齐方式将文字与图片进行混合排列，它们之间必须具有一定的位置关系，称之为对齐方式。先看一个未设置对齐方式的实例，具体步骤如下：未设置对齐【属性】面板 第16页/共27页5.4.2 5.4.2 修改对齐方式图片的对齐方式是变化多样的，现在设置图片的对齐方式。顶端对齐 居中对齐 左对齐 右对齐 第17页/共27

8、页5.4.3 5.4.3 设置图片边框给图片添加一个边框能起到装饰或突出图片的作用，有时还能调和色彩冲突。善用边框能为网页的整体效果带来微妙的趣味。为图片添加边框的具体步骤如下：未设置边框 添加图片边框 第18页/共27页5.5 5.5 客户端图像映射图客户端图像映射图是在插入的图像上面定义一个或几个区域，用来链接到其他的页面上，也称为热图。只有单击定义了热图的区域，才能链接到其他页面上。现在的热图一般应用在电子地图上，读者可以在实例中慢慢体会热图的用法。第19页/共27页5.5.1 5.5.1 创建热图其实，在Dreamweaver CS3中实现热图是一件很容易的事。现在介绍如何在网页上创建

9、热图，具体步骤如下：插入图片 设置热点 第20页/共27页5.5.1 5.5.1 创建热图按F12键预览网页，网页中没有变化。将光标移动到绿点上，效果如左图所示。单击绿点，面页跳转到热图链接的页面，如右图所示。热图预览 转到页面 第21页/共27页5.5.2 5.5.2 热图源码从上面的实例中可以查看，当设置热图完成后，源码会有怎样的变化，具体源码如下：第22页/共27页5.6 5.6 图片边距在前面设置图片边框时，图片与文字之间的距离很近。用户可以通过设置图片的边距来进行调节，从而使网页看起来更有条理。第23页/共27页5.6.1 5.6.1 设置图片边距设置图片边距的具体步骤如下：未设边距 已设边距 第24页/共27页5.6.2 5.6.2 图片边距源码设置图片边距的过程非常的简单，其实源码也是一样简单，以下是设置边距后的源码。第25页/共27页5.7 5.7 专家总结通过本章的学习，读者可以掌握如何在Dreamweaver中插入图片和修改图片的各种属性，以达到网页制作的要求。本章图片的对齐和大小的源码是常用的，要记住这些源码有点难度，只有结合使用和理解才能在制作过程运用自如。在下一章中将详细讲解超链接。第26页/共27页感谢您的观看！第27页/共27页