烘焙鸡快速“烹调”法

弓箭手
1998年 第09期 07版

    看着网上缤纷多彩的各类主页（HomePage），你有没有想过自己做一个呢？本文讲的正是主页（HomePage，网虫常戏称为“烘焙 鸡”）的制作方法。
    我们在网上用浏览器看到的每一页内容都是由一些使用HTML语言的文本文件组成（一页对应一个文件）。上就是说，用写字板就能够做出主页，但我这里推荐你使用一种专用于主页制作的软件——HotDog Professional。它不们简化了主页的编写过程，还能让大家在其中熟悉HTML语言，甚至可以做GIF动画。从电脑专业媒体《ZDNET》曾经做过的一次调查得知，Internet上竟有80%的主贞设计人员是使用HotDog，其受欢迎程度就可想而之了。快快把它装上（《电脑报配套光盘第三辑》上就有，当然也可以在网上下载它的最新版本，试一试这个站点http：//WWW.nease.net/~Z。
#1    一、安装HotDog
    以其Ver 4.5为例，运行安装程序，HotDog首先会请你确定是否安装（点击“OK”），接着问是否接受其协议（点击“Accept”），然后可以选择装到硬盘上哪个目录了（不选请直接点击“OK”），又向你是否生成备份（没必要，点“NO”即可），HotDog会立即开始往硬盘里复制文件。
    如果你用的是中文Windows，系统会提示你一个文件使用了与Windows不同的语言或代码页，是否保留？请选“是（Y）"保留。
    提示又来了，问你是否使HotDog有声音（随你便啦），是否添加快捷方式到Windows的开始菜单（点“Yes”再好不过），终于，这条“小狗”说“恭喜你，安装完成了！”不过还得点“OK”，接下来问你是否立即启动它，先点“Yes”启动吧！你是要购买、注册还是试用呢’反正我是选“Trial Software"（试用）。再点“Finish”，HotDog就开始初始化。
    咦！怎么又有提示？原来Hotdog内置有一个浏览器，它使你可以预览正在制做的主页的模样。但是这“小狗”发现你早已装有IE之类的浏览器（若你没装，这个提示也就不会有了），“于是，就问你是否用以前安装的浏览器来代替内置浏览器的工作（点“Yes”是替换）。你懂英文吗？脸别红嘛！我也不太懂的。那么新出现的选项“告诉我关于HotDog”、“开始教程”、“告诉我关于全球互联网”就抛开不管了，直接点“Just Start HotDog（只启动HotDog）”进入编辑页面吧。
    如果你不想在下次运行HotDog时又有上面四个选项，请先选“Don＇t show me this screen again”。
    “汪汪”，哪来的狗叫？我又没养狗呀！仔细一听，方知是HotDog发出来的。吓我一跳。接着出现页面^090701a^，恭喜你！你已经见到自己的主页“梦工厂”啦！
    和Word有些相似，HotDog也有菜单栏和工具栏。但是它在工具栏的下面是三个框！左边是浮动工具框（多种浮动工具使制作更加快捷方便），右上是一个文本框（就是用了HTML语言的源文件的内容，图中是HotDog的Readme.html文件），右下是主页预览框（就是用济览器看Readme.html时的模样了，即可以看到你正在做的主页）。即做即可见，怎么样？我推荐的东西不错吧！
#1      二、用HotDog制作主页的一般方法
    请注意，开始正式教学了。首先，点击图标"新文件”（见“工具图标注释图”标示^090701b^）或“File”菜单里的“New，建立一个新的主页文件。如^090701c^出现——HotDog已经在源文件框里替我们把一个主页文件应有的基本语句（称为“标签”，是一前一后相互对应的，缺一不可）列出来了：①文件首行的＜html＞和未行的＜／html＞标签分别表示这个主页文件的开始和结尾之处；②＜head＞  ＜／head＞标签之间用于放些语句对这个主页做说明；③＜title＞＜／title＞之间是这个主页的标题，就是在浏览器取最左上角显示的文字；④＜body＞  ＜／body＞之间则放正文，也就是你主页的核心部分（大量的文字、图片和相关的链接）。现在我们该做些什么?当然要先给自己的主页取个好听的名字，叫什么好呢？你慢慢想去吧。我就叫它“风云小箭”，把原来＜title＞  ＜／title＞之间的文字统统用“风云小箭”替换掉便是啦。
    接下来，便是做主页的核心部分：
