Dreamweaver网页制作基础教程任务二利用图文混排制作漂亮网页知识讲稿.pptVIP

王焕杰 电话 邮箱:cnsyjsj@163.com 沈阳市信息工程学校 项目二 制作学校概况 任务二 利用图文混排制作漂亮网页 任务描述 为构建好的校园网添加图片，以实现页面图片的美化。 知识准备 1．使用图像 2．图像常用格式：*.gif、*.jpg、*.png 3．设置网页背景 4．插入和设置图像 5．插入图像和占位符 任务实施 步骤1： 在Dreamweaver中打开相关网页，“项目2/fengguang.html”，如图2.2.1所示。 图2.2.1 设计视图1 步骤2：将光标定位在网页的最上端，在设计视图底部选择td标签，然后选择属性面板上的“背景选择”按钮，如图2.2.2所示。 图2.2.2 属性面板 背景选择 在弹出的对话框中选择要插入的图片“项目2/images/banner.jpg”，然后单击“确定”按钮，效果如图2.2.3所示。 图2.2.3 设计视图2 步骤3：同样设置左侧分类导航“栏目导航”、“点击排行”的背景为“项目2/ images/list_r2_ c2.jpg”，设置后的分类导航如图2.2.4所示。 设置底部单元格的背景为“项目2/images/index_r20_c2.jpg”，设置的效果如图2.2.5所示。 图2.2.5 网页底部效果 图2.2.4 导航工具栏 选择插入的图片，在属性面板上设置图片的宽度与高度，对齐方式为居中对齐，如图2.2.10所示。 居中对齐 最终效果如图2.2.11 所示。 图2.2.11 知识拓展 图片格式 网页中常用的图片格式主要有*.jpg、*.gif、*.png、*.bmp等几种。 *.jpg/*.jpeg格式是目前Internet中很受欢迎的图像格式，其特点是展现的色彩丰富，可支持多达大约16*106种颜色，它能展现丰富生动的图像，还可以选择不同的压缩比。压缩方式是以损失图像质量为代价的，压缩比越高，图像质量损失越大，图像文件也就越小。 *.bmp格式是目前流行的Windows支持的图片格式，一般情况下，同一图像的*.bmp格式的大小是*.jpeg格式的5～10倍。而*.gif格式最多只能是256色，因此载入256色以上图像的*.jpeg格式成为Internet中最受欢迎的图像格式。当网页中需要载入一个较大的*.gif或*.jpeg图像文件时，装载速度会很慢。为改善网页的视觉效果，可以在载入时设置隔行扫描。隔行扫描在显示图像过程中，开始看起来非常模糊，之后细节才逐渐添加上去，直到图像完全显示出来。 *.gif格式的特点是压缩比高，磁盘空间占用较少，所以这种图像格式迅速得到了广泛应用。*.gif分两种版本：*.gif87a（只是简单地用来存储单幅静止图像），GIF89a（可以同时存储若干幅静止图像，进而形成连续的动画，使之成为支持2D动画的格式）。*.gif可指定透明区域，使图像具有非同一般的显示效果，这更使*.gif风光十足。目前Internet上大量采用的彩色动画文件多为这种格式的文件。 *.gif图像格式还增加了渐显方式，在图像传输过程中，用户可以先看到图像的大致轮廓，然后随着传输过程的继续而逐步看清图像中的细节部分，从而适应了用户“从朦胧到清楚”的观赏心理。由于8位存储格式的限制，使其不能存储超过256色的图像，最适合在图片颜色总数少于256色时使用。*.gif格式体积小，而且清晰度非常高。 *.png 是一种可携式网络图像格式。*.png一开始便结合*.gif及*.jpg两家之长，打算一举取代这两种格式。并且大部分绘图软件和浏览器都支持*.png格式的图像浏览。IE浏览器从4.0版本开始支持*.png格式的图像浏览。 特点1：兼有*.gif和*.jpg的色彩模式 *.gif格式的图像采用了256色以下的index color色彩模式，*.jpg采用的是24位真彩模式。*.png不仅能存储256色以下的index color图像，还能储存24位真彩图像，甚至最高可存储48位超强色彩图像。 特点2：*.png能把图像文件压缩到极限 以利于网络传输，但又能保留所有与图像品质有关的信息。如果图像是以文字、形状及线条为主，那么，*.png会用类似*.gif的压缩方法得到较好的压缩率，而且不破坏原始图像的任何细节。而对于相片品质一类的压缩，*.png则采用类似*.jpg的压缩演算法。*.png不同于*.jpg的地方在于，它处理相片类图像时采用非破坏性压缩，图像压缩后的质量与压缩前质量一致，没有一点失真。 * *