网页设计制作第1章.ppt

1、第1章 网页的基础知识,网页设计与制作教程,目 录,1.1.1 Internet简介 1.1.2 Internet的结构和组成 1.1.3 Internet上的常用服务 1.1.4 TCP/IP协议简介 1.1.5 IP地址和域名0,1.1.1 Internet简介,1.Internet的起源和发展 2. Internet的管理 3. Internet在中国的发展0,1.1.1 Internet简介,1.Internet的起源和发展：Internet是美国信息高速公路主干网，是当今世界 上最大的计算机互联网络 。,Internet的前身是美国国防部高级研究所计划局（Advanced Resea

2、rch Projects Agency，ARPA）作为军用实验网络而于1969年建立的，名字为ARPAnet 。 1986年，美国国家科学基金会NSF（National Science Foundation）建立了自己的基于TCP/IP协议簇的计算机网络NSFNET 。于1990年6月彻底取代了ARPAnet而成为Internet的主干网。 1969年12月，当ARPAnet最初建成时只有四个节点，到1972年3月也仅仅只有23个节点，到1977 年3月总共也只有111个节点。到1986年与NSFNET相连的网络就已达到500个，除美国国内的网络外，加拿大、英国、法国、德国、澳大利亚、日本等国

3、家 的网络也相继加入，并继续遵守共同的TCP/IP协议，于是一个覆盖全球的国际网迅速形成，这就是今天名扬世界的Internet。,1.1.1 Internet简介,2. Internet的管理,Internet没有一个由政府授权的管理机构。Internet管理是由总部设在美国 弗吉尼亚州雷斯顿市的Internet网络协会ISOC（Internet Society）协调的。 ISOC通过组成一个Internet体系结构委员会IAB（InternetArchitecture Board）负责协调日常工作。 Internet管理分为技术管理和运行管理。 技术管理由IAB负责，下设研究委员会（Inte

4、rnet Research Task Force.IRTF）和工程委员会（Internet Engineering Task Force，IETF）。 运行管理分为网络信息中心（Network Information Center，NIC）和网络操作中心（Network Operation Center. NOC）。网络信息中心负责IP地址的分配，域名注册，技术咨询和技术资料的维护与提供等。网络操作中心则负责监控网络的实际运行情况，网络通信量的搜集与统计等。,1.1.1 Internet简介,3. Internet在中国的发展,1987年：中科院高能所，首先实现了国际远程连网， 1988年实现

5、了与欧洲和北美地区的E-mail通信。 1993年3月开通了由高能所到美国Stanford直线加速中心的高速计算机通信专线。 1994年5月高能所的计算机正式进入了Internet， 1994年6月以清华大学为网络中心的中国教育与科研网也于正式连通Internet， 1996年6月，中国最大的Internet互联子网CHINANET也正式开通并投入营运。 目前全国六大Internet主干网： CHINANET（中国公用计算机互联网）、CSTNET（中国科技网，China Science and Research Network）、 CERNET（中国教育和科研计算机网，China Educat

6、ion and Research Network）、 CHINAGBNET（金桥信息网，又称中国国家公用经济信息通信网，China Golden Bridge Network）、 UNINET（中国联通网）和CNCNET（中国网通）。,1.1.2 Internet的结构和组成,（1）通信线路 （2）路由器 （3）主机 （4）信息资源,1.1.2 Internet的结构和组成,（1）通信线路 通信线路是Internet的基础设施，它负责将Internet中的路由器与主机连接起来。Internet中的通信线路分为两类：有线通信线路与无线通信信道。 目前，我国的公共通信网提供的线路主要有以下几种类型

7、： 公用电话交换网PSTN，即通常的模拟电话线路，也是个人用户最常用的线路。 公用分组交换网，即X.25网（CHINAPAC）。 公用数字数据网，即DDN（Digital Data Network）网（CHINADDN）。 依附于X.25网或DDN网的帧中继网FR。 综合业务数据网ISDN。,1.1.2 Internet的结构和组成,（2）路由器,路由器是Internet中最重要的设备之一，它负责将Internet中的各个局域网或广域网连接起来，为网间的数据传送寻找最佳路由，此外还进行其他一些网络的管理与控制操作。 当数据从一个网络传输到路由器时，需要根据数据所要到达的目的地，通过路径选择算法

