《网页设计与制作》第二版全套电子课件完整版ppt整本书电子教案最全教学教程整套课件.ppt

《《网页设计与制作》第二版全套电子课件完整版ppt整本书电子教案最全教学教程整套课件.ppt》由会员分享，可在线阅读，更多相关《《网页设计与制作》第二版全套电子课件完整版ppt整本书电子教案最全教学教程整套课件.ppt（897页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第1章 概 论121世纪高等学校精品教材世纪高等学校精品教材网页设计与制作 第1章 概 论2第第1章章 概概 论论 第1章 概 论3l随着计算机和计算机网络的发展，今天，网络已经与人们的生活密不可分。利用网络，足不出户就可以完成购物、接受教育、远程医疗等活动，还可以在网络信息海洋中寻找想要的信息，这一切都主要依靠因特网中的Web页技术。在本章，将介绍网页设计的基础知识、网站设计的流程和HTML标记语言等内容。第1章 概 论41.1 计算机网络的概念计算机网络的概念 l计算机网络就是利用通信设备和线路将地理位置分散、功能独立的多个计算机互连起来，以功能完善的网络软件(网络通信协议、信息交换方式和

2、网络操作系统等)实现网络中资源共享和信息传递的系统。l计算机网络按范围来分，一般可以分为局域网(同一建筑、同一单位、或方圆几公里地域内的专用网络)、城域网(一组相邻的公司或一个城市)、广域网(一个国家或地区)。图1.1所示的是总线型局域网结构图。第1章 概 论51.1 计算机网络的概念计算机网络的概念 l早期的计算机系统是高度集中的，50年代中后期，许多系统都将地理上分散的多个终端通过通信线路连接到一台中心计算机上，这样就出现了第一代计算机网络。第一代计算机网络是以单个计算机为中心的远程联机系统。l第二代计算机网络是将多个主机通过通信线路互联起来，为用户提供服务，兴起于60年代后期，典型代表是

3、美国国防部高级研究计划局协助开发的基于TCP/IP的ARPA网。70年代至80年代中期，第二代网络得到迅猛发展。第二代计算机网络以通信子网为中心。这第1章 概 论61.1 计算机网络的概念计算机网络的概念 个时期，网络为“以能够相互共享资源为目的互联起来的具有独立功能的计算机之集合体”，形成了现代计算机网络的基本概念。l第三代计算机网络是具有统一的网络体系结构并遵循国际标准的开放式和标准化的网络。国际标准化组织(ISO)在1984年颁布了OSI开放系统互联参考模型，该模型分为七个层次，也称为OSI七层模型，公认为新一代计算机网络体系结构的基础。OSI参考模型的颁布为普及局域网奠定了基础。第1章

4、 概 论71.1 计算机网络的概念计算机网络的概念 l第四代计算机网络从80年代末开始，局域网技术发展成熟，出现光纤及高速网络技术、多媒体、智能网络，整个网络就像一个对用户透明的大的计算机系统，发展为以因特网(Internet)为代表的互联网。l因特网是目前世界上影响最大的国际性计算机网络。它以TCP/IP网络协议将各种不同类型、不同规模、位于不同地理位置的物理网络联接成一个整体。图1.2所示的是因特网的结构。第1章 概 论81.1 计算机网络的概念计算机网络的概念 l一台电脑连接到因特网，就可以访问因特网上的资源。在图1.2所示的结构中，有的电脑通过局域网连接到因特网，有的电脑通过调制解调器

5、，然后通过电话线连接到因特网上，还有的直接连接到因特网上。因特网上提供各种信息资源的服务器也是这样连接到因特网上的。l将因特网的通信部分用一朵“云”来表示，意思是在通信部分，其结构非常的复杂，有的是公用电话网，有的是网络公司或行业部门建立的全国性的光纤主干网。它们在地域上互相重叠，又互相连接，形成一个大的网络。第1章 概 论91.1 计算机网络的概念计算机网络的概念l因特网的应用很多，如聊天、购物、接受教育、玩游戏、收发电子邮件等，其中的很多应用是基于Web来实现的。例如，用户要登录到某个网站以获取一些信息，可按如下方式来操作。l 启动一个网络浏览应用程序。比如微软公司开发的网络浏览器IE(I

6、nternet Explorer，它已内置于Windows操作系统)。l 在地址栏中输入准备查看的网站地址。比如，按回车之后(假定本机的网络设置和所访问的Web服务器都工作正常)，就会在浏览器中显第1章 概 论101.1 计算机网络的概念计算机网络的概念 示相应的网页。通过网页可以浏览新闻等信息。l从以上内容可以看到，计算机网络是一些自治的计算机通过通信线路组成的有机整体。网络上提供的服务一般有电子邮件、文件传送、WWW服务等，这些服务大都是一些专门的服务器提供的。l我国的因特网建设从20世纪90年代起到现在，已经有了巨大的发展。根据中国互联网信息中心的调查，截止到2006年12月31日，我国

