网页制作入门(frontpage2003教材) (4)
网页设计与制作 第4章 利用FrontPage 2003设计制作网页

注意:在创建站点选择路径时,最好选择某 个文件夹作为站点,而不要选择某个磁盘分 区(例如F盘)作为站点,否则可能会导致整 个磁盘分区瘫痪。
2.导入一个已存在的站点
首先选择“文件”菜单下的“导入”命令, 然后根据提示,依次选择需导入的站点即可。
3.将文件夹转换为站点
FrontPage 2003 中可以将一个已经存在 的文件夹转换为站点。
3.删除站点
在FrontPage 2003中选择“文件夹”视图,
并选择要删除的站点,单击“Delete”键,或右
击鼠标,从弹出的快捷菜单中选择“删除”命令。
注意:应用手动方式删除文件,删除的文件
会自动放置于“回收站”中,而应用“删除”命 令方式删除文件,被删除的文件直接从磁盘中删 除,是不可恢复的。
“代码”视图 亲自查看、编写和编辑HTML代 码。使用 FrontPage 2003中的优化代码功能,可以 创建干净的HTML,并且可以更容易地删除任何不 想要的代码。 “拆分”视图 以拆分的屏幕格式检查并编辑网 页内容,该视图能让用户同时访问代码视图和设计 视图。 “预览”视图 在无需保存网页的情况下,显示 与网页在Web浏览器中的外观相近似的视图。使用 此视图可以查看创建网页时所做的更改。
3.设置文本格式
(1)设置字体
在FrontPage 2003中设置字体格式的步骤如下:
① 首先选中相应文本,选择“格式”|“字体”命
令,打开 “字体”对话框。 ② 在“字体”标签中选择合适的字体、字形和大
小,在“字符间距”标签中设置字符间距。
另外,应用“字体”对话框的“效果”选项组, 还可以对文字设置不同的效果。
式
提供了多种网页设计模板、网页设计向导和主 题样式。使用这些模板、向导和样式,即使是初学
FrontPage_2003网页制作

<img src =URL width =n1 height =n2> 其中width和height属性的取值n1和n2,可以是像素数或百 分比。
2020/8/13
24
插入图片动态内容网页 目 录 如:网就是一个动态内容网站上一页
下一页
结束
目录 上一页 下一页 结束
静态网页的开发工具
可以制作静态网页的工具有
记事本、
HTML超文本标记语言
Dreamweaver
目录
上一页 Frontpage
下一页
Word等工具
结束
动态网页开发工具
动态表现网页 Gif动画 Flash动画 Javascript和vbscript语言
下一页
结束
2020/8/13
21
目录 上一页 下一页 结束
文字格式
2)字体标记<font>
字体标记用来对文字格式进行设置,主要具有以下属性: (1)size属性:用来控制文字的大小,格式如下:
<font size=n>…</font> 其中n的取值范围为1~7的数字,默认值为3。 <font>标记和<hn>标记都可以控制文字的大小。一般情况下, 文章的标题最好由<hn>标记控制,而其余的文字由<font>标 记控制。相比较而言,<font>对字体的控制更加灵活。 (2)color属性:用来控制文字的颜色,格式如下: <font color=#n或英文表示的颜色>…</font> 其中n是一个十六进制的六位数。 (3)face属性:用来指明文字使用的字体,格式如下: <font face=字体名>…</font> 其中字体名的选择由Windows操作系统安装的字体决定。如: 宋体、楷体_GB2312、Times New Roman、Arial等。
FrontPage2003 网页制作教程

1.1 FrontPage 2003的启动和退出
一、启动
在Windows 桌面单击“开始”菜单,执行[所有程序][ Microsoft Office ] [Microsoft Office FrontPage 2003 ]命令
二、退出
执行[文件][退出]命令,或者单击窗口右上角标题栏的[关闭]按钮
example: “标题”框架 模板新建网页
1)执行[文件][新建] 命令,出现“新建” 任务窗格
2)在“新建网页”栏中,选择[其他网页 模板]
3)选择“框架网页”选项卡
4)选择“标题”模板 ,并编辑网页 14
2.4 利用框架网页模板新建网页
5) 浏览网页
返回
15
3 网页的编辑与效果设计
5
1.4 任务窗格
返回
6
2 新建网页
2.1 新建网页的方法 2.2 新建空白网页 2.3 利用常规模板新建网页 2.4 利用框架网页模板新建网页
7
2.1 新建网页的方法
一、空白网页
新建一个空白的网页
二、文本文档
新建一个纯文本文件,后缀名为· txt
三、根据现有网页新建
从本地或互联网上查找到网页,新建一个同样的网页
21
4.1 设置网页属性
执行[文件][属性]命令
一、设置网页背景音乐
二、设置网页背景图片
22
4.2 设置网页主题
应用主题
1)打开要应用主题的网页 2)执行[格式][主题] 命令,弹出“主题”任务 窗格 3) “主题”任务窗格中,浏览主题的缩略图, 单击需要的主题
删除主题
1)执行[格式][主题]命令 2)在“主题”任务窗格中删除网站的主题
FrontPage 2003网页制作

