网页制作基础教程.ppt

《网页制作基础教程.ppt》由会员分享，可在线阅读，更多相关《网页制作基础教程.ppt（36页珍藏版）》请在三一文库上搜索。

1、第1章 网页设计基础,要点内容: 基本的网络概念。 网页和网站的概念。 网站的设计流程。,本章学习目标 了解网页设计的基础知识，包括Internet、WWW、HTTP、HTML等名词的含义。 熟练掌握网站设计的基本流程，熟悉开发一个网站的步骤。 本章学前要求 对计算机基础知识、网络有一定的了解。,1.1 经典网页欣赏,在互联网盛行的时代，使用计算机的人几乎没有不上网的，只要能够连上网，就要看新闻、聊天、查资料等，当你在网上通过浏览器浏览各种信息时，所打开的视图界面就是网页。下面介绍几个常见的网页。,图1.1 五梁液集团的主页图,图1.2 网易网站的主页,图1.3 北京大学网站的主页,图1.4

2、中央电视台主页,如果把网站比作一本书，那么网页就是书的一页，所以网页就是一个显示网站内容的最小单元，上面各实例就是网站中的一张网页。网站的主题不同决定网页的风格和内容也随之不同。 企业网站以宣传自己的企业形象、产品性能、生产规模等为主；ISP网络公司网站以人们的日常生活服务为主线索，是一个综合的服务性网站，通过搜索引擎来搜索世界范围内的各式各样的信息；学校的网站主要是介绍该学校的概况、发展历史及前景、教学、科研、招生就业等信息；电视台网站是以新闻为主线条，真实报道我们国家或世界范围内的政治、经济、体育、人文等各种新闻,1.2 网页基础知识概述,Internet又称因特网，是国际计算机互联网的英

3、文简称，是世界上规模最大的计算机网络。可以说是由数以万计具有特殊功能的专用计算机通过各种通信线路，把地理位置不同的网络在物理上连接起来的网络。 Internet是一个遵循一定协议自由发展的国际互联网，它利用覆盖全球的通讯系统使各类计算机网络互联，从而实现智能化的信息交流和资源共享。对个人用户而言，Internet最大的魅力在于用廉价的投入（只需拥有一台PC机，一个调制解调器，一根电话线）即可联通Internet，享受世界上最大的计算机信息网络服务，获取和交流各类信息。,1.2.1 Internet,Internet源自于美国国防部的ARPANET计划，目的是将各种不同的网络连接起来，以进行数据

4、传输。1981年ARPA分成两个网络，即ARPANET和MILNET，它们之间仍然保持着联系，后来这种网络互联称为“DARPAInternet”。1986年美国国家科学基金会NSF（National Science Foundation）使用TCP/IP协议建立了NSFNET网络。1990年7月，NSFNET取代了ARPANET。为了满足用户急剧增长的需要，1992年美国高级网络服务公司ANS（Advanced Networks and Service）组建了ANSNNET，其容量为NSFNET的30倍，它已成为现在的Internet的骨干网。1997年美国开始实施下一代互联网络（Intern

5、et Next Generation）建设计划，无论其通信速度还是网络容量都得到了极大提高。 在中国，最先加入Internet的用户是中科院高能物理所。1994年邮电部正式与Internet联网，实现了和互联网的TCP/IP连接，从此中国的Internet商业服务正式开始，逐步开通了互联网的全功能服务，大型电脑网络项目正式启动，互联网在我国进入飞速发展时期。到1997年底，我国已建成中国公用计算机互联网（ChinaNET）、中国教育和科研网（CERNET）、中国科学技术网（CSTNET）和中国金桥信息网（ChinaGBN）4大互联网，并与因特网建立了连接。,1.2.2 WWW（万维网）,WWW

6、是World Wide Web（环球信息网）的缩写，也可以简称为Web，中文名字为“万维网”。它起源于1989年3月，由欧洲量子物理实验室CERN所开展出来的主从结构分布式超媒体系统。 长期以来，人们只是通过传统的媒体（如电视、报纸、杂志和广播等）获得信息。但随着计算机网络的发展，人们想要获取信息，已不再满足于传统媒体那种单方面传输和获取的方式，而希望有一种主观的选择性。当万维网出现的时候，人们就拥有了一个获取信息的新的途径，所要做的就是通过打开Web浏览器，输入资源的地址，从而自主的访问Internet上的信息资源。由于用户在通过访问信息资源的过程中，无需再关心一些技术性的细节，而且界面非常