7、网民总人数达13700万人，上网计算机总数约为5940万台，域名总数约为第1章 概 论111.1 计算机网络的概念计算机网络的概念 4,109,020个，包括中国国家顶级域名CN和通用顶级域名(gTLD，如COM域名)两部分，其中CN域名为1,803,393个，中国网站总数约为843,000个(不含教育网网站)，国际出口带宽总量为256,696M。第1章 概 论121.2 HTML和和WWW lWWW的全称是World Wide Web，正式的译名是万维网。WWW服务是因特网上应用最广泛的服务。WWW使得一个站点可以设置一些Web页面，以提供包括文字、图片、声音甚至影像的信息。页面之间可以建立

8、链接，通过链接，用户可以在具有链接关系的页面之间进行切换。lWeb页面一般是由HTML语言编写的，HTML是超文本标记性语言(Hypertext Markup Language)的简称，它是一种跨平台的超文本标记语言，所创建HTML文件第1章 概 论131.2 HTML和和WWW 是带有格式标识符和超文本链接内嵌代码的ASCII文 本文件。HTML语言的特点是通过对一些项加上标记来描述网页上的元素(文本、表格、图像等)，比如在和之间的文字将会被浏览器解释为粗体字。l下面用记事本来制作一个用HTML语言编写的网页。l打开记事本，然后在其中输入以下文本：第1章 概 论141.2 HTML和和WWW

9、 我的网页我的第一个网页！第1章 概 论151.2 HTML和和WWW l保存该文件时，“保存类型”中选择“所有文件”，输入文件名为“example.htm”，如图1.3所示，单击“保存”按钮保存文件。l这样就在保存的目录下有了一个example.htm文件，打开后的效果如图1.4所示。l通过这样的方法，就制作了一个简单的网页，同时可以知道，网页文件可以通过文字编辑器来书写。实际上，无论多复杂的网页，都可以按这种方式来书写，只是这样做工作量将非常的大，效率也很低。第1章 概 论161.3 认识网页元素认识网页元素l构成网页的基本元素有：文本、图片、动画、声音、链接、表单等。l1.3.1 文本文

10、本l文本就是网页上的文字信息，文字是网页中最基本的元素，虽然图片及多媒体效果在网页中所占的比重越来越大，但由于文字所占的存储空间非常小，以文字为主体的页面下载速度快，节省网络带宽，所以在网站中，文字的主导地位是无可替代的。l1.3.2 图片图片第1章 概 论171.3 认识网页元素认识网页元素l现在很难找到一个没有图片的网页，图片是组成网页的基本元素，图像传递的信息比文字更直观，另外，在网页中适当地添加图片可以使网页更美观。计算机能够显示的图片格式很多，但并不是所有格式的图片都适合于放在网页中，其中有些特有格式图片，需要使用专门的应用程序才能显示出图片内容，有些格式的图片体积太大，不适合于网上

11、传输。l在Web页面上使用的图片格式主要有GIF、JPG/JPEG、PNG、BMP等，其中使用最为广泛的是GIF、JPEG/JPG和PNG。第1章 概 论181.3 认识网页元素认识网页元素l1.3.3 动画和声音动画和声音l动画是网页上一个重要的表现形式，网页上适当使用动画有利于表现内容，使网页更生动。网页动画是由多幅图片连续放映，利用人类眼睛的视觉暂留特点来形成连续的动画。由于网络传输带宽的限制，要求动画的体积小，所以网页上的大部分动画看起来略显粗糙。l网页上支持的动画主要有GIF动画和Flash动画，GIF动画是GIF图片格式的小型翻页型动画。Flash动画的文件大小比GIF动画小，并且

12、是以流的形式播放，可第1章 概 论191.3 认识网页元素认识网页元素以一边下载一边播放，另一方面，Flash图形是矢量图形，因此用Flash制作的动画看起来比较清晰。但是因为Flash动画的播放需要Flash插件，因此需要安装Flash插件才可以播放。l声音作为多媒体元素的一种，在网页中应用的相对较少，主要是用于网页背景音乐和音乐站点。在HTML语言中，原本没有专门的针对声音的标记，在网页上播放声音大部分要靠插件来完成。由于现在的主流浏览器均支持不同的插件，因此网页中支持的声音格式第1章 概 论201.3 认识网页元素认识网页元素 比较多，比如MP3、WMA、RM、MID、AIF等。比较常用

