一步一步教你学会FrontPage网页制作.docx

一步一步教你学会FrontPage网页制作.docx

《一步一步教你学会FrontPage网页制作.docx》由会员分享，可在线阅读，更多相关《一步一步教你学会FrontPage网页制作.docx（26页珍藏版）》请在冰豆网上搜索。

一步一步教你学会FrontPage网页制作

一步一步教你学会FrontPage网页制作

第1课上网基础

 学习做网页之前，我们首先要知道网页是什么，一般来说网页是用在网络上的htm文件，通过网页可以很方便的实现网络资源的共享，上网分为三个步骤；

 1、输入正确的网址

  1）在桌面上找到InternetExplorer

，双击打开，出现浏览器窗口，一般会自动进入微软的网站；

  2）找到地址栏一个长白条，里面有一串以http打头的字符，这就是地址栏；

  3）在地址栏里头点一下鼠标左键，然后删除里面的字符，输入自己的的网址，网址一般是英文的以http打头，然后是一个冒号和两个斜杠（双斜杠），然后是www（三W），后面跟一个点，最后一般是com结尾，例如输入输完检查一下，没问题就按一下回车键，这时窗口右上角的小图标就开始运动，也就是正在搜索；

  4）一切正常就会进入到搜狐网站的首页；

 2、找超级链接

  网页上的内容是一页一页的，一般都藏在一个叫超链接的后面，所以第二步就是要找到超链接；

  超链接有三个特点，首先文字的颜色是蓝色的，非常醒目，其次文字下面有一条下划线，便于查找，最关键的是当鼠标移过去以后，指针会变成手形

，这一点很重要；

 找到超链接以后就可以鼠标左键单击，进入相应的内容了；

 3、后退按钮

  看完一页后如何返回呢？

在窗口的左上角有一个后退按钮

，点一下就可以回到上一页，这样就不会迷失方向了；

 其他还有浏览、下载、另存为等等也都是网络的功能；

 本节学习了上网的基础知识，学习了上网的三步曲，网址－超链接和后退，如果你成功地理解并完成了练习，请继续学习下一课内容。

第2课网页基础

 这一节我们来学习做网页，通过上一节我们可以知道网页包括标题、内容和超链接几部分组成，下面我们通过一个练习来看看怎样做一个网页；

 1、启动FrontPage

  1）单击“开始－程序－MicrosoftFrontPage”一个蓝色的箭头图标

，启动FrontPage程序，自动新建一个空白文档；

  2）单击工具栏上的保存按钮

，出现保存对话框，从上到下先找到自己的文件夹，然后在下边的文件名框里点一下，删除里面的字符，输入index然后再点旁边的“更改”按钮，输入网页标题“青青草”，单击“确定”－“保存”，就成功地新建一个网页；

 2、输入内容

  保存完毕回到窗口中，输入网页标题和内容，这里我们创建个人主页，一行一行往里面输入，一行输完按一下回车键到下一行：

  第一行是标题，也就是网页的名称，个人主页包括自己的简介、爱好等内容，注意输“联系”的时候，在冒号后面加一个空格就不会错了；

 3、格式设计

  下面把网页的版面设计一下，也就是把网页修饰的漂亮一些；

  1）背景色单击“格式”菜单，选择“背景”命令，如果没找着，就点一下菜单最下面的折叠按钮

，藏在下面呢；

  打开背景对话框以后，在中间找到“颜色”里面的“背景”，在“自动”上点一下，出来颜色对话框，在“其他颜色”上点一下，选一个自己喜欢的颜色，单击“确定”，背景色就加好了，单击“保存”按钮

，保存一下文件；

 2）标题修饰选中标题“青青草花园”，单击工具栏上的居中按钮

，让标题居中，然后从左到右依次选择字体、字号、颜色，字体设为华文彩云，字号设为6，颜色设为红色，注意颜色是大A按钮

，旁边的铅笔

