第4章 图像在网页中的应用.pptxVIP

网页设计案例教程案例说明 根据实现方式的不同，网页中的图像可分为两大类，一类是插入图像，它是用HTML代码实现的；另一类是背景图像，一般是通过设置CSS样式实现的。在本案例中，将讲解这两类图像的设置方法。另外，在本案例的“支撑知识点”部分，将只讲解第1类图像的设置要点；在案例二中再具体讲解设置网页元素背景图像的相关知识。构建HTML结构案例步骤1.步骤 01步骤 02步骤 03将本书附赠的“素材与实例\第4章”文件夹拷贝至本地磁盘创建的My Web站点的根目录中。打开“文件”面板，在刚拷贝的文件夹“第4章\task1”中新建一个名为index-lx.html的网页文档，并在文档编辑窗口中打开。打开“task1”文件夹中名为“文字”的文本文件，将文字内容复制粘贴到新建文档的设计视图中，然后依据效果图，查看是否已分好段落，如果没有，在设计视图中按【Enter】键划分段落，并清除空行。案例步骤案例步骤添加标题。将“做人做事的艺术”文字用一号标题标签对h1/h1括起来。添加水平线。将插入点置于标题右侧，选择“插入”“水平线”菜单，在刚添加的标题下方添加水平线hr。步骤 06步骤 05步骤 04将插入点置于正文第1行文字左侧，单击“插入”面板“常用”类别中的“图像：图像”按钮，在弹出的对话框中选择素材中名称为“1.jpg”的图像将其插入。案例步骤从效果图可知，文字及图像整体在页面中有一定的宽度并需要居中。为此，在设计视图中选中所有内容，单击“插入”面板“常用”类别中的“Div”按钮，插入一个id名为all的div标签，所选内容将自动放入该块元素中。步骤 07表4-1 涉及的HTML标签标签描述标签描述body/body网页主体标签hr水平线标签h1/h1一号标题标签p/p段落标签div id=all/divid名为all的div标签img src=images/1.jpgwidth=400 height=300图像标签构建CSS样式案例步骤2.步骤 01指定在页面中引入CSS样式的方法。本例使用内嵌样式，在head/head标签对之间输入如下代码。style type=text/css!----/style案例步骤整体页面设置。在步骤1中输入的style type=text/css/style标签对之间输入如下代码。步骤 02body{ padding:0px; /*消除整体页面的默认内边距*/ margin:0px; /*消除整体页面的默认外边距*/ background-image:url(images/bg111.gif); /*为整体页面添加背景图像*/ font-size:14px; /*设置整体页面文字大小*/ }案例步骤设置id为all的div块元素样式。在步骤2输入的代码下方输入如下代码。#all{ width:800px; /*设置块元素宽度为800像素*/ margin:0px auto; /*设置块元素水平居中*/ border:6px #000 double; /*设置块元素边框*/ padding:10px; /*设置块中的内容同块边框之间的距离*/ background-color:#FC9; /*设置块元素的背景颜色*/ }步骤 03 块元素的特性是独占一行，如果想让整个块元素居于页面中间，就需要确定块的宽度（块元素默认是抵满整行），然后为其设置外边距，即margin:0px auto;，表示设置块边距上下为0，左右自动，从而实现居中显示。案例步骤设置页面标题样式。步骤 04h1{ font-size:36px; /*设置标题文字大小*/ font-family:黑体; /*设置字体*/ text-align:center; /*标题文字水平居中*/ color:#ff3300;} /*设置文字颜色*/案例步骤设置在div块元素内插入的图像样式。#all img{ border:2px #ff3300 solid; /*为图像添加边框*/ float: lef