《网页基本知识》PPT课件.ppt

《《网页基本知识》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《网页基本知识》PPT课件.ppt（62页珍藏版）》请在三一办公上搜索。

1、网页制作三剑客是Macromedia 公司开发的网页制作工具，由DREAMWEAVER（网页制作）FLASH（动画制作）FIREWORKS（矢量图形制作和图像处理）3个软件组成,网页三剑客,Dreamweaver是美国Macromedia公司开发的集网页制作和管理网站于一身的所见即所得网页编辑器，是一款在网页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的HTML源代码就可以生成跨平台、跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。它是第一套针对专业网页设计师特别发展的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充

2、满动感的网页。Dreamweaver支持动态HTML，并采用了Roundtrip HTML技术，Dreamweaver是一种可以满足多层次需求、功能强大的可视化专业级网页设计及制作工具。,1Dreamweaver,优点：1最佳的制作效率Dreamweaver可以用最快速的方式将Fireworks，FreeHand，或Photoshop等档案移至网页上。使用检色吸管工具选择荧幕上的颜色可设定最接近的网页安全色。对于选单，快捷键与格式控制，都只要一个简单步骤便可完成。2网站管理 使用网站地图可以快速制作网站雏形、设计、更新和重组网页。改变网页位置或档案名称，Dreamweaver 会自动更新所有连

3、结。使用支援文字、HTML码、HTML属性标签和一般语法的搜寻及置换功能使得复杂的网站更新变得迅速又简单。3无可比拟的控制能力 当您正使用Dreamweaver在设计动态网页时，所见即所得的功能，让您不需要透过浏览器就能预览网页。梦幻样版和XML Dreamweaver将内容与设计分开，应用于快速网页更新和团队合作网页编辑。建立网页外观的样版，指定可编辑或不可编辑的部份，内容提供者可直接编辑以样式为主的内容却不会不小心改变既定之样式。您也可以使用样版正确地输入或输出XML内容。全方位的呈现利用Dreamweaver设计的网页，可以全方位的呈现在任何平台的热门浏览器上。,缺点：一、难以精确达到与

4、浏览器完全一致的显示效果。也就是说您在所见即所得网页编辑器中制作的网页放到浏览器中是很难完全达到您真正想要的效果，这一点在结构复杂一些的网页（如分帧结构、动态网页结构）中便可以体现出来；二、页面原始代码的难以控制性，比如您在所见即所得编辑器中制作一张表格也要几分钟，但您要它完全符合您要求可能需要几十分钟，甚至更多时间。而相比之下，非所见则所得的网页编辑器，就不存在这个问题，因为所有的HTML代码 都在您的监控下产生，但是由于非所见则所得编辑器的先天条件就注定了它的工作低效率。如何实现两者的完美结合，则既产生干净、准确的HTML代码，又具备则见则所得的高效率、直观性，一直是网页设计师梦想。在Dr

5、eamweaver之前，Frongpage一直被人们认为是最好的所见即所得网页编辑器，但是它同样继承了所见即所得的种种劣性。,Fireworks是由Macromedia公司开发的图形处理工具，它的出现使Web作图发生了革命性的变化。因为Fireworks是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。作为一个图像处理软件，Fireworks能够自由地导入多种格式的图像进行处理。Fireworks还能够自动切割图像、生成光标动态感应的JavaScript程序等等，而且Fireworks具有强大的动画功能和一个相当完美的网络图像生成器。众所周知，在网页上的jpg

6、图片如果过大，会严重影响页面的打开速度，Fireworks提供优化图片的功能，即缩小图片的KB，而且不影响画面的质量（除非放大了与原图对比）。由于很多人喜欢用photoshop制作jpg图片，所以它的容量会很大（因为它是适合处理印刷品，要求比较清晰），最终还是要用Fireworks来处理一下。,2Fireworks,Flash是美国Macromedia公司所设计的一种二维动画软件。通常包括Macromedia Flash，用于设计和编辑Flash文档，以及Macromedia Flash Player，用于播放Flash文档。Flash是美国Macromedia公司开发的矢量图形编辑和动画创作

7、的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。Flash广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。,3Flash,Dreamweaver 是一个“所见即所得”的可视化网站开发工具，主要用于动态网页的开发。但没有真正的制作软件做出来是真正的“所见即所得”。Fireworks主要是用于对网页上常用的jpg,gif的制作和处理，但也可用于制作网页。flash主要用来制作动画，现推出flash平

