《计算机应用基础》PPT课件第6章.ppt

第6章FrontPage2003网页制作 本章要点 FrontPage2003的基本操作 使用FrontPage制作简单的网页 创建于1975年的微软公司是个人和商用计算机软件行业的领袖 微软公司为用户提供范围广泛的产品和服务 并通过优秀的软件使人们能够不受时间 地点的限制进行沟通 其产品FrontPage2003简单易用 采用图形化的界面 大大提高了网页制作人员的工作效率 是网页制作领域使用较广泛的一个工具软件 FrontPage是20世纪90年代后期微软公司收购的一家小软件公司的产品 并非微软公司原创 微软将其收购后进行了全面的版本更新 使其融入了微软一贯的易学易用 功能强大 界面简洁等人性化设计 直至现在被全球广泛使用 FrontPage2003可以用于网站的创建和管理 其主要功能如下 1 设计网站2 开发数据组织的网站3 发布网站4 维护网站 6 2网页的基本操作 网站是万维网上的若干相关网页以及与这些网页相关的图像 声音和视频等的集合 网页是万维网上的基本文档 用HTML书写 网页是网站的一部分 也可以独立存在 计算机应用基础为了创建专业 设计完善的网页 FrontPage2003提供了多种网页模板 使用户能快速地创建具有各种布局和功能的网页 例如 可以使用FrontPage2003的模板创建用户注册网页 留言簿 反馈表单以及带有搜索表单的网页等 也可以使用主题来创建设计一致的网页 主题包含了采用一种配色方案的统一设计元素 如字体 图形 背景 导航栏 水平线及其他网页元素 如果想自己设计并布置网页 可以从一个空白的网页开始 然后进行以下一项或多项操作 1 使用框架 表格 布局或绝对定位来精确定位网页上的文本和图形 2 添加文本 图形 网页横幅 表格 表单 超链接等网页元素 3 添加Flash内容 视频 声音或GIF动画等动态 4 添加可以变化的内容或功能 如字幕 字幕组件 网页上显示水平滚动文本消息的区域 计数器 计数器组件 FrontPage中的组件 跟踪万维网网站的访问者的数目 时间戳 网页过渡 交互式按钮以及使用动态HTML的表现方式等 注意 动态HTML即DHTML 它是超文本标记语言的扩展 添加多媒体 数据库访问以及对象模型 程序可使用它们更改页面元素 对象 的样式和属性并将现有元素 对象 替换为新的元素 对象 5 应用样式或使用样式表来设置文本格式 6 用颜色或图片来设置网页背景 7 通过使用动态网页模板 它可以包括具有网页设置 格式设置和网页元素的网页 来创建自己的网页模板 FrontPage2003的各种编辑方法 段落和字体格式的设置等与Word2003非常相似 操作非常简单 下面开始学习安装并使用FrontPage2003制作网页 6 2 1获取途径和安装方法 FrontPage2003是微软公司Office2003的标准组件 将Office2003安装光盘放入光驱 选择典型安装或者在自定义安装中选定组件 MicrosoftFrontPageForWindows 即可进行安装 安装成功后 打开 开始 菜单 选择 程序 MicrosoftOffice MicrosoftOfficeFrontPage2003 命令 即可启动FrontPage2003 因为网页编辑软件对系统性能的要求比较高 如CPU运算速度 内存大小等 所以使用性能较高的计算机进行网页制作 可以提高软件的运行速度 6 2 2网页的新建与保存 创建一个新网页的方法是 选择 文件 新建 命令 在编辑区右侧显示 新建 任务窗格 单击 由一个网页组成的网站 超链接 弹出 网站模板 对话框 如下图所示 FrontPage2003提供了多种供选择的模板 用户可以根据需要选择一个适合自己的模板 在 网站模板 对话框的 常规 选项卡中 选择相应的模板 在 指定新网站的位置 下拉列表框中选择本地网站的地址 单击 确定 按钮 此时可在编辑区出现的空白区编辑网页 保存网页的方法是 选择 文件 保存 命令或者在常用工具栏中单击 保存 按钮 弹出 另存为 对话框 如下图所示 在 保存位置 下拉列表框中选择保存路径 在 文件名 文本框中输入文件名 单击 保存 按钮即可 对编辑过的网页文件 如果要存放在原处 选择 文件 保存 命令即可 如果要以另外的文件名保存或保存在另一位置 则需要选择 文件 另存为 命令 在弹出的 另存为 对话框中输入新的文件名及文件保存位置 保存类型 最后单击 保存 按钮 注意 一般不把网页和网页中要用到的文件 如图像 声音 及与网页同类型的 网页可能会链接到的文件以中文名保存 而是采用英文或英文和数字组合文件名 这是因为多数服务器不支持中文文件名 6 2 3查看 修改源代码 FrontPage2003带有直接显示网页HTML源代码的功能 这使得用户无须精通HTML编码 也能使用FrontPage方便地编辑代码 在网页编辑状态 单击编辑区域左下方的 代码 按钮可直接查看HTML源代码 如下图所示 在代码窗口中可以直接对HTML源代码进行编辑 而且可以看到不同的源代码用不同的颜色显示 HTML的标记或属性名用蓝色显示 各种属性值和正文文字用黑色显示 6 2 4预览网页 编辑完一个网页后 执行下列操作之一可以预览网页的实际显示效果 1 在FrontPage2003中预览网页单击主编辑区左下方的 预览 按钮 弹出网页预览窗口 可对编辑的网页进行预览 在FrontPage2003中进行预览 看到的是网页发布后的大致情况 不一定是网页在浏览器中打开时的真实情形 2 在浏览器中预览网页在FrontPage2003中可直接打开浏览器预览所编辑的网页 具体操作步骤如下 1 选择 文件 在浏览器中预览 命令 如下图所示 2 设置浏览器窗口大小等参数即可查看网页在浏览器中的显示效果 预览网页可以让网页制作者即时了解网页在浏览器中的效果 而不必启动浏览器来浏览网页 从而提高了网页制作的效率 在预览状态中 更有利于看到网页中的不合理结构 超链接设置错误等问题 方便用户改正 6 3表格 表单与框架 表格 表单及框架是制作网页时的常用元素 它们在网页中的作用不可忽视 表格由单元格构成的行 列组成 而且根据需要单元格中可以插入文本和图形 表单与网站之间的关系类似于表格与纸张之间的关系 不同之处在于用户联机创建表单 并使用它与网站访问者交互以及从访问者那里收集信息 框架与表格完全不同 框架中的内容是另外一个网页 也可以理解为一个网页嵌套在另一个网页里 下面对这三种元素的应用进行详细介绍 6 3 1插入表格 表格在网页中的应用不可或缺 常用于对网页中其他元素进行精确定位 将复杂的元素有条理地分布到网页各个位置 另外在输入文字时 通过对表格列宽等进行限定 可以方便文字编辑 表格还可以用来设置网页布局 使凌乱的网页井井有条 方便浏览 用FrontPage打开一个专业网站 如下图所示 可以看到很多由纵横交错的虚线组成的表格 这就是在网页中插入的表格 1 建立表格选择 表格 插入 表格 命令 打开 插入表格 对话框 如图6 6所示 在 插入表格 对话框里列出了表格的各个选项 如大小 最多可以插入一个25行 25列的表格 布局 边框 背景等 2 设置表格属性表格属性设置到表格的美观 特别是用表格来组织网页时 表格属性的设置方法如下 1 打开一个含有表格的网页 选择 表格 表格属性 表格 命令 弹出如下图左所示的对话框 2 属性设置 大小 设置表格的行数和列数 布局 设置对齐方式和单元格间距等 边框 设置边框的大小和颜色 背景 设置背景色和背景图像 表格的修改和单元格设置 如果已经建立的表格单元格不够用或者多余时 可以通过插入行 插入列 删除单元格 拆分单元格等操作来实现 如下图右所示 6 3 2插入表单 在浏览网页时经常可以看到网页中含有表单 例如 用户在某网站注册会员时 网站要求申请人填写的资料表 就是表单的一种应用 下面具体介绍表单的创建方法 步骤如下 1 选择 插入 表单 表单 命令 即可插入一个空白的表单 如下图所示 2 根据需要可以在空白表单中添加其他元素 将光标放置于表单中 选择 插入 表单 命令 即可将选择的表单元素添加到空白表单中 如下图所示 6 3 3创建框架网页 框架网页的每个框架中都可以显示不同的网页 而其本身并不包含可见内容 它只是一个容器 用于指定要在框架中显示的其他网页及其显示方式 创建框架网页的步骤如下 1 选择 文件 新建 命令 打开 新建 任务窗格 如下左图所示 单击 其他网页模板 超链接 打开 网页模板 对话框 2 在 网页模板 对话框中打开 框架网页 选项卡 如下右图所示 3 选择一个模板后 可以在对话框右侧 预览 区域预览其布局 选择完成后单击 确定 按钮 设置要显示在每个框架中的初始网页的操作步骤如下 1 单击要设置初始网页的框架 2 执行下列操作之一 选择一个已创建的网页 在框架中 单击 设置初始网页 然后选择要显示的网页 创建新网页 并将其设置为该框架中显示的初始网页 在框架中 单击 新建网页 FrontPage2003会在该框架中创建一个新网页 该新网页会自动设置为初始网页 6 4图像和超链接 图像和超链接是网页不可缺少的元素 合理的运用可以使网页更加完善 有利于在有限的空间表达更多的内容 6 4 1插入图像 为了更好地表达网页的内容 在制作网页时通常会在网页中插入图像 使网页变得美观 插入图片时必须从网站或网页的全局考虑 使得插入的图片与网页背景以及文本巧妙地融合 但在插入图像时要注意的是 过多的图像会使浏览速度受到影响 网页图像的常用格式包括以下几种 1 GIF格式 支持256色 可以做成逐帧动画 也可以设置透明背景 一般用于网页中的小图标 2 JPG格式 支持百万级真彩 一般用于网页中的照片 3 PNG格式 具有GIF JPG格式的所有优点 是网页图片发展的方向 但图片文件体积稍大 下面介绍插入图像的方法 具体操作方法是 将光标移动到要插入图片的位置 然后选择 插入 图片 来自文件 命令 如下图所示 或者直接单击工具栏中的 插入图片 按钮 6 4 2建立 编辑超链接 超链接可以说是网页中最重要的元素之一 通过链接可以访问其他的网站和网页 在网页中添加超链接的具体操作步骤如下 1 选中要添加超链接的图标或文本 选择 插入 超链接 命令 打开 插入超链接 对话框 如下图所示 2 在 插入超链接 对话框中设置超链接的地址 可以是列表框中所列的同一网站的网页 也可以是其他网站地址 还可以是网页中已存在的书签等 3 设置完成后 单击 确定 按钮 完成超链接的建立 如果在悬停按钮中加上超链接 悬停按钮将会具有类似于普通按钮的作用 单击后 将打开一个网页或跳转到同一网页的不同位置 超链接添加完成后 如果需要修改或更正 可以通过以下步骤完成 1 在文档窗口的底部单击按钮 2 右击超链接 在弹出的快捷菜单中选择 超链接属性 命令 3 弹出 编辑超链接 对话框 如下图所示 在 地址 文本框中输入超链接的目标地址 6 4 3插入交互式按钮 交互式按钮色彩丰富并具有专业化的外观 就像使用高级图像编辑工具创建的一样 与标准按钮不同 当鼠标指针移动至按钮上方或单击时 其外观会发生变化 1 交互式按钮的添加添加交互式按钮的步骤如下 1 将光标定位在要插入交互式按钮的位置 然后选择 插入 交互式按钮 命令 如下左图所示 2 在弹出的 交互式按钮 对话框中 可以设置按钮的形状 颜色 装饰 边框 字体样式和字号等 形状包括圆形 矩形 胶囊状和标签状等 按钮可以发亮或不发亮 或具有倾斜的角度 如下右图所示 在 按钮 选项卡中设置按钮样式 按钮文本 并为按钮添加超链接 3 在 字体 选项卡中 除了可以设置按钮文本的字体样式和字号外 还可以设置按钮文本的对齐方式 并设置每种按钮状态的字体颜色 如初始字体颜色 悬停 将鼠标指针悬停在按钮上 时字体颜色和按下时的字体颜色 如下左图所示 4 在 图像 选项卡中 可以调整按钮图像的尺寸 如下右图所示 注意 最好将按钮图像保存为JPEG或GIF格式文件 这两种格式的优缺点见下表所示 JPEG格式和GIF格式文件优缺点 2 交互式按钮图像的状态插入交互式按钮后 FrontPage会自动创建三个独立的图像 分别表示按钮的三种状态 初始状态 悬停时状态和按下时状态 保存网页时 FrontPage会给出提示同时保存按钮图像文件 首次保存按钮时 FrontPage会自动提供三个默认的按钮图像文件名 这些文件名以单词button开头 并以惟一值 如某个数字或字母 结尾 建议适当重新命名图像文件 以便将来在图像文件名列表中区分不同的图像 6 4 4制作站内搜索引擎 在一个已建立的网站中制作站内搜索引擎的步骤如下 1 选择 文件 打开网站 命令 指定要设置站内搜索引擎的网站目录 在 网站 文件夹内双击打开需要添加站内搜索引擎入口的页面 一般是网站的首页 进入编辑状态 2 根据页面布局将鼠标指针移动到添加搜索入口的位置 选择 插入 Web组件 命令 打开 插入Web组件 对话框 在 组件类型 列表框中选择 Web搜索 在 选择搜索类型 列表框中选择 当前网站 选项 如下图所示 最后单击 完成 按钮 3 弹出 搜索表单属性 对话框 在该对话框中设置搜索表单属性及搜索结果参数 如下左图和右图所示 单击 确定 按钮 站内搜索引擎添加完成 注意 如果其他页面也需要设置搜索入口 则将首页设置好的入口代码复制过去即可 另外 站内搜索引擎只有在网站空间支持FrontPage扩展服务器模块时才能正常运行 6 5实例解析 实例6 1 为某家医疗服务公司创建一个Web网站 解析 制作网站是一个系统工程 至少需要按照以下步骤进行操作 步骤1 需求分析明确用户网站的基本功能 用户要向访问者发布哪些信息 提供哪些服务 并最终形成一个需求分析文档步骤2 规划设计在制作之前 首先深入了解该公司的特点 基本状况 弄清公司旨在发布的内容 经过了解 归纳如下 1 作为一家医疗服务公司 体现用户第一的特点 2 体现现代医疗服务理念 3 归纳出服务 产品 发展三个主题 4 主页要反映的内容包括 公司名称 公司logo 公司概述 联系方式和用户反馈表 5 主页布局为 将公司名称及公司logo放在主页的最上端 下面是三大主题的导航栏 再下面左半部分放置用户反馈表 右半部分放置公司概述及联系方式 如下图所示 3 创建网站创建该网站的具体步骤如下 1 选择 文件 新建 命令 在 新建 任务窗格中 单击 其他网站模板 超链接 弹出 网站模板 对话框 在 常规 选项卡中选择 空白网站 模板 如下图所示 并在对话框中的 指定新网站的位置 下拉列表框中选择网站在磁盘中的位置 单击 确定 按钮 即可在指定的位置建立站点 2 新建 任务窗格中的 空白网页 超链接 在网站中创建一个空白网页 3 选择 文件 保存 命令 将创建好的网页命名为 index htm 并保存在刚建好的网站目录中 4 选择 视图 导航 命令 切换到导航视图模式 这时看到刚建好的index htm文件图标 右击该图标 在弹出的快捷菜单中选择 重命名 命令 将主页的主题重命名为 主页 如下图所示 5 在 主页 图标上右击 在弹出的快捷菜单中选择 新建 网页 命令 则在 主页 图标下又创建了一个空白网页 新建网页1 htm 图标 在该图标上右击 将其主题重命名为 我们的服务 6 采用上述同样的方法 再创建主题为 我们的产品 和 我们的发展 两个网页 网站结构如下图所示 步骤4 制作主页1 建立网页布局 1 选择 文件 打开 命令 打开网站的主页index htm 2 选择 表格 绘制表格 命令 打开表格工具栏 在空白网页中绘制如下图所示的表格 并设置各边框颜色为无 2 插入公司logo 1 将光标定位到要插入logo的位置 2 选择 插入 图片 来自文件 命令 3 选择logo文件后 单击 确定 按钮 logo的制作可以利用绘图软件 如Photoshop等来绘制 然后以图片的形式插入到网页中 也可以使用Flash制作动态logo 然后将其