《Internet应用与网络 （樊月华） 第4章 HTML》由会员分享，可在线阅读，更多相关《Internet应用与网络 （樊月华） 第4章 HTML（42页珍藏版）》请在金锄头文库上搜索。
1、第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.
2、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)
3、 我们以页面代码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、“鼠标移到此处，新增一行文字”处，页面产生动态变化，新增加一行文字。浏览器显示如图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语言元素 例如： 你好！ 标记与字母的大小写无关，例如 与的作用是一样的。 标记可以带有属性参数。 注释标
5、记不在浏览器中显示，只供阅读页面代码帮助理解使用。 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) 表格标记 (2) 页面代码ex04-006.html说明了表格标记的使用 (3) 该代码在浏览器中的显示效果如图4.9所示 图4.9 基本表格 4.2.5 HTML应用案例
6、4超级链接标记 (1) 标记的使用。,(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的功能有限，一般不能随意设计版面和编排文字
7、，所以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文档中建立与外部样
8、式文件的链接 4.3.3 样式应用案例2动态风格 (1) 动态风格简介。动态内容是指不需要下载或重新构建一个完整的新页面，就可以改变文档的部分内容。 (2) 任务要求。制作一个动态按钮，当鼠标移动到按钮上时，按钮上的字变为黄色，背景变成蓝色。 图4.14 任务要求,(3) 页面代码ex04-011.html实现如上功能 (4) 代码说明 4.3.4 样式应用案例3页面定位 (1) 页面定位。页面定位是指网页作者可以精确地将一个 网页元素定位在某一个坐标。 (2)任务要求：制作一个页面，在页面中使一幅图像与文字有部分重叠。 (3) 完成该任务ex04-012.html的代码清单 (4) 该代码在
9、浏览器中显示如图4.15。 图4.15 网页元素定位,4.3.5 样式应用案例4版面配置 (1) 网页中图像和文字配置得当，可以使一个网页的视觉效果良好。 (2) 任务要求：制作一个页面，在页面上有四幅图像, 使用和标记，使其中两幅在不同行、两幅在同一行显示。页面如图4.16所示。 图4.16 和标记的使用 (3) 完成该任务ex04-013.html的代码清单,4.4 可视化页面制作与管理工具 FrontPage 2000,FrontPage 2000是微软公司的Office 2000办公组件之一，它采用了“所见即所得”的网页编辑方式，易于普及，适合多数人员使用。 4.4.1 FrontPa
10、ge 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的
11、制作。 (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 绘制网站结构蓝图 图
12、4.24 应用技术学院网站蓝图,4.5.5 制作网页 1. 创建网站 (1) 启动Front Page 2000，单击菜单栏中的“文件”，在下拉菜单中单击“新建”，在级连菜单中单击“网站”选项，弹出“新建”对话框，如图4.25所示。 (2) 对话框中列出三个站点建立向导和五个网站模板。 图4.25 “新建”网站对话框,2. 制作首页 (1) 制作标题。 图4.26 新创建的网站 (2)在表格中输入标题“北京联合大学”，并编辑标题显示的字体、大小和颜色，如图4.27所示。 图 4.27 编辑标题,(3) 插入按钮。另起一行， 把光标移到中间的位置，在菜单栏中选择“插入 图片 来自文件”选项，出现
13、“图片”对话框，如图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) 网站导航栏目 在表格“网站导航”栏目单元格中单击鼠标右键，在弹出的下拉菜单中选择“单元格属性”，
14、弹出 “单元格属性”对话框，如图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_pa
15、ge_2.htm。鼠标右键单击主页上的“BACK”按钮，在下拉菜单中选择“超链接”，在“URL”栏目的文本框输入首页的URL，本案例是new_page_1.htm，主页与首页的超链接成功。,(3) 预览首页与主页的超链接。在FrontPage 2000的编辑窗口选择的“预览”标签，单击首页的进入按钮，页面跳转到主页。同样，单击主页的“BACK”按钮， 返回到首页。说明首页与主页的超链接成功。 5. “专业介绍”页面制作 在工具栏中选择“新建网页”图标，在编辑窗口出现一个新网页，默认名为new_page_3.htm。在“专业介绍”页面中，增加背景图案。在菜单栏中选择“格式 背景”,弹出“网页属性
16、”对话框，如图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文档