8、台，可预见有极好的前景称之为三剑客，很大一部分是因为这三种软件能相互无缝合作。现在，制作网页，通常有在firework导出切片、图片等，然后在dreamweaver中绘制表格；较为流行的一种是在firework中做好主要页面，然后导出，在dreamweaver中加以修改，添加链接等，便做出一个非常好看的页面。三者结合是当今网站开发的必备工具。如果用别的软件来替代的话：Fireworks-photoshop与CorelDRAW。Frontpage只对初学者有一定的帮助。在以前adobe公司与macromedia竞争，然而，网页制作当推dreamweaver,而图片处理却是photoshop占优，

9、但在fireworks在做网页有一点优势。在adobe收购了macromedia后，其公司有不少软件停产，而三剑客得以幸存，继续推出新产品。,本章学习目标：,了解Internet基础知识了解网站开发技术种类理解Web服务器的作用了解网页制作基础知识熟悉网站开发流程,第1章 网页制作和网站开发基础知识,随着Internet应用的迅速发展和普及，它和电子商务已经成为近年来最热门的话题，信息技术正在潜移默化地渗透到人类生活和工作的各各领域。利用Internet开展信息服务、宣传企业形像和产品、进行电子商务活动、网络娱乐、网络教育、地理导游、网上股票交易、网上购物、远程医疗、网上直播体育盛事、电视会议

10、、软件下载、地理定位等应用已经成为现代社会人们生活和工作的重要部分。,问题：谈谈你所知道的电子商务活动？,1.1 Internet基础知识,Internet是一个全球性的计算机互联网络，中文名称为“国际互连网”、“因特网”、“网际网”或“信息高速公路”等，它是将不同地区而且规模大小不一的网络互相连接而成。对于INTERNET中各种各样的信息，所有人都可以通过网络的连接来共享和使用。,Internet能提供的服务包括:WWW服务(也就是网页浏览服务)电子邮件（E-mail)服务、网上交际（ICQ、QQ就是最常见的传呼服务）文件传输（也就是常说的FTP服务）网络电话电子商务（如网上购物、网上商品销

11、售、网上拍卖、网上支付等）网络炒股网上事务处理联网游戏（例如玩MUD，或者是联网对战）等等。,1.1.1 网络类型,人类最早接触的“网络”是口头交流系统。思想从一个人传递给另一个人，人们就可以交流信息。早期人们所掌握的另一种网络是电话网。每台电话机都连接到电话线和交换设备网络中，连接家庭和城市的电话线类似于支线公路和高速公路的关系，移动电话则依靠卫星网络。,1、按网络覆盖的地理范围分类：（1）局域网（LAN）：局域网是计算机硬件在比较小的范围内通信线路组成的网络，一般限定在较小的区域内，通常采用有线的方式连接起来。一般限定在较小的区域内，小于10km的范围，通常采用有线的方式连接起来。（2）城

12、域网（MAN）：城域网规模局限在一座城市的范围内，覆盖的范围从几十公里至数百公里，城域网基本上是局域网的延伸，通常使用与局域网相似的技术，但是在传输介质和布线结构方面牵涉范围比较广。（3）广域网（WAN）：覆盖的地理范围非常广，又称远程网，在采用的技术、应用范围和协议标准方面有所不同。网络跨越国界、洲界，甚至全球范围。目前局域网和广域网是网络的热点。局域网是组成其他两种类型网络的基础，城域网一般都加入了广域网。广域网的典型代表是internet网。,局域网和广域网,采用局域网，传输速率较高，误码率较低。组网方便，技术简单。,传输距离远，传输速率较低，误码率较高。机制复杂。,局域网 指十几公里的

13、地理范围内将计算机、外设和通信设备互连在一起的网络系统。,广域网 涉及的范围较大，通常可以达到几十公里、几百公里，甚至更远。,1.1.2 Internet历史和发展,随着新闻媒体对【信息高速公路】的宣传和介绍，相信大多数人都会接触过一些有关Internet的报道，对Internet这一外来词不会陌生，但解释清楚它到底是什么，就必须从它的历史和发展说起。因特网于1969年诞生于美国。最初名为“阿帕网”（ARPAnet）是一个军用研究系统，后来又成为连接大学及高等院校计算机的学术系统，现在则已发展成为一个覆盖五大洲150多个国家的开放型全球计算机网络系统，拥有许多服务商。普通电脑用户只需要一台个人

