sql2000无法安装:电脑技术(HTML代码)

来源:百度文库 编辑:中财网 时间:2024/04/28 20:18:24
前言
追求完美的你,不可能只留恋于像编辑Word文档一样编辑你的帖子,也不会满足于使用有限的UBB语法来制作你的帖子,“盗用”别人的代码也不是长久之计。看到别人那些精美无比的HTML帖子,你早已跃跃欲试了!
如果是这样,那么,本教程就是为你准备的!
本教程主要适合于HTML论坛新手和初中级水平的水手参考使用,对于拥有Web管理网站的朋友,本教程也很有指导意义。而对于想学习HTML的朋友,这也是一个不错的教程。总之,黑马尽量使用最通俗易懂的方式介绍HTML帖子的相关语法和制作方法、技巧。
或许你已经是HTML帖子的制作高手了,那么,如果你有耐心一章一节地看下去,说不准也对你有所帮助——里面的内容,极可能有些是你未接触过或者不太熟悉的;如果你是教授级别的,那么,浏览一下也无妨,你可以给黑马提提意见,让本教程对大家的帮助达到最佳效果。
让我们首先从字体设置开始。
在HTML代码里,字体的定义并不是很难,我们只需用标签即可定义字体、字号、字体颜色等。 标签原则上要求成对出现,即在被修饰的字体前使用引导,在被修饰的文字后用结尾。下面给出例子和效果及相关说明:
语法:黑马在线动力
效果:黑马在线动力
说明:标签里,face为字体名称,“=黑体”即表示被修饰的文字即“黑马在线动力”的字体为黑体,至于定义为什么字体,看你的喜好了,如果你所设置的字体不存在,系统自动使用默认字体显示(如中文Windows平台下宋体就是默认字体);size表示字号,论坛里可用字号是1号到7号,通常数字越大字号也就越大(也有的论坛相反),如果用户定义的字号超过7号则以7号显示(但还有其他方法突破7号字体,稍后我们会讨论到的);color用来定义文字的显示颜色,其值放在和前面的各元素一样放在等号的后面,颜色的表示方式可用少量的颜色英文明文,也可用Web色码方式,如#ff0000,色码表请参阅黑马在线动力提供的色码表。
size还有一种赋值方法,形式如下:
黑马在线动力
这类表达式适用于未使用CSS设定的页面,它表示被修饰的文字在默认字号基础上加大一号。
字体修饰还用到其他的标签,分别介绍如下:
粗体:文字  (例:文字)
加重:文字 (例:文字)
上标:文字  (例:文字)
下标:文字  (例:文字)
斜体:文字  (例:文字)
下划线:文字  (例:文字)
提示:连同标签一块,以上这些修饰方法,只要不相互冲突就可以结合起来使用。
标题修饰:文字。其中,x为1到6的数字。以下是h1到h6的标题式样效果,我们可以看到,字号是逐渐变小的:
标题一
标题二
标题三
标题四
标题五
标题六
最后讲讲突破7号字大小问题:
我们需要以嵌套方式调用CSS样式来定义字体,这种方法可以让我们最大限度地设置字号大小,实现方法也很简单,只需在标签里用以下代码替换纯HTML原来的元素即可。请看以下代码和效果:
代码:春天
效果:
春天
CSS扩展了HTML功能,它能够令帖子和网页的可控制程度更高。更多的CSS知识我们将在后面陆续介绍,你也可以阅读 这个了解和学习一下CSS滤镜修饰字体的强大功能。
分隔符标签详解
从代码结构来看,HTML帖子实际上就是一个去头去尾的Web页面,原帖和回复置于和之间,我们可以把原帖和回复帖分开来看,这样,每一个帖子实际上就相当于Web页面的正文了。正文的行与行之间、段与段之间甚至上一个显示元素和下一个显示元素之间,如若我们不刻意去把它们分隔开来,情形会怎么样呢?显然会是一团糟,你的帖子将是一个大团块,阅读起来将十分不便。
为此,学习和掌握HTML语法中的分隔标签非常有必要,娴熟地应用分隔标签,将能令你制作的帖子可读性强、外观整洁漂亮。
强行换行:

在需要处打上
标签,
后面的内容将强行换到下一行。Web页会根据自己的可显示宽度自动换行(除非定义为不换行,不换行标签是),但有些情况下,我们需要强行换行(比如诗歌、歌词等的编排),此时
标签就能派上用场。
可以连续使用,如果
后面没有内容,它将表示一个空行。
是独立使用的标签,没有终止符,
是错误的!
强行分段:

内容


与换行不同,p用来强行分段,它是成对出现的标签,即以起始符

引导被修饰的段落,以

结束该段。在HTML页面里,段与段之间的距离相当于一个空行,并不像Word里用回车分段得出的效果那样。默认情况下用两个
也得到分段的效果,但这样可能会存在一些问题:一是,假设预定义了行高,那么,两个
造成的两个段落的上下间距可能与用p的不同;二是,像动网论坛那样,用
来给一系列超级链接分行,不管连续用多少个

都极可能被吞掉,结果是,那些超级链接外观上将是连在一起的,分辩起来哪是哪比较困难,所以建议用p标签来给它们分段(当然还有其他的手段)。
类似p标签的还有div,记作:
内容
。严格来说div不是一个分段标签,它和span等元素一样,属于网页布局元素,用于网页制作的布局、定位、色块等设计,但在论坛里,div的作用非常类似于p,不过,它分出的段落间距不一定与标签p一致。
分隔线:

分隔线标签
也是独立使用的,它将令Web页出现一条线条。如果不需要特别的装饰,直接用
即可,也可以修饰分隔条,让它和你的帖子更协调地配合起来。
标签可定义元素主要有:
size — 厚度,即分隔线的粗细,默认为1;
color — 颜色,记作:color=颜色值;
width — 宽度,可用实数值表示,也可用百分比;
align — 对齐方式。居中:center,左对齐:left,右对齐:right。默认为居中;

标签还有一些诸如title(标题)、noshade(无阴影)等元素,这里就不一一介绍了。
排版标签详解
HTML的排版不同于Word的直观排版概念,它不是所见即可得的。但是,最终追求的结果是一样的:令终端页面的外观像我们预设的一样显示出来。
在支持HTML论坛里,排版可分为常规排版和非常规排版两种,后者属于较为高深的内容,出于学习的循序渐进要求,我们在本节只介绍常规排版。
一、格式预设:
内容

这是非常有用的一个标签,它可以使得最终显示效果以原始格式实现。请看以下代码和效果:
代码:
1236-1207--------29
效果:1236-1207--------29
论坛里,有时我们需要精确地对齐某些元素,pre标签能够帮上大忙,它能令效果比在“设计”模式下用空格符移动显示符号更准确。
二、对齐:align
align作为一个元素放置在相应标签里令被该标签修饰的显示单元按指定方式对齐或在图文混排时定义图片与文字的对齐方式。
先介绍前者  即被修饰单元的对齐方式。这种情形,align通常有三个值可以选择:left(左对齐)、center(居中)、right (右对齐),记作align=值。align不能独立使用,它要放在相应的标签里,如放在里,则令表格按取值情况对齐,
一句,将令表格居中;再如放在

