网页制作教程_第1页
网页制作教程_第2页
网页制作教程_第3页
网页制作教程_第4页
网页制作教程_第5页
已阅读5页，还剩63页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

网页制作教程第1章HTML基础1思考以下几个问题？冯·罗依曼提出的计算机的五大部件是什么？计算机是如何工作的？（工作的原理是什么？）硬件和软件的关系是什么？Internet=互联网？计算机网络的概念是什么？HTTP、WWW、DNS、IP的概念是什么？计算机病毒是什么？黑客是什么？杀毒软件和防火墙是一回事吗？2一冯·罗依曼计算机基本结构3二计算机的工作原理计算机是如何工作的？4计算机如何工作？按照“程序存储，程序控制”的方式工作。具体为将程序和数据存放在存储器中；计算机的控制器按照程序中指令序列，从存储器中取出指令，并分析指令的功能，进而发出各种控制信号，指挥计算机中的各类部件来执行该指令。这种通过取指令、分析指令、执行指令的操作重复执行，直到完成程序中的全部指令操作为止。5三硬件和软件的关系

计算机、软件及用户之间的关系

6四Internet=互联网？Internet——因特网internet——互联网7五计算机网络的概念是什么？定义：两台及两台以上的计算机通过通信介质相互连接可以实现资源共享的集合体。因特网(Internet)是“网络的网络”。8六一些基本概念HTTPWWWDomainName（域名）DNSIP9七计算机病毒、黑客、杀毒、防火墙计算机病毒黑客杀毒软件防火墙10学习使用工具1.Dreamweaver8.02.EditPlus3.Frontpage11第1章HTML基础1.1什么是HTML1.2创建Web页1.3发布Web页121.1什么是HTML1.1.1Web页的基本概念Internet与WWW计算机网络InternetWWWHTTP13WWW示意图14WWW与浏览器15网站与主页网站

通常我们把一系列逻辑上可以视为一个整体的页面叫做网站，或者说，网站就是一个有共同主题的页面的集合。

主页

主页是网站中一个特殊页面，它是网站的入口页面，其中包含指向其他页面的超链接。通常主页的名称是固定的，例如：index.html。161.1.2HTML的工作原理HTML（HyperTextMarkupLanguage，超文本标记语言）是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容如何显示。超链接超文本超媒体17如果在浏览器中任意打开一个网页，然后在窗口中空白位置单击鼠标右键，选择“查看源文件”命令（或者选择“查看”菜单中的“源文件”命令），则系统会启动“记事本”，其中包含一些文本信息，如图1-2所示。18图1-2网页的源文件19网页的本质—HTML源代码这些文本其实就是网页的本质——HTML源代码。HTML是表示网页的一种规范（或者说是一种标准），它通过标记符定义了网页内容的显示。例如，用<table>标记符可以在网页上定义一个表格。说明：超文本是相对普通文本而言的，与普通文本按顺序定位不同，超文本最典型的特点就是文本中包含指向其他位置的链接，通过这些链接使文档组织成了网状结构，如图1-3所示.20图1-3超文本示意图21浏览器如何显示网页在HTML文档中，通过使用标记符可以告诉浏览器如何显示网页，即确定内容的显示格式。浏览器按顺序读取HTML文件，然后根据内容周围的HTML标记符解释和显示各种内容。例如，如果为某段内容添加<H1></H1>标记符，则浏览器会以比一般文字大的粗体字显示该段内容，如图1-4所示。22图1-4浏览器解释HTML标记示意23超文本功能HTML中的超文本功能，也就是超链接功能，使网页之间可以链接起来。网页与网页的链接构成了网站，而网站与网站的链接就构成了多姿多彩的WWW。HTML由国际组织W3C（万维网联盟）制定和维护，本书中的主要内容是以HTTP4.0为基础的。24W3C网站：251.1.3创建和测试Web页（使用记事本作演示）261.1.4网页编辑工具第一类：HTML编辑器EditPlus、HomeSite、BBedit第二类：所见即所得编辑器Dreamweaver、FrontPage认识Dreamweaver271.2创建Web页1.2.1标记符基础基本的HTML语法标记符的属性1.2.2Web页的基本结构HTML标记首部标记28基本的HTML语法HTML是一种脚本语言，使用标记符，语法简单。标记符都用<>括起来，一般成对出现，分别称作开始标记符和结束标记符。例：<HTML></HTML><HEAD></HEAD>但有些标记符只要求单一标记号。例：换行标记符<BR>HTML标记符不区分大小写，但约定使用大写。29标记符的属性属性是用来描述对象特征的特性。许多标记符还包含一些属性，以便对标记符作用的内容进行更详细的控制。属性放在开始标记符的<>中，属性与标记符之间用空格分隔，属性值用等号与属性连接，属性之间也用空格分隔。例：<FONTsize=“1”,color=“green”>属性通常不区分大小写，但习惯用小写。301.2.2Web页的基本结构<HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML>31HTML标记<HTML>和</HTML>是WEB页第一个和最后一个标记符，其他标记符和内容都位于这两个标记符之间。这两个标记符都可以省略，保留可以使网页结构更完整。32首部标记<HEAD>和</HEAD>位于Web页的开头，其中不包括Web页的任何实际内容，而是提供一些与Web页有关的特定信息。首标记的内容也用特定的标记括起来33TITLE标记符<TITLE>和</TITLE>，用于定义网页的标题。网页标题可被浏览器用作书签和收藏清单。当网页在浏览器中显示时，网页标题将在浏览器窗口的标题栏中显示。例如，以下HTML代码在浏览器中的显示如图1-6所示。34例子<HTML><HEAD><TITLE>这里是网页标题</TITLE></HEAD><BODY>请看浏览器的标题栏。</BODY></HTML>35图1-6TITLE标记符的效果362．META标记META，它用于说明与Web页有关的信息。META标记符的常用属性包括：name属性给出特性名content属性给出特性值http-equiv属性指定HTTP响应名称，通常用于替换name属性，HTTP服务器使用该属性值为HTTP响应消息头收集信息。37例子例：<METAhttp-equiv=“Content-Script-Type”content=“text/javascript”>设置客户端行内程序的语言是JavaScript。例：<METAhttp-equiv="Content-Style-Type"content="text/css">设置行内样式的样式语言为CSS。38设置自动转址功能META标记符的一个常用功能是设置自动转址功能，即使浏览器自动从一个地址跳转到另一个地址，如下所示。39例子<HTML><HEAD><TITLE>META示例</TITLE><METAhttp-equiv="Refresh"content="30;URL=title(tu1-6).htm"></HEAD><BODY>META示例</BODY></HTML>在此例中，完成当前文档加载30秒后将自动加载另一个文档（即“URL=”后指定的HTML文档），如图1-7所示。40图1-7利用META实现自动转址功能30秒后自动跳转41说明：要实现以上效果，必须使“URL=”后指定的HTML文档存在。在该例子中，我们指定跳转的目标为当前目录的某个文件。在实际使用此功能时，也可以直接指定一个完整的URL地址（例如）。42BGSOUND标记符指定网页的背景音乐。只有开始标识符，没有结束标识符。语法格式：<BGSOUNDsrc=音乐文件loop=播放次数>

