1、3.3.3 设置图像显示尺寸l 如果需要将图像按照一个固定的尺寸显示,就需要使用图像标签的width(宽度)、height(高度)属性。l 注意:控制图像显示尺寸的width、height属性主要是用来微调图像尺寸的,如果图像尺寸的原始尺寸与显示尺寸差距过大,应当使用图像处理工具将图像处理成接近显示尺寸,然后再用width、height属性精确控制实现尺寸。这样做可以有效防止图像失真,或图像过大。l 设置图像尺寸的方法如下:其中,宽度、高度的属性值有两种表示方法:固定值法(如像素)和百分比法。使用像素法时,属性值可以是任意像素值,但必须在显示器可显示的像素范围内;使用百分比法时,是按照图像显示
2、容器(如浏览器窗口、表格单元等)尺寸的百分比来计算的,显示的图像随着容器显示尺寸的变化而变化,属性值通常位于1%100%之间。图像尺寸设置图像尺寸设置 设置图像尺寸设置图像尺寸 font color=black face=size=5 这是云之雷科技有限公司的这是云之雷科技有限公司的LogoLogo =sdlogo.png width=80 height=80/!-=sdlogo.png width=25%height=25%/!-设置两个图像的尺寸:一个是按照固定的像素值设定的,另一个是按照百分比设置的,我们观察两种方法的不同。3.3.4 设置图像对齐方式l 图像的对齐方式是相对于图像所在容
3、器中的相对位置来说的,比如段落、表格等。l 设置图像相对于周围元素的对齐方式,需要使用图像标签的align属性。设置方法为图像属性“align”的属性值有5个,分别是:left(把图像对齐到左边)、right(把图像对齐到右边)、middle(把图像与中央对齐)、top(把图像与顶部对齐)、bottom(把图像与底部对齐)注意:通常元素的align属性只有left、middle、right属性,没有top、bottom属性。图像上对齐设置 上对齐 传统商务的交易过程中的实务操作由交易前的准备、贸易磋商、合同与执行、支付与清算等环节组成。其中交易前的准备就是交易双方都了解有关产品或服务的供需信息
4、后,就开始进入具体的交易协商过程,交易协商实际上是交易双方进行口头协商或书面单据的传递过程。l设置图像左对齐、右对齐、下对齐、中央对齐的方法相同,图像标签的align属性值分别为“left”“right”“bottom”“middle”。l在HTML5中,标签不再支持“align”属性,采用“align”属性设置图像对齐方式可能会出现不正常的现象。3.3.5 设置图像替换文本l有时因为图像引用错误、图像丢失、浏览器限制等原因,浏览器端无法正常显示图像。如果无法显示图像,浏览器将显示替代文本。l使用替代文本的好处是:即时无法看到图像,也能知道图像的内容是什么。替代文本可以是任何文本内容,但需要言
5、简意赅地表达图片的内容或意义。l设置图像替换文本需要使用图像标签的alt属性,设置方法如下:图像替换文本图像替换文本 设置图像替换文本设置图像替换文本 /3.3.6 设置网页背景图像与背景颜色1设置背景图像l漂亮的网页,通常采用图像作背景,烘托网站主题。l设置网页背景图像需要使用文档主体标签及其“background”属性,设置方法为 网页背景图像示例网页背景图像示例 2设置平铺背景图像l设置平铺背景图像的方法与设置背景图像的方法完全相同,关键是准备一个图像尺寸小、适合平铺的图像。网页平铺背景图像示例网页平铺背景图像示例 3设置背景颜色l设置网页背景颜色,需要使用文档主体标签及其“bgcolo
6、r”属性,设置方法为其中,的“bgcolor”属性值有颜色名称(如“red”“blue”)、十六进制颜色值(如“#FFFF33”“FF66CC”等)和rgb代码(如“rgb(255,0,0)”“rgb(0,255,0)”等)。本书主要以十六进制颜色值为例进行讲解。网页背景颜色示例网页背景颜色示例 3.3.7 制作图文网页综合范例l项目需求:云之雷科技有限公司是一家新兴的高新技术企业,主要生产台式机、笔记本电脑两大系列产品。现在公司准备开发一个网站做产品宣传。网页效果如图所示。l网页设计分析:网页需要展示企业Logo,介绍笔记本电脑、台式机等系列产品,要求图文并茂。云之雷科技云之雷科技 logo”/font color=blue face=size=12云之雷科技有限公司云之雷科技有限公司 font color=black face=size=4笔记本电脑系列笔记本电脑系列 /font color=black face=size=4台式机系列台式机系列 /font color=black face=size=3=云之雷科技有限公司云之雷科技有限公司=