#1    （一）字的设置
    就在文本框里的“＜body＞”和“＜／body＞”标签之间输入想要显示出来的文字即可。这次输入“风云小箭”四个字。瞧，已经出来了，在预览框的左上角（见^090701d^）。我想用它作本页标题（请把它与＜title＞  ＜／title＞之间的标题分开，是在浏览器正文框里显示的），怎样让它居中呢？在源文件框里选中它们后（从“风”字开始，按着鼠标左键不放往右拉，一直到“箭”字结束）再点一下图标“居中”即可。想改变这字的大小？！请点“H？”图标（当然得先选中你想改变的文字，不用再教了吧），再选“H1”到“H7”中任一项（“Heading 1”最大，“Heading 6”最小，“None”是默认大小）。我选了“Heading 1”，字已变得很大了（见^090701e^）
    另一种方法是选中文字后点击“字体设置”图标（快捷键“F2”），弹出一个窗口（见^090701f^），在“字体”一栏，点下拉键后有多种字体可选（是Windows系统里所安装的，如果装了多种中文字体，劝你只选宋、仿宋、黑、楷好，因为大多数人只装有这四种；“大小”栏有“1”至“7”，“＋1”至“＋7”，“－1”至“－7”（“＋1”的意思是“3＋1”，等于“4”的大小，因为“3”是浏览器的缺省值，文字在无大小说明时都以“3”的大小显示，其余“＋X”、“－X”类推。总之，数字越大字就越大）共21项；“颜色”这栏请点“红蓝绿黄四色圆圈”的图标，将有一个颜色表供你选择，鼠标点一下就选中。选中后点“OK”，又回到^090701f^界面，不过颜色已经填好了，再点“OK”。行了，刷新一下，看看效果，还不错吧！另外，工具栏上还有“B”（使字变粗）、“I”（使字变斜）、“U”（加下划线）、“BR”（强制断行，相当于字处理软件中的硬回车作用）几个图标。好了，关于字的做法就介绍到这里。
#1    （二）图片的设置
    这个就简单多了。把光标移到源文件框中中新的一行（当然得在＜body＞  ＜／body＞之间，直接点击工具栏上的“插入图像”图标（屏幕变为^090701g^），在“Fi1ename”项填写好图片的文件名后“OK”，如果不想按图片原尺寸显示，可以上先在“Height”（高）、“Width”（宽）中填入大小。这里的大小是像素点。比如你的电脑正使用640×480的显示分辨率，输入的宽为“64”，高为“48”。图片显示出来的效果宽为屏幕宽的十他分之一，高也为十分之一。至于800×600、1024×768的分辨率请依次类推。还以在“Text description of the image”里加入一些对这个图片的说明，以便在访客等待图片下载时初步了解图片的内容或作用。
#1    （三）添加超链接、
    你想让来访者点击你主页中某个地方后就到另一
页吗？这并不难。
    （1）用文字进行链接
    选中“风云小箭”，点击工具栏上“插入链接”。看见了吗（^090701h^）？“URL”（即主页地址）中已有“http：//”的字样了，你要做的就是把地址补充完全。输入WWW. nease.net／~Z，点击“OK”，再看预览窗，“风云小箭”已经加上了下划线。把鼠标移过去，立刻变成了手形，点点看，哟！已经到了我的主页！
    当然，你还可以让人点了“风云小箭”后下载一个软件（在上图中把该软件的地址输到“URL”中即可）或是给你写信。
    例如，在上图中点击“插入链接向导”，屏幕变为^090701i^。在“Link Type”中选择“EmaiI  Link”，进行下一步“Next＞＞”。
    在^090701j^中的“Email address”输入一个电子邮件地址
“z@nease.net”，点“Next＞＞”，再点击“Finish”得到^090701k^。
    瞧！“URL”中已有了Mailto:z@nease.net字样，点“OK”。刷新一次，这时点“风云小箭”就会启动你的Windows所默认的邮件收发软件给我写信了。
    （2）用图片进行链接
    选中图片，重复以上用文字链接的步骤，就可以了。
#1    （四）背景的设置
    背景如果老是白色，即使文字、图片做得再漂亮，也会显得十分单调。让我们用其它颜色或图片做背景吧！在源文件框里把光标移到“＜Body＞”处，看看浮动工具框中“HTML Properties”窗口。是不是有了“Tag  ＜Body＞”一栏？其中“Backcolor”是设置背景色，点它一下后，便变成了^090701l^的模样，点新出现的有三小点的按钮，就会有一个颜色表随你挑啦！若觉得这样还不过瘾，可点“Background”（设置图片为为背景）。再点“Background”后那个有三小点的按钮）就会弹出新窗口让你指定背景图片，可要与前景协调哦!
    此外，也可以在此设置本页文字的颜色（“Text”，此处设定后，本页文字均为此色，如有局部文字需设为另外的颜色，可按前面介绍的方法另设置颜色），及含超链接的文字点击前的颜色（“link”，浏览器默认为蓝色），含超链接文字被点击后的颜色（“Vlink”，默认为红色）。其实，最简单的方法是点击工具图标“文本设置”来进行设置，但为了能让大家熟悉浮动工具栏的使用方式，就讲得稍复杂一点。
