《计算机应用基础教程 教学课件 作者 2000版 教学课件 作者 房华 第7章FrontPage 2000网页制作》由会员分享，可在线阅读，更多相关《计算机应用基础教程 教学课件 作者 2000版 教学课件 作者 房华 第7章FrontPage 2000网页制作（62页珍藏版）》请在金锄头文库上搜索。
1、计算机应用基础 2000版 FrontPage2000网页制作 第7章FrontPage2000网页制作 第7章FrontPage2000网页制作 7 1FrontPage2000概述7 2网页制作7 3网页布局7 4使用表单7 5动态效果网页7 6发布站点 第7章FrontPage2000网页制作 网页制作就是根据网页效果图 把它实现成浏览器中可以浏览的网页 FrontPage2000支持所见即所得的编辑方式 可以方便快捷的在网页中加入文字 图像 加入表格 加入图象 甚至可以加入声音 动画和电影 FrontPage2000功能强大 操作简单 使用方便 并且Microsoft公司将其集成到Of
2、fice2000中 这样FrontPage不仅可以利用自身的强大功能 还可以充分利用Office2000中其他软件的功能 使得开发Web更加轻松自如 7 1FrontPage2000概述 7 1 1FrontPage2000的工作界面打开FrontPage2000窗口 主要由标题栏 菜单栏 编辑区 滚动条 状态栏等组成 FrontPage2000界面 7 1FrontPage2000概述 7 1 2FrontPage2000的网页视图FrontPage2000的网页视图分为普通方式 HTML方式和预览方式 普通方式 以所见即所得的方式进行网页的设计和修改 HTML方式 用户就可以查看 编辑修改
3、FrontPage2000自动生成的HTML代码 预览方式 用于查看页面显示效果 7 1FrontPage2000概述 7 1 3FrontPage2000的视图FrontPage2000提供了6种视图以方便用户的使用 网页视图 FrontPage2000中最常用的工作界面 网页的创建 编辑 预览等基本操作都是在此视图中进行的 文件夹视图 在此视图中 站点显示为一组文件和文件夹 可以创建 移动和删除文件或文件夹 报表视图 在此视图中 可以方便地了解当前站点的文件内容 更新链接情况 组件错误 所有文件列表及变化情况等信息 导航视图 在此视图中 可方便地观察站点的链接结构 超链接视图 将当前站点显
4、示为链接文件的一个网络 它们表示了站点中各个网页之间的相互链接关系 任务视图 任务视图主要用来创建和管理任务 用于合作开发 在视图中列出了不前站点的 任务 即当前站点中尚未完成的项目 7 2网页制作 网页 网页是互联网上的基本文档 用HTML 超文本标记语言 书写 网页可以是站点的一部份 也可以独立存在 站点 是一组相关网页和其他文件的集合 这些文件通过超链接形成一个完整的结构 就称为 站点 在FrontPage2000中 站点是磁盘上的一个特殊文件夹 要开发Web站点 首先应当根据其用途规划站点 确定站点的结构 并在本地磁盘上创建站点 然后再建立网页 并将网页发布到网站上 7 2网页制作 7
5、 2 1创建站点 在 文件 菜单上 指向 新建 然后单击 站点 打开新建对话框 在 站点站点 列表中 选择 个人站点 在 指定新网站的位置 框中 键入或选择新站点的名称 myweb 创建好了新站点 打开文件夹列表或者网站文件夹 多了两个新文件夹 一个叫 images 的文件夹 是用来保存本网站中的图片文件的 还有一个叫 private 的文件夹 为了方便管理 也可以自己添加一些文件夹用来存放不同板块的网页文件 注意 凡是添加的文件夹 或者是保存在文件夹里面的所有东西 都必须是以英文命名的 否则会出现连接错误而不能浏览 7 2网页制作 7 2 2网页编辑1 HTML基础知识HTML Hypert
6、extMarkupLanguage 称为 超文本标记语言 HTML文件是扩展名为 htm或 html的纯文本文件 即网页的源文件就是一个普通的文本文件 形式 控制文字下面是HTML文档的基本结构 页面标题正文内容 7 2网页制作 2 新建网页 在 文件 新建 网页 出现 新建 对话框 在 常规 选项卡中 选择所需的模板 如果要建一个空白网页 可选中 普通网页 模板 单击 确定 按钮 系统新建一个基于所选模板的网页 新建的网页显示在FrontPage2000窗口中 可以对其进行编辑修改等 单击 文件 菜单 选择 保存文件 命令 弹出 另存为 对话框 在此对话框中 单击 更改 按钮修改网页标题 在
7、 文件名 文本框中输入网页文件名 如index htm 设置完成后单击 保存 按钮 单击 视图 框中的 导航 图标 在 文件夹列表 中拖动新建网页到站点的结构图 将其置入相应位置 此时 双击该网页图标可切换到网页视图 若网页中包含导航栏 拖动网页时导航栏会自动更新链接关系 7 2网页制作 3 打开网页在FrontPage2000中 打开网页的方法有多种 常用的操作步骤如下 在FrontPage2000窗口中 单击工具栏中的 文件夹列表 按钮 在文件夹列表窗口中 找到要编辑的网页 然后双击网页图标 即可打开网页 实际上 在其他视图中双击网页图标 同样会打开指定网页 7 2网页制作 4 设置文字格
8、式文字格式包括字体 字形 大小 颜色和修饰效果等 设置方法和字处理软件Word2000类似 文字所使用的HTML标记 1 标题文字例如 标题一号标题二号标题三号标题四号标题五号标题六号在浏览器中看到右图所示效果 章节标题使用标记 标记从到分六级 字号逐渐减小 要成对出现 7 2网页制作 2 文字大小 3 文字颜色 4 定义字体语法 需要同时设置以上三个属性时 可以放在同一个标记中 例如 计算机文化基础在浏览器中看到下图所示效果 7 2网页制作 5 修饰文字对于文字还有一些常用的修饰 语法 斜体 加粗 下划线 上标 下标 7 2网页制作 5 设置段落格式分段 按回车键Enter 换行 按Shif
9、t Enter键 或者在 插入 菜单中 单击 换行符 选择 普通换行符 设置段落格式的方法和字处理软件Word2000类似 文字布局控制对应的HTML标记 1 段落语法 2 换行语法 不允许换行 有结束标志 把开始和结束标记之间的文本作为一行 7 2网页制作 3 文字对齐使段落 标题文字对齐 有三种方法 设置 align 属性为left center right 分别控制文本居左 居中 居右对齐 可以直接使用 比如 你好 可以设置 你好 居中对齐 可为标记设置 align 属性 属性值有 left center right 可为标记设置 align 属性 属性值有 left center ri
10、ght例如 计算机概述计算机是一种按照预先存储的程序 自动 高速 精确的进行大量数值机算和各种信息处理 传送 存储的现代化智能电子设备 计算机特点运算速度快计算精度高具有逻辑判断和记忆能力高度自动化和灵活性 7 2网页制作 显示结果 7 2网页制作 6 设置网页属性网页的属性包括网页的标题 位置 背景 页边距等 在网页视图模式下 右键单击网页 单击快捷菜单中的 网页属性 可进行各项属性设置 1 常规 选项 标题 文本框中输入网页的标题 背景音乐 中指定网页的背音乐 在浏览器中打开该网页时 浏览器将自动播放背景音乐 2 背景 选项选中 背景图片 复选框 指定一个图片为网页的背景图片 单击相应的下
11、拉列表框 设置网页的背景颜色 文本颜色以及超链接文字的颜色等 3 边距 选项在 边距 选项卡中可以设置网页的顶端页边距和左端页边距 页边距以像素数为单位 7 2网页制作 7 预览网页网页制作过程中 可以随时对网页进预览 可以转换到预览视图方式 还可以使用 文件 菜单上的 在浏览器中预览 命令 使用外部浏览器打开当前网页进行预览 7 2网页制作 7 2 3插入对象上网浏览网页时 我们会发现在网页中除了文字 数字以外 还有一些特殊的符号 各种图片及水平线等多种对象 1 水平线在网页视图模式下 插入 水平线 要修改水平线的外观 双击水平线 打开 水平线属性 对话框然后完成一项或多项下列操作 7 2网
12、页制作 l在 宽度 下 根据视窗宽度的百分比或像素值来指定水平线的宽度 l在 高度 下 输入水平线高度的像素值 l在 对齐方式 下 指定水平线在网页上的对齐方式 l在 颜色 框中 如果不要阴影线 则需为水平线选择一种颜色 l如果希望水平线以实心方式出现 则选择 实线 复选框 如果希望水平线以阴影方式出现 则请清除此复选框 如果已经选择了颜色 水平线会显示为实心 无法应用阴影效果 插入水平线的HTML标记为 不须要结束标记 语法 noshade是控制在不设置color属性的情况下无阴影显示水平线 7 2网页制作 2 图片1 图片文件的格式在WWW上 图片文件的格式很多 常用的是JPG GIF和P
13、NG三类图片文件 这三种格式的文件较小 适合网络传输 GIF文件采用无损压缩方式 最高可以包含256位颜色 主要特征是支持简单动画 透明 图形渐进等 JPG格式是专为高清晰度照片等设计的 常用于含有成千上万或上百万种颜色的相片实景图片 采用有损压缩方式 具有很高的压缩比例 从而图片文件所需存储空间小 2 插入图片的步骤 确定图片的插入点 单击 插入 菜单 图片 来自文件 图片 对话框 如果图片己存储在站点中 就直接在列表中选择图片 否则 单击 从计算机上选择一个文件 按钮或单击 使用Web浏览器来选择网页或文件 按钮 从本地计算机硬盘中或者Internet上选中图片 点击 确定 按钮 即可将其
14、插入网页中 7 2网页制作 3 设置图片属性在选定的图片上单击鼠标右键 在快捷菜单中选择 图片属性 命令 出现 图片属性 对话框 可再次对话框中进行各项属性的设置 调整图片大小的最简单方法是在网页的普通视图中直接用鼠标拖动 4 编辑图片单击图片 右击 工具栏 的空白区域 选中快捷菜单中的 图片属性 打开图片编辑工具栏 如图所示 可以对图片进行编辑 7 2网页制作 5 插入图象的HTML标记为语法 说明 src 图象文件名 指出图象的名字 包含地址信息 align left right bottom middle或top 指出图象和附近文本的对齐关系 alt 提示文字 指出如果不能显示图象 出现
15、的替代文字 width 宽度 height 高度 设置图像大小 hspace n设置图像与周围文本的左右边距 vspace n设置图像与周围文本的上下边距 border n设置图像边框宽度例如 表示显示images目录中的文件huahui gif 图象顶端对齐 如果图象不能显示 则出现替代文字 花卉基地 边框宽度为2 7 2网页制作 7 2 4创建超连接在浏览器上当光标移到某些文本或图形时变成一只小手状 就表示这是一个链接 单击就会转向这个链接所链接到的目标页 超链接是Web网页的重要技术之一 通过超链接将站点内部各个页面 互联网上各个站点连接起来 可以说 没有超链接网页就失去了其真正的意义
16、超链接的分类 从链连接目标分 外部超链接 链连接目标为另外一个网站的网页 内部超链接 链连接目标为本网站内的一个网页 页内超链接 链连接目标为本网页内的一个书签 也称锚点 从链接载体上划分 以文本方式标注的超链接 以图片方式标记的超链接 7 2网页制作 1 创建超链接利用FrontPage2000可以很方便地创建超链接指向当前网站的另一个网页 WWW中的另一个站点或E mail地址等 1 链接到已有的网页 选中要定义超链接的文本或图片 单击 常用 工具栏上的 超链接 按钮 或者从 插入 菜单中选择 超链接 命令 出现 创建超链接 对话框 在网站中的网页文件列表中选择链接的目标网页 单击 确定 按钮 7 2网页制作 2 链接到一个新建网页 在 创建超链接 对话框中单击 创建一个网页并链接到该网页 按钮 出现 新建 对话框 在 常规 选项卡中选择一种网页模板 单击 确定 按按 链按到一个新的网页 编辑此新建网页 保存网页时输入新文件的文件名 3 链接到计算机中的文件 在 创建超链接 对话框中单击 制作一个指向您计算机上文件的超链接 按钮 出现 选择文件 对话框 选择要链接的文件 单击 确定
