《网页制作与设计》立体化电子课件 第3章-FrontPage2003

FrontPage2003

FrontPage2003概述超链接插入对象网页制作网页布局第3章网站的发布与维护总结与习题FrontPage2003属于Office2003家族，是微软开发的“所见即所得”的网页制作与网站管理工具FrontPage2003集Web站点的设计、制作与管理功能于一身，使用它，用户无须掌握HTML语言，就可以轻松制作出专业化的网页与网站FrontPage2003是FrontPage系列版本的终极版本，微软后来推出的SharePointDesigner，严格来讲已不再是FrontPage的系列升级换代版本，而应被看作一个全新的网站制作工具FrontPage2003概述3.1FrontPage2003的初始运行界面

FrontPage2003概述3.1FrontPage2003的主要功能是制作网页和管理站点使用FrontPage2003可以创建新的网页，也可以打开并修改已经存在的网页FrontPage2003提供了多种编辑网页的方式，不但可以直接修改HTML，而且可以采用“所见即所得”的方式编辑网页，还可以使用菜单命令插入各种网页元素，使用对话框修改其属性，十分灵活FrontPage2003概述3.1FrontPage2003中可以很容易地插入文本、图片、表格、组件等元素；可以使用主题和样式表、共享边框、框架等管理网页的外观；还可以使用表单等元素设计出交互式网页FrontPage2003中可以轻松实现设计、管理、分析、发布和维护站点等工作。FrontPage提供了强大的站点管理功能；一组相关网页和有关文件组成一个站点，站点也是FrontPage对网站进行管理的基本单位FrontPage2003概述3.1FrontPage2003可以建立和编辑独立的网页，也可以设计和管理站点。在站点中可以包含大量网页和各种文件，甚至可以包含子站点FrontPage2003中建立的站点需要发布到Internet中的Web服务器上成为真正意义上的网站；为此可在同一台计算机上安装Web服务器端软件，从而将站点发布到本机进行测试用FrontPage2003可建立基于本地硬盘的站点，这种站点以本机文件夹的形式存在，不需发布到服务器FrontPage2003概述3.1FrontPage2003的拆分视图将窗口工作区拆分成上、下两部分上半部分是代码区，下半部分是设计区无论对哪一个区域进行修改，另一个区域都会做出相应的改变FrontPage2003概述3.1FrontPage视图方式

1.网页视图2.文件夹视图3.远程网站视图4.报表视图5.导航视图6.超链接视图7.任务视图FrontPage2003概述3.1网页视图以“所见即所得”的方式来显示与编辑当前选中的网页。网页视图包含四类显示模式：设计模式能够以可视化的方式编辑网页内容，设置版式结构拆分模式将工作区平分为两个区域，分别同步显示当前网页的HTML代码与页面设计模式下的内容代码模式用来切换到HTML模式下，直接对网页的HTML代码进行查看、编写和编辑预览模式用来模拟当前编辑的网页在IE浏览器中的显示效果FrontPage2003概述3.1FrontPage2003概述3.1该视图以树型列表的形式显示与组织当前网站素材中的各种文件夹与文件资源文件夹视图功能类似于Windows的资源管理器，能够进行文件和文件夹的创建、复制、删除、移动、剪切、重命名、修改属性等操作文件夹视图FrontPage2003概述3.1该视图用来发布整个网站，或有选择地发布个别文件，或在多个位置不同但内容相同的网站之间保持文件的同步更新该视图会以不同的发布状态图标与说明性文字来标记与区分处于不同状态下的网页文档远程网站视图FrontPage2003概述3.1该视图给出了当前站点的一些统计分析信息站点视图的功能包括：计算网站中文件的大小，指出站点目录中哪些文件没有被链接进站点，标识出慢速网页与过期网页，按任务或人员对文件进行分组等报表视图FrontPage2003概述3.1该视图组织与显示站点中各网页的层次关系在该视图中，每一个页框代表一个网页，可以用拖动的方式来调整网页在网站中的位置导航视图FrontPage2003概述3.1该视图提供基于超链接的网站结构分析，用来查看与控制当前选中网页的所有超链接超链接视图使用户能够知道网站中设置了多少超链接，它们是内部超链接还是外部超链接，并以图标的方式显示超链接是否通过验证、是否被中断等状态超链接视图FrontPage2003概述3.1该视图通过站点维护的任务列表来记录与管理网站的设计进程当网站由多人共同开发与维护时，可以向各个用户通知任务列表信息，谐调工作的进展情况任务视图网页制作-创建站点3.2Web站点的开发，首先应当根据其用途进行规划，确定站点结构，在本地磁盘上创建站点，然后再建立网页站点就是一组相关网页和其他文件的集合，这些网页在Internet中表现为称为“站点”的一个完整结构FrontPage2003中，站点以一个特殊文件夹的形式存在使用FrontPage2003的模板和向导，可以轻松地创建出各种用途和风格的站点新建站点时，可以根据应用需求，选择不同的模板与向导对于不同的模板和向导，其新建站点的步骤略有不同。下面以【由一个网页组成的网站】模板的使用为例，介绍新建站点的方法与步骤网页制作-创建站点3.2Step1Step2单击【文件/新建】菜单命令，在【新建】任务窗格中选择【新建网站】中的【由一个网页组成的网站】选项系统弹出【网站模板】对话框，在【指定新网站的位置】文本框中输入新站点要保存的位置；或使用【浏览】工具按钮指定新站点的位置单击【确定】按钮，新建站点出现在窗口中。新站点只有一个空白主页index.htm和用于存储图片的文件夹images；此时可编辑index.htm，或根据网站规划创建其他文件夹与网页Step3网页制作-创建站点3.2网页制作-创建站点3.2选择模板类型并指定网站位置

