网页设计与制作教程第1章-网页设计与制作基础课件.ppt

1、网页设计与制作教程（HTML+CSS+JavaScript）第2版机械工业出版社第1章 网页设计与制作基础1.1 网页与网站的概念网页与网站的概念网页与网站的概念 WWW（World Wide Web，万维网）是，万维网）是Internet上基于客户上基于客户/服务器体系服务器体系结构的分布式多平台的超文本超媒体信息服务系统。结构的分布式多平台的超文本超媒体信息服务系统。网页（网页（Web Page）是存放在）是存放在Web服务器上供客户端用户浏览的文件，可服务器上供客户端用户浏览的文件，可以在以在Internet上传输。上传输。网站（网站（Web Site，也称站点）被定义为已注册的域名、主

2、页或，也称站点）被定义为已注册的域名、主页或Web服务服务器。网站是一系列网页的组合，这些网页拥有相同或相似的属性并通过各种器。网站是一系列网页的组合，这些网页拥有相同或相似的属性并通过各种链接相关联。链接相关联。如果在浏览器的地址栏中输入网站地址，浏览器会自动连接到这个网址如果在浏览器的地址栏中输入网站地址，浏览器会自动连接到这个网址所指向的网络服务器，并出现一个默认的网页，这个最先打开的默认页面就所指向的网络服务器，并出现一个默认的网页，这个最先打开的默认页面就被称为被称为“主页主页”或或“首页首页”。1.2 Web标准标准1.2.1 Web标准的概念Web标准不是某一种标准，而是一系列标

3、准的集合。网页主要由标准不是某一种标准，而是一系列标准的集合。网页主要由3部分组部分组成：结构（成：结构（Structure）、表现（）、表现（Presentation）和行为（）和行为（Behavior）。）。1结构化标准语言结构化标准语言（1）HTML（2）XML（3）XHTML2表现标准语言表现标准语言CSS是是Cascading Style Sheets（层叠样式表）的缩写。（层叠样式表）的缩写。3行为标准行为标准（1）DOM（2）ECMAScript1.2 Web标准标准1.2.2 建立Web标准的优点 建立建立Web标准的优点如下：标准的优点如下：提供最大利益给最多的网站用户；提供

4、最大利益给最多的网站用户；确保任何网站文档都能够长期有效；确保任何网站文档都能够长期有效；简化代码，降低建设成本；简化代码，降低建设成本；让网站更容易使用，能适应更多不同用户和更多网络设备；让网站更容易使用，能适应更多不同用户和更多网络设备；当浏览器版本更新或者出现新的网络交互设备时，确保所有应用能够当浏览器版本更新或者出现新的网络交互设备时，确保所有应用能够继续正确执行。继续正确执行。1.2 Web标准标准1.2.3 理解表现和结构相分离 1内容内容内容就是页面实际要传达的真正信息，包含数据、文档或图片等。内容就是页面实际要传达的真正信息，包含数据、文档或图片等。2结构结构可以看到上面的文本

5、信息本身已经完整，但是混乱一团，难以阅读和理可以看到上面的文本信息本身已经完整，但是混乱一团，难以阅读和理解，必须将其格式化一下。解，必须将其格式化一下。3表现表现虽然定义了结构，但是内容还是原来的样式没有改变，所有这些用来改虽然定义了结构，但是内容还是原来的样式没有改变，所有这些用来改变内容外观的东西，称之为变内容外观的东西，称之为“表现表现”。4行为行为行为是对内容的交互及操作效果。例如，使用行为是对内容的交互及操作效果。例如，使用JavaScript可以使内容动可以使内容动起来，可以判断一些表单提交，进行相应的一些操作。起来，可以判断一些表单提交，进行相应的一些操作。1.3 HTML语法