13、的声音格式有MID格式(常用作背景音乐)和MP3格式(常用作音乐站点)。l1.3.4 链接链接l同其它媒体(报纸、杂志)相比，网页中最值得称道的地方就是可以设置链接。链接是指建立在同一站点或不同站点中Web页之间的跳转关系，用于引导浏览者转向其感兴趣的页面。它可以使站点内的网页成为有机的整体，还能使不同站点之间建立联系。链接由两部分组成：链接载体和链接目标。许多页面元素可以第1章 概 论211.3 认识网页元素认识网页元素l作为链接载体，如：文本、图像、图像热区、轮替图像、动画等，而链接目标可以是任意网络资源，如：页面、图像、声音、程序、Email甚至是页面中的某个位置锚点。l1.3.5 表单

14、表单l网页不同于其它媒体的另一个特性是它同浏览者之间的交互功能，表单是网页完成交互功能的重要元素。它的作用是接收用户在浏览器端输入的数据并传送到服务器端，完成浏览者和服务器的交互。在网络上它一般应用于会员注册、网上调查等需要用户提供信息的地方。第1章 概 论221.3 认识网页元素认识网页元素l表单是一个容器，表单内一般包含文本框、选择框和提交按钮等内容。图1.5是一个表单的例子。l浏览者在表单中输入信息，然后单击“确定”按钮就可以将输入的信息传送到网站服务器中，然后由服务器进行处理，并根据处理结果向浏览器反馈信息。第1章 概 论231.4 网站的设计流程网站的设计流程 l多个网页按照一定的结

15、构组织在一起就构成一个网站。每个网站都有一个名字为index或者default的Web页文件，一般称作主页或首页。主页是用户访问一个网站看到的第一个页面，通常显示网站的主题和导航信息，网站中的其它网页用来显示某一方面的详细内容，主页与其它网页通过链接组织起来。从资源管理器的角度来说，网页是一个文件，而网站是一个目录，里面有多个HTML文件和图片、动画、声音等资源文件。第1章 概 论241.4 网站的设计流程网站的设计流程l设计一个网站就像设计一个程序一样，要进行整体规划、素材收集、页面设计、调试测试等步骤。下面，简单介绍网站的设计流程和要遵循的一般原则。l1.4.1 整体规划整体规划l在网页设

16、计前，首先要给网站一个准确的定位，是用来宣传自身，还是用来提供商务服务、资讯服务，从而确定主题与设计风格。l确定了主题以后，就要根据希望提供的功能来确定设计网站所使用的技术。首先要确定Web服务器平台，第1章 概 论251.4 网站的设计流程网站的设计流程 是采用Windows的IIS，还是Linux的Apache；然后要根据网站功能的复杂程度决定是采用静态网站还是动态网站。对于动态网站，还要考虑使用何种数据库及采用什么技术来支持。l整体规划还包括网站结构的规划，即根据希望提供的信息和功能设计网站的结构，是层次结构、线型结构、还是网状结构。l建设一个规范的网站，从结构设计、页面设计到数据库的集

17、成，每一个环节都非常重要。第1章 概 论261.4 网站的设计流程网站的设计流程l1.4.2 网页的设计与制作网页的设计与制作l网站整体规划完成后，就需要利用收集和制作的素材，采用网页制作工具去设计并完成每一个网页的制作。网页制作过程一般分为两个部分：网页布局设计和有关内容的添加。l布局就是以最适合浏览的方式将文字和图片编排在网页的不同位置，使得浏览者的视觉效果与使用效果达到最佳状态。网页作为一种版面，有文字和图片。而文字有标题与正文之分；图片也有主次之别。如果将第1章 概 论271.4 网站的设计流程网站的设计流程l文字和图片简单地罗列到一个页面上，会显得零乱不堪。因此必须根据内容需求，将文

18、字和图片按照一定的次序进行合理地编排和布局，使它们组成一个有机整体，展示给浏览者。l布局完成后，就可以在相应位置添加所收集和制作的素材了。l有时，还需要为网页添加一些动态效果或实现一些特殊功能的脚本程序等。第1章 概 论281.4 网站的设计流程网站的设计流程l1.4.3 测试网页测试网页l在网页制作过程中和完成以后，需要对网页进行测试，查看所设计网页的实际浏览效果以及有没有错误。测试网页要尽可能放置在服务器上或者与服务器相同的环境中，应尽量多地使用不同公司、不同版本的Web浏览器进行测试。测试的项目包括：l 链接测试。主要看网页中是否有链接错误的情况。l 外观测试。在不同的浏览器、不同分辨率

