《网页制作教程讲述》由会员分享，可在线阅读，更多相关《网页制作教程讲述（68页珍藏版）》请在金锄头文库上搜索。
1、网页制作教程第1章HTML基础1思考以下几个问题？n冯罗依曼提出的计算机的五大部件是什么？n计算机是如何工作的？（工作的原理是什么？）n硬件和软件的关系是什么？nInternet=互联网？n计算机网络的概念是什么？nHTTP、WWW、DNS、IP的概念是什么？n计算机病毒是什么？黑客是什么？杀毒软件和防火墙是一回事吗？2一冯罗依曼计算机基本结构3二计算机的工作原理计算机是如何工作的？4计算机如何工作？按照“程序存储，程序控制”的方式工作。具体为将程序和数据存放在存储器中；计算机的控制器按照程序中指令序列，从存储器中取出指令，并分析指令的功能，进而发出各种控制信号，指挥计算机中的各类部件来执行该
2、指令。这种通过取指令、分析指令、执行指令的操作重复执行，直到完成程序中的全部指令操作为止。5三硬件和软件的关系计算机、软件及用户之间的关系6四Internet=互联网？Internet因特网internet互联网7五计算机网络的概念是什么？定义：两台及两台以上的计算机通过通信介质相互连接可以实现资源共享的集合体。因特网(Internet)是“网络的网络”。8六一些基本概念HTTPWWWDomainName（域名）DNSIP9七计算机病毒、黑客、杀毒、防火墙n计算机病毒n黑客n杀毒软件n防火墙10学习使用工具1.Dreamweaver8.02.EditPlus3.Frontpage11第1章HT
3、ML基础1.1什么是HTML1.2创建Web页1.3发布Web页121.1什么是HTML1.1.1Web页的基本概念1.1.1.1Internet与WWW计算机网络InternetWWWHTTP13WWW示意图141.1.1.2WWW与浏览器151.1.1.3网站与主页网站通常我们把一系列逻辑上可以视为一个整体的页面叫做网站，或者说，网站就是一个有共同主题的页面的集合。主页主页是网站中一个特殊页面，它是网站的入口页面，其中包含指向其他页面的超链接。通常主页的名称是固定的，例如：index.html。161.1.2HTML的工作原理HTML（HyperTextMarkupLanguage，超文本
4、标记语言）是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容如何显示。超链接超文本超媒体17如果在浏览器中任意打开一个网页，然后在窗口中空白位置单击鼠标右键，选择“查看源文件”命令（或者选择“查看”菜单中的“源文件”命令），则系统会启动“记事本”，其中包含一些文本信息，如图1-2所示。18图1-2网页的源文件19网页的本质HTML源代码这些文本其实就是网页的本质HTML源代码。HTML是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容的显示。例如，用标记符可以在网页上定义一个表格。说明：超文本是相对普通文本而言的，与普通文本按顺序定位不同，超文本最典型的特点
5、就是文本中包含指向其他位置的链接，通过这些链接使文档组织成了网状结构，如图1-3所示.20图1-3超文本示意图21浏览器如何显示网页在HTML文档中，通过使用标记符可以告诉浏览器如何显示网页，即确定内容的显示格式。浏览器按顺序读取HTML文件，然后根据内容周围的HTML标记符解释和显示各种内容。例如，如果为某段内容添加标记符，则浏览器会以比一般文字大的粗体字显示该段内容，如图1-4所示。22图1-4浏览器解释HTML标记示意23超文本功能HTML中的超文本功能，也就是超链接功能，使网页之间可以链接起来。网页与网页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的WWW。HTML由国际组织W
6、3C（万维网联盟）制定和维护，本书中的主要内容是以HTTP4.0为基础的。24W3C网站：http:www.w3.org251.1.3创建和测试Web页（使用记事本作演示）261.1.4网页编辑工具第一类：HTML编辑器EditPlus、HomeSite、BBedit第二类：所见即所得编辑器Dreamweaver、FrontPage认识DreamweaverDreamweaver271.2创建Web页1.2.1标记符基础1.2.1.1基本的HTML语法1.2.1.2标记符的属性1.2.2Web页的基本结构1.2.2.1HTML标记1.2.2.2首部标记281.2.1.1基本的HTML语法HTM
7、L是一种脚本语言，使用标记符，语法简单。标记符都用括起来，一般成对出现，分别称作开始标记符和结束标记符。例：但有些标记符只要求单一标记号。例：换行标记符HTML标记符不区分大小写，但约定使用大写。291.2.1.2标记符的属性属性是用来描述对象特征的特性。许多标记符还包含一些属性，以便对标记符作用的内容进行更详细的控制。属性放在开始标记符的中，属性与标记符之间用空格分隔，属性值用等号与属性连接，属性之间也用空格分隔。例：属性通常不区分大小写，但习惯用小写。301.2.2Web页的基本结构311.2.2.1HTML标记和是WEB页第一个和最后一个标记符，其他标记符和内容都位于这两个标记符之间。这
8、两个标记符都可以省略，保留可以使网页结构更完整。321.2.2.2首部标记和位于Web页的开头，其中不包括Web页的任何实际内容，而是提供一些与Web页有关的特定信息。首标记的内容也用特定的标记括起来33TITLE标记符和，用于定义网页的标题。网页标题可被浏览器用作书签和收藏清单。当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。例如，以下HTML代码在浏览器中的显示如图1-6所示。34例子这里是网页标题请看浏览器的标题栏。35图1-6TITLE标记符的效果362META标记META，它用于说明与Web页有关的信息。META标记符的常用属性包括：name属性给出特性名content
9、属性给出特性值http-equiv属性指定HTTP响应名称，通常用于替换name属性，HTTP服务器使用该属性值为HTTP响应消息头收集信息。37例子例：设置客户端行内程序的语言是JavaScript。例：设置行内样式的样式语言为CSS。38设置自动转址功能META标记符的一个常用功能是设置自动转址功能，即使浏览器自动从一个地址跳转到另一个地址，如下所示。39例子META示例META示例在此例中，完成当前文档加载30秒后将自动加载另一个文档（即“URL=”后指定的HTML文档），如图1-7所示。40图1-7利用META实现自动转址功能30秒后自动跳转41说明：要实现以上效果，必须使“URL=”
10、后指定的HTML文档存在。在该例子中，我们指定跳转的目标为当前目录的某个文件。在实际使用此功能时，也可以直接指定一个完整的URL地址（例如）。42BGSOUND标记符指定网页的背景音乐。只有开始标识符，没有结束标识符。语法格式：音乐文件格式一般为.wav、.mid、.mp3等。例：431.2.2.3正文标记符和包含Web页的具体内容，包括文字、图形、超链接以及其他各种HTML对象。如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示（如果浏览器窗口显示不下，则自动换行）。例如，以下HTML代码在浏览器中的显示如图1-8所示。44例子网页标题正文，正文，正文，正文，正文，正文，正文，正
11、文，正文45图1-846注意：空格、回车这些格式控制在显示时都不起作用，如要使它们起作用，应使用预格式化标记符和将需要采用原始格式的内容包含起来。471.2.3设置页面属性1.2.3.1设置页面背景颜色在标记符中使用bgcolor属性可以为网页设置背景颜色。例如，如果想为网页设置黑色背景，应使用以下HTML语句：在指定背景颜色时，有16种标准颜色可供选择，通过颜色名表示颜色通过设置RGB（RedGreenBlue）值来表示颜色如表1-1所示。48表1-116种标准颜色色彩名十六进制值色彩名十六进制值Aqua（水蓝色）#00FFFFNavy（藏青色）#000080Black（黑色）#000000
12、Olive（茶青色）#808000Blue（蓝色）#0000FFPurple（紫色）#800080Fuchsia（樱桃色）#FF00FFRed（红色）#FF0000Gray（灰色）#808080Silver（银色）#C0C0C0Green（绿色）#008000Teal（茶色）#008080Lime（石灰色）#00FF00White（白色）#FFFFFFMaroon（褐红色）#800000Yellow（黄色）#FFFF0049501.2.3.2设置页面背景图像单纯使用一种颜色作为背景显然有些单调，网页设计者也可选择特定图案作为页面的背景使用BODY标记符的background属性即可。HTML语
13、句为：51使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。例如，以下代码显示了设置背景图案的效果，如图1-9所示。背景图案示例背景图案示例背景图案示例背景图案示例52图1-9背景图案示例53注意：如果要使以上代码正确工作，必须在网页所在目录包含background.jpg文件。用户也可以同时设置网页的背景图案和背景色，在这种情况下，只有在浏览器不能显示图像时才显示背景色。例如，如果用户将浏览器设置为不显示图像（选择“工具”菜单中的“Internet选项”命令，然后选择“高级”选项卡，在“多媒体”下设置），那么给网页设置的背景图案将不显示，而是显示背景颜色
14、。541.2.3.3设置背景图像水印效果例：551.2.3.4设置文字和超链接的颜色text属性用于设置正文的颜色Link属性用于设置未被访问的超链接颜色Vlink属性用于设置已访问的超链接颜色Alink属性用于活动超链接的颜色例：561.2.4添加注释格式：这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。57例：网页标题正文，正文，正文，正文58图1-10注释不在网页中显示注意：注释可插入在Web页的任何位置。591.2.5显示特殊字符如果用户需要在网页中显示某些特殊字符，例如：等与HTML语法冲突的符号（浏览器会自动将号后的内容解释为HTML标记符），或者、等无法直接
15、用键盘输入的符号，则需使用参考字符来表示，而不能直接输入。60参考字符以“&”号开始，以“；”结束，既可以使用数字代码，也可以使用代码名称。最常见的参考字符为：表示为&表示为&空格表示为有关参考字符完整的编码请参见附录2。注意：与HTML标记符不同，字符代码名称区分大小写。61例如，要在Web页中显示内容“isapopularVCDprogram.”，则需使用参考字符。HTML代码如下，在浏览器中的显示如图1-11所示。参考字符示例参考字符示例&TomltTom&Jerry>JerryisaisapopularVCDprogram.popularVCDprogram.62图1-11参考字符
16、示例63说明：对于&这样可以直接用键盘输入的特殊字符，如果不用参考字符，浏览器通常也能够正确显示。例如，刚才的示例中，BODY部分的代码也可以写为：Tom&JerryisapopularVCDprogram.不过，如果要显示，则一定要使用参考字符，否则会出现显示错误。641.3发布Web页1.3.1创建本地站点演示网站的建立确定网站的风格网页色彩的搭配绘制设计草图651.3发布Web页1.3.2申请网页空间1.3.3用FTP上传网页申请了免费网页空间之后，需要用FTP的方式将网页上传到服务器上，才能让别人通过Internet浏览自己的网站。另外：展示学生作品66本章小结基本概念：WWWHTTPHTML超文本超媒体HTTP的工作原理Web页的基本结构67常用的HTML标记：特殊符号的显示68
