|
贴上心爱的片片
图是作品的心灵窗口，音乐是作品的灵魂。网页设计中如果没有图片、音乐，再好的文章也会显得苍白无力，今天这一节与初学的朋友一起探讨如何利用html标签控制贴图，希望对朋友们能有所帮助。学会了，请朋友们也把好的图片传到我们论坛，愿我们能快乐同享。 首先是关于图片上传的问题。我们用数码相机拍摄的相片，或者用扫描仪获取的图片，只是存在自己的电脑或磁盘里。如果想把自己的作品在网络上表现出来，让朋友们共享，那就需要取得一个绝对地址。取得绝对地址的办法，就是将你的图片经过一定的处理，上传到网站的相册上。这个处理主要是调整图片的大小，因为网站的资源有源，太大的图像文件占用空间太多，许多网站的相册便作出了一定的限制，如西陆相册每张图片的大小就不能超过200K，而且相册的容量也比较小；新浪博客的相册每张图片的大小不能超过600K，相册的容量很大。如果你是某个网站的注册会员，一般都免费配有一个相册，只是你开通不开通的问题。由此，我们在上传图片的时候，一定要针对你所使用的网站来进行调整图片的大小，否则图片上传不了，或者无法显示。
其次是关于图片的控制问题。图片成功上传到网上相册，就会自动生成绝对地址。有了绝对地址，我们就可以使用html标签对图片进行控制。具体操作步骤是:
打开自己的相册或者某网站，找到您喜欢的图片，将鼠标光标箭头移到图片上，单击鼠标右健，即出现右键菜单,再点击该菜单中的属性，弹出属性对话框，框中就是该图的真实的IP地址，它是图片最原始的IP地址!拖动选中并将其地址进行复制。打开后台管理，进入发表新文章或修改文章界面，点击工具栏中"HTML"图标，就会出现HTML编辑器的界面，找到您要加图片的位置，然后在里面输入以下图片标签，加入图片地址：
<img src="图片地址" mce_src="图片地址">。注：尽可能在代码中的<div>...</div>或<tbody>...</tbody>的中间插入标签，标签中的图片地址四字处请您将您前面复制来的地址代换即可。
例如图片地址为
http://album.sina.com.cn/pic_3/494fa4da02000fqr>
标签应代为：
<img src="http://album.sina.com.cn/pic_3/494fa4da02000fqr" mce_src="http://album.sina.com.cn/pic_3/494fa4da02000fqr">
当然也可以在发帖框里直接操作：打开相册或某网站，当你看到喜欢的图片想貼时，将鼠标光标箭头移到你准备要链接的图片上，然后单击鼠标右健，即出现右键菜单，再点击里面的复制按钮，此后打开后台管理，进入发表新文章或修改文章界面，在您准备插入图的地方点击右键，然后贴上您复制的图就行。插入后您可对图片大小进行更改，变动时点击选中图片，会在上、下、左、右出现八个点，点击待鼠标光标变成双箭头时您只须拖动即可。如果要对图片位置进行操作，只须点击选中图片，然后点击工作栏中的居中等按钮即可。
再回到用图片标签控制的方式。如果想让图片居中，在标签前面加入代码：<center>,完整的标签便成了：
<center><img src="图片地址" mce_src="图片地址">
图片添加并且居中代码是：
<center><img src=http://album.sina.com.cn/pic_3/494fa4da02000fqr>
以下是效果：
如果想让图片居左或居右，只在标签的前面加入代码：<left><right>即可，或者作为段落标签<P>的属性加入，效果是一样的。
最后简单说一下关于图片的特效问题。
1、晕边图片：
晕边图片的制作是在前者图片已存在的基础上进行的。制作时除了利用部分软件外，朋友们仍可利用HTML代码进行制作：
<P align=center>
<TABLE border=0>
<TBODY>
<TR>
<TD style="FILTER: Alpha(opacity=100,style=2)" width=480 background=http://album.sina.com.cn/pic_3/494fa4da02000fqr height=380>
<P><B><EMBED style="WIDTH: 447px; HEIGHT: 356px" align=right src=http://imgfree.21cn.com/free/flash/123.swf width=447 height=356 type=application/octet-stream wmode="transparent" quality="high"></EMBED></B></P></TD></TR></TBODY></TABLE>
<CENTER></CENTER></FONT></STRONG></FONT></FONT></SPAN>
<P class=MsoBodyTextIndent2 style="MARGIN: 0cm 0cm 0pt; TEXT-INDENT: 36pt; mso-char-indent-count: 2.0; mso-char-indent-size: 18.0pt"> </P>
该代码添加方法与上面相同，注：在代码使用过程中，请朋友们只须将代码中的图片地址换成您需要的图片地址就行。图片地址的起始格式是：HTTP：//WWW。***。jpg.
2、给图片添加文字 ：
代码：
<TABLE style="WIDTH: 704px; HEIGHT: 210px" cellSpacing=0 cellPadding=0 background=http://www.glassbuy.com.cn/data/offer/200411/03/1099467058.jpg>
<TBODY>
<TR>
<TD align=middle>
<P align=center><FONT style="FONT-SIZE: 40pt; FILTER: shadow(color=black,direction=180); WIDTH: 617px; COLOR: red; LINE-HEIGHT: 150%; FONT-FAMILY: 华文新魏; HEIGHT: 457px"></P>
<P align=center><B></B> </P>
<P align=center><B></B> </P>
<P align=center><FONT color=#ff1493 size=5><B>幽梦帆影<BR></B><B><FONT size=6>欢迎您的到来</FONT></B></FONT></P></FONT></TD></TR></TBODY></TABLE></CENTER></CENTER>
效果示例如下：
需要时，请朋友们将其中的字与图片更换成您自己的就行，注，图片的大小等同前一样，您可以自己随意变动。
3、给图片添加动感效果
代码如下：
<DIV align=center>
<TABLE style="WIDTH: 580px; HEIGHT: 436px" borderColor=#000000 height=436 cellPadding=3 width=580 background=http://photo.xilu.com/pic.aspx?id=200512272318671 border=5>
<TBODY>
<TR>
<TD width=0 colSpan=2 height=0 rowSpan=2><EMBED align=right src=http://lain1978.com/collection/flash/rain.swf width=450 height=400 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED><EMBED style="WIDTH: 548px; HEIGHT: 414px" align=right src=http://lain1978.com/collection/flash/rain.swf width=548 height=414 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> </TD></TR></TBODY></TABLE></DIV>
显示效果如下：
与前面一样，朋友们仍然可以将其中的图片地址、FLASH动画地址换成您喜欢的就行，图片地址您可以在心灵家园及百度网中去搜索，插入的FLASH地址必须是透明的，这些素材很多网站的课件制作栏目中都能找到，只要你喜欢了就尽管用。
如：将上面的图片地址换成：
将里面的FLASH地址换成：
http://imgfree.21cn.com/free/flash/6.swf>
则以上代码为：
<DIV align=center>
<TABLE style="WIDTH: 568px; HEIGHT: 382px" borderColor=#000000 height=382 cellPadding=3 width=568 background=http://photo.xilu.com/pic.aspx?id=200512272318671 border=5>
<TBODY>
<TR>
<TD width=0 colSpan=2 height=0 rowSpan=2><EMBED style="WIDTH: 402px; HEIGHT: 400px" align=right src=http://imgfree.21cn.com/free/flash/6.swf width=402 height=400 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED><EMBED style="WIDTH: 548px; HEIGHT: 414px" align=right src=http://imgfree.21cn.com/free/flash/6.swf width=548 height=414 type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED> </TD></TR></TBODY></TABLE></DIV>
示例效果如下：
送上一曲音乐，祝福大家！
| 