标签里,则令

...

里面的内容按指定值对齐,

文字

将使“文字”右对齐。align的这种用法还可以用于

等标签里。
而当align用于(图像标签)里时,它所指的是图片与文字的对齐方式,其值比较多,现解释如下:
left:图片位于文字的左边。
right:图片位于文字的右边。
top:后面的文字与图片的顶站对齐。
bottom:后面的文字与图片的底部对齐。
middle:后面的文字与图片的中间对齐。
absmiddle:后面的文字与图片的绝对中间对齐。
更多的img标签里的align元素请参阅其他资讯。
三、缩进:

blockquote将例被修饰的对象往右边缩退,记作
内容
,以下效果是这样的语法实现的(用了两个缩进单位):
黑马在线动力……

当然,你也可以用空格符号实现缩进(代码记作: ),但它只管左边的,对右边没有影响,而blokcquote标签是有的。
四、居中对齐:
内容

这个很简单,成组使用即可,不多说什么了。
五、其他排版方式:表格
用表格来实现网页布局一直被大量使用。在论坛里发帖,有些需要居中的地方,我们不妨用用表格,它得出的效果会比用center标签好得多。试看以下例子:
为了那一夏的热烈
爱需要蛰居多久
在漫长的暗无天日的日子里
一切早已精心策划
单等风和日丽之时破土而出
而后羽化成歌
烈日下本就炽热的爱必须张扬
让正午的阳光更为燥热
让黄昏的空气鼓动起来
让爱肆无忌惮
当爱成为阳光下的风景
曾经的等待又何需忆起
如果我们将表格的边框设置为0,那么,看表将看不到,文字的居中效果就非常理想了。
图像标签
或许贴图是论坛里最容易的事情。黑马当初玩论坛就爱上论坛的原因就是发图太简单了。复制→粘贴就可以发一张图片,这是动网论坛的便利。用HTML方式贴图,它的语法也是很简单。
基本语法:
我们看到,img标签没有终止符。其常用参数也不太多,非常容易记住。
src:图片地址。在论坛里,强烈建议使用图片的完整地址也就是绝对地址,若是上传到论坛的图片,可以使用相对地址,一般从upload一节开始。
border:图片的边框。取值范围为正整数,边框颜色不可改变(黑色)。多数论坛里的图片都会链接到自身,当用户点击过它,它的边框颜色通常就是默认的蓝色,故为美观起见,建议设置为0。
align:图片与文字的位置关系。这个内容,我们在上一节已经讲过 。
img标签还有其他的参数:
alt、title:说明、标题。都是当鼠标移到图片时弹出的文字。下面是使用效果,请将鼠标指针分别移到图片上看看发生什么:
      