6、基础语法基础1.3.1 HTML简介HTML最早源于最早源于SGML（Standard General Markup Language，标准通用化标，标准通用化标记语言）。记语言）。2000年，年，W3C组织公布发行了组织公布发行了XHTML 1.0版本。不过版本。不过XHTML并没有成功，并没有成功，而而HTML5便因此孕育而生。便因此孕育而生。2012年年12月月17日，日，W3C宣布凝结了大量宣布凝结了大量网络工作者心血的网络工作者心血的HTML5规范正式定稿，确规范正式定稿，确定了定了HTML5在在Web网络平台奠基石的地位。网络平台奠基石的地位。Web技术发展历程时间表如图技术发展历

7、程时间表如图2-1所示。所示。1.3 HTML语法基础语法基础1.3.2 HTML语法结构1标签标签在在HTML中，通常标签都是由开始标签和结束标签组成的，开始标签用中，通常标签都是由开始标签和结束标签组成的，开始标签用“”表示，结束标签用表示，结束标签用“”表示。其格式为：表示。其格式为：2属性属性标签仅仅规定这是什么信息，但是要想显示或控制这些信息，就需要在标签仅仅规定这是什么信息，但是要想显示或控制这些信息，就需要在标签后面加上相关的属性。其格式为：标签后面加上相关的属性。其格式为：3元素元素元素指的是包含标签在内的整体，元素的内容是开始标签与结束标签之元素指的是包含标签在内的整体，元素

8、的内容是开始标签与结束标签之间的内容。间的内容。1.3 HTML语法基础语法基础1.3.3 HTML语法规范1标签的规范标签的规范（1）标签分单标签和双标签，双标签往往是成对出现，所有标签（包括）标签分单标签和双标签，双标签往往是成对出现，所有标签（包括空标签）都必须关闭，如空标签）都必须关闭，如、等。等。（2）标签名和属性建议都用小写字母。）标签名和属性建议都用小写字母。（3）多数）多数HTML标签可以嵌套，但不允许交叉。标签可以嵌套，但不允许交叉。（4）HTML文件一行可以写多个标签，但标签中的一个单词不能分两行文件一行可以写多个标签，但标签中的一个单词不能分两行写。写。（5）HTML源文

9、件中的换行、回车符和空格在显示效果中是无效的。源文件中的换行、回车符和空格在显示效果中是无效的。1.3 HTML语法基础语法基础1.3.3 HTML语法规范2属性的规范属性的规范（1）并不是所有的标签都有属性，如换行标签就没有。）并不是所有的标签都有属性，如换行标签就没有。（2）属性值都要用双引号括起来。）属性值都要用双引号括起来。3代码的缩进代码的缩进HTML代码并不要求在书写时缩进，但为了文档的构性和层次性，建议初代码并不要求在书写时缩进，但为了文档的构性和层次性，建议初学者使用标记时首尾对齐，内部的内容向右缩进几格。学者使用标记时首尾对齐，内部的内容向右缩进几格。1.3 HTML语法基础

10、语法基础1.3.4 HTML文档结构HTML5文档是一种纯文本格式的文件，文档的基本结构为：文档是一种纯文本格式的文件，文档的基本结构为：1.4 网页结构网页结构网页结构从页面布局的角度看，从页面布局的角度看，一个页面的布局就类似一篇一个页面的布局就类似一篇文章的排版，需要分为多个文章的排版，需要分为多个区块，较大的区块又可再细区块，较大的区块又可再细分为小区块。块内为多行逐分为小区块。块内为多行逐一排列的文字、图片、超链一排列的文字、图片、超链接等内容，这些区块一般称接等内容，这些区块一般称为块级元素；而区块内的文为块级元素；而区块内的文字、图片或超链接等一般称字、图片或超链接等一般称为行级

11、元素，如图为行级元素，如图1-4所示。所示。1.5 创建创建HTML文档文档创建HTML文档下面用最简单的下面用最简单的“记事本记事本”来编辑网页文件。来编辑网页文件。打开记事本。单击打开记事本。单击Windows的的“开始开始”按钮，在按钮，在“程序程序”菜单的菜单的“附附件件”子菜单中单击子菜单中单击“记事本记事本”命令。命令。创建新文件，并按创建新文件，并按HTML语言规则编辑。在语言规则编辑。在“记事本记事本”窗口中输入窗口中输入HTML代码。代码。保存网页。将记事本中的内容保存在磁盘中。保存网页。将记事本中的内容保存在磁盘中。在在“我的电脑我的电脑”相应的存盘文件夹中双击相应的存盘文