14、计算机用电话线通过调制解调器和因特网服务商连接，便可进入因特网。,INTERNET产生和发展,1969年ARPANET70年代早、中期，TCP/IP协议的产生70年代末到80年代初，网络的“春秋战国”时代80年代中到90年代初，Internet的基础-NSFNET(NSF:美国国家科学基金会）90年代，Internet的商业化,1.中国互联网发展过程,第一阶段(19871993年):我国与Internet的联接仅仅是电子函件的转发联接,并只在少数高校和科研机构提供电子函件服务第二阶段(19941997年):1994年3月,美国正式批准中国进入Internet.中国政府也批准Internet与中

15、国联通.第三阶段(1998年以后):Internet网络在我国的发展是一个飞速发展的阶段.,计算机网络的发展,50年代计算机-终端,多机系统,计算机网络的发展,60年代末计算机-计算机,典型代表ARPA网,70年代中期局域网,80年代局域网迅速发展,90年代网络互连，Internet崛起,计算机网络的发展,Internet的发展,ARPA网,Internet,60年代末,90年代初,主要协议：TCP/IP,40多万个网络近2000万台计算机1亿多个用户,1.3 与网页制作相关的术语,1网站与网页 当我们在浏览器中输入一个已知网址后，即可打开一个页面，让我们了解有关这个网址的一些信息和内容，这个

16、页面就是我们通常所说的网页，而打开网络由网址进入时第一个看到的页面，我们通常把它称为首页（home page）或主页，所有的信息都会清楚地整理在这个页面上，目的就是为了让用户在使用这个网页时能快速链接到需要的资料，它既是一个单独的网页，同一般网页一样可以存放各种信息,又是一个特殊的网页，是整个Web站点的起始点和汇总点，是用户开始浏览站点的“入口处”。由首页所延伸下去的页面，就是一个个网页。网页又称Web页面，是网络文件的组成部分，是可以被浏览器访问的单个HTML超文本文件,它由文字、表格、图片、声音、视频以及各种功能按钮等组成，这些文字、图片、按钮往往又是指向别的主页的连接点。在Intern

17、et网上，这些连接点又叫超级链接。所有由首页链接出去的网页集合起来就是网站。即在设计时，将某个主题明确后，再按所需的单元、内容经过安排，化为各个不同的网页，在同一个结构及诉求下出现的集合体，就是网站（Web Site）。有主题性的网站是要经过规划和构架过的网站。在互联网上，Web站点由一组相互关联的页面组成，如果把整个WWW信息世界看作一个村子，那么一个Web站点可以理解成一个家庭。,2服务器（Server）与浏览器（Browser）服务器是局域网的核心设备,它管理着局域网中的各种资源,它的基本功能是网络通信服务、管理和提供网络共享资源，以及进行网络管理。服务器实质是一台配置较高的计算机。不同

18、的电脑操作系统，有不同的适用服务器软件，如：微软视窗windows XP Professional操作系统适用的服务器软件IIS5.1网站上动态的数据，必须要通过网站服务器的服务才能运作。用于查看Web站点的软件被称作浏览器。它是WWW的窗口,用户可以利用浏览器从一个文档跳转到另一个文档实现对整个网站的浏览,也可以下载并解释HTML文档中所描述的动画、声音、文本、图形、图像，并能实现电子邮件查看、下载文件、FTD等功能。它有多种版本,如微软英特尔版本、苹果电脑版本等，大多数浏览者（目前已经超过90）使用Microsoft Internet Explorer(简称IE)浏览器.还有一些其他的浏览

19、器，不同版本的浏览器功能大体一样，主要区别在于各功能区在版面上的排列不同。,4.统一资源定位器URL URL即Uniform Resource Locator（统一资源定位器）的缩写。用来指明主机或文件在Internet上的位置，一个URL就是一个资源在Internet上的具体位置，URL由Internet资源类型、服务器地址、端口及路径组成，如：http:/就是一个典型的URL。它的作用在于提供一个标准方法，以便能够在Internet上找到任何东西。无论是单一的页面，还是庞大复杂的网站，甚至是一个小小的图片，所有的网络资源都能通过URL系统访问到。,5.www,WWW(World Wide

20、Web)简称W3，有时也叫Web，中文译名为万维网，环球信息网等。WWW由欧洲核物理研究中心（ERN）研制，其目的是为全球范围的科学家利用Internet进行方便地通信，信息交流和信息查询。万维网（亦作“网络”、“WWW”、“W3”，英文“Web”或“World Wide Web”），是一个资料空间。在这个空间中：一样有用的事物，称为一样“资源”；并且由一个全域“统一资源标识符”（URL）标识。这些资源通过超文本传输协议(Hypertext Transfer Protocol)传送给使用者，而后者通过点击链接来获得资源。从另一个观点来看，万维网是一个透过网络存取的互连超文件(interlink

21、ed hypertext document)系统。万维网常被当成因特网的同义词，不过其实万维网是靠着因特网运行的一项服务。,(1)、WWW简介,(2)、WWW的工作原理当你想进入万维网上一个网页,或者其他网络资源的时候，通常你要首先在你的浏览器上键入你想访问网页的统一资源定位符（Uniform Resource Locator)，缩写URL，或者通过超链接方式链接到那个网页或网络资源。这之后的工作首先是URL的服务器名部分，被名为域名系统的分布于全球的因特网数据库解析，并根据解析结果决定进入哪一个IP地址(IP address)。接下来的步骤是为所要访问的网页，向在那个IP地址工作的服务器发送

