财经社区女性社区汽车社区军事社区文学社区社会社区娱乐社区游戏社区个人空间
上一主题:偶听不懂课,继续瞎试 下一主题:不要让金钱再做悲剧的“导演”
思梦涵手工制作音画贴简易教程(三)
[楼主] 作者:凡花必痴  发表时间:2007/04/09 11:00
点击:881次

问:bgcolor=#00ffff 定义的是背景颜色吧?
答:是的。可用此方法定义整个网页的背景颜色;也可定义整个表格的背景颜色;也可定义表格中任意单元格的背景颜色。
举例如下:
<BODY bgcolor=#00ffff>
<TABLE bgcolor=#00ffff>
<TD bgcolor=#00ffff>

问:边框的颜色是如何定义的呢?什么情况下是自动添加的?
用bordercolor=#ee00cc设置表格边框的颜色。如果没有自定义边框颜色,浏览器会默认表格的边框颜色为灰色(#cccccc)。
如果设置了表格的边框颜色,而没有设置边框的宽度(边框线粗细),则边框颜色不可见。
例如:<TABLE border=0 border=#ff0000>。该定义中,表格的边框颜色不可见。

问:你制作的帖子的多层外框的颜色是如何定义的呢?
答:肯定不是使用定义表格边框颜色来实现的。事实上几乎很少使用定义表格边框的方法实现特效。

我定义音画贴装饰框的原理是这样的:
1、用平铺的图片作表格的背景,或者给表格设置背景颜色。
2、在表格中嵌套表格(矩形框里套矩形框)。因为里面的表格比外面的小,居中后,四周会露出外层表格的背景图案或背景颜色。
3、层层嵌套。多层表格,只有最里层的表格是用来显示帖子内容的,外层的表格都是装饰。

问:怎样设置表格和表格中图片宽度的像素值?
答:表格的宽度要在<TABLE>标识中设置,而图片的宽度要在<IMG>标识中设置。当图片的宽度像素值大于表格的宽度像素值时,图片会撑大表格的单元格,表格的宽度会被自动调整到大于或等于图片宽度;如果图片的宽度像素值小于表格,并且小于表格单元格的宽度像素值,图片周围就会有空白区,或者露出表格或表格单元格的背景。
设置表格的宽度:<table border=0 width=600>
设置图片的宽度:<img src="图片地址" width=580>


问:如果我要显示背景颜色,如何设定这个值?
答:设定背景的颜色,参见第一个问题的答案。如果要显示出背景的颜色,不要在背景前放太大的图片即可,文字时不会遮盖掉背景的。

-----------------------------
关于笔记的批注
-----------------------------
第一课:居中显示图片
1、<DIV align=center><CENTER>:<IMG width=100 border=n src=要显示的图片地址>
</CENTER></DIV>
其中 width=100为表格的象素宽度;border=n为边框的宽度,为0则无边框

批注:
1、<CENTER>:。这里的“:”是多于的,也是错误的。页面上会显示出一个“:”
2、width=100 border=n 你这是定义图片宽度和图片边框的,不是定义表格的。
----------------------------
 
第二课:设置边框、滚动文字显示
1、<TABLE> </TABLE>定义表格(几乎所有标识都要成对使用)。
2、在<TABLE>中,用border=n定义表格边框宽度、width=n定义表格宽度、height=40定义表格高度、bgcolor="X"定义背景颜色

批注:完全正确
----------------------------
cellSpacing=n定义图片与边框的距离,cellPadding=n定义表格与外容器的边距。不懂

批注:
在表格的单元格里放置图片或文字,如果不希望图片或文字靠边(与表格线保持一定距离)
cellSpacing=n
在表格中嵌套表格(方框里面套方框),如果不希望两个方框重叠,或希望里面的方框与外面的方框之间留有空白(明显的看出大框里面有小框)
cellPadding=n
-----------------------------
3、<TR>和</TR>,定义表格的行。如你制作的《颐和园春色》就是定义了三行是吧?第一行是颐和园春色的标题行、第二行是诗、第三行是图片。

