frontpage网页设计制作步骤.docx

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

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

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

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

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

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

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

8、步骤保存网页单击菜单“文件”“保存”，保存以上修改内容。退出FrontPage 2003。网页制作步骤使用IE查看建立的网页单击桌面上IE图标;单击菜单“文件”“打开”，弹出打开对话框;选择“我的文档”下文件“index.htm”，单击打开，即可查看浏览效果在Frontpage中用框架实现网页布局框架(Frame)在网页上的应用很普遍,因为它可以同时显示出多个独立网页也可以将使用者常用的连结一直显示在画面上,减少上一页下一页的切换频率框架的基本操作1.先看我们要做到的成品-可以看出该网站共分3个框架-上、左、右，如下图：2.请开启frontpage-左上角的档案-选开新档案-网页，如下图：3.

9、会跳出如下视窗：选择框架页(如图1指示位置)-选择底下要的框架款式(如图2指示位置)- 在右下可以看到样式预览(如图3指示位置)-接着按确定即可。4.之后出现如下画面,可设定各框架网页内容：开新网页的意思是要自己做一个全新的网页,而设定起始网页是去连结一个已经做好的网页o请将上框与左框设定-开新网页o右框设定-设定起始网页-可选择在电脑中已做好的网页or网路上的某个网页此例我们连结到之前做好的个人档案（myself.htm），请点选浏览档案的图示，如下图：5.步骤4完成后，会出现如下图：6.此时可以先存档-此时会有视窗引导存档o第一个是问您上框架的网页要存成什么档名，如图（可自己取名，如top

10、.htm）o接下来会问您左方框架的档案要存什么档名，如图（可自己取名，如left.htm）o最后跳一个视窗-问您整个框架要存成什么档名，如图（可自己取名，如index.htm，一般主框页会拿来当做首页，通常网站的首页会命名为index.htm）o为什么没有问到，右框的网页要存成什么档名? 这是因为我们当初设定右框是连结到一个已经做好的网页（myself.htm），既然是已经做好的网页，自然就没有存不存档的问题7.框架内容的设定（取消框架线）：在网页的任一处按右键，选框架内容，如下图：选框架页-将显示框线的勾勾去掉，即可取消框架线。8.最后按照范例，我们在上方网页插图，左方网页先用做一选单。选单

11、在设定连结时,必须指定两项资讯（与超连结的观念相同） (责任编辑：大宝库)在Frontpage中用框架实现网页布局目前实现网页布局的基本方法无外乎表格和框架。上面表格大家已经初步理解了，下面就要说说框架了，也即所说的Frame。其实用框架来规划网页本身有很大的缺点，首先不利于网友更好的利用网页资源，因为大家总不能在线把所有的东西看一遍了，而保存起来框架的缺点就出来了，你将不得不每次多余的保存同样的两个页。我们花一些时间来说说这个问题或许对大家更好的使用框架有好处。在用框架布局时：以一个最简单的上下框架为例，整个网页包含两个独立的网页，将被分别保存或是调入使用，另外整个框架网页也将被作为一个也保

12、存一次，而我们用框架时，无非是想利用他的很好的内容的切换性，这时如果保存起来本来一个网页的内容就要同时保存3个，是不是很不划算的。1在编辑器里：File/new(或是直接按CTRL+N)，在弹出的窗口中选Frame标签，然后在下面的列表里。选择相应的框架类型。2OK以后，这时网页已经变成了框架的结构，通过各自框架Frames你可以选择新建网页或是导入已经存在的网页。setinitalpages(导入一个存在页)newpage(点击后新建一个页面)3基本的框架结构已经建立了：这时应该看看如何实现框架中的切换连接了，因为在使用框架时最具代表性的就是三分框架，而这三部分都有各自的名称。最上面为ban

13、ners：网页的头部分。左边为contents部分。右边是主体显示部分。main4那么如何实现点击连接时在main窗口中打开那，在左边的contents窗口中作连接CTRL+K或是用Edit/hyperlink来完成，这时你可以在窗口中的图示中选择连接打开的目标位置。如：main。当然你同时还可以设定目标Target属性。不过这时多少显得就没必要了，当各自Frame内容超出一屏幕时，滚动条会自动添加进来。你也可以设定从不显示滚动条。大部分的属性可以右击：在Frameproperties中找到了。如果你注意的话除了一些个人网站，商业性的正规网站很少用框架的。不过在某些时候框架还是有它自己的优势。

