仓酷云

标题: html5教程之网页中图片的设置触及的三个成绩 [打印本页]

作者: 小魔女 时间: 2015-1-15 23:17
标题: html5教程之网页中图片的设置触及的三个成绩
HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展.网页制造poluoluo文章简介：设置网站的图片触及到三个成绩。
设置网站的图片触及到三个成绩，分离是：
1.网页中的图片应当如何设置？
在使用XHTML+CSS制造页面的时分，网页上的图片能够经由过程二种体例在页面中出现：
一.利用图片标签，间接写在XHTML文档内：<imgsrc=”1.jpg”/>
二.使用CSS将图片做为某个元素的背景，好比设置div元素：div{background:url(1.jpg);}
这二种体例不克不及搅浑，由于它们有实质上的区分，假如设置毛病，有大概会影响页面的可用性！
它们的实质区分和设置准绳：
——但凡属于网页内容的图片，都用图片标签<img/>间接写进XHTML文档中；
——但凡不属于网页内容的图片，一概接纳CSS举行背景图片设置，它们起到网站粉饰、丑化的感化，属于网站体现；
我们只需能分清甚么图片是网页内容就好了，由于除网页内容图片，其他的图片一概用CSS设置成元素的背景。
剖析上面这张图，来找找哪些是网页内容图片：

上图中，标注为“<img/>”的是页面内容，能够间接写成XHTML代码，
其他标注为“background-image”的都应当做为背景，设置成元素的CSS款式。
2.怎样设置背景？
设置div元素背景的很复杂：div{background:red;}
设置一个既有背景色彩，又有背景图片的div才是我们存眷的，最终效果以下所示：

剖析这个最终效果，我们能够得知以下信息：

在制造的时分，我们能够先把突变部分切成1像素宽、68像素高的图片：

把两头这根微小的图片保留为“bg.gif”，设置div款式以下：
div{
width:100px;height:100px;border:1pxsolid#626262;
background:url(bg.gif);
}
失掉上面的了局：
再把图片设置成程度偏向平展：
div{
width:100px;height:100px;border:1pxsolid#626262;
background:url(bg.gif)repeat-x;
}
则背景图片只大概沿程度偏向平展，不会再折行平展了：
最初，增加上背景色彩值：
div{
width:100px;height:100px;border:1pxsolid#626262;
background:#f5f5f5url(bg.gif)repeat-x;
}
div背景制造完成：
3.页面上的小图标怎样处置？
最终效果以下所示：

依据下面的剖析，我们能够晓得这个最终效果的三张小图片，都是做为元素的背景来设置。
起首用PS切一张小图片，在切图的时分，注重只管切成背景通明的GIF图片，不要把背景色彩也切上去，万一背景色彩产生变更，切上去的这张图片仍旧可使用：

然后入手下手写布局：
<ul>
<li><ahref="#">页面</a></li>
<li><ahref="#">批评</a></li>
<li><ahref="#">表面</a></li>
</ul>
写款式：
ul{padding-left:0;margin-left:0;width:120px;border:1pxsolid#e3e3e3;border-bottom:0;}
li{list-style:none;}
a{display:block;height:27px;line-height:27px;border-top:1pxsolid#fff;border-bottom:1pxsolid#e3e3e3;background:#f1f1f1;padding-left:26px;text-decoration:none;color:#21759b;font-size:12px;}
a:hover{color:#d54e21;text-decoration:underline;}
效果以下：

入手下手增加小图片。要完成三个li内图片都纷歧样，必要在a标签内增加三个分歧的款式名：
<ul>
<li><aclass="ico1"href="#">页面</a></li>
<li><aclass="ico2"href="#">批评</a></li>
<li><aclass="ico3"href="#">表面</a></li>
</ul>
筹办好要设置的图片：

注重：把3个小图片切成一张GIF图，然后使用背景图片的定位来制造。
完全的CSS代码：
ul{width:120px;border:1pxsolid#e3e3e3;border-bottom:0;padding-left:0;margin-left:0;}
li{list-style:none;}
a{display:block;height:27px;line-height:27px;border-top:1pxsolid#fff;border-bottom:1pxsolid#e3e3e3;padding-left:26px;text-decoration:none;color:#21759b;font-size:12px;}
a:hover{color:#d54e21;text-decoration:underline;}
.ico1{background:#f1f1f1url(ico.gif)no-repeat5px6px;}
.ico2{background:#f1f1f1url(ico.gif)no-repeat5px-24px;}
.ico3{background:#f1f1f1url(ico.gif)no-repeat5px-52px;}
这一句：“background:#f1f1f1url(ico.gif)no-repeat5px6px;”
中文注释：背景：背景色彩图片链接地点图片不反复图片程度偏向图片垂直偏向；
效果下载：>>点此下载
</p>
Resig在2008年在其博客中介绍过HTML5的data-属性，现如今HTML5在如火如荼地推广，似乎国内的技术有些延迟，这篇博文可以在这里找到。

作者: 小魔女 时间: 2015-1-17 21:41
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

作者: 兰色精灵 时间: 2015-1-24 15:03
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

作者: 乐观 时间: 2015-2-1 19:04
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 仓酷云 时间: 2015-2-7 15:15
学Dreamweaver技术的过程其实是一个增加信心的过程。

作者: 小女巫 时间: 2015-2-22 20:10
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

作者: 冷月葬花魂 时间: 2015-3-14 11:59
直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

作者: 活着的死人 时间: 2015-3-21 08:00
不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

欢迎光临仓酷云 (http://ckuyun.com/)