批注:
不是三行,是一行。在一行里使用了<p></p>分了三个段落,每个段落里又用了一个透明的表格
<p><table><tr><td></td></tr></table></p>
-----------------------------
4、<TD>和</TD>定义表格的列,你的《颐和园春色》就是一列对吧?

批注:完全正确
一般的音画贴都是只有一列的表格。除非你想要左边图片,右边文字的排版效果,这就需要两列。
------------------------------

5、小节:在居中显示一张图片、边框粗细为5、象素为600、边框颜色为灰色的代码:
<TABLE border=5 width=600 bgcolor=#00ffff>
<TR><TD><img src=图片地址 border=0></TD></TR>
</TABLE>
问题:border=5 是边框的粗细吗?border=0是什么意思?

批注:
border=5 是表格边框线的粗细
border=0 是设置表里显示的图片不带边框
------------------------------

6、在<TD>中可以设置表格内容的相对位置:align=center(左右居中),valign=middle(上下居中)。
问题:你的代码
<TABLE cellSpacing=3 cellPadding=12 border=1 width=600 bgcolor=#00ffff>
<TR><TD valign=middle align=center>
<table cellSpacing=3 cellPadding=2 width=90% bgcolor=#000adc border=1>
<tr><td>
......在这里还可以嵌套表格
</td></tr>
</table>
</TD></TR>
</TABLE>
意思是:在一个图片与边框的距离为3、与外容器的边距为12、边框宽度为1、象素宽度为600、背景颜色为#000adc的表格内嵌套一个左右上下居中的、图片与边框的距离为3、与外容器的边距为2、象素宽度为90%、背景颜色为#000adc、边框粗细为1的表格。同时在<tr><td>
......在这里还可以嵌套表格
</td></tr>之间可以任意嵌套其他各种各样的表格内容
我理解的对吗?

批注:非常正确(如果你的表达是正确的)。

问题:width=90%中90%是什么意思?我理解是图片的大小占表格的实际的大小的90%。

批注:
代码中没有<IMG>这个标识,就说明没有图片。
<table cellSpacing=3 cellPadding=2 width=90%>
width=90%是定义套在表格里面的表格的宽度,只能占外层表格单元格(容器)宽度的90%
用百分比设置宽度和高度的像素值,这叫“相对定义”,外面必须有参照容器。
----------------------------

7、动态显示文字:
<MARQUEE>需要演示的走马灯文字和图片</MARQUEE>;
<MARQUEE scrollAmount=1 scrollDelay=150 direction=left width=520 height=28>
添加一段、一次移动和下一次移动之间的时间间隔为150、从左向右移动、宽度为520、高度为25的表格。
      
批注:
不是一段文字,应该是一串文字。
方向应该是从右向左。
宽度和高度是“指走马灯的显示区域”,不是指表格(代码中没有<table>就说明没有表格)
-----------------------------

问题:1、scrollAmount=n  一次移动多少距离, 没懂
回答:你走路的时候,一步可以跨一尺,也可以跨二尺,也可以碎碎步踩蚂蚁,所以叫“移动步长”

问题:2、如果要从下往上滚动显示一首四行的诗如何设置?
回答:
设置显示区域时,留出足够的高度,height=n(n值要大一点哟)
设置走马灯的运动方向为从下向上,direction=UP
先将你的诗歌写成一行(其实是一串),然后在每一句的后面加上<br>(因为<br>叫做换行标识符)
备注:<br>是不成对使用的,只需要写在换行的位置,一个<br>还一行,有几个就换几行。

本帖地址:http://club.xilu.com/feelingbk/msgview-950438-136472.html[复制地址]
上一主题:偶听不懂课,继续瞎试 下一主题:不要让金钱再做悲剧的“导演”
 [2楼]  作者:思梦涵  发表时间: 2007/04/09 11:10 

