1 / 32

网络与信息技术

网络与信息技术. 第七章 网页设计基础. 中国地质大学网络教育学院 杨强根. 内容提要. 教学内容： 本章简单的介绍了网页设计的一些基本概念以及制作过程，重点学习超文本标记语言 HTML 以及网页制作工具软件 FRONTPAGE ，了解新一代网页设计语言 XML 。 学习目标： 通过学习，初步了解超文本标记语言 HTML 、可扩展标记语言 XML ，并可通过网页制作工具 FRONTPAGE 制作简单的网页。 重　　点： 超文本标记语言 HTML 、网页制作工具软件 FRONTPAGE 、可扩展标记语言 XML 。

lynton
Download Presentation

网络与信息技术

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网络与信息技术 第七章 网页设计基础 中国地质大学网络教育学院 杨强根

  2. 内容提要 • 教学内容：本章简单的介绍了网页设计的一些基本概念以及制作过程，重点学习超文本标记语言HTML以及网页制作工具软件FRONTPAGE，了解新一代网页设计语言XML。 • 学习目标：通过学习，初步了解超文本标记语言HTML、可扩展标记语言XML，并可通过网页制作工具FRONTPAGE制作简单的网页。 • 重　　点：超文本标记语言HTML、网页制作工具软件FRONTPAGE、可扩展标记语言XML。 • 难　　点：超文本标记语言HTML、可扩展标记语言XML。

  3. 基本概念和术语（1） • 万维网（world wide web）：基于超文本的，方便用户在因特网（Internet）上搜索和浏览信息的信息服务系统。 • 超文本（hypertext）：一种全局性的信息结构,它将文档中的不同部分通过关键字建立链接，使信息得以用交互方式搜索。它是超级文本的简称。 • 超媒体（hypermedia）：超媒体是超文本（hypertext）和多媒体在信息浏览环境下的结合。它是超级媒体的简称。 • 主 页（home page）：通过万维网(Web)进行信息查询时的起始信息页。 • URL（统一资源定位标识，Uniform Resource Locator）：指定互联网上资源地址的标准方式，是WWW（World Wide Web）协议的一部分。 有五个基本部分组成： • 1）所使用的访问协议；2）数据所在的主机； • 3）请求数据所在主机的数据源端口； • 4）通向数据的路径； • 5）包含了所需数据的文件名。 • HTML（超文本标记语言）：一种“标记”语言，用于定义 Web 页的格式和分配 Web 信息。 • HTTP（超文本传送协议）：将文档从主机或服务器传送到浏览器或者个人用户的方法。 • 超级连接：不同信息片之间的连接。

  4. 概述 • 网页的基本组成 • 一般来说，组成网页的元素有：文字、图形、图像、声音、动画、影像、超级链接以及交互式处理等。但网页的基本组成元素为文字、图形和超级链接。 • 网页制作基本流程 • 1、前期工作准备阶段：在此阶段主要完成以下几个方面的工作：拟定网页主题、搜集相关资料，规划网页内容，绘制结构草图。 • 2、中期制作阶段：在此阶段主要利用各种网页制作工具，开始制作网页，并不断地进行上传与测试，直到最后制作完毕。 • 3、后期维护阶段：网页制作完成后，可进行发布和推广应用。根据需要，对网页进行更新与维护。 • 网页制作方法 • 制作网页有两种方法：一种是写HTML源代码；另一种就是使用网页制作工具软件来制作网页

  5. 超文本标记语言 html文件是标准的ASCII文件，是加入了许多标注(tag)的特殊字符串组成的普遍文本文件。从结构上讲，html文件由元素(element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。绝大多数元素是“容器”， 即它有起始标记和结尾标记。元素的起始标记叫做起始标注(start tag)，元素结束标记叫做结尾标注(end tag)，在起始标注和结尾标注中向的部分是元素体。 每一个元素都有名称和可选择的属性，元素的名称和属性都在起始标注内标明。

  6. HTML文件基本结构 <html>html文件开始<head>文件头开始　文件头</head>　 文件头结束<body>文件体开始 文件体</body>文件体结束 </html>html文件结束

  7. HTML元素的三种表示方法 • 1)<元素名>文件或超文本<／元素名> • 2)<元素名 属性名＝“属性值…>文本成超文本<／元素名> • 3)<元素名>

  8. 构成网页的基本元素 • 标题<TITLE> ：<title>This is a page title</title> • 标题<Hn> ：<H1>这是一级标题</H1> • 分段<P> ：<p>这是一个段落</p> • 列表List • 无序列表<ul> • 有序列表<ol> • 预格式化文本<pre> • 块引用<BLOCKQUOTE> • 居中<Center>

  9. 超文本链接指针1 • 统一资源定位器URL： http://www.cugnc.cn • 指向一个目标<a>： <a href=“http://www.cugnc.cn”>网络学院</a> • 标记一个书签： <a name="name">text</a> • 目标窗口：<a href="url" target="window-name">text </a> • 图象链接指针： <a href=“http://www.cugnc.cn”><img src="url"></a>

  10. 超文本链接指针2 • 图象地图(image map)：使用图象地图稍微复杂一点。图象地图不仅需要在html文件中说明，它还需要一个后缀为.map的文件，用来说明图象分区及其指向的url的信息。 在.map文件中说明分区信息的格式如下： • rect url 左上角坐标，右下角坐标 • poly url 各顶点坐标 • circle url 直径两端点坐标 • default url • 例子： • <img src="mapimg.gif" usemap="#Face><map name="Face"><area shape="rect“ href="page.html“ coords="140,20,280,60"><area shape="poly“ href="image.html“ coords="100,100,180,80,200,140"><area shape="circle“ href="nes.html“ coords="80,100,60></map>

  11. 版面风格控制 • １、字体大小<font size=4> • ２、标尺线<hr> • 3、分行<BR>和禁止分行<nobr> • ５、背影和文本颜色 • <body background="image-url"> • <body bgcolor=# text=# link=# alink=# vlink=#>

  12. 表格<Table> • 1、表格的基本形式 • <table border><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td>       </table> • ２、有通栏的表 • 跨多列的表元 <th colspan=#><table border><tr><th colspan=3> Morning Menu</th><tr><th>Food</th><th>Drink</th><th>Sweet</th><tr><td>A</td><td>B</td><td>C</td></table> • 跨多行的表元 <th rowspan=#><table border><tr><th rowspan=3> Morning Menu</th>        <th>Food</th> <td>A</td></tr><tr><th>Drink</th> <td>B</td></tr><tr><th>Sweet</th> <td>C</td></tr></table>

  13. 表格<Table> • ３、表格属性 • 表的大小用width=#和height=#属性说明； • 边框宽度由border=#说明； • 表格间距即划分表格的线的粗细用cellspacing=#表示 • ４、表中文本的输出 • 文本与表框的距离用cellpadding=#说明； • 文本在其中的输出位置用align=#说明。#是 left，center和right三者之一，分别表示左对齐，居中和右对齐，align属性可修饰<tr>,<th>和<td>标注； • 表格的高度大于其中文本的高度时，可以用valign=#说明文本在其中的位置。#是top,middle,bottom,baseline四者之一

  14. 表格<Table> • ５、浮动表格 • 所谓浮动表格是指表与文件中重中内容对齐时，若在现在位置上不能满足其对齐方式，表格含上下移动，即“挤开”一些内容，直到满足其对齐要求。 • 浮动属性一般由align=left或right指定。 • ６、表格颜色 • 表格的颜色用bgcolor=#指定。

  15. 帧结构 Frame • １、帧结构的基本格式 • 帧结构将流览器的窗口分成多个区域，每个区域可以单独显示一个html文件，各个区域也可相关连地显示某一个内容，比如可以将索引放在一个区域，文件内容显示在另一个区域。 • 帧结构的基本结构如下 <html><head><title>...</title></head><noframes>...</noframes><frameset><frame src="url"></frameset></html> • <noframes>...</noframes>中的内容显示在不支持帧结构的浏览器窗口中,因而这里指向一个普通版本的html文件，以便使用不支持帧结构浏览器的用户阅读。 • 帧结构由<frameset>指定，并且可以嵌签，分区中种部分显示的内容用<framre>指定。

  16. 帧结构 Frame • ２、横向帧结构 • 横向帧结构用<frameser rows=#>指定，#可以是一个百分数，也可以是一整数。前者规定各帧占窗口的百分数，后者指定各帧的绝对大小。 • ３、纵向帧结构 • 纵向帧结构用<frameset cols=#>指定。 • ４、混合帧结构 • 将窗口分成横纵几个区域时，用<frameset>代替<frame>链接，即可将原来分好的<frame>区域再次划分帧。 <frameset cols=20%,*> <frame src="A.html">     <frameset rows=40%,*>     <frame src="B.html">     <frame src="C.html">     </frameset></frameset>

  17. 帧结构 Frame • ５、帧结构与帧中文本的间距 • 帧结构与其中的文本间距可以用Marginwidth=#和marginneigh=#来指定，前者指定文本与帧结构的边缘的横向距离，后者为纵向距离，其单位都为象素。 • ６、帧结构间的关联 • ①在帧结构的html文件中标记各个帧，标记的方法是在<frame>中加入name属性，比如上例，定义左边的帧为输出，右边帧为主帧。 <frame src="A.html“ name=display> <frame src=“B.html“ name=index> • ②在B.html文件中指定输出到哪个帧方法是在B.html文件中加入下列一行。 <base target="display"> • 特殊的 4 类操作 • <a href=url target=_blank> 新窗口 • <a href=url target=_self> 本窗口 • <a href=url target=_parent> 父窗口 • <a href=url target=_top> 整个浏览器窗口

  18. Frontpage 2000 • 要求熟练掌握通过Frontpage 2000制作网页、管理站点的功能； • 能够运用Frontpage2000提供的网页模板和向导制作网页和创建站点； • 能过运用CSS为网页和站点定制风格，区分样式表、主题之间的区别和联系； • 熟练掌握表单操作。

  19. XML简介 • XML(eXtensible Markup Language，可扩展标记语言)是由W3C于1998年2月发布的一种标准。它同样是SGML的一个简化子集，它将SGML的丰富功能与HTML的易用性结合到Web的应用中，以一种开放的自我描述方式定义了数据结构，在描述数据内容的同时能突出对结构的描述，从而体现小数据之司的关系。这样所组织的数据对于应用程序和用户都是友好的、可操作的。

  20. XML与HTML的比较 • 可扩展性方面 • HTML不允许用户自行定义他们自己的标记或属性，而在XML中，用户能够根据需要，自行定义新的标记及属性名，以便更好地从语义上修饰数据。 • 结构性方面 • HTML不支持深层的结构描述，XML的文件结构嵌套可以复杂到任意程度，能表示面向对象的等级层次。此外，XML的数据存储格式不受显示格式的制约。一般来说，一篇文档包括三个要素：数据、结构以及显示方式。对于HTML来说，显示方式内嵌在数据中，这样在创建文本时，要时时考虑输出格式，如果因为需求不同而需要对同样的内容进行不同风格的显示时，要从头创建一个全新的文档，重复工作量很大。此外HTML缺乏对数据结构的描述，对于应用程序理解文档内容、抽取语义信息都有诸多不便。 • 可校验性方面 • HTML没有提供规范文件以支持应用软件对HTML文件进行结构校验；而XML文件可以包括—个语法描述，使应用程序可以对此文件进行结构确认。 • HTML与XML二者相互之间并不是竞争关系，而是相互补充的关系。

  21. XML的文档格式1 • XML文档内容的基本单元——元素，它的语法格式如下： <标签>文本内容</标签> • 元素是由起始标签、元素内容和结束标签组成。用户把要描述的数据对象放在起始标签和结束标签之间。 例如：<姓名>王平</姓名> • 无论文本内容有多长或者多么复杂，XML元素中还可以再嵌套别的元素，这样使相关信息构成等级结构。 <employees> <employee> <name>Lars Peterson</name> <salary>25000</salary> </employee> <employee> <name>Charlotte M.Cooper</name> <salary>34500</salary> </employee></employees> • XML文档中能出现的有效对象为：处理指令、注释、根元素、子元素和属性。

  22. 处理指令 • 处理指令给XML解析器提供信息，使其能够正确解释文档内容，它的起始标识是“<?”，结束标识是“?>”。常见的XML声明就是一个处理指令： <?xml version="1.0"?> • 处理指令还可以有其它的用途，比如定义文档的编码方式是GB码还是Unicode编码方式，或是把一个样式单文件应用到XML文档上用以显示。

  23. 注释 • 注释是XML文件中用作解释的字符数据，XML处理器不对它们进行任何处理。注释是用“<!--”和“-->”引起来的，可以出现在XML元素间的任何地方，但是不可以嵌套。 <!--这是一个注释-->

  24. 根元素和子元素 如果一个元素从文件头的序言部分之后开始一直到文件尾，包含了文件中所有的数据信息，我们称之为根元素。XML元素是可以嵌套的，那么被嵌套在内的元素称为子元素。在前面的例子中，<employee>就是<employees>的子元素。

  25. 属性 属性给元素提供进一步的说明信息，它必须出现在起始标签中。属性以名称/取值对出现，属性名不能重复，名称与取值之间用等号“=”分隔，并用引号把取值引起来。例如： <salary currency="US$">25000</salary>

  26. XML的文档格式2 • XML文档的基本结构由序言部分和一个根元素组成。序言包括了XML声明和DTD(或者是XML Schema)，DTD(Document Type Define，文档定义类型)和XML Schema都是用来描述XML文档结构的，也就是描述元素和属性是如何联系在一起的。

  27. XML的文档格式3 • XML文档除了要满足根元素唯一的特性之外，还包括： • 起始标签和结束标签应当匹配：结束标签是必不可少的； • 大小写应一致：XML对字母的大小写是敏感的，<employee>和<Employee>是完全不同的两个标签，所以结束标签在匹配时一定要注意大小写一致； • 元素应当正确嵌套：子元素应当完全包括在父辈元素中。 • 属性必须包括在引号中； • 元素中的属性是不允许重复的。

  28. XML语言结构 • XML有许多部分，但是只需要了解其中的三个就可以了解它是怎样工作的。它们是：文档类型定义(Document Type Definition，DTD)，也就是XML的布局语言；可扩展的样式语言(Extensible Style Language：XSL)，也就是XML的样式表语言； 以及可扩展链接语言(Extensible LinkLanguage：XLL)。

  29. 文档类型定义(DTD) • DTD规定文档的逻辑结构。它可以定义文档的语法，而文档的语法反过来能够让XML语法分析程序确认某张页面标记使用的合法性。DTD定义页面的元素、元素的属性以及元素和属性之间的关系。 • DTD不是强制性的。对于简单应用程序来说，开发商不需要建立他们自己的DTD；可以使用预先定义的公共DTD，或者根本就不使用。即使某个文档已经有了DTD，只要文档是组织良好的，语法分析程序也可以不对照DTD来检验文档的合法性。

  30. 可扩展的样式语言(XSL) • XSL是用于规定XML文档样式的语言。XSL能使Web浏览器改变文档的表示法，例如数据的显示顺序改变，就不需要再与服务器进行交互通信。通过变换样式表，同—个文档可以显示得更大，或者经过叠折只显示外面的一层，或者变为打印格式。可以设想一个适合用户学习特点的技术手册，它为初学者和更高一级的用户提供不同的样式，而且所有的样式都是根据同样的文本产生的。 • XSL凭借其可扩展性能够控制无穷无尽的标记，而控制每个标记的方式也是无穷尽的。这就给Web提供了高级的布局特性。例如旋转的文本、多列和独立区域。它支持国际书写格式，可以在一页上混合使用从左至右、从右至左和从上至下的书写格式。正如XML介于HTML和SGML之间一样，XSL标准介于CSS和SGMI的文档样式语义和规范语言之间。

  31. 可扩展链接语言(XLL) • XLL将支持目前Web上已有的简单链接，并且将进一步扩展链接，包括结束死链接的间接链接以及可以从服务器中仅查询某个元素的相关部分的链接等。 • 在为XML所设想的真正的超文本系统中，所有典型的超文本链接机制都将得到支持，包括： • 与位置无关的命名； • 双向链接； • 可以在文档外规定和管理的链接； • 元超链接(如环路、多个窗口)； • 集合链接(多来源)； • Transclusion(链接目标文档是链接源文档的一部分)； • 链接属性(链接类型)。

  32. XML实例 <?xml version="1.0"?> <dining-room> <table type="round" wood="maple"> <manufacturer>The Wood Shop</manufacturer> <price>$1999.99</price> </table> <chair wood="maple"> <quantity>2</quantity> <quality>excellent</quality> <cushion included="true"> <color>blue</color> </cushion> </chair> <chair wood="oak"> <quantity>3</quantity> <quality>average</quality> </chair> </dining-room>

More Related