frontpageDY文档格式.docx

1、2.8.2 背景图案的选择 152.8.3 背景音乐 162.9 设置网页过渡效果 162.10 保存网页 .17第三章 超链接 .193.1 了解超链接 .193.2 建立与原有文件的链接 .193.3 修改链接颜色 213.4 图像映射 223.4.1 创建热点 .233.4.2 设置默认热点 243.5 绘制图形的超链接 243.6 取消链接 .243.6.1 取消文本链接 .253.6.2 取消图像链接 25第四章 简单认识HTML 274.1 HTML标记 .274.2 文件结构 274.2.1 文件框架 274.2.2 划分段落 28引 言多媒体技术是将文字、数据、声音、图像、静态

2、图像及活动图像等集成在一起的技术。随着多媒体硬件环境和软件环境的不断完善，目前，大部分计算机软件开发中都涉及多媒体软件技术的应用。如今计算机应用已进入社会的各个领域。基于多媒体的成果从视、听上给人以新的，更加形象的感受。FrontPage从问世以来，就一直是网页制作与开发软件领域的佼佼者，无论是在独立的Web站点管理和Web页面创建方面，还是在团队协作工作等方面都有新的突破。Frontpage2002作为Office2002中的一个重要组件，是Office注重网络与Internet应用的一个重要体现。FrontPage2002既继承了以前版本的传统功能，又采用了与Office2002其他组件一

3、致的工作界面和易学易用的操作方式，它涉及到站点的管理与创建，内容的更新与分布、图片库的应用、日常任务和语言等内容，使用户对Web站点内容的创建变得更加容易、对Web站点的控制和管理变得更加方便，而且支持多用户联机协作共同开发Web站点。第一章 建网前奏建网流程主要包括对网站、网页相关概念的理解、软硬件环境、主题的策划、资料的收集，最后就是使用工具软件完成制作、上传网站、定期维护网站等之类的操作。本文只介绍网页制作相关内容，对网站上传及维护等工作不作介绍。网页的学名称为HTML文件，是一种可以在WWW上传输，并被浏览器认识和翻译成页面显示出来的文件。HTML是HYPERTEXT MARKUP L

4、ANGUAGE（超文本标记语言）的英文缩写。“超文本”就是指页面内可以包含图片、连接，甚至音乐，程序等非文字的元素。制作网页，首先规划框架，列出内容大纲，同时也要考虑到以后可能的扩充性，还必须考虑每个网页之间的连接关系，连接混乱，层次不清的站点会造成浏览困难，影响内容的发挥。第二章 网页初建本章通过介绍FrontPage2002的网页创建流程，包括网页新建、插入文本、插入图片、表格应用以及网页保存等，将“校园导航系统”网页制作流程及所用技术展现出来，同时，也使读者了解FrontPage的基本应用。2.1创建网页创建网页最简单的方法是单击标准工具栏的“新建”按钮，也可使用FrontPage200

5、2提供的网页模板。在窗口里，打开“文件”菜单，执行其中的“新建网页或站点”命令，选择想要的模板后，按“确定”按钮。如下图所示：图1 新建网页或站点指示图图2 使用网页模板指示图2.2文本网页文件的核心是文本，虽然网页内漂亮的图片、生动的多媒体、规范的表格、交互式按钮很吸引人，但文本却是支撑WEB的基础。2.2.1输入文本在输入文本之前，必须先在FrontPage2002窗口的编辑区内定位插入点，新输入的文本总是出现在插入点之后的。随着网页内输入文本内容的增多，插入点将自动从左到右地逐渐移动，并在每行的最右端自动进行折行，此时的插入点将移动至第二行的开始处。按回车键之后，将在网页上创建新的段落，

6、与众不同的是，在前、后两个段落之间会自动地插入一个空行。通过“剪切”按钮、“粘贴”按钮的操作，不仅可在网页内进行文本的移动，还可以在不同网页之间进行文本的移动。通过“复制”、“粘贴”按钮的操作，可在网页内部、不同网页之间实现网页文本的复制。2.2.2修饰文本在网页内输入文本之后，其字体、字号、颜色、效果等都是使用FrontPage2002提供的默认设置。FrontPage2002提供了“字体”对话框与格式工具按钮，用户可以按照自己的需要，对文本的格式进行修改。设置网页文本字体：（1）在FrontPage2002窗口内，选择准备进行字体设置的文本。如果不选择文本，那么插入点之后输入的内容将采用新