是背景色，保存一下文件；

 3）文本修饰选中其他文本内容，把字体改为华文行楷，字号为4，颜色设为一个好看的颜色，保存一下文件；

 4）做好的网页怎么观看呢？

在工具栏上找到一个放大镜“浏览”按钮

，就可以查看自己的网页了（如果网页没出来，就到底下的任务栏上找一找）。

第3课网页练习

 这一节我们来做网页练习，先在自己的文件夹里给每个要建的网页创建一个文件夹，名字改为每个网页的标题，保存网页的时候文件名都起成index也就是主页的意思，网页标题“更改”为标题，并且对内容进行修饰和设计；

 在做下一个网页之前，先在“文件”菜单中“关闭”这一个网页，然后点“文件－新建－网页－确定”

  1）给自己的爸爸建一个网页；

  2）给自己的妈妈建一个网页；

  3）给自己的爷爷建一个网页；

  4）给自己的奶奶建一个网页；

  5）给自己的外公建一个网页；

  6）给自己的外婆建一个网页；

  7）给自己的哥哥建一个网页；

  8）给自己的姐姐建一个网页；

  9）给自己的弟弟建一个网页；

  10）给自己的妹妹建一个网页；

第4课创建网站

 网页的内容除了文本以外，还包括图片、音乐、动画等等，网页提供了一个窗口、一个界面，一个供大家展示的舞台，各个项目有机的组合在一起，构成一个网站，下面我们通过一个例子来看看怎样创建一个网站；

 1、创建新站点

  1）启动FrontPage，自动新建一个空白文档“new_page_1.htm”；

  新建站点的方法有两种，一种是“新建站点”命令，另一种是“打开站点”命令，我们学习第二种方法；

  2）单击“文件”菜单，找到“打开站点”命令

，出来一个打开对话框，从上到下先找到自己的文件夹，然后单击对话框右上角的“新建文件夹”

按钮，出现新建对话框；

  3）在“名称”栏里输入自己的名字，后面再加一个数字1，然后单击“确定”再单击右下角的“打开”按钮，这时会出现一个添加信息的询问，直接点“是”就进入到FrontPage窗口，不同的是左边出现一个“文件夹”列表，里面有两个文件夹，一个是“_private”一个是“images”，右边的窗口上还是“new_page1”；

  4）单击工具栏上的“保存”

按钮，出现保存对话框，在文件名中输入index，在“更改”中输入“主页”，单击“确定－保存”，这时在左边文件夹列表里出现一个index.htm，而右边的标题也变成了index.htm；

  5）这样我们就成功地创建了一个个人站点，站点的主页是index.htm，主页就是站点的第一个网页，用我们前面学习的知识来输入主页的内容；

  6）通过创建我们可以发现，创建站点实际上是新建一个文件夹，在这个文件夹中有一个index.htm的网页，还有两个文件夹_private和images，如果仔细还可以找到两个“_v”打头的隐藏文件夹，在FrontPage中站点的图标是

文件夹中间有个地球；

 2、练习

  在“文件”菜单中单击“关闭站点”命令关闭刚才新建的站点，再新建一个自己名字后面加一个2的站点，并且保存一个index的主页。

第5课编辑网页

 网页做好以后，如果要对它进行修改和补充，该怎么操作呢？

首先要找到自己的站点文件夹，打开以后找到里面的index网页文件，瞄准图标

，单击鼠标右键选择“编辑”命令，然后就可以进入FrontPage了；

 进去以后看看打开的是否是自己的index，如果不是就在左边的文件夹列表里，找到index双击打开；

 下面我们通过一个练习来学习如何添加一幅背景图图片；

 1、进入网页编辑窗口

  1）打开自己的文件夹，打开自己的站点文件夹（名字后面有个1）；

  2）找到index网页文件，瞄准单击鼠标右键，选择“编辑（E）”命令，进入FrontPage窗口，检查一下是否是index；

  下面我们来看看怎样添加背景图

  3）单击“格式”菜单，找到“背景”命令单击一下，出现背景对话框，从上到下依次选择；

  4）先在“背景图片”前面打上勾，然后单击右边的“浏览”按钮，出现查找图片的对话框，注意在对话框的右下角有两个放大镜，选择第二个

