网页设计与制作 第2章学习和使用HTML.ppt
《网页设计与制作 第2章学习和使用HTML.ppt》由会员分享,可在线阅读,更多相关《网页设计与制作 第2章学习和使用HTML.ppt(68页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、通过本章学习,应该掌握以下内容:通过本章学习,应该掌握以下内容:1.HTML及其功能及其功能2.HTML文件的基本结构文件的基本结构3.利用利用HTML处理网页文本和图像处理网页文本和图像4.利用利用HTML处理网页中的超链接处理网页中的超链接5.利用利用HTML处理网页表格和表单处理网页表格和表单6.利用利用HTML处理框架网页处理框架网页第第2章章 学习和使用学习和使用HTML 2.1HTML概述概述2.1.1 什么是什么是HTML HTML(HypertextMarkupLanguage)是是一一种种专专门门用用于于Web页页制制作作的的编编程程语语言言,用用来来描描述述超超文文本本各各
2、个个部部分分的的内内容容,告告诉诉浏浏览览器器如如何何显显示示文文本本,怎怎样样生生成与别的文本或图像的链接点。成与别的文本或图像的链接点。HTML作作为为一一种种网网页页编编辑辑语语言言,易易学学易易懂懂,能能制制作作出出精精美美的的网网页页效效果果,其其他他的的专专用用网网页页编编辑辑器器(如如FrontPage、Dreamweaver)都都是是以以HTML为为基基础的。础的。2.1.2 一个简单的网页示例一个简单的网页示例 1标记符标记符标标记记符符又又称称标标签签,HTML是是影影响响网网页页内内容容显显示示格格式式的的标标记记符符集集合合,浏浏览览器器根根据据标标记记符符决决定网页的
3、实际显示效果。定网页的实际显示效果。2.2HTML文件的基本结构文件的基本结构2.2.1 标记符与属性标记符与属性 在在HTML中中,所所有有的的标标记记符符都都用用尖尖括括号号括括起起来来。例例如如,表表示示HTML标标记记符符。绝绝大大多多数数标标记记符符都都是是成成对对出出现现的的,包包括括开开始始标标记记符符和和结结束束标标记记符符。开开始始标标记记符符和和相相应应的的结结束束标标记记符符定定义义了了标标记记符符所所影影响响的的范范围围。结结束束标标记记符符与与开开始始标标记记符符的的区区别别是是有有一一个斜线。如:个斜线。如:.HTML标标记记符符是是不不区区分分大大小小写写的的,但
4、但通通常常约约定定标标记符使用大写字母,这有利于记符使用大写字母,这有利于HTML文档的维护。文档的维护。属属性性是是用用来来描描述述对对象象特特征征的的特特性性。在在HTMLHTML中中,所所有有的的属属性性都都放放置置在在开开始始标标记记符符的的尖尖括括号号里里,属属性性与与标标记记符符之之间间用用空空格格分分隔隔,属属性性的的值值放放在在相相应应属属性性之之后后,用等号分隔,而不同的属性之间用空格分隔。格式为:用等号分隔,而不同的属性之间用空格分隔。格式为:受受影响的内容影响的内容 HTMLHTML属属性性通通常常也也不不区区分分大大小小写写。本本书书中中为为了了区区分分标标记记符符及及
5、其其属属性性,标标记记符符均均使使用用大大写写字字母母表表示示,而而属属性均使用小写字母表示。性均使用小写字母表示。2属性属性2.2.2 HTML文档的基本结构文档的基本结构 文本标题文本标题文本内容文本内容这这两两个个标标记记符符是是HTML文文档档的的标标记记符符。处处于于文文档档的的最最前前端端,表表示示文文档档的的 开开 始始,即即 浏浏 览览 器器 从从 开开 始始 解解 释释。而而则则位位于于文文件件的的最最后后一一行行,这这样样的的结结果果表表示示这一整份的文档都是这一整份的文档都是HTML语法的文档。语法的文档。(1 1)HTML标记标记符符 是是HTML文文件件头头标标记记符
6、符,用用来来描描述述HTML首首部部的的内内容容,说说明明文文档档的的整整体体信信息息。所所有有首首部部信信息息并并不不会会出出现现在在利利用用WWW浏浏览览器器所所看看到到的的窗窗体体中中。通通常常与与某某些些标标记记符符一一起起使用,如使用,如标记符。标记符。(2 2)HEADHEAD标记符标记符 (3)TITLE标记符标记符 指指的的是是一一份份文文档档的的标标题题。通通常常来来说说,每每一一份份文文档档都都应应该该有有一一个个标标题题来来简简述述这这一一份份文文档档的的特特色色或或是是主主题题。对对于于WWWWWW浏浏览览器器而而言言,标标题题所所在在的的位位置置虽虽然然依依照照浏浏览
7、览器器的的不不同同而而不不同同,但但是是大大部部分分都都位位于于浏浏览览器的最上方。器的最上方。(4)BODY标记标记符符 指指的的是是定定义义出出一一个个HTMLHTML文文档档的的体体部部,位位于于首首部部下下面面。在在标标记记符符内内的的文文字字,所所有有使使用用标标记记符符的的地地方方都都可可以以经经浏浏览览器器正正确确地地显显示示在在浏浏览览器器窗窗体中。体中。也是一个建议选项也是一个建议选项 。2.2.3 创建和测试创建和测试Web页页 (1 1)创建创建WebWeb页页由由于于HTML文文件件的的实实质质就就是是文文本本文文件件,因因此此可可以以用用任任何何文文本本编编辑辑器器编
8、编辑辑HTML文文件件,通通常常可可以以使使用用Windows系统中的系统中的“记事本记事本”程序。程序。(2)测试)测试Web页页 保保存存了了Web页页之之后后,在在所所选选择择的的文文件件夹夹中中将将包包含含所所创创建建的的Web页页,该该Web页页文文件件左左边边有有一一个个图图标标,表表示示可可以以由由IE将将其其打打开开。找找到到刚刚创创建建的的Web页页并并用用鼠鼠标标左左键键双双击击,则则可可以以自自动动启启动动IE浏浏览览器器,此此时时所所创创建建Web页中的内容将在浏览器中显示。页中的内容将在浏览器中显示。(3)发布)发布Web页页 (1 1)申请域名和主页空间)申请域名和
9、主页空间 域域名名有有两两种种类类型型,一一种种是是收收费费的的,另另一一种种是是免免费费的。的。(2 2)测试网页)测试网页 (3 3)上传网页到)上传网页到InternetInternet2.3.1 标题处理标题处理 在在HTML中中,用用户户可可以以通通过过Hn标标记记符符来来标标识识文文档档中中的的标标题题和和副副标标题题,其其中中n是是1到到6的的数数字字。表表示最大的标题,示最大的标题,表示最小的标题。表示最小的标题。标题文字标记符的格式:标题文字标记符的格式:标题文字标题文字属属性性align用用来来设设置置标标题题在在页页面面中中的的对对齐齐方方式式:left(左对齐)、左对齐
10、)、center(居中)或居中)或right(右对齐)。右对齐)。2.3网页文本的处理网页文本的处理2.3.2 段落处理段落处理 在在HTML中中段段落落处处理理是是通通过过段段落落标标记记来来完完成成的的,常常用用的的段段落落标标记记符符有有:注注释释标标记记符符、强强制制换换行行标标记记符符、强制换段标记符、分区显示标记符和水平线等。强制换段标记符、分区显示标记符和水平线等。HTML的注释标记符的格式为:的注释标记符的格式为:注注释释并并不不局局限限于于一一行行,长长度度不不受受限限制制。结结束束标标记记符符不不必必与与开开始始标标记记符符在在同同一一行行。注注释释的的内内容容不不在在浏浏
11、览器中显示。览器中显示。1注释标记符注释标记符 2强制换行标记符强制换行标记符 强强制制换换行行标标记记符符为为,放放在在一一行行的的末末尾尾,可可以以使使后后面面的的文文字字、图图片片、表表格格等等显显示示于于下下一一行行,而而又不会在行与行之间留下空行,即强制文本换行。又不会在行与行之间留下空行,即强制文本换行。强制换行标记符的格式为:强制换行标记符的格式为:文字文字 浏浏览览器器解解释释时时,从从该该处处换换行行。换换行行标标记记符符单单独独使使用,可使页面清晰、整齐。用,可使页面清晰、整齐。3.强制换段标记符强制换段标记符 换换段段标标记记符符有有两两个个:一一个个为为强强制制换换段段
12、标标记记符符,另另一个为设置段落标记符。一个为设置段落标记符。(1)强制换段标记符)强制换段标记符强制换段标记符的格式为:强制换段标记符的格式为:文字文字 标标记记不不但但能能使使后后面面的的文文字字换换到到下下一一行行,还还可可以以使两段之间多一空行。使两段之间多一空行。(2)设置段落标记符)设置段落标记符设置段落标记符的格式为:设置段落标记符的格式为:P align=文字文字 /P其其中中属属性性alignalign用用来来设设置置段段落落的的对对齐齐方方式式,可可以以为为leftleft、centercenter或或rightright,分分别别表表示示居居左左、居居中中、居居右。默认方
13、式为右。默认方式为leftleft。4显示预排格式标记符显示预排格式标记符如如果果希希望望在在浏浏览览网网页页时时仍仍保保留留在在编编辑辑工工具具中中已已经经排排好好的的段段落落格格式式,可可以以使使用用标标记记符符将将预预先先排排好好的格式保留下来。的格式保留下来。显示预排格式标记符的格式为:显示预排格式标记符的格式为:预先排好的格式预先排好的格式 在在预预排排格格式式中中,仍仍可可以以用用HTMLHTML语语言言对对文文字字的的格格式式进行设置,如文字的颜色、大小等。进行设置,如文字的颜色、大小等。5分区显示标记符分区显示标记符 分区显示标记符的格式为:分区显示标记符的格式为:DIV al
14、ign=文本或图像文本或图像 6水平线水平线 在在页页面面中中插插入入一一条条水水平平标标尺尺线线,可可以以使使不不同同功功能能的文字分隔开,看起来整齐、明了。的文字分隔开,看起来整齐、明了。水平线标记符的格式为:水平线标记符的格式为:HR 在在网网页页中中为为了了增增强强页页面面的的层层次次,其其中中的的文文字字可可以以用用不不同同的的大大小小、字字体体、字字型型和和颜颜色色,通通常常用用FONTFONT标记符来完成。标记符来完成。FONTFONT标记符设置格式为:标记符设置格式为:FONT 被设置的文字被设置的文字 2.3.3 文本格式处理文本格式处理 1文字设置文字设置 (1)size属
15、性属性 sizesize属属性性是是字字号号属属性性,用用于于控控制制文文字字的的大大小小,它它的的取取值值既既可可以以是是绝绝对对值值,也也可可以以是是相相对对值值。使使用用绝绝对对数数值值时时,字字号号属属性性的的值值可可以以从从1 1到到7 7(3 3是是默默认认值值),值值越越大大,显显示示的的文文字字越越大大。使使用用相相对对数数值值时时,可可以以用用“”或或“”来来指指定定相相对对于于当当前前默默认认值值的的字号,例如字号,例如+1+1表示比当前默认字号大表示比当前默认字号大1 1号。号。(2)face属性属性 face属属性性是是字字体体标标记记符符,用用来来指指定定字字体体样样
16、式式。字字体体样样式式也也就就是是通通常常所所说说的的“字字体体”。例例如如,常常用用的的英英文文字字体体有有“TimesNewRoman”、“Arial”等等;常常用用的的中中文文字字体体有有“宋宋体体”、“楷楷体体”等等。在在编编写写网网页页时时,通通过过在在FONT标标记记符符中中指指定定face属属性性,用用户可以指定一个或几个字体名称户可以指定一个或几个字体名称(用逗号隔开用逗号隔开)。(3)color属性属性 FONT标标记记符符的的color属属性性可可用用来来控控制制文文字字的的颜颜色,属性值可以是颜色名称或十六进制值。色,属性值可以是颜色名称或十六进制值。2格式处理格式处理
17、HTML中的格式标记符有:中的格式标记符有:这这些些标标记记符符都都是是在在标标记记符符中中的。的。(1)设置页面背景颜色)设置页面背景颜色 在在标标记记符符中中使使用用bgcolorbgcolor属属性性可可以以为为网网页设置背景颜色,有页设置背景颜色,有1616种标准颜色可供选择。种标准颜色可供选择。(2)设置页面背景图像)设置页面背景图像单单纯纯使使用用一一种种颜颜色色作作为为背背景景显显然然有有些些单单调调,网网页页设设计计者者也也可可选选择择特特定定图图案案作作为为页页面面的的背背景景,使使用用BODYBODY标记符的标记符的backgroundbackground属性即可。属性即可
18、。HTMLHTML语句为:语句为:BODY background=3.设置页面属性设置页面属性 (3)设置文字和超链接的颜色)设置文字和超链接的颜色 在在设设置置了了背背景景图图案案或或背背景景颜颜色色后后,常常常常需需要要更更改改正正文文字字符符和和超超链链接接的的颜颜色色,以以便便与与背背景景相相适适应应。设设置置正正文文和和超超链链接接颜颜色色时时,可可以以使使用用BODY标标记记符符的的text、link、vlink和和alink属属性性。其其中中,text属属性性用用于于设设置置正正文文的的颜颜色色;link属属性性用用于于设设置置未未被被访访问问的的超超链链接接的的颜颜色色;vli
19、nk用用于于设设置置已已被被访访问问过过的的超超链链接接的的颜颜色色;alink用用于于设设置置活活动动超超链链接接(即即当当前前选选定定的的超链接)的颜色。超链接)的颜色。2.4.1 网页图像格式网页图像格式 GIFGIF格格式式(Graphics Graphics Interchange Interchange Format Format 图图像像交交换换格格式式)采采用用无无损损压压缩缩(所所谓谓无无损损压压缩缩是是指指在在压压缩缩过过程程中中图图像像的的质质量量不不会会丢丢失失)算算法法进进行行图图像像的的压压缩缩处处理理,是是目目前前在在网网页页设设计计中中使使用用最最普普遍遍、最最
20、广广泛泛的的一一种种图图像像格式。格式。GIF格格式式可可以以高高度度压压缩缩图图像像;GIF格格式式支支持持图图像像游游离离在在背背景景之之上上的的视视觉觉效效果果;GIFGIF格格式式的的图图像像可可以以被被交交错错下载下载;可以将很多幅图像结合在一个可以将很多幅图像结合在一个GIF文件中。文件中。1GIF格式格式2.4 网页图像处理网页图像处理 2JPEG格式格式 JPEG格格式式(JointPhotoExpertGraphics,联联合合图图形形专专家家组组图图片片格格式式)是是另另一一种种在在Web上上应应用用广广泛泛的的图图像像格格式式。由由于于它它支支持持的的颜颜色色数数几几乎乎
21、没没有有限限制制,因因此此适适用用于于使使用用真真彩彩色色或或平平滑滑过过渡渡色色的的照照片片和和图图片片。与与GIF格格式式采采用用无无损损压压缩缩不不同同,JPEG格格式式使使用用有有损损压压缩缩来来减减小小图图片片文文件件的的大大小小,因因此此用用户户将将看看到到随随着着文文件件的减小,图片的质量也降低了。的减小,图片的质量也降低了。1.支支持持24位位图图像像,能能够够很很好好地地表表现现照照片片等等全全彩彩色色的的图图像;像;2.可可以以生生成成类类似似GIF格格式式的的交交错错关关联联图图像像渐渐变变JPEG;3.可以制作透明可以制作透明JPEG图像。图像。JPEG格式图像的优点:
22、格式图像的优点:1.有损压缩使之不适合表达高清晰度的图像:有损压缩使之不适合表达高清晰度的图像:2.最最高高只只能能以以256色色显显示示的的用用户户,可可能能无无法法观观看看JPEG图像;图像;3.当当图图像像中中包包含含fine字字体体时时应应避避免免用用JPEG格格式式,在在该该字字体体与与纯纯颜颜色色重重叠叠的的地地方方,JPEG压压缩缩作作品品看看上上去只是一种外观近似。去只是一种外观近似。4.采采用用JPEG格格式式对对图图像像进进行行压压缩缩后后,不不能能再再重重新新打打开图像。开图像。5.JPEG格式不支持透明色,也没有动画的概念。格式不支持透明色,也没有动画的概念。JPEG格
23、式图像的缺点:格式图像的缺点:PNG格格式式(PortableNetworksGraphics,可可移移植植的的网网络络图图形形格格式式)是是近近年年来来新新出出现现的的一一种种图图像像格格式式,它它适适于于任任何何类类型型、任任何何颜颜色色深深度度的的图图片片。该该格格式式用用无无损损压压缩缩来来减减小小图图片片文文件件的的大大小小,同同时时保保留留图图片片中中的的透透明明区区域域。此此外外,该该格格式式是是仅仅有有的的几几种种支支持持透透明明度度概概念念的的图图片片格格式式之之一一(透透明明GIF的的透透明明度度只能是只能是50%,但,但PNG格式可以是格式可以是0%50%)。)。3PNG
24、格式格式 GIF、JPEG、PNG这这几几种种格格式式都都是是标标准准的的位位图图格格式式,但但现现在在Web上上还还可可以以使使用用新新的的矢矢量量格格式式。所所谓谓位位图图格格式式就就是是指指用用图图片片上上每每一一点点的的信信息息来来描描述述图图像像,而而矢矢量量格格式式则则是是用用线线条条和和填填充充色色等等数数学学信信息息来来描描述述图图像像。相相比比而而言言,矢矢量量格格式式的的文文件件要要比比位位图图格式的文件小得多,但表现力丝毫不逊色。格式的文件小得多,但表现力丝毫不逊色。除除了了表表现现一一般般的的静静态态画画面面以以外外,动动画画是是矢矢量量格式具有巨大优势的另一个领域。格
25、式具有巨大优势的另一个领域。4矢量格式矢量格式 在在HTML中中,使使用用IMG标标记记符符可可以以在在网网页页中中加加入入图图像像。它它具具有有两两个个基基本本属属性性:src和和alt,分分别别用用于设置图像文件的位置和替换文本。于设置图像文件的位置和替换文本。src表表示示要要插插入入图图像像的的文文件件名名,必必须须包包含含绝绝对对路路径径或或相相对对路路径径,图图像像可可以以是是GIF文文件件、JPEG文文件件或或PNG文文件件。alt表表示示图图像像的的简简单单文文本本说说明明,用用于于不不能能显显示示图图像像的的浏浏览览器器或或浏浏览览器器能能显显示示图图像像但但显显示时间过长时
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页设计与制作 第2章 学习和使用HTML 网页 设计 制作 学习 使用 HTML
限制150内