多媒体技术应用基础第8章

《多媒体技术应用基础第8章》由会员分享，可在线阅读，更多相关《多媒体技术应用基础第8章（160页珍藏版）》请在金锄头文库上搜索。

1、8.1 WWW网页设计基础知识 8.2 HTML语言 8.3 FrontPage 98的使用 8.4 制作实例,第 8 章 Web页面设计,返回主目录,第8章 web页面设计,8.1 WWW网页设计基础知识 8.1.1 什么是WWW网页 WWW是“World Wide Web”的缩写， 是一个基于Internet的全球互连、分布、动态和多平台的交互超文本系统。 它由分布在全世界的一个个Web站点组成，每个eb站点包含一组可供访问的页面。这些页面包含文本、声音、图像及其它多媒体信息，用HTML语言编写。IE 4.0、 Netscape Navigator 4.0等浏览器用于解释HTML语言并显示

2、网页。如果你想浏览丰富多彩的WWW网页，就要先安装一种浏览器软件。 ,Internet可提供多种服务，如 FTP、电子邮件、实时聊天等。 Web服务是其中的一种服务。由于Web上内容丰富、交互性强及友好的图形用户界面而深受欢迎，Web几乎成了Internet的代名词。 人们把Internet看成是一个虚拟社会， Web网页就是社会成员展示自我的窗口。 进入Web，就进入了一个个商店，可以浏览购物； 就像翻开了一本本有声的图书、杂志；在这里你还可以走进世界各地的名牌大学； 当然， 你也可以通过个人网站向世界介绍自己。这些正是Web的魅力。 Web成为报刊杂志和广播电视之后的第三大媒体， 已经影响

3、到人们生活的方方面面。,8.1.2 设计网页前的准备 如果你已经对Internet的基本知识有了一定的了解， 并且有在Web空间浏览的经验，现在想亲手制作Web网页， 那么应该做好以下准备工作。 1. 系统规划 Web站点展示的体裁包括： (1) 发布个人主页： 展示个性、 分享业余爱好、 提供共享信息等。 (2) 建立公司站点： 发布广告、 树立公司形象、 提供服务等。 (3) 网上商店： 提供商品信息、 购物指南、 网上订货等。 ,(4) 发行电子出版物： 网上报刊杂志、 电子图书等。 (5) 提供社区服务： 便民服务、 电子公告等。 首先要明确建立Web站点的主题，是个人主页还是公司站点

4、，建立站点的目的是什么？需要考虑的问题包括： (1) Web站点主题; (2) 设计目的和原则; (3) 面向的服务对象; (4) 站点的内容和提供的服务。,2. 页面设计 对系统做了总体上的规划以后， 接下来需要考虑页面的设计问题。 1） 页面设计需要遵循的原则 简洁 要想使你的页面给人们留下深刻的印象，就要力求做到简洁。 我们常对那些简单、 鲜明的公司标志印象深刻。如耐克公司的“Just Do It”, NBA的“I love this game”, 飞利浦公司的“让我们做得更好”等口号。所以，你首先应精心设计主页面（站点的第一个页面）： 使用一个醒目的标题；使用尽可能少的字体和颜色种类；

5、使用简洁的图形等。 保持站点独特的风格你设计的页面应该个性化，即有自己独特的风格， 否则就会被淹没在不计其数的网站之中。,页面的风格是通过对内容的合理组织及协调的字体和色彩表现出来的， 这需要一定的美术知识并多体会一些成功网站的设计特点。 要保持网站的风格，需要特别注意保持一个站点各页面间的一致性。各网页应具有相同的页面布局；使用统一的标志；相同的导航图标等。 页面各元素与整个页面的色彩协调， 风格一致；字体和颜色保持一致； 主色调鲜明一致。 重点突出在设计页面时， 对那些需要特别强调的内容要做到重点突出。如： 题头标题、 重点内容、最近更新、 特别推荐链接等。 突出重点的方法是通过颜色的对比