19、、不同的系统字体设置情况下网页的外观有无改变，网页中的文字、图片能否正常显示。第1章 概 论291.4 网站的设计流程网站的设计流程l 速度测试。浏览者在不同的网速下浏览网页，显示的速度如何？是否可以容忍？l 脚本和程序测试。测试页面中的JavaScript、CGI等程序是否能正常工作，是否存在安全漏洞。l1.4.4 网页的上传与发布网页的上传与发布l网页制作完成后，就可以利用FTP等方式上传到服务器并发布到互联网上了。网站空间的获取一般有自设服务器、租用网页空间或虚拟主机、申请免费网页空间三种方法网站空间的获取一般有自设服务器、网站第1章 概 论301.4 网站的设计流程网站的设计流程 网站

20、空间的获取一般有自设服务器、租用网页空间或虚拟主机、申请免费网页空间三种方法。同时，还可以通过“中国互联网络信息中心”(CNNIC)的域名注册系统申请诸如.com、.cn、.net等域名，详细的申请方式可以到CNNIC网站http:/查询。利用域名可以使浏览者更容易记住你的网站。网页上传以后，还必须保持内容的经常性更新，这样才能不断吸引访问者点击浏览。第1章 概 论311.5 制作和美化网页的工具制作和美化网页的工具l由1.2节可知，直接用记事本一类的文字编辑器也可以写出网页代码。但是使用这种方法制作网页要求设计者必须具有较扎实的html语言基础，初学者不易掌握。所以制作网页一般要选用专业的网

21、页制作工具。另外，在网页中往往还需要使用图片、动画等元素，这些元素也需要相关工具来制作。下面对常见的工具做一简单介绍。l1.5.1 网页制作类工具网页制作类工具l制作网页首先要选定一种网页制作软件。选择一个好 的网页编辑器会令你事半功倍！目前，较常用的网页第1章 概 论321.5 制作和美化网页的工具制作和美化网页的工具 制作工具有如下几种。l1DreamweaverlDreamweaver是Macromedia公司(Macromedia公司2005年4月被Adobe公司收购)出品的网页制作工具，可以说是当前最流行的网页编辑器。它支持所见即所得的方式编辑网页，有强大的站点管理功能，便于站点的维

22、护和管理；支持最新的HTML语言的扩展功能；支持层技术，还提供了层动画；内置强大的交互式网页制作功能。Dreamweaver可以使用户不用深入了解HTML就能制作出非常专业的网页。第1章 概 论331.5 制作和美化网页的工具制作和美化网页的工具l2FrontPagelFrontPage是微软公司开发的网页制作工具。对Word熟悉的用户使用FrontPage进行网页设计会非常顺手。它在主要功能上与Dreamweaver差不多，它提供了非常丰富的模板，对于新手来说是一个不错的选择。可以在它的导航下轻松地完成一个网页的制作。它也提供了对网站的管理等功能。第1章 概 论341.5 制作和美化网页的工

23、具制作和美化网页的工具l3.HotDoglHotDog是较早基于代码的网页设计工具，其最具特色的是提供了许多向导工具，能帮助设计者制作页面中的复杂部分，对于那些希望在网页中加入CSS、Java、RealVideo等复杂技术的高级设计者，是个很好的选择。l当然，要制作出理想的网页，还是要学习一些HTML语言和必要的脚本编程知识，才可以从更高的角度来理解网页的本质，更好地掌握各种网页编辑软件工具。第1章 概 论351.5 制作和美化网页的工具制作和美化网页的工具l1.5.2 图像制作类工具图像制作类工具l许多图像制作工具软件都能够方便地进行网页图像的制作和处理。l1PhotoshoplPhotos

24、hop是Adobe公司最著名的图像处理软件，是图像制作首选工具。它对图像的处理方式多样，特别是对图像的滤镜处理，可以制作出许多特殊的图像效果。Photoshop CS版提供的功能可以轻松地将图像进行切片等操作，方便网页使用，支持将图像存储为网页支持的GIF、JPEG、PNG等格式。第1章 概 论361.5 制作和美化网页的工具制作和美化网页的工具l2ImageReadylImageReady也是Adobe公司开发的工具软件。它提供了网页图形的集成开发环境，是一个非常优秀的网页图像制作工具。它的界面和操作都类似于PhotoShop，可以用层的技术来编辑图像。直接在该软件中就可完成对图形的优化操作

