网页设计与制作 第4章利用FrontPage 2003设计制作网页.ppt

《网页设计与制作 第4章利用FrontPage 2003设计制作网页.ppt》由会员分享，可在线阅读，更多相关《网页设计与制作 第4章利用FrontPage 2003设计制作网页.ppt（77页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、 通过本章学习，应该掌握以下内容：通过本章学习，应该掌握以下内容：FrontPage 2003的基本操作的基本操作 利用利用FrontPage 2003创建管理站点创建管理站点 利用利用FrontPage 2003处理网页文本、图片处理网页文本、图片 在在FrontPage 2003中使用表格和表单中使用表格和表单 在在FrontPage 2003中使用组件中使用组件 在在FrontPage 2003中创建编辑框架网页中创建编辑框架网页 在在FrontPage 2003中使用中使用CSS技术技术第第4章章 利用利用FrontPage 2003设计制作网页设计制作网页 2.1 HTML概述概述

2、2.1.1 什么是什么是HTML HTML（Hypertext Markup Language）是是一一种种专专门门用用于于Web页页制制作作的的编编程程语语言言，用用来来描描述述超超文文本本各各个个部部分分的的内内容容，告告诉诉浏浏览览器器如如何何显显示示文文本本，怎怎样样生生成与别的文本或图像的链接点。成与别的文本或图像的链接点。HTML作作为为一一种种网网页页编编辑辑语语言言，易易学学易易懂懂，能能制制作作出出精精美美的的网网页页效效果果，其其他他的的专专用用网网页页编编辑辑器器（如如FrontPage、Dreamweaver）都都是是以以HTML为为基基础的。础的。（1）强大的网页设计

3、功能）强大的网页设计功能 可以智能地完成可以智能地完成HTML文本的编辑，并可以针文本的编辑，并可以针对不同的浏览器对网页进行设置对不同的浏览器对网页进行设置;可以提供对多种可以提供对多种版本的浏览器的支持版本的浏览器的支持;完善了所见即所得的网页编完善了所见即所得的网页编辑操作辑操作 4.1 FrontPage 2003概述概述4.1.1 FrontPage 2003简介简介 1FrontPage 2003的特色的特色 （2）丰富的网页设计模板、设计向导和主题样）丰富的网页设计模板、设计向导和主题样式式 提供了多种网页设计模板、网页设计向导和主提供了多种网页设计模板、网页设计向导和主题样式。

4、使用这些模板、向导和样式，即使是初学题样式。使用这些模板、向导和样式，即使是初学者也可以设计出具有专业水准的网站。者也可以设计出具有专业水准的网站。1）设计网站）设计网站 FrontPage 2003 具具有有经经过过改改进进的的设设计计环环境境、新新的的布布局局和和设设计计工工具具、模模板板以以及及经经过过改改进进的的主主题题，这这一一切切可可以以帮帮助助用用户户实实现现网网站站创创意意，而而无无需需任任何何HTML知识。知识。（1）经过改进的工作环境和更大的设计区域）经过改进的工作环境和更大的设计区域 FrontPage 2003 集中了所有集中了所有 Web 设计功能，设计功能，并让用户

5、可以全景查看整个网站，从而使得网站并让用户可以全景查看整个网站，从而使得网站和网页设计比以前更容易。更大的设计区域还减和网页设计比以前更容易。更大的设计区域还减少了滚动操作。少了滚动操作。2FrontPage 2003的新增功能的新增功能 （2）布局表格和单元格）布局表格和单元格 通过使用布局表格和单元格，可以创建具有专业通过使用布局表格和单元格，可以创建具有专业外观的网页布局。布局表格是为网页创建的框架。外观的网页布局。布局表格是为网页创建的框架。布局单元格是该框架内的区域，其中包含网页中的布局单元格是该框架内的区域，其中包含网页中的内容（包括文本、图像、内容（包括文本、图像、Web部件和其

6、他元素）。部件和其他元素）。可以选择预定义的布局列表，也可以自己绘制，总可以选择预定义的布局列表，也可以自己绘制，总之，在做出最后决定前可以尝试多种布局。之，在做出最后决定前可以尝试多种布局。（3）图像描摹）图像描摹在使用图像描摹时，可以在图形程序中创建网页的外在使用图像描摹时，可以在图形程序中创建网页的外观模型图像，并将其作为直观参照，以便在观模型图像，并将其作为直观参照，以便在FrontPage 中创建或描摹网页设计。可以显示或隐中创建或描摹网页设计。可以显示或隐藏图像、将其设置为不透明以及更改其位置。藏图像、将其设置为不透明以及更改其位置。（4）动态）动态Web模板模板 通过将动态通过将