22、一个HTTP请求。在通常情况下，HTML文本、图片和构成该网页的一切其他文件很快会被逐一请求并发送回用户。网络浏览器接下来的工作是把HTML、CSS和其他接受到的文件所描述的内容，加上图像、链接和其他必须的资源，显示给用户。这些就构成了你所看到的“网页”。,WWW基本知识,全球信息网,网页,用HTML编写,用开发工具编写如FrontPage,Homepage主页,HTTP,Data,浏览器,WWW基本知识,全球信息网,URL,指明访问的对象，以及访问的方式,URL组成,HTTP,协议:/主机地址:端口号/路径/文件名,FTP,TELNET,Mailto,http:/,ftp:/,1.1.4 技

23、术名词,1、IP地址,每台计算机都必须有一个IP地址，这个IP地址在整个Internet网络中是唯一的。IP地址由32位二进制数组成，用点分十进制格式表示：，其中X为8位二进制，对应的十进制数是0255；如IP地址的分类:分为5类，常用的3类 A类 B类 C类,IP地址与域名,连接到Internet上的每台计算机拥有的唯一的地址。,IP格式,4段，取值0255,IP地址,为了区别各个站点，必须为每个站点分配一个唯一的地址，这个地址即称为“IP地址”，IP地址也称为URL（Unique Resource Location，中文意义为“统一资源定位符”），IP地址由四个从0到255之间的数字组成，

24、如，但这些数字比较难记，所以有人发明了一种新方法来代替这种数字，即“域名”地址，域名由几个英文单词组成，如 具有一定的意义，其中cn代表中国（China），edu代表教育网（education），jnu代表暨南大学（JiNan University），www代表全球网（或称万维网，World Wide Wed），整个域名合起来就代表中国教育网上的暨南大学站点。域名地址和用数字表示的IP地址实际上是同一个东西，只是外表上不同而已，在访问一个站点的时候，您可以输入这个站点用数字表示的IP地址，也可以输入它的域名地址，这里就存在一个域名地址和对应的IP地址相转换的问题，这些信息实际上是存放在ISP中

25、称为域名服务器（DNS）的计算机上，当您输入一个域名地址时，域名服务器就会搜索其对应的IP地址，然后访问到该地址所表示的站点。站点地址可以在有关计算机的杂志、报纸和书籍上找到，在Internet上有更多站点地址的信息。,2、域名系统,域名系统,常用机构域名com 商业网edu教育网 gov 政府机构mil 军事网net网络机构 org 机构网最高层域名国家或地区名，如cn 中国 hk 香港 tw 台湾 也有许多是用大型机构域名作为最高层域名的，特别是美国的公司和机构，如,等；中国的如等网络实名 如：联想,Internet的域名系统是为方便解释机器的IP地址而设立的。域名系统采用层次结构，按地理