25、。支持将文件输出为JPG、GIF、PNG等图形格式。可以直接制作动画，并且还可直接产生HTML代码。第1章 概 论371.5 制作和美化网页的工具制作和美化网页的工具l3FireworkslFireworks是Macromedia公司专门为制作网页图像设计开发的软件。无论是专业人员还是初学者，都可以用它制作出效果不错的网页图像。它也有一个集成的网页图像开发环境。具有同时按位图图形和矢量图形的模式进行编辑的特点。Fireworks也可以制作简单的翻页型动画。第1章 概 论381.5 制作和美化网页的工具制作和美化网页的工具l4Cool 3DlCool 3D是Ulead(友立)公司出品的一个专门制

26、作文字3D效果的软件，可以用它方便的生成具有各种特殊效果的3D文字，支持输出BMP、JPG、TAG、GIF格式。Cool 3D也可以制作网页上的3D文字动画，它可以把生成的动画保存为GIF和AVI文件格式。第1章 概 论391.5 制作和美化网页的工具制作和美化网页的工具l5PainterlPainter是Meta Creation公司的图像制作工具，它除了有常见的铅笔、水粉、蜡笔、油画笔之外，还可以用它的特殊画笔十分容易地画出火焰、霓虹灯、树叶等效果。画出的图像十分逼真、自然。第1章 概 论401.5 制作和美化网页的工具制作和美化网页的工具l1.5.3 动画制作类工具动画制作类工具l除了1

27、.5.2中所介绍的ImageReady、Fireworks和Cool 3D外，下面这些工具也常用来制作网页中的动画。l1FlashlFlash是Macromedia公司专门为网页动画设计开发的软件。用该软件制作的动画采用的“流”控制技术，可以一边下载动画，一边播放，并且设计者可自己决定流的大小，因此，制作的动画在网页中播放时基本看不出时间上的延迟，下载时间较短。第1章 概 论411.5 制作和美化网页的工具制作和美化网页的工具l在Flash中，大量的图形是矢量图形，因此，用Flash制作的图形在放大与缩小的操作中没有失真，而且用它制作的动画文件所占的体积较小，这些都是Flash特有的优点。l另

28、外，Flash也提供了动作属性的功能，通过动作属性可以轻松地完成一些特殊的控制以及进行一些交互处理，不用编写一行代码也可以完成许多精彩的控制效果。第1章 概 论421.5 制作和美化网页的工具制作和美化网页的工具l2GIF AnimatorlGIF Animator是一套专门的动画制作工具。可以同时合成处理几个动画，还可将视频AVI文件转换成GIF文件。并提供了一些特效处理功能，如立方体特效、走马灯、颜色动画和翻页效果等。l33D Studio Maxl3D Studio Max是一个功能十分强大的3D图像制作软件。它也是用关键帧的原理来制作动画的，特别擅长制作各种特技效果，比如风晴雨雪、云雾

29、烟火等效果，自身还带有非常丰富的材质库。第1章 概 论431.6 WWW的工作流程的工作流程 l在物理结构上，组成WWW的是客户机和服务器。它们都连接在因特网上，通过因特网进行通讯。浏览者的电脑是客户机，提供信息的电脑是服务器(服务器一般由处理速度快、存储容量大的电脑承担，运行了WWW服务器程序的个人电脑也可以作为Web服务器)。在应用程序上，客户机上运行的是IE之类的浏览器程序，浏览器程序的主要作用就是对HTML标记语言进行解释并且将它显示在浏览器窗口中。在Web服务器上，运行的是WWW服务器程序，可以是Windows下第1章 概 论441.6 WWW的工作流程的工作流程 的IIS，也可以是

30、Linux下的Apache或其它的WWW服务器程序。l根据静态网页和动态网页的不同，WWW工作的流程有两种方式。l如果是静态网页，在客户机上的浏览器地址栏中输入一个网页地址，按回车键，客户机就用因特网上的HTTP协议发送一个请求到该地址所指定的服务器。服务器收到请求后，将客户机请求的页面文件或系统的缺省页面文件传送到客户机中。浏览器将会解释这个HTML文件，并将结果显示在浏览器窗口中。运行第1章 概 论451.6 WWW的工作流程的工作流程 示意图如图1.6所示。l如果是动态网页，当服务器收到请求后，将根据请求的信息，在服务器上找到相应页面文件并对该文件进行处理，运行该文件包含的程序代码，然后

31、将运行的结果以标准的HTML文件格式送回到客户机，由客户机的浏览器显示结果，运行示意图如图1.7所示。第1章 概 论461.7 HTML语言基础语言基础 l1.7.1 HTML语言简介语言简介l1990年，HTML语言同WWW一起诞生于瑞士的GERN实验室。Tim Berners-Lee及其开发小组研究建立了一种以一定格式传输信息的方法，就是众所周知的超文本传输协议HTTP。该协议使用了HTML语言。HTML语言作为一种标识性的语言，由一些特定符号和语法组成，用来制作超文本文档。在超文本中可以加入图片、声音、动画、视频等内容，并且可以从一个文件跳转到另一个文件。用HTML编写的超文本文第1章

