打印

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

XxL

叉叉勾

创世神

Rank: 32

1^# 大中小发表于 2006-11-5 17:18 只看该作者

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

1楼  代码参数使用方法图文教程
2 B, o: q# h% W$ N) G2楼  将图片做为整个日志的背景图文教程澳洲悉尼网(AUSYD). n. y/ Z4 j' Y# P% }; O, G
3楼  在告示板、小边框上边填写文字图文教程

) E$ q+ l7 Z* S% s' a0 X( ]! z
9 q9 H: O2 L% q) X7 G4 Y代码参数使用方法图文教程

澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活0 k/ W" j+ \+ z  g: `
我们常常会在编辑日志的时候配以图片，怎么样可以更好的安排我们的版式，让页面看起来更漂亮呢？那就需要用到这个代码啦，我们来一起走进这个代码使用方法图文教程吧~
; F. Z. T% E. T澳洲悉尼网(AUSYD). p) ?, W7 T$ b1 Q: b
* 首先来认识一下这个代码：称为图形标记，主要用以将图片于插入到网页中。澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活) G: `, F7 H" t' i& ^% N( o& x" t
的一般参数设定，也就是可以控制图片是大是小，是左是右的控制参数有：
         src=”  ”
: A9 b5 {" ~2 X          alt=- }8 L1 M1 P! b, c  V( d
         width=www.ausyd.com$ R% I8 W( K  B4 q
         height=
) o9 E4 G! a  F0 u          hspace=
3 [: @5 L$ {- ^, K1 b" S          vspace=
8 H* T, a( }+ q5 Wwww.ausyd.com          border=) n, x" \1 p, Y9 V& J  \0 {
         align=

( z, J4 x8 }3 o3 N* 进入日志编辑页面，点 HTML即可编辑这些代码) g6 P( b* C! j% u

) s3 M1 C8 m' ?2 B! ^! z
9 e: J7 P3 j0 H( X

* 举个例子吧，比如下面的这段代码：: m' Z1 A  ~4 I1 h
www.ausyd.com* a" K' ?; W7 {
src="http://www.viewstock.com/full/dir2494/dir853/1720037.JPG" alt=不同的位置 width=220 height=146 align=right hspace=8 vspace=3 border=1>在地铁里有两种位置........（文本）
6 }8 X( C8 J6 v% O0 G6 T# r 它能够实现的效果：
$ N. O$ q6 ]/ _) [9 i0 kwww.ausyd.com
9 A: h! n6 u) g4 p2 Y+ t, y" c
2 O' X1 B3 b+ u# E; J0 \www.ausyd.comwww.ausyd.com4 w) r& v0 n% U- j+ ~
大家在编辑自己的日志的时候，可以将这段参数拷贝到自己的 HTML 编辑模式的界面下，修该成自己想要的数值就可以了。
www.ausyd.com% R" m. }! p2 m- \( r

4 C7 j) }3 G9 y; \! x- f! L* 下面我们来分析一下具体的参数在效果中的作用：
$ X$ C/ @3 _, T
8 u& w$ f& M! T2 I
src="http://www.viewstock.com/full/dir2494/dir853/1720037.JPG"
网络上的图片地址，可以链接自其他的网页，了解这个地址的方法很简单，在图片上点鼠标右键，选择属性，就可以看到图片的地址了，把这个地址复制下来就可以了。
www.ausyd.com0 I! P7 h0 g) H: S) b
( z6 {. B* ^) p
alt=不同的位置! A8 m2 i  I+ c. Z7 z
这是用以描述这个图片的文字，若用者使用文字浏览器，由于不支持图片，这些文字更会代替图片而被显示。若于支持图片显示的浏览器，当鼠标移至图片上该些文字就会显示。这个可有可无，根据个人的需要吧~
+ u7 ]: ]( @8 y' owww.ausyd.com
" i& o  _3 j1 F, I: R% ]width=220 澳洲悉尼网(AUSYD)5 R- K8 w" i* Q
设置图片的宽度，以象素（Pixels）为单位。
6 H, P9 w) h! B' X2 F- v
height=146
设置图片的高度，以象素（Pixels）为单位。
. F; N7 E3 ~/ @www.ausyd.com澳洲悉尼网(AUSYD)2 W* q* w& f8 L- r. i
在设定大小的时候，我们只需要选择规定一定的宽度或一定的高度就可以了，图片会按比例自动缩放，不用全部都设定，避免计算错误导致图片被拉伸。例如在上边的例子中，为了让大家看效果，我用了两个参数，其实只需要用width=220就可以达到我想要的效果了。澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活2 v  _. n, V+ [
为了避免失真，最好设为图片的真实大小，若需要改变图片大小最好使用图像编辑工具事先编辑好。当然如果我们懒一点，或对图片的效果要求不高，那么我们就没必要，毕竟编辑图片也要花时间嘛~
' ?; I9 N( y5 |: K& w& Q; x澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活# G) \0 u& ?' N6 \
hspace=8" Q- _. w% d5 ]; |3 X3 ?# I, E3 H
图片与周围文字或图片的左右边距，以象素（Pixels）为单位。
5 ~7 S1 d% g- ^4 n: I1 Pwww.ausyd.com; }9 p$ C6 a4 s2 N8 q
vspace=3澳洲悉尼网(AUSYD)1 }. S9 C6 t& r  o) c0 X
图片与周围文字或图片的上下边距，以象素（Pixels）为单位。www.ausyd.com) l) u# C; G2 P; D, P0 F. Q% K& r5 w8 J
这两个参数用于设定图片边沿空白，以免文字或其它图片过于贴近，让页面看起来更美观% S# K5 T6 N6 U

6 ?  m8 q& ~7 P) F# T4 C) q' z( ^border=1www.ausyd.com, u2 M  M. u' m$ K! Q. o; x
图片边框厚度。 0 o: ?& ^- J# J$ W

$ c, v: C+ q9 lalign=right澳洲悉尼网(AUSYD), {( Y+ b# W5 P! b
调整图片在页面上出现的位置，你可以控制文字环绕在图片的左边或右边等。可用值：left, right （即图片在左边，右边）
还有其他可选值：top, middle,bottom（即图片在上方，中间，下方），但文字只会有一行出现在图片旁边的上方，中间或下方，不会出现整段的环绕。
3 g1 J# y) Y2 f; K" }1 g
; W7 l; T/ i5 {3 J7 e例如：把刚才那段代码中的align值设为 align=Top, [' u' l. Z7 F, ^& D& I7 w  ]

src="http://www.viewstock.com/full/dir2494/dir853/1720037.JPG" alt=不同的位置 width=220 height=146 align=Top hspace=8 vspace=3 border=1>在地铁里有两种位置........（文本）澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活2 t( p+ W' c4 C8 a0 N3 F
澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活; C9 q- ~: u9 H) j; S- I

( O* [. @' n! E, c" v1 c8 K+ s# C6 u4 P& v
怎么样？清晰一些了吗？参数上自己可以多实验一下，就可以看到不同的效果了~
" N* O+ u- _, }% v4 ewww.ausyd.com现在来动手尝试一下吧~~

联系：

TOP

XxL

叉叉勾

创世神

Rank: 32

2^# 大中小发表于 2006-11-5 17:27 只看该作者

将图片作为日志背景及使用公告板[图文教程]澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活8 M1 l3 }9 ~& @, I5 @
% {6 S! d, p) V' @/ }6 a6 T
在编辑我们的日志的过程中，我们不仅需要将图片装饰在文字的左右，还需要将图片作为文字的背景，或在一些很可爱的写字版上写上内容，所以，今天来教大家几种方法，更好的做到图文并貌。4 ^( Y$ T: I. u% ]: l
www.ausyd.com; n" i. ]! \! b

将图片做为整个日志的背景
' I7 w; }; W8 C- c; H6 L
在开始之前，先给大家介绍一个实用的代码，它的作用是将文本设置为引用语，效果是左右缩进显示，这样可以使我们的文本不要紧紧贴在表格的边框上。澳洲悉尼网(AUSYD)* Q. Q4 F( f4 Z, J+ j
澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活1 I; R: Y. l; }$ t) e( E4 v
使用方式：. i" f5 o9 z- h/ l: v4 D
<BLOCKQUOTE>
<DIV>你的文字内容</DIV>
</BLOCKQUOTE>
2 Z5 K. m. u9 ~( u
具体的效果我们会在下面的教程里看到。$ |/ f! h7 _) O2 o
方法一：# o  f, U" l7 h; q+ [4 C( L4 ?
用表格代码 <TABLE> <TR> <TD>，这三个代码是定义表格的最重要的代码www.ausyd.com' h* M# _1 M* G

<TABLE>是表格代码，它用以表示这是表格啦！而且其它表格代码只能在我的范围内才能使用。
<TR>用以标示表格行澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活/ X; Q8 N- B, c3 ]
<TD>用以标示表格列www.ausyd.com/ A0 Y7 c2 y$ @* f

3 q/ s9 u- H  i0 O: M
我们就是利用<TABLE><TR> <TD>代码组合来做一个只有一个单元格的表格，给这个表格定义一个背景图片。这个代码组合公式和我们需要用到的参数有：1 K' k! s/ y* m  t' Y- D( b- ^/ S

< TABLE width=390 height=340 background=http://你的图片地址.jpg border=1 cellspacing=2 bordercolor=#FF00FF align=center  >
<TR valign=center>: l9 y  ?6 B/ @) U/ ]& m
<TD>8 V8 z9 [6 L/ ^$ G1 y! j+ q! E
<DIV>你的文字内容<DIV>
</TR>
</TD>0 Y; O4 S6 N1 ]9 {
</TABLE>
澳洲悉尼网(AUSYD)0 h  K3 S3 Y% L

下面我们来分析一下具体的参数在效果中的作用： 澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活# B  L/ H" M7 M5 L4 O

width=390
设置表格宽度，接受绝对值，如 390 （以象素（Pixels）为单位）或相对值，如 85%。* a5 ]' _# h! D+ i

height=340
设置表格高度，接受绝对值，如 340 （以象素（Pixels）为单位）或相对值，如 85%www.ausyd.com0 c5 x  e  [. K  [; F

如果选用相对值可以使实现表格随着页面的大小变化而自动变动成适合页面的大小，例如我们定义了width=85%，那么表格的宽度就会是页面显示宽度的85%6 Z0 |$ z/ ~4 w$ o9 R4 a
7 ?8 @0 h7 d+ ~8 `% p
background=http://你的图片地址.jpg% Y/ n/ n! V# @# x; R/ l6 i% X
这个就是重头戏啦，就是你想在文字下面显示的图片，由于这个代码不支持图片的尺寸变化，也就是说，如果你选了个很大的图，那么在你的表格里只能显示出左上角的一小部分，而你没办法控制图片来变小点。所以要想要图片显示成你想要的大小，你需要将图片事先编辑一下，让它的尺寸符合你的要求。" V- [, @+ e9 z0 f' f, U
www.ausyd.com# X7 m: V, Q* d- G3 S
由于图片会自动在表格的范围内进行平铺，从而填满整个表格，所以在这里建议大家，可以选用一些比较小的专用的背景图片，这样可以使背景看起来更整齐一些。  e  D& V7 J) s* t
例如:

澳洲悉尼网(AUSYD)% G- \( H! L3 T
这个图片地址必须网络上的图片地址，可以链接自其他的网页，了解这个地址的方法很简单，在图片上点鼠标右键，选择属性，就可以看到图片的地址了，把这个地址复制下来就可以了。6 r6 q- R! ~; Z, z6 A  Y# F

border=1
表格边框厚度，如不需要显示边框，则可以设为0
+ |/ A# g9 K: H( _  x) j+ R( d& B
cellspacing=2
表格网格线厚度，只有当 border设为大于0的数值的时候，这个参数的效果才会显现) c4 c% v( ^9 p& v

bordercolor=#FF00FF
表格边框颜色，随你喜欢喽~

align=center
表格在页面上的摆放水平位置，可选值为： left, right, center www.ausyd.com" S) T* l9 f! |" j3 s6 @9 I

valign=top
表格内文字垂直对齐方式，可选值为： top（表格里的文字在表格中靠上），center（表格里的文字在表格中垂直居中），bottom（表格里的文字在表格中靠下）。 . {3 n+ _; O% U: T  H

例如这段代码：
<TABLE height=340 width=390 align=center background=http://www.spacemsn.net/bbs/attachments/55165860813_xHh59IqgNvw6.gif border=1>
<TR vAlign=center>>
<TD>澳洲悉尼网(AUSYD)8 W, Y9 U/ y9 @# d2 Z. P8 a
<BLOCKQUOTE>
<DIV>盘点生活……..(这段文字)</DIV>
</BLOCKQUOTE>$ i% T6 V: e3 f
</TD>
</TR>
</TABLE>www.ausyd.com$ n5 u) Z3 O( z6 `( U

这段代码可以实现的效果：澳洲悉尼网(AUSYD). v# U% V; M: q" k+ t/ y* G6 p6 n3 C! R

www.ausyd.com: C! ~$ z0 D9 W# P! P
7 s/ {9 l" A4 p" D
其中，刚才我们介绍过了，是为了实现左右两边的缩进，大家可以看到这个效果，文字就不会紧贴在图片的边缘上了。: z0 B& r( r$ ?& O0 I

方法二：2 Q+ R7 I" F, }
& u- G( ], ~/ Y f& l/ P
刚才我们介绍的方法中，大家会发现，如果我们想用一张比较大的图片来做背景，那就比较麻烦了，显示起来只有左上角的一小部分，可是我们又懒得去修改了再上传到网上，那么用下面的方法就再合适不过了。
用下面的方法实现图片做文字背景，可以将图片任意缩放。你还可以用相对值xx%来定义图片的大小，使图片随着页面的变化而自动变动成适合页面的大小。4 N0 Z5 w9 J* m
比如别人在主页看到这副图片的时候，它是这个样子：

那么在网络日志页面看到的时候，那就变成这个样子了：澳洲悉尼网(AUSYD)% L1 R6 S: ]5 r

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

<DIV><IMG src="http://你的图片地址.jpg" width="100%" align=right></DIV>
<DIV style="FLOAT: left; WIDTH: 100%">+ A# C6 u+ S5 |! ~
<BLOCKQUOTE>& U% S$ }" c2 `8 x
<DIV>你的文字内容</DIV>www.ausyd.com& b* {* n8 G# M/ m8 {' c
</BLOCKQUOTE>: X- e3 @& R: f) p, c  f
</DIV>! O6 k) d- {  n$ n3 o7 a1 `9 F2 o

在这些代码中，IMG代码的设定中必须是align=right；style代码的设定中必须是FLOAT: left不可更改，否则将达不到图片做背景的效果澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活  E; W* ?4 O* `- G
澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活2 \( }( q# n; _  R

例如这段代码：www.ausyd.com$ z# ?; p0 W2 `) U# I
澳洲悉尼网(AUSYD)  T* i% J# @  w" C# [! Y3 r2 W
<DIV><IMG src="http://storage.msn.com/x1pqP5noGPWAA6GVPPGBK6k_L-MvD1ujoF7pjqHrWpuS0-hhqSYyYGbw3BznxERv5Xd0-hZp9mdk54VF7eptnNe9CK1E-G_kvA8WCv-twL1INq4gqq7knQS8VaMZOeljXzXgn9fuSCw9GS41cdIR7k-ww" width="100%" align=right></DIV>: V7 B! l6 _0 b7 o% t7 D
<DIV style="FLOAT: left; WIDTH: 100%">
<BLOCKQUOTE>, o4 x4 L  b+ N4 ^& n0 @
<DIV >生活盘点……</DIV>www.ausyd.com* g# g' T+ J- R2 u$ S- \" ?# i1 ]
</BLOCKQUOTE></DIV>
澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活. g  M6 R5 |2 G( u  l& J! P9 G. D
注意，在这里，我没有写出关于文字部分格式的代码来，因为太多，怕扰乱大家的视线。

这段代码可以实现的效果：
澳洲悉尼网(AUSYD)  R2 F* w  j& Y4 `# \+ H

联系：

TOP

XxL

叉叉勾

创世神

Rank: 32

3^# 大中小发表于 2006-11-5 17:30 只看该作者

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

看到现在，我们是不是已经能够举一反三了？下面我们就用<TABLE>代码来实现在小告示版上写字吧~9 J( Q; y2 R z$ Z! p4 A( I
在这里我们需要注意的是，一定要将表格的大小设成和告示板一样的大小，不然多了少了，都会很难看。www.ausyd.com1 z. R% b* \4 m" z8 Y; D
& E/ Q' L2 l( l8 i! {( l8 Y
先来个简单点的：澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活) K4 I& C$ ^, s" U% n% K% E
5 T& G9 y( \" }. G: F1 d
象这样的动态小边框，通常可以拿来做日志的标题，或写上短短的一句话，等等，大家自己想了啊~
澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活3 N" G3 m. i, J! e! b, y
6 @* q( r8 `. b2 N8 i# A, u) G9 F

澳洲悉尼网(AUSYD)) P4 z8 l9 o5 F) v# j3 t

在图片上点鼠标右键，选择属性，就可以看到图片的尺寸是489*70 宽度为489 高度为70

& u5 x  n2 s% W# O
澳洲悉尼网(AUSYD)- q  @8 J5 t8 c+ i5 K& j

我现在要在这个小边框上写上这句话，并让它居中www.ausyd.com9 c; ^1 L5 o& f0 i5 K0 r! j
- I" g( A/ R7 ~/ g
Hi~你好~欢迎你来到澳洲悉尼网澳洲悉尼网(AUSYD)6 R) _! o7 w8 w5 _/ T/ L/ G0 ~
5 H4 S$ L5 V6 \1 `; l1 Q2 `- U2 T
代码如下：
澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活- d9 R% D  A; ]0 i: H$ e
<TABLE height=70 width=489 align=center background=http://bbsimg.qq.com/2005/11/19/006/112.gif>
<TR vAlign=center>
<TD>
<P><FONT size=2><FONT color=#3366ff>             Hi~你好~欢迎你来到澳洲悉尼网</FONT></FONT></P>, x5 G" \" |" q  H4 W
</TD>
</TR>
</TABLE>