8、为数据选择一条最佳的路径。如果路由器选择的路径比较拥挤，路由器负责管理数据传输的等待队列。数据包从源主机出发后，往往需要经过多个路由器的转发，经过多个网络才能到达目的主机。,1.1.2 Internet的结构和组成,（3）主机：在Internet中，每一台拥有自己的Internet地址或IP地址的计算机 才被称为主机。 按照在Internet中的用途，主机分为服务器与客户机两类。服务器是信息资源 与服务的提供者，客户机是信息资源与服务的使用者。服务器根据它所提供 的服务功能不同，分为文件服务器、数据库服务器、WWW服务器、FTP服务 器、E-mail服务器与域名服务器等。服务器使用专用的服务器

9、软件向用户提供 信息资源与服务，而用户使用各类Internet客户端软件来访问信息资源或服务。,1.1.2 Internet的结构和组成,（4）信息资源 在Internet中存在很多类型的信息资源，例如文本、图像、声音与视频等多 种信息类型，涉及到社会生活的各个方面、通过Internet，人们可以在网上 搜索信息、发布信息、互相交流、网上购物、参与网络游戏或收看网上直 播等。,1.1.3 Internet上的常用服务,1. 电子邮件服务 2. 文件传输协议 3. 远程登录Telnet 4. 信息查询服务,1.1.3 Internet上的常用服务,电子邮件服务 电子邮件服务又称为E-mail服务

10、，是目前Internet上使用最频繁的一种服务， 为Internet用户之间发送和接收消息提供了快捷、廉价的现代化通信手段。 电子邮件系统不但可以传输各种文字格式的文本信息，还可以传输图像、 声音、视频等多种信息，成为多媒体信息传输的重要手段之一。,1.1.3 Internet上的常用服务,2. 文件传输协议 文件传输协议支持用户将文件从一台计算机拷贝到另一台计算机。为了在 具有不同结构、不同操作系统的计算机之间能够交流文件（包括软件、论 文等）需要有一个统一的“文件传输协议（File Transfer Protocol，FTP）”， 这就是FTP名称的由来。 由于采用TCP/IP协议作为In

11、ternet的基本协议，无论两台Internet上的计算 机在地理位置上相距多远，只要都支持FTP协议，就可以随意地相互传送 文件。这样做不仅节省实时联机的通信费用，而且可以方便地阅读与处理 传输过来的文件。,1.1.3 Internet上的常用服务,3. 远程登录Telnet 远程登录（Remote Login）允许用户将自己的本地计算机与远程的服务器进行连接，然后在本地计算机上发出字符命令送到远程计算机上执行，使本地计算机就像远程服务器的一个终端一样工作。因为与它对应的通信协议称为Telnet，所以远程登录功能又称为Telnet功能。 用户使用这种服务时，首先要在远程服务器上登录，报出自己

12、的账号与口令，使自己成为该服务器的合法用户，一旦登陆成功，就可实时使用该远程机对外开放的各种资源。,1.1.3 Internet上的常用服务,4. 信息查询服务 Internet上的信息查询服务包括万维网（World Wide Web，简称WWW或Web，有时口语化也称之为3W）、专题讨论（Usenet）、菜单式信息查询服务（Gopher）、广域信息服务系统（Wide Area Information Server，WAIS）和电子公告栏（Bulletin Board System，BBS）等，其中最突出的就是万维网WWW。我们通常所说的网页设计就是进行Web页面的设计，也就是将数据信息有机地

