网页制作培训讲课文稿草案

        你是否紧跟时代的潮流上了网？你在聊天室里是否听过别人聊起自己的个人主页，你会不会觉得自己没有个人主页就落伍了？有没有想过自己也要做一个主页？想过？那你还瞎呆在那里干什么？什么？不会？好好听晚了我们安排的这些交流，但愿你对网页有新的认识！ 今天晚上，教你学会使用微软公司的Frontpage，学会干什么？当然是做你的个人主页啦。或许你认为制作主页是一门很深奥的工作，需要懂得大量的计算机知识。我现在要告诉你，你错了。在这个流行图形操作系统的今天，制作主页不再需要你去学习复杂，烦躁的HTML语言了，你只需要知道一个概念：主页（也称网页，怎么样称呼都无所谓）就象一张白纸，你可以在上面写字，画画等等，通过自己的设计，那张白纸可以变成很漂亮。做主页时就是这个概念，只不过我们写字，画画是用笔和白纸，而做主页我们是用鼠标，键盘和Frontpage：）当然制作网页的工具不单只有Frontpage，还有许许多多好用的工具。但是对于初学者来说，Frontpage是最好不过了，因为它操作简单，方便使用，最适合初学者。或许你下了决心要做一个专业网页制作人员，要学会更多更专业的网页制作工具，但是我还是希望你先学习使用Frontpage，打好扎实的基础怎么样也好一点对吧。
        学习本教程之前，你要准备好：电脑一部，当然包括鼠标和键盘，不然还了得：）还有就是你的电脑要装上Frontpage，因为一边阅读教程一边实际操作总要好一些吧。
Frontpage可以从微软的Office2000里进行安装，Office2000哪里有？现在盗版之风吹遍大江南北，不用我介绍了吧：）安装好了Frontpage，我们就可以开始学习了。努力，奋斗：）
        认识Frontpage
        首先我们来认识一下Frontpage的操作界面）。
         对于初学者来说，一看到有那么多的菜单和那么多的按纽，不禁会吓一大跳：“太复杂了，我看我还是不行了。”哈哈，请你放心，你太抬举Frontpage了，其实它没什么，就那么一点，你完全可以“征服”它的，给自己一点信心：）
        我们来把Frontpage的界面划分成两半，你可以看见图3上面有一条红线，当然在你的Frontpage上面是没有的，这只是我自己画上去的，为了大家好区分。
        好的，那么我们看，我们把红线以上的那部分叫控制窗，红线以下的叫制作窗。
        控制窗包括常见的那些“文件，编辑”菜单，虽然看上去挺多挺复杂，但是它大部分常用的命令都归到了下面一栏的按纽栏中去了。你看，在流行图形操作界面的今天，我们是多么地幸福啊：）下面一栏为属性栏，我们可以用这栏来定置文字和图片的属性等等。
制作窗包括编辑区和切换按纽。我们就把编辑区当做是一张白纸吧，你可以在上面写字（用键盘打字）和画画（插入图片），具体操作我们将在下几章学习。编辑区左下角有三个按纽，我们把它们叫做切换按纽：点“普通”按纽，就会出现默认的编辑区。点“HTML”按纽，编辑区就会变成一个满是英文（？！）的窗口，我们可以在这里编辑HTML，但是对于初学者，我不建议你去乱动。做好了网页的时候，我们可以点一下“预览”按纽来观看自己做的网页，不满意可以再点“普通”按纽回到编辑区修改。
        怎么样，刚开始的那点干劲还在不在？在的话请你继续阅读下几章，你一定会学会的。等你学会用Frontpage做好了你的主页，可别忘了通知我去参观考察一翻啊：）