7、动态Web模板附加到网页上，可以快速创模板附加到网页上，可以快速创建共享相同布局的建共享相同布局的HTML网页。可以指定模板内的网页。可以指定模板内的某些区域可以编辑，而将其他区域保护起来。某些区域可以编辑，而将其他区域保护起来。（5）网页标尺和布局网格）网页标尺和布局网格 只要有好用的定位参照（如网页标尺和背景布局只要有好用的定位参照（如网页标尺和背景布局网格），精确设计和布置就会变得十分容易。通过网格），精确设计和布置就会变得十分容易。通过选择测量单位、线条样式和颜色以及间距选项，可选择测量单位、线条样式和颜色以及间距选项，可以自定义标尺或网格。以自定义标尺或网格。（6）设计阶段层设计阶段

8、层 在在FrontPage 2003中，层可以包含中，层可以包含HTML元素，元素，如文本和图形。在如文本和图形。在“层层”任务窗格中，可以查看网任务窗格中，可以查看网页上所有层的详细列表。可以重叠、嵌套、显示或页上所有层的详细列表。可以重叠、嵌套、显示或隐藏网页上的层。也可以通过使用隐藏网页上的层。也可以通过使用“行为行为”任务窗任务窗格使层具有动画效果。格使层具有动画效果。（7）经过改进的主题）经过改进的主题 FrontPage 2003使用级联样式表而不是使用级联样式表而不是HTML来来应用主题，所以文件变得更小、更透明并且更容易应用主题，所以文件变得更小、更透明并且更容易控制和修改。控

9、制和修改。2）开发网站）开发网站 FrontPage 2003具有改进的创作环境、新的图形具有改进的创作环境、新的图形功能、强大的编码工具、以及创建交互式脚本的工功能、强大的编码工具、以及创建交互式脚本的工具。此外，具。此外，FrontPage 2003可以生成有效和干净的可以生成有效和干净的HTML，能让用户更好地控制代码。，能让用户更好地控制代码。（1）网页视图）网页视图 用户在利用用户在利用FrontPage 2003设计网页时，可以在设计网页时，可以在下列任何网页视图中处理网页：下列任何网页视图中处理网页：“设计设计”视图视图 在在“设计设计”视图中设计并编辑网页。视图中设计并编辑网页

10、。此视图可以提供与使用设计工具创建网页一样的近此视图可以提供与使用设计工具创建网页一样的近似似“所见即所得所见即所得”的创作体验。的创作体验。“代码代码”视图视图 亲自查看、编写和编辑亲自查看、编写和编辑HTML代代码。使用码。使用 FrontPage 2003中的优化代码功能，可以中的优化代码功能，可以创建干净的创建干净的HTML，并且可以更容易地删除任何不，并且可以更容易地删除任何不想要的代码。想要的代码。“拆分拆分”视图视图 以拆分的屏幕格式检查并编辑网以拆分的屏幕格式检查并编辑网页内容，该视图能让用户同时访问代码视图和设计页内容，该视图能让用户同时访问代码视图和设计视图。视图。“预览预

11、览”视图视图 在无需保存网页的情况下，显示在无需保存网页的情况下，显示与网页在与网页在Web浏览器中的外观相近似的视图。使用浏览器中的外观相近似的视图。使用此视图可以查看创建网页时所做的更改。此视图可以查看创建网页时所做的更改。（2）图形工具）图形工具 改进的图形支持能够更容易处理来自其他程序的改进的图形支持能够更容易处理来自其他程序的图形。新的界面清楚地解释了将图像导入网站时的图形。新的界面清楚地解释了将图像导入网站时的默认行为，以及在编辑这些图像时将会出现的行为。默认行为，以及在编辑这些图像时将会出现的行为。这使用户可以更好地控制图像的显示和保存方式。这使用户可以更好地控制图像的显示和保存

12、方式。（3）脚本和编码工具）脚本和编码工具 行为是脚本选项，可用来向网页中的文本或其他行为是脚本选项，可用来向网页中的文本或其他元素快速添加交互性或增强功能。元素快速添加交互性或增强功能。（4）专业编码工具）专业编码工具 现在，现在，FrontPage 2003 在代码视图中提供了智能在代码视图中提供了智能感知技术，以减少代码中的错误。智能感知包括语感知技术，以减少代码中的错误。智能感知包括语句完成，并显示正在编写的代码的可用参数。智能句完成，并显示正在编写的代码的可用参数。智能感知可用于下列环境：感知可用于下列环境：HTML、级联样式表、级联样式表（CSS）、可扩展样式表语言（）、可扩展样式

13、表语言（XSL）、）、JScript或或JavaScript、VBScript以及以及ASP.NET。标题栏是标题栏是Windows应用程序所共有的，主要用来显应用程序所共有的，主要用来显示应用程序的文件名称，如果尚未赋予名称，示应用程序的文件名称，如果尚未赋予名称，FrontPage会自动命名为会自动命名为new_page_1.htm、new page_2.htm、。4.1.2 FrontPage 2003工作界面工作界面 1标题栏标题栏 菜菜单单栏栏位位于于标标题题栏栏的的下下方方，它它由由11个个菜菜单单按按钮钮组组成成。FrontPage 2003中中包包含含的的所所有有命命令令都都可