7、友好，因而Web在Internet 上一推出就受到了热烈的欢迎，走红全球，并迅速得到了爆炸性的发展。到了1993年，WWW的技术有了突破性的进展，它解决了远程信息服务中的文字显示、数据连接以及图像传递的问题，使得WWW成为Internet上最为流行的信息传播方式。现在，网络上可以提供各种类别的数据库系统，如文献期刊、产业信息、气象信息、论文检索等。由于计算机网络的发展，信息的获取变得非常及时、迅速和便捷。,WWW采用的是客户/服务器结构，其作用是整理和储存各种WWW资源，并响应客户端软件的请求，把客户所需的资源传送到Windows、UNIX或Linux等平台上。可以说，Web为Internet

8、的普及迈出了开创性的一步，是近年来Internet上取得的最激动人心的成就。,1.2.3 HTTP协议,HTTP协议（hypertext transfer protocol，超文本传输协议）是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效，使网络传输减少。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示（如文本先于图形）等。这就是你为什么在浏览器中看到的网页地址都是以“http:/”开头的原因。 自WWW诞生以来，一个多姿多彩虚拟的世界便出现在我们眼前，可是我们怎么能够更加容易地找到我们需要的信息呢？当决定使用超文本作为W

9、WW文档的标准格式后，科学家们立即制定了能够快速查找这些超文本文档的协议，即HTTP协议。经过多年的使用与发展，HTT协定得到不断的完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版，是WWW服务器使用的主要协议。,1.2.4 网页与网站,WWW中的信息资源主要以一篇篇的Web文档为基本元素构成，Web文档简称Web页，用中文描述也就是我们俗称的网页。这些网页采用超级文本（hyper text）的格式，即可以含有指向其他网页或其本身内部特定位置的超级链接，或简称链接。可以将链接理解为指向其它网页的“指针”。链接使得网页交织为网状，这样，如果Internet上的Web页和链接非常多的话，

10、就构成了一个巨大的信息网。 网站是由多个网页集合而成的，集中体现网站的主题，又围绕这个主题表现网站的内容。网页通常分为首页和内页两种。在一个网站里浏览器首先打开的第一个网页叫首页（又叫主页），通过主页进入、浏览的页面称为内页，又叫分页。 首页是一个网站的门面，它的访问量最大，首页所提供的是网站的主题，通过访问首页就能知道该网站所要传递给访问者的首要信息，因而首页设计的好坏直接影响到该网站的质量，也是每一个网页设计者重点要考虑的问题。图1.5所示，是科学出版社的首页。 内页是网站的重要组成部分，是体现具体信息的载体，一般数量比较多，制作比较方便，成本较低。网站所提供的信息服务都是通过各内页传递给

11、用户的。,图1.5 科学出版社的首页,1.2.5 HTML,HTML（hyper text mark-up language）即超文本标记语言，或称为“多媒体文件语言”，它可以标记超链接、文本样式、页面标题、插入图片或动画等多媒体元素，以此来创建Web页面，HTML语言也是用于创建Web页和Web通信的第一个通用描述性语言，由Tim Berners-lee提出。 WWW采用的是客户/服务器结构，当用户从WWW服务器取到一个文件后，Web浏览器就会读取Web网站上的HTML文档，再根据此类文档中的描述组织并显示相应的Web页面。由于将文件放入WWW服务器的人并不知道将来阅读这个文件的人到底会使用

12、哪一种类型的计算机或终端，因此，要保证每个人在屏幕上都能读到正确显示的文件，必须以各种类型的计算机或终端都能“看懂”的方式来描述文件，于是就产生了HTML语言。设计HTML语言的目的也就是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，使人们不用考虑具体信息是在当前电脑上还是在网络的其他电脑上。,HTML文件是由HTML命令组成的描述性文本，因为本身是文本格式的，所以原则上用任何一种文本编辑器都可以对它进行编辑。HTML语言有一套相当复杂的语法。一个基本的HTML文档的结构应该包括头部（Head）、主体（Body）两大部分。头部描述浏览器所需的信

13、息，主体包含所要页面的具体内容，开发者可以使用HTML语言插入各种网页元素，并通过HTML标记说明文字、图形、动画、声音、表格、链接等网页元素的属性。 HTML超文本标记语言表的标记符是通过标签（也叫标记符）来定义网页内容的，HTML超文本标记语言表有若干标记符，如表1.1所示。,HTML中常见的标签说明,：注释标记，在“”之间的内容将不在浏览器中显示。 ：描述文件所符合的HTML DTD，用于对文件的兼容性作简要说明。 ：描述超级链接的开始位置或者目标。要求必须定义herf=或name=属性。 ：表示取首字时的缩写词。 ：是描述地址、签名和作者等信息。 ：在页面中放置可执行的内容。 ：在客户