13、组织起来，供上网的用户查询。,1.1.4 TCP/IP协议简介,TCP/IP协议是一个协议簇，其中最重要的是TCP协议与IP协议，因此通常将这诸多协议 统称为TCP/IP协议簇，或TCP/IP协议。TCP/IP协议能很好地适应世界范围内数据通信的需要，它具有如下四个特点： 开放的协议标准，可以免费使用，并且独立于特定的计算机硬件与操作系统。 独立于特定的网络硬件，可以运行在局域网、广域网中，更适用于网络互联，有很强的支持异种网互连能力。 统一的网络地址分配方案，使得网络中的每台主机在网中都具有惟一的地址。 标准化的高层协议，可以提供多种可靠的用户服务。,1.1.4 TCP/IP协议简介,TCP

14、/IP协议由四个层次 组成：应用层、传输层、 网络层和网络接口层， 如图1-1所示。,1.1.5 IP地址和域名,1. IP地址 2.域名服务系统,1.1.5 IP地址和域名,1.IP地址：为保证全网的正确通信，Internet为联网的每个网络和每台主机都分配一个惟一的地 址，称为IP地址。 目前IP地址为4字节长（32位），每字节可对应一个小于256的十进制数，字节之间用点号分隔， 例如，中国教育科研网的IP地址是202 . 112 . 0 . 36。这种格式的地址常称为点分十进制地址。 如果从上网用户的地址角度去分类，IP地址可分为动态地址和静态地址两类。一般来讲，只有申 请DDN专线、X

15、2.5专线的用户，才申请固定的地址。这样的用户除了可以访问Internet资源外， 还能利用Internet来发布信息，供全球访问。 为了确保IP地址在Internet网上的惟一性，IP地址统一由美国的国防数据网络信息中心DDN NIC 分配。对于美国以外的国家和地区，DDN NIC又授权给世界各大区的网络信息中心NIC分配。总 之，要加入到Internet，就必须申请到合法的IP地址。,1.1.5 IP地址和域名,.域名服务系统：IP地址的缺点是难记忆，为此，Internet引入域名服务系统DNS（DomainNameSystem），以方便用户记忆使用。 域名采用分层次方法命名，各层之间用点

16、号分隔，且从右到左各层之间大致是上层与下层的包含关系，每层有一定的含义，自右至左分别为最高层域名、机构名、网络名、主机名，例如，域名表示中国（cn）教育网（edu）北京化工大学北方学院（ncbuct）的一台WWW服务器。 用户可以等价地使用域名或IP地址。域名的每一部分与IP地址的每一部分完全没有关系。决不能把清华大学的域名“”与IP地址之间分别以www对应166、tsinghua对应111、edu对应250、cn对应2。域名与IP地址之间的关系正如人的名字与他的电话号码之间没有必然的联系是一样的道理。 为了表示主机所属的机构的性质，IAB给出了七个顶级域名（即域名中

17、com为商业机构、edu为教育机构、gov为政府机构、int为国际机构、mil为军事机构、Network为网络服务提供者、org为非盈利组织），美国以外的其他国家的互联网机构还是用ISO规定的国别或地域代码作为域名的后缀来表示主机所属的国家或地区（如域名中的cn代表中国、us代表美国、jp代表日本、sg代表新加坡等）。,1.1.6 Internet的接入方式,1. 通过局域网接入Internet 2. 通过电话网接入Internet,1.1.6 Internet的接入方式,1. 通过局域网接入Internet： 所谓“通过局域网接入Internet”，是指用户局域网使用路由器，通过数据通信网与

18、ISP相连接，再通过ISP的连接通道接入Internet。 采用这种接入方式，用户花费在租用线路上的费用比较昂贵，用户端通常是有一定规模的局域网，例如一个企业网或校园网。一般来说，采用这种接入方式的用户希望达到的目的主要有：希望在Internet上提供信息服务；希望通过Internet实现企业内部网的互联；希望在单位内部配置连接Internet的电子邮件服务器；希望获得更大的宽带，以保证传输的可靠性。,1.1.6 Internet的接入方式,2. 通过电话网接入Internet 由于电话线支持的传输率有限，并且由于技术方面的原因，拨号线路的可能性不够高，在大量信息传输过程中有时会断开，所以这种

