第2.1 网页设计基础3ppt课件.ppt

《第2.1 网页设计基础3ppt课件.ppt》由会员分享，可在线阅读，更多相关《第2.1 网页设计基础3ppt课件.ppt（48页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、在此输入您的封面副标题第2.1 网页设计基础3中国铁道出版社中国铁道出版社 2016.122016.12李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 编著：编著：李红李红 岳云康岳云康 樊东燕樊东燕中国铁道出版社2016.9中国铁道出版社中国铁道出版社 2016.122016.12李红李红 岳云康岳云康 樊东燕樊东燕 编著编著 第第2 2章章网页设计语言基础网页设计语言基础主讲：主讲： 李红李红中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 能力目标：运用能力目标：运用html语言和语言和CSS样式表制作简单网页样式表制作简单网页 本章教本章教学目标学目标介绍网页设计语言H

2、TML和CSS基础语法知识中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B Web2.1 Web标准标准Web标准标准网页结构规范网页结构规范HTML网页显示规范网页显示规范CSS网页行为规范之网页行为规范之javaScript本章主要内容：中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B Web2.1 Web标准标准任务任务1：理解网页设计的基本规范：理解网页设计的基本规范Web标准标准网页结构规范网页结构规范HTML网页显示规范网页显示规范CSS网页行为规范网页行为规范javaScript中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B We

3、b标准 前面讲到，前面讲到，WebWeb就是全球网站和网页的集合。网页的本质就是全球网站和网页的集合。网页的本质是由是由htmlhtml语言编写的程序。语言编写的程序。 HtmlHtml最早是于最早是于19891989年发明的，年发明的，19931993年对外开放；年对外开放； 19941994年成立万维网联盟，规范网页的设计技术。年成立万维网联盟，规范网页的设计技术。 实际上，实际上，WebWeb标准是一系列标准的集合，主要由三部分组标准是一系列标准的集合，主要由三部分组成：结构化标准语言；表现标准语言；行为标准。成：结构化标准语言；表现标准语言；行为标准。中国铁道出版社电子商务网页设计（第

4、2版）课件 2016.12 B 表现标准表现标准:CSS等行为标准：行为标准：DOM、ECMAScript等等 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 结构语言html例例2-1 简单的简单的HTML网页制作实例。网页制作实例。 未使用未使用CSS的简单网页的简单网页 未使用未使用CSS的的html文件文件 这是一张未使用这是一张未使用CSS的简单网页！的简单网页！ 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B HTML存在缺陷：不可扩展；只能用于信息显示存在缺陷：不可扩展；只能用于信息显示 3.XML（Extensible Markup Lang

