第1章 网页制作基础(精品).ppt

《第1章 网页制作基础(精品).ppt》由会员分享，可在线阅读，更多相关《第1章 网页制作基础(精品).ppt（47页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第第1章章 网页制作基础网页制作基础1本章要点本章要点1.1 什么是网页什么是网页1.2 网页编程语言网页编程语言1.3 网页制作工具网页制作工具1.4 网站开发流程网站开发流程21.1.1 Internet 与与 www网络是指多台计算机通过特定的连接方式构网络是指多台计算机通过特定的连接方式构成的一个计算机集合体，而网络协议则可以成的一个计算机集合体，而网络协议则可以理解为网络中的设备理解为网络中的设备“打交道打交道”时共同遵循时共同遵循的一套规则，即以何种方法获得所需的信息。的一套规则，即以何种方法获得所需的信息。Internet 就是将许多不同功能的计算机通过线就是将许多不同功能的计算

2、机通过线路连接起来组成的一个世界范围内的网络。路连接起来组成的一个世界范围内的网络。31.1.1 Internet 与与 www(续续)从网络通信技术的角度看，从网络通信技术的角度看，Internet 是一个以是一个以 TCP/IP 网络协议连接各个国家、各个地区、网络协议连接各个国家、各个地区、各个机构的计算机网络的数据通信网。各个机构的计算机网络的数据通信网。从信息资源的角度看，从信息资源的角度看，Internet 是一个集各个是一个集各个部门、各个领域的各种信息资源为一体，供部门、各个领域的各种信息资源为一体，供网上用户共享的信息资源网。网上用户共享的信息资源网。41.1.1 Inter

3、net 与与 www(续续)Internet 能提供的服务包括：能提供的服务包括：网页浏览服务网页浏览服务 电子邮件服务电子邮件服务 即时消息传送即时消息传送 FTP 服务服务 在线聊天、游戏在线聊天、游戏网上购物、炒股网上购物、炒股 51.1.1 Internet 与与 www（续）（续）WWW（Word Wide Web，译为，译为“万维网万维网”）是）是 Internet 提供的服务之一，用户可以利用提供的服务之一，用户可以利用 WWW 服务获得信息并进行网上交流。服务获得信息并进行网上交流。WWW 是由遍布在是由遍布在 Internet 上称为上称为 Web 服务器服务器的计算机组成，

4、它将不同的信息资源有机地组织的计算机组成，它将不同的信息资源有机地组织在一起，通过一种叫做在一起，通过一种叫做“浏览器浏览器”的软件进行浏的软件进行浏览。览。6统一资源定位器统一资源定位器URLURL（Uniform Resource Locator）由4个部分组成：网络协议网络协议 域名域名 路径路径 网页文件网页文件其基本格式为：“How:/Who/Where/What”例如：http:/ Internet 与与 www(续续)Internet Internet 工作过程：工作过程：用户连接到用户连接到 InternetInternet。在浏览器窗口中输入在浏览器窗口中输入 Interne

5、t Internet 地址地址,要求显示要求显示 Internet Internet 上的某个特定网页。上的某个特定网页。这个这个“请求请求”被浏览器通过电话线等网络介质传送到被浏览器通过电话线等网络介质传送到页面所在的服务器端，然后服务器作出页面所在的服务器端，然后服务器作出“响应响应”，再，再通过网络介质把用户请求的特定网页传送到用户所在通过网络介质把用户请求的特定网页传送到用户所在的计算机。的计算机。最后由浏览器进行显示。最后由浏览器进行显示。81.1.1 Internet 与与 www(续续)当用户在页面中操作时，例如单击其中的超当用户在页面中操作时，例如单击其中的超链接，则这种链接，