站点创建后，下一步就是要根据网页模板创建一个新的网页作为主页创建网页的方法与步骤如下页所示新建网页网页制作-编辑网页3.2单击【文件/新建】菜单命令，在【新建】任务窗格中选择【新建网页】中的【其他网页模板】，打开【网页模板】对话框在【网页模板】对话框中选择所需的网页模板。【说明】与【预览】区域中可查看所选模板的说明及预览图单击【确定】按钮，系统新建一个基于所选模板的网页单击【文件/保存】菜单命令，在弹出的【另存为】对话框中，输入文件名进行保存Step1Step2Step3Step4网页制作-编辑网页3.2网页制作-编辑网页3.2根据网页模板创建新的网页在FrontPage2003中，编辑某个网页之前，需要先打开该网页打开网页的常用方法有以下几种打开已有网页网页制作-编辑网页3.2打开网页的方法使用【文件/打开】菜单命令，或单击【常用/打开】工具栏按钮，在弹出的【打开文件】对话框中选择相应的网页在其他视图中双击网页图标，同样会打开指定网页如需要打开的文件已在打开的网站中，在文件夹视图中双击该网页图标即可将其打开网页制作-编辑网页3.2要保存一个网页，可以使用【文件/保存】菜单命令，或单击【常用/保存】工具栏按钮如需将网页另存，可使用【文件/另存为】菜单命令保存网页网页制作-编辑网页3.2网页制作过程中，用户可以切换到预览视图预览网页，或使用【文件/在浏览器中预览】菜单命令预览网页使用菜单命令时，系统会打开浏览器显示网页；若该网页尚未保存，系统会弹出对话框提示保存网页预览网页网页制作-编辑网页3.2同其他MicrosoftOffice组件一样，在网页中可以输入文字，复制、剪切和粘贴文字，设置文字格式，查找和替换文字等可以设置斜体、下划线、上/下标、空心、阴影等各种特效。在FrontPage2003中，对文字的格式提供了完备的设定功能。可以使用工具栏上的工具按钮或菜单命令快速改变文字的外观网页制作-设置网页3.2设置文字格式的一般操作步骤如下：选中文字，单击“格式”菜单的“字体”命令，在弹出的“字体”对话框中设置字体的各种属性或使用“格式”工具栏中相应的命令按钮网页制作-设置网页3.2文字段落格式编排对于网页的外观是非常重要的；段落格式主要包括对齐方式、缩进和段落间距等设置段落格式的一般方法如下：将插入点移动到要设置格式的段落中，或是选中该段落，单击【格式/段落】菜单命令，在弹出的【段落】对话框中进行各种段落格式属性的设置网页制作-设置网页3.2FrontPage2003通过按Enter键划分段落；按Enter键在HTML代码中插入的是<p>标记如果只是需要换行，而不是另起一个段落，需按Shift+Enter键，按Shift+Enter键在HTML代码中插入的是<br>标记网页制作-设置网页3.2网页属性包括网页的标题、格式、页边距等内容设置网页属性的方法为：使用【文件/属性】菜单命令，或者在网页的任意地方右击鼠，选择【网页属性】快捷菜单命令，FrontPage2003将显示【网页属性】对话框【网页属性】对话框包含6个选项卡，其中前两个最为常用网页制作-设置网页3.2网页制作-设置网页3.2【网页属性】对话框【标题】框用于给出网页的标题，网页标题将显示在浏览器的标题栏中【背景音乐】框用于指定当用浏览器打开网页时自动播放背景音乐【位置】框用于指定声音文件的位置【浏览】按钮用于选择声音文件【循环次数】框用于指定声音播放的次数【不限次数】复选框，表示不停地播放声音【常规】选项卡网页制作-设置网页3.2【背景图片】复选框用于指定网页的背景图片【使其成为水印】复选框用于将背景图片按水印形式添加其他相应的下拉列表框，可以分别设置网页的背景颜色、文本颜色以及超链接文字的颜色；若同时设置背景图片和背景颜色，则背景图片将覆盖背景颜色【格式】选项卡网页制作-设置网页3.2插入网页的对象3.字幕2.图片1.水平线4.交互式按钮

