商务网页第6课课件.ppt

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=云之雷科技有限公司云之雷科技有限公司=