frontpage2003网页设计制作步骤

《frontpage2003网页设计制作步骤》由会员分享，可在线阅读，更多相关《frontpage2003网页设计制作步骤（75页珍藏版）》请在金锄头文库上搜索。

1、1frontpage 2003 网页设计制作步骤 单击“开始”“所有程序”“Microsoft Office”“Microsoft Office FrontPage 2003”，启动 FrontPage 2003，进入网页编辑窗口; 在网页编辑窗口，单击“文件”“保存” ，弹出 Windows 保存窗口，指定目标文件夹为“我的文档” ，指定文件名称“index.htm”; 单击“保存” ，则 index.htm 文件建立完毕。网页制作步骤 添加标题图片 单击菜单“插入”“图片”“来自文件” ，弹出打开图片对话框，选择所要插入的图片; 单击“插入” ，标题图片插入完成。网页制作步骤 在标题图片下

2、添加滚动文字 单击回车键，使光标位于标题图片下最左端; 单击“插入”“Web 组件” ，在“组件类型”栏中选择“动态效果” ，在“选择一种效果”栏中选择“字幕”; 单击“完成”; 在文本栏内输入比如“你好!欢迎访问我的个人网页 ”，单击“样式”“格式”，弹出格式菜单。单击“字体” ，弹出“字体”对话框。在“字体”栏内选择文本字体，在“大小”栏内改大小，在“颜色栏”内选择颜色，单击“字符间距”选项卡，显示字符间距栏，在“间距”栏内选择间距，在“间距大小”栏内填入大小; 单击“确定”关闭所有对话框，添加字幕完毕。网页制作步骤 在网页中添加四条横线 光标移到字幕末尾，敲击键盘上回车键，使光标位于字幕

3、的下一行左侧; 单击“插入”“水平线” ，插入一条水平线;双击该水平线，弹出“水平线属性”对话框;在“颜色”栏内选择颜色，在“高度”栏内填写高度;单击“确定” ，退出“水平线属性”对话框; 单击菜单 “格式” “边框和底纹” ，弹出“边框和底纹”对话框;在“样式”栏内选择样式，然后单击“确定” ，退出“边框和底纹”对话框。 复制水平线;单击菜单“编辑”“复制”;重复三次：单击菜单“编辑”“粘贴”，绘制水平线。网页制作步骤 插入表格2 在第一条水平线下添加一个表格，边框粗细为 0，编辑表格文字的文本和大小，居中;分别填写你自己需要的内容; 移动光标至第二条水平线首;敲击回车键，使第一条水平线与第

4、二条水平线之间留出空行; 插入表格：单击菜单“表格”“插入”“表格” ，弹出“插入表格”对话框;在“大小”栏内分别填写：行数和列数;在“边框”栏的“粗细”栏中输入 0;在“布局”栏内的“对齐方式”栏中选择方式; 表格字体设置：选定表格;在格式工具栏内选定字体，字号 填写文字：分别选定表格单元格，依次填写：你所需要的内容。 在第四条水平线下添加一个的表格，表格文字居中;并在表格中分别填写内容。 移动光标至第四条线末尾，敲击回车键; 插入表格：单击菜单“表格”“插入”“表格” ，弹出“插入表格”对话框;在“大小”栏内分别填写：行数列数;在“边框”栏的“粗细”栏中输入 0;在“布局”栏内的“对齐方式

5、”栏中选择方式; 填写文字：分别选定表格单元格，依次填写。 添加文字：移动光标至第四条线末尾;敲击回车键，留出空行;输入文字。网页制作步骤 “我的学校”制作 在第二条水平线下添加文字：“我的学校” ，另起一行添加学校介绍并设置字体。 移动光标至第三条线首; 敲击回车键，使第二条线与第三条线之间留出空行;输入文字“我的学校” ，回车另起一行; 输入或复制所需要的文字。光标定位到网页文件“我的学校”下一行行首;粘贴学校说明文字。 调整文字对齐方式;调整文字字体、字号。网页制作步骤 “所有城市”制作 在第三条水平线下添加文字：“所有城市” ，另起一行，添加两张图片。 移动光标至第四条线首; 敲击回车