12、件夹中双击first.html文件启动浏览器，文件启动浏览器，即可看到网页的显示结果。即可看到网页的显示结果。1.6 页面摘要信息页面摘要信息1.6.1 标签标签位于标签位于与与中，用于标示文档标题，但文本内容中，用于标示文档标题，但文本内容不会出现在网页中，而是出现在大多数浏览器的左上角。如果文章没有标题，不会出现在网页中，而是出现在大多数浏览器的左上角。如果文章没有标题，读者就必须通过阅读部分内容才能了解其主题。对于网页来说，也必须有标读者就必须通过阅读部分内容才能了解其主题。对于网页来说，也必须有标题来归纳要点。题来归纳要点。标签位于标签位于与与中，用于标示文档标题。格式如下：中，用于标

13、示文档标题。格式如下：1.6 页面摘要信息页面摘要信息1.6.2 标签标签可提供有关页面的元信息（标签可提供有关页面的元信息（meta-information）。分两大属）。分两大属性：性：HTTP标题属性（标题属性（http-equiv）和页面描述属性（）和页面描述属性（name）。）。标签的标签的name属性的语法格式为：属性的语法格式为：name属性主要有以下两个参数：属性主要有以下两个参数：keywords和和description。1keywords（关键字）（关键字）keywords用来告诉搜索引擎网页使用的关键字。用来告诉搜索引擎网页使用的关键字。2description（网站内

14、容描述）（网站内容描述）description用来告诉搜索引擎网站主要的内容。用来告诉搜索引擎网站主要的内容。1.6 页面摘要信息页面摘要信息1.6.3 光影世界页面摘要信息【演练【演练1-1】制作光影世界页面摘要信息，由于摘要信息不能显示在浏览】制作光影世界页面摘要信息，由于摘要信息不能显示在浏览器窗口中，因此这里只给出本例文件器窗口中，因此这里只给出本例文件1-1.html的代码。的代码。【说明】用户可以登录百度搜索引擎【说明】用户可以登录百度搜索引擎http:/ 注释和特殊符号注释和特殊符号1.7.1 注释可以在可以在HTML文档中添加注释，增加代码的可读性，便于以后维护和修改。文档中添

15、加注释，增加代码的可读性，便于以后维护和修改。访问者在浏览器中是看不见这些注释的，只有在用文本编辑器打开文档源代访问者在浏览器中是看不见这些注释的，只有在用文本编辑器打开文档源代码时才可见。码时才可见。注释标签的格式为：注释标签的格式为：1.7 注释和特殊符号注释和特殊符号1.7.2 特殊符号常用的特殊符号及对应的字符实体见表常用的特殊符号及对应的字符实体见表1-1。这些字符实体都以。这些字符实体都以“&”开开头，以头，以“;”结束。结束。1.8 实训实训制作家具商城页面的版权信息制作家具商城页面的版权信息家具商城页面的版权信息【实训】制作家具商城页面的版权信息，页面中包括版权符号、空格，【实

16、训】制作家具商城页面的版权信息，页面中包括版权符号、空格，本例文件本例文件1-2.html在浏览器中显示的效果如图在浏览器中显示的效果如图1-9所示。所示。习题习题1习题11制作家具商城页面的摘要信息。其中，网页标题为制作家具商城页面的摘要信息。其中，网页标题为“家具商城家具商城-通向幸通向幸福生活的桥梁福生活的桥梁”；搜索关键字为；搜索关键字为“家具商城，供求信息，项目合作，企业加家具商城，供求信息，项目合作，企业加盟盟”；内容描述为；内容描述为“家具商城多年从事家具的商机发布与产品推广，始终奉家具商城多年从事家具的商机发布与产品推广，始终奉行质量第一、诚信为本、客户至上的经营理念为宗旨。行质量第一、诚信为本、客户至上的经营理念为宗旨。”2制作光影世界的版权信息，如图制作光影世界的版权信息，如图1-10所示。所示。