5FrontPage综合实验.docx
- 文档编号:4956698
- 上传时间:2022-12-12
- 格式:DOCX
- 页数:20
- 大小:1.44MB
5FrontPage综合实验.docx
《5FrontPage综合实验.docx》由会员分享,可在线阅读,更多相关《5FrontPage综合实验.docx(20页珍藏版)》请在冰豆网上搜索。
5FrontPage综合实验
案例一用表格制作版面(基础)
实例说明
表格可以用于排版,将一张比较大的图片切成许多小块,然后再像拼图一样将每块重新拼起来,表格就像模考一样,在每个单元格中填入一张图片。
这种设计可以很好的控制网页的版本,而且在网页下载时,分成小块的图片下载也比完整的大图片要快。
在浏览网页时,根本就看不出表格的存在。
本例就是利用表格来组织页面,通过表格的嵌套,实现版面的统一。
最终的效果如图1所示。
图1
案例知识点
8打开网站
8插入表格并设置其属性
8设置单元格的属性
8插入图片
8插入Web组件
8文字的输入和设置
8插入行为
8设置背景图片
8插入超级链接
8保存网页
案例制作步骤
(1)运行FrontPage2003,单击“文件”→“新建”命令,在界面右侧弹出的“新建”任务窗体中选择“空白页面”。
(2)在空白处单击鼠标右键,在弹出菜单中选择“页面属性”。
(3)在弹出的“网页属性”对话框中,选择“格式”选项卡,在“背景”选区勾选“背景图片”,单击“浏览”,选择“bg.gif”为背景图片,如图2所示。
(4)选择“表格”→“插入”→“表格”命令。
(5)设置插入的表格(表格1)行数为“1”,列数为“2”;指定宽度为“700”像素;单元格衬距以及单元格间距为“0”;边框的粗细为“0”;其他均为默认值,最后单击“确定”保存配置,如图3所示。
(6)选择“表格”→“插入”→“表格”命令,在第一列单元格中插入新的表格(表格2),如图4所示。
(7)设置插入的表格(表格2)行数为“7”,列数为“1”;指定宽度为“150”像素;单元格衬距以及单元格间距为“0”;边框粗细为“0”;其他均为默认值,最后单击“确定”保存配置。
(8)选择表格1的第一列单元格,单击鼠标右键,选择“单元格属性”命令。
(9)在“单元格属性”对话框中,选择“垂直对齐方式”为“顶端对齐”,如图5所示。
(10)选择“插入”→“图片”→“来自文件”命令,在表格2的第一行插入图片。
(11)选择名为top的图片插入第一行,如图6所示。
(12)在第二行至第七行中依次插入名为second、b1、b2、b3、b4、bottom的图片。
完成后效果如图7所示。
(13)选中表格1的第二列,单击鼠标右键,选择“单元格属性”命令。
(14)在“单元格属性”对话框中,选择“垂直对齐方式”为“顶端对齐”。
(15)选择“插入”→“图片”→“来自文件”命令,在表格1的第二列插入图片,如图8所示。
(16)选择名为welcome的图片插入表格中,如图9所示。
(17)按回车键,选择“插入”→“图片”→“来自文件”命令。
(18)选择名为divide的图片插入表格中。
(19)重复步骤(17)、(18)在同一行在插入divide图片。
完成后如图10所示。
(20)按回车键,在表格1的第二列的底部插入名为ball的图片。
也可以仍然通过表格来组织表格1的第二列中得图片。
为了对比表格排版的作用,本例第二列的图片没有采用表格排版。
(21)存盘。
在浏览器中预览效果。
案例知识点总结
8打开网站
8插入表格并设置其属性
8设置单元格的属性
8文字的输入和设置
8保存网页
案例二用表格制作版面(进阶)
案例知识点
8打开网站
8插入表格并设置其属性
8单元格的拆分
8设置单元格的属性
8表格的嵌套
8插入艺术字
8插入水平线
8插入图片
8插入Web组件
8文字的输入和设置
8插入行为
8设置背景音乐和背景图片
8插入超级链接
8保存网页
案例制作步骤
(1)新建站点
–【文件】|【新建网站】,【由一个网页组成的网站】,“指定新网站的位置”
(2)打开主页
–双击“文件夹列表”中的index.htm文件
–“网页大小”:
800×600最大化选项(单击网页状态栏中的“网页大小”)
(3)插入表格(table)
–【表格】|【插入】|【表格】,“启用布局工具”
(4)利用表格完成页面布局
–第二行单元格设置
•设置单元格属性
–【表格】|】|【表格属性】|【单元格属性】/快捷菜单
•拆分单元格为2列
•设置拆分后单元格的
第一列的“单元格属性”中的
“指定宽度”为40百分比
(5)利用表格完成页面布局
–第四行单元格设置
•插入嵌套表格(table1)
•设定嵌套表格(table1)中的单元格(1,3)的属性
–table1中嵌套table2
(6)利用表格完成页面布局
–table1中嵌套table2
•table2嵌套于table1中的第一个单元格
–table1中嵌套table3
•table3嵌套于table1中的第三个单元格
–设置table2和table3中第一个单元格的属性
–设置table2和table3中第二个单元格的属性
(7)表格(table)第一行添加背景色
–【表格】|】|【表格属性】|【单元格属性】,“背景”,“其他颜色”,“值”#7E862A
(8)制作标题
–插入艺术字
–插入图片
•【插入】|【图片】|【来自文件】,BannerRoses.jpg
•设置图片属性(双击图片)
(9)插入活动字幕(表格(table)的第三行)
–【插入】|【Web组件】
(10)在嵌套表格中插入图片
–位置
•表格(table2)和表格(table3)的第一个单元格中
–设置图片属性
(11)设置单元格背景
–位置
•表格(table2)和表格(table3)的第2个单元格中
–属性设置
•背景为绿色
(12)输入文字并设置其格式
–位置
•表格(table2)和表格(table3)的第3~12个单元格中
–文字
•Table2:
母亲节花、父亲节花、教师节花、爱情用花、友情用花、婚礼用花、家庭用花、生日用花和订购单
•Table3:
支数寓意、浪漫花语、花与星座、送花小秘诀、血型与花、诞生花、色彩的奥秘、养花常识、艺术插花
–格式
•字体设置为“黑体”、字形设置为“常规”、大小设置为“3”,“颜色”用滴管选择前设置的字幕背景色。
(13)表格(table2)中间单元格内容设置
–单元格属性设置
•“水平对齐方式”:
居中,“垂直对齐方式”:
顶端对齐。
“使用背景图片”:
bb2.png
–文字——“奇花异草”属性
•“华文隶书”,6号
–插入水平线
•【插入】|【水平线】
•水平线属性
8“高度”16像素,“对齐方式”居中,颜色设置为绿色
(14)表格(table2)中间单元格内容设置
–插入行为
•【格式】|【行为】
•“插入”下拉列表中选择【交换图像】
•选择复选框“Mouseout事件后还原”,【浏览】选则相应图片。
•
案例知识点总结
8插入图片
8插入Web组件
8文字的输入和设置
8插入行为
8设置背景音乐和背景图片
8插入超级链接
8保存网页
案例三制作框架网页
案例效果
案例知识点
8建立框架网页
8设置框架的属性
8插入动态按钮
8插入超级链接
案例制作步骤
(1)制作框架网页
–【文件】|【新建】,【其他网页模板】,【框架网页】,“垂直拆分”模板
–指定框架显示的网页
•右侧的框架:
mother.htm
•左侧的框架:
新建网页
–网页属性:
标题“框架目录”,“高级”选项,网页的“边距”选项中的“上边距”10像素,其余选项均设置为“0”。
(2)插入交互式按钮
(3)|【Web组件】,“动态效果”,“交互式按钮”。
(4)设置网页目标框架
(5)选定制作完成的按钮,快捷菜单中选定“超链接属性”
(6)设置框架属性
–调整框架的大小
•快捷菜单打开“框架属性”对话框
–不显示框架的边框线
•“框架属性”对话框中的【框架网页】则弹出“网页属性”对话框,选定“框架”选项卡,不选中“显示边框”复选框,则“框架间距”变为0。
(7)保存框架中新建的网页及保存框架网页
–【文件】|【保存】
案例知识点总结
8建立框架网页
8设置框架的属性
8插入动态按钮
8插入超级链接
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- FrontPage 综合 实验