5.站点计数器

插入对象3.3插入水平线水平线将网页分割成几个部分，使得网页更具条理性可在不同的段落、行之间添加水平线操作水平线的方法：在准备插入水平线的位置设置插入点；单击【插入/水平】菜单命令，即可插入水平线插入对象3.3修改水平线外观的方法：双击水平线，打开【水平线属性】对话框【宽度】框用于设置水平线的宽度【高度】框用于设置水平线的高度【对齐方式】用于设置水平线在网页内水平对齐的方式【颜色】列表框用于设置水平线的颜色【样式】按钮用来设置线条指定自定义样式或其他格式修改水平线插入对象3.3插入图片图片可使网页内容更丰富与美观插入图片的步骤如下插入对象3.3Step1Step2移动光标至插入图像的位置单击【插入/图片】菜单命令，在子菜单中选择【来自文件】，弹出【图片】对话框在【图片】对话框中选取需要插入的图片文件，单击【确定】按钮，即可将图片插入网页中Step3插入对象3.3设置图片属性在【图片属性】对话框的【外观】选项卡中，可以设置图片的环绕方式、布局、大小等属性插入对象3.3编辑图片可以使用【视图/工具栏/图片】菜单命令，使【图片】工具栏显示在屏幕上利用图片工具栏，可以对图片的亮度、对比度进行调整，可以旋转、翻转图片，对图片进行剪裁，设置图片的透明颜色等操作插入对象3.3插入滚动字幕在制作网页时，可以将网页中的文字做成由左至右，或由右至左移动的滚动字幕动态效果，使网页更加形象生动具体操作步骤如下插入对象3.3将插入点设置在要插入移动字幕的位置或选中作为移动字幕的文本单击【插入/Web组件】菜单命令，弹出【插入Web组件】对话框为组件类型选择【动态效果】，为效果选择【字幕】选项，单击【完成】按钮

此时已选择的移动字幕的文本出现在【文本】框中；若没有选择文本，需在【文本】框中输入字幕的文本Step1Step2Step3Step4插入对象3.3【方向】域用于指定文本的移动方向【速度】域用于指定文字的滚动速度【表现方式】域用于指定文字的表现方式可选择【重复】或【连续】复选框单击【确定】按钮，即可插入字幕Step5Step6Step7Step8【延迟】框中的数值表示字幕滚动一步的时间间隔【数量】框中的数值表示字幕滚动一步的像素距离插入对象3.3制作滚动字幕