要点：
分清本教程中我为Frontpage取的各个名字。
从现在开始，我们来学习制作你的第一个主页：）
首先我们要知道，我们说的个人主页，说专业一点，应该说是个人网站。怎么说呢，因为一个网站，是由许许多多的网页，图片等等组成的，我们说的主页，其实是指这个网站的第一页。打个比方，回到家里，首先你会进入客厅（客厅等于主页），客厅里面有许多的装饰物（装饰物等于主页的内容），在客厅里休息了以后，你就会干其他事情，比如进厨房煮饭（厨房等于你的网站中的第二个网页），而厨房里就会有很多用具（厨房用具等于网站中第二个网页的内容）。如此反复下去，家里还有睡房，厕所，阳台等等，那你的网站中就会有第三个网页，第四个，第五个，甚至达到几千个。这样你能理解了吗？一个网站就等于一个家。当然我们家不是开大饭店的，没那么多房间：）
        这个家怎么样才有呢？我们先运行Frontpage，在控制窗的菜单栏里选择“新建→站点”（如图1）。

        Frontpage自带有一些网站的模板（意思就是按照它的意思去做），我们一般不使用这些模板，我们在左边的模板选择窗里选“空站点”，然后在右边的“选项，指定新站点的位置”中敲入你想保存这个网站的文件夹地址。一般第一次使用Frontpage的时候它自动就生成了一个新站点，保存的“我的文档”的“My Webs”文件夹中。你也可以重新建立一个文件夹作为网站的存放点。我们在以下称保存网站的文件夹为“网站文件夹”或者是“主文件夹”。
        建立好了新站点，你会发现Frontpage的标题栏就变成是“C:\\My Documents\\My Webs”里，这样的话就表示你已经打开了某个网站。或许你还创建了其他网站，我们可以通过Frontpage的菜单栏里面的“文件→打开站点”来打开其他站点

        在弹出的窗口下放选择保存网站的文件夹地址（如图4），再按“打开”按纽就打开了。
        一般运行了Frontpage的同时它就自行打开了最近编辑的一个站点。有时你不想编辑此站点可以点击菜单栏的“文件→关闭站点“关闭它。
        创建了好了新站点的同时，你按控制窗的按纽栏里面的打开文件夹列表或者到网站文件夹看一下，是不是多了两个新文件夹？一个叫“images”的文件夹是供我们用来保存本网站中的图片文件的，在制作网页之前你先把要用到的图片都保存到这里。还有一个叫“_private”的文件夹，而且日后你会发现在“images”文件夹或者文件夹中出现许多象“_vti_cnf”之类莫名其妙的文件夹，其实这是系统用来做缓存的文件夹，我们不要认为它是垃圾就把它删了，有用的，不要删了，当然你也可以删除了，我是从来就删除的~~因为我看着他不舒服。
        为了方便管理，你也可以自己添加一些文件夹用来保存其他内容，比如添加一个名为“webs”的文件夹用来保存网站的其他网页，这样大家管理起来就不会觉得很凌乱了。
这里要注意一下，凡是添加的文件夹，或者是保存在文件夹里面的所有东西，都必须是以英文命名的。不然就会出现连接错误而不能浏览。总之一句话，网站里的所有东西都用英文名：）
当然你也可以从网站中删除某些文件或者文件夹，具体做法和新建文件夹差不多，大家多实践一下。
到了这里，或许你会认为什么主页，什么第二个主页，什么主页又不是网站什么的，一头雾水。那你可以看一下图6，这样能好理解一点：）或者是这样解释：图6中的“主文件夹”就是刚才打比方说的家，“主文件”就是家里的客厅，当然可以有许多主文件的。但是你要记住，一个网站中真正的主页名必须是“index.htm”或者是“index.html”，也是唯一的，为什么要这样做我以后会解释。而“子文件夹”就是指家里的厨房，“子文件”就是指厨房里的装饰或者是用具。同样你也可以有许多的“子文件夹”和“子文件”的。
这样说能理解了吗？
到的，到目前为止我们已经学习了创建一个站点，并且对其进行管理。在下一讲中，我们将学习制作网站里的第一个网页，不要错过了：）
要点：
1网站中使用到的图片都必须保存在网站文件夹（主文件夹）里面。
2网站文件夹里面“_private”“_vti_cnf”之类的文件夹不要删除。
3掌握在网站文件夹里面新建或者删除子文件夹。
如我在一开始比喻的一样，网页就象一张白纸，该如何让它显得美观，华丽，关键是要看网页设计者自己。网页中少不了文字和图象，把文字和图象摆在自己希望的位置，一个网页就出来了。其实制作网页就这么简单，你也不想我浪费口水了吧？那我们马上开始。
我们新建一个网页，你可以点击控制窗按纽栏的来新建一个网页。
网页上的文字如何制作你该不会不知道吧？在编辑区打字，你打出来的文字就会出现在光标闪动的地方（如图1）。我们在编辑区打上“你好，欢迎你光临我的主页。”
你可能不希望网页上的文字都一样，只是黑色的吧。你可能希望它是红色，也可能希望它是蓝色。又或者你希望某些文字比较大，而且还有一些特殊效果。如何才能做到更改文字？很简单。我们用按住鼠标的左键，把你想改变颜色的字括起来，括起来之后按鼠标右键，选择弹出菜单中的“文字”。接下来会弹出窗口中选择你想要改变的方式（如字体菜单可选择你希望的字体，字型可以改变文字的形状，可以是粗体也可以是倾斜体，大小就是改变文字的大小，还可以改变颜色和增加一些文字的效果。更改好了可以在预览区预览一下，不满意可以再改。
网页中最主要的元素除了文字，就是图片。大家记住，插入网页中的图片格式必须是“JPG”或者是“GIF”格式的，读者如何区分这两种格式呢与其他格式的不同呢？这里要提醒一下大家：在前面已经跟大家提过网站中图片的保存位置了，大家必须把网页中使用到的图片保存在网站文件夹的“images”文件夹中。要是你插入的图片不是保存在网站文件夹里的话，那你做好网页浏览的时候就看不到网页中你插入的图片了。所以大家要紧记，网站中所有的文件，包括网页，图片等等都必须保存在这个网站的文件夹中，还必须用英文名字。