14、可以以在在这这11个菜单中找到。个菜单中找到。2菜单栏菜单栏 常常用用工工具具栏栏提提供供了了最最常常用用命命令令的的快快捷捷按按钮钮，如如保保存存、打打开开、新新建建文文档档，移移动动、复复制制数数据据，撤撤消消或或恢恢复复操操作作等等，使使用用户户执执行行这这些些命命令令的的时时候候更更方方便便快快捷捷且易学易记。且易学易记。3常用工具栏常用工具栏 格格式式工工具具栏栏提提供供了了最最常常用用设设置置格格式式命命令令的的快快捷捷按按钮钮，比比如如设设置置数数据据的的字字体体、对对齐齐方方式式，设设置置单单元元格格的的背背景景色色等等，使使用用户户设设置置这这些些格格式式的的时时候候更更方方

15、便便快快捷。捷。4格式工具栏格式工具栏 在在 Microsoft FrontPage 2003中中，可可以以使使用用几几种种不不同同方方法法来来查查到到网网站站内内容容，以以便便帮帮助助用用户户有有效效地地设设计计、发布和管理网站。发布和管理网站。5窗口栏窗口栏 用用来来显显示示FrontPage 2003正正在在完完成成的的任任务务，一一般般位位于于窗窗口口的的右右侧侧，点点击击任任务务栏栏右右边边向向下下的的箭箭头头，可可以以打打开开一一个个任任务务下下拉拉列列表表框框，从从中中选选择择相相应应的的任任务务项项就可打开所需要的任务窗格。就可打开所需要的任务窗格。6任务窗格任务窗格 网网页页

16、视视图图是是进进行行网网页页编编辑辑的的操操作作界界面面。在在网网页页视视图图中中还还有有几几种种显显示示状状态态，一一般般情情况况下下包包括括“设设计计”视视图图、“代代码码”视视图图、“拆拆分分”视视图图和和“预预览览”视视图以及其他编辑状态。图以及其他编辑状态。4.1.3 FrontPage 2003的视图的视图 1“网页网页”视图视图 可可以以使使用用“文文件件夹夹”视视图图来来直直接接处处理理文文件件和和文文件件夹夹，并并组组织织网网站站内内容容。与与 Microsoft Windows 资资源源管管理理器器相相似似，还还可可以以在在此此视视图图中中创创建建、删删除除、复复制制和移动

17、文件夹。和移动文件夹。2“文建夹文建夹”视图视图 可可以以使使用用“远远程程网网站站”视视图图发发布布整整个个网网站站，或或有有选选择择地地发发布布个个别别文文件件。还还可可以以在在两两个个或或更更多多个个位位置置之之间间同同步步文文件件，即即确确保保包包含含相相同同内内容容的的网网站站都都包包含含最新的更改。最新的更改。3“远程网站远程网站”视图视图 通通过过“报报表表”视视图图，可可以以在在运运行行报报表表查查询询后后分分析析网网站站内内容容。可可以以计计算算网网站站中中文文件件的的总总大大小小，指指出出哪哪些些文文件件没没有有与与其其他他文文件件链链接接，标标识识出出慢慢速速网网页页或或

18、过过期期网网页页，按按负负责责处处理理文文件件的的任任务务或或人人员员对对文文件件进进行行分分组，等等。组，等等。4“报表报表”视图视图 “导导航航”视视图图提提供供了了网网页页的的分分层层视视图图。通通过过此此视视图图，可可以以添添加加新新的的导导航航网网页页，也也可可以以通通过过鼠鼠标标的的拖拖动动修修改改导导航航网网页页所所处处的的层层或或者者导导航航网网页页之之间间的的相相互互关系。关系。5“导航导航”视图视图 在在FrontPage中中，“超超链链接接”视视图图可可以以将将网网站站中中超超链链接接的的状状态态显显示示在在一一个个列列表表中中，此此列列表表既既包包括括内内部部超超链链接

19、接，又又包包括括外外部部超超链链接接，并并用用图图标标指指示示超超链链接接已通过验证或已中断。已通过验证或已中断。6“超链接超链接”视图视图 “任任务务”视视图图以以表表格格形形式式显显示示网网站站中中的的所所有有任任务务，并并在在各各个个标标题题下下提提供供有有关关各各项项任任务务的的当当前前信信息息。在在制制作作一一个个网网站站时时，由由于于工工作作量量大大，所所以以在在网网站站制制作作之之前前往往往往需需要要预预先先制制作作一一个个计计划划，这这样样就就可可以以有有条条不不紊紊地地进进行行网网站站设设计计。“任任务务”视视图图就就是是为为此此目目的的而而设设计计的的。在在“任任务务”视视