，找到一幅图片文件，单击“确定”即可打开添加上背景图；

  5）由于这个图片文件是在别的地方找到的，由此还需要保存到自己的站点里，每个站点里都有一个images文件夹，专门就是用来放图片的；

  6）单击工具栏上的“保存”按钮

，这时会弹出一个保存图片的对话框，注意中间文件夹一列是空白的，正确应该保存在images里，所以单击中间下面的“改变文件夹（C）...”按钮，在出现的对话框里选择images然后单击“确定”，回来中间就有images了，再单击“确定”即可；

  7）需要注意的是图片的文件名最好是英文或者数字，如果是汉字的话就得改成英文的，否则在网上系统不能识别汉字，图片就显示不出来了。

第6课插入图片

 上一节我们学习了添加背景图，漂亮的网页当中往往还有许多点缀的页面图片，这是怎么加进去的呢？

 电脑里常见的图片有BMP位图、JPEG压缩图片和GIF动画，网页里常用的是JPEG和GIF格式的图片，因为它们文件比较小，容易传输，下面我们来看一个练习；

 1、打开自己的站点

  1）打开自己的文件夹，一般就是找到自己的名字；

  2）打开自己的站点，一般是自己的名字后面加一个数字，找到主页index；

  3）在index上单击鼠标右键，选择“编辑”命令，进入FrontPage；

  4）检查一下窗口左边的文件夹列表中的三个文件（夹），右边窗口中的index.htm；

 2、插入图片

  1）单击“插入”菜单，选择“图片－来自文件”命令

，弹出浏览对话框，点击右下角的放大镜按钮

，在弹出的对话框里找到一幅图片，点击“确定”即可插入一幅图片，保存的时候还是存到images中；

  2）单击工具栏上的“保存”按钮

，这时会弹出一个保存图片的对话框，注意中间文件夹一列是空白的，正确应该保存在images里，所以单击中间下面的“改变文件夹（C）...”按钮，在出现的对话框里选择images然后单击“确定”，回来中间就有images了，再单击“确定”即可；

  3）插入的图片会占一定的空间，会把文字挤到一边去，所以插入图片之前，先大概规划一下，给图片一个空间位置，以后我们学表格，可以把图片放到表格里面，不让到处乱跑；

  4）插入的图片也跟文字一样，点一下可以选中，图片周围出现许多小方块控制点，拖动控制点，可以改变图片的大小，还可以居中、左对齐、右对齐等等；

  5）图片的其他选项，可以瞄准图片敲右键，选择“图片属性...”命令，再找到左下角的“样式”按钮

，再单击左下角的“格式”按钮

，就可以确定图片的位置了，有点麻烦，所以还是用表格好。

第7课插入音乐

 前面我们学习了添加各种图片和文字效果，一个多媒体的网站，往往还有音乐歌曲，那么在网页中如何插入音乐呢？

下面我们通过一个练习来学习；

 电脑里常见的音乐有MP3、WAV、WMA、midi等格式，网页里常用的是MP3，WAV格式所占空间太多，不利于在网上传输，midi音乐是一种电子合成音乐，占空间最小；

 1、打开自己的站点

  1）打开自己的文件夹，一般就是找到自己的名字；

  2）打开自己的站点，一般是自己的名字后面加一个数字，找到主页index；

  3）在index上单击鼠标右键，选择“编辑”命令，进入FrontPage；

  4）检查一下窗口左边的文件夹列表中的三个文件（夹），右边窗口中的index.htm；

 2、插入背景音乐

  1）单击“格式”菜单，选择“背景...”命令，弹出背景对话框，点击上边的第一个“常规”标签，在中间就可以看到背景音乐的选项了，

这时里面还是空白，单击右边的“浏览”按钮

，出现浏览对话框，点击右下角的放大镜按钮

