网页基础：第2章Web页面制作基础.ppt

第2章Web页面制作基础 2 1HTML语言概述2 2文档的格式与风格2 3加入多媒体与超级链接2 4制作表格2 5制作表单2 6框架结构2 7CSS基础 本章学习目标 本章将详细介绍使用HTML语言 HyperTextMarkupLanguage 编辑绚丽多彩的Web页面 通过本章的学习 读者应掌握以下内容 Web页面文档格式的设计方法如何加入多媒体和超级链接表单的制作框架的使用CSS基础知识 2 1HTML语言概述 2 1 1HTML概述2 1 2HTML文档的结构2 1 3HTML标记2 1 4常用HTML编辑工具 返回首页 2 1 1HTML概述 HTML是 HyperTextMarkupLanguage 超文本标记语言 的缩写 最早源于SGML语言 StandardGeneralMarkupLanguage 标准通用化标记语言 是由Web页面的发明者TimBerners Lee和同事DanielW Connolly于1990年创立的一种新颖的标记式语言 它是SGML的应用 到90年代后期 由于网络的飞速发展 使得HTML也达到了空前的繁荣 在WWW革命中扮演了核心技术的角色 返回本节 2 1 2HTML文档的结构 HTML语言的基本结构 头部信息正文部分 图2 1一个说明HTML结构的网页 返回本节 2 1 3HTML标记 1 HTML文档标记格式 功能 标志文档开始和结尾的标记 2 HTML文件头标记格式 功能 用于包含文件的基本信息 3 HTML文件主体标记格式 功能 文件主体标记 返回本节 2 1 4常用HTML编辑工具 使用HTML编辑器可以很容易的设计精彩的网页 实际上 任何一个文档编辑器都是HTML编辑器 这也是网页制作之所以流行的一个原因 HTML作为最基本的网页编辑语言 能够实现网页的各种效果 但是 它毕竟是一种语言 需要记住一些标记 返回本节 2 2文档的格式与风格 2 2 1设置的属性2 2 2段落格式化2 2 3建立列表2 2 4字符的格式化 返回首页 2 2 1设置的属性 作为网页的主体部分 有很多的内置属性 这些属性用于设定网页的总体风格 例如 定义页面的背景图像 背景颜色 文字颜色以及超文本链接颜色等 主要属性如表2 1所示 表2 1BODY标记属性值 返回本节 2 2 2段落格式化 1 标题标记格式 功能 设置各种大小不同标题的标记 2 段落标记格式 功能 设置段落标记 3 预定义格式标记格式 功能 在浏览器中浏览时 按照文档中预先排好的形式显示内容 4 分区显示标记格式 功能 分区显示标记 5 换行标记格式 功能 强制换行 6 水平线标记格式 功能 插入水平线标记 7 注释标记格式 功能 注释标记 标题标记 例2 2 标题示例 helloworld helloworld helloworld helloworld helloworld helloworld 图2 2标题的效果 预定义格式标记 例2 3 显示的区别春晓春眠不觉晓 处处闻啼鸟 夜来风雨声 花落知多少 春晓春眠不觉晓 处处闻啼鸟 夜来风雨声 花落知多少 图2 3与的区别 水平线标记 表2 2属性值 注释标记 例2 4 标记的使用三种标记的使用 我在中间 中间我在左边 左边我在右边 右边 图2 4三种标记的使用 返回本节 2 2 3建立列表 1 有序列表格式 功能 建立有序列表 2 无序列表格式 功能 建立无序列表 例2 5 列表示例计算机新书ASP程序设计HTML网页设计FrontPage使用指南英语新书外经贸英语实用英语翻译朗文英语语法 图2 5有序列表与无序列表的区别 3 自定义列表除了上述两种列表以外 还可以根据需要自定义列表样式 格式为 返回本节 2 2 4字符的格式化 1 字体设置标记格式 功能 设置字体格式标记 标记提供了几种属性 如表2 3所示 使用它们可以很容易的设置字体的大小 颜色 字型等 表2 3属性值 例2 6 字符格式设置我是标记 图2 6字符格式设置标记的使用 返回本节 2 3加入多媒体与超级链接 2 3 1加入图像 视频 动画2 3 2加入超级链接 返回首页 2 3 1加入图像 视频 动画 1 插入图像当使用插入图像时 含有的属性如表2 5所示 2 插入视频当使用插入视频或Gif动画时 含有的属性如表2 6所示 返回本节 2 3 2加入超级链接 格式 功能 在当前页和其他页间建立超链接 主要属性如表2 7所示 返回本节 2 4制作表格 2 4 1建立表格2 4 2定制表格 返回首页 2 4 1建立表格 格式 功能 创建表格 在浏览器中显示时 表格的整体外观由该标记的属性决定 主要属性如表2 8所示 表2 8属性值 返回本节 2 4 2定制表格 使用只是定义空表格 还需要定义行和单元格 格式 功能 定义表格的一行 对于每一行 可以定义行属性 主要属性如表2 9所示 表2 9中行的属性 格式 功能 定义表格中的单元格 对于每一个单元格 主要属性如表2 10所示 例2 7 多层表格嵌套实例 跟我学网页制作 基础知识简介第一讲HTML简介第二讲HTML标记第三讲CSS基础 HTML最新课堂高级应用技术多层表格嵌套示例 图2 7表格的嵌套 返回本节 2 5制作表单 2 5 1表单的结构2 5 2FORM中常用的标记 返回首页 2 5 1表单的结构 在Web网页上 包含各式各样的输入表单 FORM 格式 功能 定义表单 在中要包含很多控件来实现整个表单的交互功能 另外标记还有很多的属性来协助完成此项功能 返回本节 2 5 2FORM中常用的标记 1 输入域 1 单行输入域 格式 功能 单一标记 是表单中提供给用户进行输入的一种形式 表2 11标记的属性值 1 text类型 2 password类型 3 radio类型 4 checkbox类型 5 submit类型 6 reset类型 7 hidden类型 2 多行输入域 格式为 功能 定义多行文本输入域 主要属性如表2 12所示 图2 8输入域例题 2 按钮定义按钮时 除了可以使用标记外 还可以使用标记 此标记为非表单控件的行内标记 格式 功能 定义按钮 主要属性如表2 13所示 表2 13属性值 3 选择域格式 选项一选项二 功能 定义选择栏 表2 14属性值 表2 15属性值 例2 9 选择域 请选择喜欢的颜色 红色蓝色绿色黑色白色紫色 返回本节 2 6框架结构 2 6 1框架结构的文件格式2 6 2框架结构标记的使用2 6 3FRAME标记2 6 4TARGET属性的使用 返回首页 2 6 1框架结构的文件格式 框架结构有开始标记和结束标记 框架所有内容都应该在和之间 在标记内使用标记来指定框架中每个小 子 窗口的内容 其具体格式如下 返回本节 2 6 2框架结构标记的使用 格式 功能 定义一个框架容器 主要属性见如2 16所示 返回本节 2 6 3FRAME标记 格式 功能 在网页中定义框架 FRAME是一个单一标记 使用时放在FRAMESET的开始和结束标记之间 它有6个属性来描述每个子窗口的风格 属性值的功能如表2 17所示 表2 17主要属性值 返回本节 2 6 4TARGET属性的使用 1 用于A标记在A标记中 除了指定被链接的文件之外 还可以用TARGET属性指定被链接的文件显示在哪个子窗口 语法如下 AHREF TARGET WINDOWS NAME 2 用于BASE标记如果在同一个文件中有多个链接都指向同一个子窗口 那么使用BASE语句将更简单 语法如下 BASETARGET WINDOWS NAME 3 用于FORM标记如果想把提交表单的结果放在指定的窗口 可以在FORM标记中使用TARGET属性 FORMACTION TARGET WINDOWS NAME 例2 10 FRAMESET示例 图2 10框架结构的使用 返回本节 2 7CSS基础 2 7 1CSS样式简介2 7 2CSS样式表的定义2 7 3在HTML中加入CSS的方法 返回首页 2 7 1CSS样式简介 例2 11 CSS样式CSS样式文本 arial 12pt normal blue 图2 11CSS样式 返回本节 2 7 2CSS样式表的定义 1 通过HTML标记定义2 用id属性定义样式表3 使用class