第3章 插入图片.pptVIP

东方 博宜 网页设计 ADOBE DREAMWEAVER 目 录 页面制作入门 页面制作提高 动感页面 页面实战 多媒体网页设计——HTML ADOBE DREAMWEAVER 东方 博宜 多媒体网页设计——HTML ADOBE DREAMWEAVER 第3章 将图像放入页面中 图像的基础知识 修改图像的属性 作为背景的图像 将图像放入页面中 图像的基础知识 图像是增加网页可视效果的最有力武器之一，在语言文字无法描述的地方，一些只可意会无法言传的表达中，也许设计者使用一张图片就可以完美传达设计者的讯息。 将图像放入页面中 图像的基础知识 网页中常用的图片格式 位图 （JPEG、PNG、GIF） 矢量图 （AI、CDF） 网页中常用的banner尺寸 468×60：全尺寸BANNER，应用最为广泛的广告条尺寸，用于页眉或页脚。 392×72：全尺寸带导航条BANNER，主要用于有较多图片展示的广告条，234×60：半尺寸BANNER，这种规格适用于框架或左右形式主页的广告链接。 125×125：方形按钮，这种规格适于表现照片效果的图像广告。 120×90：按钮类型，主要应用于产品演示或大型LOGO。 120×60：按钮类型，这种广告规格主要用于做LOGO使用。 88×31：小按钮，主要用于网页链接，或网站小型LOGO。 120×240：垂直BANNER。 将图像放入页面中 修改图像的属性 理解图像路径 在页面中放入图像，实际上是使用了服务器中的一张图片。设计者把所有的图片放在一台服务器中某个文件夹中，然后通过HTML语言告诉浏览器这些图片放在哪里，即图片的路径，这就好比是图片住在电脑中的门牌号码。当用户浏览页面的时候，浏览器会解析这张图片，通过获知的“门牌号码”找到这张图片。在页面文档中，使用img/标签将图像放入页面中，使用的格式如： img src=… alt=… / 其中SRC代表图片的路径地址；ALT代表图片的注释文本 将图像放入页面中 修改图像的属性 图片的对齐 如果一个页面中放入图片的时候，可以像编辑文本一样，令图片左对齐、右对齐或者居中对齐，那么我们只需要在 img / 标签中加入“align”属性就可以了。 pimg align=… //p p align=…img //p centerimg //center 将图像放入页面中 修改图像的属性 图片与文本的对齐方式 在编辑图像的时候，图像不同于文本的意义在于，图像都是一个个分开的整体。而编辑图像时，如果设计者想在图片的旁边放入文本内容，就需要考虑如何处理文本和图像对齐方式呢。在HTML文档中，分为4种： 使图像的顶部和同一行的文本对齐，使用代码如， img style=“vertical-align：text-top/ 使图像的中部和同一行的文本对齐，使用代码如， img style=“vertical-align：middle/ 使图像的底部和同一行文本对齐，使用代码如， img style=“vertical-align：text-bottom/ 使图像的底部和文本的基线对齐，使用代码如， img style=“vertical-align：baseline/ 将图像放入页面中 修改图像的属性 控制图像与文本的距离 编辑页面时候，除了可以控制图像与文本的编排方式外，甚至可以进一步的调整图像和文本的距离。当设置好图片和文本的距离后，可利用“hspace”和“vspace”属性来分别控制图像四周与其他内容间隔的水平方向的宽度、或者是垂直方向的高度。 将图像放入页面中 修改图像的属性 控制图像大小与边框 在HTML文档中有一种可以编辑图像的大小的方式，在img/标签中添加“宽”和“高”的属性： img src=… width=… height=… 编辑图像时，有一种使用频度很高的修饰图片的方式。给图像添加边框，虽然这是对图片小小的修饰，但是带来的效果是相当突出的。在img/标签中添加“border”属性和“bordercolor”属性。 img src=… border=…style=“border-color : ….” 将图像放入页面中 修改图像的属性 独树一帜的水平线 在设计页面的时候，经常需要在网页中插入一条水平线来隔开文本，或者是为了起到美化页面的作用，水平线是设计页面中的一个特殊的