7、设置的字体。（2）打开“格式”菜单，执行其中的“字体”命令，打开如图所示的“字体”对话框。（3）在“字体”列表框内选择文本的新字体，此时在右下角的预览框内将给出所选文本字体的形状。（4）单击“确定”按钮。调整文本字号网页文本的字号可区分为七个级别，其中第一级文本最小（8磅），第七级最大（36磅）。常用的文本字号或默认设置室第三级，这一级相当于12磅。更改文本的字号时，可先选择文本的内容，然后使用下列方式之一对文本的字号进行设置：*在“字体”对话框内，从“大小”列表框内选择文本的新字号。*打开格式工具栏的“字号”列表框，设置网页文本的大小。如果未选择网页文本，就对文本字号进行了更改，新的字号设置

8、将对插入点之后输入的文本内容生效。在必要的情况下，可以设置一个不同于第三级的基础字号，但这要求了解HTML的知识。2.3图片恰当地插入图片之后，可以活跃网页的气愤，帮助网络访问者获得感兴趣的信息，但WEB浏览器内显示的图片格式是受限制的，只有扩展名GIF与JPEG的图片文件才能成为网页的一部分。当在网页插入其他格式的图片文件是时，FrontPage2002将自动进行图片格式的转换：把具有256色或更少颜色的图片转换为GIF格式的图片，而将多于256色的图片转换为JPEG格式的图片。2.3.1插入图片：（1）在打开的网页文件内确定插入图片的位置。（2）打开“插入”菜单的“图片”子菜单，执行“来自

9、文件”命令，或者直接按标准工具栏的“插入图片”按钮，打开如图所示的“图片”对话框。（3）打开“搜索”下拉列表框，选择当前站点图片文件的保存位置。在默认的情况下，当前站点的图片文件保存在“Image”文件夹内。（4）在图片文件列表框内选择图片文件的名称，此时在右侧的预览框内将出现所选图片的预览效果。（5）单击“确定”按钮。也可使用当前站点的图片、硬盘中的图片、WEB上的图片，也可能使用OFFICE剪贴画库里的一些图片进行插入等操作。2.3.2处理图片单击插入到网页内的图片时，在它的周围将出现八个黑色标记，同时在FrontPage2002窗口内出现图片工具栏，如下图所示，用于对图片进行简单的编辑处

10、理，例如设置透明背景、旋转图片、剪切图片、添加文本、创建热点等。在网页内插入图片之后，通过“裁剪”按钮的操作，可以大致地调整图片尺寸，通过“图片外观”对话框的操作，可以精确地定义它的显示尺寸。由于它与插入点处的文本处于同一行内，Frontpage2002提供了控制图片与文本的对齐方式、修改图片的显示尺寸的功能，使图片与整个网页的布局相协调。为了突出图片在网页内的显示，可以给它添加一个黑色边框。双击插入的图片，或者用右键快捷菜单里的“图片属性”命令，将会出现“图片属性”对话框，选择其中的“外观”选项卡，如图所示：通过选择调整图片的尺寸以及对齐方式等。2.4插入艺术字浏览网页时，首先看到的往往是网

11、页的标题。插入一个醒目的标题必会起到很好的效果。FrontPage2002提供了插入艺术字功能，给网页制作带来了极大的方便。（1）将光标放在要插入艺术字的位置，执行菜单栏中的“插入”下“图片”下的“艺术字”命令，打开“艺术字库”对话框，选择艺术字；也可以选择快捷菜单的“插入艺术字”，也可打开“艺术字库”对话框。如图所示。（2）单击“确定”按钮后，在“编辑艺术字文字”对话框中，输入文字后，在单击“确定”按钮。2.5活用表格目前大多数网页都是利用表格来制作的。利用表格的最大好处是，格式化数据，轻松安排、定位文本和网页的相关对象，比如图片、视频等等，让制作者能方便地编辑对象，而不会影响到其他表格或者