19、方式适合于个人或小型企业使用，不适合用于提供Internet服务。,1.2.1 超文本 1.2.2 WWW的工作方式 1.2.3 浏览器和服务器 1.2.4 URL地址,1.2.1 超文本,图1-2-超文本结构,1.2.2 WWW的工作方式,WWW是以超文本标记语言（Hypertext Markup Language，HTML） 与超文本传输协议（Hypertext Transfer Protocol，HTTP）为基础， 能够提供面向Internet服务的、一致的用户界面的信息浏览系统。 WWW系统的结构采用客户机/服务器模式。,1.2.3 浏览器和服务器,1.浏览器与服务器的关系 2. WW

20、W浏览器 3. Web服务器,1.2.3 浏览器和服务器,1.浏览器与服务器的关系 在WWW的世界里，最重要的参与者是“网页提供者”与“上网者”。网页提供者将其制作好的网页放在服务器上，而上网者则是准备好上网用的计算机，然后通过互联网来浏览网页制作者所提供的网页。一般我们把放置网页的部分称为服务器（Server），而上网浏览的部分则称为浏览器（Browse）。 浏览器是一个需要某些东西的程序，而服务器则是提供某些东西的程序。也就是说，浏览器是请求资源的，而服务器是提供资源的。 HTTP是一个客户机/服务器协议，服务器如何响应文件请求的Internet应用层协议。,1.2.3 浏览器和服务器,2

21、. WWW浏览器 WWW浏览器是用来浏览Internet上的Web页面的客户端软件。WWW浏览器为用户提供了寻找Internet上内容丰富、形式多样的信息资源的便捷途径。 在Web中，浏览器的任务是： 帮助制作一个请求（通常在单击某个连接点时启动）。 将请求发送给某个服务器。 呈交HTML文档和传送各种文件给相应的“观察器”，把请求所得的结果进行报告。,1.2.3 浏览器和服务器,3. Web服务器 一个Web服务器的任务是： 接受请求。 请求的合法性检查，包括安全性屏蔽。 针对请求获取并制作数据，包括用Java脚本和程序、CGI脚本和程序来对数据进行前期处理和后期处理。 把信息发送给提出请求

22、的浏览器。,1.2.4 URL地址： 在Web上的任何可用资源（包括HTML文档、图像、视频、程序等）都有一个地址，称为统一资源定位符URL（Uniform Resource Locator）。 一个URL包括了以上所有的信息，它由3部分组成：资源类型、存放资源的主机域名及资源文件名，例如： docs/abc.html为资源文件名（含有路径）。,1.3.1 网页制作中的技术知识 1.3.2 常用的网页制作软件,1.3.1 网页制作中的技术知识,1. HTML 2. DHTML（Dynamic HTML） 3. CGI 4. ASP 5.JSP 6. PHP 7. XML,1.3.1 网页制作中

23、的技术知识,1. HTML：HTML即HyperText Markup Language，中文翻译为“超文本标记语言”，它是一种用特殊标记来描述文档结构和表现形式的语言，由W3C（World Wide Web Consortium）所制定和更新。它利用标记（Tag）来描述网页中文字的字体、大小、颜色及页面布局等等，使用任何的文本编辑器都可以对它进行编辑。 网页就是由HTML语言编写出来的。通常我们看到的网页，都是以htm或html后缀结尾的文件，俗称HTML文件。,1.3.1 网页制作中的技术知识,2. DHTML（Dynamic HTML）： 确切地说，DHTML包含了HTML、CSS、DO

24、M和脚本语言（JavaScript和VBScript）。DHTML只比HTML多了一个字母D，而正是这个D使得DHTML有比HTML强大的Web功能。Dynamic的中文意思是“动态的、活泼的”这也暗示了DHTML可以使Web页面上的元素“动”起来。,1.3.1 网页制作中的技术知识,2. DHTML（Dynamic HTML）： （1）CSS CSS（Cascading Style sheets，层叠样式表）可以使网页的内容和结构版面控制相脱离，大量的减少网页中重复使用的HTML代码，从而减小网页的体积，这对于在网上传输是非常有利的。并且通过CSS可以使用更丰富、更灵活的样式，更简单设计出更