hspace、vspace:图文混排时图片与左右、上下物件的距离。取值为正整数。
width、height:图片的宽度、高度。如果图片的高与宽未做设置,系统会按照图片的原本高宽显示出来,但不少论坛并非这样,论坛系统嵌入了一组js代码对图片的尺寸进行处理:如果图片的宽度超过300个像素则以300个像素显示,为止设置图片的高度宽度在这些论坛没有意义;也有的论坛支持用户设置,这类论坛就需要我们对一些尺寸不合要求的图片做一下设置了。是的,图片不一定按原来的尺寸显示,可以通过设置width、height值做必要的调整。
超级链接
在很多论坛里,我们在Design(设计)编辑模式下输入或复制一个网址或其他地址,论坛系统自动令其成为超级链接模式,即发布后,一点击这个地址,浏览器会打开该地址。这是因为,论坛系统在后台给出了超级链接标签。在HTML编辑模式下,我们得自己编写超级链接代码,否则输入的链接是点不了的。
语法:文字或图像
地址没什么可说,只要是完整有效的网址即可。
target是连接目标,它实际上指链接的打开方式,它的值有好几个,但在论坛里我们只用到_blank这个值,记作:target=_blank,意思是将在新页面打开目标链接。如果省略掉target元素,系统默认为在本页打开目标链接,即当前页面的内容将跳转为目标链接指向的内容。一些论坛用不用target都视为开启新页面打开目标链接,这里因为预设定了的缘故,比如,在系统调用的INC之类的文件里有那么一句,它的作用就是所有的链接都指向新页面: 。这种环境下,我们对target元素没有操作权限了。
标签还有title、name等属性,但在论坛里可操作性不强甚至没有用处,这里就不多说了,感兴趣的朋友可以查阅其他资讯。
现在我们要讨论的是超级链接的字体颜色问题。我们知道,论坛都预定义了字体颜色,超级链接样式的字体颜色也一样规定好了。这样就可能存在一个问题:当我们的帖子设定了背景颜色,原论坛的超级链接颜色式样可能不适用,会出现链接看不到的情形。比如黑马就常用黑色背景,而黑色的链接字体颜色显然是不能在黑色的背景里显现出来的。我们必须处理这个问题。
我曾考虑使用嵌入式CSS样式表来批量自定义超级链接的字体颜色,一直弄不出来,也看到过有人在
标签里做文章,尝试过,没有效果。简单的方法还是在链接宿的文字前后使用标签,语法样式如下:
文字
这样一来,显示是不成问题了,只是,当链接很多时,工作量还是挺大的,所以,还是应该寻求其他的方法,比如,研究一下论坛代码,它可能会提供几个样式的超级链接的字体颜色,通常在和之间可以查找得到,在CSS代码里,它们标志为a:link之类的。如果有也能找出就非常方便了,我们只需要在诸如表格的
:表体的起始符。紧跟在
标签里加入 class=lnk1 就行了(lnk1是假设的一个名称)。
媒体标签
图文并茂的帖子还需要有音乐、影像等媒体做衬托,帖子的整体效果才达到极致。虽然论坛一般都提供插入媒体文件的方法,但那是很有局限的,并不能满足特殊的要求。为此,有必要学习和掌握媒体标签的使用方法。
首先我们先了解一下三种主要的音乐格式。这些音乐格式都是当前网络上较为流行的,它们更被广泛地应用于论坛。
出于编写代码的要求,我们这里以支持这些音乐的播放机为划分音乐格式的依据,这种划分方法以前也是有人使用过的。
第一种:WMP格式。
WMP即为Windows Media Player的缩写,是微软公司的媒体播放机,它集成在Windows系统里,可以格外免费升级(网上一般都有下载链接)。其网络ActiveX插件为Windows Media Player。当前WMP所支持的音乐及影像媒体文件的格式主要有(仅介绍网络上常用的格式,下同):
MP3(音频)、WMA(音频)、WMV(视频)、AVI(视频)、MPEG(电影)、WAV(音频)、MIDI(音频)、ASF(视频)、AIFF(音频)、AU(音频)、wpl文件(WMP播放列表文件)、m3u文件(Winamp的播放列表文件)等。
第二种:RP格式。
这是有着悠久历史的一种媒体格式,宽带普及以前的网络媒体文件的老大,由RealNetworks公司开发。它当前的网络ActiveX插件是Real Player G2 Control。常见文件后缀名为:
rax、ram、rmm、rsml、rvx、rmj、rmx、rjt、rm
REAL也支持MP3、MIDI、Wav等格式的媒体文件,但它的播放效果没有WMP的好,所以我们不把它列入RP格式。
第三种:Flash格式。这是Macromedia公司开发的结合音频视频在一块的媒体格式。其插件为Shock Wave。文件后缀名为.swf。
弄清楚以上文件格式后,我们就可以使用标签来编写播放媒体文件的代码了。语法:
格式一:
格式二:
格式一适用于显示播放界面的情形,格式二适用于隐藏播放界面的情形。
下面分别讲解各参数的取值规定和要求。
src:媒体音乐地址。地址要完整、有效。如果文件名包含非英文字符,建议整个地址用小角双引号引起来。
autostart:是否自动播放(即一打开帖子就播放与否)。true为自动,false为手动。
loop:是否循环播放。true为循环,false只播放一次;也可用正整数表示播放多少次,比如等于3表示播放3次。
width:播放界面的宽度。建议在300到500之间。
height:播放界面的度度。这个很讲究。针对音频文件,视频界面是没有必要出现的,为此,WMP播放机设置为45非常合适,RP播放机为85较好;有视频的则根据情况设置。
hidden:是否隐藏播放界面。格式二语法式样中设置为true,即不可见,如果设置为false,则表示可见,但若不设置width和height,它的样子是不好看的。有不少人也用width=0 height=0来隐藏播放机的播放界面,其是这样是隐藏不了的,WMP有一个点,RP有一条竖线。
type:这是一个重要的值,用于指播放机的插件类型,一些论坛会根据有效的src自动给出type类型(这类论坛我们编写代码时可以省略type),但也有的论坛不会自动给出类型,需要用户指定。type的取值依据和取值规定是:
WMP类:audio/mpeg (wma的可用audio/x-ms-wma,不过都一样)
RP类:application/octet-stream
Flash:application/x-shockwave-flash
注:Flash还可指定wmode=transparent表示背景透明,quality=high表示以高档画质播放,pluginspage=http://www.macromedia.com/go/getflashplayer指定插件下载地址(可省略)。
类型的指定尽量不要弄错,否则极可能出现有些朋友访问你的帖子时不能正常欣赏到音乐和影像媒体。
对于支持object的论坛,建议使用object来播放媒体文件,它得到的效果更能令人满意。因其代码较多,不便记忆,这里就不介绍了,但你可以通过FP或DW插入Web组件的方法并对ActiveX控件进行相应的设置得到完整的代码。
marquee标签详解
◇ 黑马
在论坛默认的编辑状态下,我们可以通过UBB语法的move和fly语句让对象动起来,但功能很简单,只是平行地移动。而我们使用HTML的Marquee语句则可以产生更多的移动效果:向左、向右、向上、向下。再嵌套使用marquee语句,效果就更加丰富了。
marquee的基本语法: ...
说明:与大多数HTML语法元素一样,它也是成双出现的,被修饰对象就放在起始符和终止符之间。请看如下例子:
啦啦啦,真的会动耶!
啦啦啦,真的会动耶!
瞧,简单吧?不过,以上例子只是使用了marquee的默认用法。我们加入相应的参数,它的移动方法就有所不同了。
参数一:direction。direction的英文意思就是方向。这个参数的取值有四个:left(左)、right(右)、up(上)、down(下)。
例:向上移动
向上移动
参数二:behavior。移动方式。值:scroll(循环移动)、slide(只移动一个回合)、alternate(来回移动)。
例:哈哈,我来回走!
哈哈,我来回走!
累!我只走一次!
累!我只走一次!
参数三:loop。循环。若未指定则循环不止(infinite),其值取数值。例:
我只走三次哦
我只走三次哦
参数四:scrollamount。移动速度。值取正整数。数值越大,速度越快。例:
看,我走多快!
看,我走多快!
参数五:scrolldelay
延时。数值。例:
我走一走,停一停
我走一走,停一停
参数六:bgcolor
底色。例:
看到了吧?有底色!
看到了吧?有底色!
参数七:width和height。就是移动的宽度与高度了。例:
这个面积不够我移动!
这个面积不够我移动!
其他参数:空白(Margins);对齐方式(Align)
我们在本节所举的例了当中,marquee所移动的对象都是文字,其实呢,凡可视对象,只要有足够的区域,marquee都能令它们移动。
表格初步
表格是在论坛做帖的重要武器。这原因是,论坛里提供给用户操作的区域是非常有限的,用户只能在论坛程序框架好的body区域里的某个区域施展身手,不能修改body的背景色,更不能介入head的定义,因此,诸如让自己的帖子有底色、底图之类的修饰,用户只能通过表格来实现。表格是一个可自定义的容器,因而它就是我们用以实现帖子构设的利器。
把表格称作容器缘于表格的装载特性。表格是用于装载数据的,与我们现实中所看到和理解的表格非常一致。我们在Word和Excel里都接触过表格,知道表格有表头、表体、单元格、行、列等等概念,它们并不难理解。而在HTML里,我们对表格的理解和运用可能会增加一些概念,但并非复杂,在学习本教程的过程中,通过领会和实践,相信是很容易掌握的。
表格不仅仅只能装载数据,它还被广泛地应用于网页的布局,这与表格可以将其所在区域划分为行和列即诸多单元格密切相关。表格用于网页布局过去非常流行,现在仍然深受欢迎,它在论坛做帖也起到不可估量的作用,帖子的页面布局将因使用了表格而可以随心所欲地排版。
现在我们来看看表格的基本代码构成。以下是一个完整的表格标签代码框架,为了能够一目了然,各元素尚未引入它们的属性:






内容

说明:
:表格的起始符。任意一个表格的开始都必须以它开头,且必须有终止符

