怎样在日志中使用你的漂漂图片[图文教程] - 素材精品屋 - MSN Space 交流论坛 | MSN Space 社区 | 论坛 | Windows Live Spaces

佩佩 (天空城主)

版主

UID 149
性别：女
精华 2
积分 2580
帖子 1524
经验 1056
金钱 13709 金币
阅读权限 150
注册 2006-4-9
来自北京
状态离线

#1

大中小

使用道具

发表于 2006-5-10 15:50 资料主页短消息加为好友

怎样在日志中使用你的漂漂图片[图文教程]

1楼  <IMG>代码参数使用方法图文教程
2楼  将图片做为整个日志的背景图文教程
3楼  在告示板、小边框上边填写文字图文教程

原创教程，转载请注明出处

<IMG>代码参数使用方法图文教程

我们常常会在编辑日志的时候配以图片，怎么样可以更好的安排我们的版式，让页面看起来更漂亮呢？那就需要用到<IMG>这个代码啦，我们来一起走进<IMG>这个代码使用方法图文教程吧~

* 首先来认识一下这个代码：<IMG>称为图形标记，主要用以将图片于插入到网页中。
<IMG>的一般参数设定，也就是可以控制图片是大是小，是左是右的控制参数有：
         src=”  ”
         alt=
         width=
         height=
         hspace=
         vspace=
         border=
         align=

* 进入日志编辑页面，点 HTML即可编辑这些代码

* 举个例子吧，比如下面的这段代码：

<IMG src="http://www.viewstock.com/full/dir2494/dir853/1720037.JPG" alt=不同的位置 width=220 height=146 align=right hspace=8 vspace=3 border=1>在地铁里有两种位置........（文本）

它能够实现的效果：

大家在编辑自己的日志的时候，可以将这段参数拷贝到自己的 HTML 编辑模式的界面下，修该成自己想要的数值就可以了。

* 下面我们来分析一下具体的参数在效果中的作用：

src="http://www.viewstock.com/full/dir2494/dir853/1720037.JPG"
网络上的图片地址，可以链接自其他的网页，了解这个地址的方法很简单，在图片上点鼠标右键，选择属性，就可以看到图片的地址了，把这个地址复制下来就可以了。

alt=不同的位置
这是用以描述这个图片的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字就会显示。这个可有可无，根据个人的需要吧~
width=220
设置图片的宽度，以象素（Pixels）为单位。

height=146
设置图片的高度，以象素（Pixels）为单位。

在设定大小的时候，我们只需要选择规定一定的宽度或一定的高度就可以了，图片会按比例自动缩放，不用全部都设定，避免计算错误导致图片被拉伸。例如在上边的例子中，为了让大家看效果，我用了两个参数，其实只需要用width=220就可以达到我想要的效果了。
为了避免失真，最好设为图片的真实大小，若需要改变图片大小最好使用图像编辑工具事先编辑好。当然如果我们懒一点，或对图片的效果要求不高，那么我们就没必要，毕竟编辑图片也要花时间嘛~
hspace=8
图片与周围文字或图片的左右边距，以象素（Pixels）为单位。

vspace=3
图片与周围文字或图片的上下边距，以象素（Pixels）为单位。

这两个参数用于设定图片边沿空白，以免文字或其它图片过于贴近，让页面看起来更美观
border=1
图片边框厚度。
align=right
调整图片在页面上出现的位置，你可以控制文字环绕在图片的左边或右边等。可用值：left, right （即图片在左边，右边）
还有其他可选值：top, middle,bottom（即图片在上方，中间，下方），但文字只会有一行出现在图片旁边的上方，中间或下方，不会出现整段的环绕。

例如：把刚才那段代码中的align值设为 align=Top

<IMG src="http://www.viewstock.com/full/dir2494/dir853/1720037.JPG" alt=不同的位置 width=220 height=146 align=Top hspace=8 vspace=3 border=1>在地铁里有两种位置........（文本）

怎么样？清晰一些了吗？参数上自己可以多实验一下，就可以看到不同的效果了~
现在来动手尝试一下吧~~

P.S. 要寻找图片资源，请进入  >>>素材精品屋资源总库<<<

另外

如果你想学习PHOTO SHOP使用技巧

想自己制作漂亮的美图,照片或签名

或是有独特的制图心得与大家分享和交流

又或者要提交自己的作业

就请点这里哦~~↓

原创图制作

[ 本帖最后由茶茶の笑颜于 2007-11-28 18:12 编辑 ]

欢迎到佩佩的天空之城来作客

佩佩 (天空城主)

版主

UID 149
性别：女
精华 2
积分 2580
帖子 1524
经验 1056
金钱 13709 金币
阅读权限 150
注册 2006-4-9
来自北京
状态离线

#2

大中小

使用道具

发表于 2006-5-10 15:56 资料主页短消息加为好友

如何将图片做为日志的背景

