网页制作实用教程(第3版)第1章课件.ppt

1、能够能够了解了解了解了解认识认识分析简单的网页源码html页面的基本结构网页的本质互联网有关的基础概念编写简单的静态页面能够能够知知识技能目标识技能目标本章主要内容本章主要内容预备知识1.1网页1.2网站的一般开发流程1.31.1预备知识预备知识1.1.3 URL1.1.4 DNS1.1.5 IP地址1.1.8 电子邮件1.1.9 HTTP1.1.10 HTML1.1.1 因特网1.1.2 万维网1.1.6 浏览器1.1.7 FTP1.1.1 因特网因特网 因特网（Internet）又称网际网路或互联网、英特网，是网络与网络之间所串连成的庞大网络，这些网络以一组通用的协定相连，形成逻辑上的单一

2、巨大国际网络。这种将计算机网络互相联接在一起的方法可称作“网络互联”，在这基础上发展出覆盖全世界的全球性互联网络称“互联网”，即是“互相连接一起的网络”。Internet主要提供的服务有万维网（WWW）、文件传输协议（FTP）、电子邮件（E-mail）及远程登录等。1.1.2 万维网万维网万维网（World Wide Web）简称Web或WWW，是一个基于超文本（Hypertext）方式的信息检索服务技术，它将位于Internet上不同地点的相关数据信息有机地编织在一起。WWW提供一种良好的信息查询接口，用户仅需提出查询要求，而到什么地方查询及如何查询则由WWW自动完成。Web是我们登录Int

3、ernet后最常利用到的Internet的功能。人们连入Internet后，有一半以上的时间都是在与各种各样的web页面打交道。在基于web方式下，我们可以浏览、搜索、查询各种信息，可以发布自己的信息，可以与他人进行实时或者非实时的交流，可以游戏、娱乐、购物等。1.1.3 URL URL为“Uniform Resource Locator”的缩写，通常翻译为“统一资源定位器”，它是一个指定Internet上资源位置的标准，也就是人们常说的网址。其格式为：通讯协议：通讯协议：/服务器地址服务器地址：通讯端口：通讯端口/路径路径 v通讯协议：使计算机之间能交换信息的一组规则和标准。v服务器地址：指

4、出WWW页面所在的服务器域名。v通讯端口：有时（并非总是这样）对某些资源的访问来说，需给出相应的服务器提供服务的端口号。v路径：指明服务器上某个资源的位置（其格式与DOS系统中的格式一样，通常由“目录/子目录/文件名”这样的结构组成）。与端口一样，路径并非总是需要的。例如，http:/ DNSDNS是“Domain Name Service”的缩写，通常翻译为“域名管理系统”，简称为域名，它采用分层管理模式，用于将机器的名称转变成IP地址。DNS使用阶层式的命名标准。此阶层的运作方式是由右而左，在右边的表示最高等级。简单的范例如图1-1所示：图1-1 DNS阶层式的命名1.1.5 IP地址地址

5、IP（Internet Protocol）即因特网协议，是为计算机网络相互连接进行通信而设计的协议，是计算机在因特网上进行相互通信时应当遵守的规则。IP地址是给因特网上的每台计算机和其他设备分配的一个唯一的地址。1.1.6 浏览器浏览器浏览器是指将互联网上的文本文档（或其他类型的文件）翻译成网页，并让用户与这些文件交互的一种软件工具，主要用于查看网页的内容。在Windows环境中较为流行的Web浏览器为微软的Internet Explorer，Mozilla Firefox，谷歌的Chrome，这些浏览器在性能方面各有千秋，在用户界面上也有所不同。本文的实例全部使用IE浏览器打开查看。1.1.

6、7 FTPFTP（File Transfer Protocol）即文件传输协议，是一种快速、高效和可靠的信息传输方式，通过该协议可把文件从一个地方传输到另一个地方，从而真正实现资源共享。制作好的网页要上传到服务器上，就要用到FTP。1.1.8 电子邮件电子邮件电子邮件又称E-mail,是目前Internet上使用最多、最受欢迎的一种服务。电子邮件是利用计算机网络的电子通信功能传送信件、单据、资料等电子媒体信息的通信方式，它最大的特点是可以在任何地方、任何时间收发信件，大大提高了工作效率，为办公自动化、商业活动提供了很大的便利。1.1.9 HTTP超文本传输协议（Hyertext Transfe

7、r Protocol，HTTP），它是一种最常用的网络通信协议。若想链接到某一特定的网页时，就必须通过HTTP协议，不论你是用哪一种网页编辑软件，无论在网页中加入什么资料，或是使用哪一种浏览器，利用HTTP协议都可以看到正确的网页效果。1.1.10 HTMLHTML（Hyper Text Markup Language）即超文本标记语言，是一种用来制作超文本文档的简单标记语言，也是制作网页最基本的语言，它可以直接由浏览器执行。1.2 网页网页网页的本质1.2.11.2.2静态网页与动态网页1.2.3网页设计的概述 人民邮电出版社人民邮电出版社 1.2.1 网页的本质网页的本质网页实际上就是一个