插入对象3.3插入交互按钮插入交互式按钮是一个动态按钮，当用户将鼠标指向交互式按钮时，交互式按钮会改变颜色或形状默认情况下，交互式按钮是一个带有彩色方框的文字按钮，也可以应用图片创建交互式按钮插入对象3.3将插入点设置在要插入交互式按钮的位置，单击【插入/Web组件】菜单命令在弹出的【插入Web组件】对话框中，为组件类型选择【动态效果】，为效果选择【交互式按钮】选项单击【完成】按钮，在打开的【交互式按钮属性】对话框中设置按钮的字体、图像等属性单击【确定】按钮，即可插入交互式按钮Step1Step2Step3Step4插入对象3.3插入站点计数器站点计数器用来动态统计站点访问的次数站点计数器的统计值跟随站点访问而即时更新插入对象3.3将插入点设置在要插入计数器的位置，单击【插入/Web组件】菜单命令，弹出【插入Web组件】对话框在对话框中为组件类型选择【计数器】，在【选择计数器样式】列表中选择一种样式单击【完成】按钮，在打开的【计数器属性】对话框中设置设置计数器属性单击【确定】按钮，即可插入站点计数器Step1Step2Step3Step4插入对象3.3Web网页的强大之处在于其具有超链接的功能，使用超链接能够将因特网中的信息有机地组织起来，使人们在WWW世界中轻松地漫游在浏览器中，超链接通常表现为与普通文本或图片不同的特点：将鼠标移到一个超链接上方时，鼠标指针会变成手形。同时，与这个超链接相对应的URL会在窗口底部的状态栏显示出来超链接3.4文本超链接文本超链接是指在文本上定义的超链接，单击文本超链接，会自动跳转到指向的链接目标创建文本超链接的步骤如下超链接3.4Step1Step2选定要定义超链接的文本，执行【插入/超链接】菜单命令，或单击【常用】工具栏上的【超链接】按钮，打开【插入超链接】对话框在对话框中选择要链接的目标网页，单击【确定】按钮；此时所选定的文本变为蓝色，并且带有下划线，说明选定的文本已被设置为超链接文本保存网页，在浏览器中预览效果：当鼠标移至链接文字时，鼠标指针变成手形，此时单击鼠标，马上会跳转到目标网页Step3超链接3.4超链接3.4【插入超链接】对话框图片超链接图片超链接是指在图片上创建的超链接图片超链接比文本超链接显得更加生动活泼单击图片超链接，会自动跳转到指向的链接目标创建图片超链接的操作步骤如下超链接3.4Step1Step2选定要定义超链接的图片，执行【插入/超链接】菜单命令，或单击【常用】工具栏上的【超链接】按钮，打开【插入超链接】对话框在对话框中选择要链接的目标网页，单击【确定】按钮；此时所选定的图片已被设置为超链接图片保存网页，在浏览器中预览效果：当鼠标移至链接图片时，鼠标指针变成手形，此时单击鼠标，马上会跳转到目标网页Step3超链接3.4可以为整个图片建立图片超链，也可以为图片上分配一个或多个热点热点通常为图片上的超链接区域，包含热点的图片称为图像映射，用户单击热点区域可以转到相应的链接目标热点的形状可以是长方形、圆形或多边形超链接3.4热点热点是一种特殊的超链接形式，一般表现为图像上具有某种形状的一块区域，或者是放置在矩形区间的一段文本当访问者单击该区域或文本时，将打开超链接的目标对象创建热点的操作步骤如下超链接3.4Step1Step2选定要定义热点的图片，在【图片】工具栏中，单击长方形、圆形或多边形热点按钮匹配需要的形状在图片上，采用鼠标拖动操作画出所选形状；最后双击完成所选形状的绘制；释放鼠标，系统弹出【插入超链接】对话框按照插入超链接的方法创建超链接即可；当鼠标移动到热区时，光标变为手形；单击鼠标，超链接的目标网页就会显示在浏览器窗口中Step3超链接3.4超链接3.4带热点的图像地图

书签超链接书签是网页中被标记的位置或被标记的文本，单击书签超链接，将直接跳转到该书签所在的位置创建书签的操作步骤如下超链接3.4Step1Step2打开要定义书签的网页，并切换到网页视图的设计模式下；选中要标记为文本书签的文本或将光标移到要定义为位置书签的网页特定位置使用【插入/书签…】菜单命令，打开书签对话框，在【书签名称】输入框中输入要定义书签的名称点击【确定】按钮，书签创建成功；被定义为文本书签的文本，将被系统自动添加下划虚线予以标识显示；定义为位置书签的特定位置处，将显示出一个特殊的蓝色旗帜图标Step3超链接3.4超链接3.4【书签】对话框