回复:好不好来个现场指导呀?
思梦涵手工制作音画贴简易教程(三)
[楼主]  [3楼]  作者:凡花必痴  发表时间: 2007/04/09 11:28 

看来是要打退堂鼓了哟!

 

花笺言无省,执手也迷茫。点击查看原图

点击查看原图

 [4楼]  作者:学海无涯qs  发表时间: 2007/04/09 11:45 

回复:她是在准备一份答谢老师的礼物
您的人品、才气、信誉,以及诲人不倦的精神,让梦涵和四十情怀的朋友们折服,并为之深深地感动。大家在想,在学习有成的时候,做一份精美的礼物送给您,作为回报和答谢。
现在,大家正在刻苦的学习中。
再次感谢并问好!
另外,您的学生很可能越来越多,请有一定的思想准备。

※※※※※※
学海无涯qs
 [5楼]  作者:思梦涵  发表时间: 2007/04/09 13:12 

回复:有困难,克服困难也要学。虽然对我来说无异于读天书
刻苦钻研中,拿出考哈佛的斗志来!!!
 [6楼]  作者:思梦涵  发表时间: 2007/04/09 14:04 

回复:作业1:
设计预案:表格的边框颜色为#ee00cc、边框宽度为20、象素宽度为800、背景颜色为蓝色的表格,嵌套一个边框颜色为红色、边框宽度为5、居中显示的图片
可是怎么好像边框的颜色和我预想设置的反了呢?
照片和外框的间距怎么调整呢?
点击查看原图
 [7楼]  作者:心碎片片雪  发表时间: 2007/04/09 14:20 

花痴,能不能放慢点,我好笨,现在有点消化不好。
 [8楼]  作者:思梦涵  发表时间: 2007/04/09 14:28 

回复:作业1:调整了一下
不过怎么上下的距离还是不对呢?
点击查看原图
 [9楼]  作者:思梦涵  发表时间: 2007/04/09 14:43 

回复:举手同意
思梦涵手工制作音画贴简易教程(三)
 [10楼]  作者:心碎片片雪  发表时间: 2007/04/09 15:00 

哈,握手同党!
[楼主]  [11楼]  作者:凡花必痴  发表时间: 2007/04/09 15:08 

给予嘉奖!

你的源代码:
<DIV align=center><CENTER>
<TABLE border=20 width=800 bordercolor=#ee00cc><TABLE border=5 width=90% bordercolor=red bgcolor="blue">  <tr><td><CENTER><img border=0 src=http://pic.tiexue.net/pics/2007_4_9_89574_5189574.jpg border=5></CENTER></td></tr>
</TABLE></TABLE></CENTER>
</DIV>

批注:

<DIV align=center><CENTER>  (正确)

<TABLE border=20 width=800 bordercolor=#ee00cc><TABLE border=5 width=90% bordercolor=red bgcolor="blue">(错误)
错误在于<table><table>是表格重定义,而不是表格嵌套。浏览器解释时,认为前一个定义无效,而被忽略显示。
嵌套表格,必须在外层表格的的单元格里插入表格。单元格就是表格中由横竖线画出的网格。
正确的嵌套如下:
<TABLE border=20 width=800 bordercolor=#ee00cc>
<TR><TD align=center>
<TABLE border=5 width=90% bordercolor=red bgcolor="blue">
<TR><TD>.....该单元格里还能再定义表格</TD></TR>
</TABLE>
</TD></TR></TABLE>

