frontpage网页设计制作步骤文档格式.docx
《frontpage网页设计制作步骤文档格式.docx》由会员分享，可在线阅读，更多相关《frontpage网页设计制作步骤文档格式.docx（61页珍藏版）》请在冰豆网上搜索。
④表格字体设置：
选定表格;
在格式工具栏内选定字体，字号
⑤填写文字：
分别选定表格单元格，依次填写：
你所需要的内容。
⑥在第四条水平线下添加一个的表格，表格文字居中;
并在表格中分别填写内容。
⑦移动光标至第四条线末尾，敲击回车键;
⑧插入表格：
行数列数;
⑨填写文字：
分别选定表格单元格，依次填写。
⑩添加文字：
移动光标至第四条线末尾;
敲击回车键，留出空行;
输入文字。
网页制作步骤⑹“我的学校”制作在第二条水平线下添加文字：
“我的学校”，另起一行添加学校介绍并设置字体。
①移动光标至第三条线首;
敲击回车键，使第二条线与第三条线之间留出空行;
输入文字“我的学校”，回车另起一行;
②输入或复制所需要的文字。
光标定位到网页文件“我的学校”下一行行首;
粘贴学校说明文字。
③调整文字对齐方式;
调整文字字体、字号。
网页制作步骤⑺“所有城市”制作在第三条水平线下添加文字：
“所有城市”，另起一行，添加两张图片。
①移动光标至第四条线首;
敲击回车键，使第三条线与第四条线之间留出空行;
输入文字“所在城市”，回车另起一行;
②插入图片：
单击菜单“插入”—“图片”—来自文件”，弹出打开图片对话框;
选定所要的图片然后单击“打开”;
③重复以上步骤
网页制作步骤⑻添加链接添加本网页内链接
①指定书签：
选定第一条水平线下的文字“我的学校”;
单击菜单“插入”—“书签”，弹出“书签”对话框;
单击“确定”，第一个书签设置完成。
②选定第二条水平线下的文字“所在城市”;
单击“确定”，第二个书签设置完成。
③选定第四条水平线下的文字“友情链接”;
单击“确定”，第三个书签设置完成。
④添加网页内第一个链接。
选定第一个表中的文字“我的学校”;
单击菜单“插入”—“超链接”，弹出的“插入超链接”对话框;
在“链接到”内单击“本文档中的位置”;
在书签中选择“我的学校”标签;
⑤添加网页内第二个和第三个链接，参照第一个链接进行设置。
添加Internet链接。
⑥添加第一个链接：
选定第四条水平线下表中的文字“XX”;
单击菜单“插入”→“超链接”，弹出的“插入超链接”对话框;
在“链接到”内单击“原有文件或网页”;
在“地址”栏内填写如：
。
⑦添加第二个、第三个、第四个和第五个链接，参照第一个链接进行设置。
链接设置完成。
网页制作步骤⑼添加背景颜色
①单击菜单“格式”—“背景”，弹出“网页属性”对话框;
②单击“格式”选项卡;
③单击“颜色一背景”—“其他颜色”，打开Windows颜色对话框;
选择淡黄色后单击“确定”，背景颜色插入完毕。
网页制作步骤⑽保存网页单击菜单“文件”—“保存”，保存以上修改内容。
退出FrontPage2003。
网页制作步骤⑾使用IE查看建立的网页
①单击桌面上IE图标;
②单击菜单“文件”—“打开”，弹出打开对话框;
选择“我的文档”下文件“index.htm”，
③单击打开，即可查看浏览效果
在Frontpage中用框架实现网页布局
∙框架（Frame）在网页上的应用很普遍,因为它可以同时显示出多个独立网页
也可以将使用者常用的连结一直显示在画面上,减少上一页下一页的切换频率
∙框架的基本操作
1.先看我们要做到的成品-->
可以看出该网站共分3个框架-->
上、左、右，如下图：
2.请开启frontpage-->
左上角的「档案」-->
选「开新档案」-->
网页，如下图：
3.会跳出如下视窗：
选择框架页（如图1指示位置）-->
选择底下要的框架款式（如图2指示位置）-->
在右下可以看到样式预览（如图3指示位置）-->
接着按「确定」即可。
4.之后出现如下画面,可设定各框架网页内容：
开新网页的意思是要自己做一个全新的网页,而设定起始网页是去连结一个已经做好的网页
o请将上框与左框设定-->
开新网页
o右框设定-->
设定起始网页-->
▪可选择在电脑中已做好的网页or网路上的某个网页
▪此例我们连结到之前做好的个人档案（myself.htm），请点选浏览档案的图示，如下图：
5.步骤4完成后，会出现如下图：
6.此时可以先存档-->
此时会有视窗引导存档
o第一个是问您上框架的网页要存成什么档名，如图（可自己取名，如top.htm）
o接下来会问您左方框架的档案要存什么档名，如图（可自己取名，如left.htm）
o最后跳一个视窗-->
问您整个框架要存成什么档名，如图
（可自己取名，如index.htm，一般主框页会拿来当做首页，通常网站的首页会命名为index.htm）
o为什么没有问到，右框的网页要存成什么档名?
这是因为我们当初设定右框是连结到一个已经做好的网页（myself.htm），既然是已经做好的网页，
自然就没有存不存档的问题
7.框架内容的设定（取消框架线）：
在网页的任一处按右键，选「框架内容」，如下图：
选「框架页」-->
将「显示框线」的勾勾去掉，即可取消框架线。
8.最后按照范例，我们在上方网页插图，左方网页先用做一选单。
选单在设定连结时,必须指定两项资讯（与超连结的观念相同）（责任编辑：
大宝库）
目前实现网页布局的基本方法无外乎表格和框架。
上面表格大家已经初步理解了，下面就要说说框架了，也即所说的Frame。
其实用框架来规划网页本身有很大的缺点，首先不利于网友更好的利用网页资源，因为大家总不能在线把所有的东西看一遍了，而保存起来框架的缺点就出来了，你将不得不每次多余的保存同样的两个页。
我们花一些时间来说说这个问题或许对大家更好的使用框架有好处。
在用框架布局时：
以一个最简单的上下框架为例，整个网页包含两个独立的网页，将被分别保存或是调入使用，另外整个框架网页也将被作为一个也保存一次，而我们用框架时，无非是想利用他的很好的内容的切换性，这时如果保存起来本来一个网页的内容就要同时保存3个，是不是很不划算的。
1〉在编辑器里：
File/new（或是直接按CTRL+N），在弹出的窗口中选Frame标签，然后在下面的列表里。
选择相应的框架类型。
2〉OK以后，这时网页已经变成了框架的结构，通过各自框架Frames你可以选择新建网页或是导入已经存在的网页。
setinitalpages（导入一个存在页）
newpage（点击后新建一个页面）
3〉基本的框架结构已经建立了：
这时应该看看如何实现框架中的切换连接了，因为在使用框架时最具代表性的就是三分框架，而这三部分都有各自的名称。
最上面为banners：
网页的头部分。
左边为contents部分。
右边是主体显示部分。
main
4〉那么如何实现点击连接时在main窗口中打开那，在左边的contents窗口中作连接CTRL+K或是用Edit/hyperlink来完成，这时你可以在窗口中的图示中选择连接打开的目标位置。
如：
main。
当然你同时还可以设定目标Target属性。
不过这时多少显得就没必要了，当各自Frame内容超出一屏幕时，滚动条会自动添加进来。
你也可以设定从不显示滚动条。
大部分的属性可以右击：
在Frameproperties中找到了。
如果你注意的话除了一些个人网站，商业性的正规网站很少用框架的。
不过在某些时候框架还是有它自己的优势。
Frontpage教程：
制作网页中的书签
书签
书签的功能是使用在同一面网页资料过长时使用,能够使使用者迅速的移动到所要的位置上。
适合用在教学进度表、小文章集锦等教学网页。
书签的基本操作
范例：
做法：
1.
先将教学进度做成网页。
2.
在最上头列出选单。
3.
在目的位置（第一周）插入标签：
将游标在第一周的地方点一下-->
选功能列「插入」-->
书签-->
为此位置取一个书签名称如w1,该位置前会出现如的小图示。
4.
依此类推,将所有目的位置（第五周、第九周、第十三周、第十七周）都插入书签名称如w2,w3,w4,w5.....注意书签名称绝对不能重复
5.为选单作相对应的超连结：
例如我们希望滑鼠按下「1~4周」时,整个画面能移动到w1段落,做法如下-->
选取文字「1~4周」-->
按右键-->
选「超连结」-->
跳出一个设定超连结的视窗-->
左下角设定要连到哪个书签的区域
点选下拉式选单,选择要连结的书签名称即可
6.重覆步骤5，完成所有的选单设定。
FrontPage2003创建可折叠列表
创建可折叠列表
1.
在设计视图中,将您希望创建大纲插入点置于。
onFormatmenu，clickBulletsandNumbering。
在编号选项卡上,选择的数字或字母开始所需，样式然后单击确定。
要在大纲中的每一项，无论种级别它将占用已完成的列表中，键入该项目然后按ENTER键。
5.
当您键入最后一项时,按两次ENTER键结束该列表。
6.
若要将每一项置于正确级别，执行下列操作：
若要将某项移动到下一个编号级别向下，单击该项目，单击格式设置工具条，并再单击增加缩进量两次。
若要设置的项的格式，并将其作为一个段落在当前级别（不带项目符号或编号）上，单击该项目，然后单击增加缩进量一次。
若要touptopreviouslevelmoveitem，clickitem，andthenasmanytimesasmustsothattothatwantlevelmoveitemclickDecreaseIndent。
7.
若要应用编号，应用字母，或将项目符号样式应用于不同级别的项，用鼠标右键单击一个项目，然后单击列表属性。
8.
单击图片项目符号选项卡，则无格式项目列表选项卡或数字选项卡，单击想要使用，样式，然后单击确定。
将整个列表设置为Collapsible
若要tomakelistcollapsible，followthesesteps:
用鼠标右键单击在列表的最高级别的项目，然后单击列表属性。
单击以选中启用可折叠大纲复选框。
如果您希望在Web浏览器中首次打开页时折叠列表，单击以选择时折叠复选框，然后单击确定。
注意如果您的列表包含相同的级别上的多个项目，每个将可折叠的并且低于第一个级别的所有级别也都将可折叠的。
若要设置为可折叠列表中只有一个级别，请按照下列步骤操作：
用鼠标右键单击第一个项目在您希望可折叠，在列表的级别，然后单击列表属性。
疑难解答
若要totestyourcollapsiblelist，saveyourWebPage，clickPreview，andthenclickincollapsiblelistfirstitem。
可折叠列表支持MicrosoftInternetExplorer4.0，更高版本和其他Web浏览器的支持动态HTML。
FrontPage2003初级教程-基础教程详细图解
一、新建网站
打开FrontPage2003
点击新建菜单命令会弹出一个对话框，有不同的模板供选择。
选择你想要的一个，然后确定，会自动生成一个网站。
二、新建一个空白网页
你也可选择新建空白网页，或点新建工具按钮。
当然，这上面的内容你要自己编辑。
三、打开一个网站
点击打开网站
四、浏览网页
“文件”“浏览”有几个选项（不同分辨率）
五、编辑方式
有“设计”“拆分”“代码”“浏览”
六、插入WEB组件
WEB组件中有很多常用的功能，你自己去试各项。
七、插入图片
有两种情况:
1、插单个图片，可在菜单上直接用；
2、插入图片库，也可插入WEB组件中，可插队入图片库。
有三种形式（自己试一下，因为有预浏）。
八、插入“互动按钮”，互动按钮可以有三种形式，鼠标经过，按过，没按。
可选形式，在文本的文本框中将按钮文本换成你要的文本。
如：
首页……
还可改变文本的属性，字体颜色，等。
有初始颜色，经过颜色，按下颜色
九、在网页中插入已有的网页
如果新建的网页，内容想用现存的，只须插入已有的网页就行了。
比较简便。
十、书签链接
有时的链接，不是和另一个网页链接，而是和页面中某一段链接，或另一页面的一段链接。
这种方法用在“标题和内容”之间链接最方便。
1、选择：
菜单、插入、书签（被链接的内容）（一般自动生成名字，你也可以自己指定名字）
2、制作到书签的链接（标题）
（责任编辑：
3、选择右边的“书签”
4、找到书签名
十一、创建一个超链接
1、选中要建立超链接的文字或图片。
2、右键，弹出菜单，点击“超链接”
3、在弹出的对话框中选中被链接的网页或图片或其他（注：
如是下载软件选中它）
4、当然，最后是点击“确定”（责任编辑：
十二、插入表格
1、点击菜单中“表格”再“插入”再移到“表格”单击“表格”
2、在弹出的对话框中有几项值是要注意的：
a、表格的“行数”和“列数”
b、“指定宽度”和“指定高度”如果是用固定宽和高填写数字，如果是页面随屏幕变化的选100%
c、“使用背景图片”点击“浏览”找到图片
d、“对齐方式”用“默认”
e、“浮动”方式用“默认”
f、“边框”是表格宽度如果选“零”则不显示表格否则显示你选或填的数字的宽度。
g、“单元格间距”是表格线本身的衬距，如：
3时，表格线两根之间距为3。
h、“单元格间距”是表格中文字到框的距离。
i、当然还有颜色。
十三、建立网站链接
这个功能和共享边框一起使用。
1、在编辑区下方有一个选项“链接”点击它。
此主题相关图片如下：
进入建立链接面页
2、修改“新建网页”为“主页”
3、添加“新建网页”——新建一个网页——或“已有的网页”——已存在的网页，点击找到被链接的网页。
还可修改新建网页为你想要的中文名。
大宝库
十四、新建自定义链接
默认链接有时不够用，可以建自定义链接，独立于默认。
在插入链接时有两个选项：
一个是默认，另一个是自定义链接。
自定义链接可以放在主页下面，也可以放在独立的地方。
下图一中的“娱乐”就是放在主页下的。
图二中的新建成链接栏是独立的。
当然你还可以在自定义下面添加下层链接。
十五、共享边框
1、启用
》“工具”》“网页选项”》“创作”》选中“共享边框”
2、“格式”中选中“共享边框”在对话框中（注：
若想损事，选：
所有网页）设置选项“上、左、右、下”（可以自定）
3、在自动出现的共享边框中编辑链接栏属性
5、和上一讲的链接栏配合使用，当你每添加一个网页在链接栏中会自动生成上面的效果
十六、在网页中插入“链接栏”
1、光标在要插入链接栏的地方或选中共享边框
2、点击“插入”（或是编辑“链接栏”属性），Web组件，找到“链接栏”，有两个选项：
基于导航结构的链接栏；
自定义链接栏
3、点下一步
4、选择“样式”，有多种，自定。
可以选中“使用鲜艳颜色”和“使用动态图形”
6、点“完成”进入“属性”可以选中“主页”最后点确定。
7、最后效果
8、请注意：
链接栏的属性文件夹在_borders中，下面的几个文件就是，你还可以对不满意的重新进行编辑。
top.htm是顶上的，left.htm是左边的，bottom.htm是下面的，right.htm上右边的
十七、插入“动态文字”
1、WEB组件中
2、在文字栏中写入你的文本
3、还可以修改“样式”
十八、插入媒体插件
1、插入“WEB组件”到高级控件到插件
2、找到数据源，编辑相关
3、注：
会自动识别媒体的，有两种RM和微软的
到此为止，frontpage2003的初级基础课程全部给大家演示完毕，当然这只是最简单的讲解，在你的实际制作过程中，你可以发挥自己的能力，做出你最喜欢的网页了。
别忘了常来网页制作大宝库（）看看，这里一定有你想要的教程，需要的素材。
FrontPage2003建站全攻略
（一）
在浩瀚的Internet建设自己的家园，这是我们的需求，无论是个人、还是组织。
在创建网站之前我们事先在我们的硬盘中建立一个存放站点所有文件的目录。
模板建站
FrontPage可以适合不同个人和组织的需要，自动建立网“巢”——站点。
操作 打开站点建立窗口：
点击“文件-->
>
新建”，在打开的窗口中可以看到自动建立站点的各种向导和模板。
向导特点：
选择向导程序列出的条件元素，创建某类有个性的站点和网页
模板特点：
直接采用已经设计好的条件元素，创建某类统一的站点和网页
在FrontPage中，使用向导创建的一般是比较复杂的商业和大型站点，不适合个人在网上安家筑巢。
我的网上小家就使用模板建立站点就够了。
操作 选择模板：
在新建站点窗口，选择“个人站点”模板。
在右面的选项栏中设置站点文件的存放地址。
建议新建一个有意义的存放地址，如“e:
\webcom”，点击“确定”。
操作 查看站点结构：
点击程序界面的“视图”窗口中的“导航”按钮，可以看到建立的站点由哪些文件组成以及站点的结构。
我们看到，个人站点模板的结构是主页下面有五个子页，分别是“自序”、“兴趣”、“收藏夹”、“图片库”、“反馈”，而在文件夹列表栏中列出了站点中的文件，其中“image”文件夹专门存放图片，另外还有五个HTML文件，其中的myfav3.html是备用的子网页文件。
其他四个HTML文件分别对应主页和三个子网页。
操作 查看站点中的网页：
在导航视图窗口的网站结构示意图中点击某个网页结构图标，如“主页”结构图标，可以打开该网页，我们就可以在窗口中看到这个预先定制的网页大概结构。
点击文件夹列表中的文件也可打开。
注意，打开网页后，我们可以看到导航视图窗口切换到了网页视图窗口。
操作 保存和打开站点：
保存站点的工作很简单，当关闭FrontPage的时候，按照提示就可以保存站点。
实际上，保存站点主要就是保存网页，因此在修改编辑网页的时候，要时刻注意到保存。
保存的方法和在文字编辑程序中保存文件类似。
打开站点要复杂些，选择菜单“文件／打开站点”，找到站点所在的目录，找到站点文件夹（是一个带有小圆球的文件夹图标，是FrontPage建立的站点管理文件
操作 删除站点：
删除站点很简单，直接在Windows中删除站点所在的文件夹即可。
也可在程序中删除。
进一步学习的建议：
熟练使用各种视图和窗口，使用向导创建复杂的商业和项目站点。
使用导入向导，将别人已经建立的站点导入，成为自己可以利用的站点。
模板建网页
目前，我的网“巢”还只有一个主页，三个子页，我想再添加一个“我的简历”的子页。
使用模板创建站点，站点中有几个网页都是事先设计好的，大多数情况下，都需要添加网页，或者用新设计的网页替换掉事先设计的网页。
建立新的网页，使用向导和模板是最方便不过的了，因为FrontPage提供的网页模板非常丰富，可以满足大多数情况的需要。
操作 打开网页模板窗口：
在视图窗口中点击“网页”按钮，切换到网页视图。
选择菜单“文件／新建／网页”，打开新建网页的模板选择窗口。
注意，不同的视图窗口，使用“文件／新建／网页”菜单命令的结果不同，后面我们将会提到。
在网页模板选择窗口中，有三个标签页，在“常规”标签页中有三十多个模板供选择，一般个人网“巢”中的网页使用“常规”标签页中的模板就足够了。
根据我新建网页的内容和预想的设计，我选择了“带有标题的宽行正文”模板。
点击“带有标题的宽行正文”模板项，然后点击“确定”，程序即开始按模板新建网页。
回到主窗口，就可以看到一个有大概结构的网页，这个网页以很清晰的方式提示我在哪里放标题，哪里放正文，网页段落结构也排得很好，我只要按照提示添加内容就可以了。
新建立的网页还没有保存在硬盘中，由于这个网页是要添加到刚才新建立的网站中去的，因此，我们将它保存到网站文件所在的目录（e:
\webjxcom）中。
操作 保存新建的网页文件：
选择“文件／保存文件”，在
升级会员 