8、文件，这个文件存放在世界上某个地方的某一台计算机中，而且这台计算机必须要与因特网相连接。网页是由网址（URL）来识别与存取的。在浏览器的地址栏中输入网页的地址后，经过复杂而又快速的程序解析后，网页文件就会被传送到计算机中，然后再通过浏览器解释网页的内容，最后展现在浏览者的眼前。什么是网页的本质？在回答这个问题之前先请访问一个网页，首先向IE浏览器地址栏输入URL地址（例如网易的主页http:/），这也就是向服务器发送了一个请求，当服务器接收到这个请求时，则必须做出反应，也就是反馈。之后客户端接收到了反馈信息，并在浏览器中显示所要的内容。这个过程也可以用图简单表示，如图1-2所示。图1-2访问网

9、页的一般过程 人民邮电出版社人民邮电出版社 网页打开了，出现在眼前的是图文并貌的网页页面。它们是怎么传过来的呢？选择IE浏览器页面中的“查看源文件”命令，会弹出一个用记事本打开的文本文件（用其他浏览器，可能会在浏览器新打开一个标签显示网页源码），这就是该网页的源码，也就是所谓的网页的本质。该文件的内容是从Web服务器端传递过来的，如图1-3所示。图1-3查看网页源文件从记事本中可以看到，网页的源文件由一些类似这样的标签组成。这些标签是HTML语言的标记。HTML的英文全称是Hyper Text Markup Language，直译为超文本标记语言。该语言不是一种程序设计语言，而是一种描述文档结

10、构的标记语言。它的作用是通过一些标签来指示浏览器如何显示包含在标签中的内容。参考下面一段程序：My Homepage Hello world!1HTML标记 标记放在HTML文件的开头，以标记结尾，用以向浏览器说明，该文件是HTML文件。2“文件头”标记 文件头标记是以开头，以结尾。一般放在标记的后面，用以说明网页的标题，连接，关键字等信息。3“文件标题”标记 标题标记为和。这对标记用来设定文件的标题，注释该文件的内容。浏览器通常都会将文件标题显示在浏览器窗口的左上角。4“文件体”标记 文件体标记为和。一般用来指明HTML文档的内容，如文字、标题、段落和列表等，也可以用来定义页面的背景颜色。以

11、下几个标记都是包含在body标记中的。5“标题”标记 标题标记的格式为和。(n代表从16的数字)。此标记被用来设置标题字体的大小。HTML准许有至这6级标题。6“字体”标记 字体标记的格式为和，用来设置网页中文字的各种属性，比如字体、大小、颜色等。7“表格”标记 表格标记的格式为和，用来在网页中插入表格，表格在网页中的应用十分广泛，除了用以显示数据外，还可以使用它来进行网页布局，实现网页元素定位。在和标签中，还可以使用和 标记定义表格行，和标记定义表头，和标记定义表格单元。8“图片”标记 图片标记的格式为（#代表图片的URL）。用于在网页中显示图片，要注意图片标记与上面的几个标记不同，它没有结

12、尾标记。HTML文档结构如图1-4所示。图1-4 HTML文档结构 用记事本编辑上文提到的HTML代码，并保存为“My Homepage.html”，如图1-5(a)所示。然后用浏览器打开该文件（直接双击文件图标），得到如图1-5(b)所示的结果。图 1-5（a）记事本查看网页 图 1-5（b）浏览器打开网页从图1-5(a)中可以看到，在标记里有“color=red”代码，用于指明字体的颜色是红色。标记中用来修饰标记内容的部分叫做标记属性，color就是font标记中修饰字体颜色的属性。属性是用来修饰标记的，通过对属性赋予不同的值，可使网页显示不同的风格。HTML的规则很多，用户不需要全部掌握

13、，能够看懂各种HTML标记，会给标记属性赋值就可以了。看懂HTML代码，不仅可以使自己制作网页时得心应手，还可以借助别人的技术来充实自己的网页。另外，在HTML文件中，还可以加入脚本语言(如JavaScript或VBScript)，使用脚本语言，可以制作出许多网页特效。1.2.2 静态网页与动态网页静态网页与动态网页静态网页是相对于动态网页而言的，并不是说网页中的元素是静止不动的。静态网页是指浏览器与服务器端不发生交互的网页，网页中的Gif动画、Flash以及Flash按钮等都会发生变化。静态网页的执行过程大致为：1.浏览器向网络中的服务器发出请求，指向某个静态网页。2.服务器接到请求后，将传

