《网页基础：第2章Web页面制作基础.ppt》由会员分享，可在线阅读，更多相关《网页基础：第2章Web页面制作基础.ppt（73页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、第第2章章 Web页面制作基础页面制作基础n2.1 HTML语言概述语言概述n2.2 文档的格式与风格文档的格式与风格n2.3 加入多媒体与超级链接加入多媒体与超级链接n2.4 制作表格制作表格n2.5 制作表单制作表单n2.6 框架结构框架结构n2.7 CSS基础基础本章学习目标本章学习目标本本章章将将详细介介绍使使用用HTML语言言（Hyper Text Markup Language）编辑绚丽多多彩彩的的Web页面。通面。通过本章的学本章的学习，读者者应掌握以下内容：掌握以下内容：nWeb页面文档格式的面文档格式的设计方法方法n如何加入多媒体和超如何加入多媒体和超级链接接n表表单的制作的
2、制作n框架的使用框架的使用nCSS基基础知知识2.1 HTML语言概述语言概述n2.1.1 HTML概述概述n2.1.2 HTML文档的结构文档的结构n2.1.3 HTML标记标记n2.1.4 常用常用HTML编辑工具编辑工具返回首页2.1.1 HTML概述概述nHTML是是（Hyper Text Markup Language，超超文文本本标标记记语语言言）的的缩缩写写，最最早早源源 于于 SGML语语 言言（Standard General Markup Language，标标准准通通用用化化标标记记语语言言），是是由由Web页页面面的的发发明明者者Tim Berners-Lee和和同同事
3、事Daniel W.Connolly于于1990年年创创立立的的一一种种新新颖颖的的标标记记式式语语言言，它它是是SGML的的应应用用。到到90年年代代后后期期，由由于于网网络络的的飞飞速速发发展展，使使得得HTML也也达达到到了了空空前前的的繁繁荣荣，在在WWW革革命命中中扮演了核心技术的角色。扮演了核心技术的角色。返回本节2.1.2 HTML文档的结构文档的结构HTML语言的基本结构：语言的基本结构：头部信息头部信息 正文部分正文部分 图2-1 一个说明HTML结构的网页返回本节2.1.3 HTML标记标记1HTML文档标记格式：格式：功能：标志文档开始和结尾的标记。功能：标志文档开始和结
4、尾的标记。2HTML文件文件头标记格式：格式：功能：用于包含文件的基本信息。功能：用于包含文件的基本信息。3HTML文件主体文件主体标记格式：格式：功能：文件主体标记。功能：文件主体标记。返回本节2.1.4 常用常用HTML编辑工具编辑工具n使用使用HTML编辑器可以很容易的设计精彩的编辑器可以很容易的设计精彩的网页，实际上，任何一个文档编辑器都是网页，实际上，任何一个文档编辑器都是HTML编辑器，这也是网页制作之所以流行的编辑器，这也是网页制作之所以流行的一个原因。一个原因。nHTML作为最基本的网页编辑语言，能够实作为最基本的网页编辑语言，能够实现网页的各种效果。但是，它毕竟是一种语言，现
5、网页的各种效果。但是，它毕竟是一种语言，需要记住一些标记。需要记住一些标记。返回本节2.2 文档的格式与风格文档的格式与风格n2.2.1 设置设置的属性的属性n2.2.2 段落格式化段落格式化n2.2.3 建立列表建立列表n2.2.4 字符的格式化字符的格式化返回首页2.2.1 设置设置的属性的属性n作为网页的主体部作为网页的主体部分，有很多的内置属性，这些属性用于设定网分，有很多的内置属性，这些属性用于设定网页的总体风格。例如，定义页面的背景图像、页的总体风格。例如，定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等，背景颜色、文字颜色以及超文本链接颜色等，主要属性如表主要属性如表2
6、-1所示。所示。标记属性功能background=URL设置网页的背景图片bgcolor=colorvalue设置网页的背景颜色text=colorvalue设置文本的颜色link=colorvalue设置尚未被访问过的超文本链接的颜色，默认为蓝色vlink=colorvalue设置已被访问过的超文本链接的颜色，默认为紫色alink=colorvalue设置超文本链接在被单击的瞬间的颜色，默认为红色bgproperties=fixed设置背景是否随滚动条滚动leftmargin=size设置网页左边的空白topmargin=size设置网页上方的空白margingwidth=size设置网页空
7、白的宽度marginheight=size设置网页空白的高度表2-1 BODY标记属性值返回本节2.2.2 段落格式化段落格式化1标题标记格式：格式：，功能：设置各种大小不同标题的标记。功能：设置各种大小不同标题的标记。2段落标记格式：格式：功能：设置段落标记。功能：设置段落标记。3预定义格式标记格式：格式：功能：在浏览器中浏览时，按照文档中预先排好的形功能：在浏览器中浏览时，按照文档中预先排好的形式显示内容。式显示内容。4分区显示标记格式：格式：功能：分区显示标记。功能：分区显示标记。5换行标记格式：格式：功能：强制换行。功能：强制换行。6水平水平线标记格式：格式：功能：插入水平线标记。功能
8、：插入水平线标记。7注释标记格式：格式：功能：注释标记。功能：注释标记。标题标记例例2-2：标题示例！标题示例！hello world!hello world!hello world!hello world!hello world!hello world!图2-2 标题的效果预定义格式标记预定义格式标记 例例2-3：显示显示<p>与与<pre>的区别的区别春晓春晓春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。夜来风雨声，花落知多少。春晓春晓春眠不觉晓，处处闻啼鸟。春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。夜来风雨声，花落知多少。图2-3
9、与的区别水平水平线标记标记属性功能align=alignstyle设置对齐方式。alignstyle的取值为：left，right，centersize=size设置线条宽度（即高度）width=size设置线条长度color=colorvalue设置线条颜色，默认为黑色noshade设置线条是否有阴影表2-2 属性值 注释标记例例2-4：标记的使用标记的使用三种标记的使用！三种标记的使用！我在中间！我在中间！中间中间我在左边！我在左边！左边左边我在右边！我在右边！右边右边图2-4 三种标记的使用返回本节 建立列表建立列表1有序列表格式：格式：功能：建立有序列表。功能：建立有序列表。2无序列表
10、格式：格式：功能：建立无序列表。功能：建立无序列表。例例2-5：列表示例列表示例计算机新书计算机新书ASP程序设计程序设计HTML网页设计网页设计FrontPage使用指南使用指南英语新书英语新书外经贸英语外经贸英语实用英语翻译实用英语翻译朗文英语语法朗文英语语法图2-5 有序列表与无序列表的区别3自定义列表除除了了上上述述两两种种列列表表以以外外，还还可可以以根根据据需需要要自自定定义义列列表表样式。格式为：样式。格式为：返回本节2.2.4 字符的格式化字符的格式化1字体字体设置置标记格式：格式：功能：设置字体格式标记。功能：设置字体格式标记。标标记记提提供供了了几几种种属属性性，如如表表2
11、-3所所示示，使使用用它它们们可可以以很很容容易易的的设设置置字字体体的的大大小小、颜颜色色、字型等。字型等。标记属性功能size=size设置文字的大小face=fontstyle设置字体color=colorvalue设置文字的颜色表2-3 属性值例例2-6：字符格式设置字符格式设置我我 是是<font>标记！标记！我是我是<h1>标记！标记！我是我是<U>标记！标记！我是我是<S>标记！标记！我是我是<B>标记！标记！我是我是<I>标记！标记！我是我是<BLINK>标记！标记！图2-6 字符格式设置标记的
12、使用返回本节2.3 加入多媒体与超级链接加入多媒体与超级链接n2.3.1 加入图像、视频、动画加入图像、视频、动画n2.3.2 加入超级链接加入超级链接返回首页2.3.1 加入图像、视频、动画加入图像、视频、动画n1插入插入图像像当使用当使用插入图像时，含有的属性如表插入图像时，含有的属性如表2-5所示。所示。标记属性功能src=URL通过URL给出图像来源的位置，不可缺省width=size设置图像宽度height=size设置图像高度alt=txt设置在图像未载入前图片位置显示的文字border=size设置图像边框，缺省为0align=alignstyle对齐方式。取值：top，midd
13、le，bottom，left，righthspace=size设置图片左右边沿空白vspace=size设置图片上下边沿空白2插入插入视频当当使使用用插插入入视视频频或或Gif动动画画时时，含含有有的的属属性性如如表表2-6所示。所示。标记属性功能dynsrc=URL设置多媒体来源位置loop=size设置视频播放的次数loopdelay=time设置两次播放的间隔时间start=value指定何时开始播放视频文件返回本节2.3.2 加入超级链接加入超级链接格式：格式：功能：在当前页和其他页间建立超链接。功能：在当前页和其他页间建立超链接。主要属性如表主要属性如表2-7所示。所示。标记属性功能
14、href=URL给定链接目标的位置target=frametarget设置显示链接目标的框架accesskey=character设置快捷键tabindex=num设置Tab键的顺序rel=linktype设置到链接的关系返回本节2.4 制作表格制作表格n2.4.1 建立表格建立表格n2.4.2 定制表格定制表格返回首页2.4.1 建立表格建立表格格式：格式：功能：创建表格。功能：创建表格。在在浏浏览览器器中中显显示示时时，表表格格的的整整体体外外观观由由该该标标记记的属性决定，主要属性如表的属性决定，主要属性如表2-8所示。所示。标记属性功能border=size设置表格边框大小width=
15、size设置表格的宽度height=size设置表格的高度cellspacing=size设置单元格间距cellpadding=size设置单元格的填充距background=URL设置表格背景图片bgcolor=colorvalue设置表格背景色align=alignstyle设置对齐方式cols=size设置表格的列数表2-8 属性值返回本节2.4.2 定制表格定制表格使使用用只只是是定定义义空空表表格格，还还需需要要定定义义行和单元格。行和单元格。格式：格式：功能：定义表格的一行。功能：定义表格的一行。对对于于每每一一行行，可可以以定定义义行行属属性性，主主要要属属性性如如表表2-9所示
16、。所示。标记属性功能bgcolor=colorvalue设置行背景颜色align=alignstyle设置行对齐方式valign=valignstyle设置单元格垂直对齐方式表2-9 中行的属性格式：格式：功能：定义表格中的单元格。功能：定义表格中的单元格。对于每一个单元格，主要属性如表对于每一个单元格，主要属性如表2-10所示。所示。标记属性功能bgcolor=colorvalue设置单元格背景颜色rowspan=num设置单元格所占的行数colspan=num设置单元格所占的列数align=alignstyle设置对齐方式valign=valignstyle设置单元格垂直对齐方式width
17、=size设置单元格宽度height=size设置单元格高度例例2-7：多层表格嵌套实例！多层表格嵌套实例！跟跟我我学学网网页页制制作作 基础知识简介基础知识简介 第一讲第一讲 HTML简介简介 第二讲第二讲 HTML标记标记 第三讲第三讲 CSS基础基础 HTML最最 新新 课课 堂堂 高高级级应应用用技技术术 多多 层层 表表 格格 嵌嵌 套套 示示 例例图2-7 表格的嵌套返回本节2.5 制作表单制作表单n2.5.1 表单的结构表单的结构n2.5.2 FORM中常用的标记中常用的标记返回首页2.5.1 表单的结构表单的结构在在Web网页上，包含各式各样的输入表单（网页上，包含各式各样的输
18、入表单（FORM）。）。格式：格式：功能：定义表单。功能：定义表单。在在中要包含很多控件来实现整个表单的交互功中要包含很多控件来实现整个表单的交互功能，另外能，另外标记还有很多的属性来协助完成此项标记还有很多的属性来协助完成此项功能。功能。返回本节2.5.2 FORM中常用的标记中常用的标记n1输入域n（1）单行输入域。）单行输入域。格式：格式：功能：单一标记，是表单中提供给用户进行输功能：单一标记，是表单中提供给用户进行输入的一种形式。入的一种形式。标记属性功能type=inputtype设置输入域的类型name=cdata设置表项的控制名，在表单处理时起作用（适用于除submit和rese
19、t外的其他类型）size=num设置表单域的长度maxlength=num设置允许输入的最大字符数（适用于text和password类型）value=cdata设置输入域的值（适用于radio和checkbox类型）checked设置是否被选中（适用于radio，button，checkbox类型）表2-11 标记的属性值n 1）text类型。类型。n 2）password类型。类型。n 3）radio类型。类型。n 4）checkbox类型。类型。n 5）submit类型。类型。n 6）reset类型。类型。n 7）hidden类型。类型。（2）多行输入域。）多行输入域。格式为：格式为：功功
20、能能：定定义义多多行行文文本本输输入入域域。主主要要属属性性如如表表2-12所示。所示。标记属性功能name=cdata设置FORM提交的输入信息的名称rows=num设置文本域的行数cols=num设置文本域的列数tabindex=num设置tab键的次序图2-8 输入域例题2按钮定定义义按按钮钮时时，除除了了可可以以使使用用标标记记外外，还还可可以以使使用用标标记记，此此标标记记为为非非表表单控件的行内标记。单控件的行内标记。格式：格式：功能：定义按钮。功能：定义按钮。主要属性如表主要属性如表2-13所示。所示。标记属性功能name=cdata设置已发送表单的关键字value=cdata设
21、置已发送表单的值type=buttontype设置按钮的类型tabindex=num设置tab键的次序表2-13 属性值 3选择域格式：格式：选项一选项一 选项二选项二 功能：定义选择栏。功能：定义选择栏。标记属性功能name=cdata设置选择栏的名字size=num设置在选择栏中一次可见的选项个数multiple设置选项栏是否支持多选表2-14 属性值标记属性功能value=cdata设置选项的默认值selected表示此选项为预置项表2-15 属性值例例2-9：选择域选择域!请选择喜欢的颜色请选择喜欢的颜色:红色红色 蓝色蓝色 绿色绿色 黑色黑色 白色白色 紫色紫色 返回本节2.6 框架
22、结构框架结构n2.6.1 框架结构的文件格式框架结构的文件格式n2.6.2 框架结构标记的使用框架结构标记的使用n2.6.3 FRAME标记标记n2.6.4 TARGET属性的使用属性的使用返回首页2.6.1 框架结构的文件格式框架结构的文件格式框框架架结结构构有有开开始始标标记记和和结结束束标标记记，框框架架所所有有内内容容都都应应该该在在和和之之间间。在在 标标记记内内使使用用标标记记来来指指定定框框架架中中每每个个小小（子子）窗窗口口的的内内容容。其具体格式如下：其具体格式如下：返回本节2.6.2 框架结构标记的使用框架结构标记的使用格式：格式：功能：定义一个框架容器。主要属性见如功能：
23、定义一个框架容器。主要属性见如2-16所示。所示。标记属性功能rows=size设置多重框架的高度cols=size设置多重框架的宽度onload=script设置框架被载入的事件onunload=script 设置框架被卸载的事件返回本节2.6.3 FRAME标记标记格式：格式：功能：在网页中定义框架。功能：在网页中定义框架。FRAME是是 一一 个个 单单 一一 标标 记记，使使 用用 时时 放放 在在FRAMESET的的开开始始和和结结束束标标记记之之间间。它它有有6个个属属性性来来描描述述每每个个子子窗窗口口的的风风格格，属属性性值值的的功功能能如表如表2-17所示。所示。标记属性功能
24、src=URL设置要链接到的HTML文件name=framename表示子窗口的名字marginheight=size用来控制显示内容和窗口上下边界的距离，默认为1scrolling=scrollingstyle指定子窗口是否使用滚动条，有YES/NO/AUTO三个值，默认为AUTO，即根据窗口内容决定是否有滚动条noresize使用该属性后，指定窗口不能调整窗口大小表2-17 主要属性值返回本节2.6.4 TARGET属性的使用属性的使用1用于用于A标记在在A标标记记中中，除除了了指指定定被被链链接接的的文文件件之之外外，还还可可以以用用TARGET属性指定被链接的文件显示在哪个子窗口。语法
25、如下：属性指定被链接的文件显示在哪个子窗口。语法如下：A HREF=TARGET=WINDOWS_NAME2用于用于BASE标记如如果果在在同同一一个个文文件件中中有有多多个个链链接接都都指指向向同同一一个个子子窗窗口口，那那么么使使用用BASE语句将更简单。语法如下：语句将更简单。语法如下：BASE TARGET=WINDOWS_NAME3用于用于FORM标记如如果果想想把把提提交交表表单单的的结结果果放放在在指指定定的的窗窗口口，可可以以在在FORM标标记记中使用中使用TARGET属性。属性。FORM ACTION=TARGET=WINDOWS_NAME例例2-10：FRAMESET示例示
26、例 图2-10 框架结构的使用返回本节2.7 CSS基础基础n2.7.1 CSS样式简介样式简介n2.7.2 CSS样式表的定义样式表的定义n2.7.3 在在HTML中加入中加入CSS的方法的方法返回首页2.7.1 CSS样式简介样式简介例例2-11：CSS样式样式 CSS样式文本！样式文本！arial，12pt，normal，blue！图2-11 CSS样式返回本节2.7.2 CSS样式表的定义样式表的定义n1通过通过HTML标记定义标记定义n2用用id属性定义样式表属性定义样式表 n3使用使用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的方法的方法n1嵌入式嵌入式样式表式表n2内内联式式样式表式表n3外外联式式样式表式表n4输入式入式样式表式表返回本节