计算机文化基础课件第9章.ppt

第九章网页制作 2020 2 13 1 计算机文化基础 第九章网页制作 9 1HTML简介9 2FrontPage2003概述9 3网页制作9 4网页布局9 5创建表单页面9 6网页的发布 2020 2 13 2 计算机文化基础 9 1HTML简介 HTML即HypertextMarkupLanguage的缩写 它使用一些约定的标记 Tag 对文本进行标注 定义网页的数据格式 描述Web页中的信息 控制文本的显示 我们把用HTML语言编写的文件称为HTML文件 它通常被存储在Web服务器上 客户端通过浏览器向Web服务器发出请求 服务器响应请求并将HTML文件发送给浏览器 然后由浏览器对文件中的标记作出相应的解释 以页面的形式呈现在用户屏幕上 因此 我们又把HTML文档称为网页 WebPage 2020 2 13 3 计算机文化基础 9 1HTML简介 HTML语言是一种标记语言 简单易学 用HTML语言编写的网页实际上是一种文本文件 它以 htm或 html为扩展名 我们可以使用任何文本处理软件 例如 记事本 编写 9 1 1HTML语言概述9 1 2HTML语言的基本语法 返回 2020 2 13 4 计算机文化基础 9 1 1HTML语言概述 HTML语言是由世界性的标准化组织W3C WorldWideWebConsortium 制定的 通过浏览http www w3 org可以了解到HTML标准的最新动态 下面介绍HTML文件的基本构成和HTML文件的层次结构 2020 2 13 5 计算机文化基础 1 HTML文件的基本构成Internet中的每一个HTML文件都包括文本内容和HTML标记两部分 其中 HTML标记负责控制文本显示的外观和版式 并为浏览器指定各种链接的图像 声音和其他对象的位置 多数HTML标记的书写格式如下 文本内容标记名写在 内 多数HTML标记同时具有起始和结束标记 并且成对出现 但也有些HTML标记没有结束标记 另外 HTML标记不区分大小写 HTML文件的基本构成 2020 2 13 6 计算机文化基础 某些HTML标记还具有一些属性 这些属性指定对象的特性 如背景颜色 文本字体及大小 对齐方式等 属性一般放在 起始标记 中 格式如下 文本内容其中标记名和属性之间用空格分隔 如果标记有多种属性 属性之间也要用空格分隔 HTML文件的基本构成 2020 2 13 7 计算机文化基础 2 HTML网页的结构现在我们先看一个简单的HTML文件 从中体会用HTML语言编写网页时的层次结构 例9 1 用HTML语言编写一个简单的网页 我的第一个Web页欢迎进入HTML世界 这里我们首先介绍HTML语言的基本知识和语法 然后 讲授如何使用HTML语言编写您的Web页面 2020 2 13 8 计算机文化基础 HTML语言概述 将上述代码用文本编辑器编辑并保存为一个扩展名为 htm的文件 双击该文件图标 在浏览器中看到如下图所示的结果 图9 1 2020 2 13 9 计算机文化基础 从上例可以看出 一般HTML文件都是以开头 以结束 其文件结构由以下两部分组成 1 头部 Head HTML文件的头部由和标记定义 通常情况下 文件的标题 语言字符集信息等都放在头部信息中 最常用到的标记是 它用于定义网页文件的标题 当该网页文件被打开后 网页文件的标题将出现在浏览器的标题栏中 2020 2 13 10 计算机文化基础 文件结构 2 正文主体 Body 正文主体是HTML文件的核心内容 由和标记定义 标记具有一些常用的属性 格式如下 其中 bgcolor为背景颜色 color为文本颜色 n为六位十六进制数 如果网页使用背景图像 格式如下 HTML对格式的要求并不严格 当HTML文件被浏览器扫描时 所有包含在文件中的空格 回车等均被忽略 因此你可以将一行写成两行或多行 在浏览器中结果是相同的 返回 2020 2 13 11 计算机文化基础 9 1 2HTML语言的基本语法 1 文本布局1 段落标记 标记指定文档中一个独立的段落 通过设置align属性 控制段落的对齐方式 其值可以是left center right justify 分别表示左对齐 居中 右对齐和两端对齐 默认值为左对齐 使用格式如下 2 换行标记标记可以强制文本换行 该标记只有起始标记 3 水平线标记水平线标记用于在网页中插入一条水平线 2020 2 13 12 计算机文化基础 2 文字格式HTML语言中用于文字格式化的标记有 1 标题标记格式为 标题文字内容其中n说明大小级别 取值范围为1到6的数字 把标题分为6级 即h1 h6 其中h1文字最大 h6文字最小 2020 2 13 13 计算机文化基础 2 字体标记字体标记用来对文字格式进行设置 主要具有以下属性 1 size属性 用来控制文字的大小 格式如下 其中n的取值范围为1 7的数字 默认值为3 标记和标记都可以控制文字的大小 一般情况下 文章的标题最好由标记控制 而其余的文字由标记控制 相比较而言 对字体的控制更加灵活 2 color属性 用来控制文字的颜色 格式如下 其中n是一个十六进制的六位数 3 face属性 用来指明文字使用的字体 格式如下 其中字体名的选择由Windows操作系统安装的字体决定 如 宋体 楷体 GB2312 TimesNewRoman Arial等 文字格式 2020 2 13 14 计算机文化基础 3 字形标记字形标记用于设置文字的粗体 斜体 下划线 上标 下标等 文字格式 2020 2 13 15 计算机文化基础 3 插入图片标记将图片插入网页中 用于设置图片的大小以及相邻文字的排列方式 该标记具有以下属性 1 src属性 指明图片文件所在的位置 格式如下 其中URL指图片文件存放的位置 2 alt属性 图片的文字说明 当鼠标指针指向图片时 该图片的说明性文字弹出 格式如下 3 width和height属性 设置图片显示区域的宽度和高度 格式如下 其中width和height属性的取值n1和n2 可以是像素数或百分比 2020 2 13 16 计算机文化基础 4 border属性 设置图片文件的边框 格式如下 其中n为像素数 5 align属性 设置图片相对于文本的位置关系 格式为 对齐方式可以是 top 顶端对齐 middle 相对垂直居中 bottom 相对底边对齐 left 左对齐 right 右对齐 texttop 文本上方 等 插入图片 2020 2 13 17 计算机文化基础 4 插入超链接在HTML语言中 和标记用于设置网页中的超链接 href属性指明被超链接的文件地址 格式如下 超链接文本用于表示超链接的文本一般显示为蓝色并且加下划线 在浏览器中 当鼠标指针指向该文本时 箭头变为手形 并在浏览器的状态栏中显示该超链接的地址 若使用图片做超链接 可使用如下格式完成 2020 2 13 18 计算机文化基础 5 使用表格在网页中插入一个表格 需要用到一组HTML标记 定义表格的有关标记如下 定义表格区域 定义表格标题 定义表格头 定义表格行 定义表格单元格 返回 2020 2 13 19 计算机文化基础 常用的标记属性中 border属性用于设置表格边框的宽度 width height属性用于设置表格或单元格的宽度 高度 cellspacing和cellpadding属性分别用于设置单元格之间的间隙和单元格内部空白 align属性用于设置表格或单元格的对齐方式 bgcolor和background属性分别用于设置表格的背景颜色和背景图像 表格属性 2020 2 13 20 计算机文化基础 9 2FrontPage2003概述 虽然使用一般的文本编辑器就可以编写HTML文档 但是使用专门的HTML编辑器或Web创作工具往往更加方便 具有 所见即所得 功能的Web页面创作工具可以使Web创作人员直接面对Web页面进行编辑修改 并且能立即看到Web页面的显示效果 FrontPage2003是微软公司开发的网页制作和网站管理工具 它是MicrosoftOffice2003的组件之一 与Office的其他组件高度融合 界面友好 功能强大 易学易用 是目前使用较为广泛的网页制作 网站管理工具之一 2020 2 13 21 计算机文化基础 9 2FrontPage2003概述 9 2 1FrontPage2003的主要功能9 2 2FrontPage2003的启动与退出9 2 3网页与网站9 2 4FrontPage2003的网页视图模式9 2 5FrontPage2003中的视图 返回 2020 2 13 22 计算机文化基础 9 2 1FrontPage2003的主要功能 FrontPage2003的主要功能是制作网页和管理站点 使用FrontPage2003可以创建新的网页 也可以打开并修改已经存在的网页 FrontPage2003提供了多种编辑网页的方式 不但可以直接修改HTML 而且可以采用 所见即所得 的方式编辑网页 还可以使用菜单命令插入各种网页元素 使用对话框修改其属性 十分灵活 返回 2020 2 13 23 计算机文化基础 在FrontPage2003中 可以很容易地插入文本 图片 表格 组件等元素 可以使用主题和样式表 共享边框 框架等管理网页的外观 还可以使用表单等元素设计出交互式网页 FrontPage2003提供了强大的站点管理功能 一组相关网页和有关文件组成一个站点 站点也是FrontPage2003对网站进行管理的基本单位 在FrontPage2003中可以轻松实现设计 管理 分析 发布和维护站点等工作 FrontPage2003的主要功能 2020 2 13 24 计算机文化基础 9 2 3网页与网站 网页是全球广域网上的基本文档 用HTML书写 通常以 htm或 html为扩展名 网页可以独立存在 但常常作为网站的一部分 网站是一组相关网页和有关文件的组合 一般有一个特殊的网页作为浏览的起始点 称为主页 Homepage 用来引导用户访问其他网页 网站通常位于Web服务器上 客户机通过网络向Web服务器发送请求 Web服务器响应客户机的请求 并使用HTTP协议将网页和有关文件通过网络传送回客户机 客户机端使用网页浏览器就能看到网页的内容了 2020 2 13 25 计算机文化基础 网页与网站 在FrontPage2003中 可以建立和编辑独立的网页 也可以设计和管理站点 在站点中可以包含大量网页和各种文件 甚至可以包含子站点 而且只有在使用站点时 FrontPage2003的许多特性才有效 通常 在FrontPage2003中建立的站点需要发布到Internet中的Web服务器上 成为真正意义上的网站 Internet上的用户才能访问 有时 可以在同一台计算机上安装Web服务器端软件 从而将站点发布到本机进行测试 用FrontPage2003也可以建立基于本地硬盘的站点 这种站点以本机文件夹的形式存在 不需要发布到服务器 这时 需要服务器支持的功能是不可用的 返回 2020 2 13 26 计算机文化基础 9 2 4FrontPage2003的网页视图模式 FrontPage2003提供了四种网页视图模式 设计视图是打开网页首先进入的视图 可以在其中输入文本 插入图片 插入表格等 也可以任意进行修改 代码视图中 用户可以查看 编写和编辑HTML标记 预览视图中可以看到网页在Web浏览器中的大体显示情况 FrontPage2003新增的拆分视图将窗口工作区拆分成上 下两部分 上半部分是代码区 下半部分是设计区 无论对哪一个区域进行修改 另一个区域都会做出相应的改变 返回 2020 2 13 27 计算机文化基础 9 2 5FrontPage2003中的视图 FrontPage2003提供了以下几种视图以方便用户对站点的管理 用户可以在不同的视图中进行相应的操作 1 网页视图2 文件夹视图3 远程网站视图4 报表视图5 导航视图6 超链接视图7 任务视图 2020 2 13 28 计算机文化基础 9 3网页制作 Web站点的开发 首先应当根据其用途进行规划 确定站点结构 在本地磁盘上创建站点 然后再建立网页 那么什么是 站点 呢 其实站点就是一组相关网页和其他文件的集合 这些网页在Internet中表现为一个完整结构就称为 站点 在FrontPage2003中 站点以一个特殊文件夹的形式存储 2020 2 13 29 计算机文化基础 9 3网页制作 9 3 1创建站点9 3 2网页编辑9 3 3插入对象9 3 4创建超链接 返回 2020 2 13 30 计算机文化基础 9 3 1创建站点 使用FrontPage2003的模板和向导 用户可以轻松地创建出各种用途和风格的站点 新建站点时 可以根据自己的需求选择不同的模板和向导 对于不同的模板和向导 其新建站点的步骤略有不同 下面以 由一个网页组成的网站 模板为例 介绍新建站点的方法 1 单击 文件 菜单的 新建 命令 在 新建 任务窗格中选择 新建网站 中的 由一个网页组成的网站 2 在弹出的 网站模板 对话框的 指定新网站的位置 框中输入新站点要保存的位置 也可使用 浏览 按钮指定新站点的位置 2020 2 13 31 计算机文化基础 3 单击 确定 按钮 新建站点如下图所示 返回 该站点只有一个空白网页index htm 主页 和用于存储图片的文件夹images 你可以打开index htm进行编辑 也可以进一步根据网站规划创建文件夹和新建其他网页 选择 文件 菜单的 退出 命令 可以关闭FrontPage2003 2020 2 13 32 计算机文化基础 9 3 2网页编辑 1 新建网页2 打开 保存网页3 预览网页4 设置文字格式5 设置段落格式6 设置网页属性 返回 2020 2 13 33 计算机文化基础 网页编辑 要根据 网页模板 创建一个新的网页 可以按下面的步骤 1 单击 文件 菜单的 新建 命令 在 新建 任务窗格中选择 新建网页 中的 其他网页模板 2 在弹出的 网页模板 对话框中选择所需的网页模板 可以在 说明 及 预览 区域查看该模板的说明及预览图 3 单击 确定 按钮 系统新建一个基于所选模板的网页 4 单击 文件 菜单 选择 保存 命令 弹出 另存为 对话框 在此对话框中 输入文件名进行保存 返回 1 新建网页 2020 2 13 34 计算机文化基础 在FrontPage2003中 编辑某个网页之前 需要先打开该网页 打开网页的方法有多种 常用的有以下几种 1 使用 文件 菜单的 打开 命令 或 常用 工具栏的 打开 按钮 在弹出的 打开文件 对话框中选择相应的网页 2 如需要打开的文件已在打开的网站中 在文件夹视图中双击该网页图标即可将其打开 实际上 在其他视图中双击网页图标 同样会打开指定网页 要保存一个网页 可以使用 文件 菜单的 保存 命令 或 常用 工具栏的 保存 按钮 如需另存可使用 文件 菜单的 另存为 命令 返回 2 打开 保存网页 网页编辑 2020 2 13 35 计算机文化基础 网页制作过程中 用户可以切换到 预览 视图预览网页 也可以使用 文件 菜单的 在浏览器中预览 命令预览网页 使用后者 系统会打开浏览器显示网页 如果该网页尚未保存 会弹出对话框提示用户保存网页 返回 3 预览网页 网页编辑 2020 2 13 36 计算机文化基础 4 设置文字格式 同其他MicrosoftOffice组件一样 在网页中可以输入文字 复制 剪切和粘贴文字 设置文字格式 查找和替换文字等 在FrontPage2003中 对文字的格式提供了相当完整的设定功能 文字格式的变化也因此多种多样 可以使用工具栏上的工具按钮或菜单命令快速地改变文字的外观 设置文字格式的一般操作步骤是 选中文字 单击 格式 菜单的 字体 命令 在弹出的 字体 对话框中设置字体的各种属性 也可以使用 格式 工具栏中相应的命令按钮 虽然可以设置各种美观的字体 但是由于用户只能使用本地计算机中安装的字体显示网页 因此还是使用常见的字体为好 返回 网页编辑 2020 2 13 37 计算机文化基础 5 设置段落格式 文字段落的格式编排对于一个网页的外观是至关重要的 FrontPage2003通过按Enter键划分段落 值得注意的是 段落之间插入了一个空行 如果只是需要换行 而不是另起一个段落 按Shift Enter键即可 实际上 按Enter键在HTML代码中插入的是标记 而按Shift Enter键则插入的是标记 段落格式主要包括对齐方式 缩进和段落间距等 设置段落格式的一般方法如下 将插入点移动到要设置格式的段落中 或是选中该段落 单击 格式 菜单的 段落 命令 在弹出的 段落 对话框中进行各种段落格式属性的设置 返回 网页编辑 2020 2 13 38 计算机文化基础 6 设置网页属性 网页属性包括网页的标题 格式 页边距等 要设置网页属性 用户可以使用 文件 菜单的 属性 命令 或者在网页的任意地方单击鼠标右键 在弹出的右键菜单中选择 网页属性 命令 FrontPage2003将显示 网页属性 对话框 网页编辑 2020 2 13 39 计算机文化基础 1 常规 属性 要设置网页的 常规 属性 单击 网页属性 对话框的 常规 选项卡 如下图所示 标题 框用于给出网页的标题 网页标题将显示在浏览器的标题栏中 背景音乐 框用于指定网页的背景音乐 当用浏览器打开网页时 将自动播放背景音乐 背景音乐区域的 位置 框用于指定声音文件的位置 用户可以使用 浏览 按钮选择一个声音文件 循环次数 框用于指定声音要反复播放的次数 如果选中 不限次数 复选框 表示一直不停地播放 网页编辑 2020 2 13 40 计算机文化基础 2 格式 属性 要设置网页的背景 颜色 可以使用 网页属性 对话框的 格式 选项卡 如下图所示 用户可以选中 背景图片 复选框 指定一个图片作为网页的背景图片 如果要将图片按水印形式添加 需要选中 使其成为水印 复选框 通过单击相应的下拉列表框 可以设置网页的背景颜色 文本颜色以及超链接文字的颜色 当同时设置背景图片和背景颜色时 背景图片将覆盖背景色 返回 网页编辑 2020 2 13 41 计算机文化基础 9 3 3插入对象 1 插入水平线2 插入图片3 插入字幕4 插入交互式按钮5 插入站点计数器 返回 2020 2 13 42 计算机文化基础 1 插入水平线 在网页中输入文本内容后 还可在不同的段落 行之间添加水平线 水平线将网页分割成几个部分 使得网页更具条理性 具体操作步骤如下 1 在准备插入水平线的位置设置插入点 2 单击 插入 菜单的 水平线 命令 插入水平线 要修改水平线的外观 可以双击水平线 打开 水平线属性 对话框 宽度 框用于设置水平线的宽度 高度 框用于设置水平线的高度 对齐方式 用于设置水平线在网页内水平对齐的方式 颜色 列表框用于设置水平线的颜色 选中 实线 无阴影 复选框时 水平线将被设成实心线 要为线条指定自定义样式或其他格式 可以使用 样式 按钮进行设置 返回 2020 2 13 43 计算机文化基础 2 插入图片 图片可以使网页变得生动活泼 并能吸引用户的注意 1 图片文件的格式在WWW上常用的图像文件格式是JPEG和GIF 它们都是压缩的图像格式 文件的信息量小 适合于网络传输 因此被广泛地应用在Web站点的设计中 GIF GraphicalInterchangeFormat 图形交换格式 采用无损压缩方式 其主要特征是支持动画 透明度 图形渐进 但GIF图像包含的颜色不能超过256种 JPEG JointPhotographExpertGroup 联合图像专家组 格式是专为有几百万种颜色的照片和图形设计的 它采用有损压缩方式 以牺牲图片质量换取大的压缩比例 JPEG格式支持真彩色 24位色 并且在压缩大的图像方面已被证明很有效 2020 2 13 44 计算机文化基础 2 插入图片 2 插入图片的步骤 1 移动光标至插入图像的位置 2 单击 插入 菜单的 图片 命令 在子菜单中选择 来自文件 弹出 图片 对话框 3 利用 图片 对话框选取需要插入的图片文件 单击 插入 按钮 即可将图片插入网页中 3 设置图片属性在 图片属性 对话框的 外观 选项卡中 可以设置图片的环绕方式 布局 大小等 插入图片 2020 2 13 45 计算机文化基础 4 编辑图片可以使用 视图 菜单的 工具栏 命令中的 图片 子命令 使 图片 工具栏显示在屏幕上 利用图片工具栏 可以对图片的亮度 对比度进行调整 可以旋转 翻转图片 对图片进行剪裁 设置透明颜色等操作 5 保存图片插入图片后保存网页 如果图片不在网站文件夹中 将出现 保存嵌入式文件 对话框 如果图片在网站文件夹中 就不会出现此对话框 返回 插入图片 2020 2 13 46 计算机文化基础 3 插入字幕 在制作网页时 可以将网页中的文字做成由左至右 或由右至左移动的动态效果 使网页更加形象生动 具体操作步骤如下 1 将插入点设置在要插入移动字幕的位置或者选中作为移动字幕的文本 单击 插入 菜单的 Web组件 命令 弹出 插入Web组件 对话框 在对话框的 组件类型 列表框中选择 动态效果 在 选择一种效果 列表中选择 字幕 单击 完成 按钮 字幕属性 对话框 2020 2 13 47 计算机文化基础 2 如果已经选择了作为移动字幕的文本 此文本就会出现在 文本 框中 如果没有选择文本 可在 文本 框中输入作为移动字幕的文本 字幕属性 对话框如下图所示 插入字幕2 2020 2 13 48 计算机文化基础 3 方向 区域用于指定文本的移动方向 速度 区域用于指定文字的滚动速度 延迟 框中的数值表示字幕滚动一步的时间间隔是多少毫秒 数量 框中的数值表示字幕滚动一步的距离是多少像素 表现方式 区域用于指定文字的表现方式 选中 重复 区域的 连续 复选框 移动字幕将连续滚动 若要设置字幕滚动有限次数 可以取消选中 连续 复选框并输入字幕重复的次数 4 单击 确定 按钮 即可插入字幕 返回 插入字幕3 2020 2 13 49 计算机文化基础 4 插入交互式按钮 交互式按钮是一个动态按钮 当用户将鼠标指向交互式按钮时 交互式按钮会改变颜色或形状 默认情况下 交互式按钮是一个带有彩色方框的文字按钮 也可以应用图片创建交互式按钮 1 将插入点设置在要插入交互式按钮的位置 单击 插入 菜单的 Web组件 命令 打开 插入Web组件 对话框 在对话框的 组件类型 列表框中选择 动态效果 在 选择一种效果 列表中选择 交互式按钮 单击 完成 按钮 打开对话框 2020 2 13 50 计算机文化基础 2 设置按钮字体图像 3 单击 确定 按钮 即可插入交互式按钮 返回 插入交互式按钮2 3 2020 2 13 51 计算机文化基础 5 插入站点计数器 1 单击 插入 菜单的 Web组件 命令 打开 插入Web组件 对话框 在对话框的 组件类型 列表框中选择 计数器 在 选择计数器样式 列表中选择一种样式 单击 完成 按钮 打开 计数器属性 对话框 2 设置计数器属性 3 单击 确定 按钮 插入站点计数器 返回 2020 2 13 52 计算机文化基础 9 3 4创建超链接 Web网页的强大之处就在于其超链接 使用超链接能够将Internet中的信息有机地组织起来 使人们在丰富多彩的WWW世界轻松地漫游 在浏览器中 超链接通常表现为与普通文本或图片不同的特点 将鼠标移到一个超链接上方时 鼠标指针会变成手形 同时 与这个超链接相对应的URL会在窗口底部的状态栏显示出来 2020 2 13 53 计算机文化基础 创建超链接 1 创建文本超链接2 创建图片超链接3 使用书签超链接4 创建电子邮件超链接5 创建下载文件超链接 返回 2020 2 13 54 计算机文化基础 1 创建文本超链接 文本超链接是指在文本上定义的超链接 单击文本超链接 会自动跳转到指向的链接目标 创建文本超链接的具体操作步骤如下 1 选定要定义超链接的文本 从 插入 菜单中选择 超链接 命令 或单击 常用 工具栏上的 超链接 按钮 打开 插入超链接 对话框 如下图所示 2020 2 13 55 计算机文化基础 2 在 插入超链接 对话框中选择要链接的目标网页 单击 确定 按钮 插入超链接 可以看到所选定的文本变为蓝色 并且带有下划线 说明选定的文本已经被设置为超链接文本 保存网页 在浏览器中预览效果 当鼠标移至链接文字时 鼠标指针变成手形 此时单击鼠标就跳转到目标网页 创建文本超链接 2020 2 13 56 计算机文化基础 图片超链接是指在图片上创建的超链接 图片超链接比文本超链接显得更加生动活泼 单击图片超链接 会自动跳转到指向的链接目标 可以将整个图片设置为超链接 也可以为图片分配一个或多个热点 热点是图片上的超链接区域 包含热点的图片称为图像映射 用户单击热点区域可以转到相应的链接目标 2 创建图片超链接 2020 2 13 57 计算机文化基础 1 选定要定义超链接的图片 从 插入 菜单中选择 超链接 命令 或单击 常用 工具栏上的 超链接 按钮 打开 插入超链接 对话框 2 在对话框中选择要链接的目标网页 单击 确定 按钮 即可插入超链接 保存网页 在浏览器中预览效果 当鼠标移至链接图片时 鼠标指针变成手形 此时单击鼠标就跳转到目标网页 1 创建图片超链接 2020 2 13 58 计算机文化基础 热点可以是图片上具有某种形状的一块区域或文本 当用户单击该区域或文本时 超链接目标会显示在Web浏览器中 在FrontPage2003中 热点的形状可以是长方形 圆形或多边形 例如我们通过山东省地图浏览山东省各城市的民俗风情 当鼠标移至地图上的各个城市时 鼠标指针变为手形 单击后打开描述该城市民俗风情的页面 2 为图片添加热点 2020 2 13 59 计算机文化基础 为图片添加热点 具体操作步骤如下 1 选择需要添加热点的图片 2 在 图片 工具栏中 单击长方形 圆形或多边形热点按钮匹配需要的形状 3 在图片上 采用鼠标拖动操作画出所选形状 画多边形时 可单击多边形的第一个角 然后依次单击多边形其他角的位置 最后双击完成多边形 4 释放鼠标 弹出 插入超链接 对话框 按照插入超链接中所讲方法创建超链接即可 2020 2 13 60 计算机文化基础 为图片添加热点 重复步骤 2 3 4 在图片上依次创建超链接到其他网页 当鼠标移动到热点区域时 光标变为手形 如下图所示 单击鼠标 超链接的目标网页就会显示在Web浏览器窗口中 返回 2020 2 13 61 计算机文化基础 3 使用书签超链接 对于网页的超链接 往往使用户跳转到目标网页的顶端 应用书签能够更严格地控制用户到达网页内的某个具体位置 书签是网页中被标记的位置或被标记的文本 单击书签超链接 将直接跳转到该书签所在的位置 1 插入书签 1 选中作为书签的文本 或将光标定位在要插入书签的位置 2 选择 插入 菜单的 书签 命令 弹出 书签 对话框 如右图所示 所选文本自动出现在 书签名称 框中 3 单击 确定 按钮 插入书签 可以看到所选文本下方出现虚线 2020 2 13 62 计算机文化基础 2 创建书签超链接 1 选定要定义超链接的文本或图片 2 从 插入 菜单中选择 超链接 命令 弹出 插入超链接 对话框 如下图所示 在对话框的 链接到 栏单击 本文档中的位置 选择要链接的书签 3 单击 确定 按钮 插入书签超链接 保存网页 在浏览器中预览效果 单击页面中的书签超链接 页面会跳转到书签的位置 2020 2 13 63 计算机文化基础 4 创建电子邮件超链接 电子邮件超链接为用户发送电子邮件提供了极大的方便 单击电子邮件超链接后 允许用户书写电子邮件内容 并发往指定的地址 具体操作步骤如下 1 选择作为电子邮件超链接的文本或图片 2 从 插入 菜单中选择 超链接 命令 弹出 插入超链接 对话框 3 在对话框的 链接到 栏单击 电子邮件地址 在 电子邮件地址 框中输入所需电子邮件地址 还可以在 主题 框中键入电子邮件的主题 4 单击 确定 按钮 完成电子邮件超链接的创建 返回 2020 2 13 64 计算机文化基础 5 创建下载文件超链接如果要在网站中提供资料下载功能 就需要创建下载链接 网站中每个用于下载的文件要对应一个下载链接 具体操作步骤如下 1 选择作为文件超链接的文本或图片 2 从 插入 菜单中选择 超链接 命令 弹出 插入超链接 对话框 在对话框中选择要下载的文件 3 单击 确定 按钮 完成文件超链接的创建 保存网页 在浏览器中预览效果 单击创建的文件超链接时 弹出 文件下载 对话框 如下图所示 用户可以根据需要打开或保存文件 返回 2020 2 13 65 计算机文化基础 9 4网页布局 网页的布局设计 是将文字 图片等网页元素 根据特定的内容和主题 在网页所限定的范围中进行视觉的关联与配置 从而将设计意图以视觉形式表现出来 网页的布局一般使用表格或框架来实现 2020 2 13 66 计算机文化基础 9 4网页布局 9 4 1创建和使用表格9 4 2创建框架9 4 3创建框架超链接 返回 2020 2 13 67 计算机文化基础 9 4 1创建和使用表格 表格由单元格构成的行和列组成 单元格中可以插入文本 图片以及其他对象 利用表格可以有条理地排列数据或组织网页布局 表格的行 列和单元格都可以进行复制 粘贴 在表格中还可以插入表格 一层层的表格嵌套使设计更加方便 FrontPage2003提供了与Word字处理软件类似的表格处理功能 在网页中可以轻松地创建和编辑表格 2020 2 13 68 计算机文化基础 1 创建表格 创建表格有以下三种常用方法 1 使用 表格 菜单的 插入 子菜单中的 表格 命令 可以对插入的表格进行精确的设置 包括行和列的数目 对齐方式 单元格间距 单元格衬距 边框粗细和背景等 2 使用 常用 工具栏的 插入表格 按钮 快速插入表格 3 使用 表格 菜单的 绘制表格 命令 手动绘制表格 2020 2 13 69 计算机文化基础 2 设置表格属性插入表格后 打开如下图所示的 表格属性 对话框 可以设置表格属性 1 设置表格行数和列数 2 设置表格布局 包括设置表格的对齐方式 浮动 宽度等 3 在 粗细 数值框中输入数值 即可设置表格边框的粗细 4 在背景区域 可以通过 颜色 框设置单一色彩的表格背景 也可选中 使用背景图片 复选框 用 浏览 按钮设置图片作为表格的背景 2020 2 13 70 计算机文化基础 3 设置单元格属性将光标放置在需要设置属性的单元格中 使用 表格 菜单的 表格属性 子菜单中的 单元格 命令 打开如下图所示的 单元格属性 对话框 设置单元格属性 在 背景 区域中可以设置单元格的背景颜色 或使用图片作为背景 在 布局 区域可以设置水平 垂直对齐方式 指定宽度 高度 标题单元格 设置行跨距 列跨距等 在 边框 区域中可以设置单元格边框的颜色 亮边框 暗边框 2020 2 13 71 计算机文化基础 创建表格后 可以对表格单元格 行和列的布局和结构进行调整 以满足不同的需要 如调整行 列或单元格 插入行 列或单元格 删除行 列或单元格 合并 拆分单元格 平均分布行高 列宽 设置单元格属性等 返回 4 调整表格 2020 2 13 72 计算机文化基础 9 4 2创建框架 框架的使用是进行网页布局设计的一种重要手段 框架将浏览器窗口划分为几个区域 每个框架中都可以显示一个独立的网页 浏览器窗口中显示的网页实际是这些框架的集合 因此被称为框架网页 框架网页并不包含显示的内容 只是记录了该框架网页包含几个框架 其拆分方式以及每个框架中显示哪个网页 与其他网页的超链接 等 2020 2 13 73 计算机文化基础 在FrontPage2003中 可以使用框架网页布局模板轻松创建框架网页 具体操作步骤如下 1 单击 文件 菜单的 新建 命令 在 新建 任务窗格中选择 新建网页 中的 其他网页模板 2 在弹出的 网页模板 对话框中 切换到 框架网页 选项卡 选择所需的模板 如 目录 模板 可在 说明 及 预览 区域查看该模板的说明及预览图 1 创建框架网页 2020 2 13 74 计算机文化基础 3 单击 确定 按钮 完成框架网页的创建 如下图所示 4 每个框架中 单击 设置初始网页 按钮可以建立与已经存在网页的超链接 从而在此框架中显示该网页 单击 新建网页 按钮可以建立显示在该框架中的新网页 创建框架网页 在该图窗口底部新增了 无框架 视图模式 可以为不支持框架的浏览器创建替代网页 2020 2 13 75 计算机文化基础 保存框架网页需要保存框架和各个框架中的网页 例如 使用 目录 模板创建的框架网页需要保存作为容器的框架网页和分别显示在两个框架中的两个网页 具体操作步骤如下 1 使用 文件 菜单的 保存 命令 或单击 常用 工具栏的 保存 按钮 弹出 另存为 对话框 2 在 另存为 对话框右边的框架网页预览图中 深蓝色的区域或边框指明了框架中正在保存的网页 进行相应设置后 单击 保存 按钮 该网页保存完毕 3 重复步骤 2 直至所有的框架网页都保存完毕 如使用 目录 模板创建的框架网页需要保存三次 如果某个框架网页通过单击 设置初始网页 按钮建立与已经存在网页的超链接 则不会弹出 另存为 对话框保存该网页 2 保存框架网页 2020 2 13 76 计算机文化基础 当使用模板创建的框架结构不能满足需要时 可以通过拆分框架制作出更为复杂的框架网页 具体操作步骤如下 1 选择要拆分的框架 在 框架 菜单中选择 拆分框架 命令 打开 拆分框架 对话框 4 根据需要选择 拆分为列 或 拆分成行 选项 单击 确定 按钮完成拆分 也可按住Ctrl键拖动框架的边框实现拆分框架 3 拆分框架 2020 2 13 77 计算机文化基础 可以从框架结构中删除指定的框架 此时系统只是把框架从框架网页中删去 而此框架中的网页文件仍然存在 删除了一个框架后 其余框架会加宽以填充删除框架留下的空间 若框架网页只有一个框架 则不能删除该框架 删除框架的具体操作方法是 选择要删除的框架 在 框架 菜单中选择 删除框架 命令 4 删除框架 2020 2 13 78 计算机文化基础 在框架网页中可以设置框架的大小 框架的边距和在框架中是否显示滚动条等属性 具体操作方法是 选择框架 从 框架 菜单中选择 框架属性 命令 弹出 框架属性 对话框 如右图所示 在 名称 框中输入新的框架名称 即可对该框架进行重命名 在 框架大小 区域中设置宽度和高度 可以改变框架的大小 也可用鼠标拖动框架的边框直接调整框架的宽度和高度 返回 5 设置框架属性 2020 2 13 79 计算机文化基础 9 4 3创建框架超链接 框架超链接的使用使网页之间的组织更加灵活 有效 1 创建框架超链接若要设置框架超链接 执行下列操作 1 选择要创建超链接的文字或图片 从 插入 菜单中选择 超链接 命令 弹出 插入超链接 对话框 2 在 插入超链接 对话框中选择要链接的目标网页 单击 目标框架 按钮 出现 目标框架 对话框 3 在 当前框架网页 区域中单击要用作目标的框架 单击 确定 按钮 返回到 插入超链接 对话框 在对话框底部标签 目标框架 后显示设置的目标框架名称 4 单击 确定 按钮 完成框架超链接的创建 2020 2 13 80 计算机文化基础 2 使用特殊的目标框架在指定目标框架时 除了当前框架外 还提供了一些特殊的框架来创建不同效果的目标框架 这些特殊框架位于 目标框架 对话框的 公用的目标区 区域中 有以下几种 相同框架 将链接的网页显示在包含该超链接的同一个框架内 整页 将框架展开为整个窗口 显示链接网页 新建窗口 打开另外一个新窗口 显示链接网页 父框架 在当前框架的上层框架内显示链接网页 返回 2020 2 13 81 计算机文化基础 9 5创建表单页面 表单是Web服务器与客户交互的手段 表单的作用就是收集用户的输入信息 从而实现网站与用户的交互 例如 用户可以用表单收集用户的个人资料 也可以用表单设计一个订货单 让用户指定要购买的商品名称 型号 数量等 2020 2 13 82 计算机文化基础 9 5创建表单页面 9 5 1插入表单域9 5 2提交表单 返回 2020 2 13 83 计算机文化基础 9 5 1插入表单域 表单中至少要有一个供用户输入信息的域 一个用来把信息发送给服务器的 提交 按钮 以及一个用来清除域中现有内容的 重置 按钮 当用户在表单中输入信息 单击 提交 按钮后 这些信息将被发送到服务器 服务器端程序将对这些信息进行处理 使用 插入 菜单的 表单 子菜单的 表单 命令 将插入一个非常简单的表单 该表单只有 提交 和 重置 两个按钮 但这是所有复杂表单的基础 可以在其中插入更多的表单域 在FrontPage2003中 可以插入文本框 文本区 复选框 选项按钮 分组框 下拉框 按钮 高级按钮等表单域 2020 2 13 84 计算机文化基础 文本框用于让用户输入一行文字 将光标放在要插入文本框的位置 使用 插入 菜单的 表单 命令 再选择 文本框 子命令 即可插入一个文本框 如下图所示 打开 文本框属性 对话框 可以设置文本框的属性 文本框属性 对话框中 名称 用来设置该文本框的名称 初始值 用于设置文本框内一开始显示的内容 宽度 用来设置文本框所能输入字符的个数 密码域 用来设置是否让文本框内输入的字符可见 插入文本框时 若插入点在一个已有的表单内 就把一个新的文本框插入到这个表单中 若插入点在表单之外 则创建的文本框包含 提交 和 重置 按钮 1 插入文本框 2020 2 13 85 计算机文化基础 文本区和文本框类似 都用于输入文本 不同之处在于文本区中可以接受多行文本 当文本区中输入内容较多时 可以拖动上下滚动条 将光标放在要插入文本区的位置 使用 插入 菜单的 表单 命令 再选择 文本区 子命令 即可插入一个文本区 如下图所示 文本区属性与文本框属性基本相同 还可以在 行数 框中设置该文本区包含的文本行数 2 插入文本区 2020 2 13 86 计算机文化基础 复选框是提供给用户的一个选项 一般彼此独立的多个复选框组成一组 用户可以在其中任意选择 也可以同时选中所有项 或一个都不选 将光标放在要插入复选框的位置 使用 插入 菜单的 表单 命令 再选择 复选框 子命令 插入一个复选框 最后在复选框旁键入文字进行说明 如果需要插入多个复选框 重复以上操作即可 复选框属性 对话框中 名称 用于设置复选框的名称 值 用于返回复选框是否已选中 初始状态 选项按钮组用于设置初始状态下该复选框是否被选中 默认为 未选中 Tab键次序 表示当按下Tab键切换输入焦点时 该复选框所在的次序 3 插入复选框 2020 2 13 87 计算机文化基础 选项按钮与复选框类似 不同的是一组选项按钮只能选中其中的一个 其外形是圆的 将光标放在要插入选项按钮的位置 使用 插入 菜单的 表单 命令 再选择 选项按钮 子命令 插入一个选项按钮 最后在选项按钮旁键入文字进行说明 如果需要插入多个选项按钮 重复以上操作即可 如下图所示 插入四个选项按钮供用户评价自己的网页 选项按钮属性 对话框中 组名称 用来设置此选项按钮所属组的名称 如果把多个选项按钮编成一组 必须使它们的组名称相同 4 插入选项按钮 2020 2 13 88 计算机文化基础 5 插入分组框如果要将一组相关的控件或文本与网页或当前表单中的其他信息分开 可以使用分组框 将光标放在要插入分组框的位置 使用 插入 菜单的 表单 命令 再选择 分组框 子命令 即可插入分组框 分组框属性 对话框中 标签 用来设置分组框的名称 对齐 用来设置分组框标签的对齐方式 6 插入下拉框下拉框用于从一个列表中选择一项或几项 从功能的角度讲 可以用一组复选框或一组单选按钮来实现 但下拉框占用的网页空间相对较小 将光标放在要插入下拉框的位置 使用 插入 菜单的 表单 命令 再选择 下拉框 子命令 即可插入下拉框 下拉框属性 对话框中 单击 添加 按钮 将打开 添加选项 对话框 可以设置选项名称 指定选项的初始状态是选中还是未选中 2020 2 13 89 计算机文化基础 7 插入按钮和高级按钮一个表单中至少要有一个 提交 按钮和一个 重置 按钮 提交 按钮的作用是把表单中的数据提交给Web服务器的表单处理程序 重置 按钮的作用是把表单中的数据清空 以便重新填写 将光标放在要插入按钮的位置 使用 插入 菜单的 表单 命令 再选择 按钮 子命令 即可插入按钮 在 按钮属性 对话框中可以设置按钮的名称 值 标签 按钮类型等属性 按钮可以设置为 提交 重置 或普通按钮 对于 提交 和 重置 按钮来说 它们的动作是默认的 高级按钮的插入与属性设置与普通按钮基本相同 但是高级按钮具备更加精确的控制按钮属性的能力 返回 2020 2 13 90 计算机文化基础 9 5 2提交表单 用户结束表单操作后 单击 提交 按钮 当 提交 按钮设置了表单结果送至何处后可以正常处理 表单处理程序对表单的处理可以是将表单结果保存为文件 或将表单结果发送至一个电子邮件地址 1 将表单结果保存为文件在表单上单击鼠标右键