12、单元格里的对象。表格是由表格行、列组成的，它的最小空间是单元格。2.5.1创建表格在网页内插入表格时，使用工具按钮与表格菜单的机会较多，它们用于插入规定行、列数目的表格。对于那些随意性比较强的设计来说，表格工具也许是最好的选择，通过简单的拖动就可以在网页内插入表格，并可对表格的行、列进行调整。使用“插入表格”按钮创建表格（1）在插入表格的网页内单击，确定表格的插入点。（2）单击常用工具栏的“插入表格”按钮，打开“插入表格”下拉列表框。（3）在下拉列表框内移动鼠标，列表框下方显示表格行、列数目的变化。（4）确定表格行与列的数目之后释放鼠标。新创建的表格将采用默认的表格属性，最显著的特点就是表格列

13、将均分FrontPage2002窗口的宽度。无论表格列的数目如何变化，它总是100%地占据编辑区域的整个宽度。当然，如果FrontPage2002窗口的宽度，这些表格的宽度也将自动地调整。使用表格命令创建表格（1）在打开的网页内确定表格的插入点。（2）打开“表格”菜单的“插入”子菜单，执行“表格”命令，打开如图示的“插入表格”对话框。（3）在“大小”栏的“行”数字框内输入、选择表格的行数。（4）在“大小”栏的“列”数字框内输入、选择表格的列数。（5）在“布局”栏的“对齐方式”下拉列表框内，设置表格在网页上的对齐方式。在“左”、“中”、“右”、“重排”与“默认值”5种对齐方式中选择其一。（6）在

14、“布局”栏的“边框粗细”数字框中指定表格边线的宽度。如果表格具有可见的边线，将会比较容易处理。（7）在“布局”栏的“单元格边距”数字框中输入、选择单元格的突起程度。（8）在“布局”栏的“单元格间距”列表框中输入、选择单元格与内容之间的距离。（9）启用“指定宽度”复选框之后，选中“像素”单选按钮，表示将以“像素”为单位指定表格的宽度；选中“百分比”单选按钮，表明将以浏览器 窗口的百分比设置表格的宽度。（10）单击“确定”按钮。2.5.2操作单元格插入单元格在单元格内单击之后，打开“表格”菜单的“插入”子菜单，执行其中的“单元格”命令即可完成插入单元格的操作，新插入的单元格将出现在所选单元格的左侧

15、。合并单元格合并单元格就是将两个以上的单元格合并成一个较大的单元格，并且单元格的内容也将合并在一起。选择需要合并的多个单元格之后，可选择下列步骤之一进行单元格的合并操作：*单击表格工具栏的“合并单元格”按钮。*打开“表格”菜单，执行“合并单元格”命令。*单击表格工具栏的“清除”按钮，删除单元格之间的边线。填充单元格在表格的单元格内单击，确定填充内容的插入点，打开“插入”菜单，在“文件”、“图片”、“表单”、“组件”等命令中选择其一。也可以通过“粘贴”、“复制”等功能对单元格进行填充。调整边线着色当单元格边线的宽度大于1个像素时，就可对边线进行着色。在默认的情况下，单元格的边线颜色将采用表格的边

16、线颜色，FrontPage2002允许用户选择、定义自己所喜爱的任何颜色对单元格边线进行着色处理。为了增加单元格的层次感，还可使用两种深浅不同的颜色定义单元格的边框。（1）移动插入点至单元格内，也可以选择多个单元格。（2）右击打开快捷菜单，执行“单元格属性”命令，打开“单元格属性”对话框。（3）在“边框”栏中，打开“颜色”下拉列表框，选择、定义单元格边线的颜色。（4）打开“亮边框”下拉列表框选择一种较浅的颜色，单元格的右侧、下侧边线将采用所设置的颜色。（5）打开“暗边框”下拉列表框选择一种较深的颜色，单元格的左侧、上侧边线将采用所设置的颜色。（6）单击“确定”按钮。改变单元格的大小在单元格内输

17、入、填充内容之后，它的大小将随着填充物的变化而自行调整。改变单元格的大小时，可将鼠标移动至单元格的边线处，当指针变成水平箭头时，水平地拖动鼠标，即可改变单元格地宽度；当指针变成垂直箭头时，垂直地拖动鼠标，即可改变单元格地高度。这种方法的特点时方便、快捷，但不能精确地定义单元格地大小，除非通过“单元格属性”对话框来进行设置。2.5.3修改表格的行与列多个连续地单元格将构成表格地行或列，由于在WEB网页内大量存在的是规则表格，因此对表格行与列的操作，要比单元格的操作更频繁一些，它们对表格外观的改变也是最显著的。插入行或列将插入点固定在单元格内，单击表格工具栏的“插入行”按钮，将在单元格的上方插入一