6、，字体的变化，醒目的图标等，特别是通过一幅色彩鲜明的图像来表达主题，更能吸引人们的注意力。 ,2） 内容的组织 为了更好地达到建立站点的最终目的，要对所发布的内容进行精心的组织， 做到条理清楚，一目了然。 首先要精心选择最能表达主题的素材，是用一段简洁的文字， 还是用一个醒目的图标，文字材料常常附以恰当的图例。 然后要考虑各元素在页面上的布局，如先后顺序、位置、空白的安排等。一般常把重要的元素放在左上或顶部， 如公司标志。在内容较多时， 常使用链接来引导读者，要注意不要在文字段落中过多使用链接， 要把链接安排在相应的说明文字旁边，这样显得内容组织更有序，页面也更简洁。 ,3） 页面属性 Web

7、网页与常见的报刊杂志等出版物不同， 它的大小是根据浏览器窗口的大小来调整的。另外, 由于读者使用的浏览器的种类和版本不同， 页面的显示效果也不同，所以在设计网页时要考虑最终的显示结果。 首先对页面的尺寸、 布局做初步的设置。考虑到多数用户显示模式是在640480屏幕方式下，所以一般将页面大小设定为600380，其中考虑了窗口的边框、 具条、状态栏等 如果你的页面需要用更高的显示模式，如向客户展示色彩丰富的图片等， 可以将显示模式设置为800600，增强色16位。 这也是一些主页向用户推荐的显示方式。各元素的大小和布局也应先考虑到。由于浏览器可以根据窗口大小来调整各元素的位置，所以在设计页面时应

8、控制元素的相对位置和尺寸。 一般可以通过使用表格和框架来控制文本及其它元素的位置。,最终要得到预想的效果，还要用常用的浏览器来对设计的网页进行测试，并不断进行调整。 3. 素材准备 在对网站的主题、内容、布局、目的做了系统设计后， 就可以着手制作网页了。Web网页的主题要用图像、文本、 动画等丰富的多媒体素材来展示，而网页制作工具的功能只是将这些素材进行编排，建立链接等，所以要事先根据设计要求准备素材。这些素材包括：风格独特的标志、协调的背景图案、 格式化文本、 插图、 动画等。 常用的工具软件有：微软公司的Image Composer、 Gif Animator、 Word 7.0， Ado

9、be 公司的Photoshop 5.0等。,8.1.3 常用网页制作工具 制作网页的第一件事就是选定一种网页制作软件。 从原理上来讲， 用Notepad或者Netscape自带的网页编辑器就可以制作, 但选择一个好的编辑器可以事半功倍。下面介绍目前常用的几种工具。 1. Adobe pagemill 2.0 该工具的功能不算强大, 但使用起来很方便, 适合初学者制作不太复杂的主页。特色是有一个剪贴板,可以将任意多的文本、图形、表格拖放到里面,需要时再打开。Pagemill允许在HTML代码上编写和修改。 ,2. Microsoft FrontPage 98 FrontPage 98功能强大，

10、简单易用， 是一种专业的网页制作工具。 本章就是以FrontPage 98为例向你介绍网页制作方法的。 页面制作由FrontPage中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得” 的编辑页、HTML代码编辑页和预览页。站点管理功能由Explorer完成，这也是FrontPage 98的优势所在, 其中预置了50种主题(Themes), 便于设计者参考设计页面风格一致的站点。 3. HotDog Professional 4.0 该工具是较早基于代码的Web开发工具,主要针对那些希望在页面中加入CSS、 Java、 RealVideo等复杂技术的高级设计者。,4. Hom

11、esite 3.0 Homesite 3.0 也是基于代码的Web制作工具，为代码编辑者提供了极大的方便。Homesite具有良好的站点管理功能， 链接确认向导可以检查一个或多个文档的链接状况。 另外，也有许多新开发的网页制作软件，现列举部分如下: (1)Webwizard。载网址： http:/ 使用极为简单，它提供的向导功能，您只要花 3 分钟就能制作出一个简单的主页， 适用于初学者。 (2)Web-it。下载网址： http:/，是简单的HTML编辑器，需要您了解基本的HTML语言。有16位和32位版本。 ,8.2 HTML 语 言,8.2.1 什么是HTML语言 HTML语言比较简单，