14、输给浏览器，此时传送的只是文本文件。3.浏览器接到服务器传来的文件后解析HTML标签，将结果显示出来。1.2.2 静态网页与动态网页静态网页与动态网页动态网页除了静态网页中的元素外，还包括一些应用程序，这些程序需要浏览器与服务器之间发生交互行为，而且应用程序的执行需要服务器中的应用程序服务器才能完成。无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。静态网页与动态网页是相对应的，静态网页的URL后缀是以htm、html、shtml、xml等常见形式出现的。而动态网页的URL后缀是以asp、jsp、php、perl、cgi 等形式出现的。利用Dreamweaver CS6即可以

15、创建静态网页，也可以创建动态网页。本书主要介绍创建静态网页技术。1.2.3 网页设计的概述网页设计的概述网页设计是一个网页创作的过程，是根据客户需求从无到有的过程，网页设计具有很强的视觉效果、互动性、操作性等其他媒体所不具有的特点。一个成功的网页设计，首先在观念上要确立动态的思维方式，其次要有效地将图形引入网页设计中，提高人们浏览网页的兴趣。在崇尚鲜明个性风格的今天，网页设计应该增加个性化的因素。网页设计并非是纯粹的技术型工作，而是融合了网络应用技术与美术设计两个方面。因此，对从业人员来说，仅掌握网页设计制作的相关软件是远远不够的，还需要有一定的美术功底和审美能力。1.3.5 发布站点1.3.

16、4 测试站点1.3.3网页的实施与细化1.3.2 规划站点1.3.1 收集资料和素材1.3.6 更新和维护站点网网站站的的一一般般开开发发流流程程1.3 网站的一般开发流程网站的一般开发流程1.3.1 收集资料和素材收集资料和素材网站里最重要的资源是文字资源和图片资源，因此大部分的收集工作应围绕这两种资源展开。资源收集的途径很多。概括说来，主要有网络资源收集、光盘资源收集和书籍资源收集三种。如果这三种方式都不能找到所需要的资源，那么只好请专人进行创作了。网站中不应该只使用收集来的资源，原创的内容能吸引更多的访问者。因此，虽然亲自进行创作是一件很辛苦的工作，但我们鼓励在网站建设中尽可能多地使用原

17、创内容。对于收集到的资源，有必要对其进行分类、整理以及编辑、处理，使其符合自己的要求。值得一提的是，如果收集来的资源是有版权的，使用前应先与作者联系，在使用时也应署名出处。尊重版权是每一个网站制作者应遵循的原则1.3.2 规划站点规划站点在创建站点之前需要对站点进行规划，站点的形式有并列、层次和网状等，需根据实际情况进行选择。在规划站点时应按站点所包含的内容进行频道的划分，如要制作一个综合性网站，其包含的内容非常多，如军事、文学、社会、时政、体育和情感等多个方面，在各主频道下面又有很多的小栏目，各小栏目下面又包括许多的网页，设计网站时需要考虑到各个网页的内容及版式。1.3.3网页的实施与细化网

18、页的实施与细化完成站点规划后，便可具体到每一个页面的制作，在制作网页时，首先要做的就是设计版面布局，就像传统的报刊杂志制作一样，可将网页看作一张报纸进行排版布局。版面指的是在浏览器中看到的完整的页面大小。因为不同的显示器分辨率不同，所以，同一个页面的大小可能出现不同尺寸。布局网页就是以最适合浏览的方式将网页元素排放在页面的不同位置。版面布局完成后，就可以着手制作每一个页面了，通常可从首页做起，制作过程中可以先使用表格或AP Div对页面进行整体布局，然后将需要添加的内容分别添加到相应的单元格中，并随时预览效果，及时调整，直到整个页面完成并达到理想的效果，然后使用相同的方法完成整个网站中其他页面

19、的制作。1.3.4 测试站点测试站点 在制作好网页后，不能马上就发布站点，还需要对站点进行测试。站点测试可根据浏览器种类、客户端以及网站大小等要求进行测试，通常是将站点移到一个模拟调试服务器上对其进行测试或编辑。1.3.5 发布站点发布站点 发布站点之前需在Internet上申请一个主页空间，以指定网站或主页在Internet上的位置，然后将网站的所有文件上传到服务器空间中。上传网站通常使用FTP（远程文件传输）软件将其上传到申请的网址目录下。使用FTP软件上传文件速度较快，也可使用Dreamweaver中的发布站点命令进行上传。1.3.6 更新和维护站点更新和维护站点站点上传到服务器后，并不是就一劳永逸了，网站维护人员需要每隔一段时间对站点中的某些页面进行更新，保持网站内容的新鲜感以吸引更多的浏览者，还应定期打开浏览器检查页面元素显示是否正常、各种超级链接是否正常链接等，防止网站出现浏览故障或链接故障等问题影响访客的浏览。另外，为了扩大网站的影响力，还需要对站点进行推广和宣传，如将网站注册到各大搜索网站中以便提高网站的访问量等。