之后,表示表体开始。必须有结尾符,放在
之前。在纯网页中可以不要tbody元素,但在论坛一定要使用,否则,当帖子用到较多的表格时,论坛的自动填充功能将可能会导致代码出错。
:tr的作用是规定表格的行,其中,t是table,r是row(行)。有多少组tr,这张表格就有多少行。紧跟在之后。必须有终止符。
:td的作用是规定表格的列,t是table,d可理解为down(向下)。有多少组td,这张表格就有多少列。第一个紧跟在之后。终止符为。td与tr配合构成单元格。
、、、:这些都是相应元素的终止符,表示相应元素所规范的内容结束。必须注意它们的排列顺序,不能有错。
从表格的代码框架分析得出:表格标签里,所有元素都成对出现,而这些元素是按照从大到小的顺序从外往里层层包裹的。table最大,它占在起始和终结的位置,tbody是老二,tr是老三,td最小,它在最里层。
本节对表格的介绍到这里打住,更多的表格内容将陆续介绍。下课。
表格属性设置
本节所指的表格属性设置其概念等同于诸如FP的“设计”编辑模式下的表格属性设置,在“设计”模式下,通过点击鼠标,可以方便地设置表格的属性,只是,它没有通过代码设置的灵活。
我们先看看标签里都有哪些需要设置的属性。
border:此属性定义表格的边框。比如,border=1,表示表格边框的粗细为1个像素(默认值),为0表示没有边框。
cellspacing:单元格间距。当一个表格有多个单元格时,各单元格的距离就是cellspacing了,如若表格只有一个单元格,那么,这个单元格与表格上、下、左、右边边框的距离也是cellspacing。
cellpadding:单元格衬距。指该单元格里的内容与cellspacing区域的距离,如果cellspacing为0,则表示单元格里的内容与表格周边边框的距离。
width:表格的宽度。取值从0开始,默认以像素为单位,与显示器的分辨率的像素是一致的。800×600的显示分辨率下,如果表格设置成1000个像素的宽度,那么,得出的效果将导致IE的横向滚动条出现,只有通过滑动它才能看到表格最右边的内容,所以建议在设置表格的宽度时充分考虑显示分辨率问题。width的取值还可以使用百分比,如widht="100%",这种赋值法有个好处:表格的宽度将根据可显示的宽度来自我调整宽度。
height:表格的高度,取值方法同width。提示:如果不是特别需要,建议不用设置表格的高度,系统会根据表格的内容自动设置高度。所谓特别的需要,是指一些特殊的情形下,需要表格的高度精确,比如,当我们通过表格的背景来发一张图片时,如果表格的高度不精确定义,图片就不可能完整或完美地显示。
bgcolor:表格的背景色。取值方法举例:bgcolor=#ff0000或bgcolor=red。单元格共同组成,但在一组tr里,可以拥有多组td,我们前面说过,有多少组td该表格就有多少列;同样,一张表格可以拥有多组tr,表格有多少组tr就有多少行。显而易见,构成表格最小单元的td,它的属性设置是不可忽视的。
单元格的属性设置主要体现在
也可有此属性,如果设置了表格的背景色,又设置表格单元格的背景色,得出的效果将是值得试试的,这种情况主要用于多单元格的表格。
background:表格的背景图。其值为一个有效的图片地址。
也有此属性。同时设置背景色和背景图不冲突,也建议这么做,这样,当图片不能显示时,表格的外观依然是好看的。
bordercolor:表格的边框颜色,当border值不为0时设置此值有效。取值同bgcolor。
bordercolorlight:亮边框颜色,当border值不为0时设置此值有效。亮边框指表格的左边和上边的边框。
bordercolordark:暗边框颜色,当border值不为0时设置有效。暗边框指表格的右边和下边的边框。
align:表格的对齐方式,值有left(左对齐,默认)、center(居中)以及right(右对齐)。align定义的是表格自身的位置,这是一个很有用的属性,强烈建议使用它来规定表格的对齐方式,尽量不要使用

表格

表格
表格
之类的标签来规定表格的位置,因为这么做将导致论坛添加许多废码!此外,当表格的宽度设置为100%,或者,表格的宽度设置成了占满它所在的容器的宽度,没有必要定义align属性。
表格标签的属性较多,使得本节有一定的难度,需要悉心领会并一一记住。
下面给出一个表格式样和代码,表格中有一些简单的说明。
本表格的属性设置:
边框大小:border=1
边框颜色:bordercolor=#ff0000
背景色:bgcolor=#cc9968
表格宽度:width=400
单元格间距:cellspcing=16
单元格衬距:cellpadding=8
表格的对齐方式(居中):align=center
注:其他属性未设置。
参考代码:






表格里的内容写在这里

单元格属性设置
◇ 黑马
在上一节对表格属性设置的介绍中,我们提到,有一些属于表格的属性单元格也有,比如,背景色、宽度和高度等等。本节我们学习单元格的属性设置,但这回我们采用不那么正规的讲述方法来介绍单元格的属性设置。
从表格的整体外观上看,单元格是表格的基本构成单元,一张表格至少要有一个单元格。单元格由
里,除了我们在上一节学到的bgcolor等之外,还有许多属性需要掌握,令人高兴的是,很多属性的设置方法都是和属性设置一样的,如width、height、bordercolor等。关于width,我们在此着重讨论一下。好的习惯是,如果是一个单元格的表格,假设我们在
里设置了其宽度,那么,就不必再设置之间(亦即在“和”的位置)。试看以下代码和两个表格的嵌套效果:
的宽度了,因为这是多余的,但我经常看到不少朋友的代码就是重复设置的,且这么设置:,显然只是增加了帖子的代码量,它没有任何作用——当有了表格宽度,单元格的宽度会自动占满表格的宽度。但是,在多列表格里,的宽度就应该设置,如若不设置,系统会自动按各单元格里的内容的占位情况自行分配宽度,效果是可想而知的。
单元格的bordercolor设置有些讲究,主要用于实现单像素的表格边框——要实现这种效果,要求表格的border为1,且里设置了bordercolor颜色值,cellpadding和cellspacing都设置为0,然后将也有些属性设置,因在论坛中作用不是很大,这里就不介绍了。但有一个有趣的不属于“属性”的情况这里格外提一下:后面可以有文字,以下的示例的“表一”和“表二”就是放在和,故而表格只有一行,...里有三组td,因此,表格有三列,这就是所谓的1×3表格。现在我们把代码扩展一下,即增加一组tr,请看代码和效果:
代码:
的bordercolor颜色值设置为与的背景色相一致。
单元格的最为重要的属性应该为align和valign,align规范单元格里的内容的水平对齐方式,valign则规定垂直方向的对齐方式——请特别注意:它们规定的对齐方式是单元格里面的内容,而不象表格里的align那样定义自身的位置!align取值方法和前面介绍的一样,valign的取值方法主要有:left(左对齐)、middle(居中)、top(靠顶)、bottom(靠底)等。以下是
的两个对齐属性的不同设置所产生的效果示例:
默认对齐(不设置)
水平:居中
垂直:靠顶
代码:

单元格元素中,
之间的:
表一 水平:居中
垂直:默认
表二 水平:右对齐
垂直:靠底
代码:

