欢迎来到天天文库
浏览记录
ID：52943321
大小：4.99 MB
页数：37页
时间：2020-04-04
《图像在网页中的应用.pptx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。
1、网页设计案例教程案例说明根据实现方式的不同，网页中的图像可分为两大类，一类是插入图像，它是用HTML代码实现的；另一类是背景图像，一般是通过设置CSS样式实现的。在本案例中，将讲解这两类图像的设置方法。另外，在本案例的“支撑知识点”部分，将只讲解第1类图像的设置要点；在案例二中再具体讲解设置网页元素背景图像的相关知识。案例步骤构建HTML结构1.步骤01将本书附赠的“素材与实例第4章”文件夹拷贝至本地磁盘创建的MyWeb站点的根目录中。步骤02打开“文件”面板，在刚拷贝的文件夹“第4章task1”中新建一个名为index-lx.html的网页文档，并在文
2、档编辑窗口中打开。步骤03打开“task1”文件夹中名为“文字”的文本文件，将文字内容复制粘贴到新建文档的设计视图中，然后依据效果图，查看是否已分好段落，如果没有，在设计视图中按【Enter】键划分段落，并清除空行。案例步骤案例步骤步骤04添加标题。将“做人做事的艺术”文字用一号标题标签对
3、的图像将其插入。案例步骤步骤07从效果图可知，文字及图像整体在页面中有一定的宽度并需要居中。为此，在设计视图中选中所有内容，单击“插入”面板“常用”类别中的“Div”按钮，插入一个id名为all的
4、例步骤步骤01指定在页面中引入CSS样式的方法。本例使用内嵌样式，在
5、*/font-size:14px;/*设置整体页面文字大小*/}案例步骤步骤03设置id为all的
6、素默认是抵满整行），然后为其设置外边距，即margin:0pxauto;，表示设置块边距上下为0，左右自动，从而实现居中显示。案例步骤步骤04设置页面标题样式。h1{font-size:36px;/*设置标题文字大小*/font-family:"黑体";/*设置字体*/text-align:center;/*标题文字水平居中*/color:#ff3300;}/*设置文字颜色*/案例步骤步骤05设置在
7、果，图像位于左侧*/margin-right:10px;/*设置图像右侧同文字的距离为10px*/padding:8px;/*设置图像与边框之间的距离为8px*/}要实现文字环绕图像的效果，只需要在图像上设置浮动样式属性float，要左环绕还是右环绕由float属性的值left和right决定。案例步骤步骤06设置
8、【Ctrl+S】组合键保存网页，然后按【F12】键在
此文档下载收益归作者所有
