网络多媒体应用设计原型

第七章网络多媒体应用设计返回学习目标掌握HTML语言(超文本标记语言)的基本知识，如标签、文件结构、超链接等，能够利用所学知识制作简单页面；学会对Ｗeb页面的复杂处理,如使用图象、表和表格。学会使用FrontPage2000设计站点和网页；学会图片工具栏中工具按钮的使用；掌握FrontPage2000发布方法；掌握制作特殊效果的网页如创建网页间的过渡效果,在网页中插入视频、插入Java程序、ActiveX控件等高级元件。目录7.1Web站点设计基本知识7.2HTML语言7.3FrontPage2000返回7.1Web站点设计基本知识1.什么是是“WorldWideWeb”的缩写，中文译名“万维网”，是一个基于Internet的全球互连、分布、动态和跨平台的交互超文本信息系统，它以“超文本”方式将Internet上的数据连接在一起，让用户能以非常简单的方式浏览世界各地的信息。返回2.什么是Homepage服务主要是以一个个的网页来呈现，所谓网页也就是我们在浏览器上看到的画面，而一般进入站点后所看到的第一个页面通称为Homepage，即主页。主页通常用来作为一个站点中的目录或索引。３.站点就是网页的集合站点就是一群相关网页的集合。也就是说，设计者制作了几个网页，并且经过组织规划，让网页彼此相连，然后让连上Internet的人都能看到，这样的完整结构就称为“站点”。４.站点与URLURL英文全称是UniformResourceLocator，中文名称为“统一资源定位器”，简单地讲就是网络上的一个站点、网页的完整地址。URL实际上就起到站点通信地址的作用。7.2HTML语言7.2.1HTML的基本知识7.2.2装饰HTML文档的界面返回7.2.1HTML的基本知识1.HTML标签2.HTML文件3.HTML文件结构4.HTML超链接HTML语言使用标签来指明文档中的不同内容。标签是区分文本各个组成部分的分界符，用来把HTML文档划分成不同的逻辑部分(或结构)，如段落、标题和表格等。标签描述了文档的结构，它向浏览器提供该文档的格式化信息，以传送文档的外观特征。1.HTML标签大部分HTML标签形式如下：〈标签名〉相应内容〈／标签名〉标签的名字用尖括号〈〉括起来。HTML标签一般有起始标签与结束标签两种，分别放在它起作用的文档两边。起始标签与结束标签非常相似，只是结束标签在“〈”号后面多了一个斜杠“／”。２.HTML文件HTML文件就是普通的文本文件。可以使用两种基本方法制作HTML页面：一种是用文本编辑器，譬如Windows操作环境下的Notebook，编辑文本及HTML命令；另一种是采用可视化软件，譬如FrontPage，生成HTML命令。下面是一份HTML文件的内容：•HTML•HEAD•TITLE例一/TITLE•/HEAD•BODY•HTML文件的第一段正文写在这里......•HTML文件的第二段正文写在这里......•/BODY•/HTML图7.1HTML文件显示以上的HTML文件，经过浏览程序解释后，显示出来的效果图7.1所示。窗口只显示一段文字，而HTML原文件的其它文字符号都不见了，这些没有显示出来的文字符号，如HTML\HEAD等，它们的主要作用是告诉浏览器，如何适当的将文件内容格式显示排列。3.HTML文件结构任何一份HTML文件，都包含了表头(Header)、本体(Body)、主题(Title)三个要素，分别以HEAD、BODY和TITLE标签来表示。同时也是为了HTML文件有别于其它种类的文件，另外再加上HTML标签加以强调。HTML标签：HTML和/HTML标签置于整个文件的起始及结束处，表示文件是属HTML语言格式。其余标签都应该位于该标签里面。HEAD标签：HEAD和/HEAD标签标明文件的表头段，主要说明本文内容整体信息，是文章的开场白。所有在表头段的内容都不会显现在浏览器窗口的本体段(Clientarea)里。BODY标签：BODY和/BODY标签标明文件的本体区段，位于表头段以下的地方，即是指经浏览器解读后显示在窗口本体段(Clientarea)的内容。TITLE标签：TITLE标签标明文件内容的主题，让读者了解文件的主题。TITLE标签里不允许有其它的标签存在。4.HTML超链接在HTML中使用anchor标签a来建立链接，它将文本或图形标识为指向其它HTML文档、图形、小程序、多媒体效果或HTML文档中特定位置。在链接的语法中必须包含一个参考属性href和一个结束标签/a，如下所示：ahref=“URL”here'salinktoanotherpage./a在链接语法中，a/a定义一个超链接，here‘salinktoanotherPage是超链接对象。href指定了目标URL，URL是文档在Web或Internet上的地址，它总是放在引号中。这个URL可以是一个书签、网页或者站点。在链接语法中，不仅可以从网页链接到网页，而且还可以在一个网页内部链接。所以在HTML中，将链接分成两部分，一种是标准链接，另一种是页内链接。超链结文字可有三种不同的显示形态出现在文件中，这三种超链结显示形态分别有：未链结、正在链结和已链结。每种形态的显示颜色可分别设置，各自的意义和设置属性如表7.2.1所示。链结形态定义设置属性未链结形态使用者未曾单击过或链结不成功的形态LINK正在链结形态使用者在单击链结时未放开手的形态ALINK已链结形态使用者已单击链结成功的形态VLINK表7.2.17.2.2装饰HTML文档的界面1.图像和图像映射2.列表3.表格1.图像和图像映射图形格式图形格式可分为两种，一种是点阵图形；另一种是矢量图形。浏览器普遍支持的图形格式有GIF和JPEG。GIF文件格式的图形的每个像素数值只用8个字节来表示。因此一张GIF格式的图形，最多只能包含256种颜色。GIF图形格式有两种，分别是87a和89a，89a格式是原有87a的增强格式，有交织(Interlaced)的特性。JPEG格式图形有相当高的压缩率由于JPEG是矢量图，故图形文件比一般点阵图形，如GIF要小。一般我们看到的HTML文件里的图形，多数为GIF格式，这是因为GIF的显示速度比较好。如果我们要选择高品质的显示画面，则可以选择JPEG格式的图形。插入图象HTML文件中，IMG元素用来插图象。属性SRC的主要用途是指定图形资源的位置，imgsrc=“URL”。属性ALT是指定图形对应的文字叙述，其值为任意一串文字,由编写HTML文件者来设置。ALT属性的设立主要针对非图形界面浏览器使用者。但是，这对图形界面浏览器也有帮助。每当这些浏览器关闭显示图形功能后，这一串文字就派上用场了。图文版面的排列(1).图文的基本排列方式图文对齐排列由IMG元素的ALIGN属性来设置，图与文的对齐排列原则是以文字的基线(Baseline)为依据。其中排列的方式有以下几种：图形顶端位置与文字基线对齐ALIGN=up图形中间位置与文字基线对齐ALIGN=middle图形底端位置与文字基线对齐ALIGN=bottom(缺省值)图形顶端位置与文字最高位置对齐ALIGN=texttop图形顶端位置与行文字基线对齐ALIGN=baseline表7.2.2图文对齐排列方式(2).浮动图形图形与文字除了有以上五种排列方式之外，也有另外两种排列方式，分别为ALIGN=left和ALIGN=right。当ALIGN为right时，文字与图形分开排列，图形漂到文件的右边界；当ALIGN变为left时，图形告左排列，并把图形底下的文字往外挤出去，图形像漂至左边界。(3).图形配置控制宽度设置图形配置宽度的设置是由WIDTH属性来完成。高度设置图形配置高度的设置是由HEIGHT属性来实现。例如：要插入的图形原来的尺寸为100×90大小。如果我们要显示出200×180大小的图，可将WIDTH和HEIGHT两种属性分别设置成200和180，如下所示IMGSRC=“”WIDTH=200HEIGHT=180图形映射图形映射也称为可单击图形，是指在一个图形中包含多个链接。单击图形映射的某个部分即可进入该部分所表示的链接目前有两种图形映射类型，分别是服务器方和客户机方。两种图形映射的差别在于过程(访问者的鼠标单击变成对另一文档的链接)在哪里发生，发生在服务器方时为服务器方图形映射，发生在访问者的计算机上时为客户机方图形映射。在服务器方图形映射中，受到单击的点坐标传输到服务器计算机中，由其确定对这个单击所采取的动作，然后服务器再将住处发送回客户机上，再由客户机发出对某个文档的请求。服务器计算机计算和确定客户机要做的工作。在客户机方图形映射中。图形映射的标志及其属性见表7.3。标志/属性用法USEMAP=…命名要用的客户机方映射定义，是IMG标志的属性ISMAP指定图形使用服务器方图形映射，是IMG标志的属性MAP在HTML文件中标识映射定义块NAME=…提供映射定义块的名称AREA定义映射区域SHAPE=…将映射区域的形体表示为RECT、CIRCLE或POLYHREF=…指定映射区域的目标，单击该区链接这个URLNOHREF指定单击区时不链接任何地方COORDS=x,y,x1,y1,x2,y2标识区域的形体ALT=…提供描述链接的替换文本(或弹出文本)表7.3图形映射的标志及其属性２.列表HTML语言提供多种表结构的元素，根据显示外观的不同可分为两类：词汇表(GlossaryList)和规律性(RegularList)表。第二类规律性表又可分为两种：第一种是有序表；第二种是无序表。定义表(DL)定义表属于词汇表，它是由一系列项目和其定义叙述所组成的。一般定义表的每个项目都列在左边，而其定义则列在右边或下一行有缩排的段落。定义表结构块，是则起始标签DL和结束标签/DL包围形成的，而每一个项目则以DT项目标签和DD定义叙述标签来表示。DLDT是全球住处网(Worldwideweb)的缩写，也有人称之为3W、W3、Web。由欧洲量子物理实验室所开发出来的一套“分散式超媒体数据库查询”的系统。DTHyperTextDDHyperText是超文本。文件通过超文本，可链结到其它地方的数据文件，取得分散到各地的数据。/DL实例：规律性表规律性表结构是一组序列段落，以一个特殊记号、序数或空格为分项符号。它的一般语法为：表列元素起始标签表列项目元素表列项目元素..............................表列元素结束标签(1).无序表典型的无序表的每一个项目前端，都用一个实心小圆点作为分项符号。无序表结构块，是由起始标签UL和结束标签/UL包围形成的，而每一个项目是以LI项目标签来表示。浏览器为无序表元素添加了属性TYPE，它的值分别是表的分项符号样式，其值共有三种：DISC(实心小圆点)、CIRCLE(虚心小方块)和SQUARE(实心小方块)，缺省为DISC。ULLI理解InternetLI访问发布/UL实例：(2).有序表有序表的每个项目都有前后顺序之分多数用数字来表示。有序表结构块，是由起始标签OL和结束标签/OL包围形成的。而每一个项目是以LI项目标签来表示。浏览器为有序表添加了TYPE和START属性，TYPE属性可提供更多项目识别符号。它总共提供了五种不同样式的分项符号，分别如下所列。缺省值为TYPE=1。START属性可设置表项目的初始值，其值为分项符号样式列中第几个，如START=5就表示由‘5’、‘E’、‘e’、‘V’、‘v’开始。OLTYPE=1数字，如1,2,3...OLTYPE=A大写字母，如A,B,C...OLTYPE=a