5、uage） 用于描述、存储和交换数据。用于描述、存储和交换数据。 XML格式包含两部分：数据的文档部分；描述文档中所存储数据的数据类格式包含两部分：数据的文档部分；描述文档中所存储数据的数据类型的文档类型定义。型的文档类型定义。 4.XHTML（ eXtensible HyperText Markup Language） 比比HTML有更严格的要求，符合有更严格的要求，符合Web标准规范标准规范中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B | GML(1969) SGML(1985) HTML(1993) XML(1998) XHTML(2000） HTML 5 1969

6、1985 1993 1998 2000 2008标记语言的历史标记语言的历史中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B html主要版本：主要版本： HTML（第一版）（第一版）在在1993年年6月作为月作为 互联网工程工作互联网工程工作小组（小组（ IETF）工作草案发布）工作草案发布 HTML 2.01995年年11月发布月发布 HTML 3.21997年年1月月14日，日， W3C推荐标准推荐标准 HTML 4.01997年年12月月18日，日，W3C推荐标准推荐标准 HTML 4.01（微小改进）（微小改进）1999年年12月月24日，日，W3C推推荐标准荐标准中

7、国铁道出版社电子商务网页设计（第2版）课件 2016.12 B HTML 4.012000年年5月月15日发布，是国际标准化组织和日发布，是国际标准化组织和国际电工委员会的标准。国际电工委员会的标准。ISO/IEC 15445:2000（“ISO HTML”） XHTML 1.1于于2001年年5月月31日发布，日发布， W3C推荐标准。推荐标准。 HTML 52014年年10月月28日，日，W3C推荐标准推荐标准 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B （4）HTML 5 HTML 5的第一份正式草案已于的第一份正式草案已于2008年公布，但仍处于年公布，但仍处于完

8、善之中。完善之中。2012年年12月月17日，万维网联盟（日，万维网联盟（W3C）正）正式宣布凝结了大量网络工作者心血的式宣布凝结了大量网络工作者心血的HTML5规范已经规范已经正式定稿。正式定稿。2013年年5月月6日，日，HTML 5.1正式草案公布，正式草案公布，2014年年10月，月，W3C正式推荐。正式推荐。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 使用了使用了CSS的网页的网页 使用了使用了CSS的的html文件文件 这是一张使用了这是一张使用了CSS的简单网页！的简单网页！ CSS定义当需要修改网页中当需要修改网页中标记标记的格式时，只需修改样式表的格式时

9、，只需修改样式表定义定义1.1.认识认识CSSCSS中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 行为标准JavaScript 例8-1JavaScript对事件作出反应实例 Javascript脚本中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 这样一张网页大致由这样一张网页大致由3部分组成：部分组成： 由结构化语言如由结构化语言如html构建网页的基本框架内容；构建网页的基本框架内容； 由显示语言如由显示语言如CSS控制网页的显示效果；控制网页的显示效果； 由脚本语言如由脚本语言如javascript控制网页的动态效果。控制网页的动态效果。中国铁道出版

10、社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 2016.12 B HTML2.2 HTML语法基础语法基础任务任务2：html的基本语法的基本语法html基本语法基本语法HTML文档结构文档结构html常用标签常用标签中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B HTML基本语法 1. HTML 标记标记 HTML用于描述功能的符号称为用于描述功能的符号称为“标签标签”，又称，又称“标记标记”。通常要用两个尖括号通常要用两个尖括号“”括起来括起来，标签是标签是HTML语言语言元素内容进行控制的符号元素内容进行控制的符号. HTML5标记是区分大小

11、写的，推荐使用标记小写。标记是区分大小写的，推荐使用标记小写。 标记有单标记和双标记之分。标记有单标记和双标记之分。 绝大多数标记符都是成对出现的。绝大多数标记符都是成对出现的。以无斜杠的标签开始，以无斜杠的标签开始，以有斜杠的标签结束，以有斜杠的标签结束， 如：如：。 但也有的是单标签，如但也有的是单标签，如、，没有结束标签（，没有结束标签（注意要在最后加上注意要在最后加上/，以标示其是独立的），以标示其是独立的）中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B HTML 标记的属性标记的属性 属性是对事物具体特征的描述。属性是对事物具体特征的描述。HTML标签属性一般都写属

12、性一般都写在在HTML标签的后面，用空格和标签的后面，用空格和标签分开，成为标签的一分开，成为标签的一部分，其一般语法是：部分，其一般语法是：例如：例如： 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B HTML 元素元素 HTML元素是构建网页的一种单位。元素是构建网页的一种单位。 HTML元素指的是包含标签在内的整体，元素指的是包含标签在内的整体，我们把我们把HTML标签及标签及HTML属性组成的部分，称作一个属性组成的部分，称作一个HTML元元素。素。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B HTML指定颜色有两种方法：指定颜色有两种方法：颜色值

13、和颜色名颜色值和颜色名。（1）颜色值）颜色值 由一个十六进制符号来定义，这个符号由红色、绿色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（和蓝色的值组成（RGB）。每种颜色的最小值是）。每种颜色的最小值是0（十六（十六进制：进制：#00），最大值是），最大值是255（十六进制：（十六进制：#FF）。例如：）。例如：#000000表示黑色，表示黑色，#ff0000表示红色。表示红色。（2）颜色名）颜色名 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,

14、teal, white, yellow。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 开始使用开始使用“” 之间的东西就是注释的内容，它们将不会在网页之间的东西就是注释的内容，它们将不会在网页上显示。上显示。 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B HTML文档的结构 1. HTML文件基本结构文件基本结构 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B HTML主体标签 、段落标签、段落标签2.2.3.2 、文本标签、文本标签2.2.4 、 超链接标记超链接标记中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 浏

15、览器将在标题的上面和下面自动各浏览器将在标题的上面和下面自动各空出一行空出一行。2段落标签段落标签与标题类似，浏览器也会在段落的开始之前和结束与标题类似，浏览器也会在段落的开始之前和结束之后各之后各加一行空白加一行空白。标签还有一个属性标签还有一个属性align，它用来指名字符显示时的对齐方式，一般值有它用来指名字符显示时的对齐方式，一般值有center、left、right三种。三种。 2.2.3.1 、段落标签、段落标签中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 、文本标签、文本标签中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B

16、<表表 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 、 超链接标记1.超链接标记超链接标记2.书签标记书签标记a href= 超链接标识超链接标识超链接标识文字或图像超链接标识文字或图像 1先定义书先定义书签签2链接书签链接书签中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 、 使用图像1.插入图像插入图像2. 制作图像热区制作图像热区定义图片地图定义图片地图制作图像映射区域制作图像映射区域中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 表格标记 HTML中常用的表格命令有：中常用的表格命令有： . 定义了表格的开始和结束定义了表

17、格的开始和结束 .定义表格标题定义表格标题 定义表行定义表行 定义表头定义表头 定义表元定义表元(表格的具体数据表格的具体数据) 其他：其他：、 、 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 框架和内联框架1框架框架 框架应用示例：框架应用示例： 注意：html5不使用frameset、 frame中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 列表标签1有序列表有序列表项目1项目2项目n中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2016.12 B 其他：其他： 、中国铁道出版社电子商务网页设计（第2版）课件

18、 2016.12 B 使用有序列表使用有序列表 静态网页设计与制作静态网页设计与制作 动态网页设计与制作动态网页设计与制作 使用无序列表使用无序列表 静态网页设计与制作静态网页设计与制作 动态网页设计与制作动态网页设计与制作 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 网页中使用音频和视频 1多媒体概述多媒体概述 （1）常用的音频格式）常用的音频格式 WMA格式：微软专用的声音格式，可用格式：微软专用的声音格式，可用Windows Media Player播放，压缩率较高。播放，压缩率较高。 MP3格式：压缩率较高，网上很流行。格式：压缩率较高，网上很流行。 RM格式：格

19、式：Real公司的专用声音格式，压缩率较高，以公司的专用声音格式，压缩率较高，以前网上较流行。前网上较流行。 MID格式：只能保存乐器的声音，不能录其它声音，文格式：只能保存乐器的声音，不能录其它声音，文件超小，一般用于背景音乐。件超小，一般用于背景音乐。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B （2）常用的视频格式）常用的视频格式 WMV格式：微软公司专用的视频格式，压缩率高，用媒体播放器格式：微软公司专用的视频格式，压缩率高，用媒体播放器播放。播放。 ASF格式：微软公司的专用流视频格式，压缩率高，用媒体播放格式：微软公司的专用流视频格式，压缩率高，用媒体播放器播放

20、。器播放。 RM格式：格式：REAL公司的专用视频格式，压缩率高，用公司的专用视频格式，压缩率高，用Realplayer或或Realone播放。播放。 RMVB格式：格式：RM的改进格式，压缩率高，图像清晰，用的改进格式，压缩率高，图像清晰，用RealPlyer或或Realone播放。播放。 AVI格式：由于格式：由于 AVI格式使用的压缩方法没有统一标准，可能还要格式使用的压缩方法没有统一标准，可能还要安装专门的解码器后才能播放，安装专门的解码器后才能播放，Real公司的微软公司的公司的微软公司的 播放器均播放器均可播放可播放 MPG格式：主要指格式：主要指MPG-1格式，就是格式，就是VC

21、D格式，可以使用微软或格式，可以使用微软或REAL公司的播放器均可播放。公司的播放器均可播放。 Flash格式：流行的格式：流行的FLASH动画，支持交互，用动画，支持交互，用IE可直接播放。可直接播放。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B （3）HTML5的音、视频格式的音、视频格式 当前，当前，audio 元素支持三种音频格式：元素支持三种音频格式：Ogg、MP3、WAV。video 元素支持三种视频格式：元素支持三种视频格式：Ogg、MPEG4、WebM。 Ogg是带有是带有 Theora 视频编码和视频编码和Vorbis 音频编码的音频编码的 Ogg 文件。

22、文件。 MPEG4 是带有是带有 H.264 视频编码和视频编码和 AAC 音频编码音频编码的的 MPEG 4 文件。文件。 WebM 是带有是带有 VP8 视频编码和视频编码和 Vorbis 音频编码的音频编码的 WebM 文件。文件。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 2网页中使用音视频网页中使用音视频 （1）插件方式）插件方式（1 1）加入背景音乐）加入背景音乐（2 2）利用超链接播放声音）利用超链接播放声音（3 3）利用）利用标记播放声音标记播放声音音乐音乐中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 1）利用超链接播放视频文件利用超链

23、接播放视频文件（2 2）利用利用标签插入视频标签插入视频 中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B 本节主要介绍了本节主要介绍了html文档的主题部分主要标签的用法。文档的主题部分主要标签的用法。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B html主体标记练习主体标记练习 实验目的：实验目的： 1.掌握掌握html中常用的主体标签的使用规范。中常用的主体标签的使用规范。 2.掌握掌握html语言语言body中包含的标签及其属性和值。中包含的标签及其属性和值。 实验内容：实验内容： 1.段落标签段落标签的使用。的使用。 2. 水平线标签水平线标签的使用。的使用。 3. 超链接标签超链接标签的使用。的使用。 4. 图像标签图像标签的使用。的使用。 5. 标题标签标题标签的使用。的使用。 6. 文本标签文本标签的使用。的使用。 7. HTML颜色值的使用。颜色值的使用。中国铁道出版社电子商务网页设计（第2版）课件 2016.12 B http:/