6、则这种“请求请求”又会通过网络介质传又会通过网络介质传送到提供相应页面的服务器，然后还是由服送到提供相应页面的服务器，然后还是由服务器作出响应。这个过程可以用下图简要地务器作出响应。这个过程可以用下图简要地表示。表示。91.1.1 Internet 与与 www(续续)浏览者位于此端（客户端）浏览的网页位于此端（服务器端）101.1.1 Internet 与与 www(续续)通过这个过程，浏览器和服务器之间建立了一种交互关系，通过这个过程，浏览器和服务器之间建立了一种交互关系，使浏览者可以访问到世界各地计算机（服务器）上的网页。使浏览者可以访问到世界各地计算机（服务器）上的网页。浏览器浏览器(

7、Browser)实际上是一个软件程序，用于与实际上是一个软件程序，用于与WWW建立连接，并与之进行通信。它可以在建立连接，并与之进行通信。它可以在WWW系统中根据系统中根据链接确定信息资源的位置，并将用户感兴趣的信息资源取链接确定信息资源的位置，并将用户感兴趣的信息资源取回来，对回来，对 HTML 文件进行解释，然后将文字图像或者将文件进行解释，然后将文字图像或者将多媒体信息还原出来。多媒体信息还原出来。常见的浏览器有常见的浏览器有IE，Firefox，TheWorld，傲游，傲游(Maxthon)等。等。111.1.2 网站与网页网站与网页网站的概念网站的概念WWW 是由遍布世界各地的是由遍

8、布世界各地的 Web 服务器组成，服务器组成，那么，这些那么，这些 Web 服务器又是如何构成一个庞大服务器又是如何构成一个庞大的信息网络呢？答案就是网页。由于网页中包的信息网络呢？答案就是网页。由于网页中包含所谓的含所谓的“超链接超链接”，这些超链接可以将一个，这些超链接可以将一个网页链接到其他网页，从而构成了万维网的纵网页链接到其他网页，从而构成了万维网的纵横交织结构。横交织结构。通过超链接连接起来的一系列逻辑上可以视为通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。一个整体的页面，则叫做网站。12超文本与超链接超文本与超链接131.1.2 网站与网页（续）网站与网页（

9、续）首页的概念首页的概念“主页主页”是网站中的一个特殊页面，它是作为一是网站中的一个特殊页面，它是作为一个组织或个人在个组织或个人在 WWW 上开始点的页面，通常也上开始点的页面，通常也称为首页，主页中通常包括指向其他相关页面或称为首页，主页中通常包括指向其他相关页面或其他主页的超链接。其他主页的超链接。主页是进入一个网站的门户，是整个网站的第一主页是进入一个网站的门户，是整个网站的第一页。通常主页的名称是固定的，一般叫做页。通常主页的名称是固定的，一般叫做 index.htm 或或 index.html 等（等（.htm 或或.html 后后缀表示缀表示 HTML 文档）。文档）。141.1

10、.2 网站与网页（续）网站与网页（续）网站中的文件结构网站中的文件结构任何一个网站都是由若干个文件组成的，包括网任何一个网站都是由若干个文件组成的，包括网页文件、图像文件、媒体文件等多种类型。这些页文件、图像文件、媒体文件等多种类型。这些文件通过一定的方式以文件夹的形式组织起来，文件通过一定的方式以文件夹的形式组织起来，构成了网站的根文件夹。构成了网站的根文件夹。图图 1.2 是是 Dreamweaver“文件文件”面板中显示的一面板中显示的一个典型网站中包含的各种文件，表个典型网站中包含的各种文件，表1.1则列出了网则列出了网站中各种常用文件类型的扩展名。站中各种常用文件类型的扩展名。151

11、.1.2 网站与网页（续）网站与网页（续）161.1.2 网站与网页（续）网站与网页（续）171.2 网页编程语言网页编程语言静态网页编程语言静态网页编程语言HTML CSSXML网页特效编程语言网页特效编程语言javaScriptVBScript交互式网页编程语言交互式网页编程语言ASPJSPPHP181.2.1 网页的本质网页的本质HTMLHTML（HyperText Markup Language，超文，超文本标记语言）是表示网页的一种标准。本标记语言）是表示网页的一种标准。通过在网页中添加标记符，可以告诉浏览器如何通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定网页内容的格式