，在弹出的对话框里找到一首音乐，点击“确定”即可插入一首背景音乐，保存的时候还是存到images中，也可以新建一个音乐文件夹；

  2）单击工具栏上的“保存”按钮

，这时会弹出一个保存音乐的对话框，注意中间文件夹一列是空白的，正确应该保存在images里，所以单击中间下面的“改变文件夹（C）...”按钮，在出现的对话框里选择images然后单击“确定”，回来中间就有images了，再单击“确定”即可；

 停止网页的音乐只要点击一下工具栏中的“停止”按钮

，或者按一下ESC键都可以。

第8课新建网页

 我们常常看到一个网站中有许多的网页，每个网页中有不同的内容，各个网页之间相互独立，互不干扰，排列得很科学，怎样添加一个新的网页呢？

下面我们通过一个练习来学习；

 1、打开自己的站点

  1）打开自己的文件夹，一般就是找到自己的名字；

  2）打开自己的站点，一般是自己的名字后面加一个数字，找到主页index；

  3）在index上单击鼠标右键，选择“编辑”命令，进入FrontPage；

  4）检查一下窗口左边的文件夹列表中的三个文件（夹），右边窗口中的index.htm；

 最上面的“D:

\My...”一行是我们的站点的位置，在D:

盘的MyDoments的八年级里面，\是分隔符，表示一级一级的顺序，一般称作“根目录”；

 下面两个加号旁边的文件夹在一条竖线上，表示同一级别，都在“根目录”里面，最下面的index.htm也在一条线上，也属于同一级别；

 2、在站点里新建文件夹

  1）在左侧文件夹列表中找到最上面一行，单击鼠标右键，在弹出的快捷菜单中选择“新建文件夹（F）”命令，里面出现一个新的文件夹，光标在一闪一闪；

  2）输入英文字母jianjie，然后按一下回车键确定，就成功地在站点里新建一个文件夹，由于网络的原因文件名都用英文字母，而且最好不要超过8个，这里是“简介”的拼音字母；

 3、在文件夹里添加网页

  1）在左边文件夹列表中，找到刚刚新建的“jianjie”文件夹，单击鼠标右键选择“新建网页（N）”命令，弹出一个“新建”对话框，直接单击“确定”，右边会出现一个空白的网页“New_Page_1.htm”；

  2）新建的网页关键是要保存的自己的文件夹里，单击“保存”按钮

，在弹出的对话框里选中“jianjie”文件夹，然后单击右下角的“打开”命令，把下边的文件名改为“jianjie”、标题“更改”为“简介”，单击“确定－保存”命令；

  3）这时打开左边的“简介”文件夹，就可以看到里面有一个jianjie.htm的网页，再在右边工作区里单击一下鼠标，回到网页编辑窗口中；

  4）输入标题、姓名、生日、星座、身高、体重、年级、特长、最喜欢的格言等等你觉得要写的内容，这个网页就是个人简介的详细介绍；

  5）保存一下，然后单击工具栏上的浏览按钮

，就可以看到这个新建的网页了。

第9课超级链接

 在网络上我们可以通过超级链接，从一个网页跳到另一个网页，超级链接是指向另一个页面的特殊标记，一般具有蓝色、下划线和手形鼠标的特征，它可以是一段文字、一个图片或者是一个其他的对象，那么怎样创建一个超级链接呢？

下面我们通过一个练习来学习；

 1、打开自己的站点

  1）打开自己的文件夹，一般就是找到自己的名字；

  2）打开自己的站点，一般是自己的名字后面加一个数字，找到主页index；

  3）在index上单击鼠标右键，选择“编辑”命令，进入FrontPage；

  4）在左边可以看到一个文件夹列表，里面有我们站点的各个文件和文件夹，还有上次新建的jianjie；

 我们要把上次新建的个人简介的网页链接到主页上，这样在主页上我们就可以通过超级链接，访问个人简介的详细介绍；

 2、创建超级链接

  1）在主页index中找到上次我们输入的第一行内容，选中文字“简介”把它拖黑，然后瞄准单击鼠标右键，选择最下边的“超链接（k）...”命令，弹出一个超级链接的对话框；

  2）把需要链接的网页找出来，单击确定就可以了，在对话框的中间找到“简介”文件夹，双击打开，然后选中里面的“jianjie”网页，这时下边的地址栏中就出现了“jianjie”网页的路径，单击“确定”，回到编辑窗口；

  3）这时就可以发现，文字“简介”的颜色变成蓝色，而且出现了一条下划线，表明成功地插入了超级链接