通过探索,我们还有可能发现更多的书上没有介绍的东西。建议大家安装可以自动填充代码的网页编辑器(如FP2003),这样,当我们在“代码”编辑模式下编写代码时,就会看到,有很多属性或其他内容自动弹出来,我们可以做些尝试,然后通过预览看看是什么样的效果。
表格组合
◇ 黑马
表格组合不是一个轻而易举的技术,所以,我们极少见到论坛各种精美的帖子会用到它,但表格组合技术是一个很有趣的技术,掌握它具有一定的挑战性,所以,黑马愿意花一节的篇幅专门讲它,如果你觉得不需要,可以跳过这一节。
表格组合更多的用于布局,当然,也有少数情形需要用到它。本节不想探讨什么时候用到表格组合,只从实现手段方面进行讨论。
先讲上下排列的表格组合。先看例子:
表一
表二
要顺利地实现N张表格的纵向组合,至少有三种方法:一是,令参与排列的表格都居中(即在里加入align=center),上例就是;二是,不定义表格的对齐属性,即
里没有align属性,这样给出的N张表格代码,它们都是上下排列的,表格的自身位置全是左对齐(但若定义了align=left,情形不是这样,大家可以在FP或DW里试试),例子请看表三和表四;三是把参与排列的表格放在一张表格里,这张作为容器的外表宽度不限,且里面的表格也不设置align属性——大家都看得出来,其实,它只是第二种实现方法的扩展,其目的是为了让参与排列的表格随心所欲地设置水平对齐,换句话说,外表的作用是为了实现自定义的对齐方式,示例为表五和表六。第三种方法虽然源于第二种,但使用它是个绝好的主意,这个,在使用表格排版过程中,相信大家会慢慢体会到的。
表三
表四
↓我叫表五表六右对齐 表五
表六
下面看水平排列的表格。
表格的水平排列更需要精确地计算参与排列的表格的宽度,它们的宽度的总和不能超过其所属容器所能装载的宽度,表格和其他元素的混排情形下更应该严格考虑。
一个好的习惯是,还是用一张表格来规范并列组合的表格,这张表格,最好宽度设置为100%,然后将里面要并列组合的表格通通设置为左对齐(但注意:它们的宽度总和不能超过可显示的宽度)。试看以下两个示例:
外表宽度为100% align=left
width=150
align=left
width=150
align=left
width=150
外表居中,宽度为450 align=left
width=150
align=center
width=150
align=right
width=150
本节从某个角度分析了表格的组合问题,它是一个主要用于排版的技术,要求计算精确,并不十分适用于论坛。但如果你是一个不怕挑战的人,那么,本节所讨论的内容或许对你来说还远远不够,好在聪明的你会自己去尝试,本节若能起到抛砖引玉的作用就已经达到目的了。谢谢阅读!
多单元格表格
◇ 黑马
在页面布局方面,比起表格组合,多单元格更能灵活和方便地进行控制,为此,使用多单元格布局Web页或帖子是一个不错的习惯。
我们前面提过,表格代码里,有多少组...,表格就有行,有多少组,表格就有多少列。为此,在代码里,我们将根据需要利用表格代码里的来创建单元格。我们先来制作一个1×3即一行三列的表格。
代码:
...
...








单元格一(即列1)单元格二(即列2)单元格三(即列3)

效果:(1×3表格)
单元格一(即列1)单元格二(即列2)单元格三(即列3)
在上述示例里,只有一组













单元格一(即列1)单元格二(即列2)单元格三(即列3)
单元格四(即列4)单元格五(即列5)单元格六(即列6)

效果:(2×3表格)
单元格一(即列1)单元格二(即列2)单元格三(即列3)
单元格四(即列4)单元格五(即列5)单元格六(即列6)
我们可以定义
里的宽度和高度值,从而让表格以我们的预设在其所在区域进行布局,以便达到有效的排版目的。在多行多列的表格里,当某一列的第一个单元格已经定义了宽度,那么,往下各单元格的宽度将跟它一致,如果同一列的所有单元格都设置了宽度,该列的最终宽度以width值最大的那个单元格为标准,——可见,我们只需设置某列的第一个单元格的宽度即可,其他同列的不必给出width属性,这样一可以节省代码二不会出现无效设置;表格的行的高度情形也是一样:当定义了某一行头一个单元格的高度之后,该行其他单元格会自动得到相同的高度值,不必再一一设置的height属性。尽量减少代码量总是一个好习惯,一来可以节省空间,二来打开速度也会得到改善——代码越多,系统处理代码的时间就越长,同时也更耗可贵的系统资源。
我们还应该注意的是,如果不设置
的width和height属性,表格各单元格将根据里面的内容的占位情况拓宽自己,表格给各单元格的宽度分配将由系统自动进行,这样就容易出现不合理的情况,因此,应该根据需要设置单元格的高度和宽度。
多单元格表格里一个有趣的问题是单元格合并,其概念与Excel的合并单元格是一致的,只是实现方法不同。在HTML代码里,我们用colspan属性合并左右单元格,记作:colspan=数值,“数值”即为需要合并的单元格总数;而rowspan属性则合并上下单元格,记作:rowspan=数值。
让我们用上面的第二组示例表格来加工一下。先看合并左右的单元格——
代码:












1,2单元格合并了3
456

效果:
1,2单元格合并了3
456
下面是表格的上下单元格合并——
代码:












1,4单元格合并了23
56

效果:
1,4单元格合并了23
56
通过HTML代码实现单元格的合并略显抽象一些,你可以研究本示例代码和第二组代码(2×3表格)的区别并比较两组表格的样式来慢慢领会,要完全掌握这一技术,你还需要亲自做些尝试。最后顺便提一下:有些论坛可能不支持表格单元格的合并。
表格嵌套
论坛所有精美的帖子,几乎无一例外地都用到表格的嵌套技术,其中的原因,如前所述,论坛中给用户提供施展身手的余地十分有限,只有通过表格的修饰,帖子才能既成为独立的显示单位,又达到如纯完整的Web页一样有着自己的装饰。表格的可分割性和容器特征在帖子制作中充当着重要的角色,兼管帖子的布局的同时还承载着表达帖子信息元素的重任。
作为容器,表格可以往里放置可以放置的元素。表格也是一个元素,故而表格放在表格里是合理的,因此就有了表格的嵌套。表格的嵌套还可以是另外的形式,那就是,一个表格的单元格里还有表格。不论是哪种形式的嵌套,理论上嵌套的层可以是无穷尽的,但现实中并不会这么做,我们总是根据需要有限制地使用嵌套,不会没完没了。
表格嵌套其实也不复杂。如果你能够独立用代码做一张表格(强烈建议练出这样的本事),那么,你就可以做一个两张表格的嵌套,很简单,把代码复制一下,粘贴在原代码的




表一




表二


表一 表二
从上面的表格效果上看,如果我们把文字“表一”删除掉,表格的嵌套将是非常完好的。如果再定义边框大小和颜色、cellpadding和cellspaing为其他值,加上背景色和背景图,或通过其他手段来修饰,那么,里表和外表之间,就会出现非常漂亮的边框,帖子的外框就这么搞掂了。当然,这是一个细活,你需要做反复的尝试,直到效果满意为止。或许你还需要更多层的嵌套,这就看你的想象力了——实现手段是不难的,因为你已经会了第一层的嵌套,第二层、第三层……第N层,无非就是如此。
现在我们来看看多单元格表格中,在单元格是嵌入表格的示例。先看代码:





单元格一:无表格嵌套


我嵌套在单元格二里


