您好!欢迎您光临本站! 体育 I 论坛 I 交友 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网页素材>>>网页制作实例教程>>>HTML教程——步步为营之二
HTML教程——步步为营之二
发表日期:2009/11/6 21:03:00 出处:网络 作者:未知 发布人:zhang9607lin 已被访问 2025



   本教材是参照黑马老师的“HTML帖子制作教程 ”编写而成。是为了给来本网站发帖,而不会做网页的初学者编写的。如果朋友们用心去学习,这个教材一定能让你作出一个漂亮的图文并茂的帖子。所谓步步为营,就是不要急于求成,耐心的一步一步学,一步一步的练,你一定会成功的!

 

 

 

  表格内容的编辑

 

   为了添加内容方便,我们先来学习一些相关的知识。

  

   1、文字的设置

    在HTML代码里,字体的定义并不是很难,我们只需用<font>(字体)标签即可定义字体、字号、字体颜色等。<font> 标签原则上要求成对出现,即在被修饰的字体前使用<font>引导,在被修饰的文字后用</font>结尾。下面给出例子和效果及相关说明:

    <font>的语法表示:<font face=黑体 size=4 color=red>心缘之梦</font>

    效果:心缘之梦

    <font>标签里的“face”为字体名称,“=黑体”说明被修饰的“心缘之梦”的字体为黑体。字体可以按照自己喜好来定义。如果你所设置的字体系统中没有,便会被系统自动使用默认字体显示(如中文Windows平台下宋体就是默认字体);size表示字号,论坛里可用字号是1号到7号,通常数字越大字号也就越大,也有的相反。如果用户定义的字号超过7号则以7号显示(但还有其他方法突破7号字体,稍后我们会讨论到的);color用来定义文字颜色,其表示方式:color=red。

     size还有一种赋值方法,形式如下:

    <font size=+1>心缘之梦</font>

    这种语法适用于未使用CSS设定的页面,表示被修饰的文字在默认字号基础上加大一号。