FrontPage 2003网页制作一、打开fropkt文件夹下的“我的家乡.htm”文件,进行如下操作:A.设置网页属性标题为"我的家乡"将网页中的超链接的默认颜色设为"红色"B.网页编辑将"影响中国历史进程的河北名人"下的表格第一列文字设置为隶书,18磅、紫色,居中将fropkt文件夹下的“河北省地形图.jpg”图片插入到“河北省地形(图)”文字的下边。
图片的对齐方式为“居中”,锁定纵横比,宽度为200像素。
C.热点设置在“河北城市风采(图)”文字右边设置书签,名称为“河北城市风采”将图片“河北省地形图”设置为长方形热点,与书签“河北城市风采”链接。
D.链接设置·将表格中的文字“伯夷”与“”链接。
·将表格中的图片“石家庄”与“”链接。
将上述操作结果按原文件名保存。
二、打开fropkt文件夹下的“我的网站.htm”文件,进行如下操作:A.设置网页的属性:·标题为“我的网站”。
·背景色为“白色”。
B.网页编辑·将三行蓝色标题(个人风采、我的理想、我的爱好)设置为楷体、24磅、水平居中对齐。
·在“闻鸡起舞”一行的第二列单元格中插入fropkt文件夹中“闻鸡起舞.jpg”图片,水平居中对齐。
·将“我的理想(图)”表格中企业家的图片移动到该单元格的文字后边;图片对齐方式设为“相对垂直居中”C.链接设置·在“个人爱好(图)”前边插入书签,书签名称为“我的爱好”。
·将标题下边表格中的“我的爱好”文本链接到“我的爱好”书签。
最后将上述操作结果以原文件名保存。
三、打开fropkt文件夹下的“花卉欣赏.htm”文件,进行如下操作:A.设置网页的属性:·标题为“花卉欣赏”。
·背景色为“银白色”。
B.网页编辑·将“花卉欣赏”设置为:楷体、蓝色、36磅、居中。
中文FrontPage2003网页制作

<TITLE>…</TILE>表示标题的开始和结 尾。
<BODY>…</BODY>表示文件体的开始和结 尾。
<P>标记是用于段落分隔。
<!—注释文档--> 是注释标记的格式
10.02.2021
可编辑版
3
8.1.3 文字处理标志
• HTML的文字处理包括字体标志、字体颜色、字 体大小三种。 1. 标题字体标志 2. 字体大小及颜色标志 3. 修饰字体标志 4.字体对齐标志
源代码如下: <html> <head> <title>欢迎新生 1</title> </head> <body> 热烈欢迎新同学! <P>祝新同学德、智、体、美全面发展! <!--这是我的第一个网页---> </body> </html> 显示的效果如图9-1所示
源代码说明:
<html>…</html> 表示文件的开头和结 尾。
第8章 中文FrontPage2003网页制作
8.1 HTML语言基础 8.2 FrontPage2003简介 8.3 网页的修饰 8.4 框架网页 8.5 表单的操作 8.6 FrontPage 2003 组件
10.02.2021
可编辑版
1
8.1.1 什么叫HTML
HTML的全称为Hyper Text Markup Language,中文译为超文
1.创建链接页面
2.创建链接标签标志
10.02.2021
FrontPage_2003初级教程