以下是效果:
单元格一:无表格嵌套我嵌套在单元格二里
上面的两个例子里,黑马都将处于外层的表格(即外表)的宽度设置为450个像素,这是由于本页面的限制。在实际制作中,我们可以充分考虑未来浏览者的显示器的分辨率和论坛提供的可显示宽度来决定取值。好的习惯仍然是取绝对值,因为,你的帖子里边的内容宽度非常可能是绝对的,譬如图片有着自己固定的宽度, Flash影片也是使用绝对的width值,为了不让正文四周出现太多的空余,采用绝对值规范外表的宽度是有必要的。当然,还有一个好的做法,那就是,根本不用规定外表的宽度,而是让里边的内容自行撑宽外表,这么做至少要求我们注意两个方法的问题:一是,利用cellpadding或border的合理值来让外表的边缘显示外表的既设背景,二是,外表里面的诸元素的宽度要相对统一。任何一种实现方式都还有其自身的奥妙,不是用语言能够一一道明的,只有在不断地实践中才能逐一领悟和掌握。
当今用户的的显示器分辨率有两大标准:800×600和1024×768,这两种分辨率下,以动网论坛为例,用户发帖后帖子可显示的区域宽度是有区别的。为此,你需要通过尝试获知具体宽度,从而制作出的帖子不至于出现浏览者不能完整欣赏的现象。过宽的帖子,比如超过510个像素的宽度,分辨率设置为800×600的浏览者将看不到帖子右边的内容,而太小的宽度,又可能令帖子显得小里小气,也不理想。
深入学习表格
◇ 黑马
表格还有一些重要的内容需要彻底弄懂。实际上,这些内容,前面几节我们已经接触过,但我们还需要进一步去探讨一下。
我们先来做个实验。
下面黑马给出一条长度为450个像素的分隔线,然后在分隔线下面放置一张表格,其宽度亦为450个像素:
border=1
cesllpadding=15
cellspacing=8
width=450
现在,我们看到,表格的总宽度仍然是450个像素(它没有超越分隔线),因此,我们可以得出这样的结论:表格的border、cellpadding和cellspacing虽然都是占位元素,但它们不会使得表格变得更宽,换一个更生动的说法,表格的这些元素是往里占位的,而不是往外占位。
第二个实验:设定表格的宽度为400个像素,然后在里面放置一个可视元素,令其宽度为450,看看表格的总宽度发生了什么。我们依然用一条长度为450个像素的分隔分做参照。
本表格设定宽度为400个像素,但因表格里的分隔线宽度为450个像素,表格的实际显示宽度发生了变化。
现在我们看到,虽然在标签里设定了width=400,但表格的总宽度并不是400个像素,而是被表格里面的那条分隔线的实际宽度(450个像素)撑宽了。你可能会觉得奇怪:为什么表格总宽度超过了450个像素呢?道理是这样:表格设置了cellpadding值为10,cellpadding区域是不可放进任何可视内容的。细心比较一下,你将发现,表格宽出的部分正是留空的部分,即表格的单元格衬距。
可见,表格里面的内容会影响到表格的宽度。实际上,如果我们设置好表格里面的内容的宽度,表格的width值是完全可以不设置的,但这不是一个好的习惯,我们通常仍然需要合理地设置表格的宽度,但必须留意一个问题:表格的总体宽度是否超过了可显示的范围。
实验三:设定一个450个像素宽度的表格,表格的边框、单元格间距和衬距都为实值,该表格有三个单元格,每个单元格设定宽度为150(加起来恰好的450个像素),看看表格的实际宽度是否发生变化。这个实验仍然使用450个像素宽度的分隔线作参照。
width=150width=150width=150
上面的表格,我们设置border=1,cellpadding=10,cellspacing=6,三个单元格的宽度均为150个像素,结果是:表格的总体宽度未发生变化。由此我们得出结论:多单元格表格里,只要各单元格的宽度相加起来不超过
里的宽度赋值,它们不会因表格边框、单元格间距和单元格衬距都为实值而撑宽表格。
本节通过实验的方式,从表格的宽度角度剖析了表格的一些深层特征,估计这些知识和体验从其他的教程中或许是得不到的。它并不是很抽象,加上黑马创造的用分隔线做对照标准和耐心的讲解,悉心阅读和比较后,你会很容易掌握的。
表格应用示例一
◇ 黑马表 格 应 用 示 例 代 码 之 一
本节黑马举一个表格嵌套的示例向大家展示帖子的制作过程。以下是本示例的参考代码,这些代码得出的是本示例的整体外观效果,内容需要你自己往里添加,黑马添加的是此说明和本示例的代码,纯文字。




标 题





内容






表 格 应 用 示 例 代 码 之 一
本节黑马举一个表格嵌套的示例向大家展示帖子的制作过程。以下是本示例的参考代码,这些代码得出的是本示例的整体外观效果,内容需要你自己往里添加,黑马添加的是此说明和本示例的代码,纯文字。




标 题





内容






如果你还没有熟悉到一看代码就明白,你有必要看一下下面的分析。
本例有四层表格的嵌套,总共使用了六张表格。最里层是三张表格上下排列,属表格组合。我们从外往里分析代码。
最外层的表格,我们设置边框值为1并定义其颜色,这样,配合
的边框颜色能够起到外边缘呈现出立体的感觉。外表的单元格衬距(cellpadding)为20,它恰好形成了帖子外边框。外表的宽度为600个像素,这是根据本页面而设置的,你可以在实际使用时更改。
第二层表格的原理和外层的差不多,只是,我们更改了各元素的颜色,单元格衬距也调小了,cellpadding赋值为10。
第三层表格没有做太多的设置,我们仅令其背景色为白色、单元格衬距为10,这样得出一个白色的边框。
第四层表格有三个上下并列组合的表格。第一个用来放帖子的标题;第二个表格只是用于隔开第一个和第三个表格并令之与第三层白色底的表格连为一体,为此它的border、cellpading和cellspacing都需要设置为0,高度则为10(与第三层表格所形成的边框一致);第三个表格用于放置帖子的内容,故将其单元格间距设置为10(也可设置单元格衬距),以便让文字等内容不至于太靠边。
本例帖子里的代码,黑马采用了缩退方式编写,意在让大家能够清楚的看到不同的代码代表不同层的表格,越缩进的代码越在里层(非表格代码和自动换行的除外)。
这个示例只是展现一种思路,你完全可以在此基础上通过其他手段(如添加表格背景图片、加入动态的图形和Flash影片等)做得更复杂、更精美一些。

表格应用示例二
◇ 黑马
以下是悠悠然的一个作品的框架。出于讲解方便,黑马在不改变原貌的情况下对原作品作了些改动。
此处放一幅与标题相关的图片
标 题
分隔图标
【正文,由六幅图和五段诗文组成】
分隔图标
签 名
小图修饰+音乐标签
这个作品的框架用了八张嵌套的表格,每一张表格都有背景图片。其中外表是黑马添加上去的,其作用是替代原来的body区域里的背景图,而原作品中的两张用于设置帖子正文处的表格略显多余,黑马已经将其删除,仅保留七张表格。下面给出上面帖子框架的代码并作简单的分析。








此处放一幅与标题相关的图片


标 题


分隔图标


【这里是正文,由六幅图和五段诗文组成】


分隔图标


签 名


小图修饰+音乐标签










