FrontPage2003网页制作

1、任务一任务一 制作简单网页制作简单网页任务二：网页布局及发布、表任务二：网页布局及发布、表单的创建单的创建我们很多人都喜欢上网冲浪，甚至于梦想着我们很多人都喜欢上网冲浪，甚至于梦想着有一天自己也能拥有一个个人网站，可是，有一天自己也能拥有一个个人网站，可是，怎样制作网站呢？我们可能还从未曾真正的怎样制作网站呢？我们可能还从未曾真正的知道知道,而而FrontPage就可以帮助我们完成我们就可以帮助我们完成我们的小小愿望。的小小愿望。任务引入任务引入学习内容学习内容FrontPage的主要功能。的主要功能。FrontPage的启动与退出。的启动与退出。网页与网站的关系。网页与网站的关系。Front

2、Page的三种编辑方式（普通、的三种编辑方式（普通、HTML、预览）以及三种编辑方、预览）以及三种编辑方式的不同用途。式的不同用途。FrontPage中的中的6种视图，即网页视图、报表视图、导航视图、超链种视图，即网页视图、报表视图、导航视图、超链接视图、任务视图，以及各种视图的作用和操作特点。接视图、任务视图，以及各种视图的作用和操作特点。创建站点：了解站点的概念，掌握创建站点的方法。创建站点：了解站点的概念，掌握创建站点的方法。网页编辑：新建网页、打开网页、设置文字格式、设置网页属性、网页编辑：新建网页、打开网页、设置文字格式、设置网页属性、网页预览。网页预览。插入对象：插入文本、水平线、

3、图片、字幕、表格等。插入对象：插入文本、水平线、图片、字幕、表格等。超链接：创建超链接。超链接：创建超链接。 在在Office 2003套装软件中，套装软件中，FrontPage2003已不再是其中的一个组件，而是被分离出来。已不再是其中的一个组件，而是被分离出来。FrontPage2003的安装、启动和退出方法都同的安装、启动和退出方法都同Office系列的其它软件基本相同系列的其它软件基本相同 。 FrontPage 2003提供了六种视图模式，提供了六种视图模式，即网页视图、文件夹视图、报表视图、导即网页视图、文件夹视图、报表视图、导航视图、超链接视图和任务视图。它们是航视图、超链接视图

4、和任务视图。它们是用户进行网站设计的有力工具，灵活运用用户进行网站设计的有力工具，灵活运用视图模式，将极大地方便设计操作和网站视图模式，将极大地方便设计操作和网站管理。管理。一、一、网页视图网页视图 网页视图为网页的设计提供了一个工作网页视图为网页的设计提供了一个工作场所，可以在这个环境下对网页进行设计场所，可以在这个环境下对网页进行设计和修改。和修改。二、文件夹视图二、文件夹视图 打开一个网页后，系统默认是以文件夹打开一个网页后，系统默认是以文件夹视图来显示的，文件夹视图与视图来显示的，文件夹视图与Windows中中的资源管理器相似，它能够显示当前的的资源管理器相似，它能够显示当前的Web中

5、的内容是如何组织的。中的内容是如何组织的。 三、三、报表视图报表视图 报表视图相当于属性检查，它能给出当报表视图相当于属性检查，它能给出当前网站的有关属性。灵活应用报表视图能前网站的有关属性。灵活应用报表视图能够使用户方便地了解网页的属性，便于把够使用户方便地了解网页的属性，便于把握和修改网页。握和修改网页。 四、导航视图四、导航视图 导航视图清楚地显示了导航视图清楚地显示了Web的结构，用的结构，用户可以从中了解到网站中各部分之间的逻户可以从中了解到网站中各部分之间的逻辑关系，它反映了网站的整个脉络。辑关系，它反映了网站的整个脉络。 五、五、超链接视图超链接视图 超链接视图以图形化的界面显示