26、域或机构域进行分层。书写中采用圆点将各个层次隔开，分成层次字段。在机器的地址表示中，从右到左依次为最高域名段、次高域名段等，最左的一个字段为主机名。例如，在中，最高域名为cn，次高域名edu为，最后一个域为jnu，主机名为bbs。,IP地址与域名,为方便记忆而为计算机进行命名。,域名与主机名,国家域,领域,机构域,主机名,域名,IP地址,3、HTTP协议,什么是http？超文件传输协议(HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络传输协议。所有的WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。

27、目前的应用主要除了HTML网页外还被用来传输超文本数据 例如：图片、音频文件(MP3等)、视频文件(rm、avi等)、压缩包(zip、rar等)基本上只要是文件数据均可以利用HTTP进行传输。Web的应用层协议HTTP是Web的核心。HTTP在Web的客户程序和服务器程序中得以实现。运行在不同端系统上的客户程序和服务器程序通过交换HTTP消息彼此交流。HTTP定义这些消息的结构以及客户和服务器如何交换这些消息。HTTP定义Web客户(即浏览器)如何从web服务器请求Web页面，以及服务器如何把Web页面传送给客户。当用户请求一个Web页面(譬如说点击某个超链接)时，浏览器把请求该页面中各个对象

28、的HTTP请求消息发送给服务器。服务器收到请求后，以运送含有这些对象HTTP响应消息作为响应。,1.2 Web网站开发技术,网站开发技术多种多样，根据交互性能分为静态网站和动态网站，建设动态网站编程语言也有多种，如ASP、JSP和PHP等，根据客户的需求首先要确定制作网站所需的技术，动态网站编程技术需要不同的后台服务器软件支持。,1.2.1 静态网站和动态网站,网站的另外一种分类方法是看网站是否具有交互性和远程维护功能，并据此分为静态网站和动态网站两大类。,动态网站与静态网站的区别,一、从功能方面来说动态网站与静态网站的区别 1动态网站可以实现静态网站所实现不了的功能，比方说：聊天室、论坛、音

29、乐播放、浏览器、搜索等；而静态的网站则实现不了。2静态网站，如用rontpage或reamweaver开发出来的网站，其源代码是完全公开的，任何浏览者都可以非常轻松地得到其源代码，也就是说，自己设计出来的东西很容易被别人盗用。动态网站，如：开发出来的网站，虽然浏览者也可以看到其源代码，但是那已经是转换过以后的代码，想盗用源代码那是不可能的，因为它的源代码已经放在服务器上了，客户端是看不到的。,二、从对数据的利用上说动态网站与静态网站,1动态网站可以直接地使用数据库，并通过数据源直接操作数据库；而静态网站不可以使用，静态网站只能使用表格来死板地实现动态网站数据库表中少有的一部分数据的显示，不能操

30、作。2动态网站是放到服务器上的，要看到其源程序或者对其进行直接的修改都须在服务器上进行，因此保密性能比较优越。静态网站实现不了信息的保密功能。3动态网站可以实现远程数据的调用，而静态网站连本地数据都不可以用，更谈不上远程数据了。,三、从本质上说动态网站与静态网站的区别,1动态网站的开发语言是编程语言，比方说ASP用Vbscript或Javascript开发。而静态的网站只能够用HTML开发标记语言开发，它只是一种标记语言，不能实现程序的功能。2动态网站本身就是一个系统，一个可以实现程序几乎所有功能的系统，而静态网站则不是，它只能实现文本以及图片等的平面性的展现。3动态网站可以实现程序的高效快速

31、性能，而普通静态网站没有高效快速可言。,四、从外观上说动态网站与静态网站的区别,1.静态网站的网页是以.htmlhtm结尾的，客户不能随意修改,要专用软件。而动态网站大部分是带数据库的，自己可以随时在线修改，网页常以php、asp等结尾。本公司的网站大部分是动态的网站。静态网页:是指不应用程序而直接或间接制作成html的网页，这种网页的内容是固定的，修改和更新都必须要通过专用的网页制作工具，比如Dreamweaver。动态网页:是指使用网页脚本语言，比如php、asp、等，通过脚本将网站内容动态存储到数据库，用户访问网站是通过读取数据库来动态生成网页的方法。网站上主要是一些框架基础，网页的内容

32、大都存储在数据库中。2.静态网页和动态网页最大的区别，就是网页是固定内容还是可在线更新内容,如何决定网站建设采用动态网页还是静态网页？,静态网页和动态网页各有特点，网站采用动态网页还是静态网页主要取决于网站的功能需求和网站内容的多少，如果网站功能比较简单，内容更新量不是很大，采用纯静态网页的方式会更简单，反之一般要采用动态网页技术来实现。静态网页是网站建设的基础，静态网页和动态网页之间也并不矛盾，为了网站适应搜索引擎检索的需要，即使采用动态网站技术，也可以将网页内容转化为静态网页发布。动态网站也可以采用静动结合的原则，适合采用动态网页的地方用动态网页，如果必要使用静态网页，则可以考虑用静态网页

33、的方法来实现，在同一个网站上，动态网页内容和静态网页内容同时存在也是很常见的事情。,1.2.2 静态网页制作软件,Dreamweaver是Macromedia公司推出的网页制作工具，用于对Web站点、Web页和Web应用程序进行设计、编码和开发，整个生产过程可以自动化，增强开发小组的工作效率。无论用户是喜欢可视化和网页开发环境还是喜欢手写代码，Dreamweaver都能提供有用的工具，使用户拥有更加完美的Web创作体验。,1、网页制作工具,HTML编辑器网页编辑工具 Dreamweaver 所见即所得的编辑器 FrontPage,1.2.3 HTML,1.HTML概述,HTML（HyperTe

34、xt Markup Language）超文本标记语言，几乎所有的网页都是以HTML格式书写的。HTML以标识符来标识、排列各对象。标识符本身以“”标识，标识符内的内容称为元素（element），元素代表了标识符的意义，元素是与大小写无关的。,用超文本标记语言（HTML）编写的网页文件其实只是很平常、很普通的文本文件。可以用你所熟悉的文字编辑器来编辑它，如Edit、Word、写字板、记事本等，但一定要以纯文本方式保存，浏览器只能识别纯文本格式的文件。标记HTML的开始，在文件结束处要有对应的符号。,2标记符,标记符又称标签，HTML是影响网页内容显示格式的标记符集合，浏览器根据标记符决定网页的实

35、际显示效果。标签格式：在HTML中，所有的标记符都用尖括号括起来。表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符。开始标记符和相应的结束标记符定义了标记符所影响的范围。结束标记符与开始标记符的区别是有一个斜线。如：.又如：中南省委宣传部主页,注意：HTML标记符不区分大、小写。例如：、或含义相同。但通常约定标记符使用大写字母，这有利于HTML文档的维护。HTML标记中的所有标记符号都是用ASCII码来书写的。如果用其他编码书写（如中文字符编码），Web浏览器将不能识别，只是将其作为页面的内容显示在页面上，或忽略掉。,属性是用来描述对象特征的特性。在HTML中，所有

36、的属性都放置在开始标记符的尖括号里，属性与标记符之间用空格分隔，属性的值放在相应属性之后，用等号分隔，而不同的属性之间用空格分隔。格式为：受影响的内容例如：,3HTML文档的基本结构 HTML文档应该包含一些标准HTML标记。每个文档都包含头head和正文body text 两部分。头中含有标题title，正文中含有实际构成段落，列表和其他元素的文本。,(1)HTML语言结构的基本标志)文档标志。标志用于HTML文档的最前面，用来标识HTML文档的开始。而标志恰恰相反，它放在HTML文档的最后边，又来标识HTML文档的结束，两个标志必须成对使用。)文件头标志。和构成HTML文档的开头部分，在此