14、Frontpage教程：制作网页中的书签书签书签的功能是使用在同一面网页资料过长时使用,能够使使用者迅速的移动到所要的位置上。适合用在教学进度表、小文章集锦等教学网页。书签的基本操作范例：做法：1.先将教学进度做成网页。2.在最上头列出选单。3.在目的位置（第一周）插入标签：将游标在第一周的地方点一下-选功能列插入-书签-为此位置取一个书签名称如w1 ,该位置前会出现如的小图示。4.依此类推,将所有目的位置（第五周、第九周、第十三周、第十七周）都插入书签名称如w2 , w3 , w4 , w5.注意书签名称绝对不能重复5.为选单作相对应的超连结：例如我们希望滑鼠按下14周时,整个画面能移动到w

15、1段落,做法如下-选取文字14周-按右键-选超连结-跳出一个设定超连结的视窗-左下角设定要连到哪个书签的区域点选下拉式选单,选择要连结的书签名称即可6.重覆步骤5，完成所有的选单设定。FrontPage 2003创建可折叠列表创建可折叠列表 1.在设计视图中, 将您希望创建大纲插入点置于。2.on Format menu，click Bullets and Numbering 。3.在编号选项卡上, 选择的数字或字母开始所需，样式然后单击确定。4.要在大纲中的每一项，无论种级别它将占用已完成的列表中，键入该项目然后按 ENTER 键。5.当您键入最后一项时, 按两次 ENTER 键结束该列表。

16、6.若要将每一项置于正确级别，执行下列操作：若要将某项移动到下一个编号级别向下，单击该项目，单击格式设置工具条，并再单击增加缩进量两次。若要设置的项的格式，并将其作为一个段落在当前级别（不带项目符号或编号）上，单击该项目，然后单击增加缩进量一次。若要 to up to previous level move item，click item，and then as many times as must so that to that want level move item click Decrease Indent 。 7.若要应用编号，应用字母，或将项目符号样式应用于不同级别的项，用鼠标右键

17、单击一个项目，然后单击列表属性。8.单击图片项目符号选项卡，则无格式项目列表选项卡或数字选项卡，单击想要使用，样式，然后单击确定。将整个列表设置为 Collapsible若要 to make list collapsible，follow these steps: 1.用鼠标右键单击在列表的最高级别的项目，然后单击列表属性。2.单击以选中启用可折叠大纲复选框。3.如果您希望在 Web 浏览器中首次打开页时折叠列表，单击以选择时折叠复选框，然后单击确定。注意如果您的列表包含相同的级别上的多个项目，每个将可折叠的并且低于第一个级别的所有级别也都将可折叠的。若要设置为可折叠列表中只有一个级别，请按照

18、下列步骤操作：1.用鼠标右键单击第一个项目在您希望可折叠，在列表的级别，然后单击列表属性。2.单击以选中启用可折叠大纲复选框。注意如果您的列表包含相同的级别上的多个项目，每个将可折叠的并且低于第一个级别的所有级别也都将可折叠的。疑难解答若要 to test your collapsible list，save your Web Page，click Preview ，and then click in collapsible list first item。可折叠列表支持 Microsoft Internet Explorer 4.0，更高版本和其他 Web 浏览器的支持动态 HTML。Fro

19、ntPage2003初级教程-基础教程详细图解一、新建网站打开FrontPage2003 点击新建菜单命令会弹出一个对话框，有不同的模板供选择。选择你想要的一个，然后确定，会自动生成一个网站。二、新建一个空白网页你也可选择新建空白网页，或点新建工具按钮。当然，这上面的内容你要自己编辑。三、打开一个网站点击打开网站四、浏览网页“文件”“浏览”有几个选项（不同分辨率）五、编辑方式有“设计”“拆分”“代码”“浏览”六、插入WEB组件 WEB组件中有很多常用的功能，你自己去试各项。七、插入图片 有两种情况:1、插单个图片，可在菜单上直接用；2、插入图片库，也可插入WEB组件中，可插队入图片库。有三种形

