《网页制作教程》PPT课件

1,网页制作教程,第1章HTML基础,2,思考以下几个问题？,冯罗依曼提出的计算机的五大部件是什么？计算机是如何工作的？（工作的原理是什么？）硬件和软件的关系是什么？Internet=互联网？计算机网络的概念是什么？HTTP、WWW、DNS、IP的概念是什么？计算机病毒是什么？黑客是什么？杀毒软件和防火墙是一回事吗？,3,一冯罗依曼计算机基本结构,4,二计算机的工作原理,计算机是如何工作的？,5,计算机如何工作？,按照“程序存储，程序控制”的方式工作。具体为将程序和数据存放在存储器中；计算机的控制器按照程序中指令序列，从存储器中取出指令，并分析指令的功能，进而发出各种控制信号，指挥计算机中的各类部件来执行该指令。这种通过取指令、分析指令、执行指令的操作重复执行，直到完成程序中的全部指令操作为止。,6,三硬件和软件的关系,计算机、软件及用户之间的关系,7,四Internet=互联网？,Internet因特网internet互联网,8,五计算机网络的概念是什么？,定义：两台及两台以上的计算机通过通信介质相互连接可以实现资源共享的集合体。因特网(Internet)是“网络的网络”。,9,六一些基本概念,HTTPWWWDomainName（域名）DNSIP,10,七计算机病毒、黑客、杀毒、防火墙,计算机病毒黑客杀毒软件防火墙,11,学习使用工具,1.Dreamweaver8.02.EditPlus3.Frontpage,12,第1章HTML基础,1.1什么是HTML1.2创建Web页1.3发布Web页,13,1.1什么是HTML,1.1.1Web页的基本概念Internet与WWW计算机网络InternetWWWHTTP,14,WWW示意图,15,WWW与浏览器,16,网站与主页,网站通常我们把一系列逻辑上可以视为一个整体的页面叫做网站，或者说，网站就是一个有共同主题的页面的集合。主页主页是网站中一个特殊页面，它是网站的入口页面，其中包含指向其他页面的超链接。通常主页的名称是固定的，例如：index.html。,17,1.1.2HTML的工作原理,HTML（HyperTextMarkupLanguage，超文本标记语言）是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容如何显示。超链接超文本超媒体,18,如果在浏览器中任意打开一个网页，然后在窗口中空白位置单击鼠标右键，选择“查看源文件”命令（或者选择“查看”菜单中的“源文件”命令），则系统会启动“记事本”，其中包含一些文本信息，如图1-2所示。,19,图1-2网页的源文件,20,网页的本质HTML源代码,这些文本其实就是网页的本质HTML源代码。HTML是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容的显示。例如，用标记符可以在网页上定义一个表格。说明：超文本是相对普通文本而言的，与普通文本按顺序定位不同，超文本最典型的特点就是文本中包含指向其他位置的链接，通过这些链接使文档组织成了网状结构，如图1-3所示.,21,图1-3超文本示意图,22,浏览器如何显示网页,在HTML文档中，通过使用标记符可以告诉浏览器如何显示网页，即确定内容的显示格式。浏览器按顺序读取HTML文件，然后根据内容周围的HTML标记符解释和显示各种内容。例如，如果为某段内容添加标记符，则浏览器会以比一般文字大的粗体字显示该段内容，如图1-4所示。,23,图1-4浏览器解释HTML标记示意,24,超文本功能,HTML中的超文本功能，也就是超链接功能，使网页之间可以链接起来。网页与网页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的WWW。HTML由国际组织W3C（万维网联盟）制定和维护，本书中的主要内容是以HTTP4.0为基础的。,25,W3C网站：,26,1.1.3创建和测试Web页,（使用记事本作演示）,27,1.1.4网页编辑工具,第一类：HTML编辑器EditPlus、HomeSite、BBedit第二类：所见即所得编辑器Dreamweaver、FrontPage,认识Dreamweaver,28,1.2创建Web页,1.2.1标记符基础基本的HTML语法标记符的属性1.2.2Web页的基本结构HTML标记首部标记,29,基本的HTML语法,HTML是一种脚本语言，使用标记符，语法简单。标记符都用括起来，一般成对出现，分别称作开始标记符和结束标记符。例：但有些标记符只要求单一标记号。例：换行标记符HTML标记符不区分大小写，但约定使用大写。,30,标记符的属性,属性是用来描述对象特征的特性。许多标记符还包含一些属性，以便对标记符作用的内容进行更详细的控制。属性放在开始标记符的中，属性与标记符之间用空格分隔，属性值用等号与属性连接，属性之间也用空格分隔。例：属性通常不区分大小写，但习惯用小写。,31,1.2.2Web页的基本结构,32,HTML标记,和是WEB页第一个和最后一个标记符，其他标记符和内容都位于这两个标记符之间。这两个标记符都可以省略，保留可以使网页结构更完整。,33,首部标记,和位于Web页的开头，其中不包括Web页的任何实际内容，而是提供一些与Web页有关的特定信息。首标记的内容也用特定的标记括起来,34,TITLE标记符,和，用于定义网页的标题。网页标题可被浏览器用作书签和收藏清单。当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。例如，以下HTML代码在浏览器中的显示如图1-6所示。,35,例子,这里是网页标题请看浏览器的标题栏。,36,图1-6TITLE标记符的效果,37,2META标记,META，它用于说明与Web页有关的信息。META标记符的常用属性包括：name属性给出特性名content属性给出特性值http-equiv属性指定HTTP响应名称，通常用于替换name属性，HTTP服务器使用该属性值为HTTP响应消息头收集信息。,38,例子,例：设置客户端行内程序的语言是JavaScript。例：设置行内样式的样式语言为CSS。,39,设置自动转址功能,META标记符的一个常用功能是设置自动转址功能，即使浏览器自动从一个地址跳转到另一个地址，如下所示。,40,例子,META示例META示例在此例中，完成当前文档加载30秒后将自动加载另一个文档（即“URL=”后指定的HTML文档），如图1-7所示。,41,图1-7利用META实现自动转址功能,30秒后自动跳转,42,说明：要实现以上效果，必须使“URL=”后指定的HTML文档存在。在该例子中，我们指定跳转的目标为当前目录的某个文件。在实际使用此功能时，也可以直接指定一个完整的URL地址（例如）。,43,BGSOUND标记符,指定网页的背景音乐。只有开始标识符，没有结束标识符。语法格式：音乐文件格式一般为.wav、.mid、.mp3等。例：,44,正文标记符,和包含Web页的具体内容，包括文字、图形、超链接以及其他各种HTML对象。如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示（如果浏览器窗口显示不下，则自动换行）。例如，以下HTML代码在浏览器中的显示如图1-8所示。,45,例子,网页标题正文，正文，正文，正文，正文，正文，正文，正文，正文,46,图1-8,47,注意：空格、回车这些格式控制在显示时都不起作用，如要使它们起作用，应使用预格式化标记符和将需要采用原始格式的内容包含起来。,48,1.2.3设置页面属性,设置页面背景颜色在标记符中使用bgcolor属性可以为网页设置背景颜色。例如，如果想为网页设置黑色背景，应使用以下HTML语句：在指定背景颜色时，有16种标准颜色可供选择，通过颜色名表示颜色通过设置RGB（RedGreenBlue）值来表示颜色如表1-1所示。,49,表1-116种标准颜色,50,51,设置页面背景图像,单纯使用一种颜色作为背景显然有些单调，网页设计者也可选择特定图案作为页面的背景使用BODY标记符的background属性即可。HTML语句为：,52,使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。例如，以下代码显示了设置背景图案的效果，如图1-9所示。背景图案示例背景图案示例,53,图1-9背景图案示例,54,注意：如果要使以上代码正确工作，必须在网页所在目录包含background.jpg文件。用户也可以同时设置网页的背景图案和背景色，在这种情况下，只有在浏览器不能显示图像时才显示背景色。例如，如果用户将浏览器设置为不显示图像（选择“工具”菜单中的“Internet选项”命令，然后选择“高级”选项卡，在“多媒体”下设置），那么给网页设置的背景图案将不显示，而是显示背景颜色。,55,设置背景图像水印效果,例：,56,设置文字和超链接的颜色,text属性用于设置正文的颜色Link属性用于设置未被访问的超链接颜色Vlink属性用于设置已访问的超链接颜色Alink属性用于活动超链接的颜色例：,57,1.2.4添加注释,格式：这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。,58,例：,网页标题正文，正文，正文，正文,59,图1-10注释不在网页中显示,注意：注释可插入在Web页的任何位置。,60,1.2.5显示特殊字符,如果用户需要在网页中显示某些特殊字符，例如：等与HTML语法冲突的符号（浏览器会自动将号后的内容解释为HTML标记符），或者、等无法直接用键盘输入的符号，则需使用参考字符来表示，而不能直接输入。,61,参考字符以“有关参考字符完整的编码请参见附录2。注意：与HTML标记符不同，字符代码名称区分大小写。,62,例如，要在Web页中显示内容“isapopularVCDprogram.”，则需使用参考字符。HTML代码如下，在浏览器中的显示如图1-11所示。参考字符示例isapopularVCDprogram.,63,图1-11参考字符示例,64,说明：对于isapopularVCDprogram.不过，如果要显示，则一定要使用参考字符，否则会出现显示错误。,6