20、图图中中，可可以以方方便便地地建建立立任任务或查看任务完成情况等。务或查看任务完成情况等。7“任务任务”视图视图 选择选择“文件文件”|“新建新建”命令，打开命令，打开“新建新建”任任务窗格；务窗格；单击单击“新建站点新建站点”下下“其他网页模版其他网页模版”超级链接，超级链接，打开打开“网页模板网页模板”对话框对话框;单击站点模板中的单击站点模板中的“空白站点空白站点”图标，在图标，在“指定指定新站点的位置新站点的位置”文本框中输入新站点的位置。单击文本框中输入新站点的位置。单击“确定确定”按钮按钮.4.2 创建、管理、发布站点创建、管理、发布站点1.创建新站点创建新站点 4.2.1 创建站

21、点创建站点 注意：注意：在创建站点选择路径时，最好选择某在创建站点选择路径时，最好选择某个文件夹作为站点，而不要选择某个磁盘分个文件夹作为站点，而不要选择某个磁盘分区（例如区（例如F盘）作为站点，否则可能会导致整盘）作为站点，否则可能会导致整个磁盘分区瘫痪。个磁盘分区瘫痪。2导入一个已存在的站点导入一个已存在的站点 首首先先选选择择“文文件件”菜菜单单下下的的“导导入入”命命令令，然后根据提示，依次选择需导入的站点即可。然后根据提示，依次选择需导入的站点即可。3将文件夹转换为站点将文件夹转换为站点 FrontPage 2003中中可可以以将将一一个个已已经经存存在在的文件夹转换为站点。的文件夹

22、转换为站点。1打开站点打开站点 单击工具栏中的单击工具栏中的“打开打开”按钮，弹出按钮，弹出“打开打开文件文件”对话框，在对话框，在“打开文件打开文件”对话框中选择要对话框中选择要打开得网页，选中之后，单击打开得网页，选中之后，单击“打开打开”按钮。按钮。2重命名站点重命名站点 在创建站点时，如果没有为站点创建一个在创建站点时，如果没有为站点创建一个好的名称，可以重新为站点命名。重命名好的名称，可以重新为站点命名。重命名Web站站点时点时，FrontPage 2003会用新站点名称自动更新会用新站点名称自动更新所有内部超链接以及其他站点设置。所有内部超链接以及其他站点设置。4.2.2 管理站点

23、管理站点 3删除站点删除站点 在在FrontPage 2003中选择中选择“文件夹文件夹”视图，视图，并选择要删除的站点，单击并选择要删除的站点，单击“Delete”键，或右键，或右击鼠标，从弹出的快捷菜单中选择击鼠标，从弹出的快捷菜单中选择“删除删除”命令。命令。注注意意：应应用用手手动动方方式式删删除除文文件件，删删除除的的文文件件会会自自动动放放置置于于“回回收收站站”中中，而而应应用用“删删除除”命命令令方方式式删删除除文文件件，被被删删除除的的文文件件直直接接从从磁磁盘盘中中删删除，是不可恢复的。除，是不可恢复的。在在FrontPage 中，为站点添加网页的中，为站点添加网页的方法有

24、两种。一种是：单击工具栏中的方法有两种。一种是：单击工具栏中的“新建网新建网页页”按钮或者按快捷键按钮或者按快捷键“CtrlN”，打开一个空打开一个空白网页，设计者可以在网页编辑区编辑自己的网白网页，设计者可以在网页编辑区编辑自己的网页；页；另一种是：另一种是：选择选择“文件文件”|“新建新建”命令，命令，打开打开“新建新建”任务窗格，单击任务窗格，单击“新建站点新建站点”下的下的“其他网页模板其他网页模板”超级链接，打开超级链接，打开“网页模板网页模板”对话框，利用网页模板创建网页。对话框，利用网页模板创建网页。4.2.3 为站点添加网页为站点添加网页 站点设计者可以通过导入一个页面而减轻自

25、站点设计者可以通过导入一个页面而减轻自己的工作量，并吸收别人成功的经验（当然要得己的工作量，并吸收别人成功的经验（当然要得到版权的许可）。导入方法与导入站点的方法类到版权的许可）。导入方法与导入站点的方法类似。似。4.2.4 导入文件到当前站点导入文件到当前站点 网站制作完成之后，就可以将站点上传到服务网站制作完成之后，就可以将站点上传到服务器了。器了。4.2.5 发布站点发布站点 利用利用FrontPage 2003创建一个网页后，在文档的编创建一个网页后，在文档的编辑区域内，可以看到闪烁的光标，在此可以输入文字。辑区域内，可以看到闪烁的光标，在此可以输入文字。在输入文字的过程中，光标也跟着