6、了当前超链接视图以图形化的界面显示了当前网页和其他文件之间的超链接关系，也可网页和其他文件之间的超链接关系，也可以显示网站与网站之间的超链接。以显示网站与网站之间的超链接。 六、任务视图六、任务视图 任务视图用任务列表的方式对任务进行任务视图用任务列表的方式对任务进行管理，操作人员可以把详细的任务放在任管理，操作人员可以把详细的任务放在任务列表中，这样它就会提醒设计人员需要务列表中，这样它就会提醒设计人员需要完成哪些任务，还剩哪些任务没有完成。完成哪些任务，还剩哪些任务没有完成。启动启动FrontPage2003 单击任务栏上的单击任务栏上的“开始开始”按钮，指向按钮，指向“程序程序”，单击，

7、单击 “Microsoft FrontPage”启动启动FrontPage2003。新建站点新建站点选择选择“文件文件”菜单中的菜单中的“新建新建”“”“站点站点”命令，指定站点的位命令，指定站点的位置，建立站点置，建立站点Web1,FrontPage2003默认建立主页（默认建立主页（index.htm）。）。在站点中新建网页：在站点中新建网页：选择选择“文件文件”菜单中的菜单中的“新建新建”“”“网页网页”命令，新建网页。命令，新建网页。( (默认：默认：New Page 1)New Page 1) 插入水平线：将插入点置于适当位置，使用插入水平线：将插入点置于适当位置，使用“插入插入”菜

8、单中的菜单中的“水平水平线线”命令插入水平线。右键单击插入的水平线，选择命令插入水平线。右键单击插入的水平线，选择“水平线属性水平线属性”命令，可以在弹出的命令，可以在弹出的“水平线属性水平线属性”对话框中修改水平线的属性。对话框中修改水平线的属性。 插入表格：插入表格： 选择选择“表格表格”菜单中的菜单中的“插入表格插入表格”命令，命令， 或者选择或者选择“表格表格/手绘表格手绘表格”命令，命令， 或者使用工具栏中的或者使用工具栏中的“插入表格插入表格”按钮，在插入点处建立一个两列按钮，在插入点处建立一个两列多行的表格，以便下面使用表格定位文字和图片。多行的表格，以便下面使用表格定位文字和图

9、片。 在表格中插入文字和图片：选取合适的文字和图片素材，分别插入到在表格中插入文字和图片：选取合适的文字和图片素材，分别插入到表格的单元格中，调整单元格的宽度和高度属性直至合适。表格的单元格中，调整单元格的宽度和高度属性直至合适。 预览和保存网页：预览和保存网页：切换到预览视图可以切换到预览视图可以查看网页的效果。制查看网页的效果。制作完成后，保存网页作完成后，保存网页为为“历届奥运吉祥物历届奥运吉祥物.htm，注意设置合，注意设置合适的网页标题。保存适的网页标题。保存后，在浏览器中打开后，在浏览器中打开并浏览该网页。并浏览该网页。 在窗口左侧的文件夹列表中，双击网页文件在窗口左侧的文件夹列表

10、中，双击网页文件“index.htm”，打开并，打开并编辑该网页文件。输入标题编辑该网页文件。输入标题“历届奥运会吉祥物历届奥运会吉祥物”，利用，利用“格式格式”工具栏中的工具栏中的“样式样式”将其设置为将其设置为“标题一标题一”，并设，并设“对齐方式对齐方式”为为“水平居中水平居中”。 选择选择“插入插入”菜单中的菜单中的“水平线水平线”命令，插入水平线。双击水平线，在命令，插入水平线。双击水平线，在打开的打开的“水平线属性水平线属性”对话框中设置其属性。输入文字对话框中设置其属性。输入文字“北京北京2008奥奥运吉祥物及历届奥运吉祥物运吉祥物及历届奥运吉祥物”，并在两段文字后分别插入图片，

11、并在两段文字后分别插入图片“福娃贝福娃贝贝贝”和和“2004年奥运吉祥物年奥运吉祥物”。 插入超链接插入超链接 第一步：选择文字第一步：选择文字“北京北京2008奥运吉祥物奥运吉祥物”。第二步：利用第二步：利用“插入插入”菜单或右键菜单中菜单或右键菜单中“创建超链接创建超链接”命令，打开命令，打开“创建超链接创建超链接”对话框。对话框。 插入超链接插入超链接:第三步：在第三步：在“创建超链接创建超链接”对话框对话框中选择网页中选择网页“2008奥运吉祥物奥运吉祥物.htm”，该网页在任务二中已创，该网页在任务二中已创建。建。第四步：单击第四步：单击“确定确定”按钮，完成按钮，完成超链接的添加。

