FrontPage-2003初级教程

1网页制作软件FrontPage2003教程2020年9月10日星期四2/77山东交通学院徐滴石网页制作软件FrontPage2003•1FrontPage2003概述•2网页基本元素编辑•3网页布局•4表单应用•5网站发布及管理2020年9月10日星期四3/77山东交通学院徐滴石1FrontPage2003概述•1.1功能特点•1.2窗口界面•1.3基本操作2020年9月10日星期四4/77山东交通学院徐滴石1.1功能特点•FrontPage让初学者无需掌握HTML语言或具备编程基础知识便能够编写出界面优美、功能完善的网站。下面简单介绍一下FrontPage的特点。•“所见即所得”的网页编辑环境，也就是说，用户在网页编辑窗口中看到的效果就是浏览器中显示的效果。•易学易用的操作界面，像其它Office套件一样，在FrontPage中集成了大量的网页模板和网站向导，让用户很方便快捷地制作出优美的网页。•功能强大的新版本FrontPage融合了网页管理、网页编辑、网页发布和网站维护等多种功能，利用FrontPage制作的网页支持最新的网页标准，比如DHTML、XML、CSS2等等。2020年9月10日星期四5/77山东交通学院徐滴石1.2窗口界面•FrontPage2003主界面主要由菜单栏、工具栏、视图栏、状态栏、主编辑窗口和任务窗格等6大部分组成。2020年9月10日星期四6/77山东交通学院徐滴石“网页”视图•选择【视图】【网页】命令，打开网页视图。•网页视图是FrontPage中最常用的工作界面，网页的创建、编辑、预览等基本操作都是在此视图中进行的。网页视图窗口底部有4个标签：“设计”、“拆分”、“代码”和“预览”，它们分别控制着网页的4种显示模式。在设计模式下，能够以“所见即所得”的方式编辑网页；在代码模式下，可以查看或编辑网页的HTML的源代码；在预览模式下，可以预览网页的效果；在拆分模式下，能够同时编辑网页和查看或编辑网页的HTML的源代码。2020年9月10日星期四7/77山东交通学院徐滴石“网页”视图2020年9月10日星期四8/77山东交通学院徐滴石“文件夹”视图•单击“视图”栏中的“文件夹”图标或选择【视图】【文件夹】命令，打开文件夹视图。•在文件夹视图下，网站显示为一组文件和文件夹。在此视图下可以对网站中的文件夹和各种文件进行管理。2020年9月10日星期四9/77山东交通学院徐滴石“报表”视图•单击“视图”栏中的“报表”图标或选择【视图】【报表】命令，打开报表视图。•通过报表视图，可以在运行报表查询后分析网站内容。2020年9月10日星期四10/77山东交通学院徐滴石“导航”视图•单击“视图”栏中的“导航”图标或选择【视图】【导航】命令，打开导航视图。•导航视图用于管理网站中各网页的层次关系结构图。可以通过鼠标将结构图中的网页拖到新位置来改变链接结构。2020年9月10日星期四11/77山东交通学院徐滴石“超链接”视图•单击“视图”栏中“超链接”图标或选择【视图】【超链接】命令。•超链接视图用于管理网站中网页的超链接。2020年9月10日星期四12/77山东交通学院徐滴石“任务”视图•单击“视图”栏中的“任务”图标或选择【视图】【任务】命令，可打开任务视图。•任务视图可以实现网站任务的管理。网站的任务是指网站管理人员维护网站的任务，包括网页的更新和网站的检查等。2020年9月10日星期四13/77山东交通学院徐滴石“远程网站”视图•可以使用“远程网站”视图发布整个网站，或有选择地发布个别文件。还可以在两个或多个位置之间同步文件，即确保包含相同内容的网站都包含最新的更改。2020年9月10日星期四14/77山东交通学院徐滴石1.3基本操作•1．网站的规划•2．网站的基本操作•3．网页的基本操作2020年9月10日星期四15/77山东交通学院徐滴石网站的规划•首先要明确建立网站的目的。•其次要明确网站的浏览者群。•最后要考虑到如何能够便于网站的日常维护。2020年9月10日星期四16/77山东交通学院徐滴石网站的基本操作•1)创建网站•创建一个Web网站有两种方法。第一种方法是利用FrontPage的Web网站模板和向导，这种方法操作简单、速度快，比较适合建立大、中型的Web网站。第二种方法是逐个地创建网页文件，然后创建它们之间的链接关系，这种方法适合于网页数量不多的小型网站。•使用FrontPage模板创建网站的步骤：•启动FrontPage应用程序；•选择【文件】【新建…】命令，打开“新建”任务窗格；•选择网站模板，在“新建网站”栏选择“由一个网页组成的网站…”，打开“网站模板”对话框，在“指定新网站的位置”文本框中输入新网站的位置及名称，然后单击“确定”按钮。2020年9月10日星期四17/77山东交通学院徐滴石•2）关闭网站•选择【文件】【关闭网站】命令。•关闭网站即关闭网站及该网站下的所有网页。•3）打开网站•选择【文件】【打开网站】命令，“打开网站”对话框。•选择网站名称，然后单击“打开”按钮。网站的基本操作2020年9月10日星期四18/77山东交通学院徐滴石网页的基本操作•1）新建网页•在FrontPage2003中可以直接创建一个空白网页，也可以利用网页模板和网页向导来创建。•在某网站中创建新网页，在此网站的文件夹视图和导航视图方式下单击视图窗口右上角的“新建网页”按钮。•创建不属于某网站的新网页，在任何视图方式下，选择【文件】【新建…】命令，打开“新建”任务窗格，可在新建任务窗格中，选择一种合适的模板新建网页；或者单击常用工具栏上的“新建”按钮。2020年9月10日星期四19/77山东交通学院徐滴石•2）打开网页•打开当前网站中的网页，在任何视图中双击该网页图标或文件名即可打开网页。•打开其它网站中的网页，选择【文件】【打开】命令，在“打开文件”对话框中选择具体网页文件打开。•3）保存网页•保存当前网站中的网页，单击工具栏中的保存按钮，或【文件】【保存】命令即可。如果网页中有图片，则会弹出“保存嵌入式文件”对话框，提示保存图片文件。•保存不属于当前网站中的网页，则需要指定保存路径。•4）关闭网页•选择【文件】【关闭】命令。这种方式关闭的仅是当前网页，要注意与关闭网站的区别。网页的基本操作2020年9月10日星期四20/77山东交通学院徐滴石2网页基本元素编辑•2.1文本编辑•2.2图像编辑•2.3超链接创建•2.4Web组件2020年9月10日星期四21/77山东交通学院徐滴石2.1文本编辑•1．文本添加•2．设置段落和文本格式•3．插入水平线•4．设置网页属性2020年9月10日星期四22/77山东交通学院徐滴石文本添加•在网页中添加文本与在Word中添加文本的操作基本相同。此外，在网页中输入文本时，如果已经达到网页边界，则文本会自动回滚到下一行继续输入，这种换行方式并不会产生新行或是一个新段落，随着网页边界的变化或是编辑窗口的调整，FrontPage2003会自动调整这个回滚位置。•按下Shift+Enter键将产生新行，即换行，新行与上一行之间没有回滚关系。•按下Enter键产生一个新段落。2020年9月10日星期四23/77山东交通学院徐滴石设置段落和文本格式•可以使用格式工具栏（如图7.2.1所示）或“字体”和“段落”对话框对文本和段落的格式进行设置。其操作方法跟Word基本相同。2020年9月10日星期四24/77山东交通学院徐滴石插入水平线•为了修饰页面，明显区分开标题与正文，可选择【插入】【水平线】命令在当前光标点插入一条水平线。双击水平线或选择【格式】【属性】命令弹出“水平线属性”对话框，可对水平线的高度、宽度、颜色和对齐方式进行设置。2020年9月10日星期四25/77山东交通学院徐滴石设置网页属性•网页属性是一个网页整体的属性，记录关于网页的非页面部分的相关信息。适当的设置可以达到增加网页美观和缩减网页文件大小的效果。•方法一：右击页面，从弹出的快捷菜单中选择“网页属性”命令。•方法二：选择【格式】【背景】命令；•方法三：选择【文件】【属性】命令；2020年9月10日星期四26/77山东交通学院徐滴石2.2图像编辑•1．插入图像•2．编辑图像•3．设置图片属性2020年9月10日星期四27/77山东交通学院徐滴石插入图像•插入一幅关于“背景”的剪贴画的操作步骤：•将插入点定位在需要插入图片的位置；•选择【插入】【图片】【剪贴画】命令，打开“剪贴画”任务窗格，如图所示；•在任务窗格中，用户可在“搜索文字”文本框中输入剪贴画的关键字“背景”；•单击“搜索”按钮开始搜索，在任务窗格下方列表框中列出了搜索到的剪贴画；•单击剪贴画右侧的下三角按钮，弹出剪贴画的快捷菜单，单击“插入”命令即可。2020年9月10日星期四28/77山东交通学院徐滴石•剪贴画是软件（microsoftoffice）自带的，它是一些wmf格式（当然也有的是emf格式的）的矢量图，软件中有很多分类，它插入到ppt中，背景是透明的，不会影响后面的内容，而普通图片做不到。这些剪贴画放在了C:\ProgramFiles\MicrosoftOffice\media，文件夹下，而图片的画包含了各种格式，是从（软件）外部插入的，一般有jpg，jpeg，bmp，gif等格式。而自选图形是利用软件的绘图工具栏里的绘图工具绘制出来的各种几何图形。这三种都可称为图，插到ppt中都有八个控制点，外加一个旋转控制点。2020年9月10日星期四29/77山东交通学院徐滴石•插入来自文件的图片的操作步骤：•将插入点定位在需要插入图片的位置；•将插入点定位在需要插入图片的位置；•选择【插入】【图片】【来自文件】命令，或单击“常用”工具栏中“插入图片”按钮；•打开“图片”对话框，选择所需文件，单击“插入”按钮。插入图像2020年9月10日星期四30/77山东交通学院徐滴石编辑图像•在网页中插入图像后，还可对图像进行编辑。用鼠标单击选取图像，在屏幕上就会出现“图片”工具栏。利用“图片”工具栏可对图片进行旋转、剪裁、冲蚀，设置凹凸效果、透明背景色，调整亮度、对比度以及在图片中加入文字等。选中图片后，拖动图片周围的控点可改变图片大小。2020年9月10日星期四31/77山东交通学院徐滴石设置图片属性•选定所需的图片，单击鼠标右键，从快捷菜单中选择“图片属性”命令，弹出“图片属性”对话框。在对话框的“常规”和“外观”两个选项卡中进行设置，可以做出各种图文混排的页面效果。2020年9月10日星期四32/77山东交通学院徐滴石2.3超链接创建•1．选择链接的载体•2．选择链接的目标•3．指定目标窗口•4．验证超级链接•5．设置超链接的状态颜色•6．图像映射2020年9月10日星期四33/77山东交通学院徐滴石•超链接是从一个网页指向另一个目的地的指针，这个目的地可以是另一个网页或同一个网页中的其他位置，也可以是一个电子邮件、一个Word文档或者是一个应用程序。•创建超链接的步骤：选择链接的载体；选择链接的目标；指定目标窗口。2.3超链接创建2020年9月10日星期四34/77山东交通学院徐滴石选择链接的载体•链接的载体是显示链接的页面元素。将鼠标指针移到包含超链接的文字或图像上时，鼠标指针就会变成形状，当浏览者单击此文本串或图像，浏览器将打开相应地址的网页。•选定链接的载体后，单击“常用”工具栏上“插入超链接”按钮，或选择【插入】【超级链】命令，打开“插入超链接”对话框。2020年9月10日星期四35/77山东交通学院徐滴石选择链接的目标•链接的目标包括原有文件或网页、本文档中的位置（书签）、新建文档、电子邮件等。根据跳转目的地的不同，网页中链接可分为4种类型。•1）原有文件或网页直接跳转到已经存在的某一网页或文件。•如果是本网站内的网页，可用光标在“插入超链接”对话框列表文件中选择。•如果是本机上其它网站中的网页，则选择“插入超链接”对话框中的按钮，或从“查找范围”中选择相应的网站，再选择所需网页。•如果是Inter