26、向后移动。在输入文字的过程中，光标也跟着向后移动。在在FrontPage 2003中输入的文本包括普通文本和特中输入的文本包括普通文本和特殊字符。输入方法与在殊字符。输入方法与在Word中输入文本的方法相同。中输入文本的方法相同。4.3 用用FrontPage 2003编辑网页编辑网页 1.输入文本输入文本 4.3.1 网页文本的处理网页文本的处理 2编辑文本编辑文本 应用应用FrontPage 2003编辑文本的基本操作与编辑文本的基本操作与其他的文字处理软件有相同之处。常用的文本编其他的文字处理软件有相同之处。常用的文本编辑操作有：选择、移动、复制、粘贴、剪切、删辑操作有：选择、移动、复制

27、、粘贴、剪切、删除、查找和替换等。除、查找和替换等。（1）选择文本）选择文本 （2）移动文本）移动文本 （3）删除文本）删除文本3设置文本格式设置文本格式 （1）设置字体）设置字体 在在FrontPage 2003中设置字体格式的步骤如下：中设置字体格式的步骤如下：首先选中相应文本，选择首先选中相应文本，选择“格式格式”|“字体字体”命令，打开命令，打开“字体字体”对话框。对话框。在在“字体字体”标签中选择合适的字体、字形和大标签中选择合适的字体、字形和大小，在小，在“字符间距字符间距”标签中设置字符间距。标签中设置字符间距。另外，应用另外，应用“字体字体”对话框的对话框的“效果效果”选项组，

28、选项组，还可以对文字设置不同的效果。还可以对文字设置不同的效果。（2）突出显示文本）突出显示文本 设置文本颜色可以使需要强调的某段文本突出显设置文本颜色可以使需要强调的某段文本突出显示出来。如要把示出来。如要把“专业设置专业设置”中的中的“计算机应用计算机应用”突出显示为黄色，具体方法为：选中文本突出显示为黄色，具体方法为：选中文本“计算机计算机应用应用”，单击按钮右边的三角，从弹出的面板中选，单击按钮右边的三角，从弹出的面板中选择黄色即可。择黄色即可。（1）段落式样）段落式样 FrontPage 2003为网页设计者提供了为网页设计者提供了16种样式，其种样式，其中中6种时段落样式。种时段落

29、样式。（2）对齐方式）对齐方式 在格式栏中有在格式栏中有4个按钮与段落的操作有关，这个按钮与段落的操作有关，这4个按个按钮分别代表左对齐、右对齐、居中对齐和分散对齐。钮分别代表左对齐、右对齐、居中对齐和分散对齐。设置时先选种文本，再单击相应的按钮即可。设置时先选种文本，再单击相应的按钮即可。4段落式样和对齐方式段落式样和对齐方式 设置编号列表的步骤如下：设置编号列表的步骤如下：将光标放到要设定列表的文字前，选择将光标放到要设定列表的文字前，选择“格式格式”|“项目符号和编号项目符号和编号”命令，弹出命令，弹出“项目符号和编项目符号和编号方式号方式”对话框。对话框。打打开开“无无格格式式项项目目

30、列列表表”标标签签，可可以以选选择择相相应应的的列表方式；打开列表方式；打开“编号编号”标签，可以选择编号方式。标签，可以选择编号方式。5编号列表编号列表 （1）插入水平线）插入水平线 利用利用FrontPage 2003在网页中插入水平线的方法很在网页中插入水平线的方法很简单，只要把光标置于要插入水平线的位置，然后选简单，只要把光标置于要插入水平线的位置，然后选择择“插入插入”|“水平线水平线”命令即可。命令即可。（2）编辑水平线）编辑水平线 编辑的水平线的步骤为：编辑的水平线的步骤为：选中水平线，然后单击鼠标右键，从弹出的快选中水平线，然后单击鼠标右键，从弹出的快捷菜单中选择捷菜单中选择“

31、水平线属性水平线属性”命令，弹出命令，弹出“水平线属水平线属性性”对话框；对话框；在在“水平线属性水平线属性”对话框中可以设定水平线的对话框中可以设定水平线的大小、对齐方式和颜色。大小、对齐方式和颜色。6使用水平线使用水平线4.3.2 网页图片的处理网页图片的处理 （1）插入来自文件的图片）插入来自文件的图片 在页面中插入来自文件的图片，可以执行以下在页面中插入来自文件的图片，可以执行以下操作：操作：将光标放在要插入图片的位置，单击插入文将光标放在要插入图片的位置，单击插入文件中的图片按钮，或选择件中的图片按钮，或选择“插入插入”|“图片图片”|“来自文件来自文件”命令，打开命令，打开“图片图

32、片”对话框。对话框。选择要插入到网页的文件，单击选择要插入到网页的文件，单击“插入插入”按按钮，就可将图片插入到页面中。钮，就可将图片插入到页面中。1插入图片插入图片 （2）插入来自剪贴画的图片）插入来自剪贴画的图片 在页面中插入来自剪贴画的图片在页面中插入来自剪贴画的图片的方法如下：的方法如下：先将光标放在要插入图片的位置先将光标放在要插入图片的位置。选择选择“插入插入”|“图片图片”|“剪贴画剪贴画”命令，打开命令，打开“剪贴剪贴画画”窗格窗格。在在“搜索文字搜索文字”文本框中输入要插入剪贴画的关文本框中输入要插入剪贴画的关键词，单击键词，单击“搜索搜索”按钮按钮。将光标放在想要插入的剪贴