14、端图像映射MAP中描述超链接热点的轮廓形状。 ：将文本以粗体显示。 ：描述文档的基本地址，浏览器依此转换相对地址。只能用在HEAD标记中。 ：描述基本字体类型，用于显示缺省字体的文本。可用在HEAD标记中， ：在页面中加入背景音乐。 ：以比当前所用字体稍大的字体显示文本。,：引用其它资源中的内容，可能会缩进、斜体显示，通常上下加空行。 ：描述文档主体的开始和结束。 ：换行标记。 ：设置一个按钮。 ：给TABLE加一个标题。 ：居中排列其中的内容。 ：简要说明一个引用，内容用斜体显示。 ：以等宽字体显示一段代码。 ：定义TABLE中一列的属性。 ：用于在TABLE中定义一个列组。 ：在列表中解释

15、一条术语，靠右显示。 ：指明文本已从文档中删除。 ：定义一个术语。 ：表示一系列短条目。在此之后的文本用LI开头，且每条不超过20个字符。 ：在文档中描述不同性质的元素，如章节、段落、摘要等。 ：表示一个列表。DT、DD用于定义列表内的条目。,：在列表中定义一个术语，显示在左列中。 ：用于要强调的文本，通常以斜体显示。 ：插入任何类型的文档，但用户必须在计算机上安装可解读此类文档的应用程序。 ：可用于描述一组区域的关系，可嵌套。 ：设置字体属性。 ：描述一个包含控件的表单。 ：在FRAMESET中描述一个单独的框架。 ：在混合文档中设置水平、垂直方向框架的数量和大小，在FRAMESET中用FR

16、AME设置每个框架的内容和属性。可嵌套使用。 ：出现在文档的起始部分，标明文档的题目或介绍，包含文档的无序信息。可在其中使用BASE、LINK、MATE、TITLE、BASEFONT、BGSOUND元素。 ：从H1到H6，六种标题，黑体显示。 ：显示一条水平线。 ： HTML文本起始元素，通知浏览器该文档为HTML文档。,：将文本用斜体显示。 ：在文档中嵌入一个浮动框架。 ：在文档中插入一幅图像或一段视频。 ：设置FORM中的输入控件，TYPE属性指明控件类型，需要设置NAME。 ：指出新加入文档的文本内容。 ：通知浏览器该文档是一个索引文件。用户可对该文档进行关键词搜索。 ：指明用户应该用键

17、盘输入的文字，一般用等宽字体显示。 ：说明一个标签。不可嵌套。 ：确定FIELDSET元素定义的区域集合。必须作为FIELDSET中的第一个元素。 ：表示列表中的一个条目，可用在DIR、MENU、DL、UL中。 ：在当前HTML文档和其它资源之间建立超链接。只能在HEAD中使用。 ：用等宽字体显示文本.,：为客户端图像映射指定热点区域集合。 ：建立一个滚动文本区。 ：建立一个菜单，用LI定义菜单内的条目。 ：为浏览器、搜索引擎或其它程序提供HTML文档信息。必须在HEAD中使用。 ：不换行。 ：为不支持FRAMESET的浏览器提供。 ：在不支持脚本的浏览器中显示包含的内容。 ：在HTML文档中

18、插入一个对象。 ：建立一个有序的列表。 ：为SELECT元素定义一个选择项。 ：表示一个段落。 ：给对象设置参数。对APPLET、EMBED、OBJECT有效。 ：不处理HTML标记，等宽字体显示。 ：用等宽字体显示文本，保留间距和换行。 ：给文本设置段间距（较小）。,：显示带删除线的文本。 ：用较小的字体显示文本。缺省为等宽字体。 ：表示需要脚本引擎解释执行的脚本代码区。 ：设置一个下拉式选择框，用OPTION定义选择项。 ：用较小的字体显示文本。 ：定义一个范围，不影响页面结构和显示。 ：显示带删除线的文本。 ：着重点。通常为黑体。 ：给页面设置显示风格。 ：用较小的字体将文字显示在下角。

