《电子商务网页设计（第二版）》 课件项目二.pptx

1、HTML介绍任务一项目项目二二 HTML网页制作基网页制作基础础使用HTML制作简单网页任务二HTML 网页制作基网页制作基础础学习目标了解 语言的语法基础了解 语言的基本结构掌握运用 制作简单网页的方法项目介绍在网页设计中，是网页基础，所有网页对象都显示在 标 签中。如果熟 悉 代码，设计和编辑网页将会变得非常轻松，同时 还能提高工作效率，减少网页 代码中多余且不必要的代码，所以学习 是非常有必要的。HTML介介绍绍1Analysis本任务提供了HTM L语言的 基础知识,通过对这些知识 点的学习,为以后学习网页 制作打下基础。任务1.1.什么是什么是HTMLHTML语言语言HTMLHTML

2、是使用特殊标记来描述文档结构和表现形式的一种语言是使用特殊标记来描述文档结构和表现形式的一种语言,由由W3C(WorldW3C(World WideWide WebWeb Consortium)Consortium)所制定和更新所制定和更新。我们可以用任何一种文本编译器来编辑。我们可以用任何一种文本编译器来编辑HTHTM ML L文件文件,因为它就是一种纯文本文件。因为它就是一种纯文本文件。2.HTML2.HTML语言的基本结构语言的基本结构下面我们来看一小段下面我们来看一小段HTMLHTML语言的代码语言的代码,来了解来了解HTMLHTML语言的基本结构语言的基本结构:相关HTML介介绍绍1

3、将这一小段代码粘贴至文本文件中将这一小段代码粘贴至文本文件中,然后选择然后选择“另存为另存为”,”,将文件的后缀名改为将文件的后缀名改为.htm.htm或者或者.html.html即可即可,然后在然后在其所其所在在 的目录下就可看到一个的目录下就可看到一个IEIE的图标的图标,名字就是你所存的文件名称名字就是你所存的文件名称。以下是声明以下是声明HTMLHTML文件的语法格式。每一个文件的语法格式。每一个HTMLHTML文件都必须以文件都必须以开头开头,以以结束结束。相关以下是文件头声明的语法格式。在这之间的所有文字都属于文件的文件头以下是文件头声明的语法格式。在这之间的所有文字都属于文件的文