6、键，使第三条线与第四条线之间留出空行;输入文字“所在城市” ，回车另起一行; 插入图片：单击菜单“插入”“图片”来自文件” ，弹出打开图片对话框;选定所要的图片然后单击“打开”; 重复以上步骤3网页制作步骤 添加链接 添加本网页内链接 指定书签：选定第一条水平线下的文字“我的学校”;单击菜单“插入”“书签”，弹出“书签”对话框;单击“确定” ，第一个书签设置完成。 选定第二条水平线下的文字“所在城市”;单击菜单“插入”“书签” ，弹出“书签”对话框;单击“确定” ，第二个书签设置完成。 选定第四条水平线下的文字“友情链接”;单击菜单“插入”“书签” ，弹出“书签”对话框;单击“确定” ，第三个

7、书签设置完成。 添加网页内第一个链接。选定第一个表中的文字“我的学校”;单击菜单“插入”“超链接” ，弹出的“插入超链接”对话框;在“链接到”内单击“本文档中的位置”;在书签中选择“我的学校”标签; 添加网页内第二个和第三个链接，参照第一个链接进行设置。 添加 Internet 链接。 添加第一个链接：选定第四条水平线下表中的文字“百度”;单击菜单“插入”“超链接” ，弹出的“插入超链接”对话框;在“链接到”内单击“原有文件或网页”;在“地址”栏内填写如：http:/。 添加第二个、第三个、第四个和第五个链接，参照第一个链接进行设置。链接设置完成。网页制作步骤 添加背景颜色 单击菜单“格式”“

8、背景” ，弹出“网页属性”对话框; 单击“格式”选项卡; 单击“颜色一背景”“其他颜色” ，打开 Windows 颜色对话框;选择淡黄色后单击“确定” ，背景颜色插入完毕。网页制作步骤 保存网页 单击菜单“文件”“保存” ，保存以上修改内容。退出FrontPage 2003。网页制作步骤 使用 IE 查看建立的网页 单击桌面上 IE 图标; 单击菜单“ 文件”“打开” ，弹出打开对话框;选择“我的文档”下文件“index.htm”， 单击打开，即可查看浏览效果在 Frontpage 中用框架实现网页布局4 框架(Frame)在网页上的应用很普遍,因为它可以同时显示出多个独立网页也可以将使用者常

9、用的连结一直显示在画面上,减少上一页下一页的切换频率 框架的基本操作1.先看我们要做到的成品可以看出该网站共分 3 个框架上、左、右，如下图：2.请开启 frontpage左上角的档案选开新档案网页，如下图：3.会跳出如下视窗：5选择框架页(如图 1 指示位置)选择底下要的框架款式(如图 2 指示位置) 在右下可以看到样式预览(如图 3 指示位置)接着按确定即可。4.之后出现如下画面,可设定各框架网页内容：开新网页的意思是要自己做一个全新的网页,而设定起始网页是去连结一个已经做好的网页o 请将上框与左框设定开新网页o 右框设定设定起始网页 可选择在电脑中已做好的网页 or 网路上的某个网页6

10、此例我们连结到之前做好的个人档案（myself.htm），请点选浏览档案的图示，如下图：5.步骤 4 完成后，会出现如下图：6.此时可以先存档此时会有视窗引导存档o 第一个是问您上框架的网页要存成什么档名，如图（可自己取名，如top.htm）7o 接下来会问您左方框架的档案要存什么档名，如图（可自己取名，如left.htm）8o 最后跳一个视窗问您整个框架要存成什么档名，如图（可自己取名，如 index.htm，一般主框页会拿来当做首页，通常网站的首页会命名为 index.htm）o 为什么没有问到，右框的网页要存成什么档名? 这是因为我们当初设定右框是连结到一个已经做好的网页（myself.