19、 ：用较小的字体将文字显示在上角。 ：定义一张表格。用TR、TD、TH元素定义行、列和单元，可选元素CAPTION、THEAD、TBODY、TFOOT、COLGROUP和COL，可用来组织表格以及对列、列组属性进行处理。 ：定义一个表体。 ：定义表格的一个单元格（排成一行）。,：多行文本输入控件。 ：定义一张表格的页脚。 ：定义表格中一行或一列的标题，文字黑体显示。 ：定义表格的表头。 ：说明文档标题。 ：定义表格中的一行。 ：用等宽字体显示文本。 ：显示带下划线的文本。 ：定义一张列序的列表，用LI定义条目。 ：对一个变量进行说明。 ：在NOBR文本中插入一个软换行符。,1.2.6 动态HT

20、ML,动态HTML（即DHTML）是近年来网络发展进程中最振奋人心，也最具实用性的创新之一。国内网络界也掀起了一股学习动态HTML的热潮。那么，到底什么是动态HTML呢？简而言之，动态HTML就是一种即使在网页下载到浏览器以后仍然能够随时变换的HTML。比如，当鼠标移至文章段落中，段落能够变成蓝色，或者网页头部能够滑过电脑屏幕。这就是说，HTML中能够做的一切在网页下载后还能够做。 有人把动态HTML当作一门语言，也有人把它当作一种专门的技术，这些理解都是不对的。实际上，它是一种通过各种技术的综合发展而得以实现的概念（当然，不同的浏览器，实现的程度也不同），这些技术包括Javascript、V

21、BScript、Document Object Model（文件目标模块）、Layers和CSS（cascading style sheets）等。,动态HTML的实现手段同样是多种多样的，可以是现有的各种手段的组合。比较常用的技术有： 脚本编程语言（JavaScript，VBScript） 文件目标模块（DOM） 层叠样式表（CSS） 动态图层（layers） Netscape Communicator 4.0以上版本和 Microsoft Internet Explorer 4.0以上版本，都宣称支持这种最新的动态HTML功能。但实际上，他们所支持的动态HTML内容并不完全相同。 IE所支

22、持的动态HTML包括以下几部分： 层叠样式表（CSS）：提供了设定HTML标记的所有文本修饰（如文字的大小、字体、颜色等内容）的排版功能。在网页下载完毕后，可动态地改变页面元素的CSS属性。,动态内容（Dynamic Content）：可以动态地更新网页的内容，即可以动态删除和增加页面中的各种元素，随时适应页面编排的需要。 动态图像：通过内建的Animation可以实现动画的效果，另外配合 JavaScript、VBScript或ActiveX控件可以轻松地移动图像。 数据库支持：通过动态HTML方便地实现对数据库中数据的访问。从而使网页设计者轻松地处理数据，实现更强大的交互功能。 Netsc

23、ape所支持的动态 HTML包括以下几部分： 层叠样式表（CSS）。 脚本排版样式（JavaScript Style Sheets）：简称JSS，这是Netscape公司为该浏览器内建的一种排版样式，可以通过JavaScript来控制Style Sheets。 动态图层（dynamic layers）：这是一项很强大的功能，可以提供图文定位、移动图文、控制显示或隐藏图片的功能，方便地实现各种特殊效果。,因此在一般的制作动态网页的过程中，要特别注意两大主流浏览器对动态HTML支持的程度的不同。但是本书考虑到国内使用微软IE浏览器的人比较多，仍然选择以适合IE浏览器为首要目的设计方案。另外，读者需

24、要知道，制作动态网页主要是利用CSS定义的属性可以动态改变、图层可以动态定位和在客户端解释执行的JavaScript程序能够实时地操作HTML元素及其属性的特性。要掌握动态网页制作技术，除了要熟悉CSS、图层应用技术外，还必须学好JavaScript语言。Dreamweaver自带了很多动态效果的函数与过程，可以极大的方便设计者制作一般的动态效果。而深层次的应用，读者可以遵循“拿来主义”的原则，多分析别人的代码，细嚼慢咽，知其然且知其所以然，大胆地做一些改进试验，这样设计制作动态效果的水平就会很快提高。,1.2.7 网站设计的流程,虽然每个网站的规模、内容和所提供的信息不同，但在网站设计的制作

25、阶段的基本流程是相似的。 1. 网站的需求分析 在设计一个网站时，需求分析是第一步，也是最重要的一步。只有明确了网站建设的需求，才能进行下一步工作。 要做好网站的需求分析，主要包括四个步骤： 确定参与组织设计的人员、进行用户调查、进行市场调研、需求分析输出。 其中用户调查是需求分析的关键，主要包括以下几个方面：,1）网站当前以及日后可能出现的功能需求。 2）客户对网站的性能（如访问速度）的要求和可靠性的要求。 3）确定网站维护的要求。 4）网站的实际运行环境。 5）网站页面总体风格以及美工效果（必要的时候用户可以提供参考站点或者由公司向用户提供）。 6）主页面和次级页面数量，是否需要多种语言版

