《网页基础：第2章web页面制作基础》由会员分享，可在线阅读，更多相关《网页基础：第2章web页面制作基础（73页珍藏版）》请在金锄头文库上搜索。
1、第2章 Web页面制作基础,2.1 HTML语言概述 2.2 文档的格式与风格 2.3 加入多媒体与超级链接 2.4 制作表格 2.5 制作表单 2.6 框架结构 2.7 CSS基础,本章学习目标,本章将详细介绍使用HTML语言（Hyper Text Markup Language）编辑绚丽多彩的Web页面。通过本章的学习，读者应掌握以下内容： Web页面文档格式的设计方法 如何加入多媒体和超级链接 表单的制作 框架的使用 CSS基础知识,2.1 HTML语言概述,2.1.1 HTML概述 2.1.2 HTML文档的结构 2.1.3 HTML标记 2.1.4 常用HTML编辑工具,返回首页,2
2、.1.1 HTML概述,HTML是（Hyper Text Markup Language，超文本标记语言）的缩写，最早源于SGML语言（Standard General Markup Language，标准通用化标记语言），是由Web页面的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种新颖的标记式语言，它是SGML的应用。到90年代后期，由于网络的飞速发展，使得HTML也达到了空前的繁荣，在WWW革命中扮演了核心技术的角色。,返回本节,2.1.2 HTML文档的结构,HTML语言的基本结构： 头部信息 正文部分 ,图2-1 一个说明HTML结
3、构的网页,返回本节,2.1.3 HTML标记,1HTML文档标记 格式： 功能：标志文档开始和结尾的标记。 2HTML文件头标记 格式： 功能：用于包含文件的基本信息。 3HTML文件主体标记 格式： 功能：文件主体标记。,返回本节,2.1.4 常用HTML编辑工具,使用HTML编辑器可以很容易的设计精彩的网页，实际上，任何一个文档编辑器都是HTML编辑器，这也是网页制作之所以流行的一个原因。 HTML作为最基本的网页编辑语言，能够实现网页的各种效果。但是，它毕竟是一种语言，需要记住一些标记。,返回本节,2.2 文档的格式与风格,2.2.1 设置的属性 2.2.2 段落格式化 2.2.3 建立
4、列表 2.2.4 字符的格式化,返回首页,2.2.1 设置的属性,作为网页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表2-1所示。,表2-1 BODY标记属性值,返回本节,2.2.2 段落格式化,1标题标记 格式：， 功能：设置各种大小不同标题的标记。 2段落标记 格式： 功能：设置段落标记。 3预定义格式标记 格式： 功能：在浏览器中浏览时，按照文档中预先排好的形式显示内容。,4分区显示标记 格式： 功能：分区显示标记。 5换行标记 格式： 功能：强制换行。 6水平线标记 格式： 功能：插入水平线
5、标记。 7注释标记 格式： 功能：注释标记。,标题标记,例2-2： 标题示例！ hello world! hello world! hello world! hello world! hello world! hello world! ,图2-2 标题的效果,预定义格式标记,例2-3： 显示的区别 春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 ,图2-3 与的区别,水平线标记,表2-2 属性值,注释标记,例2-4： 标记的使用 三种标记的使用！ 我在中间！中间 我在左边！左边 我在右边！右边 ,图2-4 三种标记的使用,返回
6、本节,2.2.3 建立列表,1有序列表 格式： 功能：建立有序列表。,2无序列表 格式： 功能：建立无序列表。,例2-5： 列表示例 计算机新书 ASP程序设计 HTML网页设计 FrontPage使用指南 英语新书 外经贸英语 实用英语翻译 朗文英语语法 ,图2-5 有序列表与无序列表的区别,3自定义列表 除了上述两种列表以外，还可以根据需要自定义列表样式。格式为： ,返回本节,2.2.4 字符的格式化,1字体设置标记 格式： 功能：设置字体格式标记。 标记提供了几种属性，如表2-3所示，使用它们可以很容易的设置字体的大小、颜色、字型等。,表2-3 属性值,例2-6： 字符格式设置 我是标记
7、！ ,图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 建立表格,格式： 功能：创建表格。 在浏览器中显示时，表格的整体外观由该标记的属性决定
8、，主要属性如表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.2 FORM中常用的标
9、记,返回首页,2.5.1 表单的结构,在Web网页上，包含各式各样的输入表单（FORM）。 格式： 功能：定义表单。 在中要包含很多控件来实现整个表单的交互功能，另外标记还有很多的属性来协助完成此项功能。,返回本节,2.5.2 FORM中常用的标记,1输入域 （1）单行输入域。 格式： 功能：单一标记，是表单中提供给用户进行输入的一种形式。,表2-11 标记的属性值,1）text类型。 2）password类型。 3）radio类型。 4）checkbox类型。 5）submit类型。 6）reset类型。 7）hidden类型。,（2）多行输入域。 格式为： 功能：定义多行文本输入域。主要属
10、性如表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.3 FRAME标记 2.6.4 TARGET属性的使用,返回首页,2.6.1 框架结构的文件格式,框架结构有开始标记和结
11、束标记，框架所有内容都应该在和之间。在 标记内使用标记来指定框架中每个小（子）窗口的内容。其具体格式如下： ,返回本节,2.6.2 框架结构标记的使用,格式： 功能：定义一个框架容器。主要属性见如2-16所示。,返回本节,2.6.3 FRAME标记,格式： 功能：在网页中定义框架。 FRAME是一个单一标记，使用时放在FRAMESET的开始和结束标记之间。它有6个属性来描述每个子窗口的风格，属性值的功能如表2-17所示。,表2-17 主要属性值,返回本节,2.6.4 TARGET属性的使用,1用于A标记 在A标记中，除了指定被链接的文件之外，还可以用TARGET属性指定被链接的文件显示在哪个子
12、窗口。语法如下： A HREF = “ TARGET = “WINDOWS_NAME“ 2用于BASE标记 如果在同一个文件中有多个链接都指向同一个子窗口，那么使用BASE语句将更简单。语法如下： BASE TARGET= “WINDOWS_NAME“ 3用于FORM标记 如果想把提交表单的结果放在指定的窗口，可以在FORM标记中使用TARGET属性。 FORM ACTION = “ TARGET = “WINDOWS_NAME“,例2-10： FRAMESET示例 ,图2-10 框架结构的使用,返回本节,2.7 CSS基础,2.7.1 CSS样式简介 2.7.2 CSS样式表的定义 2.7.
13、3 在HTML中加入CSS的方法,返回首页,2.7.1 CSS样式简介,例2-11： CSS样式 CSS样式文本！arial，12pt，normal，blue！ ,图2-11 CSS样式,返回本节,2.7.2 CSS样式表的定义,1通过HTML标记定义 2用id属性定义样式表 3使用class定义样式表,例2-12： css实例 CSS基础 定义HTML标记样式表 ,图2-12 使用标记定义样式表,例2-13： id方法与class方法的使用与区别！ 使用class方法定义P 使用id方法定义FONT！ ,图2-13 id和class的使用和区别,返回本节,2.7.3 在HTML中加入CSS的方法,1嵌入式样式表 2内联式样式表 3外联式样式表 4输入式样式表,返回本节,