25、美观的网页。,1.3.1 网页制作中的技术知识,2. DHTML（Dynamic HTML）： （2）DOM 文档对象模型（DOM）是HTML和XML文档的编程接口规范，它与平台和语言是无关的，因而可以用各种语言在各种平台上实现。该模型定义了HTML和XML文件在内存中逻辑结构（即为文档），提供了访问、存取HTML和XML文件的方法。 CSS本身没有交互功能，要实现交互，就须将CSS定义的对象与文档对象模型DOM结合在一起，将Web文档转换为DHTML文档。,1.3.1 网页制作中的技术知识,2. DHTML（Dynamic HTML）： （3）脚本语言 脚本语言是一种描述性语言，常用的脚本语

26、言有JavaScript和VBScript，脚本语言是HTML一个有力的补充，传统的HTML代码显示的Web页面是静态的，而脚本语言却可以通过控制Web页面元素的位置等手段，使得Web页面“动”起来。在服务器端，脚本语言还能替代CGI等语言而完成诸如表单提交等交互行为的过程。,1.3.1 网页制作中的技术知识,3. CGI CGI全称为Common Gateway Interface（公共网关接口），它是一种客户端和服务器端交互的通信标准，它规定了Web服务器调用其他可执行程序（CGI程序）的接口协议标准。客户端和服务器端通过CGI脚本交互的过程一般是这样：客户端发出请求并连接服务器，CGI接

27、受请求作分析，如果合法，则从服务器端取得要求的元素（比如HTML页面），再反馈至客户端。即CGI程序通过读取使用者的输入请求从而产生HTML网页。CGI程序通常用于查询、搜索、或其他的一些交互式的应用。 绝大多数的CGI程序被用来解释处理来自表单的输入信息，并在服务 器产生相应的处理，或将相应的信息反馈给浏览器。,1.3.1 网页制作中的技术知识,4. ASP ASP全称为Active Server Pages（动态服务器主页），它是微软公司IIS3.0中的一个组件，实际上是一个服务器端的脚本语言开发环境。 ASP是在IIS下开发Web应用的一种简单、方便的编程工具。在了解了VBScript的

28、基本语法后，只需要清楚各个组件的用途、属性、方法，就可以轻松编写出自己的ASP系统。 利用ASP可以完成以往CGI程序的所有功能，如计数器、留言簿、公告板、聊天室等。并且，ASP可以轻松地实现对页面内容的动态控制，根据不同的浏览者，显示不同的页面内容，而浏览者一点觉察不出来，就像为他专门制作的页面一样。,1.3.1 网页制作中的技术知识,5.JSP JSP是JavaServerPages的简写。JSP技术能让Web开发员和网页设计员快速地开发容易维护的动态Web主页 。 JSP能够快速开发出基于Web、独立于平台的应用程序。JSP把用户界面从系统内容中分离开来，使得设计人员能够在不改变底层动态

29、内容的前提下改变整个网页布局。 JSP和ASP从形式上非常相似，相对而言只不过是JSP的效率和安全性更高 、组件（Component）方式更方便、适应平台更广 一些而已。,1.3.1 网页制作中的技术知识,6. PHP PHP是Hypertext Preprocessor 的缩写，代表超文本预处理器。 PHP是一种HTML内嵌式的语言，PHP与Microsoft的ASP颇有几分相似，都是一种在服务器端执行的“嵌入HTML文档的脚本语言”，语言的风格类似于C语言，现在被很多的网站编程人员广泛地运用。PHP独特的语法混合了C、Java、Perl以及PHP自创新的语法。它可以比CGI或者Perl更快