还要注意的一点就是：已经插入网页中的图片，你就不能再修改那张图片的文件名了，否则在浏览时同样会出现看不见图片的后果。
到目前为止，一个简单的网页就算制作成功了，点击制作窗的切换按纽中的“预览”按纽预览一下。对于这个网页嘛，有些读者会大骂：“什么破玩意，怎么见得了人呢！”可能另一些读者会说：“哦，小宝贝，这是我做的第一个主页，要好好保存起来。”哈哈，具体你会怎么样做我可猜不着。怎么说也是第一个，也只能做到这种水平了：）如果你想学习把网页做的更好看一点的话，欢迎你跟我一起继续往下看~~~~~~
要点：
1修改文字的属性时必须把需要修改的文字用鼠标左键括起来。
2网站内所有文件都必须保存在网站文件夹内。
3已经插入到网页中的图片不能再修改它的文件名。
你可能实在是很厌恶上一节中所做的那个网页，因为实在是太“次”了！
那好，我们接着学，争取更专业：）
        上一节当中我们做的网页（如图8），给人的第一感觉除了是“次”的要死以外就是凌乱。
        网页就是这样，要想给人一种视觉上的冲击或是享受，你就必须会搭配文字与图片等等元素。我们要怎么样做才能更方便地把网页上的元素整齐地摆放好呢？这就要用到表格了。
表格在网页中是用的最广泛，也是用处最大的一个元素。
怎么样在网页中使用表格呢？我们点击Frontpage控制窗菜单栏的“表格→插入→表格”，在弹出的窗口中选择要插入表格的要求。选择好之后按确定，就在你的网页上插了表格了。
到这里有些朋友又要大骂了：“什么鬼东西，还不是和刚才一样垃圾！”哈哈，好戏这才开始呢。
        刚才说了，如果把文字和图片移到网页的中间就会比较好看，那我们现在就移动它。
具体怎么样移呢？难道要我们可爱的朋友不停地在文字或者前面狂按空格键？不是的，很简单就可以做到了。
        我们用鼠标左键把表格括起来使里面的文字和图片被选中，把鼠标依到表格的顶端的边缘线上上按左键，把它括起来。括好之后我们按控制窗的按纽栏里面的居中按纽，使选中的内容居中（如图14）。以后有需要你也可以使用按纽栏里面的做对齐，右对齐按纽。
接下来我们继续编辑网页里面的内容，依旧使用表格和居中按纽，添加一些自己喜欢的内容。
        我在原先“Welcome”的图片下面再插入一张图片，在图片下面再添加了一些内容。这样整个页面就做好了：）是不是很不错了？够专业了吧：）什么？还不专业？哦，对对…… 的确还不专业，因为这个网页上缺少了超级连接。