从代码上看,这并不是一个很复杂的构架,它只是一个多重嵌套的方式。为更能直观地查看各表格定义了背景图后的效果,黑马将各层表格拆开来让大家看看:
表一
表二
表三
表四
表五
表六
表七
表八
接着把这些表格像搭积木一样一个一个地往里套,大致框架就有了,再在第八个表格放一些东西,一个完整的帖子就出笼了。请点击下面的链接查看全帖子的效果:
点击 →小溪流水
最后给出该帖的核心代码。你应该发现,里面又多出了一些表格。是的,它们是简单的表格,作用仅为规范诗文的居中:每一段诗文使用一个表格,共五个。
《小溪流水》核心代码:









小 溪 流 水





涓涓细流,
是淌过我心中的小溪。
潺潺清悠,
是萦绕我梦中的小溪。
汨汨的清响,
时常勾连起,緾绵的追忆。
喃喃的絮语,
时常叨击那 干枯的心堤。

你是银河的映射,
闪耀着星光的神奇;
你是大海的浪花,
颂扬着莽原的博击。
你从崇山峻岭中走来,
传递着洪荒的信息。
你从百阻千障中游离,
挣扎出怪石的绊羁。





亘古的积雪,
是你生命的源头;
云雾的氤氲,
是你络绎不绝的延续。
你万绪千头,
仿佛是树叶的纹理;
你阡陌纵横,
好似那血脉的毛细。
丰厚的植被,
将你酝酿成甘美的琼浆。
错综的地貌,
将你过滤成晶莹的玉液。





弦月,为你拨响撩人的琴韵;
和风,为你激荡动人的心语;
阳光,为你补充醉人的弦律;
落花,为你挥洒恋人的情意。

春洪秋讯,
是你激情的泛滥;
冰冻悬玉,
是严寒试图阻止你和凡尘的联系。





你为宇宙而生,
你为生命而育,
注定了要与
宇宙的喜怒哀乐
交织在一起。

雨儿,渗透到你的魂魄,
雪花,亲吻着你的身躯。
青春,追逐你游戏。
羞涩,借助你轻灵。





你一路轻歌, 你一路逶迤,
你放飞心怀,张扬着生命的节拍;
你姿意颠波,坦荡着无瑕的心蒂。

为什么? 我总是对你 那么痴迷;
为什么?我总和你有那么一段
割舍不断的情义。
因为那里,也曾
 截留下我青春的脚印,
因为那里,也曾
 伴随着我凄美的叹息。
青春的矫情,承受了你的荡涤。
似水的年华,定格成一个缩影。
耳边时刻回荡着 你的清音。






文:太白金星
编辑:悠悠然











表格应用示例三
◇ 黑马
本节要讲的一个表格应用示例比较简单:以表格为载体,在表格里面加入图片和Flash影片以期达到所需的动态效果。
这是很常见的一种做帖手段,其实现思路是:给表格加入一个背景图片,这样一来,表格仍然是可以装载占位元素的容器,因此,我们给已经有了背景图片的表格加载一个Flash影片就成为可能。
应该注意的是,表格要设置高度和宽度,且高、宽应与用作背景图的高、宽相一致,表格的border、cellpadding和cellspacing等值最好设置为 0(原因:为了使图片完美显示)。Flash影片也必须设置高度和宽度,设置为多高多宽应根据实际显示需要而定,但绝对不能大于表格的高度和宽度。
以下,是本示例将要用到的素材:一张图片和一个Flash影片。

通过查看桂林山水图片的属性(右击→属性),我们可以看到图片的尺寸为540×405,由此,我们将定义表格的宽为540,高为405。代码如下:




此处为加载Flash影片代码

Flash影片是几条游动的金鱼,我们将把它们放置在相应的水域游动。影片底色是纯白的,我们通过定义可以令底色消失,代码是wmode="transparent"。以下是Flash代码举例:

OK,现在来看看效果:

在上例中,我们令表格内部占位元素的垂直和水平对齐分别为底部对齐、居中,Flash的宽度为150、高度为180。这些,都是根据需要而定义的,可以通过反复尝试最后确定。以下是参考代码:







非常规排版技术
◇ 黑马
在教程的前面我们提到过,论坛里用于显示用户的帖子的区域是有限的,在同一显示分辨率的机器里,用户的帖子可显示的宽度比该分辨率的宽度要少一些。而有一些帖子,出于种种原因,我们可能不满足于受限的显示宽度,为此,有必要采用非常规排版技术,其目的是突破显示宽度限制。
这就是所谓的“全屏技术”,即,令帖子以全屏宽度显示。
在HTML代码中,通过“层”技术,我们非常容易实现全屏显示某一单元(帖子可视作一个单元)。“层”具有重叠性,即,在一个已经存在的占位单元里,通过使用“层”的叠加,我们还可以在其上面再放置一个或多个单元。其结果是,多个单元的叠加,整体效果就是立体的,以下页面的左边的第二幅图就是通过使用“层”技术在图片之上叠加了一个透明的表格,从而导致图片不能通过正常的右击进行复制:
http://www.gxblk.com/pc/no1/tmtable.htm
查看上面黑马提供的页面,你或许还不能明白“全屏”技术的实现原理,但你应该理解“层”的叠加概念。当前较高版本的DW已经引入了“层”的概念,用过DW的朋友理解起来可能比较容易,为了让新手也能够很快接受这个概念,黑马举个不十分确切的例子,对“层”再加以说明:筑路,通常铺上一层较大的石头,这是第一层,压紧后再铺上碎石,第是第二层,往后还有若干层。所有的层是重叠在一起的。这些层,就是我们要用于HTML帖子里。我们知道,用img加入一幅图片,这幅图片占的位置不可以再加入任何内容了,但通过“层”的叠加,我们就能够让其他内容浮于图片的上方,黑马在线听歌台的那个有“52”标志的Gif图片,就是这样放上去的。
论坛都有固定的结构,它规定用户发帖所能显示的地方是被限制好的。包含有发帖人头像等信息的左边栏,它已经有了占位元素,而它恰好是占去了我们想利用的显示帖子的宽度。那么,通过使用“层”技术,我们将帖子的左边部分往它那里叠加,加上正常可显示的部分,帖子就实现了“全屏”宽度显示了。同样的道理,我们还可以让帖子往上或往下一点,甚至,如果你愿意,你还可以让帖子的头部把论坛的功能菜单全部遮拦住(不建议这么做)!
不知道道理讲明了没有?呵呵,现在,还是来看看实例吧。
以下两个表格,都以img方式装载有相同的图片,不同的是,第一张表格我们用了“层”技术,令图片不完全在表格里面;第二张表格则是正常加载图片的,不作任何处理。


在上例中,第一张表格里,我们在图片代码前后用了如下代码:
图片代码