33、画上，会显示出与将光标放在想要插入的剪贴画上，会显示出与此剪贴画相关的信息，然后单击此剪贴画，就可将其此剪贴画相关的信息，然后单击此剪贴画，就可将其插入到网页中插入到网页中。（1）调整图片的大小）调整图片的大小 调整图片的大小分为直接调整和精确调整两种，调整图片的大小分为直接调整和精确调整两种，直接调整方法如下：直接调整方法如下：在文档窗口选定相应的图片，图片四周出现图像在文档窗口选定相应的图片，图片四周出现图像编辑边框，同时在右下角出现图片操作按钮。通过编辑边框，同时在右下角出现图片操作按钮。通过水平、垂直拖动边框可以调整图像宽度和高度。水平、垂直拖动边框可以调整图像宽度和高度。2修改图片属

34、性修改图片属性 选选中中要要插插入入的的图图片片，单单击击鼠鼠标标右右键键，从从弹弹出出的的快快捷捷菜菜单单中中选选择择“图图片片属属性性”命命令令，打打开开“图图片片属属性性”对话框。对话框。在在“大大小小”选选项项组组中中启启用用“指指定定大大小小”和和“保保持持纵纵横横比比”复复选选框框，选选择择图图片片的的单单位位为为像像素素，设设定定图片的宽度和高度值，单击图片的宽度和高度值，单击“确定确定”按钮。按钮。（2）调整图片位置）调整图片位置 在在FrontPage 2003中移动图片位置很容易，只要在中移动图片位置很容易，只要在图片上单击鼠标左键，然后按住鼠标左键，拖动图片图片上单击鼠标

35、左键，然后按住鼠标左键，拖动图片至所需的位置即可。至所需的位置即可。（3）更改图片属性）更改图片属性 如果要修改已经保存到网页中的如果要修改已经保存到网页中的JPEG、GIF和和PNG格式的图片属性，首先在网页中选中图片，然后格式的图片属性，首先在网页中选中图片，然后选择选择“视图视图”|“工具栏工具栏”|“图片图片”命令，打开命令，打开“图图片片”工具栏，单击图片工具栏中的图形按钮，工具栏，单击图片工具栏中的图形按钮，FrontPage会自动显示该按钮的作用，根据提示设计会自动显示该按钮的作用，根据提示设计者可以进行相应的操作。者可以进行相应的操作。（4）替换图片或文字）替换图片或文字 当图

36、片太大，下载速度很慢，可使用一个分辨率当图片太大，下载速度很慢，可使用一个分辨率较低的图片代替；而当图片不能被浏览器正常显示较低的图片代替；而当图片不能被浏览器正常显示时，可以使用一些说明性文字。时，可以使用一些说明性文字。设置替换图片或文字可以执行以下操作：设置替换图片或文字可以执行以下操作：在网页中选中图片，单击鼠标右键，从弹出的在网页中选中图片，单击鼠标右键，从弹出的快捷菜单中选择快捷菜单中选择“图片属性图片属性”命令，打开命令，打开“图片属图片属性性”对话框。对话框。选择对话框的选择对话框的“常规常规”标签，单击标签，单击“低分辨率低分辨率”后面的后面的“浏览浏览”按钮，在打开的按钮，

37、在打开的“选择替代图片选择替代图片”对话框中可以选择替换图片；在对话框中可以选择替换图片；在“文本文本”框中输框中输入说明图片的文字。入说明图片的文字。单击单击“确定确定”按钮，替换图片或文字设置完毕。按钮，替换图片或文字设置完毕。（1）图片与文字的对齐方式）图片与文字的对齐方式 设置图片与文字的对齐方式，可以执行以下操作：设置图片与文字的对齐方式，可以执行以下操作：在网页中选中图片，单击鼠标右键，从弹出的快在网页中选中图片，单击鼠标右键，从弹出的快捷菜单中选择捷菜单中选择“图片属性图片属性”命令，打开命令，打开“图片属性图片属性”对话框。对话框。选择选择“对齐方式对齐方式”后面的小三角按钮，

38、从中选择后面的小三角按钮，从中选择图片与文字的对齐方式。图片与文字的对齐方式。3图片与文字图片与文字 （2）图片的环绕样式）图片的环绕样式 图片的环绕样式决定了文字在图片周围的排列方图片的环绕样式决定了文字在图片周围的排列方式。设置图片的环绕样式可以在式。设置图片的环绕样式可以在“图片属性图片属性”对话对话框中通过框中通过“环绕样式环绕样式”来完成，也可在来完成，也可在“定位定位”对对话框中设置。话框中设置。在在“定位定位”对话框中设置图片环绕样式的方法如对话框中设置图片环绕样式的方法如下：下：在网页中选中图片，选择在网页中选中图片，选择“格式格式”|“定位定位”命令，弹出命令，弹出“定位定位