超级连接是一个网站的灵魂。可以这么说，超级连接就向你家里的每一个房间的门。网站也一样，如果你的子文件做的非常非常好，但是没有超级连接，浏览者就只能看到网站的主页了，而不能看到后面的子文件了。所以，超级连接在网页中起了很重要的作用。
不要以为很重要就很难学了，不是的。在Frontpage里做超级连接就象是打字一样简单：）
我们先不要管刚才做好的网页，先把它保存起来。点按纽栏的保存按纽保存刚才做的网页，由于是主页，所以保存时的应该把它命名为“index.htm”或者是“index.html”
我们再新建一个网页，在编辑区编辑你自己的自我介绍，然后保存，记住用英文名保存，比如用“ziwojieshao.htm”，不能用中文。
        保存好了，我们重新打开刚才保存的主页（index.htm），为主页上的“自我介绍：做超级连接。
        用鼠标左键括起主页上的“自我介绍”四个字，然后点击按纽栏的超级连接按纽，在弹出的窗口中选择刚才保存的“ziwojieshao.htm”（如图17）。
按确定。如果你发现“自我介绍”四个字下面多了一条横线，说明你的超级连接就做成功了：）
        依次把“我的收藏”“我的爱好”等几个网页做好，并依次为它们做上连接。
当做“给我写信”的连接的时候，要注意一下它的做法稍有不同。由于是给你写信的连接，点击这个连接之后系统就会自动运行电子邮件程序给你发邮件。所以这个连接的地址应该是你的电子邮箱地址。在点超级连接按纽弹出的窗口中点画着圈圈的按纽，在另一个弹出的小窗口中填写你的邮箱地址，就行了。
        竟然文字可以做连接，那图片可以给它做个连接吗？当然可以啊，点击你想要做连接的图片，并按按纽栏的超级连接按纽，跟做文字连接的做法完全一样。
        这里还有最后的补充：每个网页都应该有标题嘛，如何定置网页的标题呢？在网页的空白处点击鼠标右键，选择“网页属性”，弹出另一个窗口。

        在“标题”栏填写你想要的标题，按确定就行了。你也可以为你的网页使用背景图案，那样网页看起来就更好了。点击“网页属性”窗口的“背景”按纽，或是使用背景色，或是使用背景图案，一切由你决定。你还可以在这里定置超级连接的颜色呢，真是太棒了！
到此为止，你的第一个网站诞生了：）为了纪念又一位专业级的网页设计师诞生，我号召全家人为他鼓掌三秒钟：）
        什么？还不专业？！够专业的了！什么？网易，新浪才算专业？！*_* 你这是什么道理？专业就是这样的了，只不过你认为的专业就是象网易，新浪那样的专业。其实它们之所以会让你觉得专业，是因为他们内容齐全，分类详细，而且还是商业公司，每天同时有几百个员工在更新它的网站的。如果你愿意勤劳一点，每天更新一下你的网站，放一点更好的内容，这样就专业了。什么？！…… 你想做成网易，新浪那样？！用你们王辅导员的话说就是：小伙子，有前途！
        网站是做好了，但是你是不是还觉得平平淡淡呢？有兴趣学做更漂亮一点的网页吗？那你可        要留意我今下来的内容啦——精彩！
        要点：
1学会善于运用表格，是整个网页页面看起来更整洁。
2多使用“左对齐”“居中”“右对齐”按纽配合表格的使用。
3保存网页时记住不能使用中文保存。
4做超级连接时要细心，不然很容易出现连接错误。
5不谈专业与否，一个出色的网站关键在于创意。

        现在我们来学习如何制作使用了框架的网页。
        首先我们要知道使用框架的好处。善于使用框架，网页不仅可以使得页面更加，而且还可以使浏览者更加方便的浏览你的网页。那么学习制作使用了框架的网页难不难呢？老实说，其实这一点都不难。运行你的Frontpage，我们马上学习如何制作框架网页。
我们新建一个网页，注意这次新建不是点击按钮栏的按钮噢，我们点击“文件”菜单的“新建→网页”，在弹出的窗口中选择“框架网页”来新建一个。
        你可以在左边的选择框架样式窗中看到很多种框架的样式，具体选哪种就看你自己了，你我们点击左边和右边的“新建网页”按钮，这时你会看到出现了中间由一条线分开的两个“编辑区”这时我们的框架网页就建好了，接下来就是靠你自己了，看你怎么样编辑它了：）