4、件头,并不属于文件本体并不属于文件本体。以下是声明文件标题的语法格式。在这之间写下的所有内容都将显示在网页最上面以下是声明文件标题的语法格式。在这之间写下的所有内容都将显示在网页最上面的的 标题栏中标题栏中。以下是声明文件主体的语法格式。在这之间写下的内容都是文件的主体，也就是说将 会被显示在客户区之中。注意:几乎每一种HTML语言的语法都是以开头,以结束。在编辑HTML语言的过程中,也可以使用注释。语法格式为:。就好像C语言中的/*/一样,中间的内容只是解释说明,并不被编译器 所编译。HTML介介绍绍13.HTML3.HTML语言的基本单语言的基本单位位(1)(1)长度单位长度单位。长度单位

5、可以用来定义水平线、表格边框、图像等对象的长、宽、高等一系列属性长度单位可以用来定义水平线、表格边框、图像等对象的长、宽、高等一系列属性,同时也可以用来定义这些对象在页面上的同时也可以用来定义这些对象在页面上的位位 置等属性置等属性,用来描述页面上可能遇到的各种长度用来描述页面上可能遇到的各种长度。长度的表示方法有两种长度的表示方法有两种:绝对长度和相对长度。它们的单位都是像素绝对长度和相对长度。它们的单位都是像素(Pixel)(Pixel)和百分比和百分比(),),像素代表的是屏幕上的每个点像素代表的是屏幕上的每个点,而百而百分分比比 代表的是相对于客户区的多少。下面我们就以水平线的宽度为例

6、代表的是相对于客户区的多少。下面我们就以水平线的宽度为例,说明这两种表示方法说明这两种表示方法。相关在文本编译器中编译在文本编译器中编译,改变网页的大小改变网页的大小,就会看到这两者表示长度方法的不同。其就会看到这两者表示长度方法的不同。其中中 标记是在页面上建立水平线的标记标记是在页面上建立水平线的标记。widthwidth是水平线元素中的一种属性是水平线元素中的一种属性,用来表示水平线的宽度。这里用来表示水平线的宽度。这里width=500width=500即表示这个水平线的宽度是即表示这个水平线的宽度是500500像素像素;width=;width=50 50 即表示水平线占据客户区的总

7、宽度的即表示水平线占据客户区的总宽度的5050 。HTML介介绍绍1和长度单位一样和长度单位一样,颜色单位也是描述页面表现形式的一种很重要的数据类型。颜色单位有三种表示方法颜色单位也是描述页面表现形式的一种很重要的数据类型。颜色单位有三种表示方法:1616进制颜色进制颜色代代 码、码、1010进制进制RGBRGB码、直接颜色名称。这三种表示方法不同码、直接颜色名称。这三种表示方法不同,但是效果是一样的。下面用一小段代码说明这三种颜但是效果是一样的。下面用一小段代码说明这三种颜色的色的 表示方法。表示方法。相关HTML介介绍绍(2)(2)颜色单位。颜色单位。1注意注意:本文件在保存时选本文件在保

8、存时选择择 Unicode Unicode 字符型进行保存字符型进行保存。1616进制颜色代码进制颜色代码,语法格式语法格式:#RRGGBB#RRGGBB 。1616进制颜色代码之前必须有一个进制颜色代码之前必须有一个“#”“#”号号,这种颜色代这种颜色代码码是是 由三部分组成的由三部分组成的,其中前两位代表红色其中前两位代表红色,中间两位代表绿色中间两位代表绿色,后两位代表蓝色。不同的取值后两位代表蓝色。不同的取值代表代表不不 同的颜色同的颜色,它们的取值范围是它们的取值范围是00FF00FF。1010进制进制RGBRGB码码,语法格式语法格式:RGB(RRR,GGG,BBB)RGB(RRR

9、,GGG,BBB)。在这种表示法中。在这种表示法中,后面三个参数分别是红色、后面三个参数分别是红色、绿绿 色、蓝色色、蓝色,它们的取值范围是它们的取值范围是0 0 255255。以上两种表达方式可以相互转换。以上两种表达方式可以相互转换,标准是标准是1616进制与进制与1010进制进制的的 相互转换相互转换。直接颜色名称直接颜色名称,可以在代码中直接写出颜色的英文名称可以在代码中直接写出颜色的英文名称。以上三种表示方法的效果相同以上三种表示方法的效果相同,一般一般1616进制颜色代码的表示方法比较常用。读者可以根据自己进制颜色代码的表示方法比较常用。读者可以根据自己的的 喜好和实际情况来决定使

10、用哪一种表示方法。关于不同颜色的定义喜好和实际情况来决定使用哪一种表示方法。关于不同颜色的定义,请查看相关资料请查看相关资料。相关HTML介介绍绍1(3)(3)URLURL路径路径。URL(UniversalURL(Universal Resource Locator)Resource Locator)路径是一种互联网地址的表示法。在这个数据里可以包括以何路径是一种互联网地址的表示法。在这个数据里可以包括以何种种 协议连接、要连接到哪一个地址、连接地址的端口协议连接、要连接到哪一个地址、连接地址的端口(Po(Por rt)t)号以及服务器号以及服务器(Se(Ser rvever r)里文件的完

11、整里文件的完整路径路径和和 文件名称等信息。在文件名称等信息。在HTMLHTML中中,URL,URL路径分为两种形式路径分为两种形式:绝对路经和相对路径绝对路经和相对路径。1)1)绝对路径绝对路径。绝对路径是将服务器上磁盘驱动器名称和完整的路径写出来绝对路径是将服务器上磁盘驱动器名称和完整的路径写出来,同时也会表现出磁盘上的目录结构。同时也会表现出磁盘上的目录结构。语法格式语法格式:。其中其中,是某一种传输协议是某一种传输协议,而而 则是连接的位置信息则是连接的位置信息。例如例如:相关HTML介介绍绍1这种路径的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种表现形式。这种路径

12、的表现形式是根据目标文档所在目录和当前文档所在目录之间的关系的一种表现形式。“.“./”表示上表示上一级一级 目录目录,没有没有“./”“./”表示当前目录。表示当前目录。例如例如:当前文档的路径是当前文档的路径是:test/project1/index.htm:test/project1/index.htm 。我们要找。我们要找testtest目录下的目录下的html.htmhtml.htm 。而当前的目录是。而当前的目录是project1,project1,我们要回到上一级目录中我们要回到上一级目录中,所以路径是所以路径是“./html.htm”“./html.htm”。b.b.相对根目录

13、的相对路径。相对根目录的相对路径。这种路径是根据目标文档相对于根目录的关系的一种表现形式。在这种表达式中的第一个字符是这种路径是根据目标文档相对于根目录的关系的一种表现形式。在这种表达式中的第一个字符是“/”,”,这个符这个符号表号表 示这个路径是一个相对于根目录的表达式。示这个路径是一个相对于根目录的表达式。例如例如:相关HTML介介绍绍2)2)相对路径。相对路径。相对路径是相对于当前的相对路径是相对于当前的HTHTM ML L文档所在目录或站点根目录的路径。文档所在目录或站点根目录的路径。语法格式语法格式:相相对关系对关系/部分路径部分路径/文件名。文件名。根据相对路径的参照点又可以分为相

14、对文档的相对路径和相对根目录的相对路径。根据相对路径的参照点又可以分为相对文档的相对路径和相对根目录的相对路径。a.a.相对文档的相对路径。相对文档的相对路径。1这里介绍这里介绍HTMLHTML文档中文档中HeadHead部分的基本使用方法。部分的基本使用方法。HeadHead这一部分是由标记这一部分是由标记开始开始,以标记以标记结束结束,是是HTMLHTML文档的首要部分文档的首要部分(见表见表21)21)。相关HTML介介绍绍1下面简要介绍各个部分的功能及用法下面简要介绍各个部分的功能及用法:titletitle包含的内容将会被显示在浏览器窗口的标题栏中。给自己的网页起一个适当的名字包含的

15、内容将会被显示在浏览器窗口的标题栏中。给自己的网页起一个适当的名字,可以体现出一些自可以体现出一些自己己 的个性。语法格式的个性。语法格式:相关HTML介介绍绍在省略号处加入的文字或符号在省略号处加入的文字或符号,都将显示在浏览器的标题栏中。都将显示在浏览器的标题栏中。metmeta a元素提供的信息是用户不可见的。下面是元素提供的信息是用户不可见的。下面是metmeta a的几种用法的几种用法:一是定义搜索关键字一是定义搜索关键字,这里介绍两种基本的用法这里介绍两种基本的用法:1这样一来这样一来,在你的网页中就会体现出这样的信息。但是这些信息是不可见的在你的网页中就会体现出这样的信息。但是这

16、些信息是不可见的,只是提供给搜索引擎使用。只是提供给搜索引擎使用。二是控制页面缓存二是控制页面缓存:浏览器一般为了节约时间浏览器一般为了节约时间,都在本地硬盘上保存一个网上的文件作为临时版本。在用户下次打开这个网页的时都在本地硬盘上保存一个网上的文件作为临时版本。在用户下次打开这个网页的时候候,浏览器将会直接调用硬盘上的这个版本浏览器将会直接调用硬盘上的这个版本,而不是网上的。如果想让浏览者每次打开网页的时候都看到的是而不是网上的。如果想让浏览者每次打开网页的时候都看到的是最新版最新版 本本,那么就可在网页上加上这一句。那么就可在网页上加上这一句。三是定义语言三是定义语言:我们可以通过这样的语

17、句设定语言的编码方式。这样，浏览器就可以为我们正确地选我们可以通过这样的语句设定语言的编码方式。这样，浏览器就可以为我们正确地选 择语言，不需要我们来择语言，不需要我们来选选 取。上面的例子显示的就是简体中文，如果想要显示繁体中文，取。上面的例子显示的就是简体中文，如果想要显示繁体中文，将替换为将替换为 即可。即可。四是刷新页面。语法格式：四是刷新页面。语法格式：相关HTML介介绍绍1这样的语句可以让我们的浏览器按照这样的语句可以让我们的浏览器按照ConConteten nt t属性中制定的时间来跳转到属性中制定的时间来跳转到U URLRL属性中设定的属性中设定的U URLRL地址。上面的例地

18、址。上面的例 子就是在打开页面子就是在打开页面6060秒后调用一个新的页面秒后调用一个新的页面new.htmnew.htm。如果没有能够找到。如果没有能够找到new.htm,new.htm,浏览器就执行刷新本页的操浏览器就执行刷新本页的操 作。这也是大多数聊天室的设定方法。作。这也是大多数聊天室的设定方法。linklink用来指定当前文档和其他文档之间的连接关系。语法格式用来指定当前文档和其他文档之间的连接关系。语法格式:relrel说明两个文档之间的关系说明两个文档之间的关系;href;href说明目标文档名。以下是一个指定外联样式表文件的例说明目标文档名。以下是一个指定外联样式表文件的例子

19、子:相关HTML介介绍绍1关于关于CSSCSS层叠样式表层叠样式表,请查阅有关资料。请查阅有关资料。basebase用于定义文档提交是默认的外部资源。语法格式用于定义文档提交是默认的外部资源。语法格式:hrefhref指定文档中链接到的所有文件默认的指定文档中链接到的所有文件默认的U URLRL地址。在这里指定地址。在这里指定hrefhref的属性的属性,所有的相对路径的前面都会加上所有的相对路径的前面都会加上href href 属性中的值。属性中的值。targettarget指定文档中所有链接的默认打开窗口。最常见的应用是在框架页指定文档中所有链接的默认打开窗口。最常见的应用是在框架页(Fr

20、ame)(Frame)中。我们要把中。我们要把MenuMenu框架中的链接框架中的链接 显示到显示到ContentContent框架中框架中,就可以在就可以在MenuMenu的网页中加上的网页中加上basetarget=content。这样。这样,就省去了在就省去了在MenuMenu网页上所网页上所 有链接的有链接的属性上加上属性上加上targettarget属性。属性。scriptscript标记用来在页面中加入脚本程序。语法格式标记用来在页面中加入脚本程序。语法格式:在在languagelanguage中一定要指定脚本语言的种类中一定要指定脚本语言的种类,如如VBScriptVBScrip

21、t等。等。s styletyle用来指定当前文档的用来指定当前文档的C CSSSS层叠样式表。层叠样式表。C CSSSS对于网页的字体样式、背景、边界等都有很多的应用。详细内对于网页的字体样式、背景、边界等都有很多的应用。详细内 容请参阅容请参阅CSSCSS有关内容。有关内容。相关1下面介绍各个部分的功能及用法下面介绍各个部分的功能及用法:bgcolorbgcolor用于指定页面的背景颜色。在用于指定页面的背景颜色。在IEIE浏览器中浏览器中,默认情况下是白色默认情况下是白色,Navigator,Navigator浏览器的默认情况是灰色。语法格浏览器的默认情况是灰色。语法格式式:HTML介介绍

22、绍以下介绍以下介绍HTHTM ML L语言中的语言中的B Bo odydy的部分用法。的部分用法。大家从各大门户网站的主页上就可以看出大家从各大门户网站的主页上就可以看出,B,Bo odydy部分占据了大部分的代码。可见部分占据了大部分的代码。可见B Bo odydy是一个网页代码的绝对主要是一个网页代码的绝对主要 部分。部分。BodyBody是由是由开始开始,由由结束。结束。BodyBody部分的元素见表部分的元素见表2-22-2。相关1示例示例:HTML介介绍绍 backgroundbackground用于指定页面的背景图案。语法格式用于指定页面的背景图案。语法格式:下面介绍几种文字的属性

23、下面介绍几种文字的属性,可以改变文字的颜色可以改变文字的颜色,以及在页面上留出空白以及在页面上留出空白:text:text、linklink、alinkalink、vlinkvlink、leftmarginleftmargin、topmargintopmargin。语法格式。语法格式:相关HTML介介绍绍1说明说明:对于对于lilin nk k这样的属性这样的属性,大多数大多数HTHTM ML L的页面已经不使用这样的用法了。现在多数是在的页面已经不使用这样的用法了。现在多数是在H He ea ad d中加入相应的代码。中加入相应的代码。要达到的效果是鼠标放到有链接的字体上时字体变色要达到的效

24、果是鼠标放到有链接的字体上时字体变色,点击后字体变为灰色。具体方法如下点击后字体变为灰色。具体方法如下:将这段代码加入到将这段代码加入到HeadHead中中,在在BodyBody中加入有链接的文字中加入有链接的文字,就可以看出效果了。这一部分是属于就可以看出效果了。这一部分是属于CSSCSS中的知识。在中的知识。在 BodyBody中加入有链接的文字中加入有链接的文字:在在DreamweaverDreamweaver中中,选定文字后选定文字后,在下面的在下面的PropertiesProperties中的中的linklink中加入想要链接到的页中加入想要链接到的页面面 的地址的地址;在在Fron

25、tPageFrontPage中中,选定文字后选定文字后,点击右键就会有相应的选项。点击右键就会有相应的选项。使用使用HTML制作简单网制作简单网页页2Analysis运用HTM L语言制作简单网 页,布局自定,内容包括自我 介绍、图片、电子信箱地 址等,要求在标题与正文之 间插入一条水平线。任务相关HTMLHTML代码书写注意事项如下代码书写注意事项如下：(1)(1)书写书写 HTMLHTML代码时，一定要采用规范的格式，不要把代码全部都堆在一起，否代码时，一定要采用规范的格式，不要把代码全部都堆在一起，否 则不仅影响美观，而且影响则不仅影响美观，而且影响 效率，当出现问题的时候就很难找到原因

26、所在。效率，当出现问题的时候就很难找到原因所在。(2)(2)输入标签时，不要输入多余的空格，否则浏览器可能无法识别这个标签，导致无输入标签时，不要输入多余的空格，否则浏览器可能无法识别这个标签，导致无 法正确地显示信息。各法正确地显示信息。各种种 符号一定要在英文状态下输入，否则不会显示正确的效果。源代符号一定要在英文状态下输入，否则不会显示正确的效果。源代 码不区分大小写。码不区分大小写。(3)(3)所有页面必须注明所有页面必须注明 名称。名称。(4)(4)所有所有 HTMLHTML格式必须书写完整。格式必须书写完整。(5)(5)所有空格均为全角空格和半角空格，不使用所有空格均为全角空格和半

27、角空格，不使用  。(6)(6)注释不能嵌套，不能出现在标记中，如注释不能嵌套，不能出现在标记中，如 是错误的写法。是错误的写法。(7)(7)属性和属性值是用来修饰元素的，属性名称与标记名称之间用空格隔开，如属性和属性值是用来修饰元素的，属性名称与标记名称之间用空格隔开，如 /；属；属性性 值与属性间用值与属性间用 “”来连接，属性值要用英文引号引起来，如来连接，属性值要用英文引号引起来，如 “；一个元素允许有；一个元素允许有多属性，多属性，多属性间排名不分先后，中间用空格隔开，多属性间排名不分先后，中间用空格隔开，如如 “。使用使用HTML制作简单网制作简单网页页2任务(1

28、1)启动记事本和启动记事本和I IE E浏览器浏览器,并纵向平铺两窗口。并纵向平铺两窗口。(2)(2)在记事本窗口输入下面的代码在记事本窗口输入下面的代码:(3)(3)保存该文件到保存该文件到D:mywebD:myweb文件夹中文件夹中,取名为取名为yoyo.htm,yoyo.htm,见图见图21(21(注意注意:文件的扩展名一定为文件的扩展名一定为.htm.htm或或.html;.html;如果没有如果没有mywebmyweb文件夹文件夹,请新建一个请新建一个)。图21 网页头部代码与相应显示使用使用HTML制作简单网制作简单网页页2任务(5)(5)保存记事本文件保存记事本文件,并刷新并刷新

29、IEIE浏览器窗口浏览器窗口,显示结果如图显示结果如图2222所示所示(注意注意:请先将请先将C:dataC:data中的中的woman.gifwoman.gif文文 件复制到件复制到D:mywebD:myweb下下)。使用使用HTML制作简单网制作简单网页页(4)(4)在记事本窗口输入以下语句在记事本窗口输入以下语句:2图22 字体与图片代码与相应显示任务使用使用HTML制作简单网制作简单网页页(6 6)在记事本窗口输入以下语句在记事本窗口输入以下语句(注意被超链接的文件地址书写格注意被超链接的文件地址书写格式式):):2(7 7)保存记事本文件保存记事本文件,并刷新并刷新I IE E浏览器

30、窗口浏览器窗口,显示结果如图显示结果如图2 23 3所示。所示。图23 超链接代码与相应显示任务使用使用HTML制作简单网制作简单网页页(8 8)在记事本窗口输入以下语句在记事本窗口输入以下语句(注意发送电子邮件的超链接的书写格注意发送电子邮件的超链接的书写格式式):):2(9 9)保存记事本文件保存记事本文件,并刷新并刷新I IE E浏览器窗口浏览器窗口,显示结果如图显示结果如图2 24 4所示。所示。图24 邮件超链接代码与相应显示至此，该网页设计结至此，该网页设计结 束。点击超链接，检束。点击超链接，检 查链接是否正确；如查链接是否正确；如 果不正确，检查被链果不正确，检查被链 接接 文件是否在所设定文件是否在所设定 的文件夹内。的文件夹内。本项目前半部分介绍了页面属性标记、排版 标记、超链接标记、图像标记、表格标记和 框架标记,由于章节内容的限制,HTM L中还有 很多标记及属性在本项目中没有提及。后半 部分用简单的标记语言制作了一个简单的 HTML网页,初步了解HTML标记语言。经验交流:同学们将学习过程的疑难问题记录 下来,和大家交流一下吧。项目项目项目二二 HTML网页制作基网页制作基础础