<tr><td><CENTER><img border=0 src=http://pic.tiexue.net/5189574.jpg border=5></CENTER></td></tr>(正确)
使用<CENTER>标识将图片置于表格单元格的中间,这是一次有创意的灵活用运。
一般情况下,与之等价的写法是:
<tr><td align=center><img border=0 src=http://pic.tiexue.net/pics/2007_4_9_89574_5189574.jpg border=5></td></tr>
需要注意:<CENTER>只能控制左右居中,而不能控制上下居中。要想让图片处在单元格的正中央,有效的代码如下:
<tr><td valign=middle align=center><img border=0 src=http://pic.tiexue.net/189574.jpg border=5></td></tr>


问:如何控制内层表格与外层表格的间距,照片和外框的间距怎么调整呢?
答:在<TABLE>标识符中,使用cellSpacing=n和cellPadding=n两个属性的定义。

 

 

 

点击查看原图             点击查看原图

 

 

 

[楼主]  [12楼]  作者:凡花必痴  发表时间: 2007/04/09 15:41 

一片片雪的妹妹好聪明啊!
点击查看原图
笨笨雪跟着花痴学音画

 

<dir align=center><center>
<br>
<table cellspacing=1 cellpadding=15 dorder=1 width=600 bgcolor=green>
<br>
<tr><td valign=midde align=center>
<br>
<table cellspacing=3 cellpadding=2 width=90% bgcolor=#000abc broder=1>
<br>
<tr><td><img border=0 src=http://www.fjsnow.com/bbs/UploadFile/2007-3/20073271632688078.gif></td></tr>
<br>
<tr><td height=40>
<br>
<marquee scrollamount=2 scrolldelay=42 direction=up width=500 height=40>笨笨雪跟着花痴学音画</marquee>
<br>
</td></tr></table></td></tr>
<br>
</table></center></dir>

把代码中的那些红色的<br>去掉就好了(估计是发帖的时候,西陆的源代码编辑器自动加上的),去掉的办法是用[退格键]或[del]键消除代码行之间的空行。或者发贴后再修改帖子,手工去除。

走马灯只有一行文字,不如让其按左右方向演示。如果非要从下向上,应放大演示区域的高度height=n。
走马灯标识符也可以用<center>控制在居中的位置,这样的效果比较好!

 [13楼]  作者:思梦涵  发表时间: 2007/04/09 17:48 

回复:还是没懂
bordercolor=green 为何显示为黑色呢?
cellSpacing=1 cellPadding=1  要设置成什么数值才能是图片居中
左右与上下边距不能相等,是不是跟照片的尺寸有关呀?是不是要定义一个象素的高度? 照猫画虎其实是会了,把你代码里的一些地址换掉就行,试了,也还行。不过我还是想搞清楚原因。
>
点击查看原图
怎么跟我电脑里显示的不一样呢?我电脑里显示的红色边框很宽,照片的边框为黑色。
 [14楼]  作者:非常巷陌  发表时间: 2007/04/09 19:14 

回复:自己制作起来还真是复杂

但愿能知道个大概!点击查看原图

谢谢花痴先生~~!

 

 [15楼]  作者:学海无涯qs  发表时间: 2007/04/10 00:52 

回复:你是不是想要的这种效果?
点击查看原图


※※※※※※
学海无涯qs
 [16楼]  作者:学海无涯qs  发表时间: 2007/04/10 17:11 

思梦涵手工制作音画贴简易教程(1~4)

 音画贴图教程及部分选帖-----[学海无涯qs]



※※※※※※
学海无涯qs
 [17楼]  作者:心碎片片雪  发表时间: 2007/04/11 21:08 

花痴,如果我想走马灯的文字在图片上移动该怎么做?
我做的都在图片下面或上面移动,郁闷!
 [18楼]  作者:心碎片片雪  发表时间: 2007/04/11 21:39 

点击查看原图 笨笨雪把走马灯字加到图片上
 [19楼]  作者:心碎片片雪  发表时间: 2007/04/11 21:56 

花痴,我设置的外框是蓝色的,怎么成了红的?
第二,我的走马灯字体怎么设置,我设置了一下成底色了。

精彩推荐>>

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

0.20677804946899