12、。浏览器按顺显示网页，即确定网页内容的格式。浏览器按顺序阅读网页文件（序阅读网页文件（HTML 文件），然后根据内容文件），然后根据内容周围的周围的 HTML 标记符解释和显示各种内容。标记符解释和显示各种内容。191.2.1 网页的本质网页的本质HTML（续）（续）网页通过结合使用其他网页通过结合使用其他 Web 技术（如技术（如CSS 样样式表、式表、JavaScript 脚本程序等），就可以创建脚本程序等），就可以创建出功能更加强大的网页。如果需要了解出功能更加强大的网页。如果需要了解 HTML 语言的详细信息，请参阅其他参考书或访问：语言的详细信息，请参阅其他参考书或访问：http:/

13、www.w3.org。说明：说明：HTML的最新版本是的最新版本是HTML4.01，但目，但目前应用更广泛的是前应用更广泛的是XHTML1.0（eXtensible HyperText Markup Language，扩展超文本，扩展超文本标记语言）。标记语言）。XHTML可以认为是规定更为严可以认为是规定更为严格的格的HTML，二者本质并无区别，本书基本不，二者本质并无区别，本书基本不作区分。作区分。201.2.1 网页的本质网页的本质HTML（续）（续）HTML 实例实例演示（一）演示（一）演示（二）演示（二）演示（三）演示（三）演示（四）演示（四）211.2.2 网页修饰技术网页修饰技术

14、CSS随着技术的进步，在网页制作过程中使用随着技术的进步，在网页制作过程中使用CSS技术已经成为基本要求。实际上，较新版本的技术已经成为基本要求。实际上，较新版本的Dreamweaver已经将已经将CSS技术作为默认的网页技术作为默认的网页修饰技术。修饰技术。CSS（Cascading Style Sheet，层叠样式表），层叠样式表）技术是一种格式化网页的标准方式，它扩展了技术是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的的功能，使网页设计者能够以更有效的方式设置网页格式。方式设置网页格式。221.2.2 网页修饰技术网页修饰技术CSSCSS 实例 演示（

15、一）演示（二）演示（三）演示（四）231.2.3 可扩展标记语言可扩展标记语言XMLXML 是 Extensible Markup Language（可扩展标记语言）的简称，它是针对网络应用的一项关键技术。XML 是 World Wide Web Consortium(W3C)的一个标准，它允许用户定制自己的标记。按照 W3C 在其标准规范“Extensible Markup Language(XML)1.0(Second Edition)”中的说法：XML 是标准通用标记语言（Standard Generic Markup Language，SGML）的一个子集。241.2.3可扩展标记语言

16、可扩展标记语言XML（续）（续）其目的是使得在 Web 上以现有超文本标记语言（Hypertext Markup Language，HTML）的使用方式提供、接收和处理通用的 SGML 成为可能。XML 的设计既考虑了实现的方便性，同时也顾及了与 SGML 和 HTML 的互操作性。HTML 着重描述网页的显示格式，而XML 着重描述的是网页的内容。从另外一方面讲，XML 既不是 HTML 的升级技术也不是 HTML 的替代技术，它们有各自的应用领域。251.2.4 动态编程语言动态编程语言javaScriptJavaScript 是一种脚本程序语言，一般用于在是一种脚本程序语言，一般用于在网

17、页中添加特定效果或功能。例如，网页中添加特定效果或功能。例如，JavaScript可以用来检测浏览器、响应用户动可以用来检测浏览器、响应用户动作、验证表单数据以及显示各种自定义内容，作、验证表单数据以及显示各种自定义内容，如特殊动画、对话框等。如特殊动画、对话框等。更为常见的情况是，更为常见的情况是，JavaScript语言用于在网语言用于在网页中实现页中实现DHTML或其他高级功能。或其他高级功能。样例1 样例2261.2.5 交互式编程语言交互式编程语言 通过浏览器实现人（客户端）机（服务通过浏览器实现人（客户端）机（服务器端）交互的编程技术。器端）交互的编程技术。ASP（ActiveX

