《网页基础：第2章Web页面制作基础.ppt》由会员分享，可在线阅读，更多相关《网页基础：第2章Web页面制作基础.ppt（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.1.1 HTML概述,HT
2、ML是（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结构的网页,返回本节,2.1.3
3、HTML标记,1HTML文档标记格式：功能：标志文档开始和结尾的标记。2HTML文件头标记格式：功能：用于包含文件的基本信息。3HTML文件主体标记格式：功能：文件主体标记。,返回本节,2.1.4 常用HTML编辑工具,使用HTML编辑器可以很容易的设计精彩的网页，实际上，任何一个文档编辑器都是HTML编辑器，这也是网页制作之所以流行的一个原因。HTML作为最基本的网页编辑语言，能够实现网页的各种效果。但是，它毕竟是一种语言，需要记住一些标记。,返回本节,2.2 文档的格式与风格,2.2.1 设置的属性2.2.2 段落格式化2.2.3 建立列表2.2.4 字符的格式化,返回首页,2.2.1 设
4、置的属性,作为网页的主体部分，有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等，主要属性如表2-1所示。,表2-1 BODY标记属性值,返回本节,2.2.2 段落格式化,1标题标记格式：，功能：设置各种大小不同标题的标记。2段落标记格式：功能：设置段落标记。3预定义格式标记格式：功能：在浏览器中浏览时，按照文档中预先排好的形式显示内容。,4分区显示标记格式：功能：分区显示标记。5换行标记格式：功能：强制换行。6水平线标记格式：功能：插入水平线标记。7注释标记格式：功能：注释标记。,标题标记,例2-2：标题示例！hello wor
5、ld!hello world!hello world!hello world!hello world!hello world!,图2-2 标题的效果,预定义格式标记,例2-3：显示的区别春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。春晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。,图2-3 与的区别,水平线标记,表2-2 属性值,注释标记,例2-4：标记的使用三种标记的使用！我在中间！中间我在左边！左边我在右边！右边,图2-4 三种标记的使用,返回本节,建立列表,1有序列表格式：功能：建立有序列表。,2无序列表格式：功能：建立无序列表。,例2-5：列表示例计算机新书ASP程序设计HT
6、ML网页设计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插入图像当
7、使用插入图像时，含有的属性如表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
8、 中行的属性,格式：功能：定义表格中的单元格。对于每一个单元格，主要属性如表2-10所示。,例2-7：多层表格嵌套实例！跟我学网页制作,基础知识简介 第一讲 HTML简介 第二讲 HTML标记 第三讲 CSS基础,HTML最新课堂 高级应用技术 多层表格嵌套示例,图2-7 表格的嵌套,返回本节,2.5 制作表单,2.5.1 表单的结构2.5.2 FORM中常用的标记,返回首页,2.5.1 表单的结构,在Web网页上，包含各式各样的输入表单（FORM）。格式：功能：定义表单。在中要包含很多控件来实现整个表单的交互功能，另外标记还有很多的属性来协助完成此项功能。,返回本节,2.5.2 FORM中常
9、用的标记,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 属
10、性值,表2-15 属性值,例2-9：选择域!请选择喜欢的颜色:红色 蓝色 绿色 黑色 白色 紫色,返回本节,2.6 框架结构,2.6.1 框架结构的文件格式2.6.2 框架结构标记的使用2.6.3 FRAME标记2.6.4 TARGET属性的使用,返回首页,2.6.1 框架结构的文件格式,框架结构有开始标记和结束标记，框架所有内容都应该在和之间。在 标记内使用标记来指定框架中每个小（子）窗口的内容。其具体格式如下：,返回本节,2.6.2 框架结构标记的使用,格式：功能：定义一个框架容器。主要属性见如2-16所示。,返回本节,2.6.3 FRAME标记,格式：功能：在网页中定义框架。FRAME是
11、一个单一标记，使用时放在FRAMESET的开始和结束标记之间。它有6个属性来描述每个子窗口的风格，属性值的功能如表2-17所示。,表2-17 主要属性值,返回本节,2.6.4 TARGET属性的使用,1用于A标记在A标记中，除了指定被链接的文件之外，还可以用TARGET属性指定被链接的文件显示在哪个子窗口。语法如下：A HREF=TARGET=WINDOWS_NAME2用于BASE标记如果在同一个文件中有多个链接都指向同一个子窗口，那么使用BASE语句将更简单。语法如下：BASE TARGET=WINDOWS_NAME3用于FORM标记如果想把提交表单的结果放在指定的窗口，可以在FORM标记中
12、使用TARGET属性。FORM ACTION=TARGET=WINDOWS_NAME,例2-10：FRAMESET示例,图2-10 框架结构的使用,返回本节,2.7 CSS基础,2.7.1 CSS样式简介2.7.2 CSS样式表的定义2.7.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输入式样式表,返回本节,