#1    （五）表格的制作
    “快速制表”确实是很快，点了这个工具图标，只需移动鼠标得到合适大小后（见^090701m^），轻击鼠标右键，一个表格的源代码就生成了。“喂，小子！怎么预览框里没变化呀。”别急嘛！看，浮动工具框中“HTML Properties”窗口下有了“Tag  ＜Table＞”栏。若没有，请把光标移到源文件框中“＜Table＞”处，每对标签在光标移到其第一个时，均会在浮动工具栏里出现相应选项，姑且称之为“选择浮动工具”吧。
    “Border”一项是设置表格边线粗细（由数字表示，数值越大边线越粗，为0则无边线），点击后有“增”、“减”两个小按钮，用来改变数值（也可以在光标处直接输入数字）。“Width”（宽）。“Height”（高）两项则分别是设置整个表的大小，同图片的宽、高一样用像素点的值表示。另外也可以用“x％”的形式（例：宽的值输入了“80％”，则表格的宽是显示主页的窗口宽的80％）。“Align”设置表在主页窗口的横向位置（“left”是左对齐，“Center”是居中），“Valign”设置表纵向位置（“Ttop”是向上靠，“Middle”是居中，“Bottom”是向下靠，“Baseline”是与底线对齐）。我们将边线粗细设为“3”、宽“80％”、高“500”，Align为“Center”。
    内容怎么加入呢？且看^090701n^，其中，一对“＜tr＞”、“＜/tr＞”标签就表示一行表格（现有两对，即有两行表格）。而“＜td＞”“＜/td＞”则表示一行表中的一栏（现“<tr>”、“＜/tr＞”中有三对“<td>”、“＜/td＞”．即一行表有三栏），在“<td>”、“＜/td＞”之间加入文字或图片就行啦。这两种标签也可以选择浮动工具。“＜td＞”有“Align”（设置文字横向对齐方式）、“Valign”（设置文字纵向对齐方式）、“Height”（设置此格高度）、“Width”（设置此格宽度）、“Colspan”（设置此格纵向跨格数）、“Rowspan”（设置此格横向跨格数）、“Bgcolor”（设置背景色）等选项……而“<tr>”仅有“Align”、“Valign、“Bgcolor”等选项……加进内容了吗？刷新看看，这——不就有了么！
    如果你嫌这样还是很麻烦，可以点“插入表格”。将出现一些英文提示，不必管它，进行“Next＞＞”。共有六种风格的表样供你选择，想要什么；就选什么，然后根据提示慢慢做就可以了。如果不懂英文，哈哈……可以装个汉化软件连蒙带猜嘛。
    在文章结束之前，送大家一个“礼物”吧，它就是——网页计数器（可统计你的主页被访次数）。这里介绍的这个计数器由广州网易免费提供（我搜集有网上很多免费的东西），有数百种图样可供你选择，很不错的。而且它的做法也很简单，只需加入“＜img src＝htip://WWW.nease.net/cgi-bin/Count.cgi?ft=7&md＝6&frgb＝255;215;0&dd＝A|df＝ok123.dat border＝0＞”这样一句在<body>”和“＜/body＞”之间。在句中“Count.cgi?”后的字符是使用计数器的参数，参数之间用“|”或“&”隔开。“ft=7”中的“7”可以是任一数值，用于设定边框大小，为“0”则没有边框；“md＝6”表示计数器的值是6位数（允许的范围是5到10位）；“frg=255；215；0”中“255；215；0”是计数器边框颜色代码:“dd=A”中的“A”是计数器图样的代码，你只需到hitp：//WWW.nease.net/n-space/about/counter.himl，找到自己最喜欢的图样代码替代“A”即可；“df＝okl23.dat”中的“okl23.dat”是存放主页被访次数的文件名（你需要把这个文件名改得与众不同——因为一旦与别人使用的文件名相同，你的主页被访记录也会与别人的累加在一起）。怎么样？这个礼物不错吧！？
    最后，也是最重要的一点——别忘了存盘哟！还有，你可以在“＜Body＞”和“＜／Body＞”之间随意移动一段语句（但得保证该语句完整）以调整图片成文字的位置。在做新的一步或加入标签前，注意光标一定不能在另一个标签处，如：“＜Table＞”，光标在字母“e”前，这时新加入标签会把源文件搞得乱七八糟（预览框自然也要乱套了）。
    本文只给大家介绍了一些基本的主页制作法，你要想更深入了解（比如怎样做“帧”什么的），不妨到我的“网上乐土”相聚（URL:“http://WWW.nease.net/~Z”；E-Mail：“zhning@nease.net”；ICQ：“6926759”，每日12小时在线）。