18、Server Page）JSP （Java Server Page）PHP（Hypertext Preprocessor）271.2.6 其他网页制作相关技术其他网页制作相关技术DHTML（Dynamic HTML，动态 DHTML）是 HTML、CSS 和客户端脚本（例如 JavaScript）的一种集成。它建立在原有技术的基础上，可分为三个方面：一是 HTML，也就是页面中的各种页面元素对象，它们是被动态操纵的内容；二是 CSS，CSS 属性也是动态操纵的内容，从而获得动态的格式效果；三是客户端脚本，它实际操纵 Web 页上的 HTML 和 CSS。281.2.6 其他网页制作相关技术（续

19、）其他网页制作相关技术（续）使用 DHTML 技术，可使网页设计者创建出能够与用户交互并包含动态内容的页面。实际上，DHTML 使网页设计者可以动态操纵网页上的所有元素甚至是在这些页面被装载以后。利用 DHTML，网页设计者可以动态地隐藏或显示内容、修改样式定义、激活元素以及为元素定位等。DHTML 技术是一种非常实用的网页设计技术，目前早已广泛地应用到了各类大大小小的网站中，成为高水平网页必不可少的组成部分。291.3网页编辑工具网页编辑工具网页编辑工具可以分为两类：HTML编辑器和所见即所得（WYSIWYG，What You See Is What You Get）的编辑器。HTML编辑器

20、编辑器所见即所得的编辑器所见即所得的编辑器301.3.1 网页编辑工具网页编辑工具HTML编辑器在“记事本”中编写HTML代码显然是低效和繁琐的，使用 HTML 编辑器可以简化HTML代码的编辑过程。HTML标记器一般都提供诸如自动完成、代码提示等方便 HTML 代码编写的功能。常见的HTML编辑器包括 HomeSite（已经集成在Dreamweaver中）和BBEdit等。在Google或百度中以“HTML 编辑器”为关键字可以搜索到更多的 HTML 编辑器软件。311.3.1 网页编辑工具（续）网页编辑工具（续）所见即所得的编辑器所见即所得的编辑器所见即所得的编辑器的作用就是用直观可视的方

21、式将网页制作的过程实现。由于浏览器等方面的因素，真正的“所见即所得”很难做到，编辑器中的显示效果一般只能是与浏览器中的显示效果大致相同，这一点在编辑网页时必须注意。目前应用最广泛的网页编辑工具是 Dreamweaver321.3.2 素材处理工具素材处理工具要制作一个完整的网页，单靠网页编辑工具是远要制作一个完整的网页，单靠网页编辑工具是远远不够的，还需要一些其他的软件制作出相关的远不够的，还需要一些其他的软件制作出相关的文件来完善网页，例如制作图像效果、文件来完善网页，例如制作图像效果、Flash 动动画等。画等。素材处理工具：图像处理工具和媒体处理工具。素材处理工具：图像处理工具和媒体处理

22、工具。331.3.2 素材处理工具（续）素材处理工具（续）最常用的图形图像处理软件是最常用的图形图像处理软件是 Photoshop、Fireworks和和Flash。Photoshop 是由 Adobe 公司出品的最著名的图形图像处理软件。Photoshop 的功能非常强大，是专业图像创作的首选软件，它能够实现各种专业化的图像处理，例如进行色彩校正、添加特殊效果等。Fireworks 是完全针对 Web 应用的一款图像处理软件。由于它与 Dreamweaver、Flash 的紧密集成，在网页制作领域有广泛的应用。341.3.2 素材处理工具（续）素材处理工具（续）媒体处理软件主要有 Flash

23、、音频处理软件和视频处理软件等。Flash 是目前最流行的一种 Web 矢量动画软件，Flash 图形是压缩的矢量图形，采用了网络流式媒体技术，可以在网上迅速传输；同时由于矢量图形不会因为缩放而导致影像失真，因此在 Web 上有广泛的应用。常用的音频处理软件有 Audition、GoldWave 等，常用的视频处理软件有 Premiere、AfterEffect等。351.4 网站开发流程网站开发流程1.4.1 网站规划1.4.2 网站设计1.4.3 网页制作1.4.4 测试与发布1.4.5 网站维护361.4.1 网站规划网站规划在网站建设开始时对站点进行详细规划和组织会大大方便以后的工作。