11、htm），既然是已经做好的网页，自然就没有存不存档的问题7.框架内容的设定（取消框架线）：在网页的任一处按右键，选框架内容，如下图：9选框架页将显示框线的勾勾去掉，即可取消框架线。108.最后按照范例，我们在上方网页插图，左方网页先用做一选单。选单在设定连结时,必须指定两项资讯（与超连结的观念相同） (责任编辑：大宝库)在 Frontpage 中用框架实现网页布局目前实现网页布局的基本方法无外乎表格和框架。上面表格大家已经初步理解了，下面就要说说框架了，也即所说的 Frame。其实用框架来规划网页本身有很大的缺点，首先不利于网友更好的利用网页资源，因为大家总不能在线把所有的东西看一遍了，而保存

12、起来框架的缺点就出来了，你将不得不每次多余的保存同样的两个页。我们花一些时间来说说这个问题或许对大家更好的使用框架有好处。在用框架布局时：以一个最简单的上下框架为例，整个网页包含两个独立的网页，将被分别保存或是调入使用，另外整个框架网页也将被作为一个也保存一次，而我们用框架时，无非是想利用他的很好的内容的切换性，这时如果保存起来本来一个网页的内容就要同时保存 3 个，是不是很不划算的。1在编辑器里：File/new( 或是直接按 CTRL+N)，在弹出的窗口中选 Frame 标签，然后在下面的列表里。选择相应的框架类型。112OK 以后，这时网页已经变成了框架的结构，通过各自框架 Frames

13、 你可以选择新建网页或是导入已经存在的网页。setinitalpages(导入一个存在页)newpage(点击后新建一个页面)3基本的框架结构已经建立了：这时应该看看如何实现框架中的切换连接了，因为在使用框架时最具代表性的就是三分框架，而这三部分都有各自的名称。最上面为 banners：网页的头部分。左边为 contents 部分。右边是主体显示部分。main4那么如何实现点击连接时在 main 窗口中打开那，在左边的 contents 窗口中作连接 CTRL+K 或是用 Edit/hyperlink 来完成，这时你可以在窗口中的图示中选择连接打开的目标位置。如：main。当然你同时还可以设定

14、目标 Target 属性。不过这时多少显得就没必要了，当各自 Frame 内容超出一屏幕时，滚动条会自动添加进来。你也可以设定从不显示滚动条。大部分的属性可以右击：在 Frameproperties 中找到了。如果你注意的话除了一些个人网站，商业性的正规网站很少用框架的。 不过在某些时候框架还是有它自己的优势。Frontpage 教程：制作网页中的书签书签书签的功能是使用在同一面网页资料过长时使用,能够使使用者迅速的移动到所要的位置上。适合用在教学进度表、小文章集锦等教学网页。书签的基本操作范例：做法：1.先将教学进度做成网页。122.在最上头列出选单。3.在目的位置（第一周）插入标签：将游标

15、在第一周的地方点一下选功能列插入书签为此位置取一个书签名称如w1 ,该位置前会出现如的小图示。4.依此类推,将所有目的位置（第五周、第九周、第十三周、第十七周）都插入书签名称如w2 , w3 , w4 , w5.注意书签名称绝对不能重复5.为选单作相对应的超连结：例如我们希望滑鼠按下14 周时,整个画面能移动到 w1 段落,做法如下选取文字14 周按右键选超连结 跳出一个设定超连结的视窗左下角设定要连到哪个书签的区域点选下拉式选单,选择要连结的书签名称即可6.重覆步骤 5，完成所有的选单设定。FrontPage 2003 创建可折叠列表创建可折叠列表1.在 设计 视图中, 将您希望创建大纲插入

16、点置于。2.on Format menu，click Bullets and Numbering 。3.在 编号 选项卡上, 选择的数字或字母开始所需，样式然后单击 确定 。4.要在大纲中的每一项，无论种级别它将占用已完成的列表中，键入该项目然后按 ENTER 键。5.当您键入最后一项时, 按两次 ENTER 键结束该列表。136.若要将每一项置于正确级别，执行下列操作： 若要将某项移动到下一个编号级别向下，单击该项目，单击格式设置工具条，并再单击 增加缩进量 两次。 若要设置的项的格式，并将其作为一个段落在当前级别 （不带项目符号或编号） 上，单击该项目，然后单击 增加缩进量 一次。若要 to up to p