FrontPage网络课件设计.doc

FrontPage网络课件设计

一、网站的创建
l 1 启动FrontPage
l 2 创建网站
– 文件/新建/网页或站点，打开任务窗格
– 新建/空白站点，选择“只有一个网页的站点”
– 输入网站的保存路径
– 系统会自动创建一个主页index.htm

二、网页编辑初步
l 1 双击打开主页index.htm
l 2 为网页加入背景颜色或图片
– 格式菜单 / 背景
– 右击 / 网页属性
l 3 预览效果

三、使用表格给网页内容定位
l 1 表格菜单 / 插入 / 表格
– 插入一个3行1列、对齐方式“居中”、边框粗细为0、宽度为80％的表格
l 2 选择表格第一行，将其拆分为2列
– 右击 / 拆分单元格
– 表格菜单 / 拆分单元格
l 3 调整单元格宽度
– 在单元格内右击 / 单元格属性 / 指定宽度
– 把第一列设为25％，第二列设为75％
l 4 选择表格第二行，将其分为3列
– 其单元格宽度分别为25％、50％、25％
l 5 在网页中插入图片
– 设置对齐方式：选第一行第一列，右击 / 单元格属性 / 水平对齐方式：居中
– 插入图片：插入菜单 / 图片 / 来自文件：bridge.jpg
– 调整图片的高度和宽度：右击图片 / 图片属性 / 外观：宽度180
l 6 编辑文字
– 选第一行第二列，在单元格中输入文本“赵州桥”
– 调整文本的“字体”属性
l 7 设置单元格背景
– 选第一行第二列
– 右击 / 单元格属性 / 背景
l 8 预览网页

四、表格的嵌套
l 1 选第二行第一列，在其中插入一个表格
– 5行1列，指定宽度100％，对齐方式居中，边框粗细为0
l 2 对新表格进行设置并输入文本
– 将第1、3、5行的背景设为蓝色，并分别输入文本（居中）：赵州桥 、精选教案 、图片库
– 在第2、4行输入文本，并设置项目符号
l 3 选第二行第三列，重复前两步
l 4 在第二行第二列插入图片big_brigde.jpg，并设置其大小：宽度280
l 5 在第三行输入文本“用E_Mail联系我们”
l 6 保存并预览

五、添加新网页并编辑
l 1 文件菜单 / 新建空白网页
l 2 保存新网页为jiaoan_1.htm，并修改标题为教案1
l 3 编辑网页“教案1”
– 设置背景
– 插入表格：3行1列，宽度80％，居中，边框粗细为0
– 在第一行输入标题：利用网络环境，教学《赵州桥》 ，并设置其字形
– 第二行插入水平线，并设置其属性
– 第三行输入正文，并设置其段落格式
l 4 保存并预览
l 5 在正文中插入图片，并进行编辑
– 在某个段落的末尾处插入图片
– 右击图片 / 图片属性，设置对齐方式，观看效果
– 打开“图片工具栏”，利用“自动缩略图”，设置图片的缩略图
– 预览，体会缩略图的用途

六、设计超链接
l 1 制作指向站点内部网页的超链接
– 打开主页index.htm，选中要建立超链接的文字“教案1”，右击 / 超链接
– 选中页面“jiaoan_1.htm”；单击“目标框架”按钮，选择“新建窗口”
– 保存，并用IE观看效果
l 2 制作指向本地计算机上的文件的超链接
– 选择主页上的文字“课件1”，右击 / 超链接
– 选中flash目录下的文件4old_bridge.swf；单击“目标框架”按钮，选择“新建窗口”
– 保存，并用IE浏览
– 把文字“课件2”链接到bridge.swf
l 3 制作指向E_Mail的超链接
l 4 在网页中使用书签创建超链接
– 书签：指向本网页中某个区域的超链接
l 1）打开新建的网页jianjie.htm（标题赵州桥）
l 2）选中要设置书签的文字（表格第三行正文中的大标题文本“赵州桥简介”）
l 3）插入菜单 / 书签
l 4）重复第2、3步，创建其它书签：
l 5）选中要建立超链接的文本（表格第一行中的文本“赵州桥简介”）
l 6)右击 / 超链接 / 本文档中的位置，选择书签“赵州桥简介”，目标框架选“网页默认值”
l 7）重复5、6步，创建其它超链接。保存并预览

七、查看网页之间的关系
l 进入“导航”视图
l 在“文件夹列表”中选择jiaoan_1.htm，将其拖动到导航图中
l 同样，将jianjie.htm也拖到导航图中

八、网页动态效果的设计
l 1 加入字幕
l 打开主页
l 激活表格的第一行，表格菜单 / 插入 / 行或列，在所选区域下方插入一个新行
l 对新行合并单元格：全选新行，表格菜单 / 合并单元格
l 选新行，插入菜单 / Web组件，在“动态效果”中选择“字幕”
l 在字幕属性中输入文本“欢迎光临赵州桥学习网站”
l 预览效果。可修改字幕文本的大小、颜色等
2 为图片加入DHTML效果
l 打开主页，打开工具栏 “DHTML效果”
l 选择中间的图片
l 在“DHTML效果”工具栏中依次选择：鼠标悬停、交换图片、选择图片，打开一幅大小相等的图片 17－1.jpg
l 预览效果
3 为文字加入DHTML效果
l 打开主页，打开工具栏 “DHTML效果”
l 全选文本：用E_Mail联系我们
l 在“DHTML效果”工具栏中依次选择：鼠标悬停、格式、选择字体。设置合适的字体、字形、大小、颜色等
l 确定后，预览

4