20、式（自己试一下，因为有预浏）。八、插入“互动按钮”，互动按钮可以有三种形式，鼠标经过，按过，没按。 可选形式，在文本的文本框中将按钮文本换成你要的文本。如：首页 还可改变文本的属性，字体颜色，等。有初始颜色，经过颜色，按下颜色九、在网页中插入已有的网页 如果新建的网页，内容想用现存的，只须插入已有的网页就行了。比较简便。十、书签链接 有时的链接，不是和另一个网页链接，而是和页面中某一段链接，或另一页面的一段链接。这种方法用在“标题和内容”之间链接最方便。 1、选择：菜单、插入、书签（被链接的内容）（一般自动生成名字，你也可以自己指定名字）2、制作到书签的链接（标题）(责任编辑：大宝库)3、选择

21、右边的“书签”4、找到书签名十一、创建一个超链接 1、选中要建立超链接的文字或图片。 2、右键，弹出菜单，点击“超链接”3、在弹出的对话框中选中被链接的网页或图片或其他（注：如是下载软件选中它） 4、当然，最后是点击“确定”(责任编辑：大宝库)十二、插入表格 1、点击菜单中“表格”再“插入”再移到“表格”单击“表格”2、在弹出的对话框中有几项值是要注意的： a、表格的“行数”和“列数” b、“指定宽度”和“指定高度”如果是用固定宽和高填写数字，如果是页面随屏幕变化的选100% c、“使用背景图片”点击“浏览”找到图片 d、“对齐方式”用“默认” e、“浮动”方式用“默认” f、“边框”是表格宽

22、度如果选“零”则不显示表格否则显示你选或填的数字的宽度。 g、“单元格间距”是表格线本身的衬距，如：3时，表格线两根之间距为3。 h、“单元格间距”是表格中文字到框的距离。 i、当然还有颜色。十三、建立网站链接 这个功能和共享边框一起使用。 1、在编辑区下方有一个选项“链接”点击它。 此主题相关图片如下：进入建立链接面页 2、修改“新建网页”为“主页”3、添加“新建网页”新建一个网页或“已有的网页”已存在的网页，点击找到被链接的网页。 还可修改新建网页为你想要的中文名。(责任编辑：大宝库十四、新建自定义链接默认链接有时不够用，可以建自定义链接，独立于默认。在插入链接时有两个选项：一个是默认，另

23、一个是自定义链接。自定义链接可以放在主页下面，也可以放在独立的地方。下图一中的“娱乐”就是放在主页下的。图二中的新建成链接栏是独立的。当然你还可以在自定义下面添加下层链接。十五、共享边框 1、启用“工具”“网页选项”“创作”选中“共享边框” 2、“格式”中选中“共享边框”在对话框中（注：若想损事，选：所有网页）设置选项“上、左、右、下”（可以自定）3、在自动出现的共享边框中编辑链接栏属性5、和上一讲的链接栏配合使用，当你每添加一个网页在链接栏中会自动生成上面的效果十六、在网页中插入“链接栏” 1、光标在要插入链接栏的地方或选中共享边框 2、点击“插入”（或是编辑“链接栏”属性），Web组件，找

24、到“链接栏”，有两个选项：基于导航结构的链接栏；自定义链接栏 3、点下一步4、选择“样式”，有多种，自定。可以选中“使用鲜艳颜色”和“使用动态图形”6、点“完成”进入“属性”可以选中“主页”最后点确定。 7、最后效果8、请注意：链接栏的属性文件夹在_borders中，下面的几个文件就是，你还可以对不满意的重新进行编辑。top.htm是顶上的，left.htm是左边的，bottom.htm是下面的，right.htm上右边的 (责任编辑：大宝库)十七、插入“动态文字” 1、WEB组件中 2、在文字栏中写入你的文本3、还可以修改“样式” 十八、插入媒体插件 1、插入“WEB组件”到高级控件到插件

25、2、找到数据源，编辑相关 3、注：会自动识别媒体的，有两种RM和微软的 到此为止，frontpage2003的初级基础课程全部给大家演示完毕，当然这只是最简单的讲解，在你的实际制作过程中，你可以发挥自己的能力，做出你最喜欢的网页了。别忘了常来网页制作大宝库（)看看，这里一定有你想要的教程，需要的素材。FrontPage2003建站全攻略(一)在浩瀚的Internet建设自己的家园，这是我们的需求，无论是个人、还是组织。在创建网站之前我们事先在我们的硬盘中建立一个存放站点所有文件的目录。模板建站FrontPage可以适合不同个人和组织的需要，自动建立网“巢”站点。操作打开站点建立窗口：点击“文件