32、概 论471.7 HTML语言基础语言基础 档称为HTML文档，它在各种操作系统平台(如UNIX，WINDOWS等)都能使用。l经过十几年的发展，每个浏览器开发公司都在为HTML加入更多的特征，比如框架、样式等。到现在已经发展到了HTML 5.0版本，扩展了DHTML和XML等子集。不过目前较为流行的仍然是1999年12月发布的HTML 4.01版本。第1章 概 论481.7 HTML语言基础语言基础 l1.7.2 HTML语言的语法规则lHTML文档扩展名为htm或html，由标记(标签)、代码和注释组成，标记是HTML中用来控制文字、图形等显示方式的符号。标记分单独出现的标记和成对出现的标

33、记两种。大多数的标记是成对出现的，由首标记和尾标记组成。每个标记可以有一个或几个控制属性。lHTML语法的三种基本表达方式如下所示：对象第1章 概 论491.7 HTML语言基础语言基础 对象l比如有如下代码：网页l其中和分别为首标记和尾标记，用来定义“网页”两个字的属性，标记中有size和color两个属性，分别定义“网页”两个字的大小是“7”(36磅)，颜色是“#0000ff”(十六进制RGB颜色代码)，属性的值要加西文引号。第1章 概 论501.7 HTML语言基础语言基础 lHTML语言代码不区分大小写，多数HTML标记可以嵌套，但不能交叉，HTML文件一行可以写多个标记，一个标记也可

34、以分写多行，不用任何续行符。l在HTML文档可以加入注释，采用的格式为：。l1.7.3 HTML文档的基本结构lHTML文档的基本结构是：第1章 概 论511.7 HTML语言基础语言基础 文档标题 html文档的主体部分 l标记是文档标识符，它是成对出现的，首标记和尾标记分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言(HTML)编 第1章 概 论521.7 HTML语言基础语言基础l写的。该标记不带有任何的属性。事实上，现在所用的浏览器都是自动识别HTML文档的，并不要求有标记的出现，也不对它进行任何的处理。但是，为了提高文档的适用性，还是应该养成用这个标记的习惯。l标记用来

35、定义文档头部分。习惯上把HTML文档分为文档头和文档主体两个部分。文档头用来规定该文档的标题(出现在浏览器窗口的标题栏中)和文档的一些属性，主体部分就是在浏览器窗口中看到的内第1章 概 论531.7 HTML语言基础语言基础 容。嵌套在标记中使用的子标记主要有，还可以出现其它子标记，如，等，这些子标记都不是必须的。l标记是成对的，用来规定HTML文档的标题。在和之间的内容将显示在Web浏览器窗口的标题栏中。l标记用来定义文档主体部分。在和之间的内容将显示在浏览器窗口内。在标记中可以规定整个文档的一些基本属性：lbgcolor：指定html文档的背景色；ltext：指定html文档中文字的颜色；

36、第1章 概 论541.7 HTML语言基础语言基础lbackground：指定html文档的背景颜色或图片。l在指定颜色对象时，可以用该颜色的代码或者对应颜色的英文单词。例如，指定文档的背景色为绿色，就可以表示为：。l文档主体部分可用颜色列表：表表1-1 颜色列表颜色列表 名称Black Red Line Maroon Gray Silver Navy Olive 颜色黑色 红色 石灰色 栗色 灰色 银白色 海军蓝 橄榄绿 名称Purple Yellow Aqua Blue Green Fuchsia White Teal 颜色紫色 黄色 浅绿色 蓝色 绿色 紫红色 白色 暗蓝绿 第1章 概

37、论551.7 HTML语言基础语言基础l1.7.4 HTML语言的常用标记及其用法语言的常用标记及其用法lHTML是一种标记语言。下面介绍HTML的几种主要标记。l1格式化标记l在文字处理中把对文字的大小、外观的处理叫格式化。在HTML标记语言中，也有起到格式化作用的标记。l(1)字体和大小的设置l字体和大小的设置是通过标记和来设置的。例如，有如下代码：l欢迎！第1章 概 论561.7 HTML语言基础语言基础l在标记中加入了face和size属性，用来指定字体的名称和大小。一般来说，size的值可以从1到7，分别代表9、10、12、14、18、24、36磅的字。该标记的作用是将内容为“欢迎!