12、超链接的添加。 第五步：为图片第五步：为图片“福娃贝贝福娃贝贝”设置设置超链接，指向网页超链接，指向网页“2008奥运吉祥奥运吉祥物物.htm”；为文字；为文字“历届奥运吉祥物历届奥运吉祥物”和图片和图片“2004年奥运吉祥物年奥运吉祥物”添添加超链接，链接到任务二创建的网加超链接，链接到任务二创建的网页页“历届奥运吉祥物历届奥运吉祥物.htm”。 设置图片设置图片“福娃贝贝福娃贝贝”和和“2004年奥运吉祥物年奥运吉祥物”的属性的属性。 选中图片，利用“格式”菜单中的“属性”或右键菜单中的“图片属性”命令打开“图片属性”对话框，选择其中的“外观”选项卡，修改布局、大小等属性，将图片的对齐方式

13、设置为“相对垂直居中” 为网页为网页“2008奥运吉祥物奥运吉祥物.htm”和和“历届奥运吉祥物历届奥运吉祥物.htm”添加返添加返回回“index.htm”的超链接的超链接 插入交互式按钮插入交互式按钮实现网页实现网页“2008奥运会吉祥物奥运会吉祥物.htm”转到其他网页和返回主页的链接。转到其他网页和返回主页的链接。 插入滚动字幕插入滚动字幕在在index.html标题文字标题文字“奥运吉祥物奥运吉祥物”上方插入滚动字幕上方插入滚动字幕“奥运会吉祥物的历史奥运会吉祥物的历史”，设置为向左滚动。设置为向左滚动。 添加横幅广告管理器添加横幅广告管理器在左上角的位置插入横幅广告管理器组件。可以

14、添加多个图片定时切换，还可以设置超链接 保存网页，在浏览器中查看网页，并测试超链接。保存网页，在浏览器中查看网页，并测试超链接。课后作业课后作业1用用FrontPage制作一个站点。设置网页标题栏内容为制作一个站点。设置网页标题栏内容为“我的第一个网页我的第一个网页”，插入水平线，插入水平线，换行后再插入，换行后再插入“日期和时间日期和时间”2在上题网页中插入图片和背景图片。在上题网页中插入图片和背景图片。3在上题网页中添加滚动字幕在上题网页中添加滚动字幕“欢迎光临本网站欢迎光临本网站”。4在上题网页中的滚动字幕下加入一个在上题网页中的滚动字幕下加入一个3行行4列的表格，将表格第一行合并，其中

15、加入文字列的表格，将表格第一行合并，其中加入文字“课程表课程表”。表格边框粗细为。表格边框粗细为“3”，亮边框，亮边框“浅蓝色浅蓝色”、暗边框、暗边框“蓝绿色蓝绿色”。5在上题的网页中的表格下输入文字在上题的网页中的表格下输入文字“有情链接有情链接”，并将其链接到中国教育和科研计算机，并将其链接到中国教育和科研计算机网网http:/ 知识技能点知识技能点FrontPage2003FrontPage2003的表格的创建和使用的表格的创建和使用FrontPage2003FrontPage2003的框架的创建和使用的框架的创建和使用FrontPage2003FrontPage2003的表单的创建和使

16、用的表单的创建和使用FrontPage2003FrontPage2003的网页的发布和维护的网页的发布和维护王君要为燕山中学校报的网站创建一个介绍关于王君要为燕山中学校报的网站创建一个介绍关于“中国节日中国节日”专题网页，他已经设计了关于专题网页，他已经设计了关于“春节春节”、“元宵节元宵节”、“清清明节明节”、“端午节端午节”的的4个网页，下面要进行工作就是把各个网页，下面要进行工作就是把各个网页组织在一起，进行整体布局，并创建一个征求反馈意个网页组织在一起，进行整体布局，并创建一个征求反馈意见的网页，发布在学校的网站上。见的网页，发布在学校的网站上。 王君首先要建立一个带表格的网页做为目录