39、”对话框（图对话框（图4-28）。）。在对话框中选择需要的环绕样式，单击在对话框中选择需要的环绕样式，单击“确定确定”按钮。按钮。1.创建表格创建表格 在在FrontPage 2003中，创建表格有以下中，创建表格有以下4种方法。种方法。（1）使用菜单命令创建表格）使用菜单命令创建表格 （2）使用命令按钮创建表格）使用命令按钮创建表格 （3）绘制表格）绘制表格 （4）将文本转换成为表格）将文本转换成为表格4.3.3 使用表格使用表格 （1）修改表格）修改表格 修改表格大小修改表格大小 在在FrontPage 2003中，修改表格的大小有以下两中，修改表格的大小有以下两种方法。种方法。通过鼠标拖

40、曳法可以粗略地调整表格的大小。通过鼠标拖曳法可以粗略地调整表格的大小。通过通过“表格属性表格属性”对话框可以精确地调整表格对话框可以精确地调整表格的大小。的大小。2.编辑表格编辑表格 合并单元格合并单元格 在在FrontPage 2003中合并单元格的方法有以下三中合并单元格的方法有以下三种：种：先选择要合并的单元格，然后执行先选择要合并的单元格，然后执行“表格表格”|“合并单元格合并单元格”命令。命令。选择要合并的单元格，在选中的单元格中单击鼠选择要合并的单元格，在选中的单元格中单击鼠标右键，从弹出的快捷菜单中选择标右键，从弹出的快捷菜单中选择“合并单元格合并单元格”命令。命令。选择要合并的

41、单元格，单击选择要合并的单元格，单击“表格表格”工具栏上的工具栏上的“合并单元格合并单元格”按钮。按钮。拆分单元格拆分单元格 在在FrontPage 2003中拆分单元格的方法有以下几中拆分单元格的方法有以下几种。种。将光标放在要拆分的单元格内，执行将光标放在要拆分的单元格内，执行“表格表格”|“拆分单元格拆分单元格”命令，弹出命令，弹出“拆分单元格拆分单元格”对话对话框。在该对话框中选择框。在该对话框中选择“拆分为列拆分为列”或或“拆分为行拆分为行”，单击，单击“确定确定”按钮。按钮。将光标放在要拆分的单元格内，单击鼠标右键，将光标放在要拆分的单元格内，单击鼠标右键，从弹出的快捷菜单中选择从

42、弹出的快捷菜单中选择“拆分单元格拆分单元格”命令。命令。将光标放在要拆分的单元格内，单击将光标放在要拆分的单元格内，单击“表格表格”工工具栏上的具栏上的“拆分单元格拆分单元格”按钮按钮 （2）在表格中添加文字和图片）在表格中添加文字和图片 创建一个表格以后，就可以在表格中添加相应的创建一个表格以后，就可以在表格中添加相应的内容了，在表格中添加的内容有文字与图片两种形内容了，在表格中添加的内容有文字与图片两种形式。式。在表格中添加文字在表格中添加文字 将光标放在要表格中要添加文字的地方，然后按将光标放在要表格中要添加文字的地方，然后按4.3.1节介绍的方法输入文字，调整文字的字号、字节介绍的方法

43、输入文字，调整文字的字号、字体、对齐方式等。体、对齐方式等。在表格中插入图片在表格中插入图片 选中要插入图片的单元格，按照选中要插入图片的单元格，按照4.3.2节介绍的方节介绍的方法在表格中插入图片。法在表格中插入图片。（3）删除表格）删除表格 删除单元格删除单元格 在在FrontPage 2003中如果要删除某个单元格的方中如果要删除某个单元格的方法：法：选择要删除的单元格，执行选择要删除的单元格，执行“表格表格”|“删除单删除单元格元格”命令。命令。选择要删除的单元格，并单击鼠标右键，从弹出选择要删除的单元格，并单击鼠标右键，从弹出的快捷菜单中选择的快捷菜单中选择“删除单元格删除单元格”命

44、令。命令。删除列或行删除列或行 在在FrontPage 2003中如果要删除某列或某行的方中如果要删除某列或某行的方法：法：选择要删除的列或行，执行选择要删除的列或行，执行“表格表格”|“删除列删除列或行或行”命令。命令。选择要删除的列或行，并单击鼠标右键，从弹出选择要删除的列或行，并单击鼠标右键，从弹出的快捷菜单中选择的快捷菜单中选择“删除列或行删除列或行”命令。命令。删除整个表格删除整个表格 如果要删除某个表格，只需选中此表格中的所如果要删除某个表格，只需选中此表格中的所有单元格，然后单击右键并从弹出的快捷菜单中选有单元格，然后单击右键并从弹出的快捷菜单中选择择“删除单元格删除单元格”命令