38、”的字体设置为宋体，大小为24磅。缺省该标记时表示为默认字体和大小。l(2)段落设置与换行l段的设置标记是和，作用是设置段落。l有如下代码：第一段第二段l显示效果如图1.8所示。第1章 概 论571.7 HTML语言基础语言基础l如果将上面的代码改为：第一段第二段l再显示，可以看到，代码修改以后，网页的显示同未修改前相比没有变化，说明在HTML文档中回车是不起换行作用的。l换行的设置标记是，例如，有以下代码：第1章 概 论581.7 HTML语言基础语言基础第一段第二段第一行第二行l显示效果如图1.9所示。从图中可以看到标记产生的效果同标记产生的效果在间距上是不一样的。l(3)字的效果设置图1

39、.10 字的效果设置l可以用HTML标记语言给字体设置一些特殊的效果。比如下划线的开始和结束标记、粗体字的开始和结束标记、斜体字的开始和结束标记。第1章 概 论591.7 HTML语言基础语言基础l以下HTML源代码在浏览器中的显示效果如图1.10所示。l粗体斜体下划线l也可以将标记进行嵌套使用，从而同时显示多种效果。l2设置链接l链接标记的形式如下：跳转到exam2.html代码中和指明了该处是一个链接，用属性href表明链接的目标是“exam2.htm”文件，链接的载体是“跳转到exam2.htm”。显示的效果如图1.11所示，显示的效第1章 概 论601.7 HTML语言基础语言基础l果

40、如图1.11所示，用鼠标点击“跳转到exam2.htm”可以打开当前文件夹下的exam2.htm文件(前提是exam2.htm存在)。l链接对象除了可以是HTML文档外，还可以是其它文件类型，比如：点此下载l出现的效果是当鼠标点击“点此下载”这几个字时，浏览器会弹出下载对话框，让用户下载myfile.zip文件。第1章 概 论611.7 HTML语言基础语言基础l3表格l表格在网页中有着广泛的应用，既可以用表格的形式显示数据，也可以用来实现定位显示等布局操作。l将下面的代码用记事本编辑并保存为一个HTML文件后，用浏览器显示，可以看到如图1.12所示的效果。table第1章 概 论621.7

41、HTML语言基础语言基础11122122第1章 概 论631.7 HTML语言基础语言基础3132l标记和定义了一个表格，其中的参数：width=30%height=150 border=4 cellspacing=2 cellpadding=12“l设置了表格的宽度(用相对浏览器窗口的百分比来表第1章 概 论641.7 HTML语言基础语言基础 示)、表格的高度(用像素表示)、边框的宽度、单元格的间距、单元格的边距。如果调整浏览器窗口的宽度，会发现表格宽度也会随着调整，这是由于表格的宽度是用百分比定义的结果。l和表示了表格中一行的开始和结束，而和则表示了一个列的开始和结束。1112第1章 概

42、 论651.7 HTML语言基础语言基础l表示的是一行的两个单元格。l表格标记还可以加入一些常见的属性，如背景色和对齐方式等，标记背景色的语法是bgcolor颜色代码，其中颜色代码用#加上红绿蓝三基色的十六进制代码表示，也可以用颜色的英文单词表示，比如和均表示表格的背景色为蓝色。也可以单独设置某一行的颜色或某一个单元格的颜色，比如表示这一行为黄色，则表示这个单元格为淡绿色。应用颜色的优先顺序为单元格、行、表格。第1章 概 论661.7 HTML语言基础语言基础l表格的对齐方式由align属性设置，其取值有三种：left、center、right，分别表示居左、居中和居右。例如，有如下代码：ta

43、ble 居中的表格第1章 概 论671.7 HTML语言基础语言基础 居左的表格 第1章 概 论681.7 HTML语言基础语言基础 居右的表格l显示效果如图1.13所示。l在很多标记中都可以使用align属性，在中表示段落文字的对齐，在和中表示表格中某一行或 第1章 概 论691.7 HTML语言基础语言基础 某个单元格中文字的对齐。l表格在网页中主要用在文字图片等内容组织上，网页中的文字和图片等内容往往是放置在一个没有边框的表格内，以达到版面整齐划一的效果。l从上面的介绍中可以看到，如果完全用HTML代码编写网页是一件非常辛苦的事情。首先是工作量大，每一个细小的地方都要编写，其次需要记忆大