17、，然后创建王君首先要建立一个带表格的网页做为目录，然后创建一个表单页面，再通过创建框架把这些网页进行整体的布局，一个表单页面，再通过创建框架把这些网页进行整体的布局，最后发布到学校的网站上。最后发布到学校的网站上。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 任务引入任务引入初始图成形图任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 相关知识：表格由行和列交叉所形成的单元格组成。在单元相关知识：表格由行和列交叉所形成的单元格组成。在单元格中可以放置任何对象，例如文本、图像、表单、格中可以放置任何对象，例如文本、图像、表单、FrontPage组件等。

18、利用表格可以有条理地排列数据或者组组件等。利用表格可以有条理地排列数据或者组织网页布局。表格可以将文本排列成并列的段落，或模拟文织网页布局。表格可以将文本排列成并列的段落，或模拟文本的分栏形式，也可以利用宽度固定的表格在网页上为文本本的分栏形式，也可以利用宽度固定的表格在网页上为文本提供边界。提供边界。FrontPage 2003提供了与提供了与Word字处理软件类似的字处理软件类似的表格处理功能，在网页中可以轻松地创建和处理表格。表格处理功能，在网页中可以轻松地创建和处理表格。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 创建方法如下：创建方法如下： 使用菜单命令使用

19、菜单命令“插入插入”“表格表格”，弹出如图，弹出如图814所所示，示，可以对插入的表格进行精确的设置，包括行和列的数目、可以对插入的表格进行精确的设置，包括行和列的数目、边框尺寸以及单元格宽度等。边框尺寸以及单元格宽度等。王君王君根据实际情况，选择了大根据实际情况，选择了大小为小为4行行1列，和背景颜色为水绿色的的表格。然后在插入的列，和背景颜色为水绿色的的表格。然后在插入的表格中输入文字，并最后在表格属性中调整表格，完成后的表格中输入文字，并最后在表格属性中调整表格，完成后的表格页面如图表格页面如图815所示。所示。 任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 图8

20、14表格属性图图815 表格设计完成图 任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 创建表格还有以下创建表格还有以下2 2种方法：种方法：（1 1）可以使用）可以使用“常用常用”工具栏中的工具栏中的“插入表格插入表格”按钮，快按钮，快速地插入表格。速地插入表格。（2 2）从）从“表格表格”菜单中选择菜单中选择“手绘表格手绘表格”命令，手动绘制命令，手动绘制表格。表格。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 表格属性的设置：表格属性的设置：对齐方式：可以选择左对齐、右对齐、水平居中和两端对齐。对齐方式：可以选择左对齐、右对齐、水平居中和两端

21、对齐。该属性决定表格在网页中的相对位置。该属性决定表格在网页中的相对位置。浮动：可以选择左对齐、右对齐。该属性决定表格与其他网页浮动：可以选择左对齐、右对齐。该属性决定表格与其他网页元素的排列关系，即元素的排列关系，即“文字环绕文字环绕”效果。效果。指定宽度和高度：设置表格的大小。可以使用绝对大小指定宽度和高度：设置表格的大小。可以使用绝对大小“像素像素”或相对大小或相对大小“百分比百分比”。单元格衬距：设置表格线与表格内容的距离。单元格衬距：设置表格线与表格内容的距离。单元格间距：设置两个相邻单元格边框的距离单元格间距：设置两个相邻单元格边框的距离边框：粗细以像素为单位，可以选择合适的边框颜

22、色。边框：粗细以像素为单位，可以选择合适的边框颜色。背景：可以指定背景颜色或背景图像。背景：可以指定背景颜色或背景图像。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 表格属性的设置：创建表格后，可以对表格单元格、行和列的布局和结构进行调整，具体操作有：调整行、列或单元格；插入行、列或单元格；删除行、列或单元格；合并、拆分单元格；平均分布行高、列宽；设置单元格属性等。在“单元格属性”对话框中，可以设置单元格中内容的布局，精确定义单元格的宽度、高度，确定单元格的背景以及边框的颜色等。 王君完成了一个表格网页的设计，接着要做的工作就是利用表单设计一个反馈网页。任务二：网页布局

