军事社区文学社区游戏中心西陆现代城论坛申请论坛导航西陆空间帮助中心
[楼主]  [10楼]  作者:dream_梦儿  发表时间: 2007/01/20 13:27
[加为好友][发送消息][个人空间]
回复 修改 来源 删除

贴上心爱的片片(仅供本坛朋友参考,勿推荐)…… 蓝天是我故乡

贴上心爱的片片

    图是作品的心灵窗口，音乐是作品的灵魂。网页设计中如果没有图片、音乐，再好的文章也会显得苍白无力，今天这一节与初学的朋友一起探讨如何利用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">&nbsp;&nbsp; </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>&nbsp;</P>
<P align=center><B></B>&nbsp;</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地址换成：

    则以上代码为：

<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>

    示例效果如下：

    送上一曲音乐，祝福大家！



※※※※※※
蓝天的博客:http://blog.sina.com.cn/u/1229956314
一些常用的代码
dream_梦儿103112-13 21:32
  
雪中送碳[2楼]
远方雪儿 6101-07 19:34
  
呵呵[3楼]
dream_梦儿 4701-08 00:11
  
re:呵呵[4楼]
远方雪儿 3901-08 14:53
  
关于正确使用"系统还原"问题[5楼]
dream_梦儿 6001-12 22:00
  
图片[6楼]
dream_梦儿 4401-13 14:40
  
re:图片[7楼]
dream_梦儿 6101-16 20:17
  
。 <PA[8楼]
dream_梦儿 4401-16 20:35
  
认识html[9楼]
dream_梦儿 7401-18 23:29
  
贴上心爱的片片(仅供本坛朋友参考,勿推荐)…… 蓝天是我故乡[10楼]
dream_梦儿 4401-20 13:27
  
紫色[11楼]
dream_梦儿 6601-20 13:34
  
巧用表格标签[12楼]
dream_梦儿 3901-21 22:18
  
绿豆色[13楼]
dream_梦儿 5301-25 16:13
  
星空[14楼]
dream_梦儿 5302-02 10:18
  
蓝色[15楼]
dream_梦儿 5802-02 18:21
  
边框里 移动的字[16楼]
dream_梦儿 5602-04 21:47
  
带底色的一层边框[17楼]
dream_梦儿 10802-04 21:48
  
re:带底色的一层边框[18楼]
dream_梦儿 8502-04 21:54
  
试做(三)[19楼]
dream_梦儿 5602-04 22:02
  
试做(二)[20楼]
dream_梦儿 5502-04 22:10
  
移动的图片[21楼]
dream_梦儿 9502-04 23:05
  
re:关于正确使用"系统还原"问题[22楼]
dream_梦儿 6002-05 12:45
  
雪花[23楼]
dream_梦儿 5602-05 12:46
  
美丽的冰雪世界[24楼]
dream_梦儿 6002-05 12:51
  
【幽梦帆影】帖子搜索 作者: 一剑倚天寒 发表时间: 2006-10-30 13:39:04 点击:30次[25楼]
dream_梦儿 4902-14 14:01
  
简洁背景套装[26楼]
dream_梦儿 5502-15 14:42
  
简洁背景套装 2[27楼]
dream_梦儿 4102-15 14:45
  
背景3[28楼]
dream_梦儿 4002-15 14:48
  
水草背景[29楼]
dream_梦儿 4102-20 11:18
  
回复：lvse[30楼]
dream_梦儿 4102-26 19:35
  
紫色[31楼]
dream_梦儿 4503-07 10:55
  
动态莲花[32楼]
dream_梦儿 5303-07 13:27
  
日记本[33楼]
dream_梦儿 7303-07 13:30
  
回复：生日[34楼]
dream_梦儿 4703-17 13:02
  
图上写字简介 (1[35楼]
dream_梦儿 7103-22 19:05
  
奇妙的代码功能------图片合成[36楼]
dream_梦儿 9703-26 13:16
  
一分为二[37楼]
dream_梦儿 5103-26 13:19
  
图片的上行与下行.------合二为一[38楼]
dream_梦儿 7803-26 13:20
  
奇妙的代码功效-----图片移动(二)[39楼]
dream_梦儿 9303-26 13:22
  
奇妙的代码功能——图片移动（一）.[40楼]
dream_梦儿 5203-26 13:28
  
图上写字简介(二)　变量[41楼]
dream_梦儿 4903-26 13:30
  
图上写字简介 (一)[42楼]
dream_梦儿 7103-26 13:33
  
图片的倒影效果、光效果、百叶窗效果 、图片合成、一分为二、图片移动[43楼]
dream_梦儿 7104-02 23:40
  
几种适用的播放器[44楼]
dream_梦儿 4304-02 23:46
  
竖行排版代码[45楼]
dream_梦儿 8704-21 10:35
  
手工制作音画贴简易教程[46楼]
dream_梦儿 6204-23 12:38
  
春天花会开[47楼]
dream_梦儿 6704-25 23:09
  
大爱无声 [48楼]
dream_梦儿 4707-01 19:57
  
跳舞的小姑娘[49楼]
dream_梦儿 4407-15 22:39
  
绿色[50楼]
dream_梦儿 6107-18 19:11
  
枫叶[51楼]
dream_梦儿 4707-29 09:33
  
边框素材[52楼]
幽梦转帖 6207-30 17:23
  
图文制作[53楼]
幽梦转帖 4407-30 17:25
  
制作背景帖子的方法[54楼]
幽梦转帖 9907-30 17:26
  
飘花[55楼]
幽梦转帖 7707-30 17:29
  
回复：[56楼]
幽梦转帖 4207-30 17:37
  
天上飘绿叶[57楼]
幽梦转帖 10507-30 17:40
  
绿色[58楼]
dream_梦儿 5912-13 21:20
  
荷花边框[59楼]
dream_梦儿 4512-13 21:32

精彩推荐>>

  简捷回复 [点此进入编辑器回帖页]  文明上网 理性发言
签  名: 一 二 三 无
作  者:
密  码:
游客来访 
注册用户提 交
西陆网(www.xilu.com )版权所有 点击拥有西陆免费论坛  联系西陆小精灵

0.092321872711182