注意，这次我写的是完整的代码，包括了文字格式的部分。把这段代码复制到你的空间里，你就立刻可以看到和图片中显示的完全相同的效果了。  c1 K4 u( I+ ]* \2 m2 h# D6 p

实现的效果：

来个稍微复杂一点的，下面我们要在这个告示版上写点字：www.ausyd.com. F' a1 h. i# F" P
8 `2 p6 _% s/ u, ^) }' h: G: e }7 t

在图片上点鼠标右键，选择属性，就可以看到图片的尺寸是215*212 宽度为215 高度为212
我们要在这个板板上写这些话，并让它实现在告示版的中间，并显示在里面的小边框里。澳洲悉尼网(AUSYD)! Q5 l# n3 M0 O! Z) A9 O/ V1 F* ~: q8 X! r
Hi~你好~欢迎你来到1 A3 D$ V2 ]4 ~2 y5 k! Y5 C0 S
澳洲悉尼网) y7 A  L0 t+ k7 D
在空间里穿行的日子( x" K8 \+ o% Y( p8 E
让我感觉到
相遇是一种莫大的缘份
欢迎和我有缘的你
代码如下：

2 Q/ l7 f* }4 G# n, c
<TABLE height=212 width=215 align=center background=http://bbs.tucoo.com/UploadFile044/2006-5/2006542084663220.gif>
<TR vAlign=top>澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活6 @4 e. L% B5 _) E
<TD>
<DIV> </DIV>  Z$ I* ^2 S% m$ V) `
<DIV> </DIV>0 N- m* y- P$ I9 E, D! x3 Y  m
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV> </DIV>
<DIV align=center><FONT color=#3399cc>Hi~你好~欢迎你来到</FONT></DIV>
<DIV align=center><FONT color=#3399cc>澳洲悉尼网</FONT></DIV>www.ausyd.com& o, Z7 J& k" W* `
<DIV align=center><FONT color=#3399cc> </FONT></DIV>www.ausyd.com/ c3 F7 F8 C+ x* Y& ~# A  D7 Q
<DIV align=center><FONT color=#3399cc>在空间里穿行的日子</FONT></DIV>
<DIV align=center><FONT color=#3399cc>让我感觉到</FONT></DIV>澳洲悉尼网(AUSYD), T2 d" f$ }; G5 x: h# g
<DIV align=center><FONT color=#3399cc>相遇是一种莫大的缘份</FONT></DIV>澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活6 Y0 P! Y% {: p" d
<DIV align=center><FONT color=#3399cc>欢迎和我有缘的你</FONT></DIV># x9 w! R9 ]/ a, [" k
</TD>
</TR>澳洲悉尼网(AUSYD)1 e) v/ \3 T' a* G# p" q. D
</TABLE>

注意，这次我写的也是完整的代码，包括了文字格式的部分，比较多，不要看晕了~

实现的效果：

澳洲华人论坛,澳洲租房,澳洲二手,澳洲汽车,澳洲留学生活$ w. h" N$ ~. g# ~) m4 N0 a2 C

好了，先到这儿了~还不赶紧动手到你的空间里实践一下，让空间更漂亮吧~~

联系：

TOP