；

  4）保存一下，然后单击工具栏上的浏览按钮

，试一下新建的超级链接，看看能否进入到我们的“简介”页中；

  5）如果要去掉超级链接，只要打开这个对话框，把下边地址栏里的路径删掉就可以了。

第10课创建表格

 网页版面往往需要整齐美观，各个对象之间互不干扰，这时候就需要使用表格来定位和布局，表格的使用非常灵活，并且表格里头还可以套表格，从而达到巧妙的结构，充分利用页面的各个部分，那么怎样创建一个表格呢？

下面我们通过一个练习来学习；

 1、打开自己的站点

  1）打开自己的文件夹，一般就是找到自己的名字；

  2）打开自己的站点，一般是自己的名字后面加一个数字，找到主页index；

  3）在index上单击鼠标右键，选择“编辑”命令，进入FrontPage；

  4）在左边可以看到一个文件夹列表，里面有我们站点的各个文件和文件夹，还有上次新建的jianjie；

 我们要新建一个爱好的网页，在这一页里插入一个表格并链接到主页上；

 2、新建文件夹和网页

  1）用前面学到的知识，在左边文件夹列表的最上面一行，单击鼠标右键，选择“新建文件夹（F）”命令，新建一个文件夹，名字改为aihao，这样我们创建了一个存放爱好的文件夹；

  2）在“aihao”上单击鼠标右键，选择“新建网页（N）”命令，新建一个“普通网页”，单击工具栏上的“保存”

按钮，在对话框的中间找到“aihao”文件夹，双击打开，文件名也起成“aihao”，网页标题“更改”为汉字的“爱好”，检查一下，然后单击右边的“保存”命令，保存网页；

 3、创建表格

  1）单击菜单栏上的“表格”菜单，选择“插入－表格”命令，出现一个对话框，要求设定表格的行和列，注意一个表格中横着是行，从上往下是一行一行，竖着的是列，从左到右一列一列，把行改为4，把列改为2，单击“确定”，这时就在网页中出现一个4行2列的表格，一共有8个格子，叫8个“单元格”；

  2）选中第一行横着的两个单元格，然后瞄准单击鼠标右键选择“合并单元格”命令，这样第一行就变成一个单元格了，在里面输入“我的爱好”作为网页的标题；

  3）保存一下，然后在左边一列中依次输入“爱听的歌曲”和歌名，比如热带雨林、冻结等等；在右边一列写上其他爱好，比如“棋类”，象棋、围棋、五子棋等等；

我的爱好

爱听的歌曲：

棋类：

 热带雨林、冻结

 象棋、围棋

 神奇、十年

 五子棋、黑白棋

  4）保存一下，把这一页超级链接到主页的“爱好”上，然后单击工具栏上的浏览按钮

，看看新建的表格如何；

  在表格上单击右键，选择“表格属性”，还可以调节表格的边框“粗细”，如果设为0，表格线就会隐藏起来，如果选择“单元格属性”可以对每一个格子的内容设定格式，大家在使用中可以多试一试。

第11课修饰网页

 网页版面设计很重要，每个人的审美观念各不相同，一个干干净净、清清爽爽的网页，会给人一种清新秀丽感觉，怎样修饰网页呢？