竟然选择了“目录样式的框架，那么左边的编辑区就肯定是用来做目录的啦。我们在左边的目录依次编辑自己想要的目录，然后在右边编辑其他自己喜欢的内容。总体来看，是比较整洁一点了吧？好，我们依次为左边目录栏的目录做好连接。预览一下，肯定会吓你一跳，怎么内容全部都在左边，叫人怎么看啊。哈哈，其实为框架网页做连接是有一点学问的。我们要把左边目录的连接页面在右边显示，在做超级连接的时候应该设置一下。我们先来把一个目录做好，并点击超级连接按纽，在弹出的超级连接窗口中，我们选择“目标框架”在新弹出的窗口中你可以看到左上角有一个框架预览图，我们用鼠标点击框架预览图的右边框架，使它被选（如图27）。选好之后确认，灾回去预览一下，点击连接之后内容是不是出现在右边的框架了？
        好了，框架网页就学到这里。有些读者可能埋怨我讲解的不详细，哈哈，但是我要讲的就是这些，其他都没什么重要的。怎么样搭配框架网页并把它制作好，关键还是在于你自己啊，可不要老埋怨我。
到现在为止，你该知道怎么样使用Frontpage做网页了吧？！你有没有想过在网页上耍一些花招？想学吗？哈哈，赶快看下一章的教程吧。
要点：
1善于使用框架网页制作独特的网页风格。
2掌握好框架网页的超级连接技巧。
3使用表格配合框架网页。

        想为你的网页添加一些花哨的东西吗？想的话就跟我学吧：）
        你一定看过别人的网页上会有一种文字会左右移动的，是不是觉得挺可爱的呢？它的做法很简单，我们点击菜单栏的“插入→组件→字幕”。
        在弹出的一个“字幕属性”窗口中设置一下就行了。我们在“文字”栏填上自己想要的文字，比如“欢迎你来到我的主页”。再设置一下其它选项，比如“方向”你选择了“左”的话，那么你做好的字幕就是从网页的左边开始向右边移动的。你还可以把其他设置成自己想要的，设置好之后按“确定”，回到编辑区你会看到有个方框包围着的字幕，点击“预览”按纽看一下，是不是很好可爱？
        来，我们来插入背景音乐，一边看网页，一边听音乐也是很爽的事情。网页属性—背影音乐

启示（1）定置表格
表格可以定置它的长宽，具体怎么做的？我们新建一个网页，插入一个一行一列的表格。在表格内点击鼠标右键，选择表格属性。在弹出的窗口中设置（如图1）。
启示（2）设置图片热点连接
有时你可能不希望一张图片都做上连接，只想为图片的某部分做上连接，这就叫做图片热点连接。如何做到呢？我们点击一下想要做热点连接的图片，你会看到Frontpage会自动在编辑区下面弹出一个工具栏。
你可以使用这些工具加工你的图片。而做热点连接我们只需要使用到工具栏的几个按纽。她们分别是可以选取各种形状来做热点连接。我们选择长方形的热点工具，在图片上拉取一个想要做连接的区域，它就会自动弹出一个超级连接的窗口来，为它做好连接之后你会发现做热点连接的图片多了一个热点区。
这样就表示热点连接已经做好了。浏览的时候你就会发现这张图片内只有热点区才有连接而热点区以外是没有连接的。
启示（3）设置框架网页的属性
使用了框架网页的时候也许你会觉得网页中那条框架实在是令人讨厌，有什么办法可以使它消失吗？
        在编辑使用了框架的网页时你会发现编辑区下面的三个切换按纽变成了五个我们点击其中的“无框架”按纽，打开一个新的编辑区。上面写着“此网页使用了框架，但您的浏览器不支持框架。”我们不用修改这些，只需要要在编辑区点击右键，选择“网页属性”，在弹出的窗口中选择“框架”。你会看到有“显示边框”这个选项，我们把它前面的钩去掉，即是“框架间距”为0。点击切换按纽的“普通‘按纽回到框架也编辑区，你会发现框架已经消失了。
后记
        Frontpage的教程到现在我基本讲完了，开心的很：）你听得如何？
如果你是初学者，学习了本教程并且收获不少的话，但是还有许多不明白的问题的话，你可以给我发邮件，我会尽力帮你解答。或者你本来就是高手，看了我今天讲得觉得实在是垃圾得要死还拿出来献丑，也欢迎给予批评，但是我不赞成你炸我的邮箱：）切记切记。
我的邮箱是： zhangdongwww@126.com