文档介绍：第4章 HTML/DHTML的应用
本章训练目标:
(1) 通过HTML/DHTML示例掌握它们的基本知识与结构。
(2) 通过案例掌握HTML的应用。
(3) 通过案例掌握DHTML技术。
(4) 通过案例掌握 FrontPage2000的使用。
(5) 通过实训课题掌握主页系统的制作与发布技术。
HTML/DHTML的应用
HTML/DHTML的结构
HTML的应用
DHTML技术基础
可视化页面制作与管理工具 FrontPage 2000
网页制作实训课题——应用技术学院网站的建设
练习
上机练习
实训课题
HTML/DHTML的结构
HTML的结构——HTML示例
1. 一个HTML示例
为了使读者对HTML有一个整体的了解,我们将和读者一起来制作一个简单网页。请按以下步骤进行:
(1) 编写HTML代码使用简单的文字编辑器。
(2) 以扩展名“.html”保存文件。在只支持三个字母作后缀的操作系统中,它的扩展名是“.htm”。
(3) 在浏览器中显示页面ex04-,。
页面代码ex04-001在浏览器中的显示
(4)“中国高等职业技术教育研究会”,页面将转跳至代码ex04-002所显示的页面。。
页面转跳到ex04-002
(5) 我们以页面代码ex04-。
2. HTML的结构
HTML文件结构
DHTM的结构——DHTML示例
1. 什么是DHTML
传统的HTML页面一旦被下载到客户端的浏览器后,就无法改变显示内容,所以被称为静态网页。
使用DHTML技术制作的网页,在其内容下载到浏览器后,不必通过服务器就可以使浏览器与用户交互信息,更新网页内容,所以被称为动态网页。
2. 一个DHTML示例
(1) 请读者在编辑器中输入ex04-。
(2) ex04-。
(3) 把鼠标移动到文字“鼠标移到此处,新增一行文字”处,页面产生动态变化,新增加一行文字。。
(4) 请读者把鼠标移到改变文字颜色的文本上,文字将变成红色,移开后文字变成蓝色。
动态改变网页
(5) 读者可以看到,在HTML的基础上使用了脚本语言(Script),使网页产生动态效应。
3. DHTML结构
(1) DHTML的特点。
(2) DHTML的结构。
DHTML的组成
HTML的应用
HTML标记的格式
<标记>HTML语言元素</标记>
·例如:<H2> 你好!</H2>
·标记与字母的大小写无关,例如<BODY> 与<body>的作用是一样的。
·标记可以带有属性参数。
·注释标记不在浏览器中显示,只供阅读页面代码帮助理解使用。
HTML应用案例1——文本标记
(1) 文本标记主要用于控制页面的段落,显示字符的大小、颜色、字体和属性等。
(2) 页面代码ex04-。
(3) ex04-。
文本标记的使用
(4) 代码说明

图像标记的使用
HTML应用案例3——表格标记
(1) 表格标记<TABLE>
(2) 页面代码ex04-
(3)
基本表格
HTML应用案例4——超级链接标记
(1) <A>标记的使用。
(2) 页面代码ex04-
(3)
超级链接的使用
(4) 代码说明如下
HTML应用案例5——表单(FORM)和输入标记
(1) 表单的作用
(2) 页面代码ex04-
(3) 。