烘焙鸡快速“烹调”法
我们在网上用浏览器看到的每一页内容都是由一些使用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小时在线)。