30、速地执行动态网页。PHP具有非常强大的功能，所有的CGI功能PHP都能实现，而且支持几乎所有流行的数据库以及操作系统。特别的是，PHP是完全免费（公开源码），不用花钱，任何人都可以从PHP官方站点（）自由下载。,1.3.1 网页制作中的技术知识,7. XML XML全称是Extensible Markup Language，它是一种可扩展标记语言，可以很方便对结构化数据进行描述，允许用户对自己的标记语言进行定义，提供了一个直接处理Web数据的通用方法 。 在HTML中所有的标记和文档结构都是预先定义好了的，我们只能使用那些标准的HTML标记，而XML允许我们自定义自己的标记和自己的文档结构，因

31、此XML是可扩展的。 XML不是HTML的一种替代品，将来最可能是由网站开发者使用XML来描述网站所需数据和网站的结构，而HTML将用来格式化和显示这些数据。,1.3.2 常用的网页制作软件,1. Macromedia Dreamweaver 2. Microsoft FrontPage 3.Adobe GoLive 4. Ulead PhotoImpact 5. Adobe Photoshop 6. Macromedia Fireworks 7. Macromedia Flash 8. Adobe LiveMotion 9. Ulead GIF Animator,1.3.2 常用的网页制作软

32、件,Macromedia Dreamweaver Dreamweaver 是Macromedia公司制作的功能强大的网页制作工具。由于其所见即所得的模式，只要利用鼠标拖曳即可轻易地完成复杂的网页，而无需接触任何源代码。 Dreamweaver包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML的设计，同时它还提供了自动更新页面信息的功能。 Dreamweaver还采用了Roundtrip HTML技术。这项技术使得网页在Dreamweaver和HT

33、ML代码编辑器之间进行自由转换，HTML句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。Dreamweaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。,1.3.2 常用的网页制作软件,2. Microsoft FrontPage FrontPage是Microsoft的产品，由于FrontPage与其他Office工具结合非常紧密，因此，如果用户对Word很熟悉，那么使用FrontPage进行网页设计就会得心应手。 使用FrontPage制作网页，页面制作由FrontPage中的Editor完成，其工作窗口由

34、3个标签页组成，分别是“所见即所得”的编辑页、HTML代码编辑页和预览页。FrontPage带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。 FrontPage提供了强大的站点管理功能。在更新服务器上的站点时，不需要创建更改文件的目录。FrontPage会跟踪文件并拷贝那些新版本文件。FrontPage是网页制作软件中既能在本地计算机上工作，又能通过Internet直接对远程服务器上的文件进行工作的软件。,1.3.2 常用的网页制作软件,3.Adobe GoLive GoLive 是Adobe推出的网页制作工具软件。 Adobe GoLive含有

35、设计、制作和管理动态网站的所有工具，比如精确布置页面元素的各式各样的页面排版工具包括排版网格、表格和浮动块。 在GoLive中用户可以对置入网站的Photoshop、Illustrator和LiveMotion的文件进行出色的控制。内置的Photoshop引擎可以在改变图像尺寸时自动优化Photoshop文件。Smart Object（智能物件）则可以使用户轻松编辑来自其他Adobe软件产品的文件，即可打开创建它们的程序进行编辑，而修改后的结果也会立即在GoLive中得到更新。,1.3.2 常用的网页制作软件,4. Ulead PhotoImpact PhotoImpact是Ulead（友立）

36、公司推出的一款图像处理软件，被誉为“美化网页好帮手”。 PhotoImpact与其他网页制作软件的最大区别，是采用了图形化的直观操作方式，用户只需要将网页中想要添加的部件“放”到合适的位置即可，而不需采用表格定位。软件还提供了大量精美的网页部件设计模板供用户选择，极大地减少了网页设计制作所需要的时间。同时，强大的图像编辑功能和模板，让网页美化变得轻而易举。,1.3.2 常用的网页制作软件,5. Adobe Photoshop Adobe Photoshop是当今世界上最为流行的图像处理软件。它整合了Adobe公司Web图像处理工具ImageReady的图像编辑功能，可处理非常精美的Web图像，并增加了Web的制图功能，如矢量图形对象工具、分割图像和针对Web的图像压缩技术。 Photoshop提供了“钢笔工具”、“添加锚点工具”、“矩形工具”、“圆角矩形工具”