23、及发布、表单的创建任务二：网页布局及发布、表单的创建 相关知识：相关知识：表单与网站之间的关系在概念上类似于表格与表单与网站之间的关系在概念上类似于表格与纸张之间的关系，不同之处在于使用表单可以与网站访问者纸张之间的关系，不同之处在于使用表单可以与网站访问者交互以及从访问者那里收集信息。用户在表单中输入数据然交互以及从访问者那里收集信息。用户在表单中输入数据然后提交给后提交给Web服务器，例如在表单中输入姓名及密码，服务服务器，例如在表单中输入姓名及密码，服务器根据输入通过脚本进行判断是否允许登录。器根据输入通过脚本进行判断是否允许登录。通常可以使用通常可以使用网站上的表单来完成以下典型任务：

24、网站上的表单来完成以下典型任务： 从网站访问者那里检从网站访问者那里检索联系信息（例如，留言簿）；接受订单并收集交货与收费索联系信息（例如，留言簿）；接受订单并收集交货与收费信息；用户登录网站。信息；用户登录网站。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 创建表单创建表单首先在需要添加表单的位置单击；然后，单击首先在需要添加表单的位置单击；然后，单击“插入插入”单，单，鼠标指向鼠标指向“表单表单”，在出现的子菜单中单击在出现的子菜单中单击“表单表单”，如图，如图816所示。所示。在在FrontPage 2003FrontPage 2003中，有文本框、文本区、分中，

25、有文本框、文本区、分组框、复选框、选项按钮、文件上载、下拉框、高级按钮、组框、复选框、选项按钮、文件上载、下拉框、高级按钮、图片、标签等几种表单域。图片、标签等几种表单域。插入表单图 任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 王君根据实际情况，要获得反馈者的姓名、性别、建议王君根据实际情况，要获得反馈者的姓名、性别、建议等信息。分别了插入等信息。分别了插入“文本框文本框”、“选项按钮选项按钮”和和“文文本区本区”表单域。其操作步骤如下：表单域。其操作步骤如下：首先输入文字首先输入文字“姓名姓名”，在其后插入，在其后插入“文本框文本框”表单域，表单域，然后输入文字然后

26、输入文字“性别性别”，在其后插入两个，在其后插入两个“选项按钮选项按钮”表单域，并在对应的表单域，并在对应的“选项按钮选项按钮”位置输入文字位置输入文字“男男”，“女女”，最后输入文字，最后输入文字“建议建议”，并在其后插入，并在其后插入“文本文本区区”表单域。完成如图表单域。完成如图所示。所示。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 表单页设计图表单页设计图这样，就设计完成了一个利用表单创建的页面。这样，就设计完成了一个利用表单创建的页面。 任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 FrontPage 2003提供的常用的几种表单域的

27、功能【文本框】用于让浏览者输入一行文字，这些文字就是此表单域的取值。【文本区】用于让浏览者输入多行文字，这些文字就是此表单域的取值。【文件上载】用来上载一份文件。浏览者输入一个文件名称或者使用按钮定位这个文件。【复选框】用来提供多个互不排斥的选项。复选框可以单个出现，也可以成组出现。在选择时，可以选择多个，也可以都不选。不同的复选框可以共用一个表单域名称。复选框的取值由复选框的选择状态来决定，每个复选框都对应于一条提交的名称和取值信息。【选项按钮】通常成组使用，用来提供一组互相排斥的选项。在选择时只能选择其中一项。单选按钮不仅具有表单域名称，而且同组的单选按钮还必须具有相同的组名。在提交表单时

28、，每组单选按钮中只传递选中的单选按钮的名称和取值的组合。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 FrontPage 2003提供的常用的几种表单域的功能【分组框】带标题的方框区域，包含一组相关的字段。【下拉框】提供一个选项列表，供浏览者从中选择需要的选项。一般情况下，浏览者只能从中选择一项，但通过修改其属性，也可以选择多项。【按钮】一个表单中至少要有2个按钮：提交（Submit）按钮和重置（Reset）按钮。提交（Submit）按钮用来把浏览者在表单上所填写的数据发送给Web服务器上的表单处理程序进行处理。重置（Reset）按钮用来把表单上的数据全部清 空重新填写