2020年5月8日星期五
1.2 窗口界面
• FrontPage 2003主界面主要由菜单栏、工具栏、视图栏、 状态栏、主编辑窗口和任务窗格等6大部分组成。
2020年5月8日星期五
18
网页的基本操作
• 2)打开网页
• 打开当前网站中的网页,在任何视图中双击该网页图标或文 件名即可打开网页。
• 打开其它网站中的网页,选择【文件】【打开】命令,在 “打开文件”对话框中选择具体网页文件打开。
• 3)保存网页
• 保存当前网站中的网页,单击工具栏中的保存按钮,或【文 件】【保存】命令即可。如果网页中有图片,则会弹出“保 存嵌入式文件”对话框,提示保存图片文件。
8
“报表”视图
• 单击“视图”栏中的“报表”图标或选择【视图】【报表】命 令,打开报表视图。
• 通过报表视图,可以在运行报表查询后分析网站内容。
2020年5月8日星期五
9
“导航”视图
• 单击“视图”栏 中的“导航”图 标或选择【视图】 【导航】命令, 打开导航视图。
• 导航视图用于管 理网站中各网页 的层次关系结构 图。可以通过鼠 标将结构图中的 网页拖到新位置 来改变链接结构。
• 1)新建网页
• 在FrontPage 2003中可以直接创建一个空白网页,也 可以利用网页模板和网页向导来创建。
• 在某网站中创建新网页,在此网站的文件夹视图和导 航视图方式下单击视图窗口右上角的“新建网页”按 钮。
• 创建不属于某网站的新网页,在任何视图方式下,选 择【文件】【新建…】命令,打开“新建”任务窗格, 可在新建任务窗格中,选择一种合适的模板新建网页; 或者单击常用工具栏上的“新建”按钮 。
第七章 FrontPage 2003网页制作
新编计算机办公自动化基础教程
新建的网站中没有任务。如果要为新建的网站添加相关的任
务,在“任务”视图中的网页编辑区中单击鼠标右键,在弹出的
快捷菜单中选择“添加任务”命令,即可弹出如图7.1.14所示的 “新建任务”对话框。
图7.1.14 “新建任务”对话框
新编计算机办公自动化基础教程
在“任务名称”文本框中输入相关的任务名称,在“说明” 文本框中输入相关的说明文字,单击“确定”按钮,即可在“任 务”视图中添加任务。 四、退出FrontPage 2003
新编计算机办公自动化基础教程
(3)“代码”视图。在网页基本视图区中,单击“代码” 按钮,即可切换到“代码”视图,如图7.1.6所示。在该视图中, 用户可以自己查看、编写和编辑HTML标记。使用FrontPage 2003 中的优化代码功能,还可以创建简洁、明了的HTML代码,更易
于删除任何不需要的代码。
新编计算机办公自动化基础教程
(3)在该对话框中选择“空白网页”选项,单击“确定” 按钮,即可创建一个只包含private和image文件夹的空白站点。 四、打开和关闭网站 如果要对某个网站进行编辑修改,可先将其打开,然后再进 行其他编辑操作。用户可以使用以下两种方法打开站点。
几种。
新编计算机办公自动化基础教程
1.通过“开始”菜单启动 选择“开始”→“所有程序”→“Microsoft Office”→“Microsoft Office FrontPage 2003”命令,如图7.1.1所示,
即可启动FrontPage 2003应用程序。
2.通过快捷方式启动 如果用户经常使用FrontPage 2003应用软件,即可在桌面上 创建其快捷方式,双击桌面上的快捷方式图标,即可启动应用 程序。
网页制作入门(frontpage2003教材) (4)
仅供个人参考网页制作4第三单元本单元以“可爱的中国”为主题,运用前2单元已经学过的F rontpage2003网页制作知识、制作完成“可爱的中国”主题网站。
第一课规划网站,主要是设计网站结构图及创建“可爱的中国”网站的站点,并为制作网站准备素材。
第二课设计框架网页,要求在左框架网页中始终显示导航栏,并且通过导航栏链接的网页能够分别显示在右框架网页之中。
第三课学习设置网页过渡效果以给浏览者提供美妙且富有情趣的视觉环境。
仅供个人参考第四课发布网站本课第一任务是对“可爱的中国”网站进行最后的检测。
第二任务是通过Windows系统中的“个人Web服务器”,将自己的计算机作为服务器,发布网站。
第五课将制作网站的一般步骤进行如下归纳,学生检查自己制作的网站并完成评价表的填写。
本单元中所用到的素材等,都保存在相关网页的相应文件夹中。
知识要点:第1课:1、规划网站的结构。
2、创建空白站点。
3、为网站准备素材。
第二课:1、创建框架网页。
2、保存框架网页。
第三课:设置网页过渡效果。
第四课:1、对网站进行检测。
2、利用个人Web服务器发布、测试网站第一课时规划与准备探究空间:可爱的中国、悠久的历史、灿烂的文化。
接下来,就让我们以“可爱的中国”为主题,从中国历史、地理、中国之最、中华民族等方面作为内容开始规划一个“可爱的中国”网站。
11、规划网站的结构仅供个人参考在开始建立网站之前,首先要确定网站的主题,然后根据主题确定这个网需要由多少个网页组成,以及这些网页之间的链接方式。
当我们确定了“可爱的中国”网站的主题后,经过分析,决定用5个网页来表现这个主题,如下图所示。
主页中国历史中国地理中国之最中华民族图3-1.1我们把上面的这个图称为网站结构图。
从这个图中可以看出,可爱的中国”网站的结构分为2层。
在制作网站之前画出结构图,不但可以帮助我们规划网站结构,使网站层次分明、条理清楚,还可以确定各个网页的内容,方便大家思考各网页之间的链接方式。
FrontPage2003教学教程
FrontPage2003 教程我们用FrontPage2003的“布局表格和单元格”功能布局网页时,需要通过两部分来完成。
首先通过“布局表格”功能来为网页布局创建一个框架,然后通过“布局单元格”功能为该框架填充包含有网页内容(包括文本、图像、Web部件和其他元素)的区域,也就是单元格。
下面我们就以设置一个单位网站首页为例来了解一下用布局表格给网页布局的过程。
一、创建布局表格1.创建布局表格打开一个空白网页,并切换到“设计”视图下,单击“表格”菜单中的“布局表格和单元格”命令,随后在右侧弹出一个任务窗口(图1),在该任务窗口下面程序提供了多种表格布局模板,在此单击其中需要的模板即可将该模板添加到网页中。
2.绘制布局表格如果你对模板中提供的布局表格不太满意,还可以用手工绘制的方法创建一个布局表格。
创建时首先在“新建表格和单元格”项中单击“绘制布局表格”,随后将指针移到操作窗口最下。
3.设置表格属性插入表格后,还需对表格属性进行设置。
在“表格属性”项中设置该表格所需的属性。
提示:在设置表格时,如果要想覆盖网页的默认边距,并让布局表格跨到文档窗口的边缘,可以将表格中的各个边距的属性都设置为0。
在设计框架时经常需要调整某一行或列的属性,这时可以通过表格中列宽和行高的标签来完成。
在操作窗口中单击布局表格需要调整的边框,每一侧都会出现显示列宽和行高的标签。
每个标签都包括一个下拉箭头,如更改行高度时,单击此下拉箭头弹出一个下拉菜单,选择“更改行高”命令,在弹出的“行属性”对话框中重新输入该行高度值即可。
FrontPage2003还提供了一个表格自动功能,它可以按照比例自动伸缩,调整表格的宽度和高度,使用时在边距标签下拉菜单中选择“自动伸缩”命令即可快速地对表格的尺寸进行调整,非常方便。
二、单元格的添加和设置1.添加单元格布局表格创建了网页框架后,还要向表格中添加单元格。
添加时单击“新建表格和单元格”项下的“绘制布局单元格”,随后按照绘制表格的方式来绘制单元格。
使用FrontPage 2003制作网页.ppt
二、FrontPage 2003的工作窗口 选择 “开始”→“所有程序”→“Microsoft office”→“Microsoft office FrontPage 2003”命令,即可打开 FrontPage 2003的工作窗口,如图8.1.1所示。该窗口与 Office 2003的其他组件的工作窗口基本相同,用户可以在 工作区中制作和编辑网页。
(3)自定义站点。如果用户已对该软件非常熟悉,也 可以自定义创建站点,具体操作如下:
1)选择“文件”→“新建”命令,弹出“新建”任务 窗格。
2)在该任务窗格中的“新建网站”选项区中选择“由 一个网页组成的网站”选项,弹出“网站模板”对话框。
3)在该对话框中选择“空白网站”选项,并在右侧的 网站位置下拉列表框中输入网站的位置后,单击“确定” 按钮,即可创建一个只包含两个空白文件夹private和 image的站点,用户可自行创建主页及其他网页文件。
(5)超链接视图。该视图将网站中所有的内部和外 部超链接的状态显示在一个列表中,并用图标表示超链接 已通过验证或已中断。选择“视图”→“超链接”命令, 即可切换到该视图。
(6)任务视图。该视图以列表的形式显示网站中的 所有已完成或尚未完成的任务,并在各个列标题下提供有 关各项任务的当前信息。选择“视图”→“任务”命令, 即可切换到该视图。
图8.1.1 FrontPage 2003的工作窗口
三、FrontPage 2003的基本视图 FrontPage 2003为用户在创建站点和编辑网页时提供 了多种视图,其中网站的视图模式有网页设计视图、文件 夹视图、报表视图、导航视图、超链接视图、任务视图和 远程网站视图;网页的视图模式有设计视图、代码视图、 拆分视图和预览视图。
二、打开站点 如果要对某个网站进行编辑修改,可先将其打开,然 后再进行其他编辑操作。用户可以使用以下两种方法打开 站点: (1)选择“文件”→“打开网站”命令,弹出“打开 网站”对话框。在该对话框中选择要打开的站点,单击“打 开”按钮 即可。 (2)单击常用工具栏中“打开”按钮 右侧的下拉 按钮 ,在其下拉菜单中选择“打开网站”命令,在弹出的 “打开网站”对话框中选择要打开的站点,单击“打开”按 钮即可。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
网页制作4第三单元本单元以“可爱的中国”为主题,运用前2单元已经学过的F rontpage2003网页制作知识、制作完成“可爱的中国”主题网站。
第一课规划网站,主要是设计网站结构图及创建“可爱的中国”网站的站点,并为制作网站准备素材。
第二课设计框架网页,要求在左框架网页中始终显示导航栏,并且通过导航栏链接的网页能够分别显示在右框架网页之中。
第三课学习设置网页过渡效果以给浏览者提供美妙且富有情趣的视觉环境。
第四课发布网站本课第一任务是对“可爱的中国”网站进行最后的检测。
第二任务是通过Windows系统中的“个人Web服务器”,将自己的计算机作为服务器,发布网站。
第五课将制作网站的一般步骤进行如下归纳,学生检查自己制作的网站并完成评价表的填写。
本单元中所用到的素材等,都保存在相关网页的相应文件夹中。
知识要点:第1课:1、规划网站的结构。
2、创建空白站点。
3、为网站准备素材。
第二课:1、创建框架网页。
2、保存框架网页。
第三课:设置网页过渡效果。
第四课:1、对网站进行检测。
2、利用个人Web服务器发布、测试网站第一课时规划与准备探究空间:可爱的中国、悠久的历史、灿烂的文化。
接下来,就让我们以“可爱的中国”为主题,从中国历史、地理、中国之最、中华民族等方面作为内容开始规划一个“可爱的中国”网站。
11、规划网站的结构在开始建立网站之前,首先要确定网站的主题,然后根据主题确定这个网需要由多少个网页组成,以及这些网页之间的链接方式。
当我们确定了“可爱的中国”网站的主题后,经过分析,决定用5个网页来表现这个主题,如下图所示。
主页中国历史中国地理中国之最中华民族图3-1.1我们把上面的这个图称为网站结构图。
从这个图中可以看出,可爱的中国”网站的结构分为2层。
在制作网站之前画出结构图,不但可以帮助我们规划网站结构,使网站层次分明、条理清楚,还可以确定各个网页的内容,方便大家思考各网页之间的链接方式。
22、创建站点设计出“可爱的中国”网站的结构后,接下来我们要在FrontPage中创建这个空白网站,然后再逐步补充其中的内容,最终形成一个内容丰富多彩的网站。
第1步:启动FrootPage。
在右侧的“新建网站”任务窗格中单击信息链接:如果FrontPage窗口没有出现“新建网站”任务窗格,可单击菜单栏上的"文件,在“文件”菜单栏中单击“新建”,然后在右侧的窗格中选择新建网页或"站点。
第2步:自动打开左下图所示“网站模板”对话框。
在“指定新网站的位置”栏可以设置网站保存的位置,在这里我们点击“d:\可爱的中国”使这个文件夹成为保存网站文件的默认文件夹。
第3步:单击框消失,新站点建立成功。
图3-1.2,出现“创建新站点提示框。
稍等一会儿,该提示第4步:单击视图栏中的“文件夹”图标 ,此时FrontPage 窗口中出现“文 件夹列表”窗格,在这里显示出新建网站中的文件夹。
而在窗口标题栏中则显示 目前网站的所在位置,如下图所示。
图3-1.3由于我们建立的是空白站点,所以网站文件夹中没有任何网页文件,但系统会自动生:成上图所示的两个子文件夹,其中的“images”文件夹用于存放网站中的图片文件。
若想关闭“文件夹列表”窗格,切换到网页编辑窗口,只要单击视图栏中的“网页”图标即可。
信息链接:FrontPage中提供了多种建立典型网站(如个人网站、公司展示网站、讨论网站等)的向导及模板,利用合适的向导来建立网站可以简化制作过程。
上面介绍了最基本的建立网站的方法。
有兴趣的同学可以试看在“Web站点模板”对话框中选择不同的站点向导、建立风格独特的网站。
33、为网站准备素材“可爱的中国”网站的空站点建起来了,接下来我们的工作是制作网页,充实网站的内容前还有一件很重要的事要做,那就是为网站准备素材。
网页中除了文字之外,还包含图片丶声音丶动画等多种内容,这些资料要在制作网页之前准备好,存放在一个文件夹中。
收集资料的方法很多,我们可以在因特网上查找并下载所需要的资料;也可以在素材库中找素材;还可以利用扫描仪、数码相机等设备来采集信息。
如下图所示,我们为制作“可爱的中国”网站准备的素材都存放在“D:\网站素材\可爱的中国”文件夹中。
在这个文件夹中有“动画”、“视频”、“图片”、“文字”、“音频”和“其他”等几个文件夹,分别用来存放网站所需的相关资料。
图3-1.4在“可爱的中国素材库”文件夹中,有制作“可爱的中国”网站所需的相关素材,大家可将这些素材拷贝到“D:\网站素材\可爱的中国”的相关文件夹中。
然后在这些素材的基础上继续丰富素材库。
信息链接:在使用他人创作的图片及文字资料前,一定要征得原作者的同意或者注明资料的来源,尊重别人的知识产权。
在前面的操作中,我们对“可爱的中国”网站进行了规划,并且创建了空白站点,还搜集了大量有用的素材。
在下一个主题活动中,我们将通过设计框架网页,进一步完善“可爱的中国”网站了。
实践升级1.将FrontPage的窗口界面与Word的窗口界面进行对比,试看找出一些相同点和不同点。
2.去因特网上逛一逛,浏览欣赏几个感兴趣的网站。
结合具体的网站实例,进一步体会网站和网页的概念,了解网站和网页之间的关系。
然后将你认为不错的网站推荐给同学们,大家一起讨论:什么样的网站才是好网站?3.根据“可爱的中国”网站的结构规划思想,自己想办法多收集一些文字、图片素材,例如中国历史、地理、中国之最、民族等内容,然后把这些资料分类保存到“D:\网站素材\可爱的中国”文件夹中。
第二课时:制作框架网页探究空间:这节课的任务是设计一个框架网页,要求在左框架网页中始终显示导航栏,并且通过导航栏链接的网页能够分别显示在右框架网页之中。
框架网页是一种独特的页面组织方式,它由导航框架和内容框架组成,一个框架网页窗口中包含几个单独的网页,单击导航框架中的网页导航超链接即可在内容框架中显示相应网页的内容。
通常我们使用FrontPage提供的“框架网页”模板来创建框架网页。
1、创建框架网页第1步:启动FrontPage,打开“可爱的中国”网站。
第2步:单击右侧的“新建网页”,“其他网页模板”。
打开“网页模板”对话框。
单击对话框中的,进入“框架网页”选项卡。
图3-2.1,即可创建第3步:单击模板中的“横幅和目录”模板,再单击如下图所示的空白框架网页。
建立图3-2.2第4步:在空白框架网页中,分别单击顶端、左侧及右侧的3个,3个空白网页,如下图所示图3-2.3接下来,我们就可以像制作普通网页一样制作框架网页了。
2、添加网页内容在我们上面制作的框架网页中,网页编辑区域分为三部分:上框架、左框架和右框架。
它们是3个独立的网页,我们可以单独对每个网页迸行编辑。
完成上框架网页的内容。
将上框架网页的边距的宽度和高度分设置为2像素; 然后在上框架网页中插入banner.jpg”图片,调整图片后,效果如下图所示。
图3-2.4图3-2.5接下来,我们要完成左框架网页的内容。
因为左框架网页中包含导航内容,所以制作过程麻烦一些。
第1步将插入点光标移动到左框架网页中,在此插入一个:4行1列的表格。
调整表格大小,并将表格线粗细设置为0。
图3-2.6第2步如上图所示,将插入点光标移动到左框架网页的第1个单元格内。
单击菜单栏上的,再单击“插入”菜单中的,打开下图所示的“插入web组件”对话框。
第3步::在“组件类型”列表中单击选择“动态效果”在右侧的效果列表中单击选择“交互式按钮”。
单击,打开“交互式按钮”对话框。
图3-2.7第4步删除“按钮文本”框中的文字,重新输入“中国历史”即把按钮的的标签(按钮上显示的文字)设置为“中国历史”。
其他设置如下图所所示,完成后单击,返回网页编辑窗口。
第5步:在左框架网页中再插入三个交互式按键钮,按钮名称分别为“中国地理”、“中国之最”和“中华民族”,完成后效果如下图所示。
图3-2.8利用事先准备好的素材,制作完成右框架网页的内容。
如果暂时完不成网页中的正文内容,可先做一部分,其他的留到课后完成。
3、保存框架网页把框架网页的每部分都制作好后,我们要保存框架网页。
单击常用工具栏上的,打开下图所示“另存为”对话框。
图3-2.9信息链接:在保存框架网页时,每个框架中的网页都要单独保存一次。
此外还要保存整体框架网页,这个网页中包含该框架网页的设置信息,像如何显示网页,以及框架的大小位置等。
要打开一个框架网页,只要打开的整体框架网页就可以了。
实践升级:1、完成“中国历史”、“中国地理”、“中华民族”、“中国之最”、“中华民族”四个子网页。
2、为左框架中的“中国历史”、“中国地理”、“中华民族”、“中国之最”、“中华民族”4个“交互式按钮”设置超级链接,分别链接到相对应的网页中;设置这四个网页在右框架中打开,保存修改,并在浏览器中浏览网页。
第三课时网页过渡探究空间:在因特网上建立站点,就好像在网上安“家”。
如果把网页看做“家”里的房间,网页中的各种元素则像家具一样。
如何能使我们的“网上家园”既温馨典雅,又美观大方呢?在这节课中,我们将通过设置页面过渡效果的方法来增加网页的吸引力。
第1步:在FrontPage中打开“可爱的中国”网站中的主页。
第2步:单击菜单栏中的“格式”,再单击“格式”菜单中的“网页过渡”,打开“网页过渡”对话框。
图3-3.1图3-3.2第3步:如上图所示,在“事件”下拉列表中单击选取“离开网页”,即离开网页时显示过渡效果;在“过渡效果”列表中单击选中“圆形放射”;在“周期”框中输入“5”,即网页过渡效果显示的时间为5秒。
第4步:单击“确定”,返回网页编辑窗口。
然后保存网页并在浏览器器中浏览网页。
需要注意的是,网页的过渡效果是网页间进行切换时才会表现出的一种动态效果,只有网页间通过链接方式迸行浏览,或者使用浏览器中的“前迸”和“后退”按钮浏览时才能看到过渡效果。
练一练:为网站中的其他网页添加过渡效果,并根据自己的喜好设置各项过渡属性。
信息链接:FrontPage中提供了众多的Web组件,合理地使用这些组件可以使网页显得更活泼、更吸引人。
除了对网页设置过渡效果,你还可以用计数器、滚动字幕等组件来装饰“可爱的中国”网站的主页,或者在网页中设置动态HTML效果,增加网页的动感。
实践升级:为网页元素设置动态效果第1步:打开“可爱的中国”网站中zgls.htm网页,单击选中页面中的图片,然后单击菜单栏中的“视图”,再单击“工具栏”中“DHTML效果”图3-3.3图3-3.4第2步:在“DHTML效果”工具栏中,单击“选择一种事件”右端的小箭头,在下拉列表中选择“网页加载”,击“应用”右端的小箭头,在下拉列表中选丰“飞入”,再单击“选择设置”右端的小箭头,从下拉列表中选择“从顶端”,如图图3-3.5此时选中的图片所在的单元格变得有底色和边框,表示这是一个DHTML效果,保存网页,然后进入…预览”,窗口预览动态网页,看看设置的效果是否实现了。