37、标志之间可以使用、等标志对。标志对之间的内容是不会在浏览器的框内显示出来。两个标志必须成对使用。,)文件主体标志.是HTML文档的主体部分，在此标志对之间可以包含、等众多标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。两个标志必须成对使用。标志中还可以有如表1-1所示的属性。,)文件标题标志。使用过浏览器的人可能都会注意到浏览器窗口最上边的蓝色部分显示的文本信息，那些信息一般是网页的“主题”。要将网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加如显示的文本即可。注意：标志对只能放在标志对之间。,HTML简单示例 这个网页的标题就是在head标记中设置的，看看网页的左上角即此

38、网页的标题“HTML简单示例”。BODY标记示例，它表示文档的主体内容的开始和结束，此页面所显示的内容都是在body标记中设置。,一个页面的组成示例：例1,将文件保存为first.html。然后打开则可以在浏览器看到网页制作的效果。,下面是一个综合的例子，其中定义了某些属性，说明了HTML文档中最基本标志的使用。,你好，万维网！你好，万维网！,像HTML文件中的、和就是标记，它们通常写在尖括号“”内。,1.3 网页的基本要素,文字 表格基本要素 图形 链接标志 交互功能,文字是网页发布信息所用的主要形式，由文字制作出的网页占用空间小，当用户浏览时，可以很快的展现在用户面前。另外，文字性网页还可