18、个空行，并且插入行的列数与单元格所在行的列数完全相同。这相当于将单元格所在的行复制到上方，只不过复制行的内容是空的。使用菜单命令，可在表格内一次性地插入多个空白行，并且可以选择表格行出现的位置。删除行或列对于表格内多余地行与列，可以进行删除操作。在删除之前，需要选择这些准备删除的内容，可以是表格内连续的行或列，也可以是不连续的行或列，然后按照下列步骤之一进行操作:*单击表格工具栏的“删除单元格”按钮。*打开“表格”菜单，执行“删除单元格”命令。表格内的行与列删除之后，其中所包含的内容也一起被删除，并且剩余的行与列将扩展到原表格的大小。如果需要撤销进行的删除操作，可单击常用工具栏的“撤销”按钮，

19、或者打开“编辑”菜单，执行其中的“撤销删除”命令。2.6添加WEB组件FrontPage2002提供的动态效果包括悬停按钮、字幕与横幅广告管理器。悬停按钮是具有动态效果的活动按钮。将鼠标移动至悬停按钮时，能显示出动态特性，单击按钮之后，该按钮的颜色将发生变化，并在WEB浏览器窗口内打开所定义的连接目标。字幕是一个在网页内滚动显示的文本，用于发布一些重要的通知与公告。横幅广告管理器可以轮换地显示一组图片，每幅图片在浏览器窗口地停留时间、过渡效果是可以预订的。2.6.1字幕效果FrontPage2002的组件功能使字幕应用简单化，只需在打开的“字幕属性”对话框内进行简单的选择、设置操作，就可将生动

20、形象、形式多样的字幕插入到当前网页。创建字幕（1）在网页内确定字幕的插入位置，或者选择字幕的文本内容。（2）执行“插入”菜单的“WEB组件”命令，打开“插入WEB组件”对话框。（3）在“组件类型”列表框内选择“动态效果”。（4）在“选择一种效果”列表框内选择“字幕”。（5）单击“完成”按钮，打开如下图所示的“字幕属性”对话框。（6）在“文本”文本框中输入字幕内容，如果在网页内选择了作为字幕的文本内容，则该文本将出现在文本框内，可对它进行简单的编辑操作。（7）单击“确定”按钮。在网页内选择格式文本之后，再打开“字幕属性”对话框，就可以再网页内创建带格式的字幕。在网页的“普通”编辑模式下，创建的字

21、幕在网页内与普通文本没有任何区别。只有在预览或浏览器窗口内，字幕才能在窗口内水平地滚动起来。在默认情况下，字幕滚动的范围将占据整个窗口，用鼠标单击字幕时，在它地周围将出现黑色地标记，将字幕固定在边框内。使用鼠标拖动标记，即可改变字幕在高度与滚动的范围。将鼠标移动至字幕内，拖动鼠标即可改变字幕在网页内地位置。选择字幕之后，按Delete功能键将删除创建的字幕。第一次创建的字幕将使用FrontPage2002提供的默认参数，与字幕有关的参数包括：滚动方向、延迟时间、移动方式、背景颜色、大小尺寸等。FrontPage2002允许对上述参数进行调整，使创建的字幕更具个人特点。在多个字幕内使用相同的文本

22、内容，却设置不同的运动速度，将在浏览器窗口内看到连续变化的动画效果。修改字幕参数（1）在网页内双击字幕，打开如上图所示的“字幕属性”对话框。（2）在“方向”栏内设置字幕水平滚动的方向，从左到右，或者使从右到左。（3）在“速度”栏的“延迟”数字框内设置字幕从消失到重新出现的时间间隔。数值越大，表明字幕在窗口内再次出现的延迟时间越长。该延迟时间以“毫秒”为单位。（4）在“速度”栏的“数量”数字框内设置字幕在浏览窗口每次移动的偏移量，偏移量越大，字幕移动得越快，但波动较大。偏移量是以“像素”为单位得。（5）在“表现方式”栏内设置字幕在浏览窗口的表现方式。（6）在“大小”栏中设置字幕边框的高度与宽度，