26、-新建”，在打开的窗口中可以看到自动建立站点的各种向导和模板。向导特点：选择向导程序列出的条件元素，创建某类有个性的站点和网页模板特点：直接采用已经设计好的条件元素，创建某类统一的站点和网页在FrontPage中，使用向导创建的一般是比较复杂的商业和大型站点，不适合个人在网上安家筑巢。我的网上小家就使用模板建立站点就够了。操作选择模板：在新建站点窗口，选择“个人站点”模板。在右面的选项栏中设置站点文件的存放地址。建议新建一个有意义的存放地址，如“e:webcom”，点击“确定”。操作查看站点结构：点击程序界面的“视图”窗口中的“导航”按钮，可以看到建立的站点由哪些文件组成以及站点的结构。我们看

27、到，个人站点模板的结构是主页下面有五个子页，分别是“自序”、“兴趣”、“收藏夹”、“图片库”、“反馈”，而在文件夹列表栏中列出了站点中的文件，其中“image”文件夹专门存放图片，另外还有五个HTML文件，其中的myfav3.html是备用的子网页文件。其他四个HTML文件分别对应主页和三个子网页。操作查看站点中的网页：在导航视图窗口的网站结构示意图中点击某个网页结构图标，如“主页”结构图标，可以打开该网页，我们就可以在窗口中看到这个预先定制的网页大概结构。点击文件夹列表中的文件也可打开。注意，打开网页后，我们可以看到导航视图窗口切换到了网页视图窗口。操作保存和打开站点：保存站点的工作很简单，

28、当关闭FrontPage的时候，按照提示就可以保存站点。实际上，保存站点主要就是保存网页，因此在修改编辑网页的时候，要时刻注意到保存。保存的方法和在文字编辑程序中保存文件类似。打开站点要复杂些，选择菜单“文件打开站点”，找到站点所在的目录，找到站点文件夹（是一个带有小圆球的文件夹图标，是FrontPage建立的站点管理文件操作删除站点：删除站点很简单，直接在Windows中删除站点所在的文件夹即可。也可在程序中删除。进一步学习的建议：熟练使用各种视图和窗口，使用向导创建复杂的商业和项目站点。使用导入向导，将别人已经建立的站点导入，成为自己可以利用的站点。模板建网页目前，我的网“巢”还只有一个主

29、页，三个子页，我想再添加一个“我的简历”的子页。 使用模板创建站点，站点中有几个网页都是事先设计好的，大多数情况下，都需要添加网页，或者用新设计的网页替换掉事先设计的网页。建立新的网页，使用向导和模板是最方便不过的了，因为FrontPage提供的网页模板非常丰富，可以满足大多数情况的需要。 操作打开网页模板窗口：在视图窗口中点击“网页”按钮，切换到网页视图。选择菜单“文件新建网页”，打开新建网页的模板选择窗口。注意，不同的视图窗口，使用“文件新建网页”菜单命令的结果不同，后面我们将会提到。 在网页模板选择窗口中，有三个标签页，在“常规”标签页中有三十多个模板供选择，一般个人网“巢”中的网页使用“常规”标签页中的模板就足够了。根据我新建网页的内容和预想的设计，我选择了“带有标题的宽行正文”模板。 操作选择模板：点击“带有标题的宽行正文”模板项，然后点击“确定”，程序即开始按模板新建网页。 回到主窗口，就可以看到一个有大概结构的网页，这个网页以很清晰的方式提示我在哪里放标题，哪里放正文，网页段落结构也排得很好，我只要按照提示添加内容就可以了。 新建立的网页还没有保存在硬盘中，由于这个网页是要添加到刚才新建立的网站中去的，因此，我们将它保存到网站文件所在的目录（e:webjxcom）中。操作保存新建的网页文件：选择“文件保存文件”，在