音乐文件格式一般为.wav、.mid、.mp3等。例：<BGSOUNDsrc=“千里之外.mp3”loop=“2”>43正文标记符<BODY>和</BODY>包含Web页的具体内容，包括文字、图形、超链接以及其他各种HTML对象。如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示（如果浏览器窗口显示不下，则自动换行）。例如，以下HTML代码在浏览器中的显示如图1-8所示。44例子<HTML><HEAD><TITLE>网页标题</TITLE></HEAD><BODY>正文，正文，正文，正文，正文，正文，正文，正文，正文</BODY></HTML>45图1-846注意：空格、回车这些格式控制在显示时都不起作用，如要使它们起作用，应使用预格式化标记符<PRE>和</PRE>将需要采用原始格式的内容包含起来。471.2.3设置页面属性设置页面背景颜色在<BODY>标记符中使用bgcolor属性可以为网页设置背景颜色。例如，如果想为网页设置黑色背景，应使用以下HTML语句：<BODYbgcolor="black">在指定背景颜色时，有16种标准颜色可供选择，通过颜色名表示颜色通过设置RGB（RedGreenBlue）值来表示颜色如表1-1所示。48表1-116种标准颜色色彩名十六进制值色彩名十六进制值Aqua（水蓝色）#00FFFFNavy（藏青色）#000080Black（黑色）#000000Olive（茶青色）#808000Blue（蓝色）#0000FFPurple（紫色）#800080Fuchsia（樱桃色）#FF00FFRed（红色）#FF0000Gray（灰色）#808080Silver（银色）#C0C0C0Green（绿色）#008000Teal（茶色）#008080Lime（石灰色）#00FF00White（白色）#FFFFFFMaroon（褐红色）#800000Yellow（黄色）#FFFF004950设置页面背景图像单纯使用一种颜色作为背景显然有些单调，网页设计者也可选择特定图案作为页面的背景——使用BODY标记符的background属性即可。HTML语句为：<BODYbackground="网页背景图案的地址">51使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。例如，以下代码显示了设置背景图案的效果，如图1-9所示。<HTML><HEAD><TITLE>背景图案示例</TITLE></HEAD><BODYbackground="background.jpg">背景图案示例</BODY></HTML>52图1-9背景图案示例53注意：如果要使以上代码正确工作，必须在网页所在目录包含background.jpg文件。用户也可以同时设置网页的背景图案和背景色，在这种情况下，只有在浏览器不能显示图像时才显示背景色。例如，如果用户将浏览器设置为不显示图像（选择“工具”菜单中的“Internet选项”命令，然后选择“高级”选项卡，在“多媒体”下设置），那么给网页设置的背景图案将不显示，而是显示背景颜色。54设置背景图像水印效果例：<BODYbackground=“background.jpg”bgproperties=“fixed”>55设置文字和超链接的颜色text属性用于设置正文的颜色Link属性用于设置未被访问的超链接颜色Vlink属性用于设置已访问的超链接颜色Alink属性用于活动超链接的颜色例：<BODYbgcolor=“#000000”text=“#FFFFFF”link=“#999999”vlink=“#cccccc”alink=“#666666”>561.2.4添加注释格式：<!--和结束标记符-->这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。57例：<HTML><HEAD><TITLE>网页标题</TITLE></HEAD><BODY>正文，正文，正文，正文<!--本行文字将不会在浏览器中显示！--></BODY></HTML>58图1-10注释不在网页中显示注意：注释可插入在Web页的任何位置。591.2.5显示特殊字符如果用户需要在网页中显示某些特殊字符，例如：<、>等与HTML语法冲突的符号（浏览器会自动将<号后的内容解释为HTML标记符），或者×、∑、±等无法直接用键盘输入的符号，则需使用参考字符来表示，而不能直接输入。60参考字符以“&”号开始，以“；”结束，既可以使用数字代码，也可以使用代码名称。最常见的参考字符为：<表示为<>表示为>&表示为&空格表示为 有关参考字符完整的编码请参见附录2。注意：与HTML标记符不同，字符代码名称区分大小写。61

例如，要在Web页中显示内容“<Tom&Jerry>isapopularVCDprogram.”，则需使用参考字符。HTML代码如下，在浏览器中的显示如图1-11所示。<HTML><HEAD>

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论