-- 作者:日落部族
-- 发布时间:2007/4/25 13:10:49
-- [推荐] 在表格中添加文字和图片
(第二课 )在表格中添加文字和图片 二、在表格中插入图片 插入图片方法有三种: 1、直接插入法。将鼠标放在你选好的图片上,点右键,复制然后粘贴到你的表格中,看效果: 粘贴图片 |
2、用编辑器插入法 选择好图片,将鼠标放在图片中点右键,点属性,复制图片地址;在编辑器里点开“插入图片”图标,将你刚复制过的地址粘贴到信息栏里,按确定,看是下面的格式。 [*IMG]http://class.znrsw.com/UploadFile/2005-10/2005101120412195250.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> 看例子
代码: <TABLE borderColor=#0a5c0a cellSpacing=20 cellPadding=3 width="100%" bgColor=#c0fac0 border=5> <TBODY> <TR> <TD> <P align=center><FONT size=7>四行1列 </FONT></P> <P align=center> <TABLE borderColor=#267612 cellSpacing=10 cellPadding=3 width="60%" bgColor=#a2fb8c border=10> <TBODY> <TR> <TD> </TD> <TR> <TD> </TD> <TR> <TD> </TD> <TR> <TD> </TD></TR></TBODY></TABLE></P></TD></TR></TBODY></TABLE>
|