29、。在FrontPage 2000中还有一种属性为“普通”的按钮。【高级按钮】与普通按钮的功能一样，只是其上面能够显示HTML内容。【图片】实际上是一个由图片表示的提交按钮。当单击图片按钮时，把表单数据和点击的位置信息发送给服务器。【标签】通常意义上的标签是指在表单域旁边的说明性文字，没有可击性。这里所说的标签是一种具有可击性的标签。通过单击这类标签，可以将输入焦点移到此标签所对应的表单域中。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 提交表单的设置：提交表单的设置：WebWeb服务器怎样获取客户在表单中填写的信息呢？当客户单击服务器怎样获取客户在表单中填写的信息呢？当

30、客户单击“提交提交”按钮后，按钮后，WebWeb服务器用表单处理程序来处理表单上的信息，表单处理服务器用表单处理程序来处理表单上的信息，表单处理程序可以是注册组件，也可以是自定义的程序可以是注册组件，也可以是自定义的ISAPIISAPINSAPINSAPI应用程序或应用程序或CGICGI脚本等。脚本等。表单处理程序位于表单处理程序位于WebWeb服务器端，用于处理客户提交过来的表单上的服务器端，用于处理客户提交过来的表单上的内容，或者发送确认信息给客户。内容，或者发送确认信息给客户。要指定表单处理程序，在表单上单击鼠标右键，在弹出的菜单中选择要指定表单处理程序，在表单上单击鼠标右键，在弹出的菜

31、单中选择“表单属性表单属性”命令，打开命令，打开“表单属性表单属性”对话框，如图所示。对话框，如图所示。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 设置表单属性图设置表单属性图王君完成了一个利用表单创建的反馈网页的设计，接着要做王君完成了一个利用表单创建的反馈网页的设计，接着要做的工作就是利用框架把所设计的这些网页整合在一起，形成的工作就是利用框架把所设计的这些网页整合在一起，形成一个完整的关于一个完整的关于“中国节日中国节日”的主题网站。的主题网站。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 相关知识：相关知识：框架是一种特殊的网页技术，含

32、有框架的网页是一种特殊的网页，一般称为框架网页。使用框架后，整个网页被分割成几个区域，每个区域称为一个框架窗口，任何一个框架窗口单独显示一页。框架窗口可以作为超链接的窗口，当浏览者点击一个超链接时，该超链接的目标窗口便可以是目标框架窗口，而不是整大体上浏览器的窗口。框架技术是有效架构网页结构和合理展示信息的工具，也为浏览者提供了方便和友好的界面。本章将结合实例以详细的操作步骤介绍在网页中使用框架的基本方法和技能。通过本章的学习，读者应该理解框架网页的基本概念，掌握框架网页的创建、编辑和保存以及框架属性和框架网页超链接的设置等内容。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的

33、创建 1创建框架在“文件”框的“新建”子框中选择“网页”命令，打开“新建”对话框；如图819所示。 图8 19新建对话框图任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 选择其中“其他网页模板”命令，弹出“网页模板”对话框，如图820所示。图820 网页模板图 任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 王君根据实际情况，选择“横幅和目录”的框架网页，打开如图821 所示。图821 “横幅和目录”的框架网页图横幅区网页内容区目录区任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 2创建框架超链接 一个新的框架网页不包含任何内容

34、，FrontPage 2003将在每个新框架中显示和两个按钮，单击前一按钮可以从站点中选择已准备好的网页，单击后一按钮可以在框架中创建一个新的空白网页。 由于王君已经准备好了4个“中国节日”的网页，所以他就单击选择已准备好的网页。首先单击横幅区的，弹出如图822 所示图822 插入超链接图任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 选择已准备好的横幅网页，单击“确定”。网页就变成923所示图823插入横幅图任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 同样的方法插入目录网页，网页就变成924插入目录图所示图824 插入目录图任务二：网页布局及发

