计算机导论教材课件.ppt

计算机导论 第11章FrontPage2003应用 第十一章FrontPage2003应用 教学目标了解FrontPage2003的基本功能熟练掌握FrontPage2003的应用 随着Internet的迅速发展 每个人都拥有自己的个人网站是未来趋势 在个人网站中 可以全面的展示自己 介绍自己的各个方面 如个人简历 兴趣爱好 专长等 在众多的网站制作软件当中 微软公司出品的FrontPage是最容易上手的 即使没有任何网站开发基础的人 通过FrontPage也可以设计出专业的网站 个人网站的制作 11 1 1案例说明本案例首先利用FrontPage2003自带的网站建立向导建立一个个人网站 然后给网站首页添加一个滚动字幕 修改左侧导航栏的样式 最后修改超链接 完善网页的其他部分 11 1 2知识点分析在本案例的制作过程中用到的操作主要包括 使用模版创建站点 插入字幕 修改导航栏样式 编辑超链接 字体设置 添加图片 表格操作 添加表单 保存等 11 1 3制作步骤 1 单击 文件 新建 在FrontPage2003的右侧打开 新建网站 任务窗格 2 在任务窗格中点击 其他网站模版 会弹出如图11 3所示的对话框 图11 3 网站模版 对话框 3 在弹出的对话框中 选择 个人网站 模版 然后在窗口右侧的 制定新网站的位置 下拉列表中直接输入网站所存放的目录和名称 或者单击 浏览 按钮 进行目录的选择 设置完成后单击 确定 按钮完成网站的创建 创建完成后会出现如图11 4所示的个人站点 4 打开index htm页面 在日期和时间组件后面按回车键 单击 插入 Web组件 在 插入Web组件 对话框中选择 动态效果 组件类型 选择 字幕 动态效果 单击 完成 按钮 5 在弹出的 字幕属性 对话框中输入字幕文本 选择 滚动条 表现方式 单击 样式 按钮 6 在弹出的 修改样式 对话框中 单击 格式 按钮 在弹出的下拉式菜单中选择 字体 在弹出的 字体 对话框中 选择合适的字体 字形和大小 选择好后单击 确定 按钮 7 双击左边的导航按钮 在弹出的 链接栏属性 对话框中选择 样式 选项卡 选择如图11 8所示的样式作为链接栏的样式 单击 确定 按钮 重复此步骤 在其他页面修改导航栏的样式 8 修改 我的收藏夹 下面的子项目的名字为一个适当的名字 选中名字单击右键 在弹出式菜单中选择 超链接属性 在 编辑超链接 对话框中选择要链接到的网页 如图11 9所示 重复此步骤 为其他需要修改文字和超链接属性的地方做修改 9 打开aboutme htm页面 在该页面中删除不需要的内容 并输入一段介绍自己的文字 选中文字单击右键 在弹出式菜单中选择 字体 在 字体 对话框中选择合适的字体 字形 大小作为文字的字体属性设置 10 打开photo htm页面 双击图片库组件 在弹出的 图片库属性 对话框中选择 图片 选项卡 单击 添加 按钮 在弹出式菜单中选择 图片来自文件 11 在弹出的 打开 对话框中 选择要加入图片库中的图片文件 选择好后单击打开按钮 12 回到 图片库属性 对话框 单击 布局 选项卡 选择 水平版 布局 单击 确定 按钮 为图片库组件添加图片后 13 打开feedback htm页面 把光标放在文字 请留下您的联系方式 下面的表格内 单击 表格 插入 行或列 弹出 插入行或列 对话框 选择 行 单选按钮 设置行数为 1 在新插入行左侧的单元格中输入文字 把光标放在右侧的单元格中 单击 插入 表单 文本框 插入一个文本框 调整好文本框的大小后 14 保存网站 可以在浏览器中浏览效果 11 1 4总结个人网站是展示自己的一个门户 学会用FrontPage制作一个简单实用的个人网站是十分有必要的 网站发布到互联网上 每个人都可以看到 网页就需要设计的美观大方 色彩搭配合理 因此在设计中需要学会使用各种对象的插入和编辑 学会使用模板 背景以及配色方案修饰网页的外观 商业网站的制作 11 2 1案例说明本案例选取了某手机销售公司的商业网站 11 2 2知识点分析在页面的设计过程中 框架和表格都应用得比较多 它们可以构建一个框架网页 将页面分成几个相互联系着的区域 便于分开设计 在框架的内容网页中使用表格来进一步规划页面 综合运用框架和表格布局页面 能使页面的组织更加合理有效 11 2 3制作步骤 1 启动FrontPage2003 单击 文件 新建 在界面的右侧打开 新建网站 任务窗格 在任务窗格中点击 其他网站模版 2 在弹出的 网站模版 对话框中打开 常规 选项卡 选择 空白网站 在右侧的 制定新网站的位置 中指定创建站点要保存的位置 然后单击 确定 按钮 3 单击 文件 新建 在界面右侧弹出的 新建 任务窗格中选择 其他网页模版 4 在弹出的 网页模版 对话框中打开 框架网页 选项卡 选择 横幅和目录 然后单击 确定 按钮 将该网页保存为index htm主页面 5 切换到导航视图 把主页的名字改为 手机网站 单击 新建 按钮在主页的下层建立十个空白网页 并分别输入网页名字 6 单击 文件 新建 在界面右侧弹出的 新建 任务窗格中选择 其他网页模版 7 在弹出的 网页模版 对话框中打开 常规 选项卡 选择 目录 然后单击 确定 按钮 生成目录如图11 20所示 保存此目录为网页形式 8 单击左侧框架中的 设置初始网页 按钮 在弹出的 插入超链接 对话框中选择刚才保存的目录网页 9 在左侧框架中单击右键 在弹出式菜单中选择 网页属性 单击 格式 选项卡 勾选 背景图片 复选框 单击 浏览 按钮 选择一幅合适的图片作为网页背景 单击 确定 按钮设置左侧框架的背景图片 仿照此步骤 根据需要在右侧框架中设置好一个页面 接着再选一幅图片作为页面的背景 设置好后的效果如图11 22所示 10 在左侧框架中单击右键 在弹出式菜单中选择 框架属性 在显示滚动条后的单选列表中选择 不显示 11 把光标放在右侧框架 单击 表格 插入 表格 在 插入表格 对话框修改行数为 11 列数为 3 对齐方式为 居中 单元格间距为 11 同时也修改了亮边框和暗边框的颜色 12 把光标放在第一个单元格 单击 插入 图片 来自文件 选择一幅手机图片 选择好后单击 确定 按钮 13 接着在第一个单元格内输入手机的说明文字 设置字体的大小和颜色 14 双击图片 弹出 图片属性 对话框 在 图片属性 对话框中选择环绕样式为 左 单击 确定 按钮 设置好图片的环绕方式后 调整图片的大小 15 仿照上述步骤 在表格中的其他单元格中插入图片 输入文字 设置文字的大小和颜色 最后设置文字的环绕样式为 左 16 把光标放在表格的任一单元格内 单击 表格 插入 标题 为表格加上标题 选中标题后 设置标题的字体 大小和颜色 17 在上框架中单击右键 在弹出式菜单中选择 网页属性 在 网页属性 对话框中打开 高级 选项卡 把上边距和左边距都修改为 0 单击 确定 按钮 18 把光标放在上边框中 单击 表格 插入 表格 在 插入表格 对话框修改行数为 1 列数为 11 选定亮边框和暗边框的颜色 勾选 折叠表格边框 19 把光标放在第一个单元格里 单击 插入 图片 来自文件 在弹出的 图片 对话框里选择一幅图像 选择好后单击 确定 按钮 在第一个单元格中插入图片后 调整图片的大小 20 仿照上述步骤 在表格的其他单元格内插入图片 21 保存文件 即可以在浏览器中浏览效果 11 2 4总结要设计好一个优秀的商业网站 布局是关键 因此掌握好框架和表格的布局方法是十分重要的 平时在浏览网页的同时 要多去分析这些网页的布局特点 积累经验 才能真正设计出让客户满意的要求 信息采集网站的制作 11 3 1案例说明本案例采用自定义表单的形式创建一个表单网页 11 3 2知识点分析如果对FrontPage2003自带的模版或向导不满意而想创建具有个人风格的表单时 可以通过信件一个空白的页面 在页面内按自己的需要添加表单域元素形成表单 11 3 3制作步骤 1 新建一个空白网页 输入表单的标题 个人信息采集 并将文字设置加粗 2 将光标放置在标题的下一行 单击 插入 表单 表单 在页面中出现一个表单边框 在表单边框中有 提交 和 重置 按钮 3 将光标置于 提交 按钮之前 插入一个8行2列的表格 设置表格边框粗细为1 4 在表格的第一列中输入相应的文字提示 如 姓名 性别 生日 学历 兴趣 联系电话 电子邮箱 邮编地址 等 5 在表单对应位置 姓名 后单击 插入 表单 文本框 插入 文本框 重复此步骤 在表单对应位置 联系电话 电子邮箱 邮编地址 的后面插入 文本框 6 在表单对应位置 性别 后单击 插入 表单 选择按钮 插入 选择按钮 7 在表单对应位置 兴趣 后单击 插入 表单 复选框 插入 复选框 8 在表单对应位置 学历 后单击 插入 表单 下拉框 插入 下拉框 用鼠标双击插入的下拉框 弹出 下拉框属性 对话框 在 名称 文本框中输入此下拉框的名称 9 单击 添加 按钮 弹出 添加选项 对话框 在 选项 文本框中输入选项的名称 在 初始状态 中设置是否选定 然后单击 确定 按钮 返回到 下拉框属性 对话框中 添加好所有选项后 在 下拉框属性 对话框中单击 确定 按钮即可 同理可以设置表单中的 生日 10 双击 提交 按钮 弹出 按钮属性 对话框 可以设置表