39、以利用浏览器中“文件”菜单下的“另存为”功能将其下载。但是没有编排点缀的纯文字网页，又会给人带来死板不活泼的感觉，使得人们不愿意再往下浏览。,1.3.1 文字,文字性网页一定要注意编排，包括标题得字型字号，内容的层次样式，是否需要变换颜色进行点缀等。,1标题,一个网页通常都有一个标题，表明本网页的主要内容。标题是否醒目，是吸引浏览者能否注意的一个关键，因此对标题的设计是很重要的。,网页中的文字不能太大或太小。太大会使得一个网页信息量变小，太小又使人们浏览时感到费劲。一个优秀网页中的文字，应统筹规划，大小搭配适当，给人以生动活泼之感觉。,2字号,在网页适当的位置采用不同的字体字型，也能使网页产生

40、吸引人的效果。应该注意在网页制作上却要慎重。因为有些美丽的字型在制作网页的计算机上有，但将来别人浏览你的网页时，浏览者的计算机上未必装有这种字体。这样浏览者就无法得到你预想的浏览效果，甚至适得相反。如果只是标题或少量的文字，可以将采用的特殊字体制作成图形方式，就可避免其他浏览者看不到的尴尬局面了。,3字型,1.3.2 表格,当文本内容较多时，可以利用表格形式来实现。表格是在网页上的一行或多行单元格，用来组织网页的布局或系统地布置数据，用户可以放置任何东西在表格的单元格中，包括文字、图形和表单等。表格具有容量大、结构严谨和效果直观等多个优点，是网页中不可缺少的记录或总结工具。表格还可以用来控制网

41、页中信息的布局方式。许多大型的网站都是使用表格来进行页面布局的,使页面看起来更加直观和有条理。,1.3.3 图形,这里的图形概念是广义的，它可以是普通的绘制图形，可以是各种图像，还可以是动画。一幅优秀的网页除了有能吸引浏览者的文字形式和内容外，图形的表现功能是不能低估的。网页上的图形格式一般使用JPEG和GIF，这两种格式具有跨平台的特性，可以在不同操作系统支持的浏览器上显示。图形在网页中通常有如下应用：,1菜单按钮,网页上的菜单按钮有一些是由图形制作，通常有横排和竖排两种形式，由此可以转入不同的页面。,2背景图形,为了加强视觉效果，有些网页在整个网页的底层放置了图形，称作背景图。背景图可以使

42、网页更加华丽，使人感到界面友好。但由于这是一个比较大的图形，需要占据较大的空间，致使网页的显示速度明显变慢，所以，近期的网页以及比较著名的访问量比较大网站一般都不设置背景图形。,1.3.4 链接标志,链接是网页中一种非常重要的功能，是网页中最重要、最根本的元素之一。通过链接可以从一个网页转到另一个网页，也可以从一个网站转到另一个网站。链接的标志有文字和图形两种。制作一些精美的图形作为链接按钮，使它和整个网页融为一体。,1.3.5 交互功能,Internet区别其他媒体的一个重要标志就是它的交互功能。网页的交互功能其他媒体是无法比拟的。通常网页的交互功能都是利用表单来实现的。表单是网页中站点服务器处理的一组数据输入域，当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。,本 章 小 结,本章主要介绍了网页制作的基本知识：第一节介绍网页的基本概念和要素，在此基础上简述网页制作的基本工具；第二节介绍了关于HTML的基本知识，并以实例的形式演示了多种常用标签的使用方法。本章介绍了网页制作的基础知识，让读者初步网络的一些基本的概念，了解网页制作的基本工具，这些理论的知识将会在随后的实际制作过程中得到进一步的应用。,