网页设计与制作第二版.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第1章 概 论,*,第1章 概 论,1,21,世纪高等学校精品教材,网页设计与制作,第1章 概 论,2,第,1,章 概 论,第1章 概 论,3,随着计算机和计算机网络的发展，今天，网络已经与人们的生活密不可分。利用网络，足不出户就可以完成购物、接受教育、远程医疗等活动，还可以在网络信息海洋中寻找想要的信息，这一切都主要依靠因特网中的,Web,页技术。在本章，将介绍网页设计的基础知识、网站设计的流程和,HTML,标记语言等内容。,第1章 概 论,4,1.1,计算机网络的概念,计算机网络就是利用通信设备和线路将地理位置分散、功能独立的多个计算机互连起来，以功能完善的网络软件,(,网络通信协议、信息交换方式和网络操作系统等,),实现网络中资源共享和信息传递的系统。,计算机网络按范围来分，一般可以分为局域网,(,同一建筑、同一单位、或方圆几公里地域内的专用网络,),、城域网,(,一组相邻的公司或一个城市,),、广域网,(,一个国家或地区,),。,图,1.1,所示的是总线型局域网结构图。,第1章 概 论,5,1.1,计算机网络的概念,早期的计算机系统是高度集中的，,50,年代中后期，许多系统都将地理上分散的多个终端通过通信线路连接到一台中心计算机上，这样就出现了第一代计算机网络。第一代计算机网络是以单个计算机为中心的远程联机系统。,第二代计算机网络是将多个主机通过通信线路互联起来，为用户提供服务，兴起于,60,年代后期，典型代表是美国国防部高级研究计划局协助开发的基于,TCP/IP,的,ARPA,网。,70,年代至,80,年代中期，第二代网络得到迅猛发展。第二代计算机网络以通信子网为中心。这,第1章 概 论,6,1.1,计算机网络的概念,个时期，网络为“以能够相互共享资源为目的互联起来的具有独立功能的计算机之集合体”，形成了现代计算机网络的基本概念。,第三代计算机网络是具有统一的网络体系结构并遵循国际标准的开放式和标准化的网络。国际标准化组织,(ISO),在,1984,年颁布了,OSI,开放系统互联参考模型，该模型分为七个层次，也称为,OSI,七层模型，公认为新一代计算机网络体系结构的基础。,OSI,参考模型的颁布为普及局域网奠定了基础。,第1章 概 论,7,1.1,计算机网络的概念,第四代计算机网络从,80,年代末开始，局域网技术发展成熟，出现光纤及高速网络技术、多媒体、智能网络，整个网络就像一个对用户透明的大的计算机系统，发展为以因特网,(Internet),为代表的互联网。,因特网是目前世界上影响最大的国际性计算机网络。它以,TCP/IP,网络协议将各种不同类型、不同规模、位于不同地理位置的物理网络联接成一个整体。,图,1.2,所示的是因特网的结构。,第1章 概 论,8,1.1计算机网络的概念,一台电脑连接到因特网，就可以访问因特网上的资源。在,图,1.2,所示的结构中，有的电脑通过局域网连接到因特网，有的电脑通过调制解调器，然后通过电话线连接到因特网上，还有的直接连接到因特网上。因特网上提供各种信息资源的服务器也是这样连接到因特网上的。,将因特网的通信部分用一朵“云”来表示，意思是在通信部分，其结构非常的复杂，有的是公用电话网，有的是网络公司或行业部门建立的全国性的光纤主干网。它们在地域上互相重叠，又互相连接，形成一个大的网络。,第1章 概 论,9,1.1,计算机网络的概念,因特网的应用很多，如聊天、购物、接受教育、玩游戏、收发电子邮件等，其中的很多应用是基于,Web,来实现的。例如，用户要登录到某个网站以获取一些信息，可按如下方式来操作。,启动一个网络浏览应用程序。比如微软公司开发的网络浏览器,IE(Internet Explorer,，它已内置于,Windows,操作系统,),。,在地址栏中输入准备查看的网站地址。比如,，按回车之后,(,假定本机的网络设置和所访问的,Web,服务器都工作正常,),，就会在浏览器中显,第1章 概 论,10,1.1,计算机网络的概念,示相应的网页。通过网页可以浏览新闻等信息。,从以上内容可以看到，计算机网络是一些自治的计算机通过通信线路组成的有机整体。网络上提供的服务一般有电子邮件、文件传送、,WWW,服务等，这些服务大都是一些专门的服务器提供的。,我国的因特网建设从,20,世纪,90,年代起到现在，已经有了巨大的发展。根据中国互联网信息中心的调查，截止到,2006,年,12,月,31,日，我国网民总人数达,13700,万人，上网计算机总数约为,5940,万台，域名总数约为,第1章 概 论,11,1.1,计算机网络的概念,4,109,020,个，包括中国国家顶级域名,CN,和通用顶级域名,(gTLD,，如,COM,域名,),两部分，其中,CN,域名为,1,803,393,个，中国网站总数约为,843,000,个,(,不含教育网网站,),，国际出口带宽总量为,256,696M,。,第1章 概 论,12,1.2 HTML,和,WWW,WWW,的全称是,World Wide Web,，正式的译名是万维网。,WWW,服务是因特网上应用最广泛的服务。,WWW,使得一个站点可以设置一些,Web,页面，以提供包括文字、图片、声音甚至影像的信息。页面之间可以建立链接，通过链接，用户可以在具有链接关系的页面之间进行切换。,Web,页面一般是由,HTML,语言编写的，,HTML,是超文本标记性语言,(Hypertext Markup Language),的简称，它是一种跨平台的超文本标记语言，所创建,HTML,文件,第1章 概 论,13,1.2 HTML,和,WWW,是带有格式标识符和超文本链接内嵌代码的,ASCII,文,本文件。,HTML,语言的特点是通过对一些项加上标记来描述网页上的元素,(,文本、表格、图像等,),，比如在,和,之间的文字将会被浏览器解释为粗体字。,下面用记事本来制作一个用,HTML,语言编写的网页。,打开记事本，然后在其中输入以下文本：,第1章 概 论,14,1.2 HTML,和,WWW,我的网页,我的第一个网页！,第1章 概 论,15,1.2 HTML,和,WWW,保存该文件时，“保存类型”中选择“所有文件”，输入文件名为“,example.htm”,，如,图,1.3,所示，单击“保存”按钮保存文件。,这样就在保存的目录下有了一个,example.htm,文件，打开后的效果如图,1.4,所示。,通过这样的方法，就制作了一个简单的网页，同时可以知道，网页文件可以通过文字编辑器来书写。实际上，无论多复杂的网页，都可以按这种方式来书写，只是这样做工作量将非常的大，效率也很低。,第1章 概 论,16,1.3,认识网页元素,构成网页的基本元素有：文本、图片、动画、声音、链接、表单等。,1.3.1,文本,文本就是网页上的文字信息，文字是网页中最基本的元素，虽然图片及多媒体效果在网页中所占的比重越来越大，但由于文字所占的存储空间非常小，以文字为主体的页面下载速度快，节省网络带宽，所以在网站中，文字的主导地位是无可替代的。,1.3.2,图片,第1章 概 论,17,1.3,认识网页元素,现在很难找到一个没有图片的网页，图片是组成网页的基本元素，图像传递的信息比文字更直观，另外，在网页中适当地添加图片可以使网页更美观。计算机能够显示的图片格式很多，但并不是所有格式的图片都适合于放在网页中，其中有些特有格式图片，需要使用专门的应用程序才能显示出图片内容，有些格式的图片体积太大，不适合于网上传输。,在,Web,页面上使用的图片格式主要有,GIF,、,JPG/JPEG,、,PNG,、,BMP,等，其中使用最为广泛的是,GIF,、,JPEG/JPG,和,PNG,。,第1章 概 论,18,1.3,认识网页元素,1.3.3,动画和声音,动画是网页上一个重要的表现形式，网页上适当使用动画有利于表现内容，使网页更生动。网页动画是由多幅图片连续放映，利用人类眼睛的视觉暂留特点来形成连续的动画。由于网络传输带宽的限制，要求动画的体积小，所以网页上的大部分动画看起来略显粗糙。,网页上支持的动画主要有,GIF,动画和,Flash,动画，,GIF,动画是,GIF,图片格式的小型翻页型动画。,Flash,动画的文件大小比,GIF,动画小，并且是以流的形式播放，可,第1章 概 论,19,1.3,认识网页元素,以一边下载一边播放，另一方面，,Flash,图形是矢量图形，因此用,Flash,制作的动画看起来比较清晰。但是因为,Flash,动画的播放需要,Flash,插件，因此需要安装,Flash,插件才可以播放。,声音作为多媒体元素的一种，在网页中应用的相对较少，主要是用于网页背景音乐和音乐站点。在,HTML,语言中，原本没有专门的针对声音的标记，在网页上播放声音大部分要靠插件来完成。由于现在的主流浏览器均支持不同的插件，因此网页中支持的声音格式,第1章 概 论,20,1.3,认识网页元素,比较多，比如,MP3,、,WMA,、,RM,、,MID,、,AIF,等。比较常用的声音格式有,MID,格式,(,常用作背景音乐,),和,MP3,格式,(,常用作音乐站点,),。,1.3.4,链接,同其它媒体,(,报纸、杂志,),相比，网页中最值得称道的地方就是可以设置链接。链接是指建立在同一站点或不同站点中,Web,页之间的跳转关系，用于引导浏览者转向其感兴趣的页面。它可以使站点内的网页成为有机的整体，还能使不同站点之间建立联系。链接由两部分组成：链接载体和链接目标。许多页面元素可以,第1章 概 论,21,1.3,认识网页元素,作为链接载体，如：文本、图像、图像热区、轮替图像、动画等，而链接目标可以是任意网络资源，如：页面、图像、声音、程序、,Email,甚至是页面中的某个位置,锚点。,1.3.5,表单,网页不同于其它媒体的另一个特性是它同浏览者之间的交互功能，表单是网页完成交互功能的重要元素。它的作用是接收用户在浏览器端输入的数据并传送到服务器端，完成浏览者和服务器的交互。在网络上它一般应用于会员注册、网上调查等需要用户提供信息的地方。,第1章 概 论,22,1.3,认识网页元素,表单是一个容器，表单内一般包含文本框、选择框和提交按钮等内容。,图,1.5,是一个表单的例子。,浏览者在表单中输入信息，然后单击“确定”按钮就可以将输入的信息传送到网站服务器中，然后由服务器进行处理，并根据处理结果向浏览器反馈信息。,第1章 概 论,23,1.4,网站的设计流程,多个网页按照一定的结构组织在一起就构成一个网站。每个网站都有一个名字为,index,或者,default,的,Web,页文件，一般称作主页或首页。主页是用户访问一个网站看到的第一个页面，通常显示网站的主题和导航信息，网站中的其它网页用来显示某一方面的详细内容，主页与其它网页通过链接组织起来。从资源管理器的角度来说，网页是一个文件，而网站是一个目录，里面有多个,HTML,文件和图片、动画、声音等资源文件。,第1章 概 论,24,1.4,网站的设计流程,设计一个网站就像设计一个程序一样，要进行整体规划、素材收集、页面设计、调试测试等步骤。下面，简单介绍网站的设计流程和要遵循的一般原则。,1.4.1,整体规划,在网页设计前，首先要给网站一个准确的定位，是用来宣传自身，还是用来提供商务服务、资讯服务，从而确定主题与设计风格。,确定了主题以后，就要根据希望提供的功能来确定设计网站所使用的技术。首先要确定,Web,服务器平台，,第1章 概 论,25,1.4,网站的设计流程,是采用,Windows,的,IIS,，还是,Linux,的,Apache,；然后要根据网站功能的复杂程度决定是采用静态网站还是动态网站。对于动态网站，还要考虑使用何种数据库及采用什么技术来支持。,整体规划还包括网站结构的规划，即根据希望提供的信息和功能设计网站的结构，是层次结构、线型结构、还是网状结构。,建设一个规范的网站，从结构设计、页面设计到数据库的集成，每一个环节都非常重要。,第1章 概 论,26,1.4,网站的设计流程,1.4.2,网页的设计与制作,网站整体规划完成后，就需要利用收集和制作的素材，采用网页制作工具去设计并完成每一个网页的制作。网页制作过程一般分为两个部分：网页布局设计和有关内容的添加。,布局就是以最适合浏览的方式将文字和图片编排在网页的不同位置，使得浏览者的视觉效果与使用效果达到最佳状态。网页作为一种版面，有文字和图片。而文字有标题与正文之分；图片也有主次之别。如果将,第1章 概 论,27,1.4,网站的设计流程,文字和图片简单地罗列到一个页面上，会显得零乱不堪。因此必须根据内容需求，将文字和图片按照一定的次序进行合理地编排和布局，使它们组成一个有机整体，展示给浏览者。,布局完成后，就可以在相应位置添加所收集和制作的素材了。,有时，还需要为网页添加一些动态效果或实现一些特殊功能的脚本程序等。,第1章 概 论,28,1.4,网站的设计流程,1.4.3,测试网页,在网页制作过程中和完成以后，需要对网页进行测试，查看所设计网页的实际浏览效果以及有没有错误。测试网页要尽可能放置在服务器上或者与服务器相同的环境中，应尽量多地使用不同公司、不同版本的,Web,浏览器进行测试。测试的项目包括：,链接测试。主要看网页中是否有链接错误的情况。,外观测试。在不同的浏览器、不同分辨率、不同的系统字体设置情况下网页的外观有无改变，网页中的文字、图片能否正常显示。,第1章 概 论,29,1.4,网站的设计流程,速度测试。浏览者在不同的网速下浏览网页，显示的速度如何？是否可以容忍？,脚本和程序测试。测试页面中的,JavaScript,、,CGI,等程序是否能正常工作，是否存在安全漏洞。,1.4.4,网页的上传与发布,网页制作完成后，就可以利用,FTP,等方式上传到服务器并发布到互联网上了。网站空间的获取一般有自设服务器、租用网页空间或虚拟主机、申请免费网页空间三种方法网站空间的获取一般有自设服务器、网站,第1章 概 论,30,1.4,网站的设计流程,网站空间的获取一般有自设服务器、租用网页空间或虚拟主机、申请免费网页空间三种方法。同时，还可以通过“中国互联网络信息中心”,(CNNIC),的域名注册系统申请诸如,.com,、,.cn,、,.net,等域名，详细的申请方式可以到,CNNIC,网站,查询。利用域名可以使浏览者更容易记住你的网站。网页上传以后，还必须保持内容的经常性更新，这样才能不断吸引访问者点击浏览。,第1章 概 论,31,1.5,制作和美化网页的工具,由,1.2,节可知，直接用记事本一类的文字编辑器也可以写出网页代码。但是使用这种方法制作网页要求设计者必须具有较扎实的,html,语言基础，初学者不易掌握。所以制作网页一般要选用专业的网页制作工具。另外，在网页中往往还需要使用图片、动画等元素，这些元素也需要相关工具来制作。下面对常见的工具做一简单介绍。,1.5.1,网页制作类工具,制作网页首先要选定一种网页制作软件。选择一个好,的网页编辑器会令你事半功倍！目前，较常用的网页,第1章 概 论,32,1.5,制作和美化网页的工具,制作工具有如下几种。,1,Dreamweaver,Dreamweaver,是,Macromedia,公司,(Macromedia,公司,2005,年,4,月被,Adobe,公司收购,),出品的网页制作工具，可以说是当前最流行的网页编辑器。它支持所见即所得的方式编辑网页，有强大的站点管理功能，便于站点的维护和管理；支持最新的,HTML,语言的扩展功能；支持层技术，还提供了层动画；内置强大的交互式网页制作功能。,Dreamweaver,可以使用户不用深入了解,HTML,就能制作出非常专业的网页。,第1章 概 论,33,1.5,制作和美化网页的工具,2,FrontPage,FrontPage,是微软公司开发的网页制作工具。对,Word,熟悉的用户使用,FrontPage,进行网页设计会非常顺手。它在主要功能上与,Dreamweaver,差不多，它提供了非常丰富的模板，对于新手来说是一个不错的选择。可以在它的导航下轻松地完成一个网页的制作。它也提供了对网站的管理等功能。,第1章 概 论,34,1.5,制作和美化网页的工具,3.HotDog,HotDog,是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分，对于那些希望在网页中加入,CSS,、,Java,、,RealVideo,等复杂技术的高级设计者，是个很好的选择。,当然，要制作出理想的网页，还是要学习一些,HTML,语言和必要的脚本编程知识，才可以从更高的角度来理解网页的本质，更好地掌握各种网页编辑软件工具。,第1章 概 论,35,1.5,制作和美化网页的工具,1.5.2,图像制作类工具,许多图像制作工具软件都能够方便地进行网页图像的制作和处理。,1,Photoshop,Photoshop,是,Adobe,公司最著名的图像处理软件，是图像制作首选工具。它对图像的处理方式多样，特别是对图像的滤镜处理，可以制作出许多特殊的图像效果。,Photoshop CS,版提供的功能可以轻松地将图像进行切片等操作，方便网页使用，支持将图像存储为网页支持的GIF,、,JPEG,、,PNG,等格式。,第1章 概 论,36,1.5,制作和美化网页的工具,2,ImageReady,ImageReady,也是,Adobe,公司开发的工具软件。它提供了网页图形的集成开发环境，是一个非常优秀的网页图像制作工具。它的界面和操作都类似于,PhotoShop,，可以用层的技术来编辑图像。直接在该软件中就可完成对图形的优化操作。支持将文件输出为,JPG,、,GIF,、,PNG,等图形格式。可以直接制作动画，并且还可直接产生,HTML,代码。,第1章 概 论,37,1.5,制作和美化网页的工具,3,Fireworks,Fireworks,是,Macromedia,公司专门为制作网页图像设计开发的软件。无论是专业人员还是初学者，都可以用它制作出效果不错的网页图像。它也有一个集成的网页图像开发环境。具有同时按位图图形和矢量图形的模式进行编辑的特点。,Fireworks,也可以制作简单的翻页型动画。,第1章 概 论,38,1.5,制作和美化网页的工具,4,Cool 3D,Cool 3D,是,Ulead(,友立,),公司出品的一个专门制作文字,3D,效果的软件，可以用它方便的生成具有各种特殊效果的,3D,文字，支持输出,BMP,、,JPG,、,TAG,、,GIF,格式。,Cool 3D,也可以制作网页上的,3D,文字动画，它可以把生成的动画保存为,GIF,和,AVI,文件格式。,第1章 概 论,39,1.5,制作和美化网页的工具,5,Painter,Painter,是,Meta Creation,公司的图像制作工具，它除了有常见的铅笔、水粉、蜡笔、油画笔之外，还可以用它的特殊画笔十分容易地画出火焰、霓虹灯、树叶等效果。画出的图像十分逼真、自然。,第1章 概 论,40,1.5,制作和美化网页的工具,1.5.3,动画制作类工具,除了,1.5.2,中所介绍的,ImageReady,、,Fireworks,和,Cool 3D,外，下面这些工具也常用来制作网页中的动画。,1,Flash,Flash,是,Macromedia,公司专门为网页动画设计开发的软件。用该软件制作的动画采用的“流”控制技术，可以一边下载动画，一边播放，并且设计者可自己决定流的大小，因此，制作的动画在网页中播放时基本看不出时间上的延迟，下载时间较短。,第1章 概 论,41,1.5,制作和美化网页的工具,在,Flash,中，大量的图形是矢量图形，因此，用,Flash,制作的图形在放大与缩小的操作中没有失真，而且用它制作的动画文件所占的体积较小，这些都是,Flash,特有的优点。,另外，,Flash,也提供了动作属性的功能，通过动作属性可以轻松地完成一些特殊的控制以及进行一些交互处理，不用编写一行代码也可以完成许多精彩的控制效果。,第1章 概 论,42,1.5,制作和美化网页的工具,2,GIF Animator,GIF Animator,是一套专门的动画制作工具。可以同时合成处理几个动画，还可将视频,AVI,文件转换成,GIF,文件。并提供了一些特效处理功能，如立方体特效、走马灯、颜色动画和翻页效果等。,3,3D Studio Max,3D Studio Max,是一个功能十分强大的,3D,图像制作软件。它也是用关键帧的原理来制作动画的，特别擅长制作各种特技效果，比如风晴雨雪、云雾烟火等效果，自身还带有非常丰富的材质库。,第1章 概 论,43,1.6 WWW,的工作流程,在物理结构上，组成,WWW,的是客户机和服务器。它们都连接在因特网上，通过因特网进行通讯。浏览者的电脑是客户机，提供信息的电脑是服务器,(,服务器一般由处理速度快、存储容量大的电脑承担，运行了,WWW,服务器程序的个人电脑也可以作为,Web,服务器,),。在应用程序上，客户机上运行的是,IE,之类的浏览器程序，浏览器程序的主要作用就是对,HTML,标记语言进行解释并且将它显示在浏览器窗口中。在,Web,服务器上，运行的是,WWW,服务器程序，可以是,Windows,下,第1章 概 论,44,1.6 WWW,的工作流程,的,IIS,，也可以是,Linux,下的,Apache,或其它的,WWW,服务器程序。,根据静态网页和动态网页的不同，,WWW,工作的流程有两种方式。,如果是静态网页，在客户机上的浏览器地址栏中输入一个网页地址，按回车键，客户机就用因特网上的,HTTP,协议发送一个请求到该地址所指定的服务器。服务器收到请求后，将客户机请求的页面文件或系统的缺省页面文件传送到客户机中。浏览器将会解释这个,HTML,文件，并将结果显示在浏览器窗口中。运行,第1章 概 论,45,1.6 WWW,的工作流程,示意图如,图,1.6,所示。,如果是动态网页，当服务器收到请求后，将根据请求的信息，在服务器上找到相应页面文件并对该文件进行处理，运行该文件包含的程序代码，然后将运行的结果以标准的,HTML,文件格式送回到客户机，由客户机的浏览器显示结果，运行示意图如,图,1.7,所示。,第1章 概 论,46,1.7 HTML,语言基础,1.7.1 HTML,语言简介,1990,年，,HTML,语言同,WWW,一起诞生于瑞士的,GERN,实验室。,Tim Berners-Lee,及其开发小组研究建立了一种以一定格式传输信息的方法，就是众所周知的超文本传输协议,HTTP,。该协议使用了,HTML,语言。,HTML,语言作为一种标识性的语言，由一些特定符号和语法组成，用来制作超文本文档。在超文本中可以加入图片、声音、动画、视频等内容，并且可以从一个文件跳转到另一个文件。用,HTML,编写的超文本文,第1章 概 论,47,1.7 HTML,语言基础,档称为,HTML,文档，它在各种操作系统平台如,UNIX,，,WINDOWS,等,),都能使用。,经过十几年的发展，每个浏览器开发公司都在为,HTML,加入更多的特征，比如框架、样式等。到现在已经发展到了,HTML 5.0,版本，扩展了,DHTML,和,XML,等子集。不过目前较为流行的仍然是,1999,年,12,月发布的,HTML 4.01,版本。,第1章 概 论,48,1.7 HTML,语言基础,1.7.2 HTML,语言的语法规则,HTML,文档扩展名为,htm,或,html,，由标记,(,标签,),、代码和注释组成，标记是,HTML,中用来控制文字、图形等显示方式的符号。标记分单独出现的标记和成对出现的标记两种。大多数的标记是成对出现的，由首标记和尾标记组成。每个标记可以有一个或几个控制属性。,HTML,语法的三种基本表达方式如下所示：,对象,第1章 概 论,49,1.7 HTML,语言基础,对象,比如有如下代码：,网页,其中,和,分别为首标记和尾标记，用来定义“网页”两个字的属性，标记中有,size,和,color,两个属性，分别定义“网页”两个字的大小是“,7”(36,磅,),，颜色是“,#0000ff”(,十六进制,RGB,颜色代码,),，属性的值要加西文引号。,第1章 概 论,50,1.7 HTML,语言基础,HTML,语言代码不区分大小写，多数,HTML,标记可以嵌套，但不能交叉，,HTML,文件一行可以写多个标记，一个标记也可以分写多行，不用任何续行符。,在,HTML,文档可以加入注释，采用的格式为：,。,1.7.3 HTML,文档的基本结构,HTML,文档的基本结构是：,第1章 概 论,51,1.7 HTML,语言基础,文档标题,html,文档的主体部分,标记是文档标识符，它是成对出现的，首标记,和尾标记,分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言,(HTML),编,第1章 概 论,52,1.7 HTML,语言基础,写的。该标记不带有任何的属性。事实上，现在所用的浏览器都是自动识别,HTML,文档的，并不要求有,标记的出现，也不对它进行任何的处理。但是，为了提高文档的适用性，还是应该养成用这个标记的习惯。,标记用来定义文档头部分。习惯上把,HTML,文档分为文档头和文档主体两个部分。文档头用来规定该文档的标题,(,出现在浏览器窗口的标题栏中,),和文档的一些属性，主体部分就是在浏览器窗口中看到的内,第1章 概 论,53,1.7 HTML,语言基础,容。嵌套在,标记中使用的子标记主要有,，还可以出现其它子标记，如,，,等，这些子标记都不是必须的。,标记是成对的，用来规定,HTML,文档的标题。在,和,之间的内容将显示在,Web,浏览器窗口的标题栏中。,标记用来定义文档主体部分。在,和,之间的内容将显示在浏览器窗口内。在,标记中可以规定整个文档的一些基本属性bgcolor,：指定,html,文档的背景色；,text,：指定,html,文档中文字的颜色；,第1章 概 论,54,1.7 HTML,语言基础,background,：指定,html,文档的背景颜色或图片。,在指定颜色对象时，可以用该颜色的代码或者对应颜色的英文单词。例如，指定文档的背景色为绿色，就可以表示为：,。,文档主体部分可用颜色列表：,表,1-1,颜色列表,名称,Black,Red,Line,Maroon,Gray,Silver,Navy,Olive,颜色,黑色,红色,石灰色,栗色,灰色,银白色,海军蓝,橄榄绿,名称,Purple,Yellow,Aqua,Blue,Green,Fuchsia,White,Teal,颜色,紫色,黄色,浅绿色,蓝色,绿色,紫红色,白色,暗蓝绿,第1章 概 论,55,1.7 HTML,语言基础,1.7.4 HTML,语言的常用标记及其用法,HTML,是一种标记语言。下面介绍,HTML,的几种主要标记。,1,格式化标记,在文字处理中把对文字的大小、外观的处理叫格式化。在,HTML,标记语言中，也有起到格式化作用的标记。,(1),字体和大小的设置,字体和大小的设置是通过标记,和,来设置的。例如，有如下代码：,欢迎！,第1章 概 论,56,1.7 HTML,语言基础,在,标记中加入了,face,和,size,属性，用来指定字体的名称和大小。一般来说，,size,的值可以从,1,到,7,，分别代表,9,、,10,、,12,、,14,、,18,、,24,、,36,磅的字。该标记的作用是将内容为“欢迎,!”,的字体设置为宋体，大小为,24,磅。缺省该标记时表示为默认字体和大小。,(2),段落设置与换行,段的设置标记是,和,，作用是设置段落。,有如下代码：,第一段,第二段,显示效果如,图,1.8,所示。,第1章 概 论,57,1.7 HTML,语言基础,如果将上面的代码改为：,第一,段,第二段,再显示，可以看到，代码修改以后，网页的显示同未修改前相比没有变化，说明在,HTML,文档中回车是不起换行作用的。,换行的设置标记是,，例如，有以下代码：,第1章 概 论,58,1.7 HTML,语言基础,第一段,第二段,第一行,第二行,显示效果如,图,1.9,所示。从图中可以看到,标记产生的效果同,标记产生的效果在间距上是不一样的。,(3),字的效果设置,图,1.10,字的效果设置,可以用,HTML,标记语言给字体设置一些特殊的效果。比如下划线的开始和结束标记,、粗体字的开始和结束标记,、斜体字的开始和结束标记,。,第1章 概 论,59,1.7 HTML,语言基础,以下,HTML,源代码在浏览器中的显示效果如,图,1.10,所示。,粗体,斜体,下划线,也可以将标记进行嵌套使用，从而同时显示多种效果。,2,设置链接,链接标记的形式如下：,跳转到,exam2.htm,代码中,和,指明了该处是一个链接，用属性,href,表明链接的目标是“,exam2.htm”,文件，链接的载体是“跳转到,exam2.htm”,。显示的效果如图,1.11,所示，显示的效,第1章 概 论,60,1.7 HTML,语言基础,果如图,1.11,所示，用鼠标点击“跳转到,exam2.htm”,可以打开当前文件夹下的,exam2.htm,文件,(,前提是,exam2.htm,存在,),。,链接对象除了可以是,HTML,文档外，还可以是其它文件类型，比如：,点此下载,出现的效果是当鼠标点击“点此下载”这几个字时，浏览器会弹出下载对话框，让用户下载,myfile.zip,文件。,第1章 概 论,61,1.7 HTML,语言基础,3,表格,表格在网页中有着广泛的应用，既可以用表格的形式显示数据，也可以用来实现定位显示等布局操作。,将下面的代码用记事本编辑并保存为一个,HTML,文件后，用浏览器显示，可以看到如,图,1.12,所示的效果。,table,第1章 概 论,62,1.7 HTML,语言基础,11,12,21,22,第1章 概 论,63,1.7 HTML,语言基础,31,32,标记,和,定义了一个表格，其中的参数：,width=30%height=150 border=4 cellspacing=2 cellpadding=12“,设置了表格的宽度用相对浏览器窗口的百分比来表,第1章 概 论,64,1.7 HTML,语言基础,示,),、表格的高度,(,用像素表示,),、边框的宽度、单元格的间距、单元格的边距。如果调整浏览器窗口的宽度，会发现表格宽度也会随着调整，这是由于表格的宽度是用百分比定义的结果。,和,表示了表格中一行的开始和结束，而,和,则表示了一个列的开始和结束。,11,12,第1章 概 论,65,1.7 HTML,语言基础,表示的是一行的两个单元格。,表格标记还可以加入一些常见的属性，如背景色和对齐方式等，标记背景色的语法是,bgcolor,颜色代码,，其中颜色代码用,#,加上红绿蓝三基色的十六进制代码表示，也可以用颜色的英文单词表示，比如,和,均表示表格的背景色为蓝色。也可以单独设置某一行的颜色或某一个单元格的颜色，比如,表示这一行为黄色，,则表示这个单元格为淡绿色。应用颜色的优先顺序为单元格、行、表格。,第1章 概 论,66,1.7 HTML,语言基础,表格的对齐方式由,align,属性设置，其取值有三种：,left,、,center,、,right,，分别表示居左、居中和居右。例如，有如下代码：,table,居中的表格,第1章 概 论,67,1.7 HTML,语言基础,居左的表格,第1章 概 论,68,1.7 HTML,语言基础,居右的表格,显示效果如,图,1.13,所示。,在很多标记中都可以使用,align,属性，在,中表示段落文字的对齐，在,和,中表示表格中某一行或,第1章 概 论,69,1.7 HTML,语言基础,某个单元格中文字的对齐。,表格在网页中主要用在文字图片等内容组织上，网页中的文字和图片等内容往往是放置在一个没有边框的表格内，以达到版面整齐划一的效果。,从上面的介绍中可以看到，如果完全用,HTML,代码编写网页是一件非常辛苦的事情。首先是工作量大，每一个细小的地方都要编写，其次需要记忆大量的,HTML,标记符，另外，还不知道书写的代码在浏览器中显示出来到底是什么模样，必须在浏览器中才可以,第1章 概 论,70,1.7 HTML,语言基础,看到，往往需要反复修改、保存、浏览才能达到预想的效果，效率很低。因此人们开发了很多的工具软件来设计网页。它们特点之一就是以所见即所得的方式来编写网页。,Macromedia,公司的,Dreamweaver,是众多可视化网页编辑工具中的佼佼者，据统计，世界上,70,的网站都是用它开发的。,第1章 概 论,71,本章小结,网络是对人类生活影响最大的技术之一。,WWW,将网络的应用深入到普通人的生活中。本章主要介绍了计算机网络的基础知识和,WWW,的工作流程，组成网页的各种元素和制作网页的一些工具。本章还简单介绍了设计网页所使用的语言,HTML,，深入掌握,HTML,知识有助于制作优秀的网页，如果要了解更多更详细的,HTML,知识，可以参阅有关,HTML,的专门书籍。,第2章 Dreamweaver基础,72,第,2,章,Dreamweaver,基础,第2章 Dreamweaver基础,73,Dreamweaver,是,Macromedia,公司出品的一款集网页制作和网站管理于一体的“所见即所得”的网页制作软件。无论用户愿意享受手工编写,HTML,代码时的驾驭感还是偏爱在可视化编辑环境中工作，,Dreamweaver,都提供了有用的工具，使用户拥有更加完美的,Web,创作体验。目前，,Dreamweaver,的最高版本为,Dreamweaver 8,。本章主要介绍,Dreamweaver 8,的基础知识、操作界面和站点管理功能。,第2章 Dreamweaver基础,74,2.1 Dreamweaver,简介,作为网页制作软件，,Dreamweaver,提供了功能强大的可视化设计工具和精简而高效的代码编辑环境，使开发人员能够快捷地创建规范的,Web,应用程序，构建功能强大的网络服务体系。,Dreamweaver,的主要特点及功能如下。,将“设计”和“代码”编辑器合二为一。,Dreamweaver,把编辑状态分为两种，一种是,HTML,源代码编辑状态，另一种是可视化编辑状态，这两种状态可以放在同一个窗口中，设计者可以在这个窗口中以书写,HTML,代码的形式或者以可视化的形式设计,Web,页，提高了网页设,第2章 Dreamweaver基础,75,2.1 Dreamweaver,简介,计的效率。,使用内置的图形编辑程序节省开发时间。借助内嵌的,Fireworks,技术，对图像的裁剪、缩放等编辑操作可以在,Dreamweaver,环境中直接完成。,提供操作方便、功能强大的用户界面。如，在设计视图中，开发者可以直接使用动态数据窗口去预览实时数据。,提供完美的,CSS,支持，可利用丰富的,CSS,样式表构建复杂、规范的站点。,提供完整的集成开发环境，可以开发,HTML,、,XHTML,、,XML,、,ASP,、,Microsoft ASP.NET,、,JSP,、,第2章 Dreamweaver基础,76,2.1 Dreamweaver,简介,PHP,、和,Macromedia ColdFusion,站点，还可以通过插件定制和扩展开发环境。,可与一些常见格式的外部文档,/,代码实现无缝结合。比如，可以将,Word,和,Excel,等文档直接导入到,Dreamweaver,中。,提供了较多的行为，用户不用书写代码即可设计出功能丰富的网页。,通过布局视图技术将表格和层这两种排版工具结合起来，从而提供精确而且灵活的页面排版功能。,强大的网站管理功能。,Dreamweaver,的文件面板将整个网站的内容集中起来，可以预览和管理所有的,第2章 Dreamweaver基础,77,2.1 Dreamweaver,简