45、即可。命令即可。注意注意：如果在删除表格、单元格、行或列时，使如果在删除表格、单元格、行或列时，使用用Delete键删除，则只删除该表格、单元格、行或列键删除，则只删除该表格、单元格、行或列中的文本，而不是删除表格。中的文本，而不是删除表格。3设置表格的属性设置表格的属性 将光标置于表格中，然后单击右键并从弹出的快将光标置于表格中，然后单击右键并从弹出的快捷菜单中选择捷菜单中选择“表格属性表格属性”命令，在打开的命令，在打开的“表格表格属性属性”对话框（如图对话框（如图4-34所示）中进行表格属性设所示）中进行表格属性设置。置。（1）表格的布局）表格的布局 在在“表格属性表格属性”对话框中的对

46、话框中的“布局布局”选项组中可选项组中可以设置表格的对齐方式、浮动方式、单格衬距、单以设置表格的对齐方式、浮动方式、单格衬距、单元格间距以及表格的宽度与高度。元格间距以及表格的宽度与高度。（2）为表格添加背景）为表格添加背景 为表格添加背景也要应用为表格添加背景也要应用“表格属性表格属性”对话框。对话框。表格背景可分为两种形式：一种是为表格添加背景表格背景可分为两种形式：一种是为表格添加背景颜色，另一种是为表格添加背景图片。颜色，另一种是为表格添加背景图片。（3）为表格添加边框）为表格添加边框 默认状态下的表格边框为默认状态下的表格边框为1个像素的黑色线条。个像素的黑色线条。4.利用表格设计页

47、面布局利用表格设计页面布局 在网页设计中表格还有一个重要的作用，就是设在网页设计中表格还有一个重要的作用，就是设计页面布局计页面布局。一个空白网页布置起来比较困难，尤其是一些复一个空白网页布置起来比较困难，尤其是一些复杂的页面。这时可以利用表格将网页分成若干个单杂的页面。这时可以利用表格将网页分成若干个单元格，每个单元格对应网页中的一个部分。然后，元格，每个单元格对应网页中的一个部分。然后，对每一部分分别进行设计和制作，这样就可以使复对每一部分分别进行设计和制作，这样就可以使复杂的网页设计简化，而且所设计的网页清晰、有条杂的网页设计简化，而且所设计的网页清晰、有条理性理性。4.3.4 使用框架

48、使用框架 在创建框架之前要先查看在创建框架之前要先查看FrontPage 2003是否启用了是否启用了框架功能，如果没有启用此功能，那么将无法在框架功能，如果没有启用此功能，那么将无法在FrontPage 2003中创建框架页面。要查看是否启用了框中创建框架页面。要查看是否启用了框架功能，可以执行以下的操作。架功能，可以执行以下的操作。选择选择“工具工具”|“网页选项网页选项”命令，打开命令，打开“网页选项网页选项”。单击单击“创作创作”标签，打开标签，打开“创作创作”选项卡选项卡。启用启用“框架框架”复选框，单击复选框，单击“确定确定”按钮按钮。1创建框架网页创建框架网页 检查完浏览器是否支

49、持框架后，就可以在网页中创检查完浏览器是否支持框架后，就可以在网页中创建框架网页了。步骤如下建框架网页了。步骤如下：选择选择“文件文件”|“新建新建”命令，打开命令，打开“新建新建”窗格窗格。单击单击“其他网页模板其他网页模板”超级链接，打开超级链接，打开“网页模板网页模板”对话框对话框。单击单击“框架网页框架网页”选项卡，显示十种网页模板，选选项卡，显示十种网页模板，选择任一种形式，在对话框右边会出现该模板形式的说择任一种形式，在对话框右边会出现该模板形式的说明，以及模板预览。这里选择明，以及模板预览。这里选择需要的框架网页结构，需要的框架网页结构，单击单击“确定确定”按钮，出现初始框架网页

50、。按钮，出现初始框架网页。单击每个框架中的单击每个框架中的“新建网页新建网页”按钮，各编辑区按钮，各编辑区变成编辑状态，可以依次编辑各个网页变成编辑状态，可以依次编辑各个网页。（1）调整框架的大小）调整框架的大小 通通常常调调整整框框架架的的大大小小的的方方法法有有两两种种，即即通通过过拖拖动动框框架架的的边边框框或或指指定定想想要要的的确确切切设设置置来来调调整整框框架架的的大小。大小。拖动框架的边框调整框架大小的方法是：将光标拖动框架的边框调整框架大小的方法是：将光标放在要调整的框架边框上，当光标变为双向箭头的放在要调整的框架边框上，当光标变为双向箭头的形状时，按住鼠标左键并拖动，即可框架