FrontPage2003学习资料.ppt

1 网页制作软件FrontPage2003 Intel未来教育2010 2 网页制作软件FrontPage2003 1FrontPage2003概述2网页基本元素编辑3网页布局4表单应用5网站发布及管理 3 1FrontPage2003概述 7 1 1功能特点7 1 2窗口界面7 1 3基本操作 4 1 1功能特点 FrontPage让初学者无需掌握HTML语言或具备编程基础知识便能够编写出界面优美 功能完善的网站 下面简单介绍一下FrontPage的特点 所见即所得 的网页编辑环境 也就是说 用户在网页编辑窗口中看到的效果就是浏览器中显示的效果 易学易用的操作界面 像其它Office套件一样 在FrontPage中集成了大量的网页模板和网站向导 让用户很方便快捷地制作出优美的网页 功能强大的新版本FrontPage融合了网页管理 网页编辑 网页发布和网站维护等多种功能 利用FrontPage制作的网页支持最新的网页标准 比如DHTML XML CSS2等等 5 1 2窗口界面 FrontPage2003主界面主要由菜单栏 工具栏 视图栏 状态栏 主编辑窗口和任务窗格等6大部分组成 6 1 网页 视图 选择 视图 网页 命令 打开网页视图 网页视图是FrontPage中最常用的工作界面 网页的创建 编辑 预览等基本操作都是在此视图中进行的 网页视图窗口底部有4个标签 设计 拆分 代码 和 预览 它们分别控制着网页的4种显示模式 在设计模式下 能够以 所见即所得 的方式编辑网页 在代码模式下 可以查看或编辑网页的HTML的源代码 在预览模式下 可以预览网页的效果 在拆分模式下 能够同时编辑网页和查看或编辑网页的HTML的源代码 7 1 网页 视图 8 2 文件夹 视图 单击 视图 栏中的 文件夹 图标或选择 视图 文件夹 命令 打开文件夹视图 在文件夹视图下 网站显示为一组文件和文件夹 在此视图下可以对网站中的文件夹和各种文件进行管理 9 3 报表 视图 单击 视图 栏中的 报表 图标或选择 视图 报表 命令 打开报表视图 通过报表视图 可以在运行报表查询后分析网站内容 10 4 导航 视图 单击 视图 栏中的 导航 图标或选择 视图 导航 命令 打开导航视图 导航视图用于管理网站中各网页的层次关系结构图 可以通过鼠标将结构图中的网页拖到新位置来改变链接结构 11 5 超链接 视图 单击 视图 栏中 超链接 图标或选择 视图 超链接 命令 超链接视图用于管理网站中网页的超链接 12 6 任务 视图 单击 视图 栏中的 任务 图标或选择 视图 任务 命令 可打开任务视图 任务视图可以实现网站任务的管理 网站的任务是指网站管理人员维护网站的任务 包括网页的更新和网站的检查等 13 7 远程网站 视图 可以使用 远程网站 视图发布整个网站 或有选择地发布个别文件 还可以在两个或多个位置之间同步文件 即确保包含相同内容的网站都包含最新的更改 14 7 1 3基本操作 1 网站的规划2 网站的基本操作3 网页的基本操作 15 1 网站的规划 首先要明确建立网站的目的 其次要明确网站的浏览者群 最后要考虑到如何能够便于网站的日常维护 16 2 网站的基本操作 1 创建网站创建一个Web网站有两种方法 第一种方法是利用FrontPage的Web网站模板和向导 这种方法操作简单 速度快 比较适合建立大 中型的Web网站 第二种方法是逐个地创建网页文件 然后创建它们之间的链接关系 这种方法适合于网页数量不多的小型网站 使用FrontPage模板创建网站的步骤 启动FrontPage应用程序 选择 文件 新建 命令 打开 新建 任务窗格 选择网站模板 在 新建网站 栏选择 由一个网页组成的网站 打开 网站模板 对话框 在 指定新网站的位置 文本框中输入新网站的位置及名称 然后单击 确定 按钮 17 2 关闭网站选择 文件 关闭网站 命令 关闭网站即关闭网站及该网站下的所有网页 3 打开网站选择 文件 打开网站 命令 打开网站 对话框 选择网站名称 然后单击 打开 按钮 2 网站的基本操作 18 3 网页的基本操作 1 新建网页在FrontPage2003中可以直接创建一个空白网页 也可以利用网页模板和网页向导来创建 在某网站中创建新网页 在此网站的文件夹视图和导航视图方式下单击视图窗口右上角的 新建网页 按钮 创建不属于某网站的新网页 在任何视图方式下 选择 文件 新建 命令 打开 新建 任务窗格 可在新建任务窗格中 选择一种合适的模板新建网页 或者单击常用工具栏上的 新建 按钮 19 2 打开网页打开当前网站中的网页 在任何视图中双击该网页图标或文件名即可打开网页 打开其它网站中的网页 选择 文件 打开 命令 在 打开文件 对话框中选择具体网页文件打开 3 保存网页保存当前网站中的网页 单击工具栏中的保存按钮 或 文件 保存 命令即可 如果网页中有图片 则会弹出 保存嵌入式文件 对话框 提示保存图片文件 保存不属于当前网站中的网页 则需要指定保存路径 4 关闭网页选择 文件 关闭 命令 这种方式关闭的仅是当前网页 要注意与关闭网站的区别 3 网页的基本操作 20 2网页基本元素编辑 7 2 1文本编辑7 2 2图像编辑7 2 3超链接创建7 2 4Web组件 21 2 1文本编辑 1 文本添加2 设置段落和文本格式3 插入水平线4 设置网页属性 22 1 文本添加 在网页中添加文本与在Word中添加文本的操作基本相同 此外 在网页中输入文本时 如果已经达到网页边界 则文本会自动回滚到下一行继续输入 这种换行方式并不会产生新行或是一个新段落 随着网页边界的变化或是编辑窗口的调整 FrontPage2003会自动调整这个回滚位置 按下 键将产生新行 即换行 新行与上一行之间没有回滚关系 按下键产生一个新段落 23 2 设置段落和文本格式 可以使用格式工具栏 如图7 2 1所示 或 字体 和 段落 对话框对文本和段落的格式进行设置 其操作方法跟Word基本相同 24 3 插入水平线 为了修饰页面 明显区分开标题与正文 可选择 插入 水平线 命令在当前光标点插入一条水平线 双击水平线或选择 格式 属性 命令弹出 水平线属性 对话框 可对水平线的高度 宽度 颜色和对齐方式进行设置 25 4 设置网页属性 网页属性是一个网页整体的属性 记录关于网页的非页面部分的相关信息 适当的设置可以达到增加网页美观和缩减网页文件大小的效果 方法一 右击页面 从弹出的快捷菜单中选择 网页属性 命令 方法二 选择 格式 背景 命令 方法三 选择 文件 属性 命令 26 2 2图像编辑 1 插入图像2 编辑图像3 设置图片属性 27 1 插入图像 插入一幅关于 背景 的剪贴画的操作步骤 将插入点定位在需要插入图片的位置 选择 插入 图片 剪贴画 命令 打开 剪贴画 任务窗格 如图所示 在任务窗格中 用户可在 搜索文字 文本框中输入剪贴画的关键字 背景 单击 搜索 按钮开始搜索 在任务窗格下方列表框中列出了搜索到的剪贴画 单击剪贴画右侧的下三角按钮 弹出剪贴画的快捷菜单 单击 插入 命令即可 28 插入来自文件的图片的操作步骤 将插入点定位在需要插入图片的位置 将插入点定位在需要插入图片的位置 选择 插入 图片 来自文件 命令 或单击 常用 工具栏中 插入图片 按钮 打开 图片 对话框 选择所需文件 单击 插入 按钮 1 插入图像 29 2 编辑图像 在网页中插入图像后 还可对图像进行编辑 用鼠标单击选取图像 在屏幕上就会出现 图片 工具栏 利用 图片 工具栏可对图片进行旋转 剪裁 冲蚀 设置凹凸效果 透明背景色 调整亮度 对比度以及在图片中加入文字等 选中图片后 拖动图片周围的控点可改变图片大小 30 3 设置图片属性 选定所需的图片 单击鼠标右键 从快捷菜单中选择 图片属性 命令 弹出 图片属性 对话框 在对话框的 常规 和 外观 两个选项卡中进行设置 可以做出各种图文混排的页面效果 31 7 2 3超链接创建 1 选择链接的载体2 选择链接的目标3 指定目标窗口4 验证超级链接5 设置超链接的状态颜色6 图像映射 32 超链接是从一个网页指向另一个目的地的指针 这个目的地可以是另一个网页或同一个网页中的其他位置 也可以是一个电子邮件 一个Word文档或者是一个应用程序 创建超链接的步骤 选择链接的载体 选择链接的目标 指定目标窗口 7 2 3超链接创建 33 1 选择链接的载体 链接的载体是显示链接的页面元素 将鼠标指针移到包含超链接的文字或图像上时 鼠标指针就会变成形状 当浏览者单击此文本串或图像 浏览器将打开相应地址的网页 选定链接的载体后 单击 常用 工具栏上 插入超链接 按钮 或选择 插入 超级链 命令 打开 插入超链接 对话框 34 2 选择链接的目标 链接的目标包括原有文件或网页 本文档中的位置 书签 新建文档 电子邮件等 根据跳转目的地的不同 网页中链接可分为4种类型 1 原有文件或网页直接跳转到已经存在的某一网页或文件 如果是本网站内的网页 可用光标在 插入超链接 对话框列表文件中选择 如果是本机上其它网站中的网页 则选择 插入超链接 对话框中的按钮 或从 查找范围 中选择相应的网站 再选择所需网页 如果是Internet上其它网站的某一网页 可单击按钮打开浏览器找到该页面后 该页面的网址会自动出现在 地址 栏 也可以直接在地址栏文本框中输入该网页的地址 35 2 本文档中的位置是直接跳转到本网页中的某书签标志的位置 要进行此链接操作 必须先用 插入 书签 命令在网页中的某些位置插入书签 在 插入超链接 对话框中单击 本文档中的位置 然后选择该网页上的书签 将会在书签位置创建一超链接 2 选择链接的目标 36 3 新建文档可以将当前选中的链接的载体链接到一个新建的页面上 单击 新建文档 按钮 在 新建文档名称 栏填写该网页的名称 2 选择链接的目标 37 4 单击 电子邮件地址 按钮 在 电子邮件地址 栏填写目标电子邮件地址 可创建一个到电子邮件的链接 2 选择链接的目标 38 3 指定目标窗口 链接的目标网页选定后 可以指定目标网页是在本窗口中显示还是在新打开的浏览器窗口中显示 单击 插入超链接 对话框中 目标框架 按钮 打开 目标框架 对话框 指定链接的目标网页的目标窗口 默认是在当前窗口中打开目标网页 公用的目标区 列表框选项含义如下 相同框架 链接的目标网页显示在包含该超链接的同一个框架内 整页 将框架展开为全窗口后显示链接的目标网页 新建窗口 另外打开一个浏览窗口显示链接的目标网页 父框架 如果是一页套一页的框架网页 选择父框架可以回到上一层框架显示链接的目标网页 39 4 验证超级链接 上面的三个步骤设置完成后 超链接的创建便完成了 接下来有必要验证一下超链接是否正确 可用如下的方法来验证 网页的设计视图中 把鼠标移到已经创建了超链接的载体上 文字 图像 鼠标变成手状 按下键 然后单击鼠标 便可验证链接目的地 在网页的预览视图中 用鼠标单击创建了链接的载体 便可验证链接目的地 40 5 设置超链接的状态颜色 在浏览器中浏览网页时 已经访问过的超链接 尚未访问过的超链接和正在访问的超链接应有不同的颜色显示 使浏览者一目了然 设置超链接的状态颜色方法 选择 格式 背景 命令 打开 网页属性 对话框 选中 背景 选项卡 对与超链接有关的部分进行设置 41 6 图像映射 图像映射也称MAP技术 是指在一幅图像上建立不同形状的热点区域 每一个区域都是一个超链接 制作步骤如下 选定要制作图像映射的图片 此时屏幕会显示出 图片 工具栏 在 图片 工具栏上有5个专门是为图像映射功能设置的 单击 图片 工具栏中一种热点形式 并将光标移到要制作图像映射的图片中 光标变成铅笔形状然后用鼠标在图片中拖动出一个矩形区域 松开鼠标后 出现 创建超链接 对话框 从中可设置该热点的链接目标 42 2 4Web组件 1 字幕2 交互式按钮3 横幅广告 43 1 字幕 字幕是在浏览器中能够水平滚动的文字 其文字具有动态特点 可以用于发布网站的通知和提示信息 其操作步骤如下 选择插入字幕的位置 选择 插入 Web组件 命令 选择 选择一种效果 列表中的 字幕 选项 然后单击 完成 按钮 打开 字幕属性 对话框 设置字幕属性 如在文本框中输入滚动的文字 选择滚动方向等 然后单击 确定 按钮 便完成滚动字幕的插入 切换到预览视图 观看滚动字幕的效果 更改字幕属性 在网页设计视图下双击该字幕 或选中字幕单击鼠标右键 在弹出的快捷菜单中选择 字幕属性 便可弹出字幕属性对话框 44 2 交互式按钮 交互式按钮也称悬停按钮 是一种可以变化的按钮 当将鼠标指针移到交互式按钮上时 它会变成新的样子 当鼠标指针离开交互式按钮时 它又会自动变回到原来的样子 交互式按钮一般用在导航条中 在网页中插入交互式按钮操作步骤如下 选择插入交互式按钮的位置 选择 插入 Web组件 命令 打开如上图所示的对话框 选择 选择一种效果 列表中的 交互式按钮 选项 然后单击 完成 按钮 打开 交互式按钮 属性对话框 设置交互式按钮属性 然后单击 确定 按钮 便完成交互式按钮的插入 切换到预览视图 查看交互式按钮的效果 45 设置交互式按钮的属性 在按钮选项卡下 在 文本 属性框中输入按钮上显示的文字 在 链接 属性框中设置链接的目的地 按钮列表框中选择按钮的样式等 在字体选项卡下 可以设置按钮上的文字的相关格式 在图像选项卡下 可以设置按钮上显示的图像及属性 更改交互式按钮属性 在网页设计视图下双击该按钮 或选中该按钮右击 在弹出的快捷菜单中选择 按钮属性 命令 便可弹出交互式按钮属性对话框 2 交互式按钮 46 3 横幅广告 横幅广告的动画形式就像一幅不停变换着的广告牌 在网页中插入横幅广告的操作步骤 选择插入位置 选择 插入 横幅广告管理器 命令 打开 横幅广告管理器属性 对话框 选择属性对话框中的 添加 按钮 添加要显示的图片 至少要有两幅图片才能变换显示 高度 宽度属性设置图片的显示框的大小 过渡效果设置图片的显示效果 切换到预览视图 查看横幅广告的效果 47 3网页布局 7 3 1表格布局7 3 2框架布局 48 3 1表格布局 1 创建表格2 编辑表格3 设置表格和单元格的属性4 实例 49 表格在网页制作中的作用有以下两个方面 用于显示有一定格式的数据和信息 用于对整个网页版面的控制 组织数据 排列网页元素 文本 图像 视频等 的空间位置 表格在网页中的使用比较多 表格的引入使网页变得整齐美观 许多漂亮的网页都是利用表格实现布局的 3 1表格布局 50 1 创建表格 在FrontPage中表格的创建和编辑同在Word中相似 创建表格的基本方法 使用 常用 工具栏中的 插入表格 按钮 选择 表格 插入 表格 命令 选择 表格 绘制表格 命令 用鼠标控制画笔绘制任意表格 51 2 编辑表格 表格绘制好后 根据需要对表格中的文字进行编辑 对行高列宽进行调整 对表格的行 列 单元格可作增加或删除操作 具体操作与在Word中一样 52 3 设置表格和单元格的属性 在表格内任意位置右击 在出现快捷菜单中选择 表格属性 选项 或选择 表格 表格属性 表格 命令 弹出 表格属性 对话框 可对表格的布局 边框和背景进行设置 在某一单元格内右击 在弹出的快捷菜单中选择 单元格属性 命令 弹出 单元格属性 对话框 可对该单元格的布局 边框和背景进行设置 53 3 2框架布局 1 创建框架网页2 框架的编辑3 框架属性的设置 54 框架是一种特殊的网页 它将浏览器窗口划分成功能独立的几个部分 每部分是一个框架 每个框架分别对应于一个独立的网页 这样可以在一个窗口上同时观看到多个页面组成的信息界面 各个框架之间还可以设置超链接 很多网站都具有这样的结构 3 2框架布局 55 1 创建框架网页 创建框架网页的步骤如下所示 选择 文件 新建 命令 出现 新建网页或网站 任务窗格 单击 其他网页模板 命令 弹出 网页模板 对话框 选中 框架网页 选项卡 在列表中选择所需的模板 单击 确定 按钮 建立了一个新的框架网页 56 在框架网页每一个子窗口中都有两个按钮 单击 新建网页 按钮 一个新的空白网页就会出现在框架中 单击 设置初始网页 按钮 弹出 插入超链接 对话框 在对话框中选择某一目标网页作为此框架的初始网页 1 创建框架网页 57 框架网页的保存 单击 常用 工具栏上的 保存 按钮 则会弹出 另存为 对话框 则依次把框架网页中的 新建网页 保存完后 再保存 框架集文件 对话框右侧为框架示意图 深蓝色框突出显示表示正在保存的框架 1 创建框架网页 58 2 框架的编辑 对于已经建立好的框架网页 可以再对它进行编辑 比如对某个框架再拆分或删除 重新进行框架布局 1 拆分框架单击选定要拆分的框架 选择 框架 拆分框架 命令 打开 拆分框架 对话框 根据需要选择 拆分为列 或 拆分成行 2 删除框架先单击选定要删除的框架 再选择 框架 删除框架 命令 59 3 框架属性的设置 选中需要设置的框架 选择 框架 框架属性 命令 或者单击鼠标右键 从快捷菜单中选择 框架属性 菜单项 打开 框架属性 对话框 框架大小 有百分比 相对大小 象素值三种设置方式 边距 可以设置框架内容和框架边框之间的距离 显示滚动条 列表中各个选项表示 需要时显示 选项 当浏览器窗口太小不能放下框架的全部内容时 滚动条就会出现 不显示 选项 无论什么情况 滚动条都不会出现 始终显示 选项 滚动条自始至终都会出现 即使它们不需要时也会出现 显示或隐藏框架周围的边框 单击 选项 右边的 框架网页 按钮 选中或清除 显示边框 复选框 60 4表单应用 7 4 1创建表单网页7 4 2发布表单网页 61 4 1创建表单网页 创建表单网页有两种方法 一种是利用FrontPage提供的模板或向导可以快速创建表单网页 另一种是使用表单域来定制表单 下面以插入表单域来定制表单为例 说明创建表单的操作方法 插入表单 选择 插入 表单 表单 命令 或用鼠标拖动子菜单顶部就会出现 表单 工具栏 再单击 表单 工具栏中的 表单 按钮 此时 会出现一个由虚线框表示的表单框 表单内只有 提交 按钮和 重置 按钮 插入表单域 为了使表单中的每个表单域对齐 在创建表单域之前在表单中插入表格 然后依次插入各表单域 设置表单域属性 表单网页布局设计好以后 还需要对表单域属性进行设置 才能使表单正常工作 62 下面分别介绍按钮 单行文本框 复选框表单域的属性设置 在页面中双击相应的表单域 或右击此表单域 弹出快捷菜单 选择 表单域属性 命令 就可打开其属性对话框 对该表单域进行属性设置 1 按钮属性 对话框如图所示 值 标签 设置按钮上显示的文字 按钮的类型可设置按钮的功能 重置 类型按钮 可以清除表单内的所有内容 所有表单域都恢复原始设置 提交 类型按钮 可以把访问者填写的表单内容发送到表单按钮指定的网页或相关程序 普通 类型按钮 用户可调用自己编写的程序处理表单中的数据 定制表单功能 4 1创建表单网页 63 2 单行文本框的表单域适合访问者做简单回答 如姓名 密码 电话号码等 名称 属性 用于设置该表单域的名称 通过这个名称表单与Web服务器才能进行交流 初始值 属性 设置文本框中显示的默认值 宽度 属性 设置文本框的宽度 但不会影响浏览者在文本框中可以输入的文本数量 密码域 属性 如果选择 是 选项时文本框信息内容将会以 表示 4 1创建表单网页 64 3 复选框提供访问者设置多个选项的功能 值 属性 用来描述该复选框选中后所表示的含义 这是一个 布尔 值 例如 ON OFF True False等 初始状态 属性 用于设置复选框的初始状态 即打开网页时 复选框是否被选中 4 1创建表单网页 65 4 2发布表单网页 1 保存表单信息2 创建确认表单网页 66 1 保存表单信息 表单作为网页中一种最重要的信息收集和交流工具 能够帮助网站管理员收集信息 但是只有浏览者提交了表单结果后网站管理员才能收到信息 对于浏览者提交的表单结果 FrontPage都会以某一种方式保存起来 设置保存表单结果的步骤 在表单内单击鼠标右键 从快捷菜单中选择 表单属性 命令 弹出 表单属性 对话框 设置表单属性 在 将结果保存到 区域中选择 发送到 选项 在 文件名称 框中指定保存表单结果的文件路径及文件名称 将表单结果保存到某一个文件中 在 电子邮件地址 框中输入收集表单结果的网站管理员的电子邮件地址 这样每当网站访问者提交表单时 网站管理员就可以接收到 份电子邮件信息 67 2 创建确认表单网页 确认表单网页用于给浏览者反馈信息 浏览者提交表单以后 并不知道是否发送成功 这时需要反馈给浏览者确认信息 确认表单网页是一种已经设置好了的网页 它将会依据网页浏览者所填写表单内容的不同 而反馈不同的结果 创建确认表单网页的步骤 新建一网页 并输入确认信息 设置表单属性 插入确认域选择 插入 Web组件 命令 打开 插入Web组件 对话框 在对话框的组件类型列表中选择 高级控件 选项 在对话框右列表中选择 确认域 选项 打开 确认域属性 对话框 输入要确认的表单域名称name 即提交网页中的 姓名 表单域 68 保存表单确认网页 将提交网页与确认网页关联起来 打开提交网页 在表单域内单击右键 从弹出的快捷菜单