44、量的HTML标记符，另外，还不知道书写的代码在浏览器中显示出来到底是什么模样，必须在浏览器中才可以第1章 概 论701.7 HTML语言基础语言基础 看到，往往需要反复修改、保存、浏览才能达到预想的效果，效率很低。因此人们开发了很多的工具软件来设计网页。它们特点之一就是以所见即所得的方式来编写网页。Macromedia公司的Dreamweaver是众多可视化网页编辑工具中的佼佼者，据统计，世界上70的网站都是用它开发的。第1章 概 论71本章小结本章小结 l网络是对人类生活影响最大的技术之一。WWW将网络的应用深入到普通人的生活中。本章主要介绍了计算机网络的基础知识和WWW的工作流程，组成网页

45、的各种元素和制作网页的一些工具。本章还简单介绍了设计网页所使用的语言HTML，深入掌握HTML知识有助于制作优秀的网页，如果要了解更多更详细的HTML知识，可以参阅有关HTML的专门书籍。第2章 Dreamweaver基础72第第2章章 Dreamweaver基础基础第2章 Dreamweaver基础73lDreamweaver是Macromedia公司出品的一款集网页制作和网站管理于一体的“所见即所得”的网页制作软件。无论用户愿意享受手工编写HTML代码时的驾驭感还是偏爱在可视化编辑环境中工作，Dreamweaver都提供了有用的工具，使用户拥有更加完美的Web创作体验。目前，Dreamwe

46、aver的最高版本为Dreamweaver 8。本章主要介绍Dreamweaver 8的基础知识、操作界面和站点管理功能。第2章 Dreamweaver基础742.1 Dreamweaver简介简介 l作为网页制作软件，Dreamweaver提供了功能强大的可视化设计工具和精简而高效的代码编辑环境，使开发人员能够快捷地创建规范的Web应用程序，构建功能强大的网络服务体系。Dreamweaver的主要特点及功能如下。l 将“设计”和“代码”编辑器合二为一。Dreamweaver把编辑状态分为两种，一种是HTML源代码编辑状态，另一种是可视化编辑状态，这两种状态可以放在同一个窗口中，设计者可以在这

47、个窗口中以书写HTML代码的形式或者以可视化的形式设计Web页，提高了网页设第2章 Dreamweaver基础752.1 Dreamweaver简介简介 计的效率。l 使用内置的图形编辑程序节省开发时间。借助内嵌的Fireworks技术，对图像的裁剪、缩放等编辑操作可以在Dreamweaver环境中直接完成。l 提供操作方便、功能强大的用户界面。如，在设计视图中，开发者可以直接使用动态数据窗口去预览实时数据。l 提供完美的CSS支持，可利用丰富的CSS样式表构建复杂、规范的站点。l 提供完整的集成开发环境，可以开发HTML、XHTML、XML、ASP、Microsoft ASP.NET、JSP

48、、第2章 Dreamweaver基础762.1 Dreamweaver简介简介lPHP、和Macromedia ColdFusion站点，还可以通过插件定制和扩展开发环境。l 可与一些常见格式的外部文档/代码实现无缝结合。比如，可以将Word和Excel等文档直接导入到Dreamweaver中。l 提供了较多的行为，用户不用书写代码即可设计出功能丰富的网页。l 通过布局视图技术将表格和层这两种排版工具结合起来，从而提供精确而且灵活的页面排版功能。l 强大的网站管理功能。Dreamweaver的文件面板将整个网站的内容集中起来，可以预览和管理所有的第2章 Dreamweaver基础772.1 D

49、reamweaver简介简介 图形、颜色、外部URL、脚本、Flash、CSS等资源。网站报告功能可以检查出网页中的常见错误，并提供快速修正的操作面板。l 提供了跨浏览器兼容性检查功能，在保存时自动检查文档的跨浏览器兼容性，以检验页面中是否包含目标浏览器不支持的标记或CSS结构。lDreamweaver易学、易用，只要掌握了其基本操作方法，即使初学者也能制作出具有专业水平的网页。第2章 Dreamweaver基础782.2 Dreamweaver 8的工作界面的工作界面 l2.2.1选择工作区布局选择工作区布局l如果Dreamweaver安装在Windows系列的操作系统中，则初次启动Drea

50、mweaver后，会弹出“工作区设置”对话框，对话框中提供了“设计器”和“编码器”两种布局风格，使用者可以根据自己的操作习惯，从中选择一种工作区布局。l“设计器”布局是一个使用MDI(多文档界面)的集成工作区，其中全部文档窗口和面板被集成在一个较大的应用程序窗口中，并将面板组停靠在右侧。习惯可视化编程的人员可使用此布局。考虑到大多数用户会选用这种布局风格，本书以此布局来介绍后续内容。第2章 Dreamweaver基础792.2 Dreamweaver 8的工作界面的工作界面l“编码器”布局同样是集成的工作区，但是将面板组停靠在左侧，文档窗口在默认情况下显示为“代码”视图，习惯手工编码的人员可以