|
|
|
（七）在网页中嵌入声像及其他 -----------------------------------【2001/02/01 《中文导报》】 （八）动画是怎样做出来的----------------------------------------【2001/02/08 《中文导报》】 （九）什么是JAVA-SCRIPT ----------------------------------------【2001/02/15 《中文导报》】 （十）如何将做好的网页发送出去 ---------------------------------【2001/02/22 《中文导报》】 ☆ 从零开始，做一个最简单的网页 经常有朋友问我如何制作网页，难不难？我也经常这样回答，做网页是小学生也能干的活，很简单。朋友们听了我的回答总是半信半疑的，果真是这么简单吗？我的回答是肯定的，而且不使用“傻瓜”软件，用最简单的编辑器来做。 今天开始，我就给大家讲一讲如何做网页。从零开始，包教包会。当然罗，我说的小学生，必须具备以下的基础知识：会开电脑，会使用编辑器写文本文件，知道文件名、文件夹等基本概念，当然会上网更好。 如果你具有这些常识的话，我们现在开始做一个最简单的网页。 在电脑的硬盘里先新开一个“文件夹”(folder)，比如就叫 WORK。为简单起见，我们所写的文件都将放在在这个目录里。先用编辑器(最好就用“メモ帐”)生成一个新文件，名字起为 “TEST.HTM”。要说明的事是所有的网页文件是后缀名为“HTM”或“HTML”的文本文件。后缀名指的是文件名中小点后的一部份，比如WORD处理的文件名后缀是 DOC，图像文件的后缀名是 BMP等等。HTML 是 Hyper Text Markup Language 的缩写。 在文本文件 TEST.HTM 中输入下面三行文字： <HTML> 这是我的第一个网页！ </HTML> 然后保存该文件。在你的目录 WORK 下点击文件 TEST.HTM，哈哈，成功了，第一个网页，你自己做的，相信吗？出乎你意料之外的简单。 好了，现在我们简单地分析一下上面的例子。HTM 文件不应该算作编程序，是由一系列规则确定。而这些规则，是有一组组尖括号围起来的，首尾呼应。比如<HTML>和</HTML>。尖括号 <> 的写法英文称为 TAG，日文读作タグ，英文的本意是“标签”，中文有人译为“连接签”，我觉得还不如译为“定义签”确切。在没有比较贴切的译名得到公认之前，我在此讲座里一律称之 TAG。 TAG 一般情况下以 <XXXX> 和 </XXXX> 的形式成对出现，大小写没有区别，别忘记后一个 TAG 里面的斜杠。上面的例子当然是比较极端的，HTM 文件一般分为两大部份：HEAD 和 BODY，HEAD 是一些说明性的句子，而 BODY 则是具体显示的内容。不妨将上面的例子修改成为下面比较标准化的样子。 <HTML> <HEAD> <TITLE> 我的网页 </TITLE> </HEAD> <BODY> 这是我的第二个网页！ </BODY> </HTML> TITLE 部份的“我的网页”将显示在浏览器顶部的BAR上，“这是我的第二个网页！”作为正文显示在浏览器上。看明白了吗？ ☆ 如何指定文字的大小和颜色 今天先介绍一个最简单的 TAG，就是在网页上画一条线。这个 TAG 是 <HR>。在 HTM 文件的 <BODY> 中使用 <HR> 就可以画一条线。注意，一般 TAG 里面可以加一些参数，限于篇幅，我不可能一一列出。因为是入门，我只能挑一些简单的有代表性的讲解，详尽的参数请参考 HTML 的语法手册(在网上也很容易找到的)。 <HR> 的主要的参数有两个，WIDTH 和 SIZE。你可以试试看以下几种用法的不同效果： <HR WIDTH=80% SIZE=10> <HR WIDTH=40% SIZE=20> <HR WIDTH=20% SIZE=30> WIDTH当然是决定线条的长度，可以直接写数字(画面的点阵数)，也可以加%写成百分比的形式，那么该线条的长度就是浏览器窗口宽度乘上该百分比，SIZE 决定线条的宽度。还有一个参数是NOSHADE，试试看： <HR NOSHADE WIDTH=80% SIZE=10> <HR NOSHADE WIDTH=40% SIZE=20> <HR NOSHADE WIDTH=20% SIZE=30> 注意，参数之间要有一个以上的空格隔开。 接下来讲一讲字体的大小和颜色的设定。先看看下面的例子，SIZE 的大小直接可以用数字（１－７）来指定，TAG <BR>表示换行。 <FONT SIZE=1>字体尺寸1</FONT><BR> <FONT SIZE=5>字体尺寸5</FONT><BR> SIZE 的参数也可以写成+/-数字，体会一下下面的句子： <FONT SIZE=4>字体尺寸4</FONT><BR> <FONT SIZE=+2>字体尺寸6</FONT><BR> 字体颜色的设定是有参数 COLOR 决定的。先看看下面的例子： <FONT SIZE=5 COLOR=red>红颜色字体</FONT><BR> <FONT SIZE=5 COLOR=#FF0000>这也是红颜色</FONT><BR> 颜色参数的写法有两种，一是直接写RED，WHITE，BLUE 等等颜色名，已定义的颜色名在HTML的手册中都能找到；一是写成#AABBCC的形式，由六位16进制数构成，其中AA，BB，CC分别代表三原色，譬如 #FF0000 表示红色，#0000FF 表示蓝色，等等。试试看，下面这句语句显示的结果是什么颜色： <FONT SIZE=5 COLOR=#8A99DD>这是什么颜色的字体？</FONT> 关于字体还有三个简单的 TAG 是 <I>(斜体字)，<B>(粗体字)，<CENTER>(字体居中)。注意，这几个 TAG 都是成对出现的，别忘记对应的</I>、</B> 和 </CENTER>。 ☆ 如何在网页上做一个表格 搞明白如何在页面上画一个表格是比较重要的事，今天先介绍表格的一些基本要素。表格的基本要素有三个 TAG：<TABLE>、<TR>和<TD>，分别表示“表”“行”和“列”。一个表格有若干行组成，一行又有若干列组成。下面的例子就是在画面上画一个 2 行 3 列的表： <TABLE BORDER=1> <TR> <TD>第一行第一列</TD> <TD>第一行第二列</TD> <TD>第一行第三列</TD> </TR> <TR> <TD>第二行第一列</TD> <TD>第二行第二列</TD> <TD>第二行第三列</TD> </TR> </TABLE> TABLE 中的参数 BORDER 比较重要，决定了表格框线的宽度，如果为0的话就不显示表格框线。<TABLE>还有以下参数：ALIGN(对齐)，WIDTH(宽度)，CELLSPACING(表格单元框线的宽度)，CELLPADDING(表格单元框线和内容的间隔)，BORDERCOLOR(表格的颜色)，BORDERCOLORLIGHT(表格的颜色)，BORDERCOLORDARK(表格阴影的颜色)等等。 了解了这些参数的用法后，不妨将上例中第一行改为<TABLE BORDER=5 ALIGN=center WIDTH=80% CELLSPACING=5 CELLPADDING=20 BORDERCOLOR=BLUE BORDERCOLORLIGHT=red> 看看效果怎样？自己再调节一下各个参数值，慢慢地体会一下表格的奥妙之处。 <TR> 和 <TD> 的常用参数有 ALIGN (左右对齐：left，center，right)，VALIGN (上下对齐：top，middle，bottom)，试着在上面例子里增加这些参数，并且赋予各个不同的值，譬如，<TR ALIGN=right>，<TD VALIGN=top> 等等，看看相应的效果。经过多次反复的练习以后，你一定能熟练地掌握如何做一个表格了，而这一点对于你做好网页是很重要的。 ☆ 表格的灵活运用 上一讲讲了表格的一些重要的基本概念。实际上，许多复杂的画面都可以通过表格实现，就是用BORDER＝0的表格来将文字或图像定位。 <TABLE>、<TR>和<TD>还有三个常用的参数是<WIDTH>、<HEIGHT>、<BGCOLOR>。用法和第二讲讲的线条和文字的参数类似，不在罗嗦。 今天主要讲另外两个比较重要的参数<COLSPAN>和<ROWSPAN>。譬如，<TD COLSPAN=3>就意味着这个表格单元占用相应于其他行3列的宽度，同样<TD ROWSPAN=2>意味着这个表格单元占用相应于其他列3行的高度。 看看下面的例子和上讲中的例子的差异之处： <TABLE BORDER=1 ALIGN=center WIDTH=80% > <TR HEIGHT=100> <TD COLSPAN=3 BGCOLOR=BLUE>第一行第一列 ～ 第三列</TD> </TR> <TR HEIGHT=100> <TD WIDTH=30%>第二行第一列</TD> <TD WIDTH=30%>第二行第二列</TD> <TD WIDTH=30% ROWSPAN=2>第二行第三列 ～ 第三行第三列</TD> </TR> <TR HEIGHT=100> <TD>第三行第一列</TD> <TD>第三行第二列</TD> </TR> </TABLE> 要注意的事是行和列的位置不要搞错，否则就会出现不正常的后果。所以，对于新手来讲，最好先在草稿纸上画好格子，设计好你所需要的表格；同时，先不要急于再表格里放文字或图像，不妨象上例那样写好“第＊行第＊列”就比较直观，对还是错就一目了然了。 当然，表格还可以嵌套，就是表格里面套表格，这就比较繁琐了，读者有时间和兴趣可以自己试试看。 最后再补充一句，<TD>还有一个变种的写法<TH>，是标题的意思，里面的文字将会自动变为粗体字，并且自动居中表示。 ☆ 关于图像的一些基本概念 今天讲一些图像方面的基本概念。HTML 内可以使用 GIF 和 JPG 这两种压缩格式的图像。WINDOS 下的“画笔”(ペイント)支持这两种格式，对于初学者来讲，不要一开始就去用比较复杂的 PHOTOSHOP 等工具，利用“画笔”就可以将 BMP 等格式的图像进行简单的加工(拷贝，切割，添加文字等)，然后保存为 GIF 或 JPG 的格式。 背景图，一般只需要一个很小尺寸的图像，然后就会自动地“充满”整个画面。譬如，你用“画笔”生成一个20X20的小图像，起名为 back.gif，并保存在你的工作文件夹里。将 HTML 中的 TAG<BODY> 写成以下形式： <BODY BACKGROUND=back.gif> 你就会看到你自己做的图像被复制为无限个而成为背景图显示在整个画面上。 在画面中间显示图像，则需要使用 TAG <IMG>， <IMG>的参数比较多，常用的有以下这些： <IMG SRC=XXXX ALIGN=XXXX WIDTH=XXXX HEIGHT=XXXX BORDER=XXXX HSPACE=XXXX VSPACE=XXXX> 注意：参数之间要有空格，参数前后次序以及大小写无关。这里面 SRC 是必须的，指定图像文件的文件名。假如你的文件夹内有一个名为“abc.gif”的图像，那么下面的例句就会将该图像在画面上显示出来。 <IMG SRC=abc.gif BORDER=0> BORDER=0 的意思是不在图像的周围显示一个框子。 参数 ALIGN 的意思是和前后左右的文字以什么样的方式对齐，可以定义为 top,middle,bottom,left,right,texttop等等。WIDTH 和 HEIGHT 是确定显示图像的宽度和高度，如果不写的话，就将该图像以原样的大小显示，可以直接写数值(图像的像素数，多少点阵)，也可以写成 80% 这样的形式。如果实际图像和你定义的宽度和高度有差异的话，显示的图像将以你定义的尺寸将原图放大或缩小。 HSPACE 和 VSPACE 是指定图像左右或上下的空距。 如果你文件夹内有 abc1.gif 和 abc2.gif 两个图像，你可以试试下面的例句，并且不断改变各参数，看看效果如何。 <BODY>部份： ………… 这是和文字上方对齐的图像<IMG SRC=abc1.gif ALIGN=top WIDTH=200 HEIGHT=100>明白吗？<BR><BR> 这是中间对齐的方式<IMG SRC=abc2.gif ALIGN=middle WIDTH=200 HEIGHT=100>你知道这两者的差异吗？<BR> ………… 最后要提醒一下的事是图像的定位还可以利用表格来实现的。 ☆ FRAME是怎么回事 在介绍 FRAME 之前先介绍一个比较重要的连接TAG：<A>。在一个画面上要调入另一个画面或者转向另一个网站的页面，可以这样使用TAG<A>： <A HREF=test2.htm>转向画面TEST2</A> <A HREF=http://www.yahoo.com>转向YAHOO主页</A> HREF参数可以是文件夹中的 HTML 文件，也可以直接写一个网站的地址。 接者开始讲 FRAME，所谓的 FRAME，就是根据自己的需要把显示的画面分割成为若干个小窗口。下面通过一个具体的例子来看看吧。假如你想把一个页面分割成左右两部份，左面占整个画面的30%，左边显示的页面为 LEFT.HTM，右边显示的页面为 RIGHT.HTM。那么这个“总控制”的 TEST.HTM 是这样子写的(注意这个例子实际上有三个文件组成的)： <HTML> <BODY> <FRAMESET COLS="30%,70%"> <FRAME SRC=left.htm NAME=L> <FRAME SRC=right.htm NAME=R> </FRAMESET> </HTML> 这里的参数NAME起到一个“命名”的作用，即把左边区域命名为L，把右边区域命名为R。这样的话，如果在LEFT.HTM 中加入下列命令行的话，就可以达到做一个简单的菜单的目的： <A HREF=sub1.htm TARGET=R>菜单项目一</A><BR> <A HREF=sub2.htm TARGET=R>菜单项目二</A><BR> <A HREF=sub3.htm TARGET=R>菜单项目三</A> 当然，这里的sub1.htm，sub2.htm和sub3.htm必须是你的文件夹中 HTM 文件。 ☆ 在网页中嵌入声像及其他 网页中嵌入声音和录像也有多种方法。这里介绍一种最简单的，就是利用 HTML 语言来实现的。 嵌入声音和录像的 TAG 是 <EMBED>。试试看在 HTML 中追加下列句子： <EMBED SRC="XXXXX.XXX"> 声音或录像 </EMBED> 当然，在你的工作文件夹里要存在相应的声音或录像文件。HTML一般支持的声音文件是 WAV 和 MID 格式的。录像文件是 MOV 和 AVI 格式的。 <EMBED>里的 SRC 指定你的声音或图像文件名，其它参数有 HEIGHT，WIDTH，VSPACE，HSPACE 等等，和 TAG <IMG> 的用法一样，不再重复了。 常用的嵌入声音还有一个 TAG 就是 GBSOUND。格式举例如下：<GBSOUND SRC="XXXXX.XXX" LOOP=3>。使用该语句时，画面上不显示任何东西，声音作为一种背景音乐来播放。这里的 SRC 是指定文件名的， LOOP 是指定播放次数的，如果你写成 LOOP=-1 就是循环播放了。 还有一种简单的方法是直接利用 TAG <A> 来实现。譬如：<A HREF="XXXXX.XXX"> 声音或录像 </A> 读者可以自己比较一下 <EMBED> 和 <A> 的差异之处。 今天还要介绍的 TAG 是<MARQUEE>，可以简单地在网页里使得字符串“动”起来。例句如下： <MARQUEE WIDTH=200 HEIGHT=20 HSPACE=20 VSPACE=20 BGCOLOR=red ALIGN=middle DIRECTION=down BEHAVIOR=scroll> 欢迎光临我的网页 </MARQUEE> 其中的参数 DIRECTION 可以设定为：left/right/up/down(字符串移动方向)，BEHAVIOR 可以设定为：scroll/slide/alternate(循环，单向或来回往复)，LOOP 可以设定为：N/-1 (次数，或无限次)。读者可以自行调试看看效果如何。 这个语句仅适用于MICROSOFT 的 IE 浏览器。到今天为止，介绍了常用的一些 TAG 的用法，可以制作简单的网页了。但是，读者要注意的事是 HTML 的许多语句，在不同的浏览器，不同的版本下得到的效果不同。譬如， NETSCAPE NAVIGATOR 浏览器以前的版本就不支持 FRAME。 这是在设计网页时需要特别注意的问题，具体用法可以参考 HTML 的用户手册。 ☆ 动画是怎样做出来的 动画有许多种实现方式。今天介绍一种最简单的，它是 GIF 图像文件的一个变种格式，通常称之为动画 GIF，实际上就是把一组 GIF 图像压缩存在一起，当然，还要包括一些显示上的动作指定，譬如两幅画显示的时间间隔等等，该动画 GIF 文件的后缀名仍然是 GIF，即 XXX.GIF 的形式，然后在 HTML 的网页里可以通过 <SRC IMG=XXX.GIF> 指定该图像文件，由浏览器显示时自动实现动画的过程。 做动画 GIF 当然要使用工具软件，你可以到 http://www.mindworkshop.com 那里下载一个做动画 GIF的软件 “GIF Construction Set” ，通过它就可以做一些简单的动画了。 下载安装后启动该软件，可以通过会话式的画面做一些简单的动画GIF。举例如下： 假如你的文件夹里已经有 A.GIF 和 B.GIF 两个相同大小的图像文件。按“FILE-->NEW”建立一个新的图像文件，然后，按“INSERT-->IMAGE”，选择你的工作文件夹，选中 A.GIF 和 B.GIF 。此时，在画面的左侧会显示： “HEADER_……”“IMAGE_A.GIF……”“IMAGE_B.GIF……”等文字行，右侧则显示你选中图像的略图。你可以将光标停在“IMAGE_A.GIF”后按“INSERT-->CONTROL”，这时在“IMAGE_A.GIF”下面会增加一行“CONTROL_……”。这行就是一个动作的指定，最简单的情况就是时间延迟。你双击该行文字后，会弹出一个小窗口，可以修改延迟时间等常数。同理，你在“IMAGE_B.GIF”后面也可以加一个控制行。当然你想使得两幅图像循环交替显示的话，可以按“INSERT-->LOOP”，增加一个循环控制。你也可以双击该行文字，修改循环控制的常数。譬如循环100次或无限次等等。然后，你就可以按“VIEW”来看看你自己做的第一个动画GIF的效果了。再按鼠标右键回到你的编辑状态，对设定的常数进行反复修改，直到你满意为止。 最后，别忘记存盘。按“FILE-->SAVE”，然后起个文件名就可以了。这个“GIF Construction Set” 软件的功能很丰富，这里限于篇幅只能举一个最简单的例子，读者入门后就能自己慢慢地研究，用这个软件就可以做出很漂亮的动画。 当然，如果你拥有PHOTOSHOP的话，也可以用PHOTOSHOP来制作动画 GIF，PHOTOSHOP是一个常用的功能很强的图像处理软件。 ☆ 什么是 JAVA-SCRIPT 计算机语言中有一种叫做 JAVA 的语言，但是在 HTML 中可以嵌入一种叫做 “JAVA-SCRIPT”的语言。 JAVA-SCRIPT 既不是 JAVA 语言，也不能算作 HTML 的一部份。它只不过是扩充了 HTML 的功能罢了。 JAVA-SCRIPT 相对 HTML 的 TAG 来讲要复杂得多。这里只能略举两个简单的例子，使读者有个大致的概念。 例一。在你的网页 HTML 文件的 BODY 中加入以下几行，看看会出现什么结果呢？ <SCRIPT LANGUAGE="JavaScript"> <!-- alert("欢迎光临我的网页"); //--> </SCRIPT> 在显示你的网页的同时，弹出一个小窗口，显示"欢迎光临我的网页"。其中 <!-- 和 //--> 主要是为了在不支持 JavaScript 的浏览器显示时不出现错误信息。这是最简单的一个例子，仅一句语句。一般 JavaScript 以函数的形式出现，你必须具备一定的编程能力才能掌握它。请看例二。 例二。在浏览器的状态条上滚动显示信息。 <SCRIPT LANGUAGE="JavaScript"> <!-- msg="abcdefghijklmnopqrstuvwxyz" function setstatus() { msg=msg.substring(1,msg.length) + msg.substring(0,1); window.status=msg; setTimeout("setstatus()",500); } //--> </SCRIPT> 在 BODY 中追加 ONLOAD，写成<BODY onload=setstatus()>，就是说在将网页显示的时候调用函数setstatus()。函数setstatus()的目的就是将一串字符进行适当的加工(即“循环”)，放入窗口的状态条上。其中， setTimeout 意思是经过一定的时间反复做这个动作。其效果就是在状态条上出现滚动的字符串。 顺便说明一句，迄今为止介绍的 HTML 和 JAVA-SCRIPT 都不具有“写”的功能，即在显示页面的时候不能修改存储媒介上的文件，譬如你还不能自己做一个计数器。如果你要使用计数器和留言簿的话，需要使用 CGI 技术来实现，这就不是三言两语能说明的了。 ☆ 如何将做好的网页发送出去 做好了网页，如果只放在你自己的机器里，那么也就只能自我欣赏了。你如果没有自己的服务商提供的网页空间的话，可以在网上申请免费的网页空间来存放你的网页。譬如你进入 HOOPS (http://www.hoops.ne.jp) 的网页，很方便地就能申请任意大小的空间供你使用。申请后他会发给你一个邮件告诉你有关信息：用户名(譬如abc)，密码(譬如12345)，HOST名(譬如user07.hoops.ne.jp)等等。 有了空间，你就可以使用传送软件将你做好的网页传上去。网上有许多免费的传送软件大同小异，试举一例。你到 http://www2.biglobe.ne.jp/~sota/ 那里就可以下载一个叫做 FFFTP 的软件。该软件使用简单，介绍如下： “接续”之前，先进入 HOST 设定的画面。在有关栏目内输入以下信息：设定名(自己任意设定)，HOST名，用户名，密码。这四个参数是必须的，还有文件夹等栏目可以不填。按 OK 结束设定，“接续”上网。 此时画面划分为左右两部份。左侧窗口显示的是你的电脑的内容，右侧窗口则显示的是 HOOPS 服务器的情况。在左侧相应的文件夹里选中你要上载的文件名，然后点击工具条中的“↑”，该软件就会将你指定的文件一一上传到服务器相应的文件夹里。 一般情况下，网站运行的缺省文件名为 index.html。如果你的网页的文件名为 index.html。那么，你就可以在浏览器的地址栏里输入：http://abc.hoops.ne.jp 确认一下你的网页是否上载成功。如果你的网页文件名为 test.html。那么，你就要在浏览器的地址栏里输入：http://abc.hoops.ne.jp/test.html 有一点注意事项：一般网站操作系统严格区分字母大小写，网页及调用语句中的文件名要规范化，统一为小写字母为好。 陈老师给大家讲了十次“网页制作入门”，从零开始到将网页发送至网站。限于篇幅，只能提纲挈领，而不可能面面俱到。若有疑问之处，欢迎来电询问：johnchen888@yahoo.com |