12、 且功能强大，支持不同数据格式的文件（文本、 图像、 动画等）嵌入，其主要特点有： (1) 简易性: HTML语言易学易用。 (2) 可扩展性: HTML语言被广泛应用，功能不断加强， 标识符也在不断增加， HTML采取子类元素的方式，使系统扩展方便。 (3) 平台无关性: HTML可以使用在广泛的平台上， 这也是WWW盛行的一个原因。 HTML的编辑器大体可以分为 3 种： ,(1) 基本编辑软件: 使用Windows自带的记事本或写字板都可以编写， 存盘时使用“.htm”或“.html”作为扩展名， 浏览器就可以解释执行了。 (2) 半所见即所得软件: 这种软件能大大提高开发效率， 它可以

13、使你在短时间内制作出网页，这种类型的软件主要有Hotdog、 国产的软件网页作坊等。 (3) 所见即所得的软件: 使用广泛的编辑器，可以在不熟悉HTML语言的情况下就做出网页。 这类软件主要有FrontPage 98、 DreamWaver等。 ,8.2.2 一个简单的HTML文件 为了对HTML语言的标签有一个初步认识， 首先给出一个用HTML语言编写的网页例子。 HTML页面示例 , HTML页面示例 粗体, 2、 表格 单元格 单元格 单元格 , 单元格 单元格 单元格 3、 图像 , 4、 链接 我的工作室， 1999 ,以上HTML文件定义的页面在IE 4.0浏览器中显示的效果如图8

14、 - 1所示。 从以上例子可以看出，HTML文档由两部分组成页头和主体 。 页头包含有,在浏览器标题栏中显示；主体中包含整个网页内容,显示在浏览器的正文域。文档中的标记是用来区分HTML文档与其它文档的。 因此， 一个HTML文档的基本结构为： , . . ,8.2.3 HTML语言标签 为了方便查阅和使用标签，下面把常用的HTML标签分类列出。更详细的内容请参考HTML语言手册。 (1) 文档结构标签:,(2) 特殊的字符及其代码:,在HTML语言中有自己的保留字集，如 “”和“”是HTML文档中表示标签的符号，当需要在页面内容中使用这些字符时，就必须用代码来表示。其它的特殊字符还有“ c

15、”、 “ R ”等。 (3) 文字和段落标签:,这些标签主要用来控制文字的大小、 字体、 段落的排列样式等。 (4) 超链接标签: .。 其属性如下： ,在网页设计中， 常用表格来控制文本、 图像及其它元素在页面中的布局。 ,框架是指在同一屏幕显示多个相互交互的HTML页面。 ,8.2.4 HTML语言的发展 1. 早期的HTML 最初的HTML语言是Tim BernersLee设计的一种小型的超文本语言。它的最大特点在于可以在不同的平台和浏览器上运行。1990年，由于Web的飞速增长，HTML语言得到了广泛应用。 最初的HTML语言非常简单，仅有几个标签，此后，HTML以多种不同方式被扩充。在Internet Engineering Task Force (IETF)的支持下，1994年通用的规则被制定为HTML 2.0(1995年11月制定)。之后，HTML 3.0在内容上做了进一步的丰富，很多新特征被采用。WWW协会的HTML工作组经过努力，制定了HTML 3.2 标准(1997年1月)。 ,HTML的快速发展使各种方式的设备都可以利用网上的信息，这些设备有使用不同分辨率和色彩深度的PC、 蜂窝电话、 手持设备和快速输入输出设备等。 2. HTML 4.0 HTML 4.0通过以下机制扩展了HTML：样式表、脚本、 框架、嵌入