将图片作为日志背景及使用公告板[图文教程]

在编辑我们的日志的过程中，我们不仅需要将图片装饰在文字的左右，还需要将图片作为文字的背景，或在一些很可爱的写字版上写上内容，所以，今天来教大家几种方法，更好的做到图文并貌。

将图片做为整个日志的背景

在开始之前，先给大家介绍一个实用的代码<BLOCKQUOTE>，它的作用是将文本设置为引用语，效果是左右缩进显示，这样可以使我们的文本不要紧紧贴在表格的边框上。

使用方式：
<BLOCKQUOTE>
<DIV>你的文字内容</DIV>
</BLOCKQUOTE>

具体的效果我们会在下面的教程里看到。

方法一：

用表格代码<TABLE> <TR> <TD>，这三个代码是定义表格的最重要的代码

我们就是利用 <TABLE><TR> <TD>代码组合来做一个只有一个单元格的表格，给这个表格定义一个背景图片。这个代码组合公式和我们需要用到的参数有：

width=

height=

background=

border=

cellspacing=

bordercolor=

align=

valign=

下面我们来分析一下具体的参数在效果中的作用：

width=390
设置表格宽度，接受绝对值，如 390 （以象素（Pixels）为单位）或相对值，如 85%。

height=340
设置表格高度，接受绝对值，如 340 （以象素（Pixels）为单位）或相对值，如 85%

如果选用相对值可以使实现表格随着页面的大小变化而自动变动成适合页面的大小，例如我们定义了width=85%，那么表格的宽度就会是页面显示宽度的85%
background=http://你的图片地址.jpg
这个就是重头戏啦，就是你想在文字下面显示的图片，由于这个代码不支持图片的尺寸变化，也就是说，如果你选了个很大的图，那么在你的表格里只能显示出左上角的一小部分，而你没办法控制图片来变小点。所以要想要图片显示成你想要的大小，你需要将图片事先编辑一下，让它的尺寸符合你的要求。

由于图片会自动在表格的范围内进行平铺，从而填满整个表格，所以在这里建议大家，可以选用一些比较小的专用的背景图片，这样可以使背景看起来更整齐一些。

例如：

这个图片地址必须网络上的图片地址，可以链接自其他的网页，了解这个地址的方法很简单，在图片上点鼠标右键，选择属性，就可以看到图片的地址了，把这个地址复制下来就可以了。
border=1
表格边框厚度，如不需要显示边框，则可以设为0

cellspacing=2
表格网格线厚度，只有当 border设为大于0的数值的时候，这个参数的效果才会显现

bordercolor=#FF00FF
表格边框颜色，随你喜欢喽~
align=center
表格在页面上的摆放水平位置，可选值为： left, right, center

valign=top
表格内文字垂直对齐方式，可选值为： top（表格里的文字在表格中靠上），center（表格里的文字在表格中垂直居中），bottom（表格里的文字在表格中靠下）。

例如这段代码：

这段代码可以实现的效果：

其中，<BLOCKQUOTE>刚才我们介绍过了，是为了实现左右两边的缩进，大家可以看到这个效果，文字就不会紧贴在图片的边缘上了。

方法二：

刚才我们介绍的方法中，大家会发现，如果我们想用一张比较大的图片来做背景，那就比较麻烦了，显示起来只有左上角的一小部分，可是我们又懒得去修改了再上传到网上，那么用下面的方法就再合适不过了。

用下面的方法实现图片做文字背景，可以将图片任意缩放。你还可以用相对值xx%来定义图片的大小，使图片随着页面的变化而自动变动成适合页面的大小。
比如别人在主页看到这副图片的时候，它是这个样子：

那么在网络日志页面看到的时候，那就变成这个样子了：

在这里我们需要用到是Style，Blockquote，img这三个代码

在这些代码中，IMG代码的设定中必须是align=right；style代码的设定中必须是FLOAT: left不可更改，否则将达不到图片做背景的效果

例如这段代码：

注意，在这里，我没有写出关于文字部分格式的代码来，因为太多，怕扰乱大家的视线。

这段代码可以实现的效果：

[ 本帖最后由佩佩于 2006-6-9 20:33 编辑 ]

佩佩 (天空城主)

版主

UID 149
性别：女
精华 2
积分 2580
帖子 1524
经验 1056
金钱 13709 金币
阅读权限 150
注册 2006-4-9
来自北京
状态离线

#3

大中小

使用道具

发表于 2006-5-10 15:57 资料主页短消息加为好友

在告示板、小边框上边填写文字：

看到现在，我们是不是已经能够举一反三了？下面我们就用<TABLE>代码来实现在小告示版上写字吧~
在这里我们需要注意的是，一定要将表格的大小设成和告示板一样的大小，不然多了少了，都会很难看。

先来个简单点的：

象这样的动态小边框，通常可以拿来做日志的标题，或写上短短的一句话，等等，大家自己想了啊~