这段代码就是实现图片部分超越表格框架亦即突破常规位置的关键。其中,id很重要,是系统识别哪个单元的重要标志,命名时一定不要与其他的id重复;left表示要移位的单元左边起始位置,top则是指上部开始位置,用负数值表示往左、往上移位,正数则往右、往下移位;width和height其实指“层”的高度和宽度,通常与要移位的元素的宽度和高度相一致(论坛中可以省略width和height值,因为我们采用的是嵌入式使用“层”,“层”会自动获取宽与高。复杂的HTML页面不建议省略);position表明叠加的方式,有relative(相对位置叠加)和absolute(绝对位置叠加),使用前者的话,“层”所叠加的位置不因不同的分辨率而改变,即它的位置是固定的,使用绝对叠加则相反,会因分辨率的不同而发生位置变化,比如你想让一只蜜蜂采花粉,那么,如果你使用了相对位置,不同分辨率下打开你的帖子,它都是在花朵上采花粉的,但如果用了绝对位置,800×600分辨率下它是在花朵上采花粉,而1024×768分辨率下,蜜蜂可能是在石头上采的;z-index标识“层”在所有层中的位置,因为论坛有不可预知性,所以,好的习惯是把它赋值很大,以便保证它是在最上方的。
这段“层”代码还可嵌入到其他的代码中去。比如表格,我们可以在里面插入它,表格仍然给出id,样式如下:
...

上述代码式样里黑马没有定义宽度和高度——刚才说过,可以不定义的。在这里,“层”的宽度与高度实际上就是表格的实际宽度与高度,你也可以定义。
移位技术是实现“全屏”显示帖子技术的实现手段,通过上面的学习,如果已经掌握了“移位”帖子的方法,那么,在实践中多多尝试,掌握好精细的移位尺寸(单位为像素,即代码中的px),你就能够在需要的时候得心应手地让你的帖子得以完美地呈现出来。
使用“全屏”技术应该注意的事项:
一、尽量使用相对叠加位置方式以确保不同分辨率下帖子的移位都是按照预定义的方式进行;
二、注意计算尺寸,尽力避免帖子将功能按钮、菜单和相应应该显示的项目遮拦住;
三、编辑帖子之前记得将论坛编辑框下边的“自动修正”功能取消,否则有可能所做的移位设置不起作用。
做帖的一些好习惯
◇ 黑马
一、选择一款好用的HTML编辑器。
尽管你可能对代码非常熟练,仍然建议使用HTML编辑器,一方面,可以事半功倍、减少代码的出错机率,另一方面,可以边编写帖子边查看效果以便随时更改不如意的地方。编辑程序的版本不要太低,比如,FrontPage2000尽管很优秀,但它未集成代码编辑环境下的自动显示和补齐代码功能,对一些标签的代码自动调整也常常令帖子面目全非,而FrontPage2003则是相当不错的,功能齐全,并有代码标错功能(以非常显眼的颜色将有错误的代码区域标识出来),非常贴切用户。DreamWaver的新版本则整合了图片处理功能,比如,用一张图片做表格的背景,可以通过动动鼠标、输入数字,轻而易举地将此图片割开(当然你需要上传被割开的图片才能在帖子中使用),它还集成有图片的简单处理,且,如果安装了与之配套的兄弟软件,它就更加十全十美了。总之,编辑器不必安装太多,有一款用得上手的就行了。
二、如果习惯了在线编写帖子,请编写完一组完整的代码后再切换到Design编辑环境预览,否则论坛系统的自动填充功能会将你的代码弄得乱七八糟,极可能难以挽救。对于需要移位的帖子,在编写时先不要使用移位代码,待帖子编写完毕并检查无误了,再加入移位代码。有音频的影视、音乐代码也尽量在最后再放上去,因为,一旦放了音乐之类的代码上去,如果多次切换到Design环境,音乐会同时播放,重唱一样的音乐会弄得你难以适应。
三、表格的居中,尽量不要使用其他的代码来令其对齐,而是使用表格的对齐属性代码来完成,在table代码里使用align=对齐数值。这是一个好习惯,也会减少废码的出现——当使用p、div或center之类的标签对齐表格时,系统通常会在代码里生成大量的其他代码,有时根本无法人为地控制。单一列的表格,也没有必要给td赋宽度值,因为那是没有必要的,它总要占满表格的宽度(前提是表格已经定义的宽度)。
四、做帖时,对帖子所使用到的图片尺寸尽量做到心中有数。比如,你要用表格背景图片方式发图,那么,表格的高与宽必须与图片的尺寸一致。而Flash影片、WMP和RP的播放界面尺寸,也应该在设置的时候考虑到表格的总体宽度。
五、没有影像的音频文件,其播放界面不要设置太大的高度,在embed标签里,WMP的高度45个象素最合适,RP在80上下就可以了。当需要隐藏播放界面时,请最好不用将width和height设置为0,因为那不是真正的隐藏,好的方法是设置hidden值为true。
六、当使用img形式发图时,你得根据论坛的情况设置装载有图片的表格的宽度。多数论坛会设置了一组JS代码来处理图片的宽度,即当图片的宽度大于300个象素时,图片就以300个象素显示。有时,一个论坛当时可能是这样的设置,往后又是那样的设置,也需要我们充分考虑到。
七、永远是在有了主题和准备好素材后再做帖子,千万别强迫自己做帖。
八、不要老依赖别人的帖子代码,因为,这样的话,你的创作能力永远得不到发挥,你只是沿着别人走过的路再走一回而已。
九、在自己的硬盘里建立一个文件夹,此文件夹下又建立若干子文件夹,当发现有好的素材,就分门别类地保存好,有条件的,能用得着的就上传,并用一个文件记录好它们的URL,甚至,为了更方便,不妨在本地硬盘建立一个HTML页面,用绝对路径显示这些资源的真实面目。
十、对于那些优秀的已经发布了的帖子要有个备份,建议修改一下代码,以相对路径将所有资源保存在本地磁盘,这样,当帖子借用的资源链接失效后,你仍然有补救的余地。
回复修改只看此人 20楼:nihello 02-16 14:26
首先,如果你不是一开始就打开这个结束语,那么,黑马非常想知道你到底学的怎么样——当你看完一个教程,如果什么都没学到,作者会非常失望的,黑马也是如此。教程总是有用的,黑马学习电脑和网络,都从教程学起,有常规书籍,有电子书籍,有HTML教程。黑马不敢说每一个教程都学透,但可以肯定的是,每一个教程都对黑马有一定的帮助。
在论坛做HTML帖子是一项颇具挑战性的创作活动。比起建立一个HTML页面而言,做帖的受限性更大,我们可以认为,做帖子与戴着脚镣跳舞没什么两样。在局限太多的环境下以完美的形式艺术地将你的思想和意志展现出来,没有一定的功底是难以完成的。为此,本教程更大程度上着重于对HTML语法的介绍和技术的剖析,读者在阅读每一节的时候应该能够感受到这一点,同时也极可能觉得教程的趣味性程度不够,有点枯燥——这是没办法的,语法和技术,开始接触时就这样,只有当你掌握了,你才领略到其中的味道。或许你需要再次阅读其中的某些内容(黑马常这样对待教程),你会发现还有意外的收获。
黑马的这个教程并非完美,但对于抱着做好论坛帖子这一目的的读者来说,它应该是很难找得到的,黑马也将长期在这里保留这个教程。各位如果觉得教程有需要修正或补充、增加的地方,请给黑马留言,黑马将视情况作些必要的修改。
本教程在编写过程中参考过诸多资料,因过于零散,不便一一罗列出来,在此,谨向这些资料的作者表示感谢!同时感谢关心与支持本教程的各位朋友!
1/1