23、用户可以选择“像素”为单位，也可以使用浏览窗口的百分比来设置字幕边框的大小。（7）在“重复”栏中设置字幕运动的次数，如果启用“连续”复选框，则表示始终有字幕在窗口内滚动。（8）打开“背景色”列表框设置滚动字幕的背景色。（9）单击“确定”按钮。字幕在网页内的表现形式有3种：在默认的情况下，字幕以“滚动条”的表现方式出现，当最后一个字符从浏览器窗口消失时，字幕将重新出现在字幕边框的另一侧；选择“幻灯片”表现方式，当字幕的第一个字符接触字幕边框的一侧时，字幕将重新出现在字幕边框的另一侧；选择“交替”表现方式时，当字幕的第一个字符滚动到字幕边界时，字幕立即向相反的方向运动，这样字幕的完整内容始终出现在

24、浏览器窗口内。2.6.2横幅广告管理器FrontPage2002提供的横幅广告管理器就是一个简单、易用的广告管理器，它将多帧画面组成广告的内容，在浏览器窗口循环播放。每帧画面的显示时间、过渡效果时可以预订的，还可通过设置超连接的方式，给出广告内容的详细资料。（1）在网页内指定横幅广告出现的位置。（2）打开“插入”菜单，执行“WEB组件”命令，打开“插入WEB组件”对话框。（4）在“选择一种效果”列表框内选择“横幅广告管理器”。（5）单击“完成”按钮，打开如图所示的“横幅广告管理器属性”对话框。（6）在“宽度”、“高度”文本框内输入横幅广告的显示尺寸，它时以“像素”为单位的。（7）打开“过渡效果

25、”下拉列表框，选择广告画面之间进行过渡的效果模式。（8）在“每幅图片显示（秒）”文本框内输入每帧画面在浏览器窗口的显示时间，它是以“秒”为单位的。（9）在“连接到”文本框内输入横幅广告的链接目标。（10）在“显示图片”栏内，单击右侧的“添加”按钮，将打开“添加横幅广告图片”对话框，确定广告第一帧画面图片文件的URL。（11）单击“确定”按钮之后，返回“横幅广告管理器属性”对话框，第一帧画面的URL出现在“显示图片”列表框内。（12）重复上述第（10）、（11）两步操作，将广告所需的多帧个画面插入到列表框内。（13）单击“确定”按钮。在“显示图片”栏内，除了“添加”按钮之后，还包括其它3个按钮：

26、单击“上移”和“下移”按钮，可改变所选画面在广告种的播放顺序，最直接的反映就是列表框内图片文件的排列顺序发生了变化；单击“删除”按钮之后，即可将所选的图片文件从横幅广告内删除。2.7绘图FrontPage2002也提供了一些基本绘图功能，而“校园导航系统”的总图等正是由基本图形组成，下面，根据使用情况进行一些简单介绍。2.7.1开始绘图打开“视图”菜单下“工具栏”命令，选择“绘图”选项，FrontPage2002界面下端将出现绘图工具栏。除了基本的直线、箭头、长方形、圆形以外，可使用“自选图形”进行选择绘图。点击“自选图形”，如下图所示，选择好后，在网面上拖动，将出现所选图形。出现的图形周围一般有10个点。8个黑色圆点为定位点，图形的大小可以通过鼠标拖动定位点进行调整；中间1个绿色点可以调整图形的角度；黄色菱形点为图形卷曲程度（折）点，通过拖动鼠标，可以改变图形卷曲程度。2.7.2添加文字绘制好图形后，点击右键快捷键，选择“添加文字”命令，这时，图形中间将出现虚线框，可以进行添加文字工作。添加好的文字可以通过“格式”菜单下的命令进行修饰，也可以点击右键，选择“字体”命令进行修饰。2.7.3颜色更改图形填充色调整单击右键，选择“文本框格式”命令，将出现“设置自选图形格式”对话框，在“颜色和线条”选项卡中，选择“填充颜色”可以改变图形的填充颜色；调节“透明度”百分比，可以调节图形处