以文本方式查看主题

-  动网先锋论坛  (http://2007.hnzqw.com/index.asp)
--  都是菜鸟  (http://2007.hnzqw.com/list.asp?boardid=31)
----  [推荐] 在表格中添加文字和图片  (http://2007.hnzqw.com/dispbbs.asp?boardid=31&id=25546)

--  作者:日落部族
--  发布时间:2007/4/25 13:10:49

--  [推荐] 在表格中添加文字和图片

(第二课 )在表格中添加文字和图片

二、在表格中插入图片

插入图片方法有三种:

1、直接插入法。将鼠标放在你选好的图片上,点右键,复制然后粘贴到你的表格中,看效果:

粘贴图片



2、用编辑器插入法

选择好图片,将鼠标放在图片中点右键,点属性,复制图片地址;在编辑器里点开“插入图片”图标,将你刚复制过的地址粘贴到信息栏里,按确定,看是下面的格式。

[*IMG]http://class.znrsw.com/UploadFile/2005-10/2005101120412195250.jpg[/IMG*]


[*IMG]http://www.yyly8.com/yy/10/sucai/beijing/menghuanhua/7.jpg[/IMG*]

你做时将*字去掉

看效果



3、在html格式下插入图片代码及图片地址

帖图基本格式如下:

<*IMG src="图片连接URL地址"><*IMG> 称图形标记,主要用来插入图形标记。

方法:在表格中输入“内容”两字,点开html将你编辑好的代码及图片地址粘贴上,

看代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD>内容</TD></TR></TBODY></TABLE>


内容

我们现在添加代码和图片,你做时去掉*符号

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD><*IMG src=http://www.yyly8.com/yy/10/sucai/beijing/menghuanhua/7.jpg><*IMG></TD></TR></TBODY></TABLE>



居中很重要!鼠标点图片按居中键

图片

<*IMG> 的一般参数设定:


  例如 <*img src="logo.gif" width=100 height=100 hspace=5 vspace=5 border=2 align="top" alt="Logo of PenPals Garden" lowsrc="pre_logo.gif">


src="logo.gif"
图片来源,接受 .gif, .jpg 及 .png 格式,

width=100 height=100
设定图片大小,此宽度及高度一般采用 pixels 作单位。通常只设为图片的真实 大小,以免失真,若需要改图片大小最好使用图像编辑工具。(改变大小的宽和高与原图的宽和高要成正比例,图片最好是改小不改大,以免失真。)


hspace=5 vspace=5
设定图片边沿空白,以免文字或其它图片贴近。hspace 是设定图片左右的空间, 是设定图片上下的空间,高度采用 pixels 作单位。


border=2
图片边框厚度


align="top"
调整图片旁边文字的位置,你可以控制文字出现在图片的偏上方、中间、底部、 左右等,可选值:top, middle, bottom, left, right,内定为 botom。Netscape 还支持 texttop, baseline, absmiddle, absbottom,
texttop 表示图片和文字依顶线对齐,
baseline 表示图片对齐到目前文字行底线值,
absmiddle 表示图片对齐到目前文字行绝对中央,
absbottom 表示图片对齐到目前文字行绝对底部,(绝对底部是指它考虑到比如 y 、g、q 等字的下边)。


alt="Logo of PenPal Garden"
这是用以描述该图形的文字,若使用文字浏览器,由于不支持图片,这些文字 将会代替图片被显示。若支持图片的浏览器,当鼠标移至图片上该文字也会显示。


lowsrc="pre_logo.gif"
设定先显示低解析度的图片,若加入的是一张很大的图片,下载要很长的时间,这张低 解析度的图片会先被显示以免浏览者失去兴趣,通常是原图的黑白版本。


例1:
原代码:

<*IMG border=0 height=92 src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130> 普通插入


 普通插入

代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD><*IMG border=0 height=92 src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130></TD></TR></TBODY></TABLE>

例2:
<*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130 height=92 border=0 hspace=10 vspace=20"> 设定上下左右空白位置

设定上下左右空白位置

代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD>
<P><*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130 height=92 border=0 hspace=10 vspace=20"> </P></TD></TR></TBODY></TABLE>


例3:
<*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130 height=92 border=4 align=middle>设定图片中间对齐,边框厚度为 4

设定图片中间对齐,边框厚度为 4

代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD>
<P><*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130 height=92 border=4 align=middle></P></TD></TR></TBODY></TABLE><BR>


例4:
<*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=180 height=152 border=0> 放大了的图片
放大了的图片

代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD>
<P><*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=180 height=152 border=0></P></TD></TR></TBODY></TABLE><BR><BR>



例5:
<*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130 height=92 border=0 align=right>设定图片靠右

代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD>
<P><*img src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" width=130 height=92 border=0 align=right></P></TD></TR></TBODY></TABLE><BR><BR>

居中插入:


代码:

<TABLE borderColor=#8a1040 cellSpacing=20 cellPadding=2 width="100%" align=center bgColor=#f394cd border=15>
<TBODY>
<TR>
<TD>
<P align=center><IMG src="http://bbs.muwen.com/fileuploaddir/4B398344013.jpg" border=0></P></TD></TR></TBODY></TABLE><BR><BR>

图片缩边添加法 :

将做好的边框修改边距,我将边距和间距都设置为0cellSpacing=0 cellPadding=0边框粗细设置10 <border=10>将表格的宽度设置width="60%"

修改过的代码:

<TABLE borderColor=#8a1040 cellSpacing=0 cellPadding=0 width="60%" align=center bgColor=#f394cd border=10>
<TBODY>
<TR>
<TD>
<P></P></TD></TR></TBODY></TABLE></P>


看例子

看例子


四行1列

代码:

<TABLE borderColor=#0a5c0a cellSpacing=20 cellPadding=3 width="100%" bgColor=#c0fac0 border=5>
<TBODY>
<TR>
<TD>
<P align=center><FONT size=7>四行1列&nbsp;</FONT></P>
<P align=center>
<TABLE borderColor=#267612 cellSpacing=10 cellPadding=3 width="60%" bgColor=#a2fb8c border=10>
<TBODY>
<TR>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD>
<TR>
<TD>&nbsp;</TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE>


--  作者:微不足道
--  发布时间:2007/4/30 12:40:30

--  
欢迎光临
欢迎光临


--  作者:微不足道
--  发布时间:2007/4/30 12:42:36

--  

??????????


--  作者:利拉乖乖
--  发布时间:2007/9/27 18:30:32

--