电子邮件超链接电子邮件超链接为用户发送电子邮件提供了极大的方便，单击电子邮件超链接，用户能够书写电子邮件内容，并发到指定的地址创建电子邮件超链接的步骤如下超链接3.4选择作为电子邮件超链接的文本或图片单击【插入/超链接】菜单命令，弹出【插入超链接】对话框在对话框的【电子邮件地址】文本框中输入邮件地址，在【主题】框中键入邮件主题单击【确定】按钮，完成电子邮件超链接的创建Step1Step2Step3Step4超链接3.4创建邮箱超链接超链接3.4下载文件超链接若要在网站中提供资料下载功能，就需要创建文件下载超链接网站中每个用于下载的文件都要对应一个下载超链接创建下载文件超链接的步骤如下超链接3.4选择作为文件下载超链接的文本或图片单击【插入/超链接】菜单命令，弹出【插入超链接】对话框在【插入超链接】对话框中选择要下载的文件单击【确定】按钮，完成文件下载超链接的创建Step1Step2Step3Step4超链接3.4网页的布局设计，是将文字、图片等网页元素，根据特定的内容和主题，在网页所限定的范围中进行视觉的关联与配置，从而将设计意图以视觉形式表现出来。网页的布局一般使用表格或框架来实现网页布局3.5表格表格由单元格构成的行和列组成，单元格中可以插入文本、图片以及其他对象网页布局-表格3.5利用表格可以有条理地排列数据或组织网页布局。表格的行、列和单元格都可以进行复制、粘贴，在表格中还可以插入表格，一层层的表格嵌套使设计更加方便FrontPage2003提供了与Word字处理软件类似的表格处理功能，在网页中可以轻松地创建和编辑表格网页布局-表格3.5创建表格的方法

使用【表格/绘制表格】菜单命令，打开【表格】工具栏，使用各类工具按钮，先手工绘制出表格的轮廓边框，然后再绘制表格的各个单元格,从而创建一个不规则的表格点击【常用】工具栏上的【插入表格】工具按钮，在表格定制模板中通过拖动方式快速生成一个规则空表使用菜单命令【表格/插入/表格】，在打开的【插入表格】对话框中指定表格的行列数目、表格布局、对齐方式、表格边框、背景等属性，创建规则的空表网页布局-表格3.5设置表格布局网页布局-表格3.5创建后的表格，可以通过系统菜单或快捷菜单相应的命令进行修改与加工具体操作包括：表格行、列的插入与删除，单元格的插入与删除，单元格的合并与拆分，表格或单元格的属性设置等操作方式与Word表格的用法极为近似网页布局-表格3.5用表格布局网页时，首先应决定表格在垂直方向(即行)和水平方向(即列)所需的单元格数量；有时还需要为跨越多行或多列的网页对象合并单元格多数网页布局采用边框不可见类型的表格，这可通过设置表格边框粗细的属性值为0来实现网页布局-表格3.5框架框架是进行网页布局设计的一种重要手段，框架将浏览器窗口划分为几个区域，每个框架中都可以显示一个独立的网页网页布局-框架3.5框架网页并不包含显示的内容，只是记录了该框架网页包含几个框架、其拆分方式以及每个框架中显示哪个网页（与其他网页的超链接）等浏览器窗口中显示的网页实际是这些框架的集合，因此被称为框架网页网页布局-框架3.5创建框架网页FrontPage2003中，可以使用框架网页布局模板创建框架网页创建框架网页的步骤如下网页布局-框架3.5点击【文件/新建】菜单命令，在面板中选中【新建网页/其他网页模板】选项,打开【网页模板】对话框在对话框中打开【框架网页】选项卡，选择所需的模板，在【说明】及【预览】域中查看模板说明及预览图单击【确定】按钮，创建出框架网页的布局结构，显示在当前编辑工作区中新建框架中包含【设置初始网页】和【新建网页】两个按钮，分别用来装载初始化网页与新建空白网页Step1Step2Step3Step4网页布局-框架3.5网页布局-框架3.5网页模板的版面效果

网页布局-框架3.5框架网页的布局结构拆分框架当使用模板创建的框架结构不能满足需要时，可以通过拆分框架制作出更为复杂的框架网页拆分框架的步骤如下网页布局-框架3.5Step1Step2选择要拆分的框架，单击【框架/拆分框架】菜单命令，系统弹出【拆分框架】对话框根据需要选择【拆分为列】或【拆分成行】，单击【确定】按钮完成拆分可按住Ctrl键拖动框架的边框实现拆分框架Step3网页布局-框架3.5删除框架可从框架结构中删除指定的框架，此时系统只是把框架从框架网页中删去，而框架中的网页文件仍然存在删除了一个框架后，其余框架会加宽以填充删除框架留下的空间若框架网页只有一个框架，则不能删除该框架网页布局-框架3.5删除框架的操作方法为：选择要删除的框架单击【框架/删除框架】菜单命令即可网页布局-框架3.5设置框架在框架网页中可以设置框架的大小、框架的边距和在框架中是否显示滚动条等属性网页布局-框架3.5设置框架的操作方法为：选择要删除的框架单击【框架/框架属性】菜单命令，打开【框架属性】对话框在对话框中设置各种框架属性网页布局-框架3.5网页布局-框架3.5框架属性对话框发布网站所谓发布网站