24、网站规划通常包括以下内容：确定目标 用户分析与需求分析 确定网站风格 考虑技术因素（各种技术因素，包括网页下载速度、浏览器、分辨率、插件等。）371.4.2 网站设计网站设计网站规划好之后，就进入了设计阶段。利用规划阶段搜集的信息，在设计阶段需要对内容、导航系统等进行具体的设计。设计网站的内容结构设计网站的内容结构 设计页面的布局设计页面的布局 设计首页设计首页 设计导航系统设计导航系统 网页中的颜色网页中的颜色 文字、图像、动画以及多媒体的使用文字、图像、动画以及多媒体的使用 381.4.2 网站设计网站设计设计网站的内容结构设计网站的内容结构网站的内容结构是指通过什么样的逻辑方式将网站中的

25、内容组织起来。实际上，由于网站主题的千差万别，内容组织的形式也有很多种类，关键的原则就是要符合普通人的思维习惯。较好的做法是在 Internet 上查看与自己网站类似的网站，看其他人是如何对内容进行分类的，然后选择并设计一种适当的方式。391.4.2 网站设计网站设计设计页面布局设计页面布局设计页面布局首先，确定页面中要放置什么内容，包括导航栏、文本、图像或其他多媒体信息的详细数目。然后，在纸上或是图像处理软件（例如 Photoshop、Fireworks 等）中绘制出页面的布局效果。最后选择使用什么排版技术，例如表格、层或是框架，对内容进行排版。401.4.2 网站设计网站设计设计首页设计首

26、页 首页是网站的门户，是网站的脸面，是网站中的最重要的一个页面。设计首页时需要遵循网站规划制定的基本原则。在设计首页时需要注意，首页上往往包括以下部分：网站徽标、网站的层次结构（即导航系统）、搜索功能、吸引注意力的东西（例如主题图片）、实时内容（例如“新闻”、“最近更新”等）、商业信息（例如广告）、快捷方式（提供访问某些页面或功能的快速链接）、注册登录功能等。411.4.2 网站设计网站设计设计导航系统设计导航系统 导航设计的最基本原则就是：使用户每次的点击都是合情合理的。也就是说，要按照人之常情设计符合逻辑的导航系统。在设计网站的导航系统时，要注意保持风格的一致。网页中的导航栏中可以提供返回

27、首页的链接、搜索功能、次要栏目链接、“您在这里”标记（俗称“面包屑”）、本地导航、页脚式导航或“脚注”等。421.4.2 网站设计网站设计网页中的颜色网页中的颜色在网页制作过程中，通常可以使用 6 位数字的十六进制数值来构造出颜色值。最好使用标准网络安全色。在网页中使用颜色的一般要点：保持一致性；注意可读性；431.4.2 网站设计网站设计文字、图像、及多媒体文字、图像、及多媒体的使用的使用 中文网页最好使用用户通用的基本字体。例如“宋体”、“黑体”等。另外，可以使用CSS 样式表确保整个网站字体风格的一致性。网页中的图像、图形以及其他多媒体对象的数量和质量是限制页面快速下载的主要因素。不过合

28、理地使用它们也是网页制作的一种趋势，只要找到一个平衡点，使大多数目标用户能够接受即可。因为要制作出一个让所有人都满意的网页几乎是不可能的。441.4.3 网页制作网页制作 设计阶段完成后，进入网页制作阶段。首先根据设计结果制作出若干示范网页。然后通过 Dreamweaver 等软件制作具体页面，在网页中添加实际内容，包括：文本、图像、声音、Flash 电影以及其他多媒体信息等。451.4.4 测试与发布测试与发布 在将所有的网页制作完毕后，就可以将网站发布到 Internet 上，但是在发布之前必须对网站进行测试。在测试网站时，除了对所有影响页面显示的细节因素进行一次测试外，页面中的超链接能否正常跳转是一个值得重视的问题。发布网站时一般需要两步工作：申请网页空间和上传网页。461.4.5 网站维护网站维护随着网站的发布，我们应根据访问者的建议，不断修改或是更新网站中的信息，并从浏览者的角度出发，进一步完善网站。这时网站建设工作又返回到了流程中的第一步，这样周而复始，就构成了网站的维护过程。47