35、布、表单的创建任务二：网页布局及发布、表单的创建 下面要分别插入4个“节日”的网页，这就要分别对应创建超链接，其方法如下：（1）选择要定义超链接的文字或图片；（2）单击“常用”工具栏上的“超链接”按钮，出现“创建超链接”对话框；（3）在“查找范围”中选择需要插入链接的目标网页；（4）单击“更改目标框架”按钮，出现“目标框架”对话框；（5）在“当前框架网页”区域中单击要用作目标的框架；（6）单击“确定”按钮，返回到“创建超链接”对话框，在“目标框架”栏中显示出设置的目标框架名称；（7）单击“确定”按钮。在指定目标框架时，除了当前的框架之外，还提供了一些特殊的框架来创建不同效果的目标框架。这些特殊

36、框架位于“目标框架”对话框中的“公用的目标区”区域，有以下几种：相同框架：将链接的网页显示在包含该超链接的 同一个框架内。整页：将框架展开为整个窗口后，显示链接网页。新建窗口：打开另外一个新窗口，显示链接网页。父框架：在当前框架的上层框架内显示链接网页。 任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 同样的方法插入反馈网页。设计完成后的网页如图825所示图825 设计完成图任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 FrontPage 2003 FrontPage 2003提供的常用的几种关于创建框架的操作：提供的常用的几种关于创建框架的操作：

37、保存框架网页保存框架网页 当完成框架网页之后，就需要保存这个框架网页。操作步骤如下：当完成框架网页之后，就需要保存这个框架网页。操作步骤如下：（1 1）单击）单击“常用常用”工具栏中的工具栏中的“保存保存”按钮，打开按钮，打开“另存为另存为”对对 话框，在右边的框架网页预览图中，其中一个框架话框，在右边的框架网页预览图中，其中一个框架 高亮显示，表示正在保存该网页；高亮显示，表示正在保存该网页；（2 2）在）在“文件名文件名”框中输入网页名称；框中输入网页名称；（3 3）单击）单击“更改更改”按钮，设置网页的标题；按钮，设置网页的标题；（4 4）单击）单击“保存保存”按钮，该网页保存完毕，框架

38、图中的另按钮，该网页保存完毕，框架图中的另 一个框架处于高亮状态；一个框架处于高亮状态；（5 5）重复步骤（）重复步骤（2 2）（）（4 4）的操作；）的操作；（6 6）当对话框中的整个框架处于高亮状态时，表示正在）当对话框中的整个框架处于高亮状态时，表示正在 保存框架网页本身；保存框架网页本身；（7 7）输入框架网页的文件名称及标题；）输入框架网页的文件名称及标题；（8 8）单击）单击“保存保存”按钮。按钮。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 任务二：任务二：网页布局及发布、表单的创建网页布局及发布、表单的创建 拆分框架拆分框架 当使用模板创建的框架结构不能

39、满足需要时，可以通过拆分框架当使用模板创建的框架结构不能满足需要时，可以通过拆分框架制作出更为复杂的框架网页。操作步骤如下：制作出更为复杂的框架网页。操作步骤如下：（1 1）选择要拆分的框架；）选择要拆分的框架；（2 2）在）在“框架框架”框中选择框中选择“拆分框架拆分框架”命令，打开命令，打开“拆分框架拆分框架”对话对话框；框；（3 3）根据需要选择）根据需要选择“拆分为列拆分为列”或或“拆分成行拆分成行”选项；选项；（4 4）单击）单击“确定确定”按钮完成拆分。按钮完成拆分。删除框架删除框架 可以从框架结构中删除指定的框架。此时，系统只是把框架从框架可以从框架结构中删除指定的框架。此时，系

40、统只是把框架从框架网页中删去，而此框架中的网页文件仍然存在。网页中删去，而此框架中的网页文件仍然存在。 操作方法是：选择要删除的框架，在操作方法是：选择要删除的框架，在“框架框架”框中选择框中选择“删除框架删除框架”命令即可。命令即可。 设置框架属性 通过对框架属性的设置，可以更改框架超链接的网页、调整框架大小等。基本操作是：选择目标框架，从“框架”框中选择“框架属性”命令，出现如图826所示的“框架属性”对话框，设置框架属性。图826框架属性对话框图任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 单击“框架属性”对话框中“框架网页”按钮，弹出如图827 所示。在这里可以