下面我们通过一个练习来学习一下；

 1、打开自己的站点

  1）打开自己的文件夹，一般就是找到自己的名字；

  2）打开自己的站点，一般是自己的名字后面加一个数字，找到主页index；

  3）在index上单击鼠标右键，选择“编辑”命令，进入FrontPage；

  4）在左边的文件夹列表里有我们站点的各个文件夹和文件；

 2、插入水平条

  1）把光标定位到标题行的后面，也就是在标题后面点一下鼠标，这样光标就在后面一闪一闪；

  2）单击“插入”菜单，选择“水平线”命令，这样就在标题的下面出现一条灰色的水平线；

  3）瞄准水平线，单击鼠标右键，选择“水平线属性...”命令，弹出一个对话框，在左下角把颜色改为红色；

 3、插入长条图片

  1）水平线有时候有些太单调，我们还可以用图片来代替，把光标定位到网页的最后，单击“插入”菜单，选择“图片－剪贴画”命令；

  2）在弹出的对话框里选择“Web框架”，然后找一个长条形的图片，瞄准单击鼠标右键，选择第一个“插入”命令，就可以插进这个图片了；

  3）单击“保存”

按钮，把图片保存到images文件夹里，然后瞄准图片，单击鼠标右键，选择“图片属性”，把图片设置一下；

  4）在弹出的对话框中，在上边选择“外观”标签，找到中间的“指定大小”打上勾，然后把下边的“象素”改为百分比，再把宽度改为100，旁边的高度10象素不变，百分比是为了跟网页的宽度一致；

  保存一下文件，然后单击工具栏上的浏览按钮

，看看加入修饰的网页感觉怎么样？

第12课网页特效

 网页当中动态效果往往更能吸引目光，图片我们可以选择GIF动画，而文字往往是静态的，用什么方法可以修饰一下呢？

能不能给网页添加一些动态的效果呢？

下面我们通过一个练习来学习一下；

 1、打开自己的站点

  1）打开自己的文件夹，一般就是找到自己的名字；

  2）打开自己的站点，一般是自己的名字后面加一个数字，找到主页index；

  3）在index上单击鼠标右键，选择“编辑”命令，进入FrontPage；

  4）在左边的文件夹列表里有我们站点的各个文件夹和文件；

 2、插入滚动字幕

  1）把光标定位到网页的最后，按一下回车键，这样就会插入一个空行；

  2）输入一段文字“长江后浪推前浪，自古英雄出少年”，按住鼠标左键选中这段文字；

  3）在菜单栏上选择“插入”菜单，选择“组件－字幕...”命令，弹出一个对话框，不用修改，直接单击“确定”，这时选中的文字外面出现一个框，表示加入了字幕效果；

　保存一下文件

，然后单击工具栏上的浏览按钮

，就可以看到在网页下边有一行文字从左至右移动；

 3、动态效果图片

  1）这种效果是当鼠标指向一个图片时，图片会发生变化，给人以奇异的感觉，它需要准备两幅图片；

  2）使用“插入－图片－来自文件”命令，在网页中插入一幅图片，然后单击选中这幅图片；

  3）单击“格式”菜单，选择“动态DHTML效果”命令，这时会弹出一个工具栏，我们将从左到右依次操作；

  4）在工具栏左边的“选择一种事件”上单击一下，选择“鼠标悬停”，然后在旁边的“应用”上单击一下选择“交换图片”，再往旁边单击“<选择设置>”上单击一下选择“选择图片...”，在弹出的对话框中找到一幅图片，单击“确定”即可完成；  

  保存一下文件

，这时候图片上看不出什么来，我们单击一下工具栏上的浏览按钮

，在浏览器中把鼠标移到图片上，看看图片的效果有没有变化？

第13课视频播放

 网页当中除了可以插入文字、图片和特效以外，还可以插入视频、音乐和Flash动画，由于视频文件是数据文件，这样它本身并不能播放，而需要一个播放器，就像用录音机放磁带一样，那么怎样插入一个视频影片呢？

下面我们通过一个练习来学习一下；

 1、打开自己的站点

  1）打开自己的文件夹，一般就是找到自己的名字；

  2