第一章网页制作基础.ppt

单击此处编辑母版文本样式,第二级,第三级,第四级,Page,*,单击此处编辑母版标题样式,第1章 网页制作基础,导学,本章介绍网页的基本概念和原理,主要内容包括:网页的本质,网页制作相关技术,网页制作工具,以及网站开发流程。,学习完本章之后，学习者应该能描述网站的基本概念,能列举并说明网页制作相关的技术和工具,并能说明和应用网站开发流程。,2,1.1.1 Internet 与 www,网络是指多台计算机通过特定的连接方式构成的一个计算机集合体，而网络协议则可以理解为网络中的设备“打交道”时共同遵循的一套规则，即以何种方法获得所需的信息。,Internet 就是将许多不同功能的计算机通过线路连接起来组成的一个世界范围内的网络。,3,1.1.1 Internet 与 www(续),从网络通信技术的角度看，Internet 是一个以 TCP/IP 网络协议连接各个国家、各个地区、各个机构的计算机网络的数据通信网。,从信息资源的角度看，Internet 是一个集各个部门、各个领域的各种信息资源为一体，供网上用户共享的信息资源网。,4,1.1.1 Internet 与 www(续),Internet 能提供的服务包括：,网页浏览服务,电子邮件服务,即时消息传送,FTP 服务,在线聊天、游戏,网上购物、炒股,5,1.1.1 Internet 与 www（续）,WWW,（,Word Wide Web,，译为“万维网”）是,Internet,提供的服务之一，用户可以利用,WWW,服务获得信息并进行网上交流。,WWW,是由遍布在,Internet,上称为,Web,服务器的计算机组成，它将不同的信息资源有机地组织在一起，通过一种叫做“浏览器”的软件进行浏览。,6,1.1.1 Internet 与 www(续),Internet 工作过程：用户连接到 Internet，在浏览器窗口中输入 Internet 地址，按下回车键后，相当于要求显示 Internet 上的某个特定网页。这个“请求”被浏览器通过电话线等网络介质传送到页面所在的服务器端，然后服务器作出“响应”，再通过网络介质把用户请求的特定网页传送到用户所在的计算机，最后由浏览器进行显示。,7,1.1.1 Internet 与 www(续),当用户在页面中操作时，例如单击其中的超链接，则这种“请求”又会通过网络介质传送到提供相应页面的服务器，然后还是由服务器作出响应。这个过程可以用下图简要地表示。,8,1.1.1 Internet 与 www(续),浏览者位于此端（客户端）,浏览的网页位于此端（服务器端）,9,1.1.1 Internet 与 www(续),通过这个过程，浏览器和服务器之间建立了一种交互关系，使浏览者可以访问到世界各地计算机（服务器）上的网页。所以浏览器是获取 WWW 服务的基础，它的基本功能就是对网页进行显示。,10,1.1.1 Internet 与 www(续),目前使用最广泛的浏览器是 Internet Explorer与 Firefox（火狐）。,网站与网页,网站的概念,WWW 是由遍布世界各地的 Web 服务器组成，那么，这些 Web 服务器又是如何构成一个庞大的信息网络呢？答案就是网页。由于网页中包含所谓的“超链接”，这些超链接可以将一个网页链接到其他网页，从而构成了万维网的纵横交织结构。,通过超链接连接起来的一系列逻辑上可以视为一个整体的页面，则叫做网站。,12,1.1.2 网站与网页（续）,首页的概念,“主页”是网站中的一个特殊页面，它是作为一个组织或个人在 WWW 上开始点的页面，通常也称为首页，主页中通常包括指向其他相关页面或其他主页的超链接。,主页是进入一个网站的门户，是整个网站的第一页。通常主页的名称是固定的，一般叫做 index.htm 或 index.html 等（.htm 或.html 后缀表示 HTML 文档）。,13,1.1.2 网站与网页（续）,网站中的文件结构,任何一个网站都是由若干个文件组成的，包括网页文件、图像文件、媒体文件等多种类型。这些文件通过一定的方式以文件夹的形式组织起来，构成了网站的根文件夹。,图 1.2 是 Dreamweaver“文件”面板中显示的一个典型网站中包含的各种文件，表1.1则列出了网站中各种常用文件类型的扩展名。,14,1.1.2 网站与网页（续）,15,1.1.2 网站与网页（续）,16,1.2.1 网页的本质HTML,HTML（HyperText Markup Language，超文本标记语言）是表示网页的一种标准。通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定网页内容的格式。浏览器按顺序阅读网页文件（HTML 文件），然后根据内容周围的 HTML 标记符解释和显示各种内容。,17,1.2.1 网页的本质HTML（续）,网页通过结合使用其他 Web 技术（如CSS 样式表、JavaScript 脚本程序等），就可以创建出功能更加强大的网页。有关 HTML 语言的详细信息，请访问：www.w3.org。,说明：,HTML的最新版本是HTML4.01，但目前应用更广泛的是XHTML1.0（eXtensible HyperText Markup Language，扩展超文本标记语言）。XHTML可以认为是规定更为严格的HTML，二者本质并无区别，本书基本不作区分。,18,1.2.1 网页的本质HTML（续）,HTML 实例,演示（一）,p5,演示（二）,p6,演示（三）,p7,演示（四）,p8,19,1.2.2 网页修饰技术CSS,随着技术的进步，在网页制作过程中使用CSS技术已经成为基本要求。实际上，较新版本的Dreamweaver已经将CSS技术作为默认的网页修饰技术。,CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。,20,1.2.2 网页修饰技术CSS,CSS 实例,演示（一）,p8,演示（二）,p10,演示（三）,p11,演示（四）,p12,21,1.2.3 其他网页制作相关技术,JavaScript 是一种脚本程序语言，一般用于在网页中添加特定效果或功能。例如，JavaScript可以用来检测浏览器、响应用户动作、验证表单数据以及显示各种自定义内容，如特殊动画、对话框等。,更为常见的情况是，JavaScript语言用于在网页中实现DHTML或其他高级功能。,22,1.2.3 其他网页制作相关技术（续）,DHTML（Dynamic HTML，动态 DHTML）是 HTML、CSS 和客户端脚本（例如 JavaScript）的一种集成。它建立在原有技术的基础上，可分为三个方面：一是 HTML，也就是页面中的各种页面元素对象，它们是被动态操纵的内容；二是 CSS，CSS 属性也是动态操纵的内容，从而获得动态的格式效果；三是客户端脚本，它实际操纵 Web 页上的 HTML 和 CSS。,23,1.2.3 其他网页制作相关技术（续）,使用 DHTML 技术，可使网页设计者创建出能够与用户交互并包含动态内容的页面。实际上，DHTML 使网页设计者可以动态操纵网页上的所有元素甚至是在这些页面被装载以后。利用 DHTML，网页设计者可以动态地隐藏或显示内容、修改样式定义、激活元素以及为元素定位等。,DHTML 技术是一种非常实用的网页设计技术，目前早已广泛地应用到了各类大大小小的网站中，成为高水平网页必不可少的组成部分。,24,1.2.3 其他网页制作相关技术（续）,XML 是 Extensible Markup Language（可扩展标记语言）的简称，它是针对网络应用的一项关键技术。XML 是 World Wide Web Consortium(W3C)的一个标准，它允许用户定制自己的标记。,按照 W3C 在其标准规范“Extensible Markup Language(XML)1.0(Second Edition)”中的说法：XML 是标准通用标记语言（Standard Generic Markup Language，SGML）的一个子集。,25,1.2.3 其他网页制作相关技术（续）,其目的是使得在 Web 上以现有超文本标记语言（Hypertext Markup Language，HTML）的使用方式提供、接收和处理通用的 SGML 成为可能。XML 的设计既考虑了实现的方便性，同时也顾及了与 SGML 和 HTML 的互操作性。,HTML 着重描述网页的显示格式，而XML 着重描述的是网页的内容。从另外一方面讲，XML 既不是 HTML 的升级技术也不是 HTML 的替代技术，它们有各自的应用领域。,26,1.3.1 网页编辑工具,网页编辑工具可以分为两类：,HTML编辑器,所见即所得的编辑器（WYSIWYG，What You See Is What You Get）,27,1.3.1 网页编辑工具（续）,HTML编辑器,在“记事本”中编写HTML代码显然是低效和繁琐的，使用 HTML 编辑器可以简化HTML代码的编辑过程。HTML标记器一般都提供诸如自动完成、代码提示等方便 HTML 代码编写的功能。,常见的HTML编辑器包括 HomeSite（已经集成在Dreamweaver中）和BBEdit等。以“HTML 编辑器”为关键字在网上可以搜索到更多的 HTML 编辑器软件。,28,1.3.1 网页编辑工具（续）,所见即所得的编辑器,所见即所得的编辑器的作用就是用直观可视的方式将网页制作的过程实现。由于浏览器等方面的因素，真正的“所见即所得”很难做到，编辑器中的显示效果一般只能是与浏览器中的显示效果大致相同，这一点在编辑网页时必须注意。,目前应用最广泛的两种网页编辑工具是 Dreamweaver 和 Frontpage。,29,1.3.2 素材处理工具,要制作一个完整的网页，单靠网页编辑工具是远远不够的，还需要一些其他的软件制作出相关的文件来完善网页，例如制作图像效果、Flash 动画等。,素材处理工具：图像处理工具和媒体处理工具。,30,1.3.2 素材处理工具（续）,最常用的图像处理软件是 Photoshop 和 Fireworks,。,Photoshop 是由 Adobe 公司出品的最著名的图形图像处理软件。Photoshop 的功能非常强大，是专业图像创作的首选软件，它能够实现各种专业化的图像处理，例如进行色彩校正、添加特殊效果等。,Fireworks 是完全针对 Web 应用的一款图像处理软件。由于它与 Dreamweaver、Flash 的紧密集成，在网页制作领域有广泛的应用。,31,1.3.2 素材处理工具（续）,媒体处理软件主要有 Flash、音频处理软件和视频处理软件等,。,Flash 是目前最流行的一种 Web 矢量动画软件，Flash 图形是压缩的矢量图形，采用了网络流式媒体技术，可以在网上迅速传输；同时由于矢量图形不会因为缩放而导致影像失真，因此在 Web 上有广泛的应用。,常用的音频处理软件有 Audition、GoldWave 等，常用的视频处理软件有 Premiere、AfterEffect等。,32,1.4 网站开发流程,1.4.1 网站规划,1.4.2 网站设计,1.4.3 网页制作,1.4.4 测试与发布,1.4.5 网站维护,33,1.4.1 网站规划,在网站建设开始时对站点进行详细规划和组织会大大方便以后的工作。网站规划通常包括以下内容：,确定目标,用户分析与需求分析,确定网站风格,考虑技术因素（网页下载速度、浏览器、分辨率、插件等）,34,1.4.2 网站设计,网站规划好之后，就进入了设计阶段。利用规划阶段搜集的信息，在设计阶段需要对内容、导航系统等进行具体的设计。,设计网站的内容结构,设计页面的布局,设计首页,设计导航系统,网页中的颜色,文字、图像、动画以及多媒体的使用,35,1.4.2 网站设计(网站的内容结构),网站的内容结构是指通过什么样的逻辑方式将网站中的内容组织起来。实际上，由于网站主题的千差万别，内容组织的形式也有很多种类，关键的原则就是要符合普通人的思维习惯。,较好的做法是在 Internet 上查看与自己网站类似的网站，看其他人是如何对内容进行分类的，然后选择并设计一种适当的方式。,36,1.4.2 网站设计(页面布局),首先，确定页面中要放置什么内容，包括导航栏、文本、图像或其他多媒体信息的详细数目。,然后，在纸上或是图像处理软件（例如 Photoshop、Fireworks 等）中绘制出页面的布局效果（from sketch to wireframe to prototype）。,最后选择使用什么排版技术，例如表格、CSS或是框架，对内容进行排版。,37,1.4.2 网站设计(首页),首页是网站的门户，是网站的脸面，是网站中的最重要的一个页面。设计首页时需要遵循网站规划制定的基本原则。,在设计首页时需要注意，首页上往往包括以下部分：网站徽标、网站的层次结构（即导航系统）、搜索功能、吸引注意力的东西（例如主题图片）、实时内容（例如“新闻”、“最近更新”等）、商业信息（例如广告）、快捷方式（提供访问某些页面或功能的快速链接）、注册登录功能等。,38,1.4.2 网站设计(导航系统),导航设计的最基本原则就是：使用户每次的点击都是合情合理的。也就是说，要按照人之常情设计符合逻辑的导航系统。,在设计网站的导航系统时，要注意保持风格的一致。,网页中的导航栏中可以提供返回首页的链接、搜索功能、次要栏目链接、“您在这里”标记（俗称“面包屑”）、本地导航、页脚式导航或“脚注”等。,39,1.4.2 网站设计,(,颜色),在网页制作过程中，通常可以使用 6 位数字的十六进制数值来构造出颜色值,。,在网页中使用颜色的一般要点：,保持一致性,注意可读性,颜色工具,网站设计(,文字、图像及媒体,),中文网页最好使用用户通用的基本字体。例如“宋体”、“黑体”等。另外，可以使用CSS 样式表确保整个网站字体风格的一致性。,网页中的图像、图形以及其他多媒体对象的数量和质量是限制页面快速下载的主要因素。不过合理地使用它们也是网页制作的一种趋势，只要找到一个平衡点，使大多数目标用户能够接受即可。因为要制作出一个让所有人都满意的网页几乎是不可能的。,41,1.4.3 网页制作,设计阶段完成后，进入网页制作阶段。,首先根据设计结果制作出若干示范网页和模板。,然后通过 Dreamweaver 等软件制作具体页面，在网页中添加实际内容，包括：文本、图像、声音、Flash 电影以及其他多媒体信息等。,42,1.4.4 测试与发布,在将所有的网页制作完毕后，就可以将网站发布到,Internet,上，但是在发布之前必须对网站进行测试。,在测试网站时，除了对所有影响页面显示的细节因素进行一次测试外，页面中的超链接能否正常跳转是一个值得重视的问题。,发布网站时一般需要两步工作：申请网页空间和上传网页。,43,1.4.5 网站维护,随着网站的发布，我们应根据访问者的建议，不断修改或是更新网站中的信息，并从浏览者的角度出发，进一步完善网站。这时网站建设工作又返回到了流程中的第一步，这样周而复始，就构成了网站的维护过程。,44,小节,网页的本质是HTML(超文本标记语言),网页制作技术包括HTML,CSS,JavaScript,XML等.,网页制作工具包括网页编辑工具和素材处理工具.,网站开发流程包括:规划,设计,制作,测试,发布与维护.,45,