第 4章 HTML/DHTML的应用本章训练目标：
(1) 通过 HTML/DHTML示例掌握它们的基本知识与结构 。
(2) 通过案例掌握 HTML的应用 。
(3) 通过案例掌握 DHTML技术 。
(4) 通过案例掌握 FrontPage2000的使用 。
(5) 通过实训课题掌握主页系统的制作与发布技术 。
HTML/DHTML的应用
4.1 HTML/DHTML的结构
4.2 HTML的应用
4.3 DHTML技术基础
4.4 可视化页面制作与管理工具 FrontPage
2000
4.5 网页制作实训课题 ——应用技术学院网站的建设
练 习
上机练习
实训课题
4.1 HTML/DHTML的结构
4.1.1 HTML的结构 ——HTML示例
1,一个 HTML示例为了使读者对 HTML有一个整体的了解,我们将和读者一起来制作一个简单网页 。 请按以下步骤进行：
(1) 编写 HTML代码使用简单的文字编辑器 。
(2) 以扩展名,,html”保存文件 。 在只支持三个字母作后缀的操作系统中,它的扩展名是,,htm”。
(3) 在浏览器中显示页面 ex04-001.html,显示效果如图 4.1所示 。
图 4.1 页面代码 ex04-001在浏览器中的显示
(4)在图 4.1中单击,中国高等职业技术教育研究会,,页面将转跳至代码 ex04-002所显示的页面 。 如图 4.2所示 。
图 4.2 页面转跳到 ex04-002
(5) 我们以页面代码 ex04-001.html为例说明 HTML的简单使用 。
2,HTML的结构图 4.3 HTML文件结构
4.1.2 DHTM的结构 ——DHTML示例
1,什么是 DHTML
传统的 HTML页面一旦被下载到客户端的浏览器后,就无法改变显示内容,所以被称为静态网页 。
使用 DHTML技术制作的网页,在其内容下载到浏览器后,不必通过服务器就可以使浏览器与用户交互信息,更新网页内容,所以被称为动态网页 。
2,一个 DHTML示例
(1) 请读者在编辑器中输入 ex04-003.html的代码 。
(2) ex04-003.html在浏览器中的显示效果如图 4.4所示 。
(3) 把鼠标移动到文字,鼠标移到此处,新增一行文字,处,
页面产生动态变化,新增加一行文字 。 浏览器显示如图 4.5
所示 。
(4) 请读者把鼠标移到改变文字颜色的文本上,文字将变成红色,移开后文字变成蓝色 。
图 4.4 DHTML示例 图 4.5 动态改变网页
(5) 读者可以看到，在 HTML的基础上使用了脚本语言 (Script)，
使网页产生动态效应。
3,?DHTML结构
(1) DHTML的特点。
(2) DHTML的结构。
图 4.6 DHTML的组成
4.2 HTML的应用
4.2.1 HTML标记的格式
<标记 >HTML语言元素 </标记 >
·例如,<H2> 你好 ！ </H2>
·标记与字母的大小写无关,例如 <BODY> 与 <body>的作用是一样的 。
·标记可以带有属性参数 。
·注释标记 <!--注释内容 -->不在浏览器中显示,只供阅读页面代码帮助理解使用 。
4.2.2 HTML应用案例 1——文本标记
(1) 文本标记主要用于控制页面的段落,显示字符的大小,
颜色,字体和属性等 。
(2) 页面代码 ex04-004.html说明了文本标记的使用 。
(3) ex04-004.html在浏览器中的显示效果如图 4.7所示。
图 4.7 文本标记的使用
(4) 代码说明图 4.8 图像标记的使用
4.2.4 HTML应用案例 3——表格标记
(1) 表格标记 <TABLE>
(2) 页面代码 ex04-006.html说明了表格标记的使用
(3) 该代码在浏览器中的显示效果如图 4.9所示图 4.9 基本表格
4.2.5 HTML应用案例 4——超级链接标记
(1)?<A>标记的使用 。
(2) 页面代码 ex04-007.html说明了超级链接标记的使用
(3) 页面代码在浏览器中显示如图 4.10所示图 4.10 超级链接的使用
(4) 代码说明如下
4.2.6 HTML应用案例 5——表单 (FORM)和输入标记
(1) 表单的作用
(2) 页面代码 ex04-008.html说明了表单标记的使用
(3) 代码在浏览器中显示如图 4.11所示。
图 4.11 表单标记的使用
(4) 代码说明
4.3 DHTML技术基础
4.3.1 CSS的基本概念
CSS用于定义 Web页面内容在浏览器上的显示方式，
由于 HTML的功能有限，一般不能随意设计版面和编排文字，所以 W3C公布了一套 HTML的扩展标准 CSS，
扩展了 HTML在排版和文字式样上的功能。
1,CSS的基本概念
2,样式单的使用方式
3,定义样式的基本格式定义样式的基本格式是,图 4.12 样式文件的使用方式选择器 { 规则 }
4.3.2 样式应用案例 1——把样式套用到网页上
1,任务要求请在浏览器窗口中输出如下字样的文字 。 见图 4.13。
图 4.13 网页样式要求
2,实现方案 1：内联式样式单内联式样式只包含在与它有关的标记内，对页面上其他任何标记不起作用。
3,实现方案 2：嵌入式样式单
4,实现方案 3:外部 (链接 )样式单
(1) 建立样式文件
(2) 在 HTML文档中建立与外部样式文件的链接
4.3.3 样式应用案例 2——动态风格
(1) 动态风格简介。动态内容是指不需要下载或重新构建一个完整的新页面，就可以改变文档的部分内容。
(2) 任务要求。制作一个动态按钮，当鼠标移动到按钮上时，按钮上的字变为黄色，背景变成蓝色。
图 4.14 任务要求
(3) 页面代码 ex04-011.html实现如上功能
(4) 代码说明
4.3.4 样式应用案例 3——页面定位
(1) 页面定位。页面定位是指网页作者可以精确地将一个网页元素定位在某一个坐标。
(2)任务要求：制作一个页面,在页面中使一幅图像与文字有部分重叠 。
(3) 完成该任务 ex04-012.html的代码清单
(4) 该代码在浏览器中显示如图 4.15。
图 4.15 网页元素定位
4.3.5 样式应用案例 4——版面配置
(1) 网页中图像和文字配置得当，可以使一个网页的视觉效果良好。
(2) 任务要求：制作一个页面,在页面上有四幅图像,使用
<DIV>和 <SPAN>标记,使其中两幅在不同行,两幅在同一行显示 。 页面如图 4.16所示 。
图 4.16 <DIV>和 <SPAN>标记的使用
(3) 完成该任务 ex04-013.html的代码清单
4.4 可视化页面制作与管理工具
FrontPage 2000
FrontPage 2000是微软公司的 Office 2000办公组件之一,
它采用了,所见即所得,的网页编辑方式,易于普及,适合多数人员使用 。
4.4.1 FrontPage 2000的功能和特点
FrontPage 2000集网页的设计,编辑,网站的创建,管理和发布等多种功能于一体,较早期版本有了较大的改进 。 它的主要功能与特点如下：
(1) 用于创建,设计,发布,组织,管理和维护一个 Web站点
(2) 它是 Office 2000的一个组件,与 Office 2000完全结合,与其有相似的用户界面,很多相同的功能及部分共用资源 。
(3) 具有绝对和相对定位两种定位方式 。
(4) 提供多种样式,供用户选择 。
4.4.2 FrontPage 2000使用案例 ——简单网页制作
(1) 任务要求：使用 FrontPage 2000完成 4.2节中 4.2.5
HTML应用案例 4的制作。
(2) 制作步骤图 4.17 FrontPage 2000界面图 4.18,新建”网站对话框 图 4.19 My Webs站点的文件图 4.20 建立超级链接 图 4.21,创建超链接”对话框图 4.22 网页的超链接状况
4.5 网页制作实训 课题 ——
应用技术学院网站的建设
4.5.1 网页的基本元素和网页制作的基本步骤
1,网页的基本元素
2,网页制作的基本步骤图 4.23 网页制作步骤确定站点的目的搜集相关资料规划网页的内容网页组织结构制作网页测试与发布推广网页更新与维护前期准备中期制作后期维护
4.5.2 应用技术学院网站建设目标应用技术学院网站的主要目的是宣传学院的建设与发展，为学生、教师和社会服务。
4.5.3 搜集有关资料、规划网页内容
4.5.4 绘制网站结构蓝图图 4.24 应用技术学院网站蓝图首 页应 用 技 术 学 院 主 页学院概况 专业介绍 师资力量 班级查询
9921 9922 9821
4.5.5 制作网页
1,创建网站
(1) 启动 Front Page 2000,单击菜单栏中的,文件,,在下拉菜单中单击,新建,,在级连菜单中单击,网站,
选项,弹出,新建,对话框,如图 4.25所示 。
(2) 对话框中列出三个站点建立向导和五个网站模板 。
图 4.25,新建”网站对话框
2,制作首页
(1) 制作标题。 图 4.26 新创建的网站
(2)在表格中输入标题“北京联合大学”，并编辑标题显示的字体、大小和颜色，如图 4.27所示。
图 4.27 编辑标题
(3) 插入按钮 。 另起一行,把光标移到中间的位置,在菜单栏中选择,插入 → 图片 → 来自文件,选项,出现,图片,
对话框,如图 4.28所示,在对话框中选择按钮图片的文件名,本案例是,anniu1.gif”,单击,确定,按钮 。
图 4.28 插入按钮
(4) 插入字幕图 4.29,字幕属性”对话框
(5) 在字幕的下一行插入学校外景图片,图片的名称是
,back0.gif”。
图 4.30 预览首页
3,制作应用技术学院主页在工具栏中选择,新建网页,图标,在编辑窗口出现一个新网页,默认名为 new_page_2.htm。
(1) 制定页面布局图 4.31,插入行或列,对话框 图 4.32 主页布局
(2) 网站导航栏目在表格“网站导航”栏目单元格中单击鼠标右键，
在弹出的下拉菜单中选择“单元格属性”，弹出,单元格属性”对话框，如图 4.33所示。
图 4.33,单元格属性”对话框图 4.34,图片”对话框图 4.35 网站导航单元格 图 4.36 主页的标题栏
(3) 制作“应用技术学院标题”栏目
(4) 制作“联络信息”栏目图 4.37,联络信息,栏目
4,创建首页与主页的超链接
(1) 在 FrontPage 2000 的,文件夹列表,栏 目 中 双 击
new_page_1.htm文件,打开首页,用鼠标右键单击首页上的按钮图片,弹出下拉菜单,在下拉菜单中选择,超链接,,
弹出,创建超链接,对话框,如图 4.38所示 。
图 4.38 创建超级链接
(2) 以同样方法，打开主页，文件名是 new_page_2.htm。
鼠标右键单击主页上的,BACK”按钮，在下拉菜单中选择“超链接”，在,URL”栏目的文本框输入首页的
URL，本案例是 new_page_1.htm，主页与首页的超链接成功。
(3) 预览首页与主页的超链接 。 在 FrontPage 2000的编辑窗口选择的,预览,标签,单击首页的进入按钮,页面跳转到主页 。 同样,单击主页的,BACK”按钮,返回到首页 。 说明首页与主页的超链接成功 。
5.,专业介绍,页面制作在工具栏中选择“新建网页”图标，在编辑窗口出现一个新网页，默认名为 new_page_3.htm。在“专业介绍”
页面中，增加背景图案。在菜单栏中选择“格式 → 背景”,弹出“网页属性”对话框，如图 4.38所示。
图 4.39,网页属性”对话框
4.5.6 测试网页用户可以在浏览器或 FrontPage 2000的,预览,标签中测试制作完成的网站,是否符合需求 。
4.5.7 网站的发布
1,在个人 Web服务器上发布网站
(1) 把 Windows 98的个人 Web服务器设置为默认 Web服务器,执行图 4.40,FrontPage Server Administrator”对话框
2,在 IIS上发布网站练 习
1,HTML的中文名称和英文名称是什么？ 它在页面中起什么作用？
2,DHTML的英文名称是什么？ 它的主要作用是什么
3,开发者可以使用哪几种编辑器编辑 HTML文档,请列举出一,二种常用的编辑器的名称 。
4,HTML文档的扩展名是什么？
5,HTML的本质是什么,它是什么格式的文件？
6,HTML文件的结构是什么样的？
7,DHTML技术主要由哪几部分组成？
8,CSS的主要功能是什么？
9,FrontPage 2000的新特点和新功能是什么？
简述 FrontPage 2000界面的基本组成。
10,简述 FrontPage 2000界面的基本组成 。
11,如何使用 FrontPage 2000在网页中嵌入图片,把一幅图片设置为超链接？
12,网页的基本元素有哪些？
13,一般来讲建设一个网站要经过哪几个步骤？
14,如何发布网页？
上 机 练 习上机练习 1：使用 HTML制作一个页面,要有背景图案,
页面显示内容及格式,如图 4.47所示 。
图 4.47 页面显示内容及格式上机练习 2：制作一个页面显示如下图形：
*
* *
* * *
* * * *
* * *
* *
*
上机练习 3：使用 HTML/DHTML技术制作一个本学期使用的课表 。
上机练习 4：制作一个页面,上有文字和图像,在文字和图像上创建超级链接,当用户点击链接时,页面转跳到其他页面 。
上机练习 5：制作一个计算器界面,界面如图 4.48所示 。
图 4.48 计算器界面上机练习 6：使用 DHTML技术制作一个页面,页面内容及显示格式如下：
DHTML技术 (红色 )
CSS用于定义 Web页面内容在浏览器上的显示方式,由于
HTML的功能有限,一般不能随意设计版面和编排文字,所以 W3C公布了一套 HTML的扩展标准 CSS,扩展了 HTML在排版和文字式样上的功能 (蓝色 )。
通过样式定义可以设定很多属性，如字号、颜色、页边距、元素在页面上的绝对位置等 (紫色 )。
上机练习 7：修改上机练习 5的代码,使页面上的文字和按钮具有动态效果 。 例如,当用户把鼠标移动到按钮上时,按钮将改变其显示方式等 。
上机练习 8：制作一个页面,使图像的说明文字在图像之中,
请注意文字颜色的选择,使用户能把图像和文字区分开 。
上机练习 9：制作一个页面,页面上有七幅图像,其中三幅图像和有关图像的说明排成一列,另外四幅和有关图像的说明排成一行 。
上机练习 10,熟悉 FrontPage 2000界面的应用,并制作一个简单的站点 。
实训课题实训课题 1：使用 FrontPage 2000制作一个个人网站,在人才市场推销自己,制作完成后进行测试并发布 (可以在个人 Web服务器上进行发布 )。
实训课题 2：使用 FrontPage 2000为某企业制作一个网站 。
实训课题 3：使用 FrontPage 2000“讨论站点向导,建立一个电子论坛,讨论共同感兴趣的问题 。
实训课题 4：使用 FrontPage 2000开发一个年级网站,网站包含以下内容：
(1) 读者所在系的信息 。
(2) 所在年级信息 。
(3) 所在班级信息 。
(4) 每个同学的信息 。
为完成实训课题 4,需要成立：
(1) 年级设计与规划小组,负责年级网站的规划,设计,
信息采集与年级网站蓝图的制作,并分配与协调班级网页的制作工作 。
(2) 班级设计与规划小组,负责班级网站的规划,设计,
信息采集与班级网站蓝图的制作并分配与协调个人网页的制作工作 。
(1) 通过 HTML/DHTML示例掌握它们的基本知识与结构 。
(2) 通过案例掌握 HTML的应用 。
(3) 通过案例掌握 DHTML技术 。
(4) 通过案例掌握 FrontPage2000的使用 。
(5) 通过实训课题掌握主页系统的制作与发布技术 。
HTML/DHTML的应用
4.1 HTML/DHTML的结构
4.2 HTML的应用
4.3 DHTML技术基础
4.4 可视化页面制作与管理工具 FrontPage
2000
4.5 网页制作实训课题 ——应用技术学院网站的建设
练 习
上机练习
实训课题
4.1 HTML/DHTML的结构
4.1.1 HTML的结构 ——HTML示例
1,一个 HTML示例为了使读者对 HTML有一个整体的了解,我们将和读者一起来制作一个简单网页 。 请按以下步骤进行：
(1) 编写 HTML代码使用简单的文字编辑器 。
(2) 以扩展名,,html”保存文件 。 在只支持三个字母作后缀的操作系统中,它的扩展名是,,htm”。
(3) 在浏览器中显示页面 ex04-001.html,显示效果如图 4.1所示 。
图 4.1 页面代码 ex04-001在浏览器中的显示
(4)在图 4.1中单击,中国高等职业技术教育研究会,,页面将转跳至代码 ex04-002所显示的页面 。 如图 4.2所示 。
图 4.2 页面转跳到 ex04-002
(5) 我们以页面代码 ex04-001.html为例说明 HTML的简单使用 。
2,HTML的结构图 4.3 HTML文件结构
4.1.2 DHTM的结构 ——DHTML示例
1,什么是 DHTML
传统的 HTML页面一旦被下载到客户端的浏览器后,就无法改变显示内容,所以被称为静态网页 。
使用 DHTML技术制作的网页,在其内容下载到浏览器后,不必通过服务器就可以使浏览器与用户交互信息,更新网页内容,所以被称为动态网页 。
2,一个 DHTML示例
(1) 请读者在编辑器中输入 ex04-003.html的代码 。
(2) ex04-003.html在浏览器中的显示效果如图 4.4所示 。
(3) 把鼠标移动到文字,鼠标移到此处,新增一行文字,处,
页面产生动态变化,新增加一行文字 。 浏览器显示如图 4.5
所示 。
(4) 请读者把鼠标移到改变文字颜色的文本上,文字将变成红色,移开后文字变成蓝色 。
图 4.4 DHTML示例 图 4.5 动态改变网页
(5) 读者可以看到，在 HTML的基础上使用了脚本语言 (Script)，
使网页产生动态效应。
3,?DHTML结构
(1) DHTML的特点。
(2) DHTML的结构。
图 4.6 DHTML的组成
4.2 HTML的应用
4.2.1 HTML标记的格式
<标记 >HTML语言元素 </标记 >
·例如,<H2> 你好 ！ </H2>
·标记与字母的大小写无关,例如 <BODY> 与 <body>的作用是一样的 。
·标记可以带有属性参数 。
·注释标记 <!--注释内容 -->不在浏览器中显示,只供阅读页面代码帮助理解使用 。
4.2.2 HTML应用案例 1——文本标记
(1) 文本标记主要用于控制页面的段落,显示字符的大小,
颜色,字体和属性等 。
(2) 页面代码 ex04-004.html说明了文本标记的使用 。
(3) ex04-004.html在浏览器中的显示效果如图 4.7所示。
图 4.7 文本标记的使用
(4) 代码说明图 4.8 图像标记的使用
4.2.4 HTML应用案例 3——表格标记
(1) 表格标记 <TABLE>
(2) 页面代码 ex04-006.html说明了表格标记的使用
(3) 该代码在浏览器中的显示效果如图 4.9所示图 4.9 基本表格
4.2.5 HTML应用案例 4——超级链接标记
(1)?<A>标记的使用 。
(2) 页面代码 ex04-007.html说明了超级链接标记的使用
(3) 页面代码在浏览器中显示如图 4.10所示图 4.10 超级链接的使用
(4) 代码说明如下
4.2.6 HTML应用案例 5——表单 (FORM)和输入标记
(1) 表单的作用
(2) 页面代码 ex04-008.html说明了表单标记的使用
(3) 代码在浏览器中显示如图 4.11所示。
图 4.11 表单标记的使用
(4) 代码说明
4.3 DHTML技术基础
4.3.1 CSS的基本概念
CSS用于定义 Web页面内容在浏览器上的显示方式，
由于 HTML的功能有限，一般不能随意设计版面和编排文字，所以 W3C公布了一套 HTML的扩展标准 CSS，
扩展了 HTML在排版和文字式样上的功能。
1,CSS的基本概念
2,样式单的使用方式
3,定义样式的基本格式定义样式的基本格式是,图 4.12 样式文件的使用方式选择器 { 规则 }
4.3.2 样式应用案例 1——把样式套用到网页上
1,任务要求请在浏览器窗口中输出如下字样的文字 。 见图 4.13。
图 4.13 网页样式要求
2,实现方案 1：内联式样式单内联式样式只包含在与它有关的标记内，对页面上其他任何标记不起作用。
3,实现方案 2：嵌入式样式单
4,实现方案 3:外部 (链接 )样式单
(1) 建立样式文件
(2) 在 HTML文档中建立与外部样式文件的链接
4.3.3 样式应用案例 2——动态风格
(1) 动态风格简介。动态内容是指不需要下载或重新构建一个完整的新页面，就可以改变文档的部分内容。
(2) 任务要求。制作一个动态按钮，当鼠标移动到按钮上时，按钮上的字变为黄色，背景变成蓝色。
图 4.14 任务要求
(3) 页面代码 ex04-011.html实现如上功能
(4) 代码说明
4.3.4 样式应用案例 3——页面定位
(1) 页面定位。页面定位是指网页作者可以精确地将一个网页元素定位在某一个坐标。
(2)任务要求：制作一个页面,在页面中使一幅图像与文字有部分重叠 。
(3) 完成该任务 ex04-012.html的代码清单
(4) 该代码在浏览器中显示如图 4.15。
图 4.15 网页元素定位
4.3.5 样式应用案例 4——版面配置
(1) 网页中图像和文字配置得当，可以使一个网页的视觉效果良好。
(2) 任务要求：制作一个页面,在页面上有四幅图像,使用
<DIV>和 <SPAN>标记,使其中两幅在不同行,两幅在同一行显示 。 页面如图 4.16所示 。
图 4.16 <DIV>和 <SPAN>标记的使用
(3) 完成该任务 ex04-013.html的代码清单
4.4 可视化页面制作与管理工具
FrontPage 2000
FrontPage 2000是微软公司的 Office 2000办公组件之一,
它采用了,所见即所得,的网页编辑方式,易于普及,适合多数人员使用 。
4.4.1 FrontPage 2000的功能和特点
FrontPage 2000集网页的设计,编辑,网站的创建,管理和发布等多种功能于一体,较早期版本有了较大的改进 。 它的主要功能与特点如下：
(1) 用于创建,设计,发布,组织,管理和维护一个 Web站点
(2) 它是 Office 2000的一个组件,与 Office 2000完全结合,与其有相似的用户界面,很多相同的功能及部分共用资源 。
(3) 具有绝对和相对定位两种定位方式 。
(4) 提供多种样式,供用户选择 。
4.4.2 FrontPage 2000使用案例 ——简单网页制作
(1) 任务要求：使用 FrontPage 2000完成 4.2节中 4.2.5
HTML应用案例 4的制作。
(2) 制作步骤图 4.17 FrontPage 2000界面图 4.18,新建”网站对话框 图 4.19 My Webs站点的文件图 4.20 建立超级链接 图 4.21,创建超链接”对话框图 4.22 网页的超链接状况
4.5 网页制作实训 课题 ——
应用技术学院网站的建设
4.5.1 网页的基本元素和网页制作的基本步骤
1,网页的基本元素
2,网页制作的基本步骤图 4.23 网页制作步骤确定站点的目的搜集相关资料规划网页的内容网页组织结构制作网页测试与发布推广网页更新与维护前期准备中期制作后期维护
4.5.2 应用技术学院网站建设目标应用技术学院网站的主要目的是宣传学院的建设与发展，为学生、教师和社会服务。
4.5.3 搜集有关资料、规划网页内容
4.5.4 绘制网站结构蓝图图 4.24 应用技术学院网站蓝图首 页应 用 技 术 学 院 主 页学院概况 专业介绍 师资力量 班级查询
9921 9922 9821
4.5.5 制作网页
1,创建网站
(1) 启动 Front Page 2000,单击菜单栏中的,文件,,在下拉菜单中单击,新建,,在级连菜单中单击,网站,
选项,弹出,新建,对话框,如图 4.25所示 。
(2) 对话框中列出三个站点建立向导和五个网站模板 。
图 4.25,新建”网站对话框
2,制作首页
(1) 制作标题。 图 4.26 新创建的网站
(2)在表格中输入标题“北京联合大学”，并编辑标题显示的字体、大小和颜色，如图 4.27所示。
图 4.27 编辑标题
(3) 插入按钮 。 另起一行,把光标移到中间的位置,在菜单栏中选择,插入 → 图片 → 来自文件,选项,出现,图片,
对话框,如图 4.28所示,在对话框中选择按钮图片的文件名,本案例是,anniu1.gif”,单击,确定,按钮 。
图 4.28 插入按钮
(4) 插入字幕图 4.29,字幕属性”对话框
(5) 在字幕的下一行插入学校外景图片,图片的名称是
,back0.gif”。
图 4.30 预览首页
3,制作应用技术学院主页在工具栏中选择,新建网页,图标,在编辑窗口出现一个新网页,默认名为 new_page_2.htm。
(1) 制定页面布局图 4.31,插入行或列,对话框 图 4.32 主页布局
(2) 网站导航栏目在表格“网站导航”栏目单元格中单击鼠标右键，
在弹出的下拉菜单中选择“单元格属性”，弹出,单元格属性”对话框，如图 4.33所示。
图 4.33,单元格属性”对话框图 4.34,图片”对话框图 4.35 网站导航单元格 图 4.36 主页的标题栏
(3) 制作“应用技术学院标题”栏目
(4) 制作“联络信息”栏目图 4.37,联络信息,栏目
4,创建首页与主页的超链接
(1) 在 FrontPage 2000 的,文件夹列表,栏 目 中 双 击
new_page_1.htm文件,打开首页,用鼠标右键单击首页上的按钮图片,弹出下拉菜单,在下拉菜单中选择,超链接,,
弹出,创建超链接,对话框,如图 4.38所示 。
图 4.38 创建超级链接
(2) 以同样方法，打开主页，文件名是 new_page_2.htm。
鼠标右键单击主页上的,BACK”按钮，在下拉菜单中选择“超链接”，在,URL”栏目的文本框输入首页的
URL，本案例是 new_page_1.htm，主页与首页的超链接成功。
(3) 预览首页与主页的超链接 。 在 FrontPage 2000的编辑窗口选择的,预览,标签,单击首页的进入按钮,页面跳转到主页 。 同样,单击主页的,BACK”按钮,返回到首页 。 说明首页与主页的超链接成功 。
5.,专业介绍,页面制作在工具栏中选择“新建网页”图标，在编辑窗口出现一个新网页，默认名为 new_page_3.htm。在“专业介绍”
页面中，增加背景图案。在菜单栏中选择“格式 → 背景”,弹出“网页属性”对话框，如图 4.38所示。
图 4.39,网页属性”对话框
4.5.6 测试网页用户可以在浏览器或 FrontPage 2000的,预览,标签中测试制作完成的网站,是否符合需求 。
4.5.7 网站的发布
1,在个人 Web服务器上发布网站
(1) 把 Windows 98的个人 Web服务器设置为默认 Web服务器,执行图 4.40,FrontPage Server Administrator”对话框
2,在 IIS上发布网站练 习
1,HTML的中文名称和英文名称是什么？ 它在页面中起什么作用？
2,DHTML的英文名称是什么？ 它的主要作用是什么
3,开发者可以使用哪几种编辑器编辑 HTML文档,请列举出一,二种常用的编辑器的名称 。
4,HTML文档的扩展名是什么？
5,HTML的本质是什么,它是什么格式的文件？
6,HTML文件的结构是什么样的？
7,DHTML技术主要由哪几部分组成？
8,CSS的主要功能是什么？
9,FrontPage 2000的新特点和新功能是什么？
简述 FrontPage 2000界面的基本组成。
10,简述 FrontPage 2000界面的基本组成 。
11,如何使用 FrontPage 2000在网页中嵌入图片,把一幅图片设置为超链接？
12,网页的基本元素有哪些？
13,一般来讲建设一个网站要经过哪几个步骤？
14,如何发布网页？
上 机 练 习上机练习 1：使用 HTML制作一个页面,要有背景图案,
页面显示内容及格式,如图 4.47所示 。
图 4.47 页面显示内容及格式上机练习 2：制作一个页面显示如下图形：
*
* *
* * *
* * * *
* * *
* *
*
上机练习 3：使用 HTML/DHTML技术制作一个本学期使用的课表 。
上机练习 4：制作一个页面,上有文字和图像,在文字和图像上创建超级链接,当用户点击链接时,页面转跳到其他页面 。
上机练习 5：制作一个计算器界面,界面如图 4.48所示 。
图 4.48 计算器界面上机练习 6：使用 DHTML技术制作一个页面,页面内容及显示格式如下：
DHTML技术 (红色 )
CSS用于定义 Web页面内容在浏览器上的显示方式,由于
HTML的功能有限,一般不能随意设计版面和编排文字,所以 W3C公布了一套 HTML的扩展标准 CSS,扩展了 HTML在排版和文字式样上的功能 (蓝色 )。
通过样式定义可以设定很多属性，如字号、颜色、页边距、元素在页面上的绝对位置等 (紫色 )。
上机练习 7：修改上机练习 5的代码,使页面上的文字和按钮具有动态效果 。 例如,当用户把鼠标移动到按钮上时,按钮将改变其显示方式等 。
上机练习 8：制作一个页面,使图像的说明文字在图像之中,
请注意文字颜色的选择,使用户能把图像和文字区分开 。
上机练习 9：制作一个页面,页面上有七幅图像,其中三幅图像和有关图像的说明排成一列,另外四幅和有关图像的说明排成一行 。
上机练习 10,熟悉 FrontPage 2000界面的应用,并制作一个简单的站点 。
实训课题实训课题 1：使用 FrontPage 2000制作一个个人网站,在人才市场推销自己,制作完成后进行测试并发布 (可以在个人 Web服务器上进行发布 )。
实训课题 2：使用 FrontPage 2000为某企业制作一个网站 。
实训课题 3：使用 FrontPage 2000“讨论站点向导,建立一个电子论坛,讨论共同感兴趣的问题 。
实训课题 4：使用 FrontPage 2000开发一个年级网站,网站包含以下内容：
(1) 读者所在系的信息 。
(2) 所在年级信息 。
(3) 所在班级信息 。
(4) 每个同学的信息 。
为完成实训课题 4,需要成立：
(1) 年级设计与规划小组,负责年级网站的规划,设计,
信息采集与年级网站蓝图的制作,并分配与协调班级网页的制作工作 。
(2) 班级设计与规划小组,负责班级网站的规划,设计,
信息采集与班级网站蓝图的制作并分配与协调个人网页的制作工作 。