26、本等。 7）内容管理及录入任务的分配。 8）各种页面特殊效果及其数量（JS，Flash等）。 9）项目完成时间及进度（可以根据合同）。 10）明确项目完成后的维护责任。,用户调查完毕后，网站开发者再从以下几个方面进行市场调研： 1）市场中同类网站产品的确定。 2）调研产品的使用范围和访问人群。 3）调研产品的功能设计（主要模块构成，特色功能，性能情况等等） 4）简单评价所调研的网站情况 最后根据用户调查和市场调研的结果出具分析报告，经过“小组讨论决定方案、主要负责人签字、生效并打印文档”的程序，从而完成需求分析。 2. 前期设计 在前期设计中，设计人员根据网站的模式和特点以及网站制作规范选择开

27、发工具、后台数据库，定制出最适当的标准样式、网站结构，将策划方案和开发标准打印并分发给小组成员人手一份，根据策划文档及网站设计规范，主要设计人员进行前期的首页设计。大致过程是：小组负责人确定设计进程时间并派发任务单、主要设计人员开始设计、递交审核、通过后主要负责人签字。,3. 二级页面设计 在首页设计完毕后，整个网站的风格、标准、样式都已经建立，紧接着网站开发就进入了二级页面的设计阶段。大致过程是：依照网站设计规范和标准样式由小组负责人确定设计进程时间并派给任务单、主要设计人员按照既定的网站结构开始二级页面设计工作、递交审核、通过后主要负责人签字。 4. 开始实际制作 第2步和第3步是设计阶段

28、，制作出来的只是样板，并没有真正的进行大规模的开发，制作成为网页文件。在本步骤中就是要将设计落实到所有网页中去，大致过程是：依照网站设计规范和标准样式由小组负责人确定制作进程时间并派任务单、主要制作人员开始内容建设工作、与程序方面人员配合协调工作、递交审核、通过后主要负责人签字。,5. 全面程序开发 第4步制作出来的是静态的网页，要实现复杂的功能，还必须有动态程序的支持，本步骤就是利用诸如Dreamweaver MX 2004之类的开发软件将页面与程序进行整合。 6. 完成并测试 经过程序与页面的整合，网站完成了设计与开发，网站策划人员把所有有关网站的备份文件以及原程序备份，并书写一份网站跟踪

29、报告，说明此网站的建设工作结束所用资源人力以及执行情况。但是，网站是否能够真正的达到预期效果，还必须依靠软件质量保证部门（QA）进行测试，并对比测试结果进行相应的修改，才算最终完成了网站的开发。,7. 发布网站 网站需要发布到Internet上才能被访问浏览，发布的方法有两种：一是网站拥有者向电信运营部门申请拥有独立互联网协议IP地址的线路，自行搭建Web服务器，并向域名管理部门申请域名指向该IP地址；二是向虚拟主机服务商申请虚拟主机和域名或者是申请主机托管。无论哪种办法，目的都是要为网站准备一个网络发布的空间和网络域名。网络空间主要用于存放网页文件、图像文件和其他数据文件等。域名类似于互联网

30、上的门牌号码，是用于识别和定位互联网上计算机的层次结构式字符标识，与该计算机的IP地址相对应，比如我们熟悉的门户网站“网易”，就是其域名。虚拟主机是一种多个网站共享一台服务器，但每个网站都可以拥有独立域名和完整服务器功能的技术，现在提供网络空间和域名申请的虚拟主机服务商有很多，如中国万网（）、中国数据（）、商务中国（）等。网站的拥有者向这些运营商申请空间和域名，但必须根据申请空间的大小、功能、运行环境和域名的类型向这些公司缴纳年费。,8. 上传到服务器 当网站全部开发完毕并在本地计算机上测试后，就可将网站设计的全部页面文件和数据文件上传到所申请的服务器.一般使用FTP的方式上传，FTP的地址、账号和密码由虚拟主机服务商提供。如果是网站拥有者自行搭建的服务器，也建议使用FTP的方式上传，这样比较安全。上传完毕后，在浏览器中只要输入网站的域名或网页的地址就可以打开站点浏览网页的信息了。 9. 后期维护 网站上传到相应的服务器之后，在运行中可能会出现各种不同的问题，如页面的布局、网页的主题、网站服务的功能等诸多方面需要修改，所以网站的后期维护是网站设计的重要的环节。,