应用FrontPage制作公司产品网页.ppt

第6章应用FrontPage制作公司产品网页 主要内容 6.1 网络信息搜索下载 6.2 公司网站创建 6.3 公司网站编辑 6.4 公司网站美化 6.5 公司网站发布 6.6 拓展练习 6.1 网络信息搜索下载 6.1.1 网站素材搜索 6.1.2 网站素材下载 6.1.3 网站素材整理 6.1.1 网站素材搜索 网络检索工具。 目录式搜索。 全文搜索。 搜索技巧。 百度搜索技巧 网页搜索。site:网址 文档搜索。filetype:DOC、XLS、PPT、PDF、RTF、ALL。 谷歌搜索技巧 link:含某个链接的网页如:link: site:域名中包如:site: Intitle:标题搜索. 如:intitle:休斯顿火箭队 Intext:正文检索.如:intext:像素600万 Inurl:搜索url.如: inurl:mp3 filetype:文件格式. 如:filetype:pdf 6.1.2 网站素材下载 1.迅雷Thunder 单文件下载 批量文件下载 2.网际快车Flash Get 点击下载 手动下载 6.1.3 网站素材整理 1.图片统一格式 2.图片、动画尺寸适当 3.图片色彩统一 6.2 公司网站创建 6.2.1 FrontPage 2003的界面 6.2.2 FrontPage 2003的视图 6.2.3 创建公司站点 6.2.4 创建Web网页 6.2.1 FrontPage 2003的界面 执行“开始”“程序 ”“Microsoft Office”“Microsoft Office FrontPage 2003”菜单命令。 6.2.2 FrontPage 2003的视图 1.网页视图 “设计”方式：即为制作、编 辑Web网页的状态 “拆分”方式：则是上方显示 Web网页的HTML语言，下方 显示编辑Web网页的状态 “代码”方式：显示Web网页的 HTML语言，用户制作Web网 页，FrontPage会将其自动 翻译成HTML语言 “预览”方式：为用户提供一 个Web网页的预览效果 2.文件夹视图 在文件夹视图中， FrontPage将Web站点显示为 一组文件和文件夹 3.报表视图 利用报表视图可以清晰地了 解各个文件的内容、链接情 况等 4.导航视图 导航视图主要用于显示Web 站点的结构，并可以在导航 视图中修改Web站点的结构 5.超链接视图 在这个视图中，Web站点中 所有Web网页的超链接将以 一个网络的形式出现 6.任务视图 任务视图显示的是各种需要 做的工作。用户可以方便地 对其进行管理 6.2.3 创建公司站点 （1）打开FrontPage2003，执行“文件”“新建”菜单 命令，打开“新建网页或站点”任务窗格。 （2）单击“由一个网页组成的网站”超链接，打开“网 站模板”对话框。 （3）在对话框右侧的“指定新网站的位置”文本框中 输入保存站点的路径，也可使用“浏览”按钮指定 新站点位置。 （4）单击“确定”按钮，即可完成新建站点。 6.2.4 创建Web网页 单击“新建网页或站点” 任务窗格中的“其他网 页模板”超链接，将弹 出一个“网页模板”对话 框 6.3 公司网站编辑 6.3.1 打开Web站点和Web网页 6.3.2 修改Web网页 6.3.3 设置字体和段落格式 6.3.4 应用主题 6.3.5 修改主题 6.3.6 设置背景和背景音乐 6.3.7 设置Web网页动画效果 6.3.8 设置超链接 6.3.1 打开Web站点和Web网页 要修改Web网页，必须 先将其打开。在文件 夹视图下的文件列表 中双击目标文件即可 将其打开。 实际上，在导航视图 下的文件列表中双击 目标文件同样也能打 开该文件。 6.3.2 修改Web网页 打开后的文件显示在网页视图中。在利用 向导和模板生成的Web网页中，FrontPage 提供了大量的注释。修改即可按照这些注 释进行，在合适的位置按照提示输入文本 即可。 6.3.3 设置字体和段落格式 设置文本和段落格式的方法和Word中的方 法是完全一样的。选中要设置格式的字体 或者段落，执行“格式”“字体”或者“段落” 菜单命令，打开“字体”对话框或者“段落”对 话框。 6.3.4 应用主题 FrontPage 2003提供了许多完整主题，用 户可以将主题应用到整个Web站点、一张或 者多张Web网页上。 （1）执行“格式”“主题”菜单命令，打开 “主题” 窗格。 （2）若事先已经打开了一个Web网页，则选择“主 题”窗格中的“应用于所选网页”菜单命令即可 （3）设定完毕以后，单击“确定”按钮。这样整个 站点中所有的Web网页均被应用了该主题。 6.3.5 修改主题 FrontPage给用户提供 了很大的自由度，用 户可以事先修改 FrontPage提供的主题 。在“主题”窗格中 选择“自定义”命令 ，将弹出如图所示的 对话框。对话框中出 现以下几个按钮：“ 颜色”、“图形”、 “文本”。 6.3.5 修改主题 1.修改颜色 2.修改图形 3.修改文本 6.3.6 设置背景和背景音乐 打开要设置背景的Web网页。在网页视图中，单击鼠标 右键，选择快捷菜单中的“网页属性”菜单命令，也可以 执行“格式”“背景”命令，打开“网页属性”对话框。 打开“格式”选项卡，便可设置当前Web网页的背景。 若想设置Web网页的背景音乐，打开“常规”选项卡。在“ 背景音乐”选项组中设置背景音乐，其中的“循环次数” 表示打开Web网页以后，该背景音乐播放的次数，若选 中“不限次数”复选框，则音乐将一直播放，直至该Web 网页关闭。 设置完毕，单击“确定”按钮即可。 6.3.7 设置Web网页动画效果 1.设置动态HTML 打开Web网页，选中要设定动画的元素，比如 一段文本，或一张图片等。 执行“视图”“工具栏”动态HTML效果”菜单命 令，打开“DHTML效果”工具栏。 在第一个列表框中选定一个事件 在“应用”下拉列表框中选择一种动画效果 最后在第三个下拉列表框中选择动画的具体形式 6.3.7 设置Web网页动画效果 2.网页过渡效果 （1）打开有设置过渡 效果的Web网页 （2）执行“格式”“网 页过渡”菜单命令 （3）设置完毕，单击“ 确定”按钮 6.3.8 设置超链接 在Web网页中，可以给文本或者图片设置超 链接。 在Web网页中选中要设置超链接的文本或者图 片。 在“常用”工具栏上单击“插入超链接”按钮，或者 直接按CtrlK组合键，打开“插入超链接”对话 框。然后便可设置超链接，如在“地址”文本框 中输入要链接的网站。 设置完毕单击“确定”按钮。 使用链接栏设置超级链接 在Web网页上确定插入点（光标位置）。 执行“插入”“Web组件”菜单命令，打开“插入Web组件”对话 框，在左侧的“组件类型”列表框中选择“链接栏”选项，然 后在“选择栏类型”列表框中选择“包含自定义链接的链接栏 ”选项 单击“下一步”按钮，将打开“插入Web组件”对话框，从中选 择适当的链接栏样式后，单击“下一步”按钮。 在弹出的对话框中选择导航栏的方向，最后单击“完成”按 钮。 此时将弹出一个对话框，提示用户输入新链接栏的名称， 确定之后将打开“链接栏属性”对话框，单击“添加链接”按 钮，便可为用户的链接栏添加链接。 设置完毕，单击“确定”按钮，Web网页上即自动生成了一个 链接栏。 6.4 公司网站美化 6.4.1 插入图片 6.4.2 插入图片库 6.4.3 插入水平线 6.4.4 插入计数器 6.4.5 插入字幕 6.4.1 插入图片 将要插入的图片复制到网 站根目录下的Images目录 下。 在Web网页上确定插入点（ 光标位置）。 在“常用”工具栏中单击“插 入文件中的图片”按钮 ， 打开如图所示的“图片”对 话框，在文件列表中查找 到要插入的图片文件，单 击“插入”按钮即可。 6.4.2 插入图片库 在FrontPage 2003中，可以直接插入一个图片库，这样可 以省去用户布局图片的时间。以下是插入图片库的方法： 在Web网页上确定插入点（光标位置）。 执行“插入”“Web组件”菜单命令，打开“插入Web组件”对话框，在 左侧的“组件类型”列表框中选择“图片库”选项，在“选择图片库选项 ”列表框中选择一种图片布局方式。 设置完毕，单击“完成”按钮，将打开“图片库属性”对话框。 在“图片库属性”对话框中的“图片”选项卡中单击“添加”按钮，打开 一个列表。若使用“图片来自文件”命令，便可利用“打开”对话框选 择要添加的图片。 设置完毕，单击“确定”按钮，FrontPage将在光标处插入图片库， 也就是显示库中所有图片的缩略图。 6.4.3 插入水平线 在Web网页中，水平线 起分隔内容或者强调 内容的作用。插入水 平线的方法很简单， 确定插入水平线的位 置后，执行“插入”“ 水平线”菜单命令即可 。 双击水平线，将打开 如图所示的“水平线属 性”对话框。 6.4.4 插入计数器 如果用户想知道网站的访 问人数，则要用到网站计 数器。设置网站计数器的 方法如下： （1）在Web网页上确定插入点 （光标位置）。 （2）执行“插入”“Web组件”菜 单命令，打开“插入Web组件” 对话框。在“组件类型”列表 框中选择“计数器”选项。然 后在右侧的“选择计数器样 式”列表中选择一种计数器 样式。 （3）选定完毕，单击“完成”按 钮，将打开如图所示的“站 点计数器属性”对话框 6.4.5 插入字幕 在“网页”视图中文档窗口的底 部，单击“设计”。 单击要添加字幕的位置，然后输 入文本并选中该文本。 在“插入”菜单上，单击“Web 组件”。 在“组件类型”下方，单击“动 态效果”。 在“选择一种效果”下方，双击 “字幕”。 插入字幕的html代码为：字幕 文字 为字幕设置需要的属性，然后单 击“确定”。 6.5 公司网站发布 6.5.1 发布到扩展的服务器 6.5.2 发布到支持 FTP或WebDAV的服务器 6.5.3 发布到文件系统 6.5.1 发布到扩展的服务器 在“视图”菜单上，单击“远程网站”。 在文档窗口顶部，单击“远程网站属 性”。 在扩展的服务器上承载的网站，将在 其发布后具有增强的功能，例如允 许使用表单句柄和点击率统计程序 。FrontPage 将在发布网站时维护 文件和链接。 在“远程网站”选项卡上，在“远程 Web 服务器类型”下，单击 “FrontPage 或 SharePoint Services”。 “远程网站位置”框中，键入要将文 件和文件夹发布到的远程网站的 Internet 地址及协议 （例如 ）或单 击“浏览”定位网站。 单击“确定”，设置如图所示 6.5.2 发布到支持 FTP或WebDAV的服务器 如果使用“远程网站”视图将网站发布到支持FTP或WebDAV的网站，则必须 了解服务器名称、用户名称和密码。 在“视图”菜单上，单击“远程网站”。 在文档窗口顶部，单击“远程网站属性”。 在“远程网站”选项卡上，在“远程Web服务器类型”下，单击“FTP”。 在“远程网站位置”框中，键入要将文件和文件夹发布到的远程网站的地 址及 FTP 协议 （例如 02）或单击“浏览”以定位 网站。 如果您要在连接到网站时查看特定的文件夹，请在“FTP 目录”框中，键 入文件夹的路径 （例如 www/images）。 如果承载远程网站的服务器在每一次您将文件和文件夹发布到网站时 使用不同的端口，请选中“使用被动FTP”复选框。 执行下列任意操作： 若要在发布网页时删除其中特定类型的代码，请在“优化HTML”选项卡上， 选择所需的选项。 若要更改默认的发布选项，请在“发布”选项卡上，选择所需的选项。 单击“确定” 。 6.5.3 发布到文件系统 通过使用“远程网站”视图，您可以将网站发布到本地文件系统的文件 夹或“统一命名约定”(Universal Naming Convention，UNC)路径中。 例如，您将网站发布到新的磁盘位置（例如C:Backup）来备份整个 网站。 在“视图”菜单上，单击“远程网站”。 在文档窗口顶部，单击“远程网站属性”。 在“远程网站”选项卡上，在“远程Web服务器类型”下，单击“文件系统”。 在“远程网站位置”框中，键入要将文件和文件夹发布到的远程网站的地 址。 然后执行下列任意操作： 若要在发布网页时删除其中特定类型的代码，请在“优化 HTML”选项卡上 ，选择所需的选项。 若要更改默认的发布选项，请在“发布”选项卡上，选择所需的选项。 单击“确定” 。 6.6 拓展练习 6.6.1 采用HTML设计网页 6.6.2 使用表单网页 6.6.3 使用框架网页 6.6.1 采用HTML设计网页 1. HTML的基本结构 （1）标签 （2）标签 （3）和标签 （4） 标签 2. HTML基本语法 （1）文字布局标记 （2）文字格式标记 （3）图片标记 （4）超级链接标记 （5）表格标记 6.6.2 使用表单网页 1.插入表单域 （1）文本框 （2）选项按钮 （3）文本区 （4）下拉框或下拉菜单 （5）对可选项目使用复选框。 （6）按钮 （7）分组框 （8）密码域 2.提交表单 （1）将结果保存到文本文件、HTML文件 （2）以电子邮件的形式发送结果 6.6.3 使用框架网页 1.创建框架网页 2.编辑框架网页 3.保存框架网页 4.修改框架网页 5.设置目标框架 6.iframe高级应用 小结 （1）通过搜索