41、调整框架间距。清除“显示边框”复选框时，可以隐藏框架边框。 图827网页属性对话框图王君完成了整个网页的设计，接着要做的工作是把网页发布在学校的网站上。 任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 相关知识：相关知识： 通过使用 Microsoft Office FrontPage 2003 新增的“远程网站”视图，可以将整个网站或单独的网页发布到本地或远程的任何网站。本地网站是 FrontPage 2003中打开的源网站。远程网站是要发布到的目标网站，通常是承载Web服务的远程计算机。 在 FrontPage 2003中，可以发布到的远程 Web 服务器类型包括：1

42、、扩展的 Web 服务器 ，服务器上运行 Microsoft 或 Microsoft SharePoint Services 的 FrontPage Server Extensions 。2、一台文件传输协议 (File Transfer Protocol, FTP) 服务器。 3、一台 基于 Web 的分布式制作和版本控制 (WebDAV) 服务器。 4、计算机或网络驱动器上的文件夹。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 下面王君以下面王君以FTPFTP发布方式把设计的网站的发布在学校网站服务器上。发布方式把设计的网站的发布在学校网站服务器上。 (1) (1)

43、 设置远程网站属性，以便连接至服务器并最终进行发布。设置远程网站属性，以便连接至服务器并最终进行发布。首先，选择首先，选择“FTP”FTP”作为远程作为远程 Web Web 服务器，如图服务器，如图828 828 所示。所示。然后，在然后，在“远程网站位置远程网站位置”框内，键入主机名称，如框内，键入主机名称，如“ftp:/”ftp:/”。如如果网站需要上传到指定目录则需要在果网站需要上传到指定目录则需要在“FTPFTP目录目录”中输入目录名。中输入目录名。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 图828远程网站属性图任务二：网页布局及发布、表单的创建任务二：网页

44、布局及发布、表单的创建 (2) 2) 选择需要上传的文件选择需要上传的文件检查需要发布哪些文件，然后发布这些文件。操作要点如下：检查需要发布哪些文件，然后发布这些文件。操作要点如下：1 1、 “ “本地网站本地网站”位于窗口左侧，位于窗口左侧，“远程网站远程网站”位于右侧。远程网站位于右侧。远程网站是文件的发布目的地，如图是文件的发布目的地，如图829829文件上传对话框图所示。文件上传对话框图所示。 2 2、带箭头的文件是新文件，且尚未发布。带问号、带箭头的文件是新文件，且尚未发布。带问号 (?) (?) 的文件是有冲的文件是有冲突的文件。这意味着该文件自最近一次发布以来，在两个位置都进行突

45、的文件。这意味着该文件自最近一次发布以来，在两个位置都进行了修改，或者意味着使用了修改，或者意味着使用 FrontPage 2003FrontPage 2003之外的其他应用程序发布了之外的其他应用程序发布了该文件。该文件。 3 3、准备就绪之后，通过单击窗口右下角的【发布网站】按钮即可发布、准备就绪之后，通过单击窗口右下角的【发布网站】按钮即可发布所有文件。或者，也可发布单个文件，即在本地网站选择一个文件，所有文件。或者，也可发布单个文件，即在本地网站选择一个文件，然后单击【本地到远程】按钮。然后单击【本地到远程】按钮。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 图

46、829 文件上传对话框图当网站发布成功后，在浏览器中打开站点仔细浏览，检查站点中每个网页是否正确地显示。当网页内容有更新时，只要单击“常用”工具栏中的“发布站点”按钮，即可将修改过的网页上传。王君把网页制作完成并成功的上传导学校的网站上，任务圆满完成了。任务二：网页布局及发布、表单的创建任务二：网页布局及发布、表单的创建 知识扩展知识扩展 网站和网页的设计既是一项复杂的技术也是一门艺术。设计良好的网站不但提供丰富的信息，而且给用户带来愉悦的浏览体验。以下是网站和网页设计的一些基本原则。1）目标明确，重点突出 首先要明确信息发布者的性质与用途，并了解主要浏览对象以及其进行的操作，做到有的放矢。然后，对发布的信息要分清主次，面面俱到可能使浏览者难以找到有用的信息，不能达到预期的目的。2）主题鲜明，层次清晰要做到主题鲜明，首先要设计好网站