常用的字体
   字体1:黑体字代码:<font face="黑体">黑体字</font>
   字体2:宋体字代码: <font face="宋体">宋体字</font>
   字体3:仿宋字代码:  <font face="仿宋_GB2312">仿宋字</font>
   字4:楷体字代码: <font face="楷体_GB2312">楷体字</font>
   字5:隶书字代码: <font face="隶书">隶书字</font>
   字6:幼圆字代码:  <font face="幼圆">幼圆字</font>

 

 

   字体修饰还用到其他的标签,分别介绍如下:

    粗体:<b>文字</b>  (例:文字

    加重:<strong>文字</strong> (例:文字

    上标:<sup>文字</sup>  (例:文字

    下标:<sub>文字</sub>  (例:文字

    斜体:<i>文字</i>  (例:文字

    下划线:<u>文字</u>  (例:文字

  标题修饰:<hx>文字</hx>。其中,x为1到6的数字。以下是h1到h6的标题式样效果,我们可以看到,字号是逐渐变小的:

 

标题一

标题二

 

标题三

 

标题四

 

标题五

 

标题六

 

    最后讲讲突破7号字大小问题:

    我们需要以嵌套方式调用CSS样式来定义字体,这种方法可以让我们最大限度地设置字号大小,实现方法也很简单,只需在<font>标签里用以下代码替换纯HTML原来的元素即可。请看以下代码和效果:

    代码:<font color=#ff0000 style="font-size: 100pt;font-family:华文行楷,隶书,黑体">春天</font>

    效果:
春天

    CSS扩展了HTML功能,它能够令帖子和网页的可控制程度更高。更多的CSS知识我们将在后面陆续介绍,你也可以阅读 这个了解和学习一下CSS滤镜修饰字体的强大功能。关于CSS知识不是我们这个学习班学习的内容,将来在学习网站设置知识讲习班时再讲。

    2、插入图片

    用HTML方式贴图,语法也是很简单:

    基本语法:<img src=图片地址 border=数值 align=对齐方式>

    

    img标签没有终止符,常用参数也不太多,很容易记忆。

img 是图形文件格式。 src:图片地址。

    border:图片的边框。取值范围为正整数,边框颜色不可改变(黑色)。多数论坛里的图片都会链接到自身,当用户点击过它,它的边框颜色通常就是默认的蓝色,故为美观起见,建议设置为0。

    align:图片与文字的位置关系。这个内容,我们在上一节已经讲过 。

    img标签还有其他的参数:

alt、title:说明、标题。都是当鼠标移到图片时弹出的文字。下面是使用效果,请将鼠标指针分别移到图片上看看发生什么:

alt=心缘教学网      

  

    hspace、vspace:图文混排时图片与左右、上下物件的距离。取值为正整数。

    width、height:图片的宽度、高度。如果图片的高与宽未做设置,系统会按照图片的原本高宽显示出来,但不少论坛并非这样,论坛系统嵌入了一组js代码对图片的尺寸进行处理:如果图片的宽度超过300个像素则以300个像素显示,为止设置图片的高度宽度在这些论坛没有意义;也有的论坛支持用户设置,这类论坛就需要我们对一些尺寸不合要求的图片做一下设置了。是的,图片不一定按原来的尺寸显示,可以通过设置width、height值做必要的调整。

上述几张图片代码:

第一张:<IMG alt=alt=心缘教学网  src="http://www.gxblk.com/images/qg.jpg">

第二张:<P><IMG title=title=心缘教学网 src="http://www.gxblk.com/images/qg.jpg"></P>

第三张:<P><IMG title=title=border=4 src="http://www.gxblk.com/images/qg.jpg" border=4></P>

 

第四张:<P><IMG title=title=宽为100,高自动跟着改变 src="http://www.gxblk.com/images/qg.jpg" width=100></P>

   请大家看看有什么不同?

 

 

户外活动



回家睡觉


心韵制作于二○○五年四月三十日

 

  代码:

  

<TABLE borderColorDark=#ecceb9 cellPadding=2 width="100%" borderColorLight=#eccea0 border=8>
<TBODY>
<TR>
<TD>
<P align=left><FONT face=
黑体 color=#008000 size=5><B>户外活动</B></FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125915.jpg"><BR><BR>
<P align=left><FONT face=
黑体 color=#008000 size=5><B>回家睡觉</B></FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125928.jpg"><BR>
心韵制作于二○○五年四月三十日</P></TD></TR></TBODY></TABLE>

 

 

<TABLE borderColorDark=#ecceb9 cellPadding=2 width="100%" borderColorLight=#eccea0 border=8>
<TBODY>
<TR>
<TD>
<P align=left><FONT face=
黑体 color=#008000 size=5><strong>户外活动</strong></FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125915.jpg"><BR><BR>
<P align=left><FONT face=
黑体 color=#008000 size=5><strong>回家睡觉</strong></FONT><BR><BR>
<P align=center><IMG src="http://www.medscape.com.cn/luntan/image/uppic/pic20040429125928.jpg"><BR>
心韵制作于二○○五年四月三十日</P></TD></TR></TBODY></TABLE>

<b>…</b>:字体加粗,与<strong>…</strong>效果,这两个代码中的字体加粗”  虽语法不一样,但效果一样的。

   

 3、插入音乐

    常用的音乐格式。出于编写代码的要求,这里以支持这些音乐的播放机为划分音乐格式的依据,这种划分方法以前也是有人使用过的。

    第一种: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。常见文件后缀名为:

    raxramrmmrsmlrvxrmjrmxrjtrm

    REAL也支持MP3MIDIWav等格式的媒体文件,但它的播放效果没有WMP的好,所以我们不把它列入RP格式。

    第三种:Flash格式。这是Macromedia公司开发的结合音频视频在一块的媒体格式。其插件为Shock Wave。文件后缀名为.swf

    弄清楚以上文件格式后,我们就可以使用<embed>标签来编写播放媒体文件的代码了。

语法:

格式一:<embed src=地址 autostart= loop= width= height= type=>

格式二:<embed src=地址 autostart= loop= hidden=true type=>

    格式一适用于显示播放界面的情形,格式二适用于隐藏播放界面的情形。

    下面分别讲解各参数的取值规定和要求。

    src媒体音乐地址。地址要完整、有效。如果文件名包含非英文字符,建议整个地址用小角双引号引起来。

    autostart是否自动播放(即一打开帖子就播放与否)。true为自动,false为手动。

    loop:是否循环播放。true为循环,false只播放一次;也可用正整数表示播放多少次,比如等于3表示播放3次。

    width:播放界面的宽度。建议在300500之间。

    height:播放界面的高度。这个很讲究。针对音频文件,视频界面是没有必要出现的,为此,WMP播放机设置为45非常合适,RP播放机为85较好;有视频的则根据情况设置。

    hidden:是否隐藏播放界面。格式二语法式样中设置为true,即不可见,如果设置为false,则表示可见,但若不设置widthheight,它的样子是不好看的。有不少人也用width=0 height=0来隐藏播放机的播放界面,其是这样是隐藏不了的,WMP有一个点,RP有一条竖线。

    type:这是一个重要的值,用于指播放机的插件类型,一些论坛会根据有效的src自动给出type类型(这类论坛我们编写代码时可以省略type),但也有的论坛不会自动给出类型,需要用户指定。type的取值依据和取值规定是:

    WMP类:audio/mpeg (wma的可用audio/x-ms-wma,不过都一样)

    RP类:application/octet-stream

    Flashapplication/x-shockwave-flash

    注:Flash还可指定wmode=transparent表示背景透明,quality=high表示以高档画质播放,pluginspage=http://www.macromedia.com/go/getflashplayer指定插件下载地址(可省略)。

    类型的指定尽量不要弄错,否则极可能出现有些朋友访问你的帖子时不能正常欣赏到音乐和影像媒体。

     音乐表示的语法:

 <embed src=音乐网址 autostart=true loop=true width=300  height=45  type=audio/mpeg>

音乐代码:

<EMBED src=http://www.qigong.name/index.files/adfx.mp3 hidden=true type=audio/mpeg   LOOP="TRUE" AUTOSTART="TRUE"></EMBED>

flash代码:

<P align=center><EMBED align=center src=http://www.61abc.com/game/newflash/0001.swf width=400 height=300 type=application/x-shockwave-flash   wmode="transparent" quality="high"></P>

两组flash代码:

<P align=center><EMBED align=center src=http://www.61abc.com/game/newflash/0001.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" quality="high"></P>
<P align=center><EMBED align=center src=http://www.61abc.com/game/newflash/0001.swf width=400 height=300 type=application/x-shockwave-flash wmode="transparent" quality="high"></P>

    两个FLASH上下排列的图片:
<TABLE height=500 cellSpacing=0 cellPadding=0 width=400 align=center background=http://www.coolhot.cn/680/08/2bj/32.jpg border=1 bortercolor="#000000">
<TBODY>
<TR>
<TD>
<P align=center><EMBED src=http://www.syndanet.com/synda_bbs/usr/46/46_1700_100.swf width=400 height=250 type=application/x-shockwave-flash  quality="high"  wmode="transparent"> <BR><BR><EMBED src=http://lain1978.com/collection/flash/005.swf width=400 height=250 type=application/x-shockwave-flash  quality="high"  wmode="transparent"></P></TD></TR></TBODY></TABLE>

   对于支持object的论坛,建议使用object来播放媒体文件,它得到的效果更能令人满意。因其代码较多,不便记忆,这里就不介绍了,但你可以通过FPDW插入Web组件的方法并对ActiveX控件进行相应的设置得到完整的代码。

4、怎样去查询网上的音乐网址

    前面已经讲了三种音频、视频格式,这些音频和视频文件有的在你的电脑里(即本地),有的则已上传到了各个网络服务器。只有插入网上的音频或者视频文件才会在帖子里有效播放,而如果插入你的电脑里的文件是不会播放的。那么,怎样去找网上的音频或者视频地址?           

    一般可以从以下几方面去想办法:

    1、利用搜索引擎,如:百度搜索  Google搜索

    2、利用一些音乐网站提供的下载资源。

    3、平时浏览网页时收藏的一些其它音乐资源等。

    <>、怎样才能取得所需的音乐文件绝对地址(网上地址)?何为音乐文件的绝对地址?

    1、打开百度搜索引擎,选择“MP3”所有音乐后输入关键词,如:真的好想你。后点击搜索,这时打开的网页上有很多关于真的好想你的链接,

    2、选择速度较快的点击试听,如果试听正常和满意,再右击播放器,在菜单里选择属性,这时你会看到位置后面有一个网址-这就是音乐文件的绝对地址。(http://www.jmyz.com/kz/hx/zhangfy/shouye/zhendehaoxiangni.mp3
[
打开hao123,mp3搜索,在播放器的上面有歌曲出处,在其上点右键,点属性,这时你会看到地址后面有一个网址-这就是音乐文件的绝对地址。http://www.jmyz.com/kz/hx/zhangfy/shouye/zhendehaoxiangni.mp3]

还可以点“flash”,在输入音乐名称,就可以找到你想要得flash动画歌曲了。

 

HTML教程——步步为营之一

 



 

双击自动滚屏 【打印本页】 【关闭窗口
 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